landscape-widget 0.1.18 → 0.3.0-alpha

package/lib/GraphLayout.js

@@ -0,0 +1,440 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Graph from 'graphology';
+import classNames from 'classnames';
+import { ControlsContainer, SigmaContainer, useLoadGraph, useRegisterEvents, useSigma, useCamera, } from '@react-sigma/core';
+import forceAtlas2 from 'graphology-layout-forceatlas2';
+import { Lasso } from './icons/Lasso';
+import { Plus, Minus, Reset, 
+// FullScreenEnter,
+// FullScreenExit,
+ClearSelection, Invert, } from './icons';
+import { defaultSettings, ForceAtlasAnimator } from './ForceAtlasAnimator';
+import '@react-sigma/core/lib/react-sigma.min.css';
+import './GraphLayout.scss';
+export const LoadGraph = ({ data, nodeColors, nodeLabels, nodeSizes, animate, selectedNodes, setSelectedNodes, addSelectedNodes, setHoveredNode, }) => {
+    const sigma = useSigma();
+    const loadGraph = useLoadGraph();
+    const registerEvents = useRegisterEvents();
+    const animator = useRef(new ForceAtlasAnimator(sigma.getGraph(), { settings: defaultSettings }, { maxiters: 1500, miniters: 200, convergenceThreshold: 0.1 }));
+    useEffect(() => {
+        let graph;
+        graph = new Graph();
+        data.nodes.forEach((node) => {
+            graph.addNode(node.key, node.attributes);
+        });
+        data.edges.forEach((edge) => {
+            graph.addEdge(edge.source, edge.target);
+        });
+        // run a few steps of the layout for less initial motion when graph renders
+        const initialSettings = Object.assign(Object.assign({}, defaultSettings), forceAtlas2.inferSettings(graph));
+        forceAtlas2.assign(graph, { iterations: 100, settings: initialSettings });
+        loadGraph(graph);
+        animator.current.kill();
+        animator.current.params.settings = Object.assign(Object.assign({}, defaultSettings), forceAtlas2.inferSettings(graph));
+        animator.current.graph = sigma.getGraph();
+        if (animate) {
+            animator.current.start();
+        }
+    }, [data, loadGraph]);
+    useEffect(() => {
+        const graph = sigma.getGraph();
+        graph.updateEachNodeAttributes((key, attr) => {
+            const n = Number(key);
+            if (selectedNodes.some((node) => node === n)) {
+                return Object.assign(Object.assign({}, attr), { highlighted: true });
+            }
+            else {
+                return Object.assign(Object.assign({}, attr), { highlighted: false });
+            }
+        });
+    }, [selectedNodes]);
+    useEffect(() => {
+        const graph = sigma.getGraph();
+        if (!nodeColors)
+            return;
+        graph.updateEachNodeAttributes((key, attr) => {
+            const n = Number(key);
+            return Object.assign(Object.assign({}, attr), { color: nodeColors[n] });
+        });
+    }, [data, nodeColors]);
+    useEffect(() => {
+        const graph = sigma.getGraph();
+        if (!nodeLabels)
+            return;
+        graph.updateEachNodeAttributes((key, attr) => {
+            const n = Number(key);
+            if (nodeLabels[n]) {
+                return Object.assign(Object.assign({}, attr), { label: nodeLabels[n] });
+            }
+            else {
+                return Object.assign(Object.assign({}, attr), { label: undefined });
+            }
+        });
+    }, [data, nodeLabels]);
+    useEffect(() => {
+        const graph = sigma.getGraph();
+        if (!nodeSizes)
+            return;
+        graph.updateEachNodeAttributes((key, attr) => {
+            const n = Number(key);
+            return Object.assign(Object.assign({}, attr), { size: nodeSizes[n] });
+        });
+    }, [data, nodeSizes]);
+    useEffect(() => {
+        if (animate) {
+            animator.current.start();
+        }
+        else {
+            animator.current.stop();
+        }
+    }, [animate]);
+    const handleSelectionClear = useCallback(() => {
+        setSelectedNodes([]);
+        const graph = sigma.getGraph();
+        selectedNodes.forEach((node) => {
+            graph.setNodeAttribute(node, 'highlighted', false);
+        });
+    }, [setSelectedNodes, selectedNodes]);
+    const onNodeDoubleClick = (e, graph) => {
+        e.preventSigmaDefault();
+        const nodeValue = Number(e.node);
+        const isNodeSelectedAlready = selectedNodes.some((n) => n === nodeValue);
+        if (isNodeSelectedAlready) {
+            setSelectedNodes(selectedNodes.filter((n) => n !== nodeValue));
+        }
+        else {
+            addSelectedNodes([nodeValue]);
+        }
+    };
+    useEffect(() => {
+        let draggedNode;
+        let isDragging = false;
+        let isDraggedNodeSelected = false;
+        let previousPosition = null;
+        let lastScrollTime = null;
+        let currentAnimationTarget = null;
+        const graph = sigma.getGraph();
+        registerEvents({
+            enterNode: (e) => {
+                const nodeID = Number(e.node);
+                setHoveredNode(nodeID);
+            },
+            leaveNode: (e) => {
+                setHoveredNode(-1);
+            },
+            downNode: (e) => {
+                isDragging = true;
+                draggedNode = e.node;
+                const nodeValue = Number(e.node);
+                graph.setNodeAttribute(draggedNode, 'highlighted', true);
+                isDraggedNodeSelected = selectedNodes.some((n) => n === nodeValue);
+                if (isDraggedNodeSelected) {
+                    selectedNodes.map((node) => graph.updateNodeAttribute(node, 'fixed', () => true));
+                }
+                else {
+                    graph.setNodeAttribute(draggedNode, 'fixed', true);
+                }
+                previousPosition = sigma.viewportToGraph(e.event);
+                if (!animator.current.isRunning() && animate) {
+                    animator.current.start();
+                }
+                animator.current.resetNIters();
+            },
+            mousemovebody: (e) => {
+                if (!isDragging || !draggedNode || !previousPosition)
+                    return;
+                animator.current.resetNIters();
+                const pos = sigma.viewportToGraph(e);
+                const dx = pos.x - previousPosition.x;
+                const dy = pos.y - previousPosition.y;
+                previousPosition = pos;
+                if (isDraggedNodeSelected) {
+                    selectedNodes.map((node) => graph.updateNodeAttributes(node, (attr) => (Object.assign(Object.assign({}, attr), { x: attr.x + dx, y: attr.y + dy }))));
+                }
+                else {
+                    graph.updateNodeAttributes(draggedNode, (attr) => (Object.assign(Object.assign({}, attr), { x: attr.x + dx, y: attr.y + dy })));
+                }
+                // Prevent sigma to move camera:
+                e.preventSigmaDefault();
+                e.original.preventDefault();
+                e.original.stopPropagation();
+            },
+            mouseup: () => {
+                if (draggedNode) {
+                    if (isDraggedNodeSelected) {
+                        selectedNodes.map((node) => graph.removeNodeAttribute(node, 'fixed'));
+                    }
+                    else {
+                        graph.removeNodeAttribute(draggedNode, 'fixed');
+                        graph.removeNodeAttribute(draggedNode, 'highlighted');
+                    }
+                    previousPosition = null;
+                }
+                isDragging = false;
+                draggedNode = null;
+                isDraggedNodeSelected = false;
+            },
+            mousedown: () => {
+                if (!sigma.getCustomBBox())
+                    sigma.setCustomBBox(sigma.getBBox());
+            },
+            doubleClickNode: (e) => onNodeDoubleClick(e, graph),
+            doubleClickStage: (e) => {
+                handleSelectionClear();
+                e.preventSigmaDefault();
+            },
+            wheel: (e) => {
+                const camera = sigma.getCamera();
+                const cameraState = camera.getState();
+                const delta = Math.max(-1.5, Math.min(1.5, e.delta));
+                const oldRatio = currentAnimationTarget !== null ? currentAnimationTarget : cameraState.ratio;
+                const newRatio = camera.getBoundedRatio(oldRatio * (1 - delta / 8));
+                const event = e.original;
+                const scrollTime = Date.now();
+                const timeDelta = lastScrollTime ? scrollTime - lastScrollTime : 100;
+                lastScrollTime = scrollTime;
+                if (event.deltaMode !== WheelEvent.DOM_DELTA_PIXEL) {
+                    console.warn('WheelEvent.deltaMode is not DOM_DELTA_PIXEL. Zoom behavior may not be as expected.');
+                }
+                // TODO: animation if delta is large enough?
+                const newState = sigma.getViewportZoomedState(e, newRatio);
+                // trying to do the animation to smooth out bigger steps may not be worth it
+                if (false && Math.abs(delta) > 0.05 && timeDelta > 30) {
+                    currentAnimationTarget = newRatio;
+                    camera.animate(newState, {
+                        easing: 'quadraticOut',
+                        duration: timeDelta * 1.5,
+                    });
+                }
+                else {
+                    if (camera.isAnimated()) {
+                        camera.animate(newState, { duration: 1 });
+                        camera.setState(newState);
+                        currentAnimationTarget = newRatio;
+                    }
+                    else {
+                        currentAnimationTarget = null;
+                        camera.setState(newState);
+                    }
+                }
+                e.preventSigmaDefault(); // why doesn't this call work?
+                e.sigmaDefaultPrevented = true;
+            },
+        });
+    }, [registerEvents, setSelectedNodes, addSelectedNodes, selectedNodes, handleSelectionClear]);
+    return null;
+};
+export const SigmaLasso = ({ active, setSelectedNodes, addSelectedNodes }) => {
+    const sigma = useSigma();
+    const lassoCanvasRef = useRef(null);
+    const getLassoCanvas = useCallback(() => {
+        if (active)
+            return lassoCanvasRef.current;
+        return null;
+    }, [active]);
+    const isDrawing = useRef(false);
+    const drawnPoints = useRef([]);
+    const onDrawingStart = (event) => {
+        const lassoCanvas = getLassoCanvas();
+        if (!lassoCanvas)
+            return;
+        isDrawing.current = true;
+        drawnPoints.current = [];
+        const drawingRectangle = lassoCanvas.getBoundingClientRect();
+        drawnPoints.current.push({
+            x: event.clientX - drawingRectangle.left,
+            y: event.clientY - drawingRectangle.top,
+        });
+        event.stopPropagation();
+    };
+    const onDrawing = (event) => {
+        const lassoCanvas = getLassoCanvas();
+        if (!lassoCanvas)
+            return;
+        if (isDrawing.current) {
+            let x;
+            let y;
+            const drawingRectangle = lassoCanvas.getBoundingClientRect();
+            const drawingContext = lassoCanvas.getContext('2d');
+            switch (event.type) {
+                case 'touchmove':
+                    x = event.touches[0].clientX;
+                    y = event.touches[0].clientY;
+                    break;
+                default:
+                    x = event.clientX;
+                    y = event.clientY;
+                    break;
+            }
+            drawnPoints.current.push({
+                x: x - drawingRectangle.left,
+                y: y - drawingRectangle.top,
+            });
+            // Drawing styles
+            drawingContext.strokeStyle = 'black';
+            drawingContext.lineWidth = 2;
+            drawingContext.fillStyle = 'rgba(200, 200, 200, 0.25)';
+            drawingContext.lineJoin = 'round';
+            drawingContext.lineCap = 'round';
+            // Clear the canvas
+            drawingContext.clearRect(0, 0, drawingContext.canvas.width, drawingContext.canvas.height);
+            // Redraw the complete path for a smoother effect
+            // Even smoother with quadratic curves
+            let sourcePoint = drawnPoints.current[0];
+            let destinationPoint = drawnPoints.current[1];
+            const pointsLength = drawnPoints.current.length;
+            const getMiddlePointCoordinates = (firstPoint, secondPoint) => ({
+                x: firstPoint.x + (secondPoint.x - firstPoint.x) / 2,
+                y: firstPoint.y + (secondPoint.y - firstPoint.y) / 2,
+            });
+            drawingContext.beginPath();
+            drawingContext.moveTo(sourcePoint.x, sourcePoint.y);
+            for (let i = 1; i < pointsLength; i += 1) {
+                const middlePoint = getMiddlePointCoordinates(sourcePoint, destinationPoint);
+                drawingContext.quadraticCurveTo(sourcePoint.x, sourcePoint.y, middlePoint.x, middlePoint.y);
+                sourcePoint = drawnPoints.current[i];
+                destinationPoint = drawnPoints.current[i + 1];
+            }
+            drawingContext.lineTo(sourcePoint.x, sourcePoint.y);
+            drawingContext.stroke();
+            drawingContext.fill();
+            event.stopPropagation();
+        }
+    };
+    const onDrawingEnd = useCallback((event) => {
+        const lassoCanvas = getLassoCanvas();
+        const viewRectangle = sigma.viewRectangle();
+        const graph = sigma.getGraph();
+        if (!lassoCanvas)
+            return;
+        isDrawing.current = false;
+        // @ts-ignore - There are no other ways to get visible nodes
+        const quadtreeRectangle = sigma.quadtree.rectangle(viewRectangle.x1, 1 - viewRectangle.y1, viewRectangle.x2, 1 - viewRectangle.y2, viewRectangle.height);
+        const visibleNodes = Array.from(new Set(quadtreeRectangle));
+        const drawingContext = lassoCanvas.getContext('2d');
+        let newSelectedNodes = [];
+        visibleNodes.forEach((key) => {
+            const nodeValue = Number(key);
+            const { x, y } = graph.getNodeAttributes(nodeValue);
+            const coordinates = sigma.graphToViewport({ x, y });
+            if (drawingContext.isPointInPath(coordinates.x, coordinates.y)) {
+                newSelectedNodes.push(nodeValue);
+            }
+        });
+        if (event.shiftKey) {
+            addSelectedNodes(newSelectedNodes);
+        }
+        else {
+            setSelectedNodes(newSelectedNodes);
+        }
+        drawingContext.clearRect(0, 0, lassoCanvas.width, lassoCanvas.height);
+        drawnPoints.current = [];
+        event.stopPropagation();
+    }, [setSelectedNodes, addSelectedNodes, getLassoCanvas, sigma]);
+    const onLassoScroll = (e) => {
+        const mouseCaptor = sigma.getMouseCaptor();
+        mouseCaptor.handleWheel(e.nativeEvent);
+    };
+    if (!active)
+        return null;
+    return (React.createElement("canvas", { ref: lassoCanvasRef, width: sigma.getContainer().offsetWidth, height: sigma.getContainer().offsetHeight, style: { position: 'absolute', top: '0px', cursor: 'crosshair' }, onMouseDown: onDrawingStart, onMouseMove: onDrawing, onMouseUp: onDrawingEnd, onWheel: onLassoScroll }));
+};
+export const GraphContainer = ({ data, nodeColors, nodeLabels, nodeSizes, animate, selectedNodes, setSelectedNodes, addSelectedNodes, setHoveredNode,
+// isFullScreen,
+// toggleFullScreen,
+ }) => {
+    const [isLassoActive, setIsLassoActive] = useState(false);
+    const { zoomIn, zoomOut, reset } = useCamera({ duration: 200, factor: 1.5 });
+    const sigma = useSigma();
+    const onClearSelection = useCallback(() => {
+        setSelectedNodes([]);
+    }, [setSelectedNodes]);
+    const onInvertSelection = useCallback(() => {
+        const graph = sigma.getGraph();
+        let newSelectedNodes = [];
+        graph.forEachNode((node, attr) => {
+            const nodeID = Number(node);
+            if (!selectedNodes.some((n) => n === nodeID)) {
+                newSelectedNodes.push(nodeID);
+            }
+        });
+        setSelectedNodes(newSelectedNodes);
+    }, [selectedNodes, setSelectedNodes]);
+    // useEffect(() => {
+    //   sigma.refresh();
+    // }, [sigma, isFullScreen]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(LoadGraph, { data: data, nodeColors: nodeColors, nodeLabels: nodeLabels, nodeSizes: nodeSizes, animate: animate, selectedNodes: selectedNodes, setSelectedNodes: setSelectedNodes, addSelectedNodes: addSelectedNodes, setHoveredNode: setHoveredNode }),
+        React.createElement(SigmaLasso, { active: isLassoActive, setSelectedNodes: setSelectedNodes, addSelectedNodes: addSelectedNodes }),
+        React.createElement(ControlsContainer, { position: 'bottom-right' },
+            React.createElement("div", { className: 'react-sigma-control' },
+                React.createElement("button", { type: 'button', className: 'zoom-in', onClick: () => zoomIn() },
+                    React.createElement(Plus, { width: 20, height: 20 }))),
+            React.createElement("div", { className: 'react-sigma-control' },
+                React.createElement("button", { type: 'button', className: 'zoom-out', onClick: () => zoomOut() },
+                    React.createElement(Minus, { width: 20, height: 20 }))),
+            React.createElement("div", { className: 'react-sigma-control' },
+                React.createElement("button", { type: 'button', className: 'reset-scale', onClick: () => reset() },
+                    React.createElement(Reset, { width: 20, height: 20 }))),
+            React.createElement("div", { className: 'react-sigma-control' },
+                React.createElement("button", { type: 'button', className: classNames('lasso-selection', {
+                        active: isLassoActive,
+                    }), onClick: () => setIsLassoActive((prevState) => !prevState) },
+                    React.createElement(Lasso, { width: 20, height: 20 }))),
+            React.createElement("div", { className: 'react-sigma-control' },
+                React.createElement("button", { type: 'button', disabled: selectedNodes.length === 0, className: 'clear-selection', onClick: onClearSelection },
+                    React.createElement(ClearSelection, { width: 20, height: 20 }))),
+            React.createElement("div", { className: 'react-sigma-control' },
+                React.createElement("button", { type: 'button', className: 'invert-selection', onClick: onInvertSelection },
+                    React.createElement(Invert, { width: 20, height: 20 }))))));
+};
+export const GraphLayout = (_a) => {
+    // const [isFullScreen, setFullScreen] = useState(false);
+    var { data, setSelectedNodes, addSelectedNodes, setHoveredNode, selectedNodes } = _a, props = __rest(_a, ["data", "setSelectedNodes", "addSelectedNodes", "setHoveredNode", "selectedNodes"]);
+    // const toggleFullScreen = useCallback(() => setFullScreen((prevState) => !prevState), []);
+    // const fullScreenStyle = useMemo<Partial<CSSProperties>>(
+    //   () =>
+    //     isFullScreen
+    //       ? {
+    //           position: 'fixed',
+    //           top: 0,
+    //           left: 0,
+    //           zIndex: 1400,
+    //         }
+    //       : {},
+    //   [isFullScreen]
+    // );
+    // const handleEscKey = useCallback(
+    //   (event: KeyboardEvent) => {
+    //     if (event.key === 'Escape' && isFullScreen) {
+    //       toggleFullScreen();
+    //     }
+    //   },
+    //   [isFullScreen, toggleFullScreen]
+    // );
+    // useEffect(() => {
+    //   if (isFullScreen) {
+    //     document.addEventListener('keyup', handleEscKey);
+    //   }
+    //   return () => {
+    //     if (isFullScreen) {
+    //       document.removeEventListener('keyup', handleEscKey);
+    //     }
+    //   };
+    // }, [isFullScreen, handleEscKey]);
+    // if (!data) return null;
+    return (React.createElement(SigmaContainer, { id: 'graph-container' },
+        React.createElement(GraphContainer, Object.assign({}, props, { data: data, selectedNodes: selectedNodes, addSelectedNodes: addSelectedNodes, setSelectedNodes: setSelectedNodes, setHoveredNode: setHoveredNode }))));
+};
+//# sourceMappingURL=GraphLayout.js.map

package/lib/GraphLayout.types.js

@@ -0,0 +1,6 @@
+export var GraphTypes;
+(function (GraphTypes) {
+    GraphTypes["Data"] = "dataLandscape";
+    GraphTypes["Feature"] = "featureLandscape";
+})(GraphTypes || (GraphTypes = {}));
+//# sourceMappingURL=GraphLayout.types.js.map

package/lib/InitialLayoutWorker.js

@@ -0,0 +1,31 @@
+import { createEdgeWeightGetter } from 'graphology-utils/getters';
+import isGraph from 'graphology-utils/is-graph';
+import { connectedComponents } from 'graphology-components';
+import { explicitComponentLayout } from './explicitComponentLayout';
+import { iterateNoIntercomponentRepel } from './IterateNoIntercomponentRepel';
+// import helpers from 'graphology-layout-forceatlas2/helpers'
+// avoid TS errors from import statements when types are not provided.
+// tried using declaration files but it didn't work
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const DEFAULT_SETTINGS = require('graphology-layout-forceatlas2/defaults');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const helpers = require('graphology-layout-forceatlas2/helpers');
+export const getInitialLayout = (graph, params, componentsIters) => {
+    if (!isGraph(graph))
+        throw new Error('graphology-layout-forceatlas2: the given graph is not a valid graphology instance.');
+    const { iterations: layoutIters } = params;
+    const connComponents = connectedComponents(graph);
+    const getEdgeWeight = createEdgeWeightGetter(
+    // @ts-ignore
+    'getEdgeWeight' in params ? params.getEdgeWeight : 'weight').fromEntry;
+    const outputReducer = typeof params.outputReducer === 'function' ? params.outputReducer : null;
+    // Validating settings
+    const settings = helpers.assign({}, DEFAULT_SETTINGS, params.settings);
+    const matrices = helpers.graphToByteArrays(graph, getEdgeWeight);
+    for (let i = 0; i < layoutIters; i++) {
+        iterateNoIntercomponentRepel(settings, matrices.nodes, matrices.edges, connComponents);
+    }
+    explicitComponentLayout(matrices.nodes, connComponents, componentsIters);
+    helpers.assignLayoutChanges(graph, matrices.nodes, outputReducer);
+};
+//# sourceMappingURL=InitialLayoutWorker.js.map