Pipeline Graph: Scroll downstream pipeline into view on load

app/assets/javascripts/pipelines/components/graph/constants.js

@@ -2,5 +2,11 @@ export const DOWNSTREAM = 'downstream';
 export const MAIN = 'main';
 export const UPSTREAM = 'upstream';
 
+/*
+  this value is based on the gl-pipeline-job-width class
+  plus some extra for the margins
+*/
+export const ONE_COL_WIDTH = 180;
+
 export const REST = 'rest';
 export const GRAPHQL = 'graphql';

app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -3,7 +3,7 @@ import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
 import LinksLayer from '../graph_shared/links_layer.vue';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import StageColumnComponent from './stage_column_component.vue';
-import { DOWNSTREAM, MAIN, UPSTREAM } from './constants';
+import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH } from './constants';
 import { reportToSentry } from './utils';
 
 export default {
@@ -101,6 +101,13 @@ export default {
     setJob(jobName) {
       this.hoveredJobName = jobName;
     },
+    slidePipelineContainer() {
+      this.$refs.mainPipelineContainer.scrollBy({
+        left: ONE_COL_WIDTH,
+        top: 0,
+        behavior: 'smooth',
+      });
+    },
     togglePipelineExpanded(jobName, expanded) {
       this.pipelineExpanded = {
         expanded,
@@ -116,6 +123,7 @@ export default {
 <template>
   <div class="js-pipeline-graph">
     <div
+      ref="mainPipelineContainer"
       class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap"
       :class="{ 'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isLinkedPipeline }"
     >
@@ -165,6 +173,7 @@ export default {
             :type="$options.pipelineTypeConstants.DOWNSTREAM"
             @downstreamHovered="setJob"
             @pipelineExpandToggle="togglePipelineExpanded"
+            @scrollContainer="slidePipelineContainer"
             @error="onError"
           />
         </template>

app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue

@@ -2,7 +2,7 @@
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
 import LinkedPipeline from './linked_pipeline.vue';
 import { LOAD_FAILURE } from '../../constants';
-import { UPSTREAM } from './constants';
+import { ONE_COL_WIDTH, UPSTREAM } from './constants';
 import { unwrapPipelineData, toggleQueryPollingByVisibility, reportToSentry } from './utils';
 
 export default {
@@ -28,6 +28,7 @@ export default {
     return {
       currentPipeline: null,
       loadingPipelineId: null,
+      minWidth: 0,
       pipelineExpanded: false,
     };
   },
@@ -79,6 +80,7 @@ export default {
         },
         result() {
           this.loadingPipelineId = null;
+          this.$emit('scrollContainer');
         },
         error(err, _vm, _key, type) {
           this.$emit('error', LOAD_FAILURE);
@@ -103,6 +105,7 @@ export default {
       if (this.currentPipeline?.id === pipeline.id) {
         this.pipelineExpanded = false;
         this.currentPipeline = null;
+        this.minWidth = 0;
         return;
       }
 
@@ -117,6 +120,11 @@ export default {
       */
       this.pipelineExpanded = true;
 
+      /*
+        Min-width is set manually for timing reasons.
+      */
+      this.minWidth = `${ONE_COL_WIDTH}px`;
+
       this.getPipelineData(pipeline);
     },
     onDownstreamHovered(jobName) {
@@ -158,7 +166,11 @@ export default {
             @pipelineClicked="onPipelineClick(pipeline)"
             @pipelineExpandToggle="onPipelineExpandToggle"
           />
-          <div v-if="isExpanded(pipeline.id)" class="gl-display-inline-block">
+          <div
+            v-if="isExpanded(pipeline.id) && !isUpstream"
+            :style="{ minWidth }"
+            class="gl-display-inline-block"
+          >
             <pipeline-graph
               v-if="currentPipeline"
               :type="type"