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. + + ); }