Feat/slicing kedro viz

.eslintrc.json

@@ -4,7 +4,7 @@
     "curly": ["error"],
     "valid-typeof": ["error"],
     "camelcase": "error",
-    "id-length": ["error", { "min": 3, "exceptions": ["_","a","b","d","e","i","j","k","x","y","id","el","pi","PI","up"] }],
+    "id-length": ["error", { "min": 3, "exceptions": ["_","a","b","d","e","i","j","k","x","y","id","el","pi","PI","up","to"] }],
     "no-var": ["error"],
     "lines-between-class-members": ["error", "always"]
   }

demo-project/conf/base/catalog_01_raw.yml

@@ -5,7 +5,7 @@ companies:
     kedro-viz:
       layer: raw
       preview_args:
-        nrows: 5
+        nrows: 5      
 
 reviews:
   type: pandas.CSVDataset

src/actions/filters.js

@@ -0,0 +1,12 @@
+export const FILTER_NODES = 'FILTER_NODES';
+
+export const filterNodes = (from, to) => ({
+  type: FILTER_NODES,
+  filters: { from, to },
+});
+
+export const RESET_NODES_FILTER = 'RESET_NODES_FILTER';
+
+export const resetNodesFilter = () => ({
+  type: RESET_NODES_FILTER,
+});

src/components/node-list/index.js

