diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 5b26629082..94d152ce1e 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -170,6 +170,14 @@ export interface DependencyGraphProps * 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( defs, zoom = 'enabled', curve = 'curveMonotoneX', + fit = 'grow', ...svgProps } = props; const theme: BackstageTheme = useTheme(); @@ -225,6 +234,8 @@ export function DependencyGraph( 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( ref={containerRef} {...svgProps} width="100%" - height={minHeight} + height={scalableHeight} viewBox={`0 0 ${maxWidth} ${maxHeight}`} > diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index d00eddb35e..674ef1e43f 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/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" />