@webviz/group-tree-plot 1.3.23 → 1.4.0

package/dist/utils/DataAssembler.js

@@ -0,0 +1,179 @@
+import * as d3 from "d3";
+import _ from "lodash";
+import { printTreeValue } from "./treePlot";
+import React from "react";
+/**
+ * Utility class to assemble and combine data for one or more dated flow network trees.
+ * The instance allows setting an active date, and provides methods to get data and labels pertaining to the given date
+ */
+export class DataAssembler {
+    /**
+     * @param datedTrees A list of dated tree objects. List cannot be empty
+     * @param edgeMetadataList A list of labels and units to use when representing values from tree edges
+     * @param nodeMetadataList A list of labels and units to use when representing values from tree nodes
+     * @throws Throws if dated tree list is empty
+     */
+    constructor(datedTrees, edgeMetadataList, nodeMetadataList) {
+        this._currentTreeIndex = 0;
+        this._currentDateIndex = 0;
+        // Guard - Require at least one tree to be given.
+        if (!datedTrees.length)
+            throw new Error("Tree-list is empty");
+        this.datedTrees = datedTrees;
+        this.edgeMetadataList = edgeMetadataList;
+        this.nodeMetadataList = nodeMetadataList;
+        this._propertyToLabelMap = new Map();
+        [...edgeMetadataList, ...nodeMetadataList].forEach((elm) => {
+            this._propertyToLabelMap.set(elm.key, [elm.label, elm.unit]);
+        });
+        this._propertyMaxVals = new Map();
+        this.datedTrees.forEach(({ tree }) => {
+            // Utilizing d3 to iterate over each child node from our tree-root
+            d3.hierarchy(tree, (d) => d.children).each((node) => {
+                const { edge_data } = node.data;
+                Object.entries(edge_data).forEach(([key, vals]) => {
+                    var _a;
+                    const existingMax = (_a = this._propertyMaxVals.get(key)) !== null && _a !== void 0 ? _a : Number.MIN_VALUE;
+                    const newMax = Math.max(...vals, existingMax);
+                    this._propertyMaxVals.set(key, newMax);
+                });
+            });
+        });
+    }
+    /**
+     * Changes the active date for the instance. Raises if date is invalid
+     * @param newDate A date string, formatted as YYYY-MM-DD (eg. 2001-01-30)
+     * @throws Will throw if the date is invalid, or if no tree uses the given date
+     */
+    setActiveDate(newDate) {
+        const [newTreeIdx, newDateIdx] = findTreeAndDateIndex(newDate, this.datedTrees);
+        // I do think these will always both be -1, or not -1, so checking both might be excessive
+        if (newTreeIdx === -1 || newDateIdx === -1) {
+            throw new Error("Invalid date for data assembler");
+        }
+        this._currentTreeIndex = newTreeIdx;
+        this._currentDateIndex = newDateIdx;
+    }
+    /**
+     * Gets the currently active tree
+     * @returns A dated tree
+     */
+    getActiveTree() {
+        return this.datedTrees[this._currentTreeIndex];
+    }
+    /**
+     * Pretty-prints all values in the given object with labels and units added
+     * @param data Data from a node or edge
+     * @returns A formatted string presentation of the data value
+     */
+    getTooltip(data) {
+        if (this._currentDateIndex === -1)
+            return "";
+        let text = "";
+        for (const propName in data) {
+            const [label, unit] = this.getPropertyInfo(propName);
+            const value = this.getPropertyValue(data, propName);
+            const valueString = printTreeValue(value);
+            text += `${label}: ${valueString} ${unit}\n`;
+        }
+        return text.trimEnd();
+    }
+    /**
+     * Gets a property's value at the currently active date
+     * @param data Data from a node or edge
+     * @param property A key for a property
+     * @returns The value, if found
+     */
+    getPropertyValue(data, property) {
+        var _a;
+        if (this._currentDateIndex === -1)
+            return null;
+        const value = (_a = data[property]) === null || _a === void 0 ? void 0 : _a[this._currentDateIndex];
+        return value !== null && value !== void 0 ? value : null;
+    }
+    /**
+     * Gets the label and unit strings for a given property
+     * @param propertyKey The key for the property
+     * @returns The label and unit for the property. If not found, label defaults to "", and unit defaults to "?"
+     */
+    getPropertyInfo(propertyKey) {
+        var _a;
+        const [label, unit] = (_a = this._propertyToLabelMap.get(propertyKey)) !== null && _a !== void 0 ? _a : [];
+        const sanitizedLabel = _.upperFirst(label !== null && label !== void 0 ? label : "");
+        const sanitizedUnit = unit !== null && unit !== void 0 ? unit : "?";
+        return [sanitizedLabel, sanitizedUnit];
+    }
+    /**
+     * Returns a property's value to a normalized value between 2 and 100. A value of 0 will be returned as is.
+     * Will also return 0 if no data is found
+     * @param data Data object to take data from
+     * @param property The property key to take from
+     * @returns The normalized value.
+     */
+    normalizeValue(data, property) {
+        var _a;
+        const value = (_a = this.getPropertyValue(data, property)) !== null && _a !== void 0 ? _a : 0;
+        const maxVal = this._propertyMaxVals.get(property);
+        // Don't normalize 0 or invalid properties
+        if (!maxVal || value === 0)
+            return 0;
+        return d3.scaleLinear().domain([0, maxVal]).range([2, 100])(value);
+    }
+}
+function findTreeAndDateIndex(targetDate, datedTrees) {
+    // Using standard for loop so we can return early when we find a matching tree
+    for (let treeIdx = 0; treeIdx < datedTrees.length; treeIdx++) {
+        const datedTree = datedTrees[treeIdx];
+        const dateIdx = datedTree.dates.findIndex((date) => date === targetDate);
+        if (dateIdx !== -1) {
+            return [treeIdx, dateIdx];
+        }
+    }
+    // No matching entry found
+    return [-1, -1];
+}
+/**
+ * Updates the active date in a data-assembler instance.
+ * @param dataAssembler An instance of DataAssembler
+ * @param targetDate A date string
+ * @returns An error message, if the date was invalid
+ */
+export function useUpdateAssemblerDate(dataAssembler, targetDate) {
+    const [prevDate, setPrevDate] = React.useState(null);
+    if (!dataAssembler || targetDate === prevDate)
+        return;
+    try {
+        dataAssembler.setActiveDate(targetDate);
+        setPrevDate(targetDate);
+    }
+    catch (error) {
+        return error.message;
+    }
+}
+/**
+ * Initializes a memoized data-assembler instance. Creates a new instance every time data changes, but returns the last valid instance if the new data is invalid.
+ * @param datedTrees A list of dated trees. *Assumes all node labels are unique across all node types*
+ * @param edgeMetadataList Dated metadata for each tree edge
+ * @param nodeMetadataList Dated metadata for each tree node
+ * @returns A data-assembler instance, and an error message (if the instance could not be created)
+ */
+export function useDataAssembler(datedTrees, edgeMetadataList, nodeMetadataList) {
+    // Store a status message to track if data was valid
+    let errorMsg = "";
+    // Storing a copy of the last successfully assembled data to render when data becomes invalid
+    const lastValidDataAssembler = React.useRef(null);
+    const dataAssembler = React.useMemo(() => {
+        if (datedTrees.length === 0)
+            return null;
+        const assembler = new DataAssembler(datedTrees, edgeMetadataList, nodeMetadataList);
+        return assembler;
+    }, [datedTrees, edgeMetadataList, nodeMetadataList]);
+    if (dataAssembler === null) {
+        errorMsg = "Invalid data for assembler";
+    }
+    else if (dataAssembler !== lastValidDataAssembler.current) {
+        lastValidDataAssembler.current = dataAssembler;
+    }
+    return [lastValidDataAssembler.current, errorMsg];
+}
+//# sourceMappingURL=DataAssembler.js.map

