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