Fixing highlight width inconsistencies in list panel

src/components/flowchart/flowchart.js

@@ -3,7 +3,10 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { select } from 'd3-selection';
 import { updateChartSize, updateZoom } from '../../actions';
-import { toggleSingleModularPipelineExpanded } from '../../actions/modular-pipelines';
+import {
+  toggleSingleModularPipelineExpanded,
+  toggleModularPipelineActive,
+} from '../../actions/modular-pipelines';
 import {
   loadNodeData,
   toggleNodeHovered,
@@ -485,7 +488,11 @@ export class FlowChart extends Component {
    * @param {Object} node Datum for a single node
    */
   handleNodeMouseOver = (event, node) => {
-    this.props.onToggleNodeHovered(node.id);
+    if (node.type === 'modularPipeline') {
+      this.props.onToggleModularPipelineActive(node.id, true);
+    } else {
+      this.props.onToggleNodeHovered(node.id);
+    }
     node && this.showTooltip(event, node.fullName);
   };
 
@@ -552,8 +559,12 @@ export class FlowChart extends Component {
    * Remove a node's active state, hide tooltip, and dim linked nodes
    * @param {Object} node Datum for a single node
    */
-  handleNodeMouseOut = () => {
-    this.props.onToggleNodeHovered(null);
+  handleNodeMouseOut = (event, node) => {
+    if (node.type === 'modularPipeline') {
+      this.props.onToggleModularPipelineActive(node.id, false);
+    } else {
+      this.props.onToggleNodeHovered(null);
+    }
     this.hideTooltip();
   };
 
@@ -742,6 +753,9 @@ export const mapDispatchToProps = (dispatch, ownProps) => ({
   onToggleNodeClicked: (id) => {
     dispatch(toggleNodeClicked(id));
   },
+  onToggleModularPipelineActive: (modularPipelineIDs, active) => {
+    dispatch(toggleModularPipelineActive(modularPipelineIDs, active));
+  },
   onToggleNodeHovered: (nodeHovered) => {
     dispatch(toggleNodeHovered(nodeHovered));
   },

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

@@ -73,7 +73,7 @@ const getModularPipelineRowData = ({
     type: 'modularPipeline',
     icon: 'modularPipeline',
     focusModeIcon: focusModeIcon,
-    active: false,
+    active: data.active,
     selected: false,
     faded: disabled || !checked,
     visible: !disabled && checked,

src/components/node-list/styles/_row-toggle.scss

@@ -26,25 +26,6 @@
   variables.$row-selected-dark
 );
 
-.pipeline-row__toggle::before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -100px;
-  display: block;
-  width: 100px;
-  background: transparent;
-  background: linear-gradient(
-    90deg,
-    var(--row-selected-transparent, 0) 0%,
-    var(--color-nodelist-row-selected) 100%
-  );
-  transform: translate(0, 0);
-  opacity: 0;
-  content: ' ';
-  pointer-events: none;
-}
-
 .pipeline-row__toggle--selected::before {
   opacity: 1;
 }

src/components/node-list/styles/_row.scss

@@ -1,38 +1,35 @@
-@use '../../../styles/variables' as colors;
+@use '../../../styles/variables' as var;
 @use './variables';
 
+.MuiTreeItem-iconContainer svg {
+  z-index: var.$z-index-MuiTreeItem-icon;
+}
+
 .pipeline-nodelist__row {
   position: relative;
   display: flex;
   align-items: center;
+  height: 32px; // Fixed row height required for lazy list, apply any changes to node-list-row.js.
+  transform: translate(
+    0,
+    0
+  ); // Force GPU layers to avoid drawing lag on scroll.
 
-  // Fixed row height required for lazy list, apply any changes to node-list-row.js.
-  height: 32px;
-
-  // Force gpu layers to avoid drawing lag on scroll.
-  transform: translate(0, 0);
+  background-color: initial;
   cursor: default;
 
-  // overwrite material-ui selected row background color settings
   &--overwrite {
     .Mui-selected & {
       .kui-theme--dark & {
-        background-color: #{colors.$slate-200};
+        background-color: var.$slate-200;
       }
 
       .kui-theme--light & {
-        background-color: #{colors.$white-0};
+        background-color: var.$white-0;
       }
     }
   }
 
-  // overwrite with highlighted background for row on hover
-  &--overwrite:hover {
-    .Mui-selected & {
-      background-color: var(--color-nodelist-row-active);
-    }
-  }
-
   &--kind-filter {
     padding: 0 variables.$row-offset-right 0 variables.$row-offset-left;
   }
@@ -43,14 +40,40 @@
   }
 
   &--selected,
-  // Additional selector required to increase specificity to override previous rule:
   &--visible#{&}--selected {
+    // Additional selector required to increase specificity to override previous rule
     background-color: var(--color-nodelist-row-selected);
+    border-right: 1px solid var.$blue-300;
   }
 
   &--disabled {
     pointer-events: none;
   }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -100px;
+    width: 100px;
+    background: var(--color-nodelist-row-selected);
+    transform: translate(0, 0);
+    opacity: 0;
+    content: ' ';
+    pointer-events: none;
+  }
+}
+
+.pipeline-nodelist__row--active::before,
+.pipeline-nodelist__row--selected::before,
+.pipeline-nodelist__row:hover::before {
+  opacity: 1;
+}
+
+.pipeline-nodelist__row--overwrite::before {
+  .Mui-selected & {
+    opacity: 1;
+  }
 }
 
 .pipeline-nodelist__row__icon {
@@ -61,7 +84,7 @@
   fill: var(--color-text);
 
   &.pipeline-row__toggle-icon--focus-checked {
-    fill: colors.$blue-300;
+    fill: var.$blue-300;
   }
 
   &--disabled > * {

src/components/node-list/styles/node-list.scss

@@ -91,9 +91,5 @@
 
   .MuiTreeItem-content {
     padding: 0;
-
-    &:hover {
-      background-color: var(--color-nodelist-row-active);
-    }
   }
 }

src/styles/_variables.scss

@@ -30,6 +30,7 @@ $run-list-controls-height: 95px;
 // -- levels -- //
 $z-index-metadata-panel: 3;
 $z-index-metadata-code: 3;
+$z-index-MuiTreeItem-icon: 1;
 
 // Micro-animation
 $run-width: 375px;