package/dist/utils/DataAssembler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataAssembler.js","sourceRoot":"","sources":["../../src/utils/DataAssembler.ts"],"names":[],"mappings":"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"}

package/dist/utils/treePlot.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Utilities for handling the tree nodes generated by d3
+ */
+import type { D3TreeEdge, D3TreeNode, RecursiveTreeNode } from "../types";
+import type { HierarchyNode } from "d3";
+/**
+ * Computes a unique node identifier that should be unique across the entire tree
+ * @param node A node in the tree
+ * @returns A unique identifier
+ */
+export declare function makeNodeId(node: HierarchyNode<RecursiveTreeNode>): string;
+/**
+ * Computes an identifier for a link that should be unique across the entire tree
+ * @param link A link in the tree
+ * @returns A unique path identifier
+ */
+export declare function makeLinkId(link: D3TreeEdge): string;
+/**
+ * Formats a value from a node to either N/A, or to a number-string with decimals removed
+ * @param value A number or null
+ * @returns A formatted string
+ */
+export declare function printTreeValue(value: number | null): string;
+/**
+ * Given a node in a tree, this method finds that node's closest visible ancestor in another tree-structure.
+ * @param targetNode Some tree-node *from the initial tree*.
+ * @param newTreeRoot  The root *of the new tree structure*
+ * @returns A visible node in the new tree that's the closest to the target-node. Defaults to the tree root.
+ */
+export declare function findClosestVisibleInNewTree(targetNode: D3TreeNode, newTreeRoot: D3TreeNode): D3TreeNode;
+/**
+ * Computes the SVG drawing command for a link in the tree
+ * @param link A link in the tree
+ * @returns An SVG command string
+ */
+export declare function diagonalPath(link: D3TreeEdge): string;

