wip

Signed-off-by: rashidakanchwala <[email protected]>
kedro-org · Nov 6, 2024 · c2bd671 · c2bd671
1 parent 02331cc
commit c2bd671
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 71 deletions.
diff --git a/src/components/node-list/index.js b/src/components/node-list/index.js
@@ -14,10 +14,7 @@ import {
   isModularPipelineType,
 } from '../../selectors/node-types';
 import { getTagData, getTagNodeCounts } from '../../selectors/tags';
-import {
-  getFocusedModularPipeline,
-  getModularPipelinesSearchResult,
-} from '../../selectors/modular-pipelines';
+import { getFocusedModularPipeline } from '../../selectors/modular-pipelines';
 import {
   getGroupedNodes,
   getNodeSelected,
@@ -94,10 +91,6 @@ const NodeListProvider = ({
     inputOutputDataNodes,
   });
 
-  const modularPipelinesSearchResult = searchValue
-    ? getModularPipelinesSearchResult(modularPipelinesTree, searchValue)
-    : null;
-
   const groups = getGroups({ items });
 
   const onItemClick = (item) => {
@@ -305,7 +298,6 @@ const NodeListProvider = ({
       faded={faded}
       items={items}
       modularPipelinesTree={modularPipelinesTree}
-      modularPipelinesSearchResult={modularPipelinesSearchResult}
       groups={groups}
       searchValue={searchValue}
       onUpdateSearchValue={debounce(updateSearchValue, 250)}

diff --git a/src/components/node-list/node-list-tree.js b/src/components/node-list/node-list-tree.js
@@ -10,7 +10,9 @@ import sortBy from 'lodash/sortBy';
 
 import { loadNodeData } from '../../actions/nodes';
 import { getNodeSelected } from '../../selectors/nodes';
+import { getNodeDisabledViaModularPipeline } from '../../selectors/disabled';
 import { isModularPipelineType } from '../../selectors/node-types';
+import { getModularPipelinesSearchResult } from '../../selectors/modular-pipelines';
 import NodeListTreeItem from './node-list-tree-item';
 import VisibleIcon from '../icons/visible';
 import InvisibleIcon from '../icons/invisible';
@@ -36,20 +38,6 @@ const StyledTreeView = styled(TreeView)({
   padding: '0 0 0 20px',
 });
 
-/**
- * Return whether the given modular pipeline ID is on focus mode path, i.e.
- * it's not the currently focused pipeline nor one of its children.
- * @param {String} focusModeID The currently focused modular pipeline ID.
- * @param {String} modularPipelineID The modular pipeline ID to check.
- * @return {Boolean} Whether the given modular pipeline ID is on focus mode path.
- */
-const isOnFocusedModePath = (focusModeID, modularPipelineID) => {
-  return (
-    modularPipelineID === focusModeID ||
-    modularPipelineID.startsWith(`${focusModeID}.`)
-  );
-};
-
 /**
  * Return the data of a modular pipeline to display as a row in the node list.
  * @param {Object} params
@@ -78,8 +66,8 @@ const getModularPipelineRowData = ({
     focusModeIcon: focusModeIcon,
     active: data.active,
     selected: false,
-    faded: disabled || !checked,
-    visible: !disabled && checked,
+    faded: !checked,
+    visible: checked,
     enabled: true,
     disabled: disabled,
     focused: focused,
@@ -103,7 +91,7 @@ const getNodeRowData = (node, disabled, selected, highlight) => {
     active: node.active,
     selected,
     highlight,
-    faded: disabled || node.disabledNode,
+    faded: node.disabledNode,
     visible: !disabled && checked,
     checked,
     disabled,
@@ -112,47 +100,41 @@ const getNodeRowData = (node, disabled, selected, highlight) => {
 
 const TreeListProvider = ({
   nodeSelected,
-  modularPipelinesSearchResult,
+  nodeDisabledViaModularPipeline,
+  searchValue,
   modularPipelinesTree,
   onItemChange,
   onItemMouseEnter,
   onItemMouseLeave,
   onItemClick,
   onNodeToggleExpanded,
   focusMode,
-  disabledModularPipeline,
   expanded,
   onToggleNodeSelected,
   slicedPipeline,
   isSlicingPipelineApplied,
 }) => {
   // render a leaf node in the modular pipelines tree
+
+  const modularPipelinesSearchResult = searchValue
+    ? getModularPipelinesSearchResult(modularPipelinesTree, searchValue)
+    : null;
+
   const renderLeafNode = (node) => {
     // As part of the slicing pipeline logic, child nodes not included in the sliced pipeline are assigned an empty data object.
     // Therefore, if a child node has an empty data object, it indicates it's not part of the slicing pipeline and should not be rendered.
-    if (Object.keys(node).length === 0) {
+    if (!node || Object.keys(node).length === 0) {
       return null;
     }
 
     const disabled =
       node.disabledTag ||
       node.disabledType ||
-      (focusMode &&
-        !node.modularPipelines
-          .map((modularPipelineID) =>
-            isOnFocusedModePath(focusMode.id, modularPipelineID)
-          )
-          .some(Boolean)) ||
-      (node.modularPipelines &&
-        node.modularPipelines
-          .map(
-            (modularPipelineID) => disabledModularPipeline[modularPipelineID]
-          )
-          .some(Boolean));
+      nodeDisabledViaModularPipeline[node.id];
 
     const selected = nodeSelected[node.id];
-
     const highlight = slicedPipeline.includes(node.id);
+
     const data = getNodeRowData(node, disabled, selected, highlight);
 
     return (
@@ -220,7 +202,7 @@ const TreeListProvider = ({
     const data = getModularPipelineRowData({
       ...node,
       focusModeIcon,
-      disabled: focusMode && !isOnFocusedModePath(focusMode.id, node.id),
+      disabled: nodeDisabledViaModularPipeline[node.id],
       focused: isFocusedModularPipeline,
       highlight,
     });
@@ -272,6 +254,7 @@ const TreeListProvider = ({
 
 export const mapStateToProps = (state) => ({
   nodeSelected: getNodeSelected(state),
+  nodeDisabledViaModularPipeline: getNodeDisabledViaModularPipeline(state),
   expanded: state.modularPipeline.expanded,
   slicedPipeline: getSlicedPipeline(state),
   isSlicingPipelineApplied: state.slice.apply,

diff --git a/src/components/node-list/node-list.js b/src/components/node-list/node-list.js
@@ -15,7 +15,6 @@ const NodeList = ({
   faded,
   items,
   modularPipelinesTree,
-  modularPipelinesSearchResult,
   groups,
   searchValue,
   getGroupState,
@@ -58,7 +57,6 @@ const NodeList = ({
               >
                 <div className="pipeline-nodelist-section">
                   <NodeListTree
-                    modularPipelinesSearchResult={modularPipelinesSearchResult}
                     modularPipelinesTree={modularPipelinesTree}
                     searchValue={searchValue}
                     faded={faded}

diff --git a/src/selectors/disabled.js b/src/selectors/disabled.js
@@ -63,6 +63,57 @@ export const getNodeDisabledTag = createSelector(
     })
 );
 
+/**
+ * Determine if a node is disabled via disabled modular pipeline or focused modular pipeline.
+ */
+export const getNodeDisabledViaModularPipeline = createSelector(
+  [
+    getNodeIDs,
+    getNodeType,
+    getNodeModularPipelines,
+    getModularPipelinesTree,
+    getFocusedModularPipeline,
+    getDisabledModularPipeline,
+  ],
+  (
+    nodeIDs,
+    nodeType,
+    nodeModularPipelines,
+    modularPipelinesTree,
+    focusedModularPipeline,
+    disabledModularPipeline
+  ) =>
+    arrayToObject(nodeIDs, (id) => {
+      let isDisabledViaModularPipeline =
+        disabledModularPipeline[nodeModularPipelines[id]];
+
+      let isDisabledViaFocusedModularPipeline = false;
+
+      if (focusedModularPipeline) {
+        const inputOutputNodeIDs = [
+          ...modularPipelinesTree[focusedModularPipeline.id].inputs,
+          ...modularPipelinesTree[focusedModularPipeline.id].outputs,
+        ];
+
+        if (nodeType[id] === 'modularPipeline') {
+          return (
+            id !== focusedModularPipeline.id &&
+            !id.startsWith(`${focusedModularPipeline.id}.`)
+          );
+        }
+
+        isDisabledViaFocusedModularPipeline =
+          !nodeModularPipelines[id].includes(focusedModularPipeline.id) &&
+          !inputOutputNodeIDs.includes(id);
+      }
+
+      return [
+        isDisabledViaFocusedModularPipeline,
+        isDisabledViaModularPipeline,
+      ].some(Boolean);
+    })
+);
+
 /**
  * Set disabled status if the node is specifically hidden, and/or via a tag/view/type/modularPipeline
  */
@@ -72,11 +123,9 @@ export const getNodeDisabled = createSelector(
     getNodeDisabledNode,
     getNodeDisabledTag,
     getNodeDisabledPipeline,
+    getNodeDisabledViaModularPipeline,
     getNodeType,
     getNodeTypeDisabled,
-    getNodeModularPipelines,
-    getModularPipelinesTree,
-    getFocusedModularPipeline,
     getVisibleSidebarNodes,
     getVisibleModularPipelineInputsOutputs,
     getDisabledModularPipeline,
@@ -88,21 +137,16 @@ export const getNodeDisabled = createSelector(
     nodeDisabledNode,
     nodeDisabledTag,
     nodeDisabledPipeline,
+    nodeDisabledViaModularPipeline,
     nodeType,
     typeDisabled,
-    nodeModularPipelines,
-    modularPipelinesTree,
-    focusedModularPipeline,
     visibleSidebarNodes,
     visibleModularPipelineInputsOutputs,
     disabledModularPipeline,
     slicedPipeline,
     isSliceApplied
   ) =>
     arrayToObject(nodeIDs, (id) => {
-      let isDisabledViaModularPipeline =
-        disabledModularPipeline[nodeModularPipelines[id]];
-
       let isDisabledViaSlicedPipeline = false;
       if (isSliceApplied && slicedPipeline.length > 0) {
         isDisabledViaSlicedPipeline = !slicedPipeline.includes(id);
@@ -112,22 +156,8 @@ export const getNodeDisabled = createSelector(
         !visibleSidebarNodes[id] &&
         !visibleModularPipelineInputsOutputs.has(id);
 
-      let isDisabledViaFocusedModularPipeline = false;
-      if (focusedModularPipeline) {
-        const inputOutputNodeIDs = [
-          ...modularPipelinesTree[focusedModularPipeline.id].inputs,
-          ...modularPipelinesTree[focusedModularPipeline.id].outputs,
-        ];
-        if (nodeType[id] === 'modularPipeline') {
-          isDisabledViaFocusedModularPipeline =
-            id !== focusedModularPipeline.id &&
-            !id.startsWith(`${focusedModularPipeline.id}.`);
-        } else {
-          isDisabledViaFocusedModularPipeline =
-            !nodeModularPipelines[id].includes(focusedModularPipeline.id) &&
-            !inputOutputNodeIDs.includes(id);
-        }
-      }
+      const isDisabledViaModularPipeline = nodeDisabledViaModularPipeline[id];
+
       return [
         nodeDisabledNode[id],
         nodeDisabledTag[id],
@@ -136,7 +166,6 @@ export const getNodeDisabled = createSelector(
         typeDisabled[nodeType[id]],
         isDisabledViaSidebar,
         isDisabledViaModularPipeline,
-        isDisabledViaFocusedModularPipeline,
         isDisabledViaSlicedPipeline,
       ].some(Boolean);
     })