Merge pull request #2886 from jenny-s51/RHOAIENG-7430

Add "Collapse All" and "Expand All" actions to control bar in topology view
opendatahub-io · Jun 7, 2024 · 0a0963a · 0a0963a
2 parents 10d0ccd + b47f9cd
commit 0a0963a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 5 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -65,7 +65,7 @@
     "@patternfly/react-styles": "^5.2.1",
     "@patternfly/react-table": "^5.2.1",
     "@patternfly/react-tokens": "^5.2.1",
-    "@patternfly/react-topology": "^5.4.0-prerelease.1",
+    "@patternfly/react-topology": "^5.4.0-prerelease.6",
     "@patternfly/react-virtualized-extension": "^5.0.0",
     "@types/classnames": "^2.3.1",
     "axios": "^1.6.4",

diff --git a/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx b/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
@@ -10,6 +10,8 @@ import {
   useVisualizationController,
   VisualizationSurface,
   addSpacerNodes,
+  DEFAULT_SPACER_NODE_TYPE,
+  DEFAULT_EDGE_TYPE,
 } from '@patternfly/react-topology';
 import {
   EmptyState,
@@ -18,6 +20,7 @@ import {
   EmptyStateHeader,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { NODE_HEIGHT, NODE_WIDTH } from './const';
 
 type PipelineVisualizationSurfaceProps = {
   nodes: PipelineNodeModel[];
@@ -62,6 +65,55 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
       }
     }
   }, [controller, nodes]);
+
+  const collapseAllCallback = React.useCallback(
+    (collapseAll: boolean) => {
+      // First, expand/collapse all nodes
+      if (collapseAll) {
+        controller.getGraph().collapseAll();
+      } else {
+        controller.getGraph().expandAll();
+      }
+      // We must recreate the model based on what is visible
+      const model = controller.toModel();
+
+      // Get all the non-spacer nodes, mark them all visible again
+      const nonSpacerNodes = model
+        .nodes!.filter((n) => n.type !== DEFAULT_SPACER_NODE_TYPE)
+        .map((n) => ({
+          ...n,
+          visible: true,
+        }));
+
+      // If collapsing, set the size of the collapsed group nodes
+      if (collapseAll) {
+        nonSpacerNodes.forEach((node) => {
+          const newNode = node;
+          if (node.group && node.collapsed) {
+            newNode.width = NODE_WIDTH;
+            newNode.height = NODE_HEIGHT;
+          }
+        });
+      }
+      // Determine the new set of nodes, including the spacer nodes
+      const pipelineNodes = addSpacerNodes(nonSpacerNodes);
+
+      // Determine the new edges
+      const edges = getEdgesFromNodes(
+        pipelineNodes,
+        DEFAULT_SPACER_NODE_TYPE,
+        DEFAULT_EDGE_TYPE,
+        DEFAULT_EDGE_TYPE,
+      );
+
+      // Apply the new model and run the layout
+      controller.fromModel({ nodes: pipelineNodes, edges }, true);
+      controller.getGraph().layout();
+      controller.getGraph().fit(80);
+    },
+    [controller],
+  );
+
   if (error) {
     return (
       <EmptyState data-id="error-empty-state">
@@ -81,6 +133,8 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
         <TopologyControlBar
           controlButtons={createTopologyControlButtons({
             ...defaultControlButtonsOptions,
+            expandAll: !!collapseAllCallback,
+            collapseAll: !!collapseAllCallback,
             zoomInCallback: action(() => {
               controller.getGraph().scaleBy(4 / 3);
             }),
@@ -94,6 +148,12 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
               controller.getGraph().reset();
               controller.getGraph().layout();
             }),
+            expandAllCallback: action(() => {
+              collapseAllCallback(false);
+            }),
+            collapseAllCallback: action(() => {
+              collapseAllCallback(true);
+            }),
             legend: false,
           })}
         />