package/dist/utils/treePlot.js

@@ -0,0 +1,85 @@
+/**
+ * Utilities for handling the tree nodes generated by d3
+ */
+/**
+ * Computes a unique node identifier that should be unique across the entire tree
+ * @param node A node in the tree
+ * @returns A unique identifier
+ */
+export function makeNodeId(node) {
+    // It's technically possible for a group to have the same name as a well, so it should be enough to simply append the type in front of the label
+    const type = node.data.node_type;
+    const label = node.data.node_label;
+    return `${type}__${label}`;
+}
+/**
+ * Computes an identifier for a link that should be unique across the entire tree
+ * @param link A link in the tree
+ * @returns A unique path identifier
+ */
+export function makeLinkId(link) {
+    return `path ${makeNodeId(link.target)}`;
+}
+/**
+ * Formats a value from a node to either N/A, or to a number-string with decimals removed
+ * @param value A number or null
+ * @returns A formatted string
+ */
+export function printTreeValue(value) {
+    if (value === null)
+        return "N/A";
+    else
+        return value.toFixed(0);
+}
+/**
+ * Given a node in a tree, this method finds that node's closest visible ancestor in another tree-structure.
+ * @param targetNode Some tree-node *from the initial tree*.
+ * @param newTreeRoot  The root *of the new tree structure*
+ * @returns A visible node in the new tree that's the closest to the target-node. Defaults to the tree root.
+ */
+export function findClosestVisibleInNewTree(targetNode, newTreeRoot) {
+    var _a, _b;
+    // Traverse upwards to build the expected path to the original node
+    let pathToNode = [targetNode];
+    let traversingNode = targetNode;
+    while (traversingNode.parent) {
+        traversingNode = traversingNode.parent;
+        pathToNode = [traversingNode, ...pathToNode];
+    }
+    // Assume that the tree root will always be an available visible parent
+    let visibleParent = newTreeRoot;
+    let childrenInTree = (_a = visibleParent.children) !== null && _a !== void 0 ? _a : [];
+    // Using the computed path, traverse downwards in the new tree structure as far as possible
+    for (let i = 1; i < pathToNode.length; i++) {
+        const pathNode = pathToNode[i];
+        const nodeId = makeNodeId(pathNode);
+        const foundChild = childrenInTree.find((node) => makeNodeId(node) === nodeId);
+        // Previous node was the last visible parent for the node
+        if (!foundChild) {
+            return visibleParent;
+        }
+        else {
+            visibleParent = foundChild;
+            childrenInTree = (_b = foundChild.children) !== null && _b !== void 0 ? _b : [];
+        }
+    }
+    return visibleParent;
+}
+/**
+ * Computes the SVG drawing command for a link in the tree
+ * @param link A link in the tree
+ * @returns An SVG command string
+ */
+export function diagonalPath(link) {
+    const { source, target } = link;
+    const avgY = (target.y + source.y) / 2;
+    // Svg path drawing commands. Note that x and y is swapped to show the tree sideways
+    return `
+        M ${source.y} ${source.x} \
+        C \
+            ${avgY} ${source.x}, \
+            ${avgY} ${target.x}, \
+            ${target.y} ${target.x}
+        `;
+}
+//# sourceMappingURL=treePlot.js.map