@@ -12,6 +12,8 @@ import {
 import {
   getNodeTypes,
   isModularPipelineType,
+  getTaskNodes,
+  getDatasets,
 } from '../../selectors/node-types';
 import { getTagData, getTagNodeCounts } from '../../selectors/tags';
 import {
@@ -37,6 +39,7 @@ import {
   toggleNodeHovered,
   toggleNodesDisabled,
 } from '../../actions/nodes';
+import { filterNodes, resetNodesFilter } from '../../actions/filters';
 import { useGeneratePathname } from '../../utils/hooks/use-generate-pathname';
 import './styles/node-list.scss';
 import { params, NODE_TYPES } from '../../config';
@@ -46,12 +49,15 @@ import { params, NODE_TYPES } from '../../config';
  * Also handles user interaction and dispatches updates back to the store.
  */
 const NodeListProvider = ({
+  flags,
   faded,
   nodes,
   nodeSelected,
   tags,
   tagNodeCounts,
   nodeTypes,
+  taskNodes,
+  datasets,
   onToggleNodesDisabled,
   onToggleNodeSelected,
   onToggleNodeActive,
@@ -63,6 +69,8 @@ const NodeListProvider = ({
   onToggleModularPipelineExpanded,
   onToggleTypeDisabled,
   onToggleFocusMode,
+  onFilterNodes,
+  onResetNodesFilter,
   modularPipelinesTree,
   focusMode,
   disabledModularPipeline,
@@ -295,11 +303,14 @@ const NodeListProvider = ({
 
   return (
     <NodeList
+      flags={flags}
       faded={faded}
       items={items}
       modularPipelinesTree={modularPipelinesTree}
       modularPipelinesSearchResult={modularPipelinesSearchResult}
       groups={groups}
+      taskNodes={taskNodes}
+      datasets={datasets}
       searchValue={searchValue}
       onUpdateSearchValue={debounce(updateSearchValue, 250)}
       onModularPipelineToggleExpanded={handleToggleModularPipelineExpanded}
@@ -309,6 +320,8 @@ const NodeListProvider = ({
       onItemMouseEnter={onItemMouseEnter}
       onItemMouseLeave={onItemMouseLeave}
       onItemChange={onItemChange}
+      onFilterNodes={onFilterNodes}
+      onResetNodesFilter={onResetNodesFilter}
       focusMode={focusMode}
       disabledModularPipeline={disabledModularPipeline}
       onResetFilter={onResetFilter}
@@ -318,11 +331,14 @@ const NodeListProvider = ({
 };
 
 export const mapStateToProps = (state) => ({
+  flags: state.flags,
   tags: getTagData(state),
   tagNodeCounts: getTagNodeCounts(state),
   nodes: getGroupedNodes(state),
   nodeSelected: getNodeSelected(state),
   nodeTypes: getNodeTypes(state),
+  taskNodes: getTaskNodes(state),
+  datasets: getDatasets(state),
   focusMode: getFocusedModularPipeline(state),
   disabledModularPipeline: state.modularPipeline.disabled,
   inputOutputDataNodes: getInputOutputNodesForFocusedModularPipeline(state),
@@ -363,6 +379,12 @@ export const mapDispatchToProps = (dispatch) => ({
   onToggleFocusMode: (modularPipeline) => {
     dispatch(toggleFocusMode(modularPipeline));
   },
+  onFilterNodes: (from, to) => {
+    dispatch(filterNodes(from, to));
+  },
+  onResetNodesFilter: () => {
+    dispatch(resetNodesFilter());
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(NodeListProvider);

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

@@ -2,20 +2,30 @@ import React, { useState } from 'react';
 import { loadLocalStorage, saveLocalStorage } from '../../store/helpers';
 import NodeListGroup from './node-list-group';
 import { localStorageName } from '../../config';
-
+import Dropdown from '../ui/dropdown';
+import MenuOption from '../ui/menu-option';
+import Button from '../ui/button';
 const storedState = loadLocalStorage(localStorageName);
 
 const NodeListGroups = ({
+  flags,
   groups,
+  datasets,
+  taskNodes,
   items,
   onGroupToggleChanged,
   onItemChange,
   onItemClick,
   onItemMouseEnter,
   onItemMouseLeave,
   searchValue,
+  onFilterNodes,
+  onResetNodesFilters,
 }) => {
   const [collapsed, setCollapsed] = useState(storedState.groupsCollapsed || {});
+  const [toNode, selectedToNode] = useState({});
+  const [fromNode, selectedFromNode] = useState({});
+  const isSlicingEnabled = flags.slicePipeline;
 
   // Collapse/expand node group
   const onToggleGroupCollapsed = (groupID) => {
@@ -29,31 +39,91 @@ const NodeListGroups = ({
   };
 
   return (
-    <nav className="pipeline-nodelist-section kedro">
-      <ul className="pipeline-nodelist__list">
-        {Object.values(groups).map((group) => (
-          <NodeListGroup
-            allUnchecked={group.allUnchecked}
-            checked={group.checked}
-            collapsed={Boolean(searchValue) ? false : collapsed[group.id]}
-            group={group}
-            id={group.id}
-            invisibleIcon={group.invisibleIcon}
-            items={items[group.id] || []}
-            key={group.id}
-            kind={group.kind}
-            name={group.name}
-            onItemChange={onItemChange}
-            onItemClick={onItemClick}
-            onItemMouseEnter={onItemMouseEnter}
-            onItemMouseLeave={onItemMouseLeave}
-            onToggleChecked={onGroupToggleChanged}
-            onToggleCollapsed={onToggleGroupCollapsed}
-            visibleIcon={group.visibleIcon}
-          />
-        ))}
-      </ul>
-    </nav>
+    <>
+      {!isSlicingEnabled ? (
+        <nav className="pipeline-nodelist-section kedro">
+          <ul className="pipeline-nodelist__list">
+            {Object.values(groups).map((group) => (
+              <NodeListGroup
+                allUnchecked={group.allUnchecked}
+                checked={group.checked}
+                collapsed={Boolean(searchValue) ? false : collapsed[group.id]}
+                group={group}
+                id={group.id}
+                invisibleIcon={group.invisibleIcon}
+                items={items[group.id] || []}
+                key={group.id}
+                kind={group.kind}
+                name={group.name}
+                onItemChange={onItemChange}
+                onItemClick={onItemClick}
+                onItemMouseEnter={onItemMouseEnter}
+                onItemMouseLeave={onItemMouseLeave}
+                onToggleChecked={onGroupToggleChanged}
+                onToggleCollapsed={onToggleGroupCollapsed}
+                visibleIcon={group.visibleIcon}
+              />
+            ))}
+          </ul>
+        </nav>
+      ) : (
+        <nav className="pipeline-nodelist-section kedro">
+          <div className="pipeline-nodelist-section__form-wrapper">
+            <div className="pipeline-nodelist-section__input-wrapper">
+              <div className="pipeline-nodelist-section__input-label">
+                From node
+              </div>
+              <Dropdown
+                defaultText={fromNode.label}
+                placeholderText={!fromNode.label ? 'Select a node' : null}
+                onChanged={(selectedNode) => {
+                  selectedFromNode(selectedNode);
+                }}
+                width={null}
+              >
+                {Object.entries(taskNodes).map(([value, label]) => (
+                  <MenuOption key={value} primaryText={label} value={value} />
+                ))}
+              </Dropdown>
+            </div>
+            <div className="pipeline-nodelist-section__input-wrapper">
+              <div className="pipeline-nodelist-section__input-label">
+                To node
+              </div>
+              <Dropdown
+                defaultText={toNode.label}
+                placeholderText={!toNode.label ? 'Select a node' : null}
+                onChanged={(selectedNode) => {
+                  selectedToNode(selectedNode);
+                }}
+                width={null}
+              >
+                {Object.entries(taskNodes).map(([value, label]) => (
+                  <MenuOption key={value} primaryText={label} value={value} />
+                ))}
+              </Dropdown>
+              <div className="run-details-modal-button-wrapper">
+                <Button
+                  dataTest={'filter nodes'}
+                  mode="secondary"
+                  onClick={() => onFilterNodes(fromNode.value, toNode.value)}
+                  size="small"
+                >
+                  Filter
+                </Button>
+                <Button
+                  dataTest={'reset nodes filter'}
+                  onClick={onResetNodesFilters}
+                  size="small"
+                >
+                  Reset
+                </Button>
+              </div>
+            </div>
+          </div>
+        </nav>
+      )}
+    </>
   );
 };
 

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

@@ -12,14 +12,19 @@ import './styles/node-list.scss';
  * Scrollable list of toggleable items, with search & filter functionality
  */
 const NodeList = ({
+  flags,
   faded,
+  datasets,
+  taskNodes,
   items,
   modularPipelinesTree,
   modularPipelinesSearchResult,
   groups,
   searchValue,
   getGroupState,
   onUpdateSearchValue,
+  onFilterNodes,
+  onResetNodesFilter,
   onGroupToggleChanged,
   onItemClick,
   onItemMouseEnter,
@@ -94,9 +99,14 @@ const NodeList = ({
                   </button>
                 </div>
                 <NodeListGroups
+                  flags={flags}
+                  datasets={datasets}
+                  taskNodes={taskNodes}
                   items={items}
                   groups={groups}
                   searchValue={searchValue}
+                  onFilterNodes={onFilterNodes}
+                  onResetNodesFilter={onResetNodesFilter}
                   getGroupState={getGroupState}
                   onItemClick={onItemClick}
                   onItemMouseEnter={onItemMouseEnter}

src/config.js

@@ -63,6 +63,11 @@ export const flags = {
     default: true,
     icon: '🐳',
   },
+  slicePipeline: {
+    name: 'Slice Kedro-pipelines',
+    description: 'Filter pipelines by slicing them',
+    default: true,
+  }
 };
 
 export const settings = {
@@ -75,7 +80,7 @@ export const settings = {
     name: 'New feature hints',
     description: 'Enable or disable all new feature hints in the interface.',
     default: true,
-  },
+  }
 };
 
 // Sidebar groups is an ordered map of { id: label }

src/reducers/filters.js

@@ -0,0 +1,20 @@
+import { FILTER_NODES, RESET_NODES_FILTER } from '../actions/filters';
+
+// Reducer for filtering nodes
+const filterNodesReducer = (filterState = {}, action) => {
+  const updateState = (newState) => Object.assign({}, filterState, newState);
+
+  switch (action.type) {
+    case FILTER_NODES:
+      return updateState({
+        from: action.filters.from,
+        to: action.filters.to,
+      });
+    case RESET_NODES_FILTER:
+      return {};
+    default:
+      return filterState;
+  }
+};
+
+export default filterNodesReducer;

src/reducers/index.js

@@ -7,6 +7,7 @@ import loading from './loading';
 import node from './nodes';
 import nodeType from './node-type';
 import pipeline from './pipeline';
+import filters from './filters';
 import tag from './tags';
 import modularPipeline from './modular-pipelines';
 import visible from './visible';
@@ -61,6 +62,7 @@ const combinedReducer = combineReducers({
   node,
   nodeType,
   pipeline,
+  filters,
   tag,
   modularPipeline,
   visible,