diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx index ea989c2834..f7f0eab0bd 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx @@ -164,7 +164,9 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps) { /** * Dynamically generates a diagram of groups registered in the catalog. */ -export function GroupsDiagram() { +export function GroupsDiagram(props: { + direction?: DependencyGraphTypes.Direction; +}) { const nodes = new Array<{ id: string; kind: string; @@ -243,7 +245,7 @@ export function GroupsDiagram() { nodes={nodes} edges={edges} nodeMargin={10} - direction={DependencyGraphTypes.Direction.RIGHT_LEFT} + direction={props.direction || DependencyGraphTypes.Direction.RIGHT_LEFT} renderNode={RenderNode} className={classes.graph} fit="contain" diff --git a/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx index 61757a35b6..27a7f629ad 100644 --- a/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx +++ b/plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.tsx @@ -19,6 +19,7 @@ import { GroupsDiagram } from './GroupsDiagram'; import { Content, ContentHeader, + DependencyGraphTypes, SupportButton, } from '@backstage/core-components'; import { makeStyles } from '@material-ui/core/styles'; @@ -34,7 +35,10 @@ const useStyles = makeStyles( { name: 'ExploreGroupsContent' }, ); -export const GroupsExplorerContent = (props: { title?: string }) => { +export const GroupsExplorerContent = (props: { + title?: string; + direction?: DependencyGraphTypes.Direction; +}) => { const classes = useStyles(); return ( @@ -42,7 +46,7 @@ export const GroupsExplorerContent = (props: { title?: string }) => { Explore your groups. - + ); };