feat: fix graph view

Lasserich · Lasserich · commit 34bd3232f6fb · 2025-09-15T18:24:23.000+02:00
diff --git a/src/components/BentoGrid/BentoGrid.module.css b/src/components/BentoGrid/BentoGrid.module.css
@@ -27,7 +27,7 @@
   transform: translateY(-2px);
 }
 
-/* Card sizes are now explicitly positioned via gridColumn/gridRow props */
+/* Card sizes are explicitly positioned via gridColumn/gridRow props */
 /* Layout: 
    - Left: Extra large graph (8 cols x 4 rows) + Large crossplane (8 cols x 2 rows)
    - Right: Two medium GitOps (4 cols x 2 rows each) + Two small underneath (2 cols x 2 rows each)
diff --git a/src/components/BentoGrid/ComponentCard/ComponentCard.module.css b/src/components/BentoGrid/ComponentCard/ComponentCard.module.css
@@ -14,6 +14,8 @@
 
 .disabled {
   opacity: 0.6;
+  user-select: none; 
+  pointer-events: none; 
 }
 
 .clickable {
diff --git a/src/components/BentoGrid/ComponentCard/ComponentCard.tsx b/src/components/BentoGrid/ComponentCard/ComponentCard.tsx
@@ -11,6 +11,7 @@ export const ComponentCard: React.FC<GenericHintProps & {
   size?: 'small' | 'medium' | 'large' | 'extra-large';
   secondarySegments?: Array<{ percentage: number; color: string; label: string }>;
   secondaryLabel?: string;
+  expanded?: boolean;
 }> = ({
   enabled = false,
   version,
@@ -22,6 +23,7 @@ export const ComponentCard: React.FC<GenericHintProps & {
   size = 'medium',
   secondarySegments,
   secondaryLabel = 'Secondary Metric',
+  expanded = false, 
 }) => {
   const { t } = useTranslation();
 
@@ -59,11 +61,13 @@ export const ComponentCard: React.FC<GenericHintProps & {
         {/* Disabled overlay */}
         {!enabled && <div className={styles.disabledOverlay} />}
 
-        {/* Expand button */}
+        {/* Expand/Collapse button */}
         {onClick && enabled && (
           <Button
-            icon="sap-icon://expand"
+            icon={expanded ? "sap-icon://collapse" : "sap-icon://expand"}
             design="Transparent"
+            tooltip={expanded ? "Collapse to overview" : "Expand details"}
+            style={{ zIndex: 1 }} /* Lower z-index */
             className={size === 'small' ? styles.expandButtonSmall : styles.expandButton}
             onClick={(e) => {
               e.stopPropagation();
diff --git a/src/components/BentoGrid/GraphCard/GraphCard.module.css b/src/components/BentoGrid/GraphCard/GraphCard.module.css
@@ -15,6 +15,8 @@
   flex: 1;
   position: relative;
   z-index: 1;
+  pointer-events: auto !important;
+  overflow: hidden;
 }
 
 /* Override the Graph component's fixed height globally within this wrapper */
diff --git a/src/components/BentoGrid/GraphCard/GraphCard.tsx b/src/components/BentoGrid/GraphCard/GraphCard.tsx
@@ -13,6 +13,7 @@ export const GraphCard: React.FC<GraphCardProps> = ({
   className = '',
   colorBy = 'source'
 }) => {
+
   return (
     <div className={`${styles.container} ${className}`}>
       <div className={styles.simpleWrapper}>
diff --git a/src/components/Graphs/Graph.module.css b/src/components/Graphs/Graph.module.css
@@ -8,13 +8,21 @@
   background-color: #ffffff;
   font-family: var(--sapFontFamily);
   position: relative;
+  touch-action: none;
+  overflow: hidden;
 }
 
 .graphColumn {
   flex: 1;
   display: flex;
   flex-direction: column;
   background-color: #ffffff;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  cursor: grab;
+  overflow: hidden;
 }
 
 .bottomLegendContainer {
@@ -143,7 +151,23 @@
   stroke-width: 2px;
 }
 
-/* Custom background for bright white */
 :global(.react-flow__background) {
   background-color: #ffffff !important;
+}
+
+:global(.react-flow__pane) {
+  cursor: grab;
+  overflow: hidden;
+}
+
+:global(.react-flow__pane.dragging) {
+  cursor: grabbing;
+}
+
+:global(.react-flow) {
+  overflow: hidden;
+}
+
+:global(.react-flow__renderer) {
+  overflow: hidden;
 }
diff --git a/src/components/Graphs/Graph.tsx b/src/components/Graphs/Graph.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
-import { ReactFlow, Background, Controls, Node, BackgroundVariant } from '@xyflow/react';
+import { ReactFlow, Background, Controls, Node, BackgroundVariant, SelectionMode } from '@xyflow/react';
 import type { NodeProps } from '@xyflow/react';
 import { Button, Popover } from '@ui5/webcomponents-react';
 import styles from './Graph.module.css';
@@ -93,16 +93,20 @@ const Graph: React.FC<GraphProps> = ({ colorBy: initialColorBy = 'source' }) =>
           edges={edges}
           nodeTypes={nodeTypes}
           defaultViewport={{ x: 40, y: 40, zoom: 0.8 }}
-          minZoom={0.3}
-          maxZoom={3.0}
+          minZoom={0.2}
+          maxZoom={4.0}
           proOptions={{
             hideAttribution: true,
           }}
           nodesDraggable={false}
           nodesConnectable={false}
           elementsSelectable={false}
-          zoomOnScroll={true}
+          zoomOnScroll={false}
+          panOnScroll={false}
           panOnDrag={true}
+          selectionOnDrag={false}
+          selectionMode={SelectionMode.Partial}
+          preventScrolling={true}
         >
           <Background gap={20} variant={BackgroundVariant.Dots} bgColor='#ffffff' />
           <Controls showInteractive={false} />
diff --git a/src/spaces/mcp/pages/McpPage.module.css b/src/spaces/mcp/pages/McpPage.module.css
@@ -4,54 +4,46 @@
   width: 100%;
 }
 
-/* Dynamic expansion animations for bento grid */
 .expandedGrid {
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  /* Keep the original 600px height and 6-row structure */
 }
 
 .expandedCard {
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  /* Reduced highlighting for component cards */
   border: 1px solid var(--sapObjectHeader_BorderColor) !important;
 }
 
 .expandedCard:hover {
-  transform: none !important; /* Remove hover transform */
-  box-shadow: var(--sapContent_Shadow1) !important; /* Keep normal shadow */
+  transform: none !important;
+  box-shadow: var(--sapContent_Shadow1) !important;
 }
 
-/* Non-interactive expanded card - no hover effects */
 .expandedCardNonInteractive {
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-  pointer-events: none; /* Disable all interaction */
 }
 
 .expandedCardNonInteractive:hover {
-  transform: none !important; /* Override base card hover transform */
-  box-shadow: var(--sapContent_Shadow1) !important; /* Keep normal shadow */
+  transform: none !important;
+  box-shadow: var(--sapContent_Shadow1) !important;
 }
 
-/* Disabled/non-interactive card - no hover effects */
 .disabledCard {
-  pointer-events: none; /* Disable all interaction */
-  opacity: 0.6; /* Visual indication that it's disabled */
+  pointer-events: none;
+  opacity: 0.6;
 }
 
 .disabledCard:hover {
-  transform: none !important; /* Override base card hover transform */
-  box-shadow: var(--sapContent_Shadow1) !important; /* Keep normal shadow */
+  transform: none !important;
+  box-shadow: var(--sapContent_Shadow1) !important;
 }
 
-/* Non-interactive card (like graph) - no hover effects but allows internal interaction */
 .nonInteractiveCard {
-  /* Allow internal interaction but disable card-level hover effects */
   cursor: default;
 }
 
 .nonInteractiveCard:hover {
-  transform: none !important; /* Override base card hover transform */
-  box-shadow: var(--sapContent_Shadow1) !important; /* Keep normal shadow */
+  transform: none !important;
+  box-shadow: var(--sapContent_Shadow1) !important;
 }
 
 .hidingCard {
diff --git a/src/spaces/mcp/pages/McpPage.tsx b/src/spaces/mcp/pages/McpPage.tsx
@@ -1,9 +1,8 @@
-import { BusyIndicator, ObjectPage, ObjectPageSection, ObjectPageTitle, Button } from '@ui5/webcomponents-react';
+import { BusyIndicator, ObjectPage, ObjectPageSection, ObjectPageTitle, Panel } from '@ui5/webcomponents-react';
 import { useParams } from 'react-router-dom';
 import CopyKubeconfigButton from '../../../components/ControlPlanes/CopyKubeconfigButton.tsx';
 import styles from './McpPage.module.css';
 import '@ui5/webcomponents-fiori/dist/illustrations/SimpleBalloon';
-import '@ui5/webcomponents-fiori/dist/illustrations/SimpleError';
 // thorws error sometimes if not imported
 import '@ui5/webcomponents-fiori/dist/illustrations/BeforeSearch';
 import IllustratedError from '../../../components/Shared/IllustratedError.tsx';
@@ -183,6 +182,11 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
     }, 300);
   };
 
+  // Add spacer at the bottom of the content
+  const BottomSpacer = () => (
+    <div style={{ height: '40px', backgroundColor: '#f9f9f9', marginTop: '16px', marginBottom: '32px' }}></div>
+  );
+
   return (
     <ObjectPage
       preserveHeaderStateOnClick={true}
@@ -245,21 +249,8 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
                     size="large"
                     secondarySegments={providerDistribution.segments}
                     secondaryLabel={`Providers ${providerDistribution.totalProviders}`}
+                    expanded={expandedCard === 'crossplane'} /* Add this prop to control icon */
                   />
-                  {expandedCard === 'crossplane' && (
-                    <Button
-                      icon="sap-icon://collapse"
-                      design="Default"
-                      onClick={handleCollapseExpanded}
-                      tooltip="Collapse to overview"
-                      style={{
-                        position: 'absolute',
-                        bottom: '8px',
-                        right: '8px',
-                        zIndex: 10
-                      }}
-                    />
-                  )}
                 </div>
               </BentoCard>
             )}
@@ -282,18 +273,7 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
                     config={gitOpsConfig}
                     onClick={handleCollapseExpanded}
                     size="large"
-                  />
-                  <Button
-                    icon="sap-icon://collapse"
-                    design="Default"
-                    onClick={handleCollapseExpanded}
-                    tooltip="Collapse to overview"
-                    style={{
-                      position: 'absolute',
-                      bottom: '8px',
-                      right: '8px',
-                      zIndex: 10
-                    }}
+                    expanded={true}
                   />
                 </div>
               </BentoCard>
@@ -395,21 +375,29 @@ function McpPageContent({ mcp, controlPlaneName }: { mcp: any; controlPlaneName:
           {/* Tables section - outside the BentoGrid to maintain the 600px layout */}
           {expandedCard === 'crossplane' && (
             <div style={{ marginTop: '24px' }}>
-              <div className="crossplane-table-element">
-                <Providers />
-              </div>
-              <div className="crossplane-table-element">
-                <ProvidersConfig />
-              </div>
-              <div className="crossplane-table-element">
-                <ManagedResources />
-              </div>
+              <Panel headerText="Details">
+                <div style={{ marginTop: '24px' }}>
+                  <div className="crossplane-table-element">
+                    <Providers />
+                  </div>
+                  <div className="crossplane-table-element" style={{ marginTop: '16px' }}>
+                    <ProvidersConfig />
+                  </div>
+                  <div className="crossplane-table-element" style={{ marginTop: '16px' }}>
+                    <ManagedResources />
+                  </div>
+                </div>
+              </Panel>
+              <div style={{ height: '12px', backgroundColor: '#f5f5f5', marginBottom: '32px', borderRadius: '0 0 8px 8px' }}></div>
             </div>
           )}
           
           {expandedCard === 'gitops' && (
             <div style={{ marginTop: '24px' }}>
-              <FluxList />
+              <Panel headerText="Flux List">
+                <FluxList />
+              </Panel>
+              <div style={{ height: '12px', backgroundColor: '#f5f5f5', marginBottom: '32px', borderRadius: '0 0 8px 8px' }}></div>
             </div>
           )}
         </div>

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@`
`27`	`27`	`transform: translateY(-2px);`
`28`	`28`	`}`
`29`	`29`
`30`		`-/* Card sizes are now explicitly positioned via gridColumn/gridRow props */`
	`30`	`+/* Card sizes are explicitly positioned via gridColumn/gridRow props */`
`31`	`31`	`/* Layout:`
`32`	`32`	`- Left: Extra large graph (8 cols x 4 rows) + Large crossplane (8 cols x 2 rows)`
`33`	`33`	`- Right: Two medium GitOps (4 cols x 2 rows each) + Two small underneath (2 cols x 2 rows each)`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,8 @@`
`14`	`14`
`15`	`15`	`.disabled {`
`16`	`16`	`opacity: 0.6;`
	`17`	`+ user-select: none;`
	`18`	`+ pointer-events: none;`
`17`	`19`	`}`
`18`	`20`
`19`	`21`	`.clickable {`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,8 @@`
`15`	`15`	`flex: 1;`
`16`	`16`	`position: relative;`
`17`	`17`	`z-index: 1;`
	`18`	`+ pointer-events: auto !important;`
	`19`	`+ overflow: hidden;`
`18`	`20`	`}`
`19`	`21`
`20`	`22`	`/* Override the Graph component's fixed height globally within this wrapper */`