package/dist/utils/treePlot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treePlot.js","sourceRoot":"","sources":["../../src/utils/treePlot.ts"],"names":[],"mappings":"AAAA;;GAEG;AAKH;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,IAAsC;IAC7D,gJAAgJ;IAChJ,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IACjC,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;IAEnC,OAAO,GAAG,IAAI,KAAK,KAAK,EAAE,CAAC;AAC/B,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,IAAgB;IACvC,OAAO,QAAQ,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;AAC7C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,KAAoB;IAC/C,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO,KAAK,CAAC;;QAC5B,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AACjC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,2BAA2B,CACvC,UAAsB,EACtB,WAAuB;;IAEvB,mEAAmE;IACnE,IAAI,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;IAC9B,IAAI,cAAc,GAAG,UAAU,CAAC;IAChC,OAAO,cAAc,CAAC,MAAM,EAAE,CAAC;QAC3B,cAAc,GAAG,cAAc,CAAC,MAAM,CAAC;QACvC,UAAU,GAAG,CAAC,cAAc,EAAE,GAAG,UAAU,CAAC,CAAC;IACjD,CAAC;IAED,uEAAuE;IACvE,IAAI,aAAa,GAAG,WAAW,CAAC;IAChC,IAAI,cAAc,GAAG,MAAA,aAAa,CAAC,QAAQ,mCAAI,EAAE,CAAC;IAElD,2FAA2F;IAC3F,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;QAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAEpC,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAClC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,MAAM,CACxC,CAAC;QAEF,yDAAyD;QACzD,IAAI,CAAC,UAAU,EAAE,CAAC;YACd,OAAO,aAAa,CAAC;QACzB,CAAC;aAAM,CAAC;YACJ,aAAa,GAAG,UAAU,CAAC;YAC3B,cAAc,GAAG,MAAA,UAAU,CAAC,QAAQ,mCAAI,EAAE,CAAC;QAC/C,CAAC;IACL,CAAC;IAED,OAAO,aAAa,CAAC;AACzB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,IAAgB;IACzC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAEhC,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACvC,oFAAoF;IACpF,OAAO;YACC,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;;cAElB,IAAI,IAAI,MAAM,CAAC,CAAC;cAChB,IAAI,IAAI,MAAM,CAAC,CAAC;cAChB,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;SACzB,CAAC;AACV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@webviz/group-tree-plot",
-    "version": "1.3.23",
+    "version": "1.4.0",
     "description": "",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -17,7 +17,8 @@
     "license": "MPL-2.0",
     "dependencies": {
         "d3": "^7.8.2",
-        "lodash": "^4.17.21"
+        "lodash": "^4.17.21",
+        "motion": "^11.18.0"
     },
     "peerDependencies": {
         "react": "^17 || ^18",

package/dist/GroupTreeAssembler/groupTreeAssembler.d.ts

@@ -1,64 +0,0 @@
-/**
- * Class to assemble Group tree visualization. Creates an _svg, and appends to the
- * assigned HTML element. Draws the tree provided in datedTrees with the current flow rate,
- * node info and date time.
- *
- * Provides methods to update selected date time, and change flow rate and node info.
- */
-export default class GroupTreeAssembler {
-    /**
-     * Initialize all trees in the group tree datastructure, once for the entire visualization.
-     *
-     */
-    static initHierarchies(tree_data: any, height: any): any;
-    /**
-     *
-     * @param dom_element_id - id of the HTML element to append the _svg to
-     * @param datedTrees - List of dated tree data structure containing the trees to visualize
-     * @param initialFlowRate - key identifying the initial selected flow rate for the tree edges
-     * @param initialNodeInfo - key identifying the initial selected node info for the tree nodes
-     * @param currentDateTime - the initial/current date time
-     * @param edgeMetadataList - List of metadata for the edge keys in the tree data structure
-     * @param nodeMetadataList - List of metadata for the node keys in the tree data structure
-     */
-    constructor(dom_element_id: any, datedTrees: any, initialFlowRate: any, initialNodeInfo: any, currentDateTime: any, edgeMetadataList: any, nodeMetadataList: any);
-    _propertyToLabelMap: Map<any, any>;
-    _currentFlowRate: any;
-    _currentNodeInfo: any;
-    _currentDateTime: any;
-    _transitionTime: number;
-    _path_scale: Map<any, any>;
-    _rectWidth: any;
-    _rectHeight: number;
-    _rectLeftMargin: number;
-    _rectTopMargin: number;
-    _treeWidth: number;
-    _svg: d3.Selection<SVGGElement, any, null, undefined>;
-    _textpaths: d3.Selection<SVGGElement, any, null, undefined>;
-    _renderTree: d3.TreeLayout<any>;
-    _data: any;
-    _currentTree: {};
-    /**
-     * @returns {*} -The initialized hierarchical group tree data structure
-     */
-    get data(): any;
-    /**
-     * Set the flowrate and update display of all edges accordingly.
-     *
-     * @param flowrate - key identifying the flowrate of the incoming edge
-     */
-    set flowrate(flowrate: any);
-    get flowrate(): any;
-    set nodeinfo(nodeinfo: any);
-    get nodeinfo(): any;
-    getEdgeStrokeWidth(key: any, val: any): string;
-    /**
-     * Sets the state of the current tree, and updates the tree visualization accordingly.
-     * The state is changed either due to a branch open/close, or that the tree is entirely changed
-     * when moving back and fourth in time.
-     *
-     * @param root
-     */
-    update(newDateTime: any): void;
-}
-import * as d3 from "d3";