Merge pull request #90 from commitd/sh/layout

feat: add a flag to layout on change

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 {

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,

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

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,24 +23,32 @@ 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)
     }
   }
 
   invalidate(): 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)
   }
 
   /**

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(

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

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>

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')
+})

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>
+    </>
+  )
+}

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', () => {

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