@neo4j-nvl/layout-workers 1.2.0-d88ba7c2 → 1.2.0-dbc13ec2

package/lib/__mocks__/index.d.ts

@@ -1,12 +1,12 @@
-export function createCoseBilkentLayoutWorker(): {
-    port: {
-        start: jest.Mock<any, any, any>;
-        onmessage: jest.Mock<any, any, any>;
-        postMessage: jest.Mock<any, any, any>;
-        close: jest.Mock<any, any, any>;
-    };
-};
-export function createHierarchicalLayoutWorker(): {
+declare namespace sharedWorkerMock {
+    namespace port {
+        let start: jest.Mock<any, any, any>;
+        let onmessage: jest.Mock<any, any, any>;
+        let postMessage: jest.Mock<any, any, any>;
+        let close: jest.Mock<any, any, any>;
+    }
+}
+export declare function createHierarchicalLayoutWorker(): {
     port: {
         start: jest.Mock<any, any, any>;
         onmessage: jest.Mock<any, any, any>;
@@ -14,3 +14,4 @@ export function createHierarchicalLayoutWorker(): {
         close: jest.Mock<any, any, any>;
     };
 };
+export { sharedWorkerMock as hierarchicalLayoutFallbackWorker };

package/lib/__mocks__/index.js

@@ -7,6 +7,6 @@ const sharedWorkerMock = {
     }
 };
 module.exports = {
-    createCoseBilkentLayoutWorker: () => sharedWorkerMock,
-    createHierarchicalLayoutWorker: () => sharedWorkerMock
+    createHierarchicalLayoutWorker: () => sharedWorkerMock,
+    hierarchicalLayoutFallbackWorker: sharedWorkerMock
 };

package/lib/hierarchical-layout/HierarchicalLayout.fallback.js

@@ -4,8 +4,8 @@ import { layout } from './dagre-layout-impl.js';
 class HierarchicalLayoutFallbackWorker {
     start() { }
     postMessage(data) {
-        const { nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio, forcedDelay = 0 } = data;
-        const layoutData = layout(nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio);
+        const { nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio, forcedDelay = 0, clusterAssignments } = data;
+        const layoutData = layout(nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio, clusterAssignments);
         if (forcedDelay) {
             setTimeout(() => {
                 this.onmessage({ data: layoutData });

package/lib/hierarchical-layout/HierarchicalLayout.worker.js

@@ -2,8 +2,8 @@ import { layout } from './dagre-layout-impl.js';
 onconnect = ({ ports }) => {
     const port = ports[0];
     port.onmessage = ({ data }) => {
-        const { nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio, forcedDelay = 0 } = data;
-        const layoutData = layout(nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio);
+        const { nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio, forcedDelay = 0, clusterAssignments } = data;
+        const layoutData = layout(nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio, clusterAssignments);
         if (forcedDelay) {
             setTimeout(() => {
                 port.postMessage(layoutData);

package/lib/hierarchical-layout/dagre-layout-impl.d.ts

@@ -1,4 +1,4 @@
-export function layout(nodes: any, nodeIds: any, idToPosition: any, rels: any, direction: any, packing: any, pixelRatio?: number): {
+export function layout(nodes: any, nodeIds: any, idToPosition: any, rels: any, direction: any, packing: any, pixelRatio: any, clusterAssignments: any): {
     positions: {};
     parents: {};
     waypoints: {};

package/lib/hierarchical-layout/dagre-layout-impl.js

@@ -56,9 +56,11 @@ const getGraphDimensions = (g) => {
         yOffset: minCenterY - minY
     };
 };
-const createGraph = (pixelRatio) => {
-    // Create a new directed graph
-    const g = new dagre.graphlib.Graph();
+const SYNTHETIC_PARENT_PREFIX = 'syntheticParent:';
+const toSyntheticParentNodeId = (clusterId) => `${SYNTHETIC_PARENT_PREFIX}${clusterId}`;
+const createGraph = (pixelRatio, { compound = false } = {}) => {
+    // Create a new directed graph (compound when clusterBy assignments are provided)
+    const g = new dagre.graphlib.Graph(compound ? { compound: true } : undefined);
     // Set an object for the graph label
     g.setGraph({});
     // Default to assigning a new object as a label for each new edge.
@@ -70,6 +72,24 @@ const createGraph = (pixelRatio) => {
     g.graph().ranksep = 75 * pixelRatio;
     return g;
 };
+const applySyntheticParents = (g, clusterAssignments) => {
+    if (!clusterAssignments) {
+        return new Set();
+    }
+    const createdSyntheticParents = new Set();
+    for (const [nodeId, clusterId] of Object.entries(clusterAssignments)) {
+        if (!g.hasNode(nodeId) || clusterId === undefined || clusterId === null) {
+            continue;
+        }
+        const syntheticParentNodeId = toSyntheticParentNodeId(clusterId);
+        if (!createdSyntheticParents.has(syntheticParentNodeId)) {
+            g.setNode(syntheticParentNodeId, { width: 0, height: 0 });
+            createdSyntheticParents.add(syntheticParentNodeId);
+        }
+        g.setParent(nodeId, syntheticParentNodeId);
+    }
+    return createdSyntheticParents;
+};
 const findParentForEdges = (id, connectedNodes, layoutGraph) => {
     const { rank: currentRank } = layoutGraph.node(id);
     let pRank = null;
@@ -123,10 +143,14 @@ const getConnectedSubGraphs = (g, pixelRatio) => {
     }
     return subGraphs;
 };
-const layoutGraph = (g, direction, parents) => {
+const layoutGraph = (g, direction, parents, syntheticParentNodeIds = new Set()) => {
     g.graph().ranker = Ranker;
     g.graph().rankdir = Directions[direction];
     const dagreLayoutGraph = dagre.layout(g);
+    syntheticParentNodeIds.forEach((id) => {
+        dagreLayoutGraph.removeNode(id);
+        g.removeNode(id);
+    });
     for (const id of dagreLayoutGraph.nodes()) {
         const pId = findParent(id, dagreLayoutGraph);
         if (pId !== null) {
@@ -158,8 +182,10 @@ const mergeStraightPoints = (points) => {
     mergedPoints.push(points[points.length - 1]);
     return mergedPoints;
 };
-export const layout = (nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio = 1) => {
-    const g = createGraph(pixelRatio);
+export const layout = (nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio, clusterAssignments) => {
+    const resolvedPixelRatio = pixelRatio ?? 1;
+    const useClusters = Boolean(clusterAssignments && Object.keys(clusterAssignments).length > 0);
+    const g = createGraph(resolvedPixelRatio, { compound: useClusters });
     const parents = {};
     const positionSum = { x: 0, y: 0 };
     const numNodes = nodes.length;
@@ -169,9 +195,10 @@ export const layout = (nodes, nodeIds, idToPosition, rels, direction, packing, p
         const position = idToPosition[n.id];
         positionSum.x += position?.x || 0;
         positionSum.y += position?.y || 0;
-        const size = (n.size || DefaultNodeSize) * GlAdjust * pixelRatio;
+        const size = (n.size || DefaultNodeSize) * GlAdjust * resolvedPixelRatio;
         g.setNode(n.id, { width: size, height: size });
     }
+    const syntheticParentNodeIds = useClusters ? applySyntheticParents(g, clusterAssignments) : new Set();
     const prevNodeCenterPoint = numNodes ? [positionSum.x / numNodes, positionSum.y / numNodes] : [0, 0];
     // Add edges to the graph.
     const addedRel = {};
@@ -184,7 +211,9 @@ export const layout = (nodes, nodeIds, idToPosition, rels, direction, packing, p
             }
         }
     }
-    const subGraphs = getConnectedSubGraphs(g, pixelRatio);
+    // With clusterBy, lay out one compound graph so same-cluster nodes stay together
+    // even across disconnected components. Otherwise keep component packing.
+    const subGraphs = useClusters ? [g] : getConnectedSubGraphs(g, resolvedPixelRatio);
     if (subGraphs.length > 1) {
         subGraphs.forEach((subGraph) => layoutGraph(subGraph, direction, parents));
         const isVertical = isDirectionVertical(direction);
@@ -316,7 +345,7 @@ export const layout = (nodes, nodeIds, idToPosition, rels, direction, packing, p
         }
     }
     else {
-        layoutGraph(g, direction, parents);
+        layoutGraph(g, direction, parents, syntheticParentNodeIds);
     }
     positionSum.x = 0;
     positionSum.y = 0;

package/lib/hierarchical-layout/dagre-layout-impl.test.js

@@ -33,4 +33,94 @@ describe('Dagre-layout-impl', () => {
             expect(xs[i]).toBeGreaterThan(xs[i - 1]);
         }
     });
+    test('synthetic parent nodes are omitted from positions and animation parents', () => {
+        const nodes = [{ id: 'a' }, { id: 'b' }, { id: 'c' }];
+        const nodeIds = { a: { id: 'a' }, b: { id: 'b' }, c: { id: 'c' } };
+        const idToPosition = {
+            a: { id: 'a', x: 0, y: 0 },
+            b: { id: 'b', x: 0, y: 0 },
+            c: { id: 'c', x: 0, y: 0 }
+        };
+        const rels = [
+            { id: 'ab', from: 'a', to: 'b' },
+            { id: 'bc', from: 'b', to: 'c' }
+        ];
+        const clusterAssignments = { a: 'group-1', b: 'group-1', c: 'group-2' };
+        const { positions, parents } = layout(nodes, nodeIds, idToPosition, rels, 'down', 'bin', 1, clusterAssignments);
+        expect(Object.keys(positions).sort()).toEqual(nodes.map(({ id }) => id).sort());
+        expect(Object.values(parents).every((id) => id in nodeIds)).toBe(true);
+    });
+    test('clusterAssignments group same-cluster nodes', () => {
+        const categories = ['Person', 'Company', 'Product'];
+        const nodes = [];
+        const nodeIds = {};
+        const idToPosition = {};
+        const rels = [];
+        const clusterAssignments = {};
+        categories.forEach((category) => {
+            for (let i = 0; i < 4; i++) {
+                const id = `${category}-${i}`;
+                nodes.push({ id });
+                nodeIds[id] = { id };
+                idToPosition[id] = { id, x: 0, y: 0 };
+                clusterAssignments[id] = category;
+                if (i > 0) {
+                    rels.push({ id: `${id}-prev`, from: `${category}-${i - 1}`, to: id });
+                }
+            }
+        });
+        rels.push({ id: 'cross-1', from: 'Person-0', to: 'Company-0' });
+        rels.push({ id: 'cross-2', from: 'Company-3', to: 'Product-0' });
+        const { positions } = layout(nodes, nodeIds, idToPosition, rels, 'down', 'bin', 1, clusterAssignments);
+        expect(Object.keys(positions)).toHaveLength(nodes.length);
+        const centroid = (ids) => {
+            let x = 0;
+            let y = 0;
+            ids.forEach((id) => {
+                x += positions[id].x;
+                y += positions[id].y;
+            });
+            return { x: x / ids.length, y: y / ids.length };
+        };
+        const clusterIds = categories.map((category) => nodes.filter((node) => node.id.startsWith(`${category}-`)).map((node) => node.id));
+        const centroids = clusterIds.map(centroid);
+        // Same-cluster members should be closer to their own centroid than to other centroids on average
+        clusterIds.forEach((ids, clusterIndex) => {
+            const own = centroids[clusterIndex];
+            const avgOwn = ids.reduce((sum, id) => {
+                const dx = positions[id].x - own.x;
+                const dy = positions[id].y - own.y;
+                return sum + Math.hypot(dx, dy);
+            }, 0) / ids.length;
+            const otherDistances = centroids
+                .filter((_, index) => index !== clusterIndex)
+                .map((other) => Math.hypot(own.x - other.x, own.y - other.y));
+            const minOtherCentroid = Math.min(...otherDistances);
+            expect(avgOwn).toBeLessThan(minOtherCentroid);
+        });
+    });
+    test('omitting clusterAssignments keeps the non-compound packing path', () => {
+        const nodes = [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }];
+        const nodeIds = {
+            a: { id: 'a' },
+            b: { id: 'b' },
+            c: { id: 'c' },
+            d: { id: 'd' }
+        };
+        const idToPosition = {
+            a: { id: 'a', x: 0, y: 0 },
+            b: { id: 'b', x: 0, y: 0 },
+            c: { id: 'c', x: 0, y: 0 },
+            d: { id: 'd', x: 0, y: 0 }
+        };
+        // Two disconnected components
+        const rels = [
+            { id: 'ab', from: 'a', to: 'b' },
+            { id: 'cd', from: 'c', to: 'd' }
+        ];
+        const { positions } = layout(nodes, nodeIds, idToPosition, rels, 'down', 'bin', 1);
+        expect(Object.keys(positions)).toHaveLength(4);
+        expect(positions.a).toBeDefined();
+        expect(positions.d).toBeDefined();
+    });
 });

package/lib/index.d.ts

@@ -1,5 +1,3 @@
-import { createCoseBilkentLayoutWorker } from './cosebilkent-layout/workerFactory.mjs';
 import { createHierarchicalLayoutWorker } from './hierarchical-layout/workerFactory.mjs';
 import { hierarchicalLayoutFallbackWorker } from './hierarchical-layout/HierarchicalLayout.fallback.js';
-import { coseBilkentLayoutFallbackWorker } from './cosebilkent-layout/CoseBilkentLayout.fallback.js';
-export { createCoseBilkentLayoutWorker, createHierarchicalLayoutWorker, hierarchicalLayoutFallbackWorker, coseBilkentLayoutFallbackWorker };
+export { createHierarchicalLayoutWorker, hierarchicalLayoutFallbackWorker };

package/lib/index.js

@@ -1,5 +1,3 @@
-import { coseBilkentLayoutFallbackWorker } from './cosebilkent-layout/CoseBilkentLayout.fallback.js';
-import { createCoseBilkentLayoutWorker } from './cosebilkent-layout/workerFactory.mjs';
 import { hierarchicalLayoutFallbackWorker } from './hierarchical-layout/HierarchicalLayout.fallback.js';
 import { createHierarchicalLayoutWorker } from './hierarchical-layout/workerFactory.mjs';
-export { createCoseBilkentLayoutWorker, createHierarchicalLayoutWorker, hierarchicalLayoutFallbackWorker, coseBilkentLayoutFallbackWorker };
+export { createHierarchicalLayoutWorker, hierarchicalLayoutFallbackWorker };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-nvl/layout-workers",
-  "version": "1.2.0-d88ba7c2",
+  "version": "1.2.0-dbc13ec2",
   "license": "SEE LICENSE IN 'LICENSE.txt'",
   "description": "Layout workers for the Neo4j Visualization Library",
   "keywords": [
@@ -22,7 +22,8 @@
     "watch": "yarn global:tsc -w",
     "prepack": "cp ../../LICENSE.txt ./",
     "postpack": "rm LICENSE.txt",
-    "eslint": "yarn global:eslint ./src/ --ext .js,.mjs"
+    "eslint": "yarn global:eslint ./src/ --ext .js,.mjs",
+    "test": "NODE_OPTIONS=--experimental-vm-modules yarn global:jest"
   },
   "typedoc": {
     "entryPoint": "./src/index.js",
@@ -33,8 +34,6 @@
   "dependencies": {
     "@neo4j-bloom/dagre": "0.8.14",
     "bin-pack": "1.0.2",
-    "cytoscape": "3.33.1",
-    "cytoscape-cose-bilkent": "4.1.0",
     "graphlib": "2.1.8"
   },
   "devDependencies": {

package/lib/cosebilkent-layout/CoseBilkentLayout.fallback.d.ts

@@ -1,10 +0,0 @@
-export namespace coseBilkentLayoutFallbackWorker {
-    let port: CoseBilkentLayoutFallbackWorker;
-}
-declare class CoseBilkentLayoutFallbackWorker {
-    start(): void;
-    postMessage(data: any): void;
-    onmessage(): void;
-    close(): void;
-}
-export {};

package/lib/cosebilkent-layout/CoseBilkentLayout.fallback.js

@@ -1,16 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/* eslint-disable no-empty-function */
-import { layout } from './cose-bilkent-layout-impl.js';
-class CoseBilkentLayoutFallbackWorker {
-    start() { }
-    postMessage(data) {
-        const { elements, spacingFactor } = data;
-        const layoutData = layout(elements, spacingFactor);
-        this.onmessage({ data: layoutData });
-    }
-    onmessage() { }
-    close() { }
-}
-export const coseBilkentLayoutFallbackWorker = {
-    port: new CoseBilkentLayoutFallbackWorker()
-};

package/lib/cosebilkent-layout/CoseBilkentLayout.worker.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/cosebilkent-layout/CoseBilkentLayout.worker.js

@@ -1,9 +0,0 @@
-import { layout } from './cose-bilkent-layout-impl.js';
-onconnect = ({ ports }) => {
-    const port = ports[0];
-    port.onmessage = ({ data }) => {
-        const { elements, spacingFactor } = data;
-        const layoutData = layout(elements, spacingFactor);
-        port.postMessage(layoutData);
-    };
-};

package/lib/cosebilkent-layout/cose-bilkent-layout-impl.d.ts

@@ -1,3 +0,0 @@
-export function layout(elements: any, spacingFactor: any): {
-    positions: {};
-};

package/lib/cosebilkent-layout/cose-bilkent-layout-impl.js

@@ -1,29 +0,0 @@
-import cytoscape from 'cytoscape';
-import coseBilkent from 'cytoscape-cose-bilkent';
-cytoscape.use(coseBilkent);
-const type = 'cose-bilkent';
-export const layout = (elements, spacingFactor) => {
-    const c = cytoscape({
-        headless: true,
-        styleEnabled: false
-    });
-    c.add(elements);
-    const positions = {};
-    const cytoLayout = c.layout({
-        name: type,
-        animate: false,
-        spacingFactor,
-        quality: 'default',
-        tile: false,
-        randomize: true,
-        stop: () => {
-            c.nodes().forEach((n) => {
-                positions[n.id()] = { ...n.position() };
-            });
-        }
-    });
-    cytoLayout.run();
-    return {
-        positions
-    };
-};

package/lib/cosebilkent-layout/workerFactory.d.mts

@@ -1 +0,0 @@
-export function createCoseBilkentLayoutWorker(): SharedWorker;

package/lib/cosebilkent-layout/workerFactory.mjs

@@ -1,8 +0,0 @@
-/**
- * @returns {SharedWorker}
- * @internal
- */
-export const createCoseBilkentLayoutWorker = () => new SharedWorker(new URL('./CoseBilkentLayout.worker.js', import.meta.url), {
-    type: 'module',
-    name: 'CoseBilkentLayout'
-});