landscape-widget 0.2.0 → 0.3.0-alpha

package/lib/Analysis.types.js

@@ -0,0 +1,26 @@
+export var COLORING_OPTIONS;
+(function (COLORING_OPTIONS) {
+    COLORING_OPTIONS["none"] = "none";
+    COLORING_OPTIONS["selectedFeatures"] = "selected-features";
+    COLORING_OPTIONS["selectedDataPoints"] = "selected-data-points";
+})(COLORING_OPTIONS || (COLORING_OPTIONS = {}));
+export var SIDEBAR_TABS;
+(function (SIDEBAR_TABS) {
+    SIDEBAR_TABS[SIDEBAR_TABS["CONFIGURE"] = 0] = "CONFIGURE";
+    SIDEBAR_TABS[SIDEBAR_TABS["EXPLORE"] = 1] = "EXPLORE";
+})(SIDEBAR_TABS || (SIDEBAR_TABS = {}));
+export var COLORMAP_TYPE;
+(function (COLORMAP_TYPE) {
+    COLORMAP_TYPE["sequential"] = "sequential";
+    COLORMAP_TYPE["diverging"] = "diverging";
+    COLORMAP_TYPE["discrete"] = "discrete";
+})(COLORMAP_TYPE || (COLORMAP_TYPE = {}));
+export var SELECTION_SOURCES;
+(function (SELECTION_SOURCES) {
+    SELECTION_SOURCES["LANDSCAPE"] = "landscape";
+    SELECTION_SOURCES["EXPLORER"] = "explorer";
+    SELECTION_SOURCES["SCATTER_PLOT"] = "scatter-plot";
+    SELECTION_SOURCES["HISTOGRAM"] = "histogram";
+    SELECTION_SOURCES["GROUP"] = "group";
+})(SELECTION_SOURCES || (SELECTION_SOURCES = {}));
+//# sourceMappingURL=Analysis.types.js.map

package/lib/Analysis.utils.js

@@ -0,0 +1,5 @@
+"use strict";
+// import Gradient from 'javascript-color-gradient';
+// export const getGradientArray = (nodes: number): string[] =>
+//   new Gradient().setColorGradient('#3F2CAF', '#e9446a').setMidpoint(nodes).getColors();
+//# sourceMappingURL=Analysis.utils.js.map

package/lib/ForceAtlasAnimator.js

