Commit 81084565 authored by Sarah Groff Hennigh-Palermo's avatar Sarah Groff Hennigh-Palermo Committed by Jose Ivan Vargas

Improve performance on generating layers view

parent 0463eb5a
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import { reportToSentry } from '../../utils'; import { reportToSentry } from '../../utils';
import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue'; import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
import LinksLayer from '../graph_shared/links_layer.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 { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from './constants';
import LinkedPipelinesColumn from './linked_pipelines_column.vue'; import LinkedPipelinesColumn from './linked_pipelines_column.vue';
import StageColumnComponent from './stage_column_component.vue'; import StageColumnComponent from './stage_column_component.vue';
...@@ -74,7 +75,9 @@ export default { ...@@ -74,7 +75,9 @@ export default {
return this.hasDownstreamPipelines ? this.pipeline.downstream : []; return this.hasDownstreamPipelines ? this.pipeline.downstream : [];
}, },
layout() { layout() {
return this.isStageView ? this.pipeline.stages : this.generateColumnsFromLayersList(); return this.isStageView
? this.pipeline.stages
: generateColumnsFromLayersListMemoized(this.pipeline, this.pipelineLayers);
}, },
hasDownstreamPipelines() { hasDownstreamPipelines() {
return Boolean(this.pipeline?.downstream?.length > 0); return Boolean(this.pipeline?.downstream?.length > 0);
...@@ -120,26 +123,6 @@ export default { ...@@ -120,26 +123,6 @@ export default {
this.getMeasurements(); this.getMeasurements();
}, },
methods: { 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() { getMeasurements() {
this.measurements = { this.measurements = {
width: this.$refs[this.containerId].scrollWidth, width: this.$refs[this.containerId].scrollWidth,
......
import { uniqWith, isEqual } from 'lodash'; import { isEqual, memoize, uniqWith } from 'lodash';
import { createSankey } from './dag/drawing_utils'; import { createSankey } from './dag/drawing_utils';
/* /*
...@@ -170,3 +170,26 @@ export const listByLayers = ({ stages }) => { ...@@ -170,3 +170,26 @@ export const listByLayers = ({ stages }) => {
return acc; 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);
...@@ -3,12 +3,15 @@ import { ...@@ -3,12 +3,15 @@ import {
createNodeDict, createNodeDict,
makeLinksFromNodes, makeLinksFromNodes,
filterByAncestors, filterByAncestors,
generateColumnsFromLayersListBare,
listByLayers,
parseData, parseData,
removeOrphanNodes, removeOrphanNodes,
getMaxNodes, getMaxNodes,
} from '~/pipelines/components/parsing_utils'; } 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', () => { describe('DAG visualization parsing utilities', () => {
const nodeDict = createNodeDict(mockParsedGraphQLNodes); const nodeDict = createNodeDict(mockParsedGraphQLNodes);
...@@ -108,4 +111,45 @@ describe('DAG visualization parsing utilities', () => { ...@@ -108,4 +111,45 @@ describe('DAG visualization parsing utilities', () => {
expect(getMaxNodes(layerNodes)).toBe(3); 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();
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment