@neo4j-nvl/layout-workers 0.1.0

package/README.md

@@ -0,0 +1 @@
+# Layout Workers

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

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

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

@@ -0,0 +1,9 @@
+import { layout } from './cose-bilkent-layout-impl.js';
+const onMessage = ({ data, target }) => {
+    if (target.name === 'CoseBilkentLayout') {
+        const { elements, boundingBox, spacingFactor, nodeCenterPoint } = data;
+        const layoutData = layout(elements, boundingBox, spacingFactor, nodeCenterPoint);
+        postMessage(layoutData);
+    }
+};
+self.addEventListener('message', onMessage);

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

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

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

@@ -0,0 +1,32 @@
+import cytoscape from 'cytoscape';
+import coseBilkent from 'cytoscape-cose-bilkent';
+cytoscape.use(coseBilkent);
+const type = 'cose-bilkent';
+export const layout = (elements, boundingBox, spacingFactor, nodeCenterPoint) => {
+    const c = cytoscape({
+        headless: true,
+        styleEnabled: false,
+        boundingBox
+    });
+    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() };
+                positions[n.id()].x += nodeCenterPoint[0];
+                positions[n.id()].y += nodeCenterPoint[1];
+            });
+        }
+    });
+    cytoLayout.run();
+    return {
+        positions
+    };
+};

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

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

package/lib/cosebilkent-layout/workerFactory.js

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

package/lib/hierarchical-layout/HierarchicalLayout.worker.d.ts

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

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

@@ -0,0 +1,16 @@
+import { layout } from './dagre-layout-impl.js';
+const onMessage = ({ data, target }) => {
+    if (target.name === 'HierarchicalLayout') {
+        const { nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio, forcedDelay = 0 } = data;
+        const layoutData = layout(nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio);
+        if (forcedDelay) {
+            setTimeout(() => {
+                postMessage(layoutData);
+            }, forcedDelay);
+        }
+        else {
+            postMessage(layoutData);
+        }
+    }
+};
+self.addEventListener('message', onMessage);

package/lib/hierarchical-layout/constants.d.ts

@@ -0,0 +1,27 @@
+export const Ranker: "tight-tree";
+export const SubGraphSpacing: 100;
+export const DirectionUp: "up";
+export const DirectionDown: "down";
+export const DirectionLeft: "left";
+export const DirectionRight: "right";
+export namespace Directions {
+    const up: string;
+    const down: string;
+    const left: string;
+    const right: string;
+}
+export const PackingBin: "bin";
+export const PackingStack: "stack";
+export const Packings: string[];
+export const PhysTextureSize: 256;
+export const SpringTextureSize: 4096;
+export const MaxIndexBuffer: 65536;
+export const MinRelLength: 100;
+export const Gravity: 100;
+export const SimulationStopVelocity: 100;
+export const MappingEnd: 999999;
+export const ActiveAnimDuration: 1000;
+export const DefaultNodeSize: 25;
+export const DefaultRelWidth: 1;
+export const DisabledRelColor: "#ededed";
+export const GlAdjust: number;

package/lib/hierarchical-layout/constants.js

@@ -0,0 +1,28 @@
+export const Ranker = 'tight-tree';
+export const SubGraphSpacing = 100;
+export const DirectionUp = 'up';
+export const DirectionDown = 'down';
+export const DirectionLeft = 'left';
+export const DirectionRight = 'right';
+export const Directions = {
+    [DirectionUp]: 'BT',
+    [DirectionDown]: 'TB',
+    [DirectionLeft]: 'RL',
+    [DirectionRight]: 'LR'
+};
+export const PackingBin = 'bin';
+export const PackingStack = 'stack';
+export const Packings = [PackingBin, PackingStack];
+export const PhysTextureSize = 256;
+export const SpringTextureSize = 4096;
+export const MaxIndexBuffer = 65536;
+export const MinRelLength = 100;
+export const Gravity = 100;
+export const SimulationStopVelocity = 100;
+export const MappingEnd = 999999;
+export const ActiveAnimDuration = 1000;
+export const DefaultNodeSize = 25;
+export const DefaultRelWidth = 1;
+export const DisabledRelColor = '#ededed';
+// Factor to make nodes same size in WebGL renderer and Canvas
+export const GlAdjust = 1 / 0.38;

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

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

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

@@ -0,0 +1,361 @@
+import dagre from '@neo4j-bloom/dagre';
+import graphlib from 'graphlib';
+import binPack from 'bin-pack';
+import { Ranker, SubGraphSpacing, DirectionUp, DirectionDown, DirectionRight, Directions, PackingBin, DefaultNodeSize, GlAdjust } from './constants.js';
+const isDirectionVertical = (direction) => direction === DirectionUp || direction === DirectionDown;
+const isDirectionNatural = (direction) => direction === DirectionDown || direction === DirectionRight;
+const getGraphDimensions = (g) => {
+    let minX = null;
+    let minY = null;
+    let maxX = null;
+    let maxY = null;
+    let minCenterX = null;
+    let minCenterY = null;
+    let maxCenterX = null;
+    let maxCenterY = null;
+    for (const id of g.nodes()) {
+        const sn = g.node(id);
+        if (minCenterX === null || sn.x < minCenterX) {
+            minCenterX = sn.x;
+        }
+        if (minCenterY === null || sn.y < minCenterY) {
+            minCenterY = sn.y;
+        }
+        if (maxCenterX === null || sn.x > maxCenterX) {
+            maxCenterX = sn.x;
+        }
+        if (maxCenterY === null || sn.y > maxCenterY) {
+            maxCenterY = sn.y;
+        }
+        const halfSize = Math.ceil(sn.width / 2.0);
+        if (minX === null || (sn.x - halfSize) < minX) {
+            minX = sn.x - halfSize;
+        }
+        if (minY === null || (sn.y - halfSize) < minY) {
+            minY = sn.y - halfSize;
+        }
+        if (maxX === null || (sn.x + halfSize) > maxX) {
+            maxX = sn.x + halfSize;
+        }
+        if (maxY === null || (sn.y + halfSize) > maxY) {
+            maxY = sn.y + halfSize;
+        }
+    }
+    return {
+        minX,
+        minY,
+        maxX,
+        maxY,
+        minCenterX,
+        minCenterY,
+        maxCenterX,
+        maxCenterY,
+        width: maxX - minX,
+        height: maxY - minY,
+        xOffset: minCenterX - minX,
+        yOffset: minCenterY - minY
+    };
+};
+const createGraph = (pixelRatio) => {
+    // Create a new directed graph
+    const g = new dagre.graphlib.Graph();
+    // Set an object for the graph label
+    g.setGraph({});
+    // Default to assigning a new object as a label for each new edge.
+    g.setDefaultEdgeLabel(() => ({}));
+    // Configuration https://github.com/dagrejs/dagre/wiki#configuring-the-layout
+    // Number of pixels that separate nodes horizontally in the layout.
+    g.graph().nodesep = 75 * pixelRatio;
+    // Number of pixels between each rank in the layout.
+    g.graph().ranksep = 75 * pixelRatio;
+    return g;
+};
+const findParent = (id, layoutGraph) => {
+    // predecessors uses inEdges, successors uses outEdges
+    let pId = findParentForEdges(id, layoutGraph.predecessors(id), layoutGraph);
+    if (pId === null) {
+        pId = findParentForEdges(id, layoutGraph.successors(id), layoutGraph);
+    }
+    return pId;
+};
+const findParentForEdges = (id, connectedNodes, layoutGraph) => {
+    const { rank: currentRank } = layoutGraph.node(id);
+    let pRank = null;
+    let pId = null;
+    for (const otherId of connectedNodes) {
+        const { rank } = layoutGraph.node(otherId);
+        if (otherId === id || rank >= currentRank) {
+            continue;
+        }
+        else if (rank === currentRank - 1) {
+            pRank = rank;
+            pId = otherId;
+            break;
+        }
+        else if ((pRank === null && pId === null) || rank > pRank) {
+            pRank = rank;
+            pId = otherId;
+        }
+    }
+    return pId;
+};
+const getConnectedSubGraphs = (g, pixelRatio) => {
+    const subGraphs = [];
+    const components = graphlib.alg.components(g);
+    if (components.length > 1) {
+        for (const component of components) {
+            const subGraph = createGraph(pixelRatio);
+            for (const id of component) {
+                const n = g.node(id);
+                subGraph.setNode(id, { width: n.width, height: n.height });
+                const outEdges = g.outEdges(id);
+                if (outEdges) {
+                    for (const e of outEdges) {
+                        subGraph.setEdge(e.v, e.w);
+                    }
+                }
+            }
+            subGraphs.push(subGraph);
+        }
+    }
+    else {
+        subGraphs.push(g);
+    }
+    return subGraphs;
+};
+const layoutGraph = (g, direction, parents) => {
+    g.graph().ranker = Ranker;
+    g.graph().rankdir = Directions[direction];
+    const layoutGraph = dagre.layout(g);
+    for (const id of layoutGraph.nodes()) {
+        const pId = findParent(id, layoutGraph);
+        if (pId !== null) {
+            parents[id] = pId;
+        }
+    }
+};
+const getDistance = (p1, p2) => Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
+const mergeStraightPoints = (points) => {
+    const mergedPoints = [points[0]];
+    let prevSegment = { p1: points[0], p2: points[1] };
+    let prevLength = getDistance(prevSegment.p1, prevSegment.p2);
+    for (let i = 2; i < points.length; i++) {
+        let currentSegment = { p1: points[i - 1], p2: points[i] };
+        let currentLength = getDistance(currentSegment.p1, currentSegment.p2);
+        const compositeSegment = { p1: prevSegment.p1, p2: currentSegment.p2 };
+        const compositeLength = getDistance(compositeSegment.p1, compositeSegment.p2);
+        // if 2 consecutive segments are parallel then join them
+        // Use the triangular inequality for checking the parallelism
+        if (currentLength + prevLength - compositeLength < 0.1) {
+            mergedPoints.pop();
+            currentSegment = compositeSegment;
+            currentLength = compositeLength;
+        }
+        mergedPoints.push(currentSegment.p1);
+        prevSegment = currentSegment;
+        prevLength = currentLength;
+    }
+    mergedPoints.push(points[points.length - 1]);
+    return mergedPoints;
+};
+export const layout = (nodes, nodeIds, idToPosition, rels, direction, packing, pixelRatio = 1) => {
+    const g = createGraph(pixelRatio);
+    const parents = {};
+    const positionSum = { x: 0, y: 0 };
+    const numNodes = nodes.length;
+    // Add nodes to the graph. The first argument is the node id. The second is
+    // metadata about the node.
+    for (const n of nodes) {
+        const position = idToPosition[n.id];
+        positionSum.x += position?.x || 0;
+        positionSum.y += position?.y || 0;
+        const size = (n.size || DefaultNodeSize) * GlAdjust * pixelRatio;
+        g.setNode(n.id, { width: size, height: size });
+    }
+    const prevNodeCenterPoint = numNodes ? [positionSum.x / numNodes, positionSum.y / numNodes] : [0, 0];
+    // Add edges to the graph.
+    const addedRel = {};
+    for (const r of rels) {
+        if (nodeIds[r.from] && nodeIds[r.to] && r.from !== r.to) {
+            const relKey = r.from < r.to ? `${r.from}-${r.to}` : `${r.to}-${r.from}`;
+            if (!addedRel[relKey]) {
+                addedRel[relKey] = 1;
+                g.setEdge(r.from, r.to);
+            }
+        }
+    }
+    const subGraphs = getConnectedSubGraphs(g, pixelRatio);
+    if (subGraphs.length > 1) {
+        subGraphs.forEach(subGraph => layoutGraph(subGraph, direction, parents));
+        const isVertical = isDirectionVertical(direction);
+        const isNatural = isDirectionNatural(direction);
+        const singleNodeGraphs = subGraphs.filter(g => g.nodeCount() === 1);
+        const multiNodeGraphs = subGraphs.filter(g => g.nodeCount() !== 1);
+        if (packing === PackingBin) {
+            multiNodeGraphs.sort((a, b) => b.nodeCount() - a.nodeCount());
+            const adjustDimensionPaddingNormal = ({ width, height, ...rest }) => ({ ...rest, width: width + SubGraphSpacing, height: height + SubGraphSpacing });
+            const adjustDimensionPaddingFlip = ({ width, height, ...rest }) => ({ ...rest, width: height + SubGraphSpacing, height: width + SubGraphSpacing });
+            const adjustDimensionPadding = isVertical ? adjustDimensionPaddingNormal : adjustDimensionPaddingFlip;
+            const multiGraphDimensions = multiNodeGraphs.map(getGraphDimensions).map(adjustDimensionPadding);
+            const singleGraphDimensions = singleNodeGraphs.map(getGraphDimensions).map(adjustDimensionPadding);
+            const bins = multiGraphDimensions.concat(singleGraphDimensions);
+            binPack(bins, { inPlace: true });
+            const halfSpacing = Math.floor(SubGraphSpacing / 2);
+            const xProp = isVertical ? 'x' : 'y';
+            const yProp = isVertical ? 'y' : 'x';
+            if (!isNatural) {
+                const positionProp = isVertical ? 'y' : 'x';
+                const extentProp = isVertical ? 'height' : 'width';
+                const min = bins.reduce((min, d) => min === null ? d[positionProp] : Math.min(d[positionProp], min[extentProp] || 0), null);
+                const max = bins.reduce((max, d) => max === null ? (d[positionProp] + d[extentProp]) : Math.max((d[positionProp] + d[extentProp]), max[extentProp] || 0), null);
+                bins.forEach(d => {
+                    d[positionProp] = min + (max - (d[positionProp] + d[extentProp]));
+                });
+            }
+            const assignPositions = (subGraph, dimensions) => {
+                for (const id of subGraph.nodes()) {
+                    const sn = subGraph.node(id);
+                    const n = g.node(id);
+                    n.x = sn.x - dimensions.xOffset + dimensions[xProp] + halfSpacing;
+                    n.y = sn.y - dimensions.yOffset + dimensions[yProp] + halfSpacing;
+                }
+            };
+            for (let i = 0; i < multiNodeGraphs.length; i++) {
+                const subGraph = multiNodeGraphs[i];
+                const dimensions = multiGraphDimensions[i];
+                assignPositions(subGraph, dimensions);
+            }
+            for (let i = 0; i < singleNodeGraphs.length; i++) {
+                const subGraph = singleNodeGraphs[i];
+                const dimensions = singleGraphDimensions[i];
+                assignPositions(subGraph, dimensions);
+            }
+        }
+        else {
+            multiNodeGraphs.sort(isNatural ? (a, b) => b.nodeCount() - a.nodeCount() : (a, b) => a.nodeCount() - b.nodeCount());
+            const multiGraphDimensions = multiNodeGraphs.map(getGraphDimensions);
+            const singleNodesAcc = singleNodeGraphs.reduce((acc, subGraph) => acc + g.node(subGraph.nodes()[0]).width, 0);
+            const singleNodesMaxSize = singleNodeGraphs.reduce((maxSize, subGraph) => Math.max(maxSize, g.node(subGraph.nodes()[0]).width), 0);
+            const singleNodesSize = singleNodeGraphs.length > 0 ? singleNodesAcc + (singleNodeGraphs.length - 1) * SubGraphSpacing : 0;
+            const maxSubGraphWidth = multiGraphDimensions.reduce((maxWidth, { width }) => Math.max(maxWidth, width), 0);
+            const graphWidth = Math.max(maxSubGraphWidth, singleNodesSize);
+            const maxSubGraphHeight = multiGraphDimensions.reduce((maxHeight, { height }) => Math.max(maxHeight, height), 0);
+            const graphHeight = Math.max(maxSubGraphHeight, singleNodesSize);
+            let position = 0;
+            const positionMultiNodeGraphs = () => {
+                for (let i = 0; i < multiNodeGraphs.length; i++) {
+                    const subGraph = multiNodeGraphs[i];
+                    const dimensions = multiGraphDimensions[i];
+                    const centerOffset = isVertical ? Math.floor((graphWidth - dimensions.width) / 2.0) : Math.floor((graphHeight - dimensions.height) / 2.0);
+                    for (const id of subGraph.nodes()) {
+                        const sn = subGraph.node(id);
+                        const n = g.node(id);
+                        if (isVertical) {
+                            n.x = sn.x - dimensions.minX + centerOffset;
+                            n.y = sn.y - dimensions.minY + position;
+                        }
+                        else {
+                            n.x = sn.x - dimensions.minX + position;
+                            n.y = sn.y - dimensions.minY + centerOffset;
+                        }
+                    }
+                    for (const id of subGraph.edges()) {
+                        const sedge = subGraph.edge(id);
+                        const edge = g.edge(id);
+                        if (sedge.points && sedge.points.length > 3) {
+                            edge.points = sedge.points.map(({ x, y }) => ({
+                                x: x - dimensions.minX + (isVertical ? centerOffset : position),
+                                y: y - dimensions.minY + (isVertical ? position : centerOffset)
+                            }));
+                        }
+                    }
+                    position += (isVertical ? dimensions.height : dimensions.width) + SubGraphSpacing;
+                }
+            };
+            const positionSingleNodeGraphs = () => {
+                const singleCenterOffset = Math.floor(((isVertical ? graphWidth : graphHeight) - singleNodesSize) / 2.0);
+                position += Math.floor(singleNodesMaxSize / 2.0);
+                let singlePosition = singleCenterOffset;
+                for (const subGraph of singleNodeGraphs) {
+                    const id = subGraph.nodes()[0];
+                    const n = g.node(id);
+                    if (isVertical) {
+                        n.x = singlePosition + Math.floor(n.width / 2.0);
+                        n.y = position;
+                    }
+                    else {
+                        n.x = position;
+                        n.y = singlePosition + Math.floor(n.width / 2.0);
+                    }
+                    singlePosition += SubGraphSpacing + n.width;
+                }
+                position = singleNodesMaxSize + SubGraphSpacing;
+            };
+            if (isNatural) {
+                positionMultiNodeGraphs();
+                positionSingleNodeGraphs();
+            }
+            else {
+                positionSingleNodeGraphs();
+                positionMultiNodeGraphs();
+            }
+        }
+    }
+    else {
+        layoutGraph(g, direction, parents);
+    }
+    positionSum.x = 0;
+    positionSum.y = 0;
+    const positions = {};
+    for (const id of g.nodes()) {
+        const n = g.node(id);
+        positionSum.x += n.x || 0;
+        positionSum.y += n.y || 0;
+        positions[id] = { x: n.x, y: n.y };
+    }
+    const newNodeCenterPoint = numNodes ? [positionSum.x / numNodes, positionSum.y / numNodes] : [0, 0];
+    const translateX = prevNodeCenterPoint[0] - newNodeCenterPoint[0];
+    const translateY = prevNodeCenterPoint[1] - newNodeCenterPoint[1];
+    for (const key in positions) {
+        positions[key].x += translateX;
+        positions[key].y += translateY;
+    }
+    const waypoints = {};
+    for (const id of g.edges()) {
+        const e = g.edge(id);
+        if (e.points && e.points.length > 3) {
+            const mergedPoints = mergeStraightPoints(e.points);
+            for (const p of mergedPoints) {
+                p.x += translateX;
+                p.y += translateY;
+            }
+            waypoints[`${id.v}-${id.w}`] = {
+                points: [...mergedPoints],
+                from: {
+                    x: positions[id.v].x,
+                    y: positions[id.v].y
+                },
+                to: {
+                    x: positions[id.w].x,
+                    y: positions[id.w].y
+                }
+            };
+            waypoints[`${id.w}-${id.v}`] = {
+                points: mergedPoints.reverse(),
+                from: {
+                    x: positions[id.w].x,
+                    y: positions[id.w].y
+                },
+                to: {
+                    x: positions[id.v].x,
+                    y: positions[id.v].y
+                }
+            };
+        }
+    }
+    return {
+        positions,
+        parents,
+        waypoints
+    };
+};

