From c2bd6712c65c6834fcaa6f4cc8a7bcc110934ca3 Mon Sep 17 00:00:00 2001 From: rashidakanchwala Date: Wed, 6 Nov 2024 10:08:53 +0000 Subject: [PATCH 1/4] wip Signed-off-by: rashidakanchwala --- src/components/node-list/index.js | 10 +-- src/components/node-list/node-list-tree.js | 51 +++++--------- src/components/node-list/node-list.js | 2 - src/selectors/disabled.js | 81 +++++++++++++++------- 4 files changed, 73 insertions(+), 71 deletions(-) diff --git a/src/components/node-list/index.js b/src/components/node-list/index.js index 74353d8944..fb330418db 100644 --- 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 index fa89c3fec8..2820bfc0b5 100644 --- 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,7 +100,8 @@ const getNodeRowData = (node, disabled, selected, highlight) => { const TreeListProvider = ({ nodeSelected, - modularPipelinesSearchResult, + nodeDisabledViaModularPipeline, + searchValue, modularPipelinesTree, onItemChange, onItemMouseEnter, @@ -120,39 +109,32 @@ const TreeListProvider = ({ 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 index 0106c0594c..c71c2f085f 100644 --- 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 = ({ >
+ 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,11 +137,9 @@ export const getNodeDisabled = createSelector( nodeDisabledNode, nodeDisabledTag, nodeDisabledPipeline, + nodeDisabledViaModularPipeline, 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 = nodeDisabledViaModularPipeline[id]; + return [ nodeDisabledNode[id], nodeDisabledTag[id], @@ -136,7 +166,6 @@ export const getNodeDisabled = createSelector( typeDisabled[nodeType[id]], isDisabledViaSidebar, isDisabledViaModularPipeline, - isDisabledViaFocusedModularPipeline, isDisabledViaSlicedPipeline, ].some(Boolean); }) From 8c8d9f59aaad34fe9b5beddfa30ebd6690c13d5b Mon Sep 17 00:00:00 2001 From: rashidakanchwala Date: Thu, 14 Nov 2024 11:05:18 +0000 Subject: [PATCH 2/4] done Signed-off-by: rashidakanchwala --- src/components/node-list-tree/node-list-tree.js | 1 - src/store/normalize-data.js | 14 ++------------ 2 files changed, 2 insertions(+), 13 deletions(-) diff --git a/src/components/node-list-tree/node-list-tree.js b/src/components/node-list-tree/node-list-tree.js index 97486df14b..48b702f3eb 100644 --- a/src/components/node-list-tree/node-list-tree.js +++ b/src/components/node-list-tree/node-list-tree.js @@ -100,7 +100,6 @@ const TreeListProvider = ({ nodeSelected, modularPipelinesSearchResult, nodeDisabledViaModularPipeline, - searchValue, modularPipelinesTree, onItemChange, onItemMouseEnter, diff --git a/src/store/normalize-data.js b/src/store/normalize-data.js index 4278889cff..173f18c4f3 100644 --- a/src/store/normalize-data.js +++ b/src/store/normalize-data.js @@ -289,17 +289,8 @@ const normalizeData = (data, expandAllPipelines) => { return state; } - if (data.nodes) { - console.log(data.nodes); - data.nodes.sort((a, b) => a.id.localeCompare(b.id)); - data.nodes.forEach(addNode(state)); - } - - if (data.edges) { - console.log(data.edges); - data.edges.sort((a, b) => a.id.localeCompare(b.id)); - data.edges.forEach(addEdge(state)); - } + data.nodes.forEach(addNode(state)); + data.edges.forEach(addEdge(state)); if (data.pipelines) { data.pipelines.forEach(addPipeline(state)); @@ -338,7 +329,6 @@ const normalizeData = (data, expandAllPipelines) => { data.tags.forEach(addTag(state)); } if (data.layers) { - data.layers.sort((a, b) => a.id.localeCompare(b.id)); data.layers.forEach(addLayer(state)); } From 10fcf2016c8cdefbcd79a5142f688dd2ae960fbb Mon Sep 17 00:00:00 2001 From: rashidakanchwala Date: Thu, 14 Nov 2024 11:41:06 +0000 Subject: [PATCH 3/4] done Signed-off-by: rashidakanchwala --- src/components/node-list-tree/node-list-tree.js | 8 ++++---- src/components/nodes-panel/nodes-panel.js | 6 ++++-- src/components/nodes-panel/utils/node-list-context.js | 8 +++++++- src/selectors/disabled.js | 8 ++++---- src/store/normalize-data.js | 1 - 5 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/node-list-tree/node-list-tree.js b/src/components/node-list-tree/node-list-tree.js index 48b702f3eb..e3d6248edd 100644 --- a/src/components/node-list-tree/node-list-tree.js +++ b/src/components/node-list-tree/node-list-tree.js @@ -99,7 +99,6 @@ const TreeListProvider = ({ hoveredNode, nodeSelected, modularPipelinesSearchResult, - nodeDisabledViaModularPipeline, modularPipelinesTree, onItemChange, onItemMouseEnter, @@ -112,11 +111,12 @@ const TreeListProvider = ({ 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. + // 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 (!node || Object.keys(node).length === 0) { return null; } @@ -124,7 +124,7 @@ const TreeListProvider = ({ const disabled = node.disabledTag || node.disabledType || - nodeDisabledViaModularPipeline[node.id]; + nodesDisabledViaModularPipeline[node.id]; const selected = nodeSelected[node.id]; const highlight = slicedPipeline.includes(node.id); @@ -202,7 +202,7 @@ const TreeListProvider = ({ const data = getModularPipelineRowData({ ...node, focusModeIcon, - disabled: nodeDisabledViaModularPipeline[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 8c845108d7..8a8957cf61 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/utils/node-list-context.js b/src/components/nodes-panel/utils/node-list-context.js index f2adc4afd5..a7c4cde3fc 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 7150e93f65..f49441b9c3 100644 --- a/src/selectors/disabled.js +++ b/src/selectors/disabled.js @@ -66,7 +66,7 @@ export const getNodeDisabledTag = createSelector( /** * Determine if a node is disabled via disabled modular pipeline or focused modular pipeline. */ -export const getNodeDisabledViaModularPipeline = createSelector( +export const getnodesDisabledViaModularPipeline = createSelector( [ getNodeIDs, getNodeType, @@ -123,7 +123,7 @@ export const getNodeDisabled = createSelector( getNodeDisabledNode, getNodeDisabledTag, getNodeDisabledPipeline, - getNodeDisabledViaModularPipeline, + getnodesDisabledViaModularPipeline, getNodeType, getNodeTypeDisabled, getVisibleSidebarNodes, @@ -137,7 +137,7 @@ export const getNodeDisabled = createSelector( nodeDisabledNode, nodeDisabledTag, nodeDisabledPipeline, - nodeDisabledViaModularPipeline, + nodesDisabledViaModularPipeline, nodeType, typeDisabled, visibleSidebarNodes, @@ -156,7 +156,7 @@ export const getNodeDisabled = createSelector( !visibleSidebarNodes[id] && !visibleModularPipelineInputsOutputs.has(id); - const isDisabledViaModularPipeline = nodeDisabledViaModularPipeline[id]; + const isDisabledViaModularPipeline = nodesDisabledViaModularPipeline[id]; return [ nodeDisabledNode[id], diff --git a/src/store/normalize-data.js b/src/store/normalize-data.js index 173f18c4f3..15aaacaa94 100644 --- a/src/store/normalize-data.js +++ b/src/store/normalize-data.js @@ -291,7 +291,6 @@ const normalizeData = (data, expandAllPipelines) => { data.nodes.forEach(addNode(state)); data.edges.forEach(addEdge(state)); - if (data.pipelines) { data.pipelines.forEach(addPipeline(state)); if (state.pipeline.ids.length) { From 1df87fa3d740b0aec4841c1feda28446dd369a2f Mon Sep 17 00:00:00 2001 From: rashidakanchwala Date: Thu, 14 Nov 2024 12:36:29 +0000 Subject: [PATCH 4/4] fix cy tests Signed-off-by: rashidakanchwala --- src/components/node-list-tree/node-list-tree.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/node-list-tree/node-list-tree.js b/src/components/node-list-tree/node-list-tree.js index e3d6248edd..fdb5df54d3 100644 --- a/src/components/node-list-tree/node-list-tree.js +++ b/src/components/node-list-tree/node-list-tree.js @@ -62,8 +62,8 @@ const getModularPipelineRowData = ({ focusModeIcon: focusModeIcon, active: data.active, selected: false, - faded: !checked, - visible: checked, + faded: disabled || !checked, + visible: !disabled && checked, enabled: true, disabled: disabled, focused: focused, @@ -88,7 +88,7 @@ const getNodeRowData = (node, disabled, hoveredNode, selected, highlight) => { active: node.active || hoveredNode === node.id, selected, highlight, - faded: node.disabledNode, + faded: disabled || !checked, visible: !disabled && checked, checked, disabled,