From aeac4f2695bf103578b87062544afd5813a404c8 Mon Sep 17 00:00:00 2001
From: Stuart Hendren <stuart@committed.io>
Date: Sun, 12 Mar 2023 18:22:10 +0000
Subject: [PATCH] feat: add a flag to layout on change

The layout on change flag controll if the layout should be run when data is added or removed. This
is on by default but turned off if a node is dragged.
---
 apps/docs/src/Graph.stories.tsx               |  2 +-
 apps/docs/src/GraphToolbar.stories.tsx        |  1 +
 package-lock.json                             |  2 +-
 packages/graph/src/graph/LayoutModel.test.ts  |  5 ++
 packages/graph/src/graph/LayoutModel.ts       | 20 ++++++--
 .../GraphDebugControl/GraphDebugControl.tsx   | 23 ++++++++-
 .../GraphToolbar/GraphToolbar.test.tsx        |  5 ++
 .../components/GraphToolbar/GraphToolbar.tsx  | 13 ++++-
 .../components/GraphToolbar/ReLayout.test.tsx | 24 +++++++++
 .../src/components/GraphToolbar/ReLayout.tsx  | 50 +++++++++++++++++++
 .../graph/renderer/CytoscapeRenderer.test.tsx |  4 +-
 .../src/graph/renderer/CytoscapeRenderer.tsx  | 17 +++++++
 12 files changed, 154 insertions(+), 12 deletions(-)
 create mode 100644 packages/react/src/components/GraphToolbar/ReLayout.test.tsx
 create mode 100644 packages/react/src/components/GraphToolbar/ReLayout.tsx

diff --git a/apps/docs/src/Graph.stories.tsx b/apps/docs/src/Graph.stories.tsx
index e6a2c19..9e1f040 100644
--- a/apps/docs/src/Graph.stories.tsx
+++ b/apps/docs/src/Graph.stories.tsx
@@ -1,7 +1,7 @@
 import { Box, Column } from '@committed/components'
+import { cytoscapeRenderer, Graph, GraphDebugControl } from '@committed/components-graph'
 import { Meta } from '@storybook/react'
 import React, { useState } from 'react'