package/lib/hierarchical-layout/workerFactory.d.ts

@@ -0,0 +1 @@
+export function createHierarchicalLayoutWorker(): Worker;

package/lib/hierarchical-layout/workerFactory.js

@@ -0,0 +1 @@
+export const createHierarchicalLayoutWorker = () => new Worker(new URL('./HierarchicalLayout.worker.js', import.meta.url), { type: 'module', name: 'HierarchicalLayout' });

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+import { createCoseBilkentLayoutWorker } from './cosebilkent-layout/workerFactory.js';
+import { createHierarchicalLayoutWorker } from './hierarchical-layout/workerFactory.js';
+export { createCoseBilkentLayoutWorker, createHierarchicalLayoutWorker };

package/lib/index.js

@@ -0,0 +1,3 @@
+import { createCoseBilkentLayoutWorker } from './cosebilkent-layout/workerFactory.js';
+import { createHierarchicalLayoutWorker } from './hierarchical-layout/workerFactory.js';
+export { createCoseBilkentLayoutWorker, createHierarchicalLayoutWorker };

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@neo4j-nvl/layout-workers",
+  "version": "0.1.0",
+  "main": "lib/index.js",
+  "type": "module",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "prebuild": "rm -rf lib/",
+    "build": "tsc",
+    "test": "echo 'not implemented'"
+  },
+  "typedoc": {
+    "entryPoint": "./src/index.js",
+    "readmeFile": "./README.md",
+    "displayName": "Layout Workers",
+    "tsconfig": "./tsconfig.json"
+  },
+  "engines": {
+    "yarn": "^1.10.1"
+  },
+  "dependencies": {
+    "@neo4j-bloom/dagre": "^0.8.14",
+    "bin-pack": "^1.0.2",
+    "cytoscape": "^3.23.0",
+    "cytoscape-cose-bilkent": "^4.1.0",
+    "graphlib": "^2.1.8"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.11",
+    "typedoc": "^0.23.26"
+  }
+}