From da2a758dfa55c389fa1fda302ecde7e96ae0b6d7 Mon Sep 17 00:00:00 2001
From: Oleksandr Dubenko <oldubenko@microsoft.com>
Date: Tue, 10 Dec 2024 12:33:08 +0100
Subject: [PATCH] frontend Map: Move graph constants in a separate file

Signed-off-by: Oleksandr Dubenko <oldubenko@microsoft.com>
---
 frontend/src/components/resourceMap/GraphRenderer.tsx | 5 +++--
 frontend/src/components/resourceMap/GraphView.tsx     | 9 ++++-----
 frontend/src/components/resourceMap/graphConstants.ts | 3 +++
 3 files changed, 10 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/resourceMap/graphConstants.ts

diff --git a/frontend/src/components/resourceMap/GraphRenderer.tsx b/frontend/src/components/resourceMap/GraphRenderer.tsx
index 7226e705a5..48b6d00fd4 100644
--- 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
index 97dd08c15e..a34aba3060 100644
--- 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
new file mode 100644
index 0000000000..aa34867dd7
--- /dev/null
+++ 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;