Added directions as props to be set for Diagram

Signed-off-by: Jasper Boeijenga <jboeijenga@gmail.com>

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"

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