@@ -0,0 +1,147 @@
+import { createEdgeWeightGetter } from 'graphology-utils/getters';
+import { connectedComponents } from 'graphology-components';
+import { PPN } from './enum/layout';
+import { iterateNoIntercomponentRepel } from './IterateNoIntercomponentRepel';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { assignLayoutChanges, graphToByteArrays } = require('graphology-layout-forceatlas2/helpers');
+export const defaultSettings = {
+    linLogMode: false,
+    outboundAttractionDistribution: false,
+    adjustSizes: false,
+    edgeWeightInfluence: 1,
+    scalingRatio: 1,
+    strongGravityMode: false,
+    gravity: 1,
+    slowDown: 1,
+    barnesHutOptimize: false,
+    barnesHutTheta: 0.5,
+};
+export class ForceAtlasAnimator {
+    constructor(graph, layoutParams, config) {
+        this.graph = graph;
+        this.graph_components = connectedComponents(graph);
+        this.params = layoutParams;
+        this.frameID = null;
+        this.running = false;
+        // the default edge weight getter required by graphToByteArrays
+        this.getEdgeWeight = createEdgeWeightGetter(undefined).fromEntry;
+        this.graphArrays = graphToByteArrays(graph, this.getEdgeWeight);
+        this.outputReducer = null;
+        this.niters = 0;
+        this.maxiters = config.maxiters;
+        this.miniters = config.miniters;
+        this.convergenceThreshold = config.convergenceThreshold;
+        this.frameListeners = [];
+    }
+    isRunning() {
+        return this.running;
+    }
+    resetNIters() {
+        this.niters = 0;
+    }
+    updateNodePropsArrays(graphArrays) {
+        // updates the arrays of node positions and properties
+        // must guarantee this.graphArrays is defined before calling
+        // number of array entries per node
+        let i = 0;
+        const _graphArrays = graphArrays;
+        this.graph.forEachNode((_, attr) => {
+            if (attr.fixed) {
+                _graphArrays.nodes[i] = attr.x;
+                _graphArrays.nodes[i + 1] = attr.y;
+            }
+            // turns out that keeping the dx/dy state across time points makes for a fairly ugly animation.
+            // probably makes it converge to a good stable state faster, though.
+            _graphArrays.nodes[i + 2] = 0; // dx
+            _graphArrays.nodes[i + 3] = 0; // dy
+            _graphArrays.nodes[i + 4] = 0; // old_dx
+            _graphArrays.nodes[i + 5] = 0; // old_dy
+            _graphArrays.nodes[i + 9] = attr.fixed ? 1 : 0;
+            i += PPN;
+        });
+        return _graphArrays;
+    }
+    forceNodePositionUpdate() {
+        const _graphArrays = this.graphArrays;
+        if (!_graphArrays)
+            return;
+        let i = 0;
+        this.graph.forEachNode((_, attr) => {
+            _graphArrays.nodes[i] = attr.x;
+            _graphArrays.nodes[i + 1] = attr.y;
+            _graphArrays.nodes[i + 2] = 0; // dx
+            _graphArrays.nodes[i + 3] = 0; // dy
+            _graphArrays.nodes[i + 4] = 0; // old_dx
+            _graphArrays.nodes[i + 5] = 0; // old_dy
+            i += PPN;
+        });
+    }
+    hasConverged() {
+        let i = 0;
+        if (!this.graphArrays) {
+            return false;
+        }
+        for (i = 0; i < this.graphArrays.nodes.length; i += PPN) {
+            // this is called NODE_CONVERGENCE in the code, and is computed from the node speed, but I don't actually know what it means.
+            if (this.graphArrays.nodes[i + 7] > this.convergenceThreshold) {
+                return false;
+            }
+        }
+        return true;
+    }
+    onFrame(listener) {
+        this.frameListeners.push(listener);
+    }
+    runFrame() {
+        let graphArrays;
+        if (this.graphArrays) {
+            graphArrays = this.updateNodePropsArrays(this.graphArrays);
+        }
+        else {
+            graphArrays = graphToByteArrays(this.graph, this.getEdgeWeight);
+            this.graphArrays = graphArrays;
+        }
+        if (this.params.settings !== undefined) {
+            iterateNoIntercomponentRepel(this.params.settings, graphArrays.nodes, graphArrays.edges, this.graph_components);
+            assignLayoutChanges(this.graph, graphArrays.nodes, this.outputReducer);
+            this.frameListeners.forEach((f) => f());
+            this.niters += 1;
+            // TODO: add convergence check. there is a nodewise "convergence" value whose meaning I don't understand
+            if (this.niters > this.maxiters) {
+                this.stop();
+            }
+            else if (this.niters > this.miniters && this.hasConverged()) {
+                this.stop();
+            }
+            else {
+                this.frameID = window.requestAnimationFrame(() => this.runFrame());
+            }
+        }
+        else {
+            console.error(`No Settings Provided`);
+            // This is very unexpected.
+            this.stop();
+        }
+    }
+    stop() {
+        this.running = false;
+        this.resetNIters();
+        if (this.frameID !== null) {
+            window.cancelAnimationFrame(this.frameID);
+            this.frameID = null;
+        }
+        return this;
+    }
+    start() {
+        if (this.running)
+            return;
+        this.running = true;
+        this.runFrame();
+    }
+    kill() {
+        this.stop();
+        this.frameListeners = [];
+        delete this.graphArrays;
+    }
+}
+//# sourceMappingURL=ForceAtlasAnimator.js.map

package/lib/GraphContainer.js

