[KED-2770] - Expose related dataset nodes for focus mode flowchart

src/actions/actions.test.js

@@ -14,6 +14,7 @@ import {
   UPDATE_CHART_SIZE,
   UPDATE_FONT_LOADED,
   TOGGLE_CODE,
+  TOGGLE_MODULAR_PIPELINE_FOCUS_MODE,
   changeFlag,
   resetData,
   toggleIgnoreLargeWarning,
@@ -28,6 +29,7 @@ import {
   toggleTheme,
   updateChartSize,
   updateFontLoaded,
+  toggleFocusMode,
 } from '../actions';
 import {
   TOGGLE_NODE_CLICKED,
@@ -296,4 +298,12 @@ describe('actions', () => {
     };
     expect(toggleCode(true)).toEqual(expectedAction);
   });
+
+  it('should create an action to toggle focus mode for modular pipelines', () => {
+    const expectedAction = {
+      type: TOGGLE_MODULAR_PIPELINE_FOCUS_MODE,
+      modularPipeline: { id: '1234' },
+    };
+    expect(toggleFocusMode({ id: '1234' })).toEqual(expectedAction);
+  });
 });

src/actions/index.js

@@ -220,3 +220,17 @@ export function toggleParametersHovered(hoveredParameters) {
     hoveredParameters,
   };
 }
+
+export const TOGGLE_MODULAR_PIPELINE_FOCUS_MODE =
+  'TOGGLE_MODULAR_PIPELINE_FOCUS_MODE';
+
+/**
+ * Update the value of the selected modular pipeline under focus mode
+ * @param {Object} modularPipeline The selected modular pipeline for focus mode
+ */
+export function toggleFocusMode(modularPipeline) {
+  return {
+    type: TOGGLE_MODULAR_PIPELINE_FOCUS_MODE,
+    modularPipeline,
+  };
+}

src/components/flowchart/draw.js

@@ -122,9 +122,14 @@ export const drawNodes = function (changed) {
     nodeSelected,
     hoveredParameters,
     nodesWithInputParams,
+    inputOutputDataNodes,
     nodes,
+    focusMode,
   } = this.props;
 
+  const isInputOutputNode = (nodeID) =>
+    focusMode !== null && inputOutputDataNodes[nodeID];
+
   if (changed('nodes')) {
     this.el.nodes = this.el.nodeGroup
       .selectAll('.pipeline-node')
@@ -211,7 +216,9 @@ export const drawNodes = function (changed) {
       'hoveredParameters',
       'nodesWithInputParams',
       'clickedNode',
-      'linkedNodes'
+      'linkedNodes',
+      'focusMode',
+      'inputOutputDataNodes'
     )
   ) {
     allNodes
@@ -224,6 +231,14 @@ export const drawNodes = function (changed) {
           nodesWithInputParams[node.id] &&
           nodeTypeDisabled.parameters
       )
+      .classed(
+        'pipeline-node--dataset-input',
+        (node) => isInputOutputNode(node.id) && node.type === 'data'
+      )
+      .classed(
+        'pipeline-node--parameter-input',
+        (node) => isInputOutputNode(node.id) && node.type === 'parameters'
+      )
       .classed(
         'pipeline-node--faded',
         (node) => clickedNode && !linkedNodes[node.id]
@@ -284,7 +299,11 @@ export const drawNodes = function (changed) {
  * Render edge lines
  */
 export const drawEdges = function (changed) {
-  const { edges, clickedNode, linkedNodes } = this.props;
+  const { edges, clickedNode, linkedNodes, focusMode, inputOutputDataEdges } =
+    this.props;
+
+  const isInputOutputEdge = (edgeID) =>
+    focusMode !== null && inputOutputDataEdges[edgeID];
 
   if (changed('edges')) {
     this.el.edges = this.el.edgeGroup
@@ -301,12 +320,17 @@ export const drawEdges = function (changed) {
   const exitEdges = this.el.edges.exit();
   const allEdges = this.el.edges.merge(enterEdges).merge(exitEdges);
 
-  if (changed('edges')) {
-    enterEdges
-      .append('path')
+  if (changed('edges', 'focusMode', 'inputOutputDataNodes')) {
+    enterEdges.append('path');
+    allEdges
+      .select('path')
       .attr('marker-end', (edge) =>
         edge.sourceNode.type === 'parameters'
-          ? `url(#pipeline-arrowhead--accent)`
+          ? isInputOutputEdge(edge.id)
+            ? `url(#pipeline-arrowhead--accent--input)`
+            : `url(#pipeline-arrowhead--accent)`
+          : isInputOutputEdge(edge.id)
+          ? `url(#pipeline-arrowhead--input)`
           : `url(#pipeline-arrowhead)`
       );
 
@@ -343,11 +367,28 @@ export const drawEdges = function (changed) {
     this.el.edges = this.el.edgeGroup.selectAll('.pipeline-edge');
   }
 
-  if (changed('edges', 'clickedNode', 'linkedNodes')) {
+  if (
+    changed(
+      'edges',
+      'clickedNode',
+      'linkedNodes',
+      'focusMode',
+      'inputOutputDataEdges'
+    )
+  ) {
     allEdges
       .classed(
         'pipeline-edge--parameters',
-        (edge) => edge.sourceNode.type === 'parameters'
+        (edge) =>
+          edge.sourceNode.type === 'parameters' && !isInputOutputEdge(edge.id)
+      )
+      .classed(
+        'pipeline-edge--parameters-input',
+        (edge) =>
+          edge.sourceNode.type === 'parameters' && isInputOutputEdge(edge.id)
+      )
+      .classed('pipeline-edge--dataset--input', (edge) =>
+        isInputOutputEdge(edge.id)
       )
       .classed(
         'pipeline-edge--faded',

src/components/flowchart/flowchart.test.js

@@ -281,6 +281,62 @@ describe('FlowChart', () => {
     ).toBe(2);
   });
 
+  it('does not apply pipeline-node--dataset-input class to input dataset nodes when not under focus mode', () => {
+    const wrapper = setup.mount(<FlowChart />);
+    expect(wrapper.render().find('.pipeline-node--dataset-input').length).toBe(
+      0
+    );
+  });
+
+  it('applies pipeline-node--dataset-input class to input dataset nodes under focus mode', () => {
+    const wrapper = setup.mount(
+      <FlowChart
+        nodeTypeDisabled={{ parameters: true }}
+        focusMode={{ id: 'pipeline1' }}
+        inputOutputDataNodes={{
+          '0ae9e4de': { id: '0ae9e4de', name: 'Elephant' },
+          '09f5edeb': { id: '09f5edeb', name: 'Bear' },
+        }}
+      />
+    );
+    expect(wrapper.render().find('.pipeline-node--dataset-input').length).toBe(
+      2
+    );
+  });
+
+  it('applies pipeline-edge--dataset--input class to input dataset edges under focus mode', () => {
+    const wrapper = setup.mount(
+      <FlowChart
+        nodeTypeDisabled={{ parameters: true }}
+        focusMode={{ id: 'pipeline1' }}
+        inputOutputDataEdges={{
+          '0ae9e4de|15586b7a': { id: '0ae9e4de||15586b7a' },
+          '09f5edeb|15586b7a': { id: '09f5edeb||15586b7a' },
+        }}
+      />
+    );
+    expect(wrapper.render().find('.pipeline-edge--dataset--input').length).toBe(
+      2
+    );
+  });
+
+  it('applies pipeline-node--parameter-input class to input parameter nodes under focus mode', () => {
+    const wrapper = setup.mount(
+      <FlowChart
+        focusMode={{ id: 'pipeline1' }}
+        inputOutputDataNodes={{
+          '46734c62': { id: '46734c62' },
+        }}
+      />,
+      {
+        beforeLayoutActions: [() => toggleTypeDisabled('parameters', false)],
+      }
+    );
+    expect(
+      wrapper.render().find('.pipeline-node--parameter-input').length
+    ).toBe(1);
+  });
+
   it('applies .parameters class to all parameter nodes', () => {
     //Parameters are enabled here to override the default behavior
     const wrapper = setup.mount(<FlowChart />, {
@@ -361,6 +417,9 @@ describe('FlowChart', () => {
       visibleSidebar: expect.any(Boolean),
       visibleCode: expect.any(Boolean),
       visibleMetaSidebar: expect.any(Boolean),
+      inputOutputDataNodes: expect.any(Object),
+      inputOutputDataEdges: expect.any(Object),
+      focusMode: expect.any(Object),
     };
     expect(mapStateToProps(mockState.animals)).toEqual(expectedResult);
   });

src/components/flowchart/index.js

@@ -8,7 +8,9 @@ import {
   getNodeActive,
   getNodeSelected,
   getNodesWithInputParams,
+  getInputOutputNodesForFocusedModularPipeline,
 } from '../../selectors/nodes';
+import { getInputOutputDataEdges } from '../../selectors/edges';
 import { getChartSize, getChartZoom } from '../../selectors/layout';
 import { getLayers } from '../../selectors/layers';
 import { getLinkedNodes } from '../../selectors/linked-nodes';
@@ -100,7 +102,15 @@ export class FlowChart extends Component {
       drawLayerNames.call(this);
     }
 
-    if (changed('edges', 'clickedNode', 'linkedNodes')) {
+    if (
+      changed(
+        'edges',
+        'clickedNode',
+        'linkedNodes',
+        'focusMode',
+        'inputOutputDataEdges'
+      )
+    ) {
       drawEdges.call(this, changed);
     }
 
@@ -113,7 +123,9 @@ export class FlowChart extends Component {
         'nodeActive',
         'nodeSelected',
         'hoveredParameters',
-        'nodesWithInputParams'
+        'nodesWithInputParams',
+        'focusMode',
+        'inputOutputDataNodes'
       )
     ) {
       drawNodes.call(this, changed);
@@ -502,7 +514,12 @@ export class FlowChart extends Component {
             })}
             ref={this.wrapperRef}>
             <defs>
-              {['arrowhead', 'arrowhead--accent'].map((id) => (
+              {[
+                'arrowhead',
+                'arrowhead--input',
+                'arrowhead--accent--input',
+                'arrowhead--accent',
+              ].map((id) => (
                 <marker
                   id={`pipeline-${id}`}
                   key={id}
@@ -568,10 +585,13 @@ export const mapStateToProps = (state, ownProps) => ({
   nodeActive: getNodeActive(state),
   nodeSelected: getNodeSelected(state),
   nodesWithInputParams: getNodesWithInputParams(state),
+  inputOutputDataNodes: getInputOutputNodesForFocusedModularPipeline(state),
+  inputOutputDataEdges: getInputOutputDataEdges(state),
   visibleGraph: state.visible.graph,
   visibleSidebar: state.visible.sidebar,
   visibleCode: state.visible.code,
   visibleMetaSidebar: getVisibleMetaSidebar(state),
+  focusMode: state.visible.modularPipelineFocusMode,
   ...ownProps,
 });
 

src/components/flowchart/styles/_edges.scss

@@ -11,6 +11,14 @@
   stroke: var(--parameter-accent);
 }
 
+.pipeline-edge--parameters-input path {
+  stroke: var(--parameter-accent-input);
+}
+
+.pipeline-edge--dataset--input path {
+  stroke-dasharray: 3px 3px;
+}
+
 .pipeline-edge--faded {
   opacity: 0.1;
 }
@@ -19,6 +27,14 @@
   fill: var(--edge-arrowhead-fill);
 }
 
+.pipeline-flowchart__arrowhead--input {
+  fill: var(--node-input-fill);
+}
+
 .pipeline-flowchart__arrowhead--accent {
   fill: var(--parameter-accent);
 }
+
+.pipeline-flowchart__arrowhead--accent--input {
+  fill: var(--parameter-accent-input);
+}

src/components/flowchart/styles/_node.scss

@@ -37,6 +37,38 @@
   }
 }
 
+.pipeline-node--dataset-input {
+  text {
+    fill: var(--node-input-fill);
+  }
+
+  .pipeline-node__bg {
+    fill: none;
+    stroke: var(--node-input-fill);
+    stroke-dasharray: 3px 3px;
+  }
+
+  .pipeline-node__icon {
+    fill: var(--node-input-fill);
+  }
+}
+
+.pipeline-node--parameter-input {
+  text {
+    fill: var(--node-input-fill);
+  }
+
+  .pipeline-node__bg {
+    fill: none;
+    stroke: var(--parameter-accent-input);
+    stroke-dasharray: 3px 3px;
+  }
+
+  .pipeline-node__icon {
+    fill: var(--node-input-fill);
+  }
+}
+
 .pipeline-node__parameter-indicator {
   opacity: 0;
   transition: opacity 0.3s ease;

src/components/flowchart/styles/_variables.scss

@@ -17,7 +17,9 @@
   --edge-arrowhead-fill: #{$color-bg-dark-6};
   --layer-fill: #{mix($color-bg-light-1, $color-bg-light-2)};
   --layer-text: #{rgba(black, 0.65)};
-  --parameter-accent: #a000bc;
+  --node-input-fill: #{rgba(black, 0.4)};
+  --parameter-accent: #{rgba(160, 0, 188, 1)};
+  --parameter-accent-input: #{rgba(160, 0, 188, 0.6)};
 
   @mixin export {
     --node-fill-default: #{$color-bg-light-3};
@@ -48,5 +50,7 @@
   --edge-arrowhead-fill: #cacaca;
   --layer-fill: #{mix($color-bg-dark-1, $color-bg-dark-2)};
   --layer-text: #{rgba(white, 0.65)};
-  --parameter-accent: #ffbc00;
+  --node-input-fill: #{rgba(white, 0.4)};
+  --parameter-accent: #{rgba(255, 188, 0, 1)};
+  --parameter-accent-input: #{rgba(255, 188, 0, 0.6)};
 }