frontend Map: Move graph constants in a separate file

Signed-off-by: Oleksandr Dubenko <[email protected]>
headlamp-k8s · Dec 10, 2024 · da2a758 · da2a758
1 parent 6086750
commit da2a758
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/frontend/src/components/resourceMap/GraphRenderer.tsx b/frontend/src/components/resourceMap/GraphRenderer.tsx
@@ -15,6 +15,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Loader } from '../common';
 import { KubeRelationEdge } from './edges/KubeRelationEdge';
+import { maxZoom, minZoom } from './graphConstants';
 import { GraphControls } from './GraphControls';
 import { GroupNodeComponent } from './nodes/GroupNode';
 import { KubeGroupNodeComponent } from './nodes/KubeGroupNode';
@@ -81,8 +82,8 @@ export function GraphRenderer({
           onBackgroundClick?.();
         }
       }}
-      minZoom={0.1}
-      maxZoom={2.0}
+      minZoom={minZoom}
+      maxZoom={maxZoom}
       connectionMode={ConnectionMode.Loose}
     >
       <Background variant={BackgroundVariant.Dots} style={{ color: theme.palette.divider }} />

diff --git a/frontend/src/components/resourceMap/GraphView.tsx b/frontend/src/components/resourceMap/GraphView.tsx
@@ -38,6 +38,7 @@ import {
 } from './graph/graphGrouping';
 import { applyGraphLayout } from './graph/graphLayout';
 import { GraphNode, GraphSource, GroupNode, isGroup, KubeObjectNode } from './graph/graphModel';
+import { viewportPaddingPx } from './graphConstants';
 import { GraphControlButton } from './GraphControls';
 import { GraphRenderer } from './GraphRenderer';
 import { NodeHighlight, useNodeHighlight } from './NodeHighlight';
@@ -162,16 +163,14 @@ function GraphViewContent({
     (nodes: Node[]) => {
       const bounds = getNodesBounds(nodes);
 
-      const defaultViewportPaddingPx = 50;
-
-      const topLeftOrigin = { x: defaultViewportPaddingPx, y: defaultViewportPaddingPx };
+      const topLeftOrigin = { x: viewportPaddingPx, y: viewportPaddingPx };
       const centerOrigin = {
         x: reactFlowWidth / 2 - bounds.width / 2,
         y: reactFlowHeight / 2 - bounds.height / 2,
       };
 
-      const xFits = bounds.width + defaultViewportPaddingPx * 2 <= reactFlowWidth;
-      const yFits = bounds.height + defaultViewportPaddingPx * 2 <= reactFlowHeight;
+      const xFits = bounds.width + viewportPaddingPx * 2 <= reactFlowWidth;
+      const yFits = bounds.height + viewportPaddingPx * 2 <= reactFlowHeight;
 
       const defaultZoomViewport = {
         x: xFits ? centerOrigin.x : topLeftOrigin.x,

diff --git a/frontend/src/components/resourceMap/graphConstants.ts b/frontend/src/components/resourceMap/graphConstants.ts
@@ -0,0 +1,3 @@
+export const minZoom = 0.1;
+export const maxZoom = 2.0;
+export const viewportPaddingPx = 50;