Merge pull request #14403 from vorbrodt/fix-group-diagram-scroll-behaviour

Fix group diagram scroll behaviour

.changeset/hip-stingrays-kneel.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Create a variable for minimum height and add a prop named 'fit' for determining if the graph height should grow or be contained.

.changeset/new-bugs-march.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': patch
+---
+
+Adds styling to graph forcing it to always fill out the available space.

packages/core-components/api-report.md

@@ -250,6 +250,7 @@ export interface DependencyGraphProps<NodeData, EdgeData>
   edgeRanks?: number;
   edges: DependencyEdge<EdgeData>[];
   edgeWeight?: number;
+  fit?: 'grow' | 'contain';
   labelOffset?: number;
   // Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
   labelPosition?: LabelPosition;

packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx

@@ -170,6 +170,14 @@ export interface DependencyGraphProps<NodeData, EdgeData>
    * Default: 'curveMonotoneX'
    */
   curve?: 'curveStepBefore' | 'curveMonotoneX';
+  /**
+   * Controls if the graph should be contained or grow
+   *
+   * @remarks
+   *
+   * Default: 'grow'
+   */
+  fit?: 'grow' | 'contain';
 }
 
 const WORKSPACE_ID = 'workspace';
@@ -203,6 +211,7 @@ export function DependencyGraph<NodeData, EdgeData>(
     defs,
     zoom = 'enabled',
     curve = 'curveMonotoneX',
+    fit = 'grow',
     ...svgProps
   } = props;
   const theme: BackstageTheme = useTheme();
@@ -223,6 +232,9 @@ export function DependencyGraph<NodeData, EdgeData>(
 
   const maxWidth = Math.max(graphWidth, containerWidth);
   const maxHeight = Math.max(graphHeight, containerHeight);
+  const minHeight = Math.min(graphHeight, containerHeight);
+
+  const scalableHeight = fit === 'grow' ? maxHeight : minHeight;
 
   const containerRef = React.useMemo(
     () =>
@@ -394,7 +406,7 @@ export function DependencyGraph<NodeData, EdgeData>(
       ref={containerRef}
       {...svgProps}
       width="100%"
-      height={maxHeight}
+      height={scalableHeight}
       viewBox={`0 0 ${maxWidth} ${maxHeight}`}
     >
       <defs>

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx

@@ -43,8 +43,10 @@ import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles((theme: BackstageTheme) => ({
   graph: {
-    flex: 1,
-    minHeight: 0,
+    minHeight: '100%',
+  },
+  graphWrapper: {
+    height: '100%',
   },
   organizationNode: {
     fill: theme.palette.secondary.light,
@@ -62,6 +64,15 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
     justifyContent: 'center',
     color: 'black',
   },
+  legend: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    padding: theme.spacing(1),
+    '& .icon': {
+      verticalAlign: 'bottom',
+    },
+  },
   textOrganization: {
     color: theme.palette.secondary.contrastText,
   },
@@ -221,7 +232,7 @@ export function GroupsDiagram() {
   }
 
   return (
-    <>
+    <div className={classes.graphWrapper}>
       <DependencyGraph
         nodes={nodes}
         edges={edges}
@@ -229,14 +240,18 @@ export function GroupsDiagram() {
         direction={DependencyGraphTypes.Direction.RIGHT_LEFT}
         renderNode={RenderNode}
         className={classes.graph}
+        fit="contain"
       />
+
       <Typography
         variant="caption"
-        style={{ display: 'block', textAlign: 'right' }}
+        color="textSecondary"
+        display="block"
+        className={classes.legend}
       >
-        <ZoomOutMap style={{ verticalAlign: 'bottom' }} /> Use pinch &amp; zoom
-        to move around the diagram.
+        <ZoomOutMap className="icon" /> Use pinch &amp; zoom to move around the
+        diagram.
       </Typography>
-    </>
+    </div>
   );
 }