[GEN-1716]: fixed ReactFlow "fit to view" (#1769)

Co-authored-by: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
odigos-io · Nov 17, 2024 · 293949a · 293949a
1 parent a8f6655
commit 293949a
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 42 deletions.
diff --git a/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx b/frontend/webapp/containers/main/overview/overview-actions-menu/index.tsx
@@ -9,6 +9,7 @@ const MenuContainer = styled.div`
   display: flex;
   align-items: center;
   margin: 20px 0;
+  padding: 0 16px;
   gap: 16px;
 `;
 

diff --git a/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx b/frontend/webapp/containers/main/overview/overview-data-flow/index.tsx
@@ -6,7 +6,7 @@ import { ToastList } from '@/components';
 import MultiSourceControl from '../multi-source-control';
 import { OverviewActionMenuContainer } from '../overview-actions-menu';
 import { buildNodesAndEdges, NodeBaseDataFlow } from '@/reuseable-components';
-import { useMetrics, useContainerWidth, useNodeDataFlowHandlers, useSourceCRUD, useDestinationCRUD, useInstrumentationRuleCRUD, useActionCRUD } from '@/hooks';
+import { useMetrics, useContainerSize, useNodeDataFlowHandlers, useSourceCRUD, useDestinationCRUD, useInstrumentationRuleCRUD, useActionCRUD } from '@/hooks';
 
 const AllDrawers = dynamic(() => import('../all-drawers'), {
   ssr: false,
@@ -17,7 +17,7 @@ const AllModals = dynamic(() => import('../all-modals'), {
 });
 
 export const OverviewDataFlowWrapper = styled.div`
-  width: calc(100% - 64px);
+  width: 100%;
   height: calc(100vh - 176px);
   position: relative;
 `;
@@ -31,7 +31,8 @@ export default function OverviewDataFlowContainer() {
   const { actions } = useActionCRUD();
   const { destinations } = useDestinationCRUD();
   const { instrumentationRules } = useInstrumentationRuleCRUD();
-  const { containerRef, containerWidth } = useContainerWidth();
+  const { containerRef, containerWidth, containerHeight } = useContainerSize();
+
   const { handleNodeClick } = useNodeDataFlowHandlers({
     rules: instrumentationRules,
     sources,
@@ -48,10 +49,11 @@ export default function OverviewDataFlowContainer() {
       destinations,
       metrics,
       containerWidth,
+      containerHeight,
       nodeWidth: NODE_WIDTH,
       nodeHeight: NODE_HEIGHT,
     });
-  }, [instrumentationRules, sources, actions, destinations, metrics, containerWidth]);
+  }, [instrumentationRules, sources, actions, destinations, metrics, containerWidth, containerHeight]);
 
   return (
     <OverviewDataFlowWrapper ref={containerRef}>

diff --git a/frontend/webapp/hooks/common/index.ts b/frontend/webapp/hooks/common/index.ts
@@ -1,4 +1,4 @@
-export * from './useContainerWidth';
+export * from './useContainerSize';
 export * from './useOnClickOutside';
 export * from './useKeyDown';
 export * from './useTimeAgo';
diff --git a/frontend/webapp/hooks/common/useContainerSize.ts b/frontend/webapp/hooks/common/useContainerSize.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState, useRef } from 'react';
+
+export function useContainerSize() {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const [containerHeight, setContainerHeight] = useState<number>(0);
+
+  useEffect(() => {
+    const resize = () => {
+      if (containerRef.current) {
+        const { width, height } = containerRef.current.getBoundingClientRect();
+
+        setContainerWidth(width);
+        setContainerHeight(height);
+      }
+    };
+
+    resize();
+
+    window.addEventListener('resize', resize);
+    return () => window.removeEventListener('resize', resize);
+  }, []);
+
+  return { containerRef, containerWidth, containerHeight };
+}
diff --git a/frontend/webapp/hooks/common/useContainerWidth.ts b/frontend/webapp/hooks/common/useContainerWidth.ts
diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts b/frontend/webapp/reuseable-components/nodes-data-flow/builder.ts
@@ -55,6 +55,7 @@ export const buildNodesAndEdges = ({
   destinations,
   metrics,
   containerWidth,
+  containerHeight,
   nodeWidth,
   nodeHeight,
 }: {
@@ -64,6 +65,7 @@ export const buildNodesAndEdges = ({
   destinations: ActualDestination[];
   metrics?: OverviewMetricsResponse;
   containerWidth: number;
+  containerHeight: number;
   nodeWidth: number;
   nodeHeight: number;
 }) => {
@@ -77,33 +79,32 @@ export const buildNodesAndEdges = ({
     };
   }
 
-  // Calculate positions for each node
-  const startX = 0;
-  const endX = (containerWidth <= 1500 ? 1500 : containerWidth) - nodeWidth;
+  const startX = 24;
+  const endX = (containerWidth <= 1500 ? 1500 : containerWidth) - nodeWidth - 40 - startX;
+  const getY = (idx?: number) => nodeHeight * ((idx || 0) + 1);
+
   const postions = {
     rules: {
       x: startX,
-      y: (idx?: number) => nodeHeight * ((idx || 0) + 1),
+      y: getY,
     },
     sources: {
       x: getValueForRange(containerWidth, [
-        [0, 1500, endX / 3.5],
-        [1500, 1600, endX / 4],
-        [1600, null, endX / 4.5],
+        [0, 1600, endX / 3.5],
+        [1600, null, endX / 4],
       ]),
-      y: (idx?: number) => nodeHeight * ((idx || 0) + 1),
+      y: getY,
     },
     actions: {
       x: getValueForRange(containerWidth, [
-        [0, 1500, endX / 1.55],
-        [1500, 1600, endX / 1.6],
-        [1600, null, endX / 1.65],
+        [0, 1600, endX / 1.55],
+        [1600, null, endX / 1.6],
       ]),
-      y: (idx?: number) => nodeHeight * ((idx || 0) + 1),
+      y: getY,
     },
     destinations: {
       x: endX,
-      y: (idx?: number) => nodeHeight * ((idx || 0) + 1),
+      y: getY,
     },
   };
 
@@ -331,6 +332,22 @@ export const buildNodesAndEdges = ({
     });
   }
 
+  tempNodes['rules'].push(
+    createNode(
+      'hidden',
+      'hidden',
+      postions['rules']['x'],
+      containerHeight,
+      {},
+      {
+        width: 1,
+        height: 1,
+        opacity: 0,
+        pointerEvents: 'none',
+      },
+    ),
+  );
+
   Object.values(tempNodes).forEach((arr) => nodes.push(...arr));
 
   return { nodes, edges };

diff --git a/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx b/frontend/webapp/reuseable-components/nodes-data-flow/index.tsx
@@ -61,7 +61,18 @@ export function NodeBaseDataFlow({ nodes, edges, onNodeClick, nodeWidth }: NodeB
     <FlowWrapper>
       <ReactFlow nodes={nodes} nodeTypes={nodeTypes} edges={edges} edgeTypes={edgeTypes} onNodeClick={onNodeClick} zoomOnScroll={false} fitView={false}>
         <ControllerWrapper>
-          <Controls position='bottom-left' orientation='horizontal' showZoom showFitView showInteractive={false} />
+          <Controls
+            position='bottom-left'
+            orientation='horizontal'
+            showInteractive={false}
+            showZoom
+            showFitView
+            fitViewOptions={{
+              duration: 300,
+              padding: 0.02,
+              includeHiddenNodes: true,
+            }}
+          />
         </ControllerWrapper>
       </ReactFlow>
     </FlowWrapper>