feat: allow the addition of or overiding of layout options

so layouts can be made to use the none default options and variants can be offered

Author: stuarthendren

apps/docs/package.json

@@ -22,6 +22,7 @@
     },
     "devDependencies": {
         "@committed/config": "*",
+        "@faker-js/faker": "^7.6.0",
         "@storybook/addon-docs": "^6.5.12",
         "@storybook/addon-essentials": "^6.5.12",
         "@storybook/addons": "^6.5.12",

apps/docs/src/Decoration.stories.tsx

@@ -5,6 +5,7 @@ import {
   NodeDecoration,
   sizeNodeBy
 } from '@committed/components-graph'
+import { faker } from '@faker-js/faker'
 import { Meta } from '@storybook/react'
 import React, { useState } from 'react'
 import { exampleGraphData } from './exampleData'
@@ -82,91 +83,97 @@ export const CustomIcons: React.FC = () => {
     GraphModel.createWithContent(
       new ContentModel(
         {
-          chris: {
-            id: 'chris',
+          n1: {
+            id: 'n1',
             attributes: {},
-            label: 'Chris Flatley',
-            icon: 'https://committed.io/static/chris-4f65af02b0d026c76bfbac1aa90461c3.jpg',
+            label: faker.name.fullName(),
+            icon: 'https://i.pravatar.cc/100',
             size: 100,
           },
-          stuart: {
-            id: 'stuart',
+          n2: {
+            id: 'n2',
             attributes: {},
-            label: 'Stuart Hendren',
-            icon: 'https://committed.io/static/stuart-c12a4df0a720f9252abb8279ffa9f7c8.png',
+            label: faker.name.fullName(),
+            icon: 'https://i.pravatar.cc/100',
             size: 100,
           },
-          jon: {
-            id: 'jon',
+          n3: {
+            id: 'n3',
             attributes: {},
-            label: 'Jon Elliot',
-            icon: 'https://committed.io/static/jon-4f56f1e3f4369e4d115d3a88195a2f4a.png',
+            label: faker.name.fullName(),
             size: 100,
           },
-          steve: {
-            id: 'steve',
+          n4: {
+            id: 'n4',
             attributes: {},
-            label: 'Steven Taylor',
-            icon: 'https://committed.io/static/steve-282e9f5032489e7a4274ee5eec6fd206.jpg',
+            label: faker.name.fullName(),
+            icon: 'https://i.pravatar.cc/100',
             size: 100,
           },
-          matt: {
-            id: 'matt',
+          n5: {
+            id: 'n5',
             attributes: {},
-            label: 'Matt Copas',
-            icon: 'https://committed.io/static/matt-e622c816a3d4f6c831346da257ed6500.jpg',
+            label: faker.name.fullName(),
+            icon: 'https://i.pravatar.cc/100',
             size: 100,
           },
-          kristian: {
-            id: 'kristian',
+          n6: {
+            id: 'n6',
             attributes: {},
-            label: 'Kristian Aspinall',
-            icon: 'https://committed.io/static/kristian-d0ae8e222bf08ea15acba90d5a41b2aa.jpg',
+            label: faker.name.fullName(),
+            icon: 'https://i.pravatar.cc/100',
             size: 100,
           },
         },
         {
           e1: {
             id: 'e1',
+            label: '',
             attributes: {},
-            source: 'chris',
-            target: 'stuart',
+            source: 'n1',
+            target: 'n2',
           },
           e2: {
             id: 'e2',
+            label: '',
             attributes: {},
-            source: 'stuart',
-            target: 'jon',
+            source: 'n2',
+            target: 'n3',
           },
           e3: {
             id: 'e3',
+            label: '',
             attributes: {},
-            source: 'kristian',
-            target: 'steve',
+            source: 'n6',
+            target: 'n4',
           },
           e4: {
             id: 'e4',
+            label: '',
             attributes: {},
-            source: 'matt',
-            target: 'kristian',
+            source: 'n5',
+            target: 'n6',
           },
           e5: {
             id: 'e5',
+            label: '',
             attributes: {},
-            source: 'jon',
-            target: 'matt',
+            source: 'n3',
+            target: 'n5',
           },
           e6: {
             id: 'e6',
+            label: '',
             attributes: {},
-            source: 'jon',
-            target: 'steve',
+            source: 'n3',
+            target: 'n4',
           },
           e7: {
             id: 'e7',
+            label: '',
             attributes: {},
-            source: 'chris',
-            target: 'steve',
+            source: 'n1',
+            target: 'n4',
           },
         }
       )

apps/docs/src/Layout.stories.tsx

@@ -1,4 +1,4 @@
-import { Graph, GraphModel } from '@committed/components-graph'
+import { Graph, GraphModel, GraphToolbar, LayoutOptions, defaultLayouts, ContentModel, Generator } from '@committed/components-graph'
 import { Meta } from '@storybook/react'
 import React, { useState } from 'react'
 import { exampleModel, Template } from './StoryUtil'
@@ -23,7 +23,7 @@ export const CircleLayout: React.FC = () => {
   const [model, setModel] = useState(
     GraphModel.applyLayout(
       exampleModel,
-      exampleModel.getCurrentLayout().presetLayout('circle')
+      exampleModel.getCurrentLayout().setLayout('circle')
     )
   )
   return <Template model={model} onModelChange={setModel} />
@@ -33,7 +33,7 @@ export const ColaForceDirectedLayout: React.FC = () => {
   const [model, setModel] = useState(
     GraphModel.applyLayout(
       exampleModel,
-      exampleModel.getCurrentLayout().presetLayout('cola')
+      exampleModel.getCurrentLayout().setLayout('cola')
     )
   )
   return <Template model={model} onModelChange={setModel} />
@@ -43,7 +43,7 @@ export const GridLayout: React.FC = () => {
   const [model, setModel] = useState(
     GraphModel.applyLayout(
       exampleModel,
-      exampleModel.getCurrentLayout().presetLayout('grid')
+      exampleModel.getCurrentLayout().setLayout('grid')
     )
   )
   return <Template model={model} onModelChange={setModel} />
@@ -53,7 +53,7 @@ export const HierarchicalLayout: React.FC = () => {
   const [model, setModel] = useState(
     GraphModel.applyLayout(
       exampleModel,
-      exampleModel.getCurrentLayout().presetLayout('hierarchical')
+      exampleModel.getCurrentLayout().setLayout('hierarchical')
     )
   )
   return <Template model={model} onModelChange={setModel} />
@@ -63,7 +63,7 @@ export const ConcentricLayout: React.FC = () => {
   const [model, setModel] = useState(
     GraphModel.applyLayout(
       exampleModel,
-      exampleModel.getCurrentLayout().presetLayout('concentric')
+      exampleModel.getCurrentLayout().setLayout('concentric')
     )
   )
   return <Template model={model} onModelChange={setModel} />
@@ -73,7 +73,7 @@ export const BreadthfirstLayout: React.FC = () => {
   const [model, setModel] = useState(
     GraphModel.applyLayout(
       exampleModel,
-      exampleModel.getCurrentLayout().presetLayout('breadth-first')
+      exampleModel.getCurrentLayout().setLayout('breadth-first')
     )
   )
   return <Template model={model} onModelChange={setModel} />
@@ -84,7 +84,7 @@ export const CoseLayout: React.FC = () => {
   const [model, setModel] = useState(
     GraphModel.applyLayout(
       exampleModel,
-      exampleModel.getCurrentLayout().presetLayout('cose')
+      exampleModel.getCurrentLayout().setLayout('cose')
     )
   )
   return <Template model={model} onModelChange={setModel} />
@@ -94,7 +94,7 @@ export const CustomLayout: React.FC = () => {
   const [model, setModel] = useState(
     GraphModel.applyLayout(
       exampleModel,
-      exampleModel.getCurrentLayout().customLayout({
+      exampleModel.getCurrentLayout().setLayout({
         name: 'Alphabetical',
         runLayout: (m) => {
           return m.nodes.reduce<Record<string, cytoscape.Position>>(
@@ -114,3 +114,27 @@ export const CustomLayout: React.FC = () => {
   )
   return <Template model={model} onModelChange={setModel} />
 }
+
+
+export const OverrideLayout: React.FC = () => {
+  const [model, setModel] = useState(
+    GraphModel.applyLayout(
+      Generator.randomGraph(100, 100),
+      exampleModel.getCurrentLayout().setLayout('network-simplex')
+    )
+  )
+  const layoutOptions: Record<string, LayoutOptions> = {
+    'network-simplex': { ...defaultLayouts.hierarchical, ranker: 'network-simplex'} as LayoutOptions,
+    'inverted': { ...defaultLayouts.hierarchical, ranker: 'network-simplex', transform: (node, position) => {
+      return {x: position.x, y: -position.y }
+    }} as LayoutOptions,
+    'tight-tree': { ...defaultLayouts.hierarchical, ranker: 'tight-tree' }as LayoutOptions,
+    'longest-path': { ...defaultLayouts.hierarchical, ranker: 'longest-path' }as LayoutOptions,
+    'radial': { ...defaultLayouts['breadth-first'], circle: true }as LayoutOptions,
+
+  }
+  
+  return <Template model={model} onModelChange={setModel} options={{height: 600, renderOptions: { layoutOptions }}} >
+    <GraphToolbar direction='row' model={model} onModelChange={setModel} layouts={[ 'network-simplex', 'inverted', 'tight-tree', 'breadth-first', 'concentric', 'radial']}/>
+  </Template>
+}

apps/docs/src/StoryUtil.tsx

@@ -1,4 +1,4 @@
-import { cytoscapeRenderer, Graph, GraphRendererOptions } from '@committed/components-graph'
+import { CyGraphRendererOptions, cytoscapeRenderer, Graph } from '@committed/components-graph'
 import { Generator, GraphModel } from '@committed/graph'
 import React from 'react'
 
@@ -9,14 +9,16 @@ export const Template: React.FC<{
   onModelChange: (
     model: GraphModel | ((model2: GraphModel) => GraphModel)
   ) => void
-  height?: GraphRendererOptions['height']
-}> = ({ model, onModelChange, height }) => {
-  return (
-    <Graph
-      model={model}
-      onModelChange={onModelChange}
-      renderer={cytoscapeRenderer}
-      options={{ height: height ?? 600 }}
-    />
+  options?: CyGraphRendererOptions
+}> = ({ model, onModelChange, options, children }) => {
+  return (<>
+      {children}
+      <Graph
+        model={model}
+        onModelChange={onModelChange}
+        renderer={cytoscapeRenderer}
+        options={{ height: 600, ...options }}
+      />
+    </>
   )
 }

package-lock.json

@@ -17,29 +17,29 @@ beforeEach(() => {
 
 it('Gets layout', () => {
   const layout: GraphLayout = 'grid'
-  expect(layoutModel.presetLayout(layout).getLayout()).toBe(layout)
+  expect(layoutModel.setLayout(layout).getLayout()).toBe(layout)
 })
 
 it('Layout algorithm defined when custom layout specified', () => {
-  expect(layoutModel.customLayout(layoutAlgorithm).getLayout()).toBe(
+  expect(layoutModel.setLayout(layoutAlgorithm).getLayout()).toBe(
     layoutAlgorithm
   )
 })
 
 it('Changing the layout invalidates the layout', () => {
-  expect(layoutModel.presetLayout('grid').isDirty()).toBe(true)
+  expect(layoutModel.setLayout('grid').isDirty()).toBe(true)
 })
 
 it('Validating an invalidated layout', () => {
-  expect(layoutModel.presetLayout('grid').validate().isDirty()).toBe(false)
+  expect(layoutModel.setLayout('grid').validate().isDirty()).toBe(false)
 })
 
 it('Invalidating an validated layout', () => {
-  const model = layoutModel.presetLayout('grid').validate()
+  const model = layoutModel.setLayout('grid').validate()
   expect(model.invalidate().isDirty()).toBe(true)
 })
 
 it('Validating an validated layout does nothing', () => {
-  const model = layoutModel.presetLayout('grid').validate()
+  const model = layoutModel.setLayout('grid').validate()
   expect(model.validate()).toBe(model)
 })

packages/graph/src/graph/LayoutModel.test.ts

@@ -37,11 +37,21 @@ export class LayoutModel {
     }
   }
 
-  presetLayout(layout: PresetGraphLayout): LayoutModel {
+  setLayout(layout: GraphLayout): LayoutModel {
     return new LayoutModel(layout, true)
   }
 
+  /**
+   * @deprecated use setLayout
+   */
+  presetLayout(layout: PresetGraphLayout): LayoutModel {
+    return this.setLayout(layout)
+  }
+
+  /**
+   * @deprecated use setLayout
+   */
   customLayout(layout: CustomGraphLayout): LayoutModel {
-    return new LayoutModel(layout, true)
+    return this.setLayout(layout)
   }
 }