diff --git a/src/components/flowchart/draw.js b/src/components/flowchart/draw.js index d221bf4d29..d55ebb2d85 100644 --- a/src/components/flowchart/draw.js +++ b/src/components/flowchart/draw.js @@ -135,6 +135,7 @@ export const drawNodes = function (changed) { nodes, focusMode, hoveredFocusMode, + flags, } = this.props; const isInputOutputNode = (nodeID) => @@ -171,6 +172,10 @@ export const drawNodes = function (changed) { ) .classed('pipeline-node--data', (node) => node.type === 'data') .classed('pipeline-node--task', (node) => node.type === 'task') + .classed( + 'pipeline-node--memory-data', + (node) => flags?.diffMemoryDatasets && node?.dataset?.includes('memory') + ) .on('click', this.handleNodeClick) .on('mouseover', this.handleNodeMouseOver) .on('mouseout', this.handleNodeMouseOut) diff --git a/src/components/flowchart/flowchart.js b/src/components/flowchart/flowchart.js index 1590a7823e..8784f94035 100644 --- a/src/components/flowchart/flowchart.js +++ b/src/components/flowchart/flowchart.js @@ -708,6 +708,7 @@ export const mapStateToProps = (state, ownProps) => ({ visibleSidebar: state.visible.sidebar, visibleCode: state.visible.code, visibleMetaSidebar: getVisibleMetaSidebar(state), + flags: state.flags, ...ownProps, }); diff --git a/src/components/flowchart/styles/_node.scss b/src/components/flowchart/styles/_node.scss index 913593bb11..58e3697e87 100644 --- a/src/components/flowchart/styles/_node.scss +++ b/src/components/flowchart/styles/_node.scss @@ -136,3 +136,7 @@ .pipeline-node__text { transition: opacity 0.15s ease; } + +.pipeline-node--memory-data { + opacity: 0.3; +} diff --git a/src/config.js b/src/config.js index 0dcd774430..d3518eba80 100644 --- a/src/config.js +++ b/src/config.js @@ -69,6 +69,13 @@ export const flags = { default: false, icon: '🔛', }, + diffMemoryDatasets: { + name: 'Distinctive Memory Dataset flowchart view', + description: + 'Fades non-persistent i.e. MemoryDatasets to distinguish them from persistent datasets in the flowchart', + default: false, + icon: '🔛', + }, }; export const settings = { diff --git a/src/selectors/nodes.js b/src/selectors/nodes.js index 994c134c6c..02b44e9d71 100644 --- a/src/selectors/nodes.js +++ b/src/selectors/nodes.js @@ -396,6 +396,7 @@ export const getVisibleNodes = createSelector( name: nodeLabel[id], fullName: nodeFullName[id], icon: getShortType(nodeDatasetType[id], nodeType[id]), + dataset: nodeDatasetType[id], type: nodeType[id], layer: nodeLayer[id], rank: nodeRank[id],