Merge pull request #43 from commitd/stuarthendren/41

fix(layout): fix to allow custom layout to run in built versions

Author: stuarthendren

example/index.tsx

@@ -9,23 +9,67 @@ import {
   ThemeProvider,
   ThemeSwitch,
 } from '@committed/components'
+import { use } from 'cytoscape'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import {
   addRandomEdge,
   addRandomNode,
+  CustomGraphLayout,
   cytoscapeRenderer,
+  DecoratedNode,
   Graph,
   GraphModel,
   GraphToolbar,
   initializeCytoscape,
   ModelNode,
   NodeViewer,
 } from '../dist/committed-components-graph.cjs.js'
-import { use } from 'cytoscape'
 
 initializeCytoscape(use)
 
+const sortedLayout: CustomGraphLayout = {
+  name: 'Data Structure',
+  runLayout: (model: GraphModel): Record<string, cytoscape.Position> => {
+    const paddingTop = 50
+    const paddingLeft = 50
+    const columnWidth = 250
+    const rowHeight = 75
+    const byLabel: Record<string, DecoratedNode[]> = model.nodes.reduce<
+      Record<string, DecoratedNode[]>
+    >((acc, next) => {
+      acc[(next.label ?? 'unknown') as string] = (
+        acc[(next.label ?? 'unknown') as string] ?? []
+      ).concat(next)
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return acc
+    }, {})
+    const sortedByLabel: DecoratedNode[][] = Object.keys(byLabel)
+      .sort((a, b) => a.localeCompare(b))
+      .map((label): DecoratedNode[] => byLabel[label])
+
+    let column = 0
+    return sortedByLabel.reduce<Record<string, cytoscape.Position>>(
+      (acc, nodes) => {
+        let row = 0
+        nodes.forEach((n) => {
+          acc[n.id] = {
+            x: column * columnWidth + paddingLeft,
+            y: row * rowHeight + paddingTop,
+          }
+          row++
+        })
+
+        column++
+        return acc
+      },
+      {}
+    )
+  },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  stopLayout: () => {},
+}
+
 const App: React.FC = () => {
   const [model, setModel] = React.useState(
     addRandomEdge(addRandomNode(GraphModel.createEmpty(), 20), 15)
@@ -42,7 +86,7 @@ const App: React.FC = () => {
             model={model}
             onModelChange={setModel}
             iconStyle={{ color: '$brandContrast' }}
-            layouts={cytoscapeRenderer.layouts}
+            layouts={[...cytoscapeRenderer.layouts, sortedLayout]}
           />
           <ThemeSwitch />
         </AppBarActions>

package.json

@@ -21,6 +21,7 @@
   },
   "scripts": {
     "clean": "shx rm -rf dist",
+    "commit": "cz",
     "build": "rollpkg build --tsconfig ./tsconfig.build.json",
     "watch": "rollpkg watch",
     "lint": "eslint './src/**/*.{ts,tsx}'",

src/graph/renderer/CytoscapeGraphLayoutAdapter.test.ts

@@ -1,17 +1,22 @@
+import { CollectionArgument, NodeCollection } from 'cytoscape'
 import { GraphModel } from '../GraphModel'
 import {
-  CustomLayoutOptions,
+  CUSTOM_LAYOUT_NAME,
   CytoscapeGraphLayoutAdapter,
+  CytoscapeGraphLayoutAdapterManipulation,
+  CytoscapeGraphLayoutAdapterOptions,
+  register,
 } from './CytoscapeGraphLayoutAdapter'
-import { CollectionArgument, NodeCollection } from 'cytoscape'
 
 it('should not throw if cytoscape undefined', () => {
-  expect(CytoscapeGraphLayoutAdapter.register).not.toThrow()
+  const cyUseMock = jest.fn()
+  expect(() => register(cyUseMock)).not.toThrow()
 })
 
-it('should throw if no algorigthm defined', () => {
-  const adapter = new CytoscapeGraphLayoutAdapter(
-    {} as cytoscape.LayoutPositionOptions & CustomLayoutOptions
+it('should throw if no algorithm defined', () => {
+  const adapter = {} as CytoscapeGraphLayoutAdapterManipulation
+  CytoscapeGraphLayoutAdapter.bind(adapter)(
+    {} as CytoscapeGraphLayoutAdapterOptions
   )
   expect(() => {
     adapter.run()
@@ -21,12 +26,12 @@ it('should throw if no algorigthm defined', () => {
 it('should register with cytoscape', () => {
   const cyMock = jest.fn()
 
-  CytoscapeGraphLayoutAdapter.register(cyMock)
+  register(cyMock)
 
   expect(cyMock).toHaveBeenCalled()
   expect(cyMock).toHaveBeenCalledWith(
     'layout',
-    CytoscapeGraphLayoutAdapter.LAYOUT_NAME,
+    CUSTOM_LAYOUT_NAME,
     CytoscapeGraphLayoutAdapter
   )
 })
@@ -49,7 +54,8 @@ it('should run layout', () => {
         positions,
       } as unknown as NodeCollection),
   } as CollectionArgument
-  const adapter = new CytoscapeGraphLayoutAdapter({
+  const adapter = {} as CytoscapeGraphLayoutAdapterManipulation
+  CytoscapeGraphLayoutAdapter.bind(adapter)({
     model,
     algorithm,
     eles,

src/graph/renderer/CytoscapeGraphLayoutAdapter.ts

@@ -1,62 +1,74 @@
-import { Ext, LayoutManipulation, LayoutPositionOptions, Core } from 'cytoscape'
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import {
+  Core,
+  Ext,
+  LayoutEventObject,
+  LayoutManipulation,
+  LayoutPositionOptions,
+} from 'cytoscape'
 import { GraphModel } from '../GraphModel'
 import { CustomGraphLayout } from '../types'
 
-export type CustomLayoutOptions = {
+export type CytoscapeGraphLayoutAdapterOptions = LayoutPositionOptions & {
+  name: string
   model: GraphModel
   algorithm: CustomGraphLayout
+  // Provided
+  cy: Core
 }
 
-export class CytoscapeGraphLayoutAdapter implements LayoutManipulation {
-  private readonly options: LayoutPositionOptions & CustomLayoutOptions
-
-  static readonly LAYOUT_NAME: string = 'custom'
+export type CytoscapeGraphLayoutAdapterManipulation = LayoutManipulation & {
+  options: CytoscapeGraphLayoutAdapterOptions
+}
 
-  constructor(options: LayoutPositionOptions & CustomLayoutOptions) {
-    this.options = options
-  }
+export const CUSTOM_LAYOUT_NAME = 'custom'
 
-  static register: Ext = (cytoscape) => {
-    if (cytoscape == null) {
-      return
-    } // can't register if cytoscape unspecified
-    cytoscape(
-      'layout',
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      CytoscapeGraphLayoutAdapter.LAYOUT_NAME,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      CytoscapeGraphLayoutAdapter
-    )
-  }
+export function CytoscapeGraphLayoutAdapter(
+  this: CytoscapeGraphLayoutAdapterManipulation,
+  options: CytoscapeGraphLayoutAdapterOptions
+): void {
+  this.options = Object.assign({}, options, { name: CUSTOM_LAYOUT_NAME })
 
-  run(): this {
+  this.run = function (
+    this: CytoscapeGraphLayoutAdapterManipulation & LayoutEventObject
+  ) {
     if (this.options.algorithm == null) {
       throw new Error('No custom layout algorithm was specified')
     }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
     const cy: Core = this.options.cy
     const boundingBox = { x1: 0, y1: 0, w: cy.width(), h: cy.height() }
     const nodePositions = this.options.algorithm.runLayout(this.options.model, {
       boundingBox,
     })
-    this.options.eles.nodes().positions((n) => {
+    this.options.eles.nodes().positions((n: { id: () => string | number }) => {
       return nodePositions[n.id()]
     })
     return this
   }
-
-  // alias for run()
-  start(): this {
+  this.start = function () {
     return this.run()
   }
 
   // called on continuous layouts to stop them before they finish
-  stop(): this {
+  this.stop = function () {
     this.options.algorithm.stopLayout()
     return this
   }
 }
+
+export const register: Ext = (cytoscape) => {
+  if (cytoscape == null) {
+    return
+  } // can't register if cytoscape unspecified
+  cytoscape(
+    'layout',
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    CUSTOM_LAYOUT_NAME,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    CytoscapeGraphLayoutAdapter
+  )
+}

src/graph/renderer/CytoscapeRenderer.tsx

@@ -43,8 +43,9 @@ import {
   PresetGraphLayout,
 } from '../types'
 import {
-  CustomLayoutOptions,
-  CytoscapeGraphLayoutAdapter,
+  CUSTOM_LAYOUT_NAME,
+  CytoscapeGraphLayoutAdapterOptions,
+  register,
 } from './CytoscapeGraphLayoutAdapter'
 import { useCyListener } from './useCyListener'
 
@@ -59,7 +60,7 @@ export function initializeCytoscape(
   cyuse: (module: cytoscape.Ext) => void
 ): void {
   try {
-    cyuse(CytoscapeGraphLayoutAdapter.register)
+    cyuse(register)
     cyuse(ccola)
   } catch {
     // Ignore multiple attempts to initialize
@@ -156,10 +157,10 @@ const Renderer: GraphRenderer<CyGraphRendererOptions>['render'] = ({
     grid,
     cola,
     custom: {
-      name: CytoscapeGraphLayoutAdapter.LAYOUT_NAME,
+      name: CUSTOM_LAYOUT_NAME,
       model: graphModel,
       algorithm: graphModel.getCurrentLayout().getLayout(),
-    } as CustomLayoutOptions & LayoutOptions,
+    } as CytoscapeGraphLayoutAdapterOptions & LayoutOptions,
   }
   const nodes = graphModel.nodes
   const edges = graphModel.edges
@@ -180,14 +181,14 @@ const Renderer: GraphRenderer<CyGraphRendererOptions>['render'] = ({
           typeof graphLayout === 'string'
             ? layouts[graphLayout]
             : ({
-                name: CytoscapeGraphLayoutAdapter.LAYOUT_NAME,
+                name: CUSTOM_LAYOUT_NAME,
                 model: graphModel,
                 algorithm: graphLayout,
-              } as CustomLayoutOptions)
+              } as CytoscapeGraphLayoutAdapterOptions)
         if (l == null) {
           throw new Error('Layout does not exist')
         }
-        cytoscape.layout(l as LayoutOptions).run()
+        cytoscape.layout(l).run()
       }
     },
     200