-import { Graph, cytoscapeRenderer, GraphDebugControl,} from '@committed/components-graph'
 import { exampleModel } from './StoryUtil'
 
 export default {
diff --git a/apps/docs/src/GraphToolbar.stories.tsx b/apps/docs/src/GraphToolbar.stories.tsx
index 2cbb71f..7767033 100644
--- a/apps/docs/src/GraphToolbar.stories.tsx
+++ b/apps/docs/src/GraphToolbar.stories.tsx
@@ -16,6 +16,7 @@ function isFunction(
 const empty = {
   zoom: false,
   layout: false,
+  relayout: false,
   refit: false,
   hide: false,
   size: false,
diff --git a/package-lock.json b/package-lock.json
index bfa9d1f..fdc53a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41106,7 +41106,7 @@
         "@committed/components": "^8.1.3",
         "@committed/components-graph": "*",
         "@committed/config": "*",
-        "@faker-js/faker": "*",
+        "@faker-js/faker": "^7.6.0",
         "@storybook/addon-docs": "^6.5.12",
         "@storybook/addon-essentials": "^6.5.12",
         "@storybook/addons": "^6.5.12",
diff --git a/packages/graph/src/graph/LayoutModel.test.ts b/packages/graph/src/graph/LayoutModel.test.ts
index 0b0c1ee..c2740eb 100644
--- a/packages/graph/src/graph/LayoutModel.test.ts
+++ b/packages/graph/src/graph/LayoutModel.test.ts
@@ -43,3 +43,8 @@ it('Validating an validated layout does nothing', () => {
   const model = layoutModel.setLayout('grid').validate()
   expect(model.validate()).toBe(model)
 })
+
+it('Changing the onChange does not invalidate the layout', () => {
+  expect(layoutModel.setOnChange(false).isDirty()).toBe(false)
+  expect(layoutModel.setOnChange(true).isDirty()).toBe(false)
+})
diff --git a/packages/graph/src/graph/LayoutModel.ts b/packages/graph/src/graph/LayoutModel.ts
index 9589887..fad528f 100644
--- a/packages/graph/src/graph/LayoutModel.ts
+++ b/packages/graph/src/graph/LayoutModel.ts
@@ -2,14 +2,16 @@ import { CustomGraphLayout, GraphLayout, PresetGraphLayout } from './types'
 
 export class LayoutModel {
   private readonly layout: GraphLayout
+  private readonly onChange: boolean
   private readonly invalidated: boolean
 
   static createDefault(): LayoutModel {
-    return new LayoutModel('force-directed', true)
+    return new LayoutModel('force-directed', true, true)
   }
 
-  constructor(layout: GraphLayout, invalidated = true) {
+  constructor(layout: GraphLayout, onChange = true, invalidated = true) {
     this.layout = layout
+    this.onChange = onChange
     this.invalidated = invalidated
   }
 
@@ -21,11 +23,15 @@ export class LayoutModel {
     return this.invalidated
   }
 
+  isOnChange(): boolean {
+    return this.onChange
+  }
+
   validate(): LayoutModel {
     if (!this.invalidated) {
       return this
     } else {
-      return new LayoutModel(this.layout, false)
+      return new LayoutModel(this.layout, this.onChange, false)
     }
   }
 
@@ -33,12 +39,16 @@ export class LayoutModel {
     if (this.invalidated) {
       return this
     } else {
-      return new LayoutModel(this.layout, true)
+      return new LayoutModel(this.layout, this.onChange, true)
     }
   }
 
   setLayout(layout: GraphLayout): LayoutModel {
-    return new LayoutModel(layout, true)
+    return new LayoutModel(layout, this.onChange, true)
+  }
+
+  setOnChange(onChange: boolean): LayoutModel {
+    return new LayoutModel(this.layout, onChange, false)
   }
 
   /**
diff --git a/packages/react/src/components/GraphDebugControl/GraphDebugControl.tsx b/packages/react/src/components/GraphDebugControl/GraphDebugControl.tsx
index 3e7b959..c8f81fb 100644
--- a/packages/react/src/components/GraphDebugControl/GraphDebugControl.tsx
+++ b/packages/react/src/components/GraphDebugControl/GraphDebugControl.tsx
@@ -1,7 +1,14 @@
-import { Box, Button, Flex, Select, SelectItem } from '@committed/components'
+import {
+  Box,
+  Button,
+  Checkbox,
+  Flex,
+  Select,
+  SelectItem,
+} from '@committed/components'
 import { Generator, GraphModel, PresetGraphLayout } from '@committed/graph'
-import { defaultLayouts } from '../../graph'
 import React from 'react'
+import { defaultLayouts } from '../../graph'
 
 const { addRandomNode, addRandomEdge, removeRandomNode, removeRandomEdge } =
   Generator
@@ -44,6 +51,18 @@ export const GraphDebugControl: React.FC<GraphDebugControlProps> = ({
         <Button onClick={() => onChange(removeRandomEdge(model))}>
           Remove Random Edge
         </Button>
+        <Checkbox
+          label="Layout on change"
+          checked={model.getCurrentLayout().isOnChange()}
+          onCheckedChange={(checked: boolean) =>
+            onChange(
+              GraphModel.applyLayout(
+                model,
+                model.getCurrentLayout().setOnChange(checked)
+              )
+            )
+          }
+        />
         <Button
           onClick={() =>
             onChange(
diff --git a/packages/react/src/components/GraphToolbar/GraphToolbar.test.tsx b/packages/react/src/components/GraphToolbar/GraphToolbar.test.tsx
index df4a776..1b07f3e 100644
--- a/packages/react/src/components/GraphToolbar/GraphToolbar.test.tsx
+++ b/packages/react/src/components/GraphToolbar/GraphToolbar.test.tsx
@@ -14,6 +14,7 @@ import { Graph } from '../Graph'
 const empty = {
   zoom: false,
   layout: false,
+  relayout: false,
   refit: false,
   hide: false,
   size: false,
@@ -108,6 +109,10 @@ export const Layout: React.FC<TemplateProps> = (props: TemplateProps) => (
   <Template {...empty} layout {...props} />
 )
 
+export const Relayout: React.FC<TemplateProps> = (props: TemplateProps) => (
+  <Template {...empty} relayout {...props} />
+)
+
 export const SizeBy: React.FC<TemplateProps> = (props: TemplateProps) => (
   <Template {...empty} size {...props} />
 )
diff --git a/packages/react/src/components/GraphToolbar/GraphToolbar.tsx b/packages/react/src/components/GraphToolbar/GraphToolbar.tsx
index 3431a61..f6738ea 100644
--- a/packages/react/src/components/GraphToolbar/GraphToolbar.tsx
+++ b/packages/react/src/components/GraphToolbar/GraphToolbar.tsx
@@ -17,6 +17,7 @@ import { GraphLayoutOptions } from './GraphLayoutOptions'
 import { GraphLayoutRun } from './GraphLayoutRun'
 import { Hide } from './Hide'
 import { Refit } from './Refit'
+import { ReLayout } from './ReLayout'
 import { SizeBy } from './SizeBy'
 import { Zoom } from './Zoom'
 
@@ -76,6 +77,7 @@ export type GraphToolbarProps = CSSProps &
     layouts?: GraphLayout[]
     zoom?: boolean
     layout?: boolean
+    relayout?: boolean
     refit?: boolean
     hide?: boolean
     size?: boolean
@@ -96,11 +98,13 @@ export const GraphToolbar: React.FC<GraphToolbarProps> = ({
   layouts = [],
   zoom = true,
   layout = true,
+  relayout = true,
   refit = true,
   hide = true,
   size = true,
   buttonVariant = 'tertiary',
   css,
+  children,
   ...props
 }) => {
   const menuItems = useMemo(() => {
@@ -118,6 +122,12 @@ export const GraphToolbar: React.FC<GraphToolbarProps> = ({
       )
     }
 
+    if (relayout) {
+      items.push(
+        <ReLayout key="relayout" model={model} onModelChange={onModelChange} />
+      )
+    }
+
     if (layout && layouts.length > 0) {
       items.push(
         <GraphLayoutOptions
@@ -129,7 +139,7 @@ export const GraphToolbar: React.FC<GraphToolbarProps> = ({
       )
     }
     return items.filter((item) => item !== null)
-  }, [hide, layout, layouts, model, onModelChange, size])
+  }, [hide, layout, layouts, model, onModelChange, size, relayout])
 
   return (
     <StyledToolbar css={css as any} {...props}>
@@ -157,6 +167,7 @@ export const GraphToolbar: React.FC<GraphToolbarProps> = ({
           onModelChange={onModelChange}
         />
       )}
+      {children}
       {menuItems.length > 0 && (
         <Menu>
           <MenuTrigger>
diff --git a/packages/react/src/components/GraphToolbar/ReLayout.test.tsx b/packages/react/src/components/GraphToolbar/ReLayout.test.tsx
new file mode 100644
index 0000000..71fe343
--- /dev/null
+++ b/packages/react/src/components/GraphToolbar/ReLayout.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { renderLight, screen, userEvent } from '../../test/setup'
+import { Relayout } from './GraphToolbar.test'
+
+it('Can select to size by', () => {
+  renderLight(<Relayout withGraph={false} />)
+  userEvent.tab()
+  userEvent.keyboard('{enter}')
+  expect(
+    screen
+      .getByRole('menuitemcheckbox', { name: /Layout on change/i })
+      .getAttribute('aria-checked')
+  ).toBe('true')
+  userEvent.click(
+    screen.getByRole('menuitemcheckbox', { name: /Layout on change/i })
+  )
+  userEvent.tab()
+  userEvent.keyboard('{enter}')
+  expect(
+    screen
+      .getByRole('menuitemcheckbox', { name: /Layout on change/i })
+      .getAttribute('aria-checked')
+  ).toBe('false')
+})
diff --git a/packages/react/src/components/GraphToolbar/ReLayout.tsx b/packages/react/src/components/GraphToolbar/ReLayout.tsx
new file mode 100644
index 0000000..f1a7d65
--- /dev/null
+++ b/packages/react/src/components/GraphToolbar/ReLayout.tsx
@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { CSSProps, MenuCheckboxItem, VariantProps } from '@committed/components'
+import { GraphModel } from '@committed/graph'
+import React, { useCallback } from 'react'
+
+export type ReLayoutProps = CSSProps &
+  VariantProps<typeof MenuCheckboxItem> & {
+    /** Declarative definition of graph state */
+    model: GraphModel
+    /** The graph model change callback */
+    onModelChange: (
+      model: GraphModel | ((model2: GraphModel) => GraphModel)
+    ) => void
+  }
+
+/**
+ * A GraphToolbar sub-component to relayout on graph change
+ */
+export const ReLayout: React.FC<ReLayoutProps> = ({
+  model,
+  onModelChange,
+  css,
+  ...props
+}) => {
+  const handleToggle = useCallback((): void => {
+    onModelChange(
+      GraphModel.applyLayout(
+        model,
+        model
+          .getCurrentLayout()
+          .setOnChange(!model.getCurrentLayout().isOnChange())
+      )
+    )
+  }, [model, onModelChange])
+
+  return (
+    <>
+      <MenuCheckboxItem
+        css={css as any}
+        {...props}
+        key="hideEdgeLabels"
+        checked={model.getCurrentLayout().isOnChange()}
+        onCheckedChange={handleToggle}
+      >
+        Layout on change
+      </MenuCheckboxItem>
+    </>
+  )
+}
diff --git a/packages/react/src/graph/renderer/CytoscapeRenderer.test.tsx b/packages/react/src/graph/renderer/CytoscapeRenderer.test.tsx
index e4e8b40..6156fd2 100644
--- a/packages/react/src/graph/renderer/CytoscapeRenderer.test.tsx
+++ b/packages/react/src/graph/renderer/CytoscapeRenderer.test.tsx
@@ -57,11 +57,11 @@ it('can be rendered', () => {
     />
   )
   expect(asFragment()).toBeDefined()
-  expect(cytoscape.addListener).toHaveBeenCalledTimes(8)
+  expect(cytoscape.addListener).toHaveBeenCalledTimes(10)
 
   unmount()
 
-  expect(cytoscape.removeListener).toHaveBeenCalledTimes(8)
+  expect(cytoscape.removeListener).toHaveBeenCalledTimes(10)
 })
 
 it('layout command triggers layout', () => {
diff --git a/packages/react/src/graph/renderer/CytoscapeRenderer.tsx b/packages/react/src/graph/renderer/CytoscapeRenderer.tsx
index b60237d..680b1a1 100644
--- a/packages/react/src/graph/renderer/CytoscapeRenderer.tsx
+++ b/packages/react/src/graph/renderer/CytoscapeRenderer.tsx
@@ -272,6 +272,21 @@ const Renderer: GraphRenderer<CyGraphRendererOptions>['render'] = ({
     },
     [updateSelection]
   )
+  const updateLayout = useCallback(() => {
+    if (graphModel.getCurrentLayout().isOnChange()) {
+      triggerLayout(layout)
+    }
+  }, [graphModel, triggerLayout, layout])
+  const disableLayoutOnChange = useCallback(() => {
+    if (graphModel.getCurrentLayout().isOnChange()) {
+      onChange((model) =>
+        GraphModel.applyLayout(
+          model,
+          model.getCurrentLayout().setOnChange(false)
+        )
+      )
+    }
+  }, [graphModel, onChange])
   const layoutStarting = useCallback(() => {
     console.debug('Layout started')
     layoutStart.current = Date.now()
@@ -286,6 +301,8 @@ const Renderer: GraphRenderer<CyGraphRendererOptions>['render'] = ({
   useCyListener(cytoscape, unselectNode, 'unselect', 'node')
   useCyListener(cytoscape, selectEdge, 'select', 'edge')
   useCyListener(cytoscape, unselectEdge, 'unselect', 'edge')
+  useCyListener(cytoscape, updateLayout, 'add remove', '*')
+  useCyListener(cytoscape, disableLayoutOnChange, 'drag', 'node')
   useCyListener(cytoscape, layoutStarting, 'layoutstart')
   useCyListener(cytoscape, layoutStopping, 'layoutstop')
   // eslint-disable-next-line react-hooks/exhaustive-deps