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 1/4] 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>
   );
 };

From aac659efb672681fb61bd8161b30503ac2470744 Mon Sep 17 00:00:00 2001
From: Jasper Boeijenga <jboeijenga@gmail.com>
Date: Wed, 6 Dec 2023 17:11:29 +0100
Subject: [PATCH 2/4] Added changeset

Signed-off-by: Jasper Boeijenga <jboeijenga@gmail.com>
---
 .changeset/many-days-wash.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/many-days-wash.md

diff --git a/.changeset/many-days-wash.md b/.changeset/many-days-wash.md
new file mode 100644
index 0000000000..c712b8cd9b
--- /dev/null
+++ b/.changeset/many-days-wash.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-explore': minor
+---
+
+Added option to set Direction for the graph in the GroupsDiagram

From b33c52c8f704a23882cef3eb3a1a10e7ef1c2e69 Mon Sep 17 00:00:00 2001
From: Jasper Boeijenga <jboeijenga@gmail.com>
Date: Thu, 7 Dec 2023 10:10:00 +0100
Subject: [PATCH 3/4] Generate new API documentation

Signed-off-by: Jasper Boeijenga <jboeijenga@gmail.com>
---
 plugins/explore/api-report.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/plugins/explore/api-report.md b/plugins/explore/api-report.md
index d32a133685..532b853671 100644
--- a/plugins/explore/api-report.md
+++ b/plugins/explore/api-report.md
@@ -8,6 +8,7 @@
 import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { default as default_2 } from 'react';
+import { DependencyGraphTypes } from '@backstage/core-components';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { DomainEntity } from '@backstage/catalog-model';
 import { ExploreToolsConfig } from '@backstage/plugin-explore-react';
@@ -110,6 +111,7 @@ export const exploreRouteRef: RouteRef<undefined>;
 // @public (undocumented)
 export const GroupsExplorerContent: (props: {
   title?: string | undefined;
+  direction?: DependencyGraphTypes.Direction | undefined;
 }) => JSX_2.Element;
 
 // @public (undocumented)

From 766621e90f9bd3d8a37123b2b1d23933457cd311 Mon Sep 17 00:00:00 2001
From: Ben Lambert <ben@blam.sh>
Date: Mon, 11 Dec 2023 16:29:43 +0100
Subject: [PATCH 4/4] Update many-days-wash.md

Signed-off-by: Ben Lambert <ben@blam.sh>
---
 .changeset/many-days-wash.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/many-days-wash.md b/.changeset/many-days-wash.md
index c712b8cd9b..d5f070a34b 100644
--- a/.changeset/many-days-wash.md
+++ b/.changeset/many-days-wash.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/plugin-explore': minor
+'@backstage/plugin-explore': patch
 ---
 
-Added option to set Direction for the graph in the GroupsDiagram
+Added option to set `Direction` for the graph in the `GroupsDiagram`