Merge pull request #3527 from sniok/map-updates

frontend: Map: Various small fixes

Author: k8s-ci-robot

frontend/src/components/App/Layout.tsx

@@ -269,9 +269,9 @@ export default function Layout({}: LayoutProps) {
                 <ClusterNotFoundPopup key={clusterName} cluster={clusterName} />
               ))}
               <AlertNotification />
-              <Box>
+              <Box sx={{ height: '100%' }}>
                 <Div />
-                <Container {...containerProps}>
+                <Container {...containerProps} sx={{ height: '100%' }}>
                   <NavigationTabs />
                   {arePluginsLoaded && (
                     <RouteSwitcher

frontend/src/components/resourceMap/GraphRenderer.tsx

@@ -100,7 +100,7 @@ export function GraphRenderer({
       maxZoom={maxZoom}
       connectionMode={ConnectionMode.Loose}
     >
-      <Background variant={BackgroundVariant.Dots} style={{ color: theme.palette.divider }} />
+      <Background variant={BackgroundVariant.Dots} color={theme.palette.divider} size={2} />
       <Controls showInteractive={false} showFitView={false} showZoom={false}>
         <GraphControls>{controlActions}</GraphControls>
       </Controls>

frontend/src/components/resourceMap/GraphView.css

@@ -1,6 +1,6 @@
 :root {
-  --graph-animation-duration: 0.2s;
-  --graph-animation-delay: calc(var(--graph-animation-duration) * 0.5);
+  --graph-animation-duration: 0.15s;
+  --graph-animation-delay: calc(var(--graph-animation-duration) * 0.8);
   --graph-animation-appear: calc(var(--graph-animation-duration) * 0.4);
 }
 

frontend/src/components/resourceMap/GraphView.tsx

@@ -208,14 +208,21 @@ function GraphViewContent({
   const viewport = useGraphViewport();
 
   useEffect(() => {
+    let isCurrent = true;
     applyGraphLayout(visibleGraph, viewport.aspectRatio).then(layout => {
+      if (!isCurrent) return;
+
       setLayoutedGraph(layout);
 
       // Only fit bounds when user hasn't moved viewport manually
       if (!viewportMovedRef.current) {
         viewport.updateViewport({ nodes: layout.nodes });
       }
     });
+
+    return () => {
+      isCurrent = false;
+    };
   }, [visibleGraph, viewport]);
 
   // Reset after view change
@@ -378,14 +385,12 @@ function GraphViewContent({
               </div>
             </Box>
           </CustomThemeProvider>
-          {maybeSelectedNode && (
-            <GraphNodeDetails
-              node={maybeSelectedNode}
-              close={() => {
-                setSelectedNodeId(selectedGroup?.id ?? defaultNodeSelection);
-              }}
-            />
-          )}
+          <GraphNodeDetails
+            node={maybeSelectedNode}
+            close={() => {
+              setSelectedNodeId(selectedGroup?.id ?? defaultNodeSelection);
+            }}
+          />
         </Box>
       </FullGraphContext.Provider>
     </GraphViewContext.Provider>

frontend/src/components/resourceMap/SelectionBreadcrumbs.tsx

@@ -95,20 +95,35 @@ export function SelectionBreadcrumbs({
 
         const subtitle = it.subtitle ?? it?.kubeObject?.kind;
         const subtitleElement = subtitle ? <Box sx={{ opacity: 0.7 }}>{subtitle}</Box> : null;
+        const label = getLabel(it);
+
         return i === path.length - 1 ? (
           <Box
             key={it.id}
+            title={label}
             sx={{
               display: 'flex',
               gap: 0.5,
+              maxWidth: '200px',
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
             }}
           >
-            {icon} {subtitleElement} {getLabel(it)}
+            {icon} {subtitleElement}{' '}
+            <Box
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {label}
+            </Box>
           </Box>
         ) : (
           <Link
             key={it.id}
             onClick={() => onNodeClick(it.id)}
+            title={label}
             sx={{
               display: 'flex',
               gap: 0.5,
@@ -120,7 +135,15 @@ export function SelectionBreadcrumbs({
               cursor: 'pointer',
             }}
           >
-            {icon} {subtitleElement} {getLabel(it)}
+            {icon} {subtitleElement}{' '}
+            <Box
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {label}
+            </Box>
           </Link>
         );
       })}

frontend/src/components/resourceMap/__snapshots__/GraphView.BasicExample.stories.storyshot

@@ -16,6 +16,7 @@
 
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
+import { useDeferredValue } from 'react';
 import { useTranslation } from 'react-i18next';
 import ActionButton from '../../common/ActionButton';
 import { GraphNode } from '../graph/graphModel';
@@ -33,10 +34,10 @@ export interface GraphNodeDetailsProps {
  */
 export function GraphNodeDetails({ node, close }: GraphNodeDetailsProps) {
   const { t } = useTranslation();
+  const deferredNode = useDeferredValue(node);
 
-  if (!node) return null;
+  const hasContent = node && (node.detailsComponent || node.kubeObject);
 
-  const hasContent = node.detailsComponent || node.kubeObject;
   if (!hasContent) return null;
 
   return (
@@ -70,13 +71,24 @@ export function GraphNodeDetails({ node, close }: GraphNodeDetailsProps) {
         />
       </Box>
 
+      <NodeDetailsRenderer node={deferredNode} />
+    </Card>
+  );
+}
+
+function NodeDetailsRenderer({ node }: { node?: GraphNode }) {
+  const hasContent = node && (node.detailsComponent || node.kubeObject);
+  if (!hasContent) return null;
+
+  return (
+    <>
       {node.detailsComponent && <node.detailsComponent node={node} />}
       {node.kubeObject && (
         <KubeObjectDetails
           resource={node.kubeObject}
           customResourceDefinition={node.customResourceDefinition}
         />
       )}
-    </Card>
+    </>
   );
 }

frontend/src/components/resourceMap/details/GraphNodeDetails.tsx

@@ -16,7 +16,8 @@
 
 import { Edge, EdgeMarker, Node } from '@xyflow/react';
 import { ElkExtendedEdge, ElkNode } from 'elkjs';
-import ELK from 'elkjs';
+import ELK, { type ELK as ELKInterface } from 'elkjs/lib/elk-api';
+import elkWorker from 'elkjs/lib/elk-worker.min.js?url';
 import { forEachNode, getNodeWeight, GraphNode } from './graphModel';
 
 type ElkNodeWithData = Omit<ElkNode, 'edges'> & {
@@ -30,9 +31,15 @@ type ElkEdgeWithData = ElkExtendedEdge & {
   data: any;
 };
 
-const elk = new ELK({
-  defaultLayoutOptions: {},
-});
+let elk: ELKInterface | undefined;
+try {
+  elk = new ELK({
+    defaultLayoutOptions: {},
+    workerUrl: elkWorker,
+  });
+} catch (e) {
+  console.error('Failed to create ELK instance', e);
+}
 
 const layoutOptions = {
   nodeSize: {
@@ -124,7 +131,7 @@ function convertToElkNode(node: GraphNode, aspectRatio: number): ElkNodeWithData
             'elk.rectpacking.packing.compaction.rowHeightReevaluation': 'true',
             'elk.edgeRouting': 'SPLINES',
             'elk.spacing.nodeNode': '20',
-            'elk.padding': '[left=24, top=24, right=24, bottom=24]',
+            'elk.padding': '[left=24, top=48, right=24, bottom=24]',
           };
     elkNode.edges = convertedEdges;
     elkNode.children =
@@ -227,6 +234,8 @@ function convertToReactFlowGraph(elkGraph: ElkNodeWithData) {
 export const applyGraphLayout = (graph: GraphNode, aspectRatio: number) => {
   const elkGraph = convertToElkNode(graph, aspectRatio);
 
+  if (!elk) return Promise.resolve({ nodes: [], edges: [] });
+
   return elk
     .layout(elkGraph, {
       layoutOptions: {

frontend/src/components/resourceMap/graph/graphLayout.tsx

@@ -30,22 +30,20 @@ const Container = styled('div')(({ theme }) => ({
   borderRadius: theme.spacing(1.5),
 }));
 
-const Label = styled('div')(({ theme }) => ({
+const Label = styled('div')(() => ({
   display: 'flex',
   alignItems: 'center',
   position: 'absolute',
   gap: '4px',
   fontSize: '16px',
-  top: '-16px',
-  background: theme.palette.background.paper,
-  left: '22px',
-  padding: '8px',
+  top: 0,
+  left: 0,
+  padding: '8px 12px',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  maxWidth: 'calc(100% - 52px)',
-  color: alpha(theme.palette.text.primary, 0.6),
-  borderRadius: 2,
+  width: '100%',
+  borderRadius: 4,
 }));
 
 export const GroupNodeComponent = memo(({ id }: { id: string }) => {
@@ -67,15 +65,17 @@ export const GroupNodeComponent = memo(({ id }: { id: string }) => {
         }
       }}
     >
-      <Label title={node?.label}>
-        {node?.kubeObject ? (
-          <KubeIcon kind={node.kubeObject.kind} width="24px" height="24px" />
-        ) : (
-          node?.icon ?? null
-        )}
-        <Box sx={{ opacity: 0.7 }}>{node?.subtitle}</Box>
-        <Box>{node?.label}</Box>
-      </Label>
+      {(node?.label || node?.subtitle) && (
+        <Label title={node?.label}>
+          {node?.kubeObject ? (
+            <KubeIcon kind={node.kubeObject.kind} width="24px" height="24px" />
+          ) : (
+            node?.icon ?? null
+          )}
+          <Box sx={{ opacity: 0.8 }}>{node?.subtitle}</Box>
+          <Box sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{node?.label}</Box>
+        </Label>
+      )}
     </Container>
   );
 });

frontend/src/components/resourceMap/nodes/GroupNode.tsx

@@ -922,7 +922,7 @@ const defaultRoutes: {
     name: 'Map',
     sidebar: 'map',
     isFullWidth: true,
-    component: () => <LazyGraphView height="calc(100vh - 64px)" />,
+    component: () => <LazyGraphView height="100%" />,
   },
 };