chore(demo): Updates for dagre layout in Topology Package demo

Author: jeff-phillips-18

packages/demo-app-ts/src/demos/Layouts.tsx

@@ -10,7 +10,7 @@ import {
   useModel,
   ComponentFactory
 } from '@patternfly/react-topology';
-import defaultLayoutFactory from '../layouts/defaultLayoutFactory';
+import defaultLayoutFactory, { LayoutType } from '../layouts/defaultLayoutFactory';
 import defaultComponentFactory from '../components/defaultComponentFactory';
 import GroupHull from '../components/GroupHull';
 import Group from '../components/DemoDefaultGroup';
@@ -61,9 +61,9 @@ const layoutStory =
     return null;
   };
 
-export const Force = withTopologySetup(layoutStory(getModel('Force')));
-export const Dagre = withTopologySetup(layoutStory(getModel('Dagre')));
-export const Cola = withTopologySetup(layoutStory(getModel('Cola')));
+export const Force = withTopologySetup(layoutStory(getModel(LayoutType.Force)));
+export const Dagre = withTopologySetup(layoutStory(getModel(LayoutType.Dagre)));
+export const Cola = withTopologySetup(layoutStory(getModel(LayoutType.Cola)));
 
 export const Layouts: React.FunctionComponent = () => {
   const [activeKey, setActiveKey] = useState<string | number>(0);

packages/demo-app-ts/src/demos/statusConnectorsDemo/StatusConnectors.tsx

@@ -19,6 +19,7 @@ import {
 import defaultComponentFactory from '../../components/defaultComponentFactory';
 import statusConnectorsComponentFactory from './statusConnectorsComponentFactory';
 import DemoControlBar from '../DemoControlBar';
+import { LayoutType } from '../../layouts/defaultLayoutFactory';
 
 const DEFAULT_CHAR_WIDTH = 8;
 const DEFAULT_NODE_SIZE = 75;
@@ -184,7 +185,7 @@ export const StatusConnectorsDemo: React.FunctionComponent = () => {
     const graph = {
       id: 'g1',
       type: 'graph',
-      layout: 'Dagre'
+      layout: LayoutType.Dagre
     };
 
     const model = { graph, nodes, edges };

packages/demo-app-ts/src/demos/topologyPackageDemo/DemoContext.tsx

@@ -2,6 +2,7 @@ import { createContext } from 'react';
 import { action, makeObservable, observable } from 'mobx';
 import { LabelPosition } from '@patternfly/react-topology';
 import { GeneratorEdgeOptions, GeneratorNodeOptions } from './generator';
+import { LayoutType } from '../../layouts/defaultLayoutFactory';
 
 export class DemoModel {
   protected nodeOptionsP: GeneratorNodeOptions = {
@@ -29,10 +30,12 @@ export class DemoModel {
     numGroups: 1,
     nestedLevel: 0
   };
-  protected layoutP: string = 'ColaNoForce';
+  protected layoutP: string = LayoutType.ColaNoForce;
   protected medScaleP: number = 0.5;
   protected lowScaleP: number = 0.3;
 
+  protected logEventsP: boolean = false;
+
   constructor() {
     makeObservable<
       DemoModel,
@@ -42,25 +45,29 @@ export class DemoModel {
       | 'layoutP'
       | 'medScaleP'
       | 'lowScaleP'
+      | 'logEventsP'
       | 'setNodeOptions'
       | 'setEdgeOptions'
       | 'setCreationCounts'
       | 'setLayout'
       | 'setMedScale'
       | 'setLowScale'
+      | 'setLogEvents'
     >(this, {
       nodeOptionsP: observable.ref,
       edgeOptionsP: observable.shallow,
       creationCountsP: observable.shallow,
       layoutP: observable,
       medScaleP: observable,
       lowScaleP: observable,
+      logEventsP: observable,
       setNodeOptions: action,
       setEdgeOptions: action,
       setCreationCounts: action,
       setLayout: action,
       setMedScale: action,
-      setLowScale: action
+      setLowScale: action,
+      setLogEvents: action
     });
   }
 
@@ -111,6 +118,12 @@ export class DemoModel {
   public setLowScale = (scale: number): void => {
     this.lowScaleP = scale;
   };
+  public get logEvents(): boolean {
+    return this.logEventsP;
+  }
+  public setLogEvents = (log: boolean): void => {
+    this.logEventsP = log;
+  };
 }
 
 export const DemoContext = createContext<DemoModel>(new DemoModel());

packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx

@@ -1,6 +1,7 @@
 import { useContext, useState, useRef } from 'react';
 import {
   Button,
+  Checkbox,
   Dropdown,
   DropdownItem,
   DropdownList,
@@ -14,6 +15,19 @@ import {
 } from '@patternfly/react-core';
 import { Controller, Model, observer } from '@patternfly/react-topology';
 import { DemoContext } from './DemoContext';
+import { LayoutType } from '../../layouts/defaultLayoutFactory';
+
+const LayoutTitles: Record<string, string> = {
+  [LayoutType.BreadthFirst]: 'Breadth First',
+  [LayoutType.Cola]: 'Cola',
+  [LayoutType.ColaGroups]: 'Cola Groups',
+  [LayoutType.ColaNoForce]: 'Cola No Force',
+  [LayoutType.Concentric]: 'Concentric',
+  [LayoutType.Dagre]: 'Dagre',
+  [LayoutType.DagreHorizontal]: 'Dagre Horizontal',
+  [LayoutType.Force]: 'Force',
+  [LayoutType.Grid]: 'Grid'
+};
 
 const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ controller }) => {
   const options = useContext(DemoContext);
@@ -36,36 +50,39 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
         <Dropdown
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>
-              {options.layout}
+              {LayoutTitles[options.layout]}
             </MenuToggle>
           )}
           isOpen={layoutDropdownOpen}
           onOpenChange={(isOpen) => setLayoutDropdownOpen(isOpen)}
         >
           <DropdownList>
-            <DropdownItem key={1} onClick={() => updateLayout('Force')}>
-              Force
+            <DropdownItem key={1} onClick={() => updateLayout(LayoutType.Force)}>
+              {LayoutTitles[LayoutType.Force]}
+            </DropdownItem>
+            <DropdownItem key={2} onClick={() => updateLayout(LayoutType.Dagre)}>
+              {LayoutTitles[LayoutType.Dagre]}
             </DropdownItem>
-            <DropdownItem key={2} onClick={() => updateLayout('Dagre')}>
-              Dagre
+            <DropdownItem key={9} onClick={() => updateLayout(LayoutType.DagreHorizontal)}>
+              {LayoutTitles[LayoutType.DagreHorizontal]}
             </DropdownItem>
-            <DropdownItem key={3} onClick={() => updateLayout('Cola')}>
-              Cola
+            <DropdownItem key={3} onClick={() => updateLayout(LayoutType.Cola)}>
+              {LayoutTitles[LayoutType.Cola]}
             </DropdownItem>
-            <DropdownItem key={8} onClick={() => updateLayout('ColaGroups')}>
-              ColaGroups
+            <DropdownItem key={8} onClick={() => updateLayout(LayoutType.ColaGroups)}>
+              {LayoutTitles[LayoutType.ColaGroups]}
             </DropdownItem>
-            <DropdownItem key={4} onClick={() => updateLayout('ColaNoForce')}>
-              ColaNoForce
+            <DropdownItem key={4} onClick={() => updateLayout(LayoutType.ColaNoForce)}>
+              {LayoutTitles[LayoutType.ColaNoForce]}
             </DropdownItem>
-            <DropdownItem key={5} onClick={() => updateLayout('Grid')}>
-              Grid
+            <DropdownItem key={5} onClick={() => updateLayout(LayoutType.Grid)}>
+              {LayoutTitles[LayoutType.Grid]}
             </DropdownItem>
-            <DropdownItem key={6} onClick={() => updateLayout('Concentric')}>
-              Concentric
+            <DropdownItem key={6} onClick={() => updateLayout(LayoutType.Concentric)}>
+              {LayoutTitles[LayoutType.Concentric]}
             </DropdownItem>
-            <DropdownItem key={7} onClick={() => updateLayout('BreadthFirst')}>
-              BreadthFirst
+            <DropdownItem key={7} onClick={() => updateLayout(LayoutType.BreadthFirst)}>
+              {LayoutTitles[LayoutType.BreadthFirst]}
             </DropdownItem>
           </DropdownList>
         </Dropdown>
@@ -193,6 +210,14 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont
           </Flex>
         </Flex>
       </ToolbarItem>
+      <ToolbarItem>
+        <Checkbox
+          id="log-switch"
+          isChecked={options.logEvents}
+          onChange={(_event, checked) => options.setLogEvents(checked)}
+          label="Log events"
+        />
+      </ToolbarItem>
     </Flex>
   );
 });

packages/demo-app-ts/src/demos/topologyPackageDemo/TopologyPackage.tsx

@@ -47,7 +47,8 @@ const TopologyViewComponent: FunctionComponent<TopologyViewComponentProps> = obs
         options.creationCounts.numNodes,
         options.creationCounts.numGroups,
         options.creationCounts.numEdges,
-        options.creationCounts.nestedLevel
+        options.creationCounts.nestedLevel,
+        options.layout
       );
 
       const model = {
@@ -60,6 +61,7 @@ const TopologyViewComponent: FunctionComponent<TopologyViewComponentProps> = obs
       };
 
       controller.fromModel(model, true);
+      controller.getGraph().layout();
     }, [controller, options.creationCounts, options.layout]);
 
     // Once we have the graph, run the layout. This ensures the graph size is set (by the initial size observation in VisualizationSurface)
@@ -120,14 +122,16 @@ const TopologyViewComponent: FunctionComponent<TopologyViewComponentProps> = obs
     }, [selectedIds, controller]);
 
     useEffect(() => {
-      controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, graphPositionChangeListener);
-      controller.addEventListener(GRAPH_LAYOUT_END_EVENT, layoutEndListener);
+      if (options.logEvents) {
+        controller.addEventListener(GRAPH_POSITION_CHANGE_EVENT, graphPositionChangeListener);
+        controller.addEventListener(GRAPH_LAYOUT_END_EVENT, layoutEndListener);
+      }
 
       return () => {
         controller.removeEventListener(GRAPH_POSITION_CHANGE_EVENT, graphPositionChangeListener);
         controller.removeEventListener(GRAPH_LAYOUT_END_EVENT, layoutEndListener);
       };
-    }, [controller]);
+    }, [controller, options.logEvents]);
 
     useEffect(() => {
       controller.getGraph().setDetailsLevelThresholds({