diff --git a/src/components/node-list-tree/node-list-tree.js b/src/components/node-list-tree/node-list-tree.js
index 6aaab1cdb..fdb5df54d 100644
--- a/src/components/node-list-tree/node-list-tree.js
+++ b/src/components/node-list-tree/node-list-tree.js
@@ -34,20 +34,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
@@ -102,7 +88,7 @@ const getNodeRowData = (node, disabled, hoveredNode, selected, highlight) => {
active: node.active || hoveredNode === node.id,
selected,
highlight,
- faded: disabled || node.disabledNode,
+ faded: disabled || !checked,
visible: !disabled && checked,
checked,
disabled,
@@ -121,38 +107,26 @@ const TreeListProvider = ({
onItemClick,
onNodeToggleExpanded,
focusMode,
- disabledModularPipeline,
expanded,
onToggleNodeSelected,
slicedPipeline,
isSlicingPipelineApplied,
+ nodesDisabledViaModularPipeline,
}) => {
// render a leaf node in the modular pipelines tree
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));
+ nodesDisabledViaModularPipeline[node.id];
const selected = nodeSelected[node.id];
-
const highlight = slicedPipeline.includes(node.id);
const data = getNodeRowData(
node,
@@ -228,7 +202,7 @@ const TreeListProvider = ({
const data = getModularPipelineRowData({
...node,
focusModeIcon,
- disabled: focusMode && !isOnFocusedModePath(focusMode.id, node.id),
+ disabled: nodesDisabledViaModularPipeline[node.id],
focused: isFocusedModularPipeline,
highlight,
});
diff --git a/src/components/nodes-panel/nodes-panel.js b/src/components/nodes-panel/nodes-panel.js
index 8c845108d..8a8957cf6 100644
--- a/src/components/nodes-panel/nodes-panel.js
+++ b/src/components/nodes-panel/nodes-panel.js
@@ -30,7 +30,6 @@ const NodesPanel = ({ faded }) => {
const {
hoveredNode,
- disabledModularPipeline,
expanded,
focusMode,
handleItemMouseEnter,
@@ -44,6 +43,7 @@ const NodesPanel = ({ faded }) => {
modularPipelinesTree,
selectedNodes,
slicedPipeline,
+ nodesDisabledViaModularPipeline,
} = useContext(NodeListContext);
const modularPipelinesSearchResult = searchValue
@@ -87,7 +87,6 @@ const NodesPanel = ({ faded }) => {
{
onToggleHoveredFocusMode={handleToggleHoveredFocusMode}
searchValue={searchValue}
slicedPipeline={slicedPipeline}
+ nodesDisabledViaModularPipeline={
+ nodesDisabledViaModularPipeline
+ }
/>
diff --git a/src/components/nodes-panel/nodes-panel.test.js b/src/components/nodes-panel/nodes-panel.test.js
index a136fbc74..8d56c56ad 100644
--- a/src/components/nodes-panel/nodes-panel.test.js
+++ b/src/components/nodes-panel/nodes-panel.test.js
@@ -251,10 +251,6 @@ describe('NodesPanel', () => {
.find('.node-list-tree-item-row')
.map((row) => [row.prop('title'), !row.hasClass('row--disabled')]);
- const elementsEnabled = (wrapper) => {
- return elements(wrapper).filter(([_, enabled]) => enabled);
- };
-
const tagItem = (wrapper) => wrapper.find('.filters-section--type-tag');
const partialIcon = (wrapper) =>
diff --git a/src/components/nodes-panel/utils/node-list-context.js b/src/components/nodes-panel/utils/node-list-context.js
index f2adc4afd..a7c4cde3f 100644
--- a/src/components/nodes-panel/utils/node-list-context.js
+++ b/src/components/nodes-panel/utils/node-list-context.js
@@ -23,12 +23,16 @@ import {
toggleNodesDisabled,
} from '../../../actions/nodes';
import { resetSlicePipeline } from '../../../actions/slice';
+import { getnodesDisabledViaModularPipeline } from '../../../selectors/disabled';
// Custom hook to group useSelector calls
const useNodeListContextSelector = () => {
const dispatch = useDispatch();
const hoveredNode = useSelector((state) => state.node.hovered);
const selectedNodes = useSelector(getNodeSelected);
+ const nodesDisabledViaModularPipeline = useSelector(
+ getnodesDisabledViaModularPipeline
+ );
const expanded = useSelector((state) => state.modularPipeline.expanded);
const slicedPipeline = useSelector(getSlicedPipeline);
const modularPipelinesTree = useSelector(getModularPipelinesTree);
@@ -75,6 +79,7 @@ const useNodeListContextSelector = () => {
modularPipelinesTree,
selectedNodes,
slicedPipeline,
+ nodesDisabledViaModularPipeline,
onResetSlicePipeline,
onToggleFocusMode,
onToggleHoveredFocusMode,
@@ -99,6 +104,7 @@ export const NodeListContextProvider = ({ children }) => {
modularPipelinesTree,
selectedNodes,
slicedPipeline,
+ nodesDisabledViaModularPipeline,
onResetSlicePipeline,
onToggleFocusMode,
onToggleHoveredFocusMode,
@@ -203,7 +209,6 @@ export const NodeListContextProvider = ({ children }) => {
return (
{
modularPipelinesTree,
selectedNodes,
slicedPipeline,
+ nodesDisabledViaModularPipeline,
handleModularPipelineToggleExpanded: onToggleModularPipelineExpanded,
handleNodeListRowClicked,
handleNodeListRowChanged,
diff --git a/src/selectors/disabled.js b/src/selectors/disabled.js
index 2822be971..f49441b9c 100644
--- 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 getnodesDisabledViaModularPipeline = 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,
+ getnodesDisabledViaModularPipeline,
getNodeType,
getNodeTypeDisabled,
- getNodeModularPipelines,
- getModularPipelinesTree,
- getFocusedModularPipeline,
getVisibleSidebarNodes,
getVisibleModularPipelineInputsOutputs,
getDisabledModularPipeline,
@@ -88,11 +137,9 @@ export const getNodeDisabled = createSelector(
nodeDisabledNode,
nodeDisabledTag,
nodeDisabledPipeline,
+ nodesDisabledViaModularPipeline,
nodeType,
typeDisabled,
- nodeModularPipelines,
- modularPipelinesTree,
- focusedModularPipeline,
visibleSidebarNodes,
visibleModularPipelineInputsOutputs,
disabledModularPipeline,
@@ -100,9 +147,6 @@ export const getNodeDisabled = createSelector(
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 = nodesDisabledViaModularPipeline[id];
+
return [
nodeDisabledNode[id],
nodeDisabledTag[id],
@@ -136,7 +166,6 @@ export const getNodeDisabled = createSelector(
typeDisabled[nodeType[id]],
isDisabledViaSidebar,
isDisabledViaModularPipeline,
- isDisabledViaFocusedModularPipeline,
isDisabledViaSlicedPipeline,
].some(Boolean);
})