feat: enhance GraphVisualization and global styles

- Increased font size in globals.css for improved readability.
- Refactored loadGraphStructure and loadNodeDetails functions to use useCallback for better performance.
- Adjusted node layout parameters in GraphVisualization for enhanced spacing and visual clarity.
- Added a Background component to the graph visualization for improved aesthetics.

These changes collectively enhance the user experience and visual presentation of the dashboard.

auth: @nk-ag

Author: NiveditJain

dashboard/src/app/globals.css

@@ -162,6 +162,9 @@
   * {
     @apply border-border outline-ring/50;
   }
+  html {
+    font-size: 25px; /* Increased from default 16px */
+  }
   body {
     @apply bg-background text-foreground font-sans;
   }

dashboard/src/components/GraphVisualization.tsx

@@ -129,7 +129,7 @@ export const GraphVisualization: React.FC<GraphVisualizationProps> = ({
   const [isLoadingNodeDetails, setIsLoadingNodeDetails] = useState(false);
   const [nodeDetailsError, setNodeDetailsError] = useState<string | null>(null);
 
-  const loadGraphStructure = async () => {
+  const loadGraphStructure = useCallback(async () => {
     setIsLoading(true);
     setError(null);
 
@@ -141,9 +141,9 @@ export const GraphVisualization: React.FC<GraphVisualizationProps> = ({
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [namespace, runId]);
 
-  const loadNodeDetails = async (nodeId: string, graphName: string) => {
+  const loadNodeDetails = useCallback(async (nodeId: string, graphName: string) => {
     setIsLoadingNodeDetails(true);
     setNodeDetailsError(null);
 
@@ -155,13 +155,13 @@ export const GraphVisualization: React.FC<GraphVisualizationProps> = ({
     } finally {
       setIsLoadingNodeDetails(false);
     }
-  };
+  }, [namespace, runId]);
 
   useEffect(() => {
     if (namespace && runId) {
       loadGraphStructure();
     }
-  }, [namespace, runId]);
+  }, [namespace, runId, loadGraphStructure]);
 
   // Convert graph data to React Flow format with horizontal layout
   const { nodes, edges } = useMemo(() => {
@@ -239,11 +239,11 @@ export const GraphVisualization: React.FC<GraphVisualizationProps> = ({
 
     // Convert to React Flow nodes with horizontal positioning
     const reactFlowNodes: Node[] = [];
-    const layerWidth = 400; // Increased horizontal spacing between layers
-    const nodeHeight = 150; // Increased vertical spacing between nodes
+    const layerWidth = 450; // Increased horizontal spacing between layers
+    const nodeHeight = 250; // Increased vertical spacing between nodes
 
     layers.forEach((layer, layerIndex) => {
-      const layerX = layerIndex * layerWidth + 150;
+      const layerX = layerIndex * layerWidth + 200;
       const totalHeight = layer.length * nodeHeight;
       const startY = (800 - totalHeight) / 2; // Center vertically
 
@@ -309,7 +309,7 @@ export const GraphVisualization: React.FC<GraphVisualizationProps> = ({
     if (graphData?.graph_name) {
       loadNodeDetails(graphNode.id, graphData.graph_name);
     }
-  }, [graphData?.graph_name]);
+  }, [graphData?.graph_name, loadNodeDetails]);
 
   if (isLoading) {
     return (
@@ -427,6 +427,7 @@ export const GraphVisualization: React.FC<GraphVisualizationProps> = ({
               nodesConnectable={false}
               nodesDraggable={false}
             >
+              <Background color="#031035" />
               <Controls />
             </ReactFlow>
           </div>

dashboard/src/components/ui/badge.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-bold w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {