diff --git a/src/components/node-list/index.js b/src/components/node-list/index.js index 74353d894..fb330418d 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 fa89c3fec..2820bfc0b 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 0106c0594..c71c2f085 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); })