From cabb18bffac01f54d809d96d55d6e8a7fe5577b0 Mon Sep 17 00:00:00 2001
From: Jasper Boeijenga <jboeijenga@gmail.com>
Date: Wed, 6 Dec 2023 17:09:25 +0100
Subject: [PATCH] Added directions as props to be set for Diagram

Signed-off-by: Jasper Boeijenga <jboeijenga@gmail.com>
---
 .../components/GroupsExplorerContent/GroupsDiagram.tsx    | 6 ++++--
 .../GroupsExplorerContent/GroupsExplorerContent.tsx       | 8 ++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

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<any>) {
 /**
  * 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 }) => {
       <ContentHeader title={props.title ?? 'Groups'}>
         <SupportButton>Explore your groups.</SupportButton>
       </ContentHeader>
-      <GroupsDiagram />
+      <GroupsDiagram direction={props.direction} />
     </Content>
   );
 };