@@ -0,0 +1,105 @@
+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, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { ControlsContainer, SigmaContainer, useSigma, useCamera } from '@react-sigma/core';
+import { Tooltip } from './mui/Tooltip';
+import { Lasso } from './icons/Lasso';
+import { Plus, Minus, Reset, FullScreenEnter, FullScreenExit, ClearSelection, Invert, } from './icons';
+import { LoadGraph } from './LoadGraph';
+import { SigmaLasso } from './SigmaLasso';
+import '@react-sigma/core/lib/react-sigma.min.css';
+import './GraphLayout.scss';
+export const GraphContainer = ({ graph, animate, animator, selectedNodes, setSelectedNodes, addSelectedNodes, isShowColorLegend, colorLegend, isFullScreen, toggleFullScreen, shouldLayoutUpdate, setShouldLayoutUpdate, clearSigma, setClearSigma, }) => {
+    const [isLassoActive, setIsLassoActive] = useState(false);
+    const { zoomIn, zoomOut, reset } = useCamera({ duration: 200, factor: 1.5 });
+    const sigma = useSigma();
+    useEffect(() => {
+        if (shouldLayoutUpdate && setShouldLayoutUpdate) {
+            new Promise((resolve) => {
+                resolve(sigma.refresh());
+            }).then(() => {
+                setShouldLayoutUpdate(false);
+            });
+        }
+    }, [shouldLayoutUpdate]);
+    const onClearSelection = useCallback(() => {
+        setSelectedNodes([]);
+    }, [setSelectedNodes]);
+    const onInvertSelection = useCallback(() => {
+        const 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]);
+    useEffect(() => {
+        if (sigma && clearSigma) {
+            sigma.clear();
+        }
+        setClearSigma(false);
+    }, [clearSigma]);
+    return (!!graph &&
+        !!animator && (React.createElement(React.Fragment, null,
+        React.createElement(LoadGraph, { graph: graph, animator: animator, animate: animate, selectedNodes: selectedNodes, setSelectedNodes: setSelectedNodes, addSelectedNodes: addSelectedNodes }),
+        React.createElement(SigmaLasso, { active: isLassoActive, setSelectedNodes: setSelectedNodes, addSelectedNodes: addSelectedNodes }),
+        React.createElement(ControlsContainer, { position: 'bottom-right' },
+            React.createElement(Tooltip, { title: 'Zoom in', placement: 'top' },
+                React.createElement("div", { className: 'react-sigma-control' },
+                    React.createElement("button", { type: 'button', className: 'zoom-in', onClick: () => zoomIn() },
+                        React.createElement(Plus, null)))),
+            React.createElement(Tooltip, { title: 'Zoom out', placement: 'top' },
+                React.createElement("div", { className: 'react-sigma-control' },
+                    React.createElement("button", { type: 'button', className: 'zoom-out', onClick: () => zoomOut() },
+                        React.createElement(Minus, null)))),
+            React.createElement(Tooltip, { title: isFullScreen ? 'Exit fullscreen' : 'Enter fullscreen', placement: 'top' },
+                React.createElement("div", { className: 'react-sigma-control' },
+                    React.createElement("button", { type: 'button', onClick: toggleFullScreen }, isFullScreen ? React.createElement(FullScreenExit, null) : React.createElement(FullScreenEnter, null)))),
+            React.createElement(Tooltip, { title: 'Lasso selection', placement: 'top' },
+                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, null)))),
+            React.createElement(Tooltip, { title: 'Reset scale', placement: 'top' },
+                React.createElement("div", { className: 'react-sigma-control' },
+                    React.createElement("button", { type: 'button', className: 'reset-scale', onClick: () => reset() },
+                        React.createElement(Reset, null)))),
+            React.createElement(Tooltip, { title: 'Clear selection', placement: 'top' },
+                React.createElement("div", { className: 'react-sigma-control' },
+                    React.createElement("button", { type: 'button', disabled: selectedNodes.length === 0, className: 'clear-selection', onClick: onClearSelection },
+                        React.createElement(ClearSelection, null)))),
+            React.createElement(Tooltip, { title: 'Invert selection', placement: 'top' },
+                React.createElement("div", { className: 'react-sigma-control' },
+                    React.createElement("button", { type: 'button', className: 'invert-selection', onClick: onInvertSelection },
+                        React.createElement(Invert, null))))))));
+};
+export const GraphWrapper = (_a) => {
+    var { isFullScreen } = _a, props = __rest(_a, ["isFullScreen"]);
+    const fullScreenStyles = useMemo(() => isFullScreen
+        ? {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            zIndex: 1400,
+        }
+        : {}, [isFullScreen]);
+    return (React.createElement(SigmaContainer, { id: 'graph-container', style: fullScreenStyles },
+        React.createElement(GraphContainer, Object.assign({ isFullScreen: isFullScreen }, props))));
+};
+//# sourceMappingURL=GraphContainer.js.map