From 3207eee5bfcd49b073ddfe5d0331c23b80a8bd7e Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Wed, 2 Nov 2022 11:36:48 +0100 Subject: [PATCH 01/13] prevent scrolling when hovering over graph Signed-off-by: Maximilian Vorbrodt --- .../src/components/DependencyGraph/DependencyGraph.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 5159f67d9e..4ff68443f4 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -259,6 +259,8 @@ export function DependencyGraph( ); } + container.on('wheel', e => e.preventDefault()); + if (zoom === 'enabled') { enableZoom(); } else if (zoom === 'enable-on-click') { From 11c1c4dc239d3eea677d070a987e7fc598199856 Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Wed, 2 Nov 2022 11:38:57 +0100 Subject: [PATCH 02/13] add background to group diagram Signed-off-by: Maximilian Vorbrodt --- .../GroupsExplorerContent/GroupsDiagram.tsx | 52 +++++++++++++------ 1 file changed, 36 insertions(+), 16 deletions(-) diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index 23553b8b76..c366d1c6c1 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -35,7 +35,7 @@ import { getEntityRelations, } from '@backstage/plugin-catalog-react'; import { BackstageTheme } from '@backstage/theme'; -import { makeStyles, Typography, useTheme } from '@material-ui/core'; +import { makeStyles, Typography, Paper, useTheme } from '@material-ui/core'; import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; import classNames from 'classnames'; import React from 'react'; @@ -46,6 +46,12 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({ flex: 1, minHeight: 0, }, + graphWrapper: { + position: 'relative', + flex: 1, + minHeight: 0, + display: 'flex', + }, organizationNode: { fill: theme.palette.secondary.light, stroke: theme.palette.secondary.light, @@ -62,6 +68,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, }, @@ -222,21 +237,26 @@ export function GroupsDiagram() { return ( <> - - - Use pinch & zoom - to move around the diagram. - + + + + + Use pinch & zoom to move around + the diagram. + + ); } From e169c225a43d05befcde7b1d62a1e3b06ab44dfc Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Wed, 2 Nov 2022 11:40:17 +0100 Subject: [PATCH 03/13] remove max height from graph Signed-off-by: Maximilian Vorbrodt --- .../src/components/DependencyGraph/DependencyGraph.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 4ff68443f4..3ecdbedddf 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -396,7 +396,6 @@ export function DependencyGraph( ref={containerRef} {...svgProps} width="100%" - height={maxHeight} viewBox={`0 0 ${maxWidth} ${maxHeight}`} > From 9140cb69c32905710f97dcde343ed445d783057d Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Wed, 2 Nov 2022 11:43:20 +0100 Subject: [PATCH 04/13] add changeset Signed-off-by: Maximilian Vorbrodt --- .changeset/cuddly-jeans-laugh.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/cuddly-jeans-laugh.md diff --git a/.changeset/cuddly-jeans-laugh.md b/.changeset/cuddly-jeans-laugh.md new file mode 100644 index 0000000000..6dadb85022 --- /dev/null +++ b/.changeset/cuddly-jeans-laugh.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-explore': patch +--- + +Adds a background to the group diagram and prevents weird scroll/zoom behavior when hovering the graph. With this fix the user can only zoom in and out while hovering the graph. If the cursor is not hovering the graph the user can scroll up and down on the page. In total this creates more consistent scrolling or zooming behavior. From 4bc0ed33ca8db31d3a0f4ffdf6108eff9d307c77 Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Mon, 14 Nov 2022 15:14:33 +0100 Subject: [PATCH 05/13] bring back old scrolling behaviour Signed-off-by: Maximilian Vorbrodt --- .../src/components/DependencyGraph/DependencyGraph.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 3ecdbedddf..64d39a4425 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -259,8 +259,6 @@ export function DependencyGraph( ); } - container.on('wheel', e => e.preventDefault()); - if (zoom === 'enabled') { enableZoom(); } else if (zoom === 'enable-on-click') { From d4368d1f9498283e9f3d40dbb86e53a15116d91a Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Mon, 14 Nov 2022 15:16:35 +0100 Subject: [PATCH 06/13] make graph fill only visiable space on the page Signed-off-by: Maximilian Vorbrodt --- .../src/components/DependencyGraph/DependencyGraph.tsx | 4 +++- .../src/components/GroupsExplorerContent/GroupsDiagram.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 64d39a4425..5dd8664107 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -223,6 +223,7 @@ export function DependencyGraph( const maxWidth = Math.max(graphWidth, containerWidth); const maxHeight = Math.max(graphHeight, containerHeight); + const minHeight = Math.min(graphHeight, containerHeight); const containerRef = React.useMemo( () => @@ -393,7 +394,8 @@ export function DependencyGraph( diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index c366d1c6c1..95c6d86d27 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -44,7 +44,7 @@ import useAsync from 'react-use/lib/useAsync'; const useStyles = makeStyles((theme: BackstageTheme) => ({ graph: { flex: 1, - minHeight: 0, + minHeight: '100%', }, graphWrapper: { position: 'relative', From fd47108dedca4b5ac49278bac32a0ea6e8fa82ad Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Mon, 14 Nov 2022 15:23:18 +0100 Subject: [PATCH 07/13] update changeset Signed-off-by: Maximilian Vorbrodt --- .changeset/cuddly-jeans-laugh.md | 6 ------ .changeset/lucky-carrots-stare.md | 6 ++++++ 2 files changed, 6 insertions(+), 6 deletions(-) delete mode 100644 .changeset/cuddly-jeans-laugh.md create mode 100644 .changeset/lucky-carrots-stare.md diff --git a/.changeset/cuddly-jeans-laugh.md b/.changeset/cuddly-jeans-laugh.md deleted file mode 100644 index 6dadb85022..0000000000 --- a/.changeset/cuddly-jeans-laugh.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@backstage/core-components': patch -'@backstage/plugin-explore': patch ---- - -Adds a background to the group diagram and prevents weird scroll/zoom behavior when hovering the graph. With this fix the user can only zoom in and out while hovering the graph. If the cursor is not hovering the graph the user can scroll up and down on the page. In total this creates more consistent scrolling or zooming behavior. diff --git a/.changeset/lucky-carrots-stare.md b/.changeset/lucky-carrots-stare.md new file mode 100644 index 0000000000..81ad1b7268 --- /dev/null +++ b/.changeset/lucky-carrots-stare.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-explore': patch +--- + +Adds a background to GroupsDiagram and makes the graph fill up all the visible space on the page for, making it so the user does not have to scroll up or down on the page. From a7bc5d082d43edc404128e4e7315b6e0ed11979f Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Mon, 14 Nov 2022 15:48:35 +0100 Subject: [PATCH 08/13] fix code style issue Signed-off-by: Maximilian Vorbrodt --- .../src/components/DependencyGraph/DependencyGraph.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 5dd8664107..5b26629082 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -394,7 +394,7 @@ export function DependencyGraph( From 8bc81264b90d3521583cda421bbb97d362586077 Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Thu, 17 Nov 2022 19:06:42 +0100 Subject: [PATCH 09/13] remove paper component Signed-off-by: Maximilian Vorbrodt --- .../GroupsExplorerContent/GroupsDiagram.tsx | 48 ++++++++----------- 1 file changed, 21 insertions(+), 27 deletions(-) diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index 95c6d86d27..d00eddb35e 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -35,7 +35,7 @@ import { getEntityRelations, } from '@backstage/plugin-catalog-react'; import { BackstageTheme } from '@backstage/theme'; -import { makeStyles, Typography, Paper, useTheme } from '@material-ui/core'; +import { makeStyles, Typography, useTheme } from '@material-ui/core'; import ZoomOutMap from '@material-ui/icons/ZoomOutMap'; import classNames from 'classnames'; import React from 'react'; @@ -43,14 +43,10 @@ import useAsync from 'react-use/lib/useAsync'; const useStyles = makeStyles((theme: BackstageTheme) => ({ graph: { - flex: 1, minHeight: '100%', }, graphWrapper: { - position: 'relative', - flex: 1, - minHeight: 0, - display: 'flex', + height: '100%', }, organizationNode: { fill: theme.palette.secondary.light, @@ -236,27 +232,25 @@ export function GroupsDiagram() { } return ( - <> - - +
+ - - Use pinch & zoom to move around - the diagram. - - - + + Use pinch & zoom to move around the + diagram. + +
); } From 99014b723e28d9dc3109db22fcb4e127f2484585 Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Mon, 21 Nov 2022 11:23:52 +0100 Subject: [PATCH 10/13] surface prop for growing or containing height of graph Signed-off-by: Maximilian Vorbrodt --- .../components/DependencyGraph/DependencyGraph.tsx | 13 ++++++++++++- .../GroupsExplorerContent/GroupsDiagram.tsx | 1 + 2 files changed, 13 insertions(+), 1 deletion(-) 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" /> Date: Mon, 21 Nov 2022 11:29:45 +0100 Subject: [PATCH 11/13] update changeset Signed-off-by: Maximilian Vorbrodt --- .changeset/hip-stingrays-kneel.md | 5 +++++ .changeset/lucky-carrots-stare.md | 6 ------ .changeset/new-bugs-march.md | 5 +++++ 3 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 .changeset/hip-stingrays-kneel.md delete mode 100644 .changeset/lucky-carrots-stare.md create mode 100644 .changeset/new-bugs-march.md diff --git a/.changeset/hip-stingrays-kneel.md b/.changeset/hip-stingrays-kneel.md new file mode 100644 index 0000000000..1a8142b7c9 --- /dev/null +++ b/.changeset/hip-stingrays-kneel.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Create a minHeight variable and add a prop named 'fit' for determining if the graph height should grow or be contained. diff --git a/.changeset/lucky-carrots-stare.md b/.changeset/lucky-carrots-stare.md deleted file mode 100644 index 81ad1b7268..0000000000 --- a/.changeset/lucky-carrots-stare.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@backstage/core-components': patch -'@backstage/plugin-explore': patch ---- - -Adds a background to GroupsDiagram and makes the graph fill up all the visible space on the page for, making it so the user does not have to scroll up or down on the page. diff --git a/.changeset/new-bugs-march.md b/.changeset/new-bugs-march.md new file mode 100644 index 0000000000..346f5a151e --- /dev/null +++ b/.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. From 7913136f4aea7535cb7aa432b6f7063a4fa8c081 Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Mon, 21 Nov 2022 11:34:43 +0100 Subject: [PATCH 12/13] fix spelling changeset Signed-off-by: Maximilian Vorbrodt --- .changeset/hip-stingrays-kneel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/hip-stingrays-kneel.md b/.changeset/hip-stingrays-kneel.md index 1a8142b7c9..171e9257f2 100644 --- a/.changeset/hip-stingrays-kneel.md +++ b/.changeset/hip-stingrays-kneel.md @@ -2,4 +2,4 @@ '@backstage/core-components': patch --- -Create a minHeight variable and add a prop named 'fit' for determining if the graph height should grow or be contained. +Create a variable for minimum height and add a prop named 'fit' for determining if the graph height should grow or be contained. From e006badb53d32d7abaad42961a0b28e2af4a7811 Mon Sep 17 00:00:00 2001 From: Maximilian Vorbrodt Date: Mon, 21 Nov 2022 12:04:59 +0100 Subject: [PATCH 13/13] update public API report of the package Signed-off-by: Maximilian Vorbrodt --- packages/core-components/api-report.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index fc3ab4e5fc..248b9e227c 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -250,6 +250,7 @@ export interface DependencyGraphProps edgeRanks?: number; edges: DependencyEdge[]; 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;