Fix/focus mode modular pipeline highlight

src/actions/index.js

@@ -234,3 +234,16 @@ export function toggleFocusMode(modularPipeline) {
     modularPipeline,
   };
 }
+
+export const TOGGLE_HOVERED_FOCUS_MODE = 'TOGGLE_HOVERED_FOCUS_MODE';
+
+/**
+ * Update the value of the of the currently-active hovered node from focus mode
+ * @param {string|null} nodeHovered The node's unique identifier
+ */
+export function toggleHoveredFocusMode(hoveredFocusMode) {
+  return {
+    type: TOGGLE_HOVERED_FOCUS_MODE,
+    hoveredFocusMode,
+  };
+}

src/components/flowchart/draw.js

@@ -134,6 +134,7 @@ export const drawNodes = function (changed) {
     inputOutputDataNodes,
     nodes,
     focusMode,
+    hoveredFocusMode,
   } = this.props;
 
   const isInputOutputNode = (nodeID) =>
@@ -260,6 +261,13 @@ export const drawNodes = function (changed) {
       );
   }
 
+  if (changed('nodes', 'nodeActive', 'hoveredFocusMode')) {
+    allNodes.classed(
+      'pipeline-node--faded',
+      (node) => hoveredFocusMode && !nodeActive[node.id]
+    );
+  }
+
   if (changed('nodes')) {
     allNodes
       .transition('update-nodes')

src/components/flowchart/flowchart.js

@@ -150,6 +150,10 @@ export class FlowChart extends Component {
       drawNodes.call(this, changed);
     }
 
+    if (changed('nodes', 'nodeActive', 'hoveredFocusMode')) {
+      drawNodes.call(this, changed);
+    }
+
     if (changed('edges', 'nodes', 'layers', 'chartSize', 'clickedNode')) {
       this.resetView();
     } else {
@@ -682,6 +686,7 @@ export const mapStateToProps = (state, ownProps) => ({
   focusMode: state.visible.modularPipelineFocusMode,
   graphSize: state.graph.size || emptyGraphSize,
   hoveredParameters: state.hoveredParameters,
+  hoveredFocusMode: state.hoveredFocusMode,
   layers: getLayers(state),
   linkedNodes: getLinkedNodes(state),
   nodes: state.graph.nodes || emptyNodes,

src/components/flowchart/flowchart.test.js

@@ -432,6 +432,7 @@ describe('FlowChart', () => {
       edges: expect.any(Array),
       graphSize: expect.any(Object),
       hoveredParameters: expect.any(Boolean),
+      hoveredFocusMode: expect.any(Boolean),
       layers: expect.any(Array),
       linkedNodes: expect.any(Object),
       nodeActive: expect.any(Object),

src/components/node-list/node-list-row.js

@@ -7,6 +7,7 @@ import VisibleIcon from '../icons/visible';
 import InvisibleIcon from '../icons/invisible';
 import FocusModeIcon from '../icons/focus-mode';
 import { getNodeActive } from '../../selectors/nodes';
+import { toggleHoveredFocusMode } from '../../actions';
 
 // The exact fixed height of a row as measured by getBoundingClientRect()
 export const nodeListRowHeight = 32;
@@ -67,6 +68,7 @@ const NodeListRow = memo(
     invisibleIcon = InvisibleIcon,
     focusModeIcon = FocusModeIcon,
     rowType,
+    onToggleHoveredFocusMode,
   }) => {
     const isModularPipeline = type === 'modularPipeline';
     const FocusIcon = isModularPipeline ? focusModeIcon : null;
@@ -198,6 +200,8 @@ const NodeListRow = memo(
               }
             )}
             onClick={(e) => e.stopPropagation()}
+            onMouseEnter={() => onToggleHoveredFocusMode(true)}
+            onMouseLeave={() => onToggleHoveredFocusMode(false)}
           >
             <input
               id={id + '-focus'}
@@ -236,6 +240,12 @@ const NodeListRow = memo(
   shouldMemo
 );
 
+export const mapDispatchToProps = (dispatch) => ({
+  onToggleHoveredFocusMode: (active) => {
+    dispatch(toggleHoveredFocusMode(active));
+  },
+});
+
 export const mapStateToProps = (state, ownProps) => ({
   ...ownProps,
   active:
@@ -244,4 +254,4 @@ export const mapStateToProps = (state, ownProps) => ({
       : getNodeActive(state)[ownProps.id] || false,
 });
 
-export default connect(mapStateToProps)(NodeListRow);
+export default connect(mapStateToProps, mapDispatchToProps)(NodeListRow);

src/reducers/index.js

@@ -17,6 +17,7 @@ import {
   UPDATE_ZOOM,
   TOGGLE_IGNORE_LARGE_WARNING,
   TOGGLE_PRETTY_NAME,
+  TOGGLE_HOVERED_FOCUS_MODE,
 } from '../actions';
 import { TOGGLE_PARAMETERS_HOVERED } from '../actions';
 
@@ -81,6 +82,11 @@ const combinedReducer = combineReducers({
     TOGGLE_IGNORE_LARGE_WARNING,
     'ignoreLargeWarning'
   ),
+  hoveredFocusMode: createReducer(
+    false,
+    TOGGLE_HOVERED_FOCUS_MODE,
+    'hoveredFocusMode'
+  ),
 });
 
 const rootReducer = (state, action) =>

src/store/normalize-data.js

@@ -70,6 +70,7 @@ export const createInitialPipelineState = () => ({
     enabled: {},
   },
   hoveredParameters: false,
+  hoveredFocusMode: false,
 });
 
 /**