From 6981ae6bb5c9ded15a24e6c2d8e7222960281a52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= Date: Tue, 16 Sep 2025 23:08:07 +0200 Subject: [PATCH 1/3] Fixed DependencyGraph size issue, causing it not to adapt to the container size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Gustaf Räntilä --- .changeset/public-sites-admire.md | 6 ++ .../DependencyGraph/DependencyGraph.tsx | 64 ++++++++++++++----- .../EntityRelationsGraph.tsx | 1 + 3 files changed, 55 insertions(+), 16 deletions(-) create mode 100644 .changeset/public-sites-admire.md diff --git a/.changeset/public-sites-admire.md b/.changeset/public-sites-admire.md new file mode 100644 index 0000000000..aa6d245527 --- /dev/null +++ b/.changeset/public-sites-admire.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-catalog-graph': patch +--- + +Fixed DependencyGraph svg size not adapting to the container size diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 411a0e2c57..85e6d9ef3f 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -22,6 +22,8 @@ import { useRef, useState, } from 'react'; +import useMeasure from 'react-use/esm/useMeasure'; +import { once } from 'lodash'; import * as d3Zoom from 'd3-zoom'; import * as d3Selection from 'd3-selection'; import useTheme from '@material-ui/core/styles/useTheme'; @@ -41,11 +43,18 @@ import { useTranslationRef } from '@backstage/core-plugin-api/alpha'; import { coreComponentsTranslationRef } from '../../translation'; const useStyles = makeStyles((theme: Theme) => ({ + fullscreenButton: { + position: 'absolute', + right: 0, + }, root: { overflow: 'hidden', minHeight: '100%', minWidth: '100%', }, + fixedHeight: { + height: '100%', + }, fullscreen: { backgroundColor: theme.palette.background.paper, }, @@ -268,9 +277,11 @@ export function DependencyGraph( 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 [_measureRef] = useMeasure(); + const measureRef = once(_measureRef); + + const scalableHeight = fit === 'grow' ? maxHeight : containerHeight; const containerRef = useMemo( () => @@ -278,6 +289,8 @@ export function DependencyGraph( if (!root) { return; } + measureRef(root); + // Set up zooming + panning const node: SVGSVGElement = root.querySelector( `svg#${DEPENDENCY_GRAPH_SVG}`, @@ -328,7 +341,7 @@ export function DependencyGraph( setContainerHeight(newContainerHeight); } }, 100), - [containerHeight, containerWidth, maxWidth, maxHeight, zoom], + [measureRef, containerHeight, containerWidth, maxWidth, maxHeight, zoom], ); const setNodesAndEdges = useCallback(() => { @@ -431,28 +444,43 @@ export function DependencyGraph( updateGraph, ]); - function setNode(id: string, node: Types.DependencyNode) { - graph.current.setNode(id, node); - updateGraph(); - return graph.current; - } + const setNode = useCallback( + (id: string, node: Types.DependencyNode) => { + graph.current.setNode(id, node); + updateGraph(); + return graph.current; + }, + [updateGraph], + ); - function setEdge(id: dagre.Edge, edge: Types.DependencyEdge) { - graph.current.setEdge(id, edge); - updateGraph(); - return graph.current; - } + const setEdge = useCallback( + (id: dagre.Edge, edge: Types.DependencyEdge) => { + graph.current.setEdge(id, edge); + updateGraph(); + return graph.current; + }, + [updateGraph], + ); return ( -
+
{allowFullscreen && ( (
); } + +function combineClasses(...classes: (string | false | undefined)[]) { + return classes.filter(c => !!c).join(' '); +} diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index f77ca4b37d..17b5861173 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx @@ -158,6 +158,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => { renderLabel={renderLabel || DefaultRenderLabel} direction={direction} className={classes.graph} + fit="contain" paddingX={theme.spacing(4)} paddingY={theme.spacing(4)} labelPosition={DependencyGraphTypes.LabelPosition.RIGHT} From c8ec8e52425c830a378acfbd4facaadc0addb2ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= Date: Wed, 17 Sep 2025 16:11:48 +0200 Subject: [PATCH 2/3] Update .changeset/public-sites-admire.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Fredrik Adelöw Signed-off-by: Gustaf Räntilä --- .changeset/public-sites-admire.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/public-sites-admire.md b/.changeset/public-sites-admire.md index aa6d245527..f5f3304f9f 100644 --- a/.changeset/public-sites-admire.md +++ b/.changeset/public-sites-admire.md @@ -3,4 +3,4 @@ '@backstage/plugin-catalog-graph': patch --- -Fixed DependencyGraph svg size not adapting to the container size +Fixed DependencyGraph `svg` size not adapting to the container size From 65f5a3a84d0e811538ea3bb85a8e026958ee9f7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= Date: Wed, 17 Sep 2025 16:16:20 +0200 Subject: [PATCH 3/3] Using 'classnames' instead of custom implementation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Gustaf Räntilä --- .../src/components/DependencyGraph/DependencyGraph.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 85e6d9ef3f..df26bb86fd 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -23,6 +23,7 @@ import { useState, } from 'react'; import useMeasure from 'react-use/esm/useMeasure'; +import classNames from 'classnames'; import { once } from 'lodash'; import * as d3Zoom from 'd3-zoom'; import * as d3Selection from 'd3-selection'; @@ -465,14 +466,14 @@ export function DependencyGraph( return (
(
); } - -function combineClasses(...classes: (string | false | undefined)[]) { - return classes.filter(c => !!c).join(' '); -}