revert pipelinevizsurface

opendatahub-io · Jul 3, 2024 · 51ab4f8 · 51ab4f8
1 parent c261015
commit 51ab4f8
Showing 1 changed file with 21 additions and 12 deletions.
diff --git a/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx b/frontend/src/concepts/topology/PipelineVisualizationSurface.tsx
@@ -21,7 +21,9 @@ import {
   EmptyStateHeader,
 } from '@patternfly/react-core';
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { css } from '@patternfly/react-styles';
 import { NODE_HEIGHT, NODE_WIDTH } from './const';
+import './PipelineVisualizationSurface.scss';
 
 type PipelineVisualizationSurfaceProps = {
   nodes: PipelineNodeModel[];
@@ -37,25 +39,31 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
   const controller = useVisualizationController();
   const [error, setError] = React.useState<Error | null>();
 
-  React.useEffect(() => {
-    let resizeTimeout: NodeJS.Timeout | null;
-
+  const selectedNode = React.useMemo(() => {
     if (selectedIds?.[0]) {
-      const selectedNode = controller.getNodeById(selectedIds[0]);
-      if (selectedNode) {
-        // Use a timeout in order to allow the side panel to be shown and window size recomputed
-        resizeTimeout = setTimeout(() => {
-          controller.getGraph().panIntoView(selectedNode, { offset: 20, minimumVisible: 100 });
-          resizeTimeout = null;
-        }, 500);
+      const node = controller.getNodeById(selectedIds[0]);
+      if (node) {
+        return node;
       }
     }
+    return null;
+  }, [selectedIds, controller]);
+
+  React.useEffect(() => {
+    let resizeTimeout: NodeJS.Timeout | null;
+    if (selectedNode) {
+      // Use a timeout in order to allow the side panel to be shown and window size recomputed
+      resizeTimeout = setTimeout(() => {
+        controller.getGraph().panIntoView(selectedNode, { offset: 20, minimumVisible: 100 });
+        resizeTimeout = null;
+      }, 500);
+    }
     return () => {
       if (resizeTimeout) {
         clearTimeout(resizeTimeout);
       }
     };
-  }, [selectedIds, controller]);
+  }, [selectedIds, controller, selectedNode]);
 
   React.useEffect(() => {
     const currentModel = controller.toModel();
@@ -153,6 +161,7 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
 
   return (
     <TopologyView
+      className={css('pipeline-visualization', !!selectedNode && 'm-is-open')}
       controlBar={
         <TopologyControlBar
           controlButtons={createTopologyControlButtons({
@@ -182,7 +191,7 @@ const PipelineVisualizationSurface: React.FC<PipelineVisualizationSurfaceProps>
           })}
         />
       }
-      sideBarOpen={!!sidePanel}
+      sideBarOpen={!!selectedNode}
       sideBarResizable
       sideBar={<TopologySideBar resizable>{sidePanel}</TopologySideBar>}
     >