surface prop for growing or containing height of graph

Signed-off-by: Maximilian Vorbrodt <maximilian.vorbrodt@hotmail.com>

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();
@@ -225,6 +234,8 @@ export function DependencyGraph<NodeData, EdgeData>(
   const maxHeight = Math.max(graphHeight, containerHeight);
   const minHeight = Math.min(graphHeight, containerHeight);
 
+  const scalableHeight = fit === 'grow' ? maxHeight : minHeight;
+
   const containerRef = React.useMemo(
     () =>
       debounce((node: SVGSVGElement) => {
@@ -395,7 +406,7 @@ export function DependencyGraph<NodeData, EdgeData>(
       ref={containerRef}
       {...svgProps}
       width="100%"
-      height={minHeight}
+      height={scalableHeight}
       viewBox={`0 0 ${maxWidth} ${maxHeight}`}
     >
       <defs>

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

@@ -240,6 +240,7 @@ export function GroupsDiagram() {
         direction={DependencyGraphTypes.Direction.RIGHT_LEFT}
         renderNode={RenderNode}
         className={classes.graph}
+        fit="contain"
       />
 
       <Typography