Improve performance on generating layers view

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

@@ -2,6 +2,7 @@
 import { reportToSentry } from '../../utils';
 import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
 import LinksLayer from '../graph_shared/links_layer.vue';
+import { generateColumnsFromLayersListMemoized } from '../parsing_utils';
 import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from './constants';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import StageColumnComponent from './stage_column_component.vue';
@@ -74,7 +75,9 @@ export default {
       return this.hasDownstreamPipelines ? this.pipeline.downstream : [];
     },
     layout() {
-      return this.isStageView ? this.pipeline.stages : this.generateColumnsFromLayersList();
+      return this.isStageView
+        ? this.pipeline.stages
+        : generateColumnsFromLayersListMemoized(this.pipeline, this.pipelineLayers);
     },
     hasDownstreamPipelines() {
       return Boolean(this.pipeline?.downstream?.length > 0);
@@ -120,26 +123,6 @@ export default {
     this.getMeasurements();
   },
   methods: {
-    generateColumnsFromLayersList() {
-      return this.pipelineLayers.map((layers, idx) => {
-        /*
-          look up the groups in each layer,
-          then add each set of layer groups to a stage-like object
-        */
-
-        const groups = layers.map((id) => {
-          const { stageIdx, groupIdx } = this.pipeline.stagesLookup[id];
-          return this.pipeline.stages?.[stageIdx]?.groups?.[groupIdx];
-        });
-
-        return {
-          name: '',
-          id: `layer-${idx}`,
-          status: { action: null },
-          groups: groups.filter(Boolean),
-        };
-      });
-    },
     getMeasurements() {
       this.measurements = {
         width: this.$refs[this.containerId].scrollWidth,

app/assets/javascripts/pipelines/components/parsing_utils.js

-import { uniqWith, isEqual } from 'lodash';
+import { isEqual, memoize, uniqWith } from 'lodash';
 import { createSankey } from './dag/drawing_utils';
 
 /*
@@ -170,3 +170,26 @@ export const listByLayers = ({ stages }) => {
     return acc;
   }, []);
 };
+
+export const generateColumnsFromLayersListBare = ({ stages, stagesLookup }, pipelineLayers) => {
+  return pipelineLayers.map((layers, idx) => {
+    /*
+      Look up the groups in each layer,
+      then add each set of layer groups to a stage-like object.
+    */
+
+    const groups = layers.map((id) => {
+      const { stageIdx, groupIdx } = stagesLookup[id];
+      return stages[stageIdx]?.groups?.[groupIdx];
+    });
+
+    return {
+      name: '',
+      id: `layer-${idx}`,
+      status: { action: null },
+      groups: groups.filter(Boolean),
+    };
+  });
+};
+
+export const generateColumnsFromLayersListMemoized = memoize(generateColumnsFromLayersListBare);

spec/frontend/pipelines/components/dag/parsing_utils_spec.js → spec/frontend/pipelines/parsing_utils_spec.js

@@ -3,12 +3,15 @@ import {
   createNodeDict,
   makeLinksFromNodes,
   filterByAncestors,
+  generateColumnsFromLayersListBare,
+  listByLayers,
   parseData,
   removeOrphanNodes,
   getMaxNodes,
 } from '~/pipelines/components/parsing_utils';
 
-import { mockParsedGraphQLNodes } from './mock_data';
+import { mockParsedGraphQLNodes } from './components/dag/mock_data';
+import { generateResponse, mockPipelineResponse } from './graph/mock_data';
 
 describe('DAG visualization parsing utilities', () => {
   const nodeDict = createNodeDict(mockParsedGraphQLNodes);
@@ -108,4 +111,45 @@ describe('DAG visualization parsing utilities', () => {
       expect(getMaxNodes(layerNodes)).toBe(3);
     });
   });
+
+  describe('generateColumnsFromLayersList', () => {
+    const pipeline = generateResponse(mockPipelineResponse, 'root/fungi-xoxo');
+    const layers = listByLayers(pipeline);
+    const columns = generateColumnsFromLayersListBare(pipeline, layers);
+
+    it('returns stage-like objects with default name, id, and status', () => {
+      columns.forEach((col, idx) => {
+        expect(col).toMatchObject({
+          name: '',
+          status: { action: null },
+          id: `layer-${idx}`,
+        });
+      });
+    });
+
+    it('creates groups that match the list created in listByLayers', () => {
+      columns.forEach((col, idx) => {
+        const groupNames = col.groups.map(({ name }) => name);
+        expect(groupNames).toEqual(layers[idx]);
+      });
+    });
+
+    it('looks up the correct group object', () => {
+      columns.forEach((col) => {
+        col.groups.forEach((group) => {
+          const groupStage = pipeline.stages.find((el) => el.name === group.stageName);
+          const groupObject = groupStage.groups.find((el) => el.name === group.name);
+          expect(group).toBe(groupObject);
+        });
+      });
+    });
+
+    /*
+      Just as a fallback in case multiple functions change, so tests pass
+      but the implementation moves away from case.
+    */
+    it('matches the snapshot', () => {
+      expect(columns).toMatchSnapshot();
+    });
+  });
 });