@hpcc-js/graph 2.81.0 → 2.83.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "2.81.0",
+    "version": "2.83.0",
     "description": "hpcc-js - Viz Graph",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -49,18 +49,18 @@
         "lint": "eslint ./src",
         "docs": "typedoc --options tdoptions.json .",
         "ddd": "downlevel-dts . ts3.4",
-        "update": "npx npm-check-updates -u -t minor"
+        "update": "npx --yes npm-check-updates -u -t minor"
     },
     "dependencies": {
-        "@hpcc-js/api": "^2.12.0",
-        "@hpcc-js/common": "^2.71.0",
-        "@hpcc-js/html": "^2.42.0",
-        "@hpcc-js/react": "^2.50.0",
-        "@hpcc-js/util": "^2.48.0"
+        "@hpcc-js/api": "^2.12.1",
+        "@hpcc-js/common": "^2.71.1",
+        "@hpcc-js/html": "^2.42.2",
+        "@hpcc-js/react": "^2.52.0",
+        "@hpcc-js/util": "^2.49.0"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.11.1",
-        "@hpcc-js/wasm": "1.14.1",
+        "@hpcc-js/bundle": "^2.11.2",
+        "@hpcc-js/wasm": "1.15.0",
         "@types/d3-transition": "1.3.2",
         "@types/dagre": "0.7.47",
         "d3-array": "^1",
@@ -75,7 +75,7 @@
         "d3-transition": "^1",
         "dagre": "0.8.5",
         "es6-promise": "4.2.8",
-        "tslib": "2.3.1"
+        "tslib": "2.4.0"
     },
     "repository": {
         "type": "git",
@@ -88,5 +88,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "62cc2d8321326a26647c5ab7e408ece836bfe193"
+    "gitHead": "3a4f1ba7a59e2e7f5283830e0a884187a6c42fe7"
 }

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/graph";
-export const PKG_VERSION = "2.81.0";
-export const BUILD_VERSION = "2.104.0";
+export const PKG_VERSION = "2.83.0";
+export const BUILD_VERSION = "2.104.3";

package/src/graph2/dataGraph.ts

@@ -63,6 +63,8 @@ export class DataGraph extends Graph2 {
     vertexTooltipColumn: publish<this, string>;
     @publish([], "propertyArray", "Annotations", null, { autoExpand: AnnotationColumn })
     vertexAnnotationColumns: publish<this, AnnotationColumn[]>;
+    @publish("", "set", "Vertex expansion FAChar column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true })
+    vertexExpansionFACharColumn: publish<this, string>;
 
     @publish([], "any", "Edge columns", null, { internal: true })
     edgeColumns: publish<this, string[]>;
@@ -168,7 +170,9 @@ export class DataGraph extends Graph2 {
         const faCharIdx = this.indexOf(columns, this.vertexFACharColumn(), "faChar");
         const vertexTooltipIdx = this.indexOf(columns, this.vertexTooltipColumn(), "tooltip");
         const annotationIdxs = annotationColumns.map(ac => this.indexOf(columns, ac.columnID(), ""));
+        const expansionFACharIdx = this.indexOf(columns, this.vertexExpansionFACharColumn(), "expansionFAChar");
         const vertices: IVertex[] = this.vertices().map((v): IVertex => {
+            const annotationIDs = annotationIdxs.map((ai, i) => !!v[ai] ? annotationColumns[i].annotationID() : undefined).filter(a => !!a);
             return {
                 categoryID: "" + v[catIdx],
                 id: "" + v[idIdx],
@@ -179,8 +183,12 @@ export class DataGraph extends Graph2 {
                 icon: {
                     imageChar: "" + (v[faCharIdx] || this.vertexFAChar())
                 },
-                annotationIDs: annotationIdxs.map((ai, i) => !!v[ai] ? annotationColumns[i].annotationID() : undefined).filter(a => !!a)
-            };
+                annotationIDs,
+                annotations: this.annotations().filter(ann => annotationIDs.indexOf(ann.id) >= 0),
+                expansionIcon: v[expansionFACharIdx] ? {
+                    imageChar: "" + v[expansionFACharIdx]
+                } : undefined
+            } as IVertex;
         });
         const diff = compare2(this._prevVertices, vertices, d => d.id);
         diff.exit.forEach(item => {

package/src/graph2/graph.ts

@@ -1,16 +1,16 @@
 import { d3Event, drag as d3Drag, Palette, select as d3Select, Selection, Spacer, SVGGlowFilter, SVGZoomWidget, ToggleButton, Utility, Widget } from "@hpcc-js/common";
-import { IconEx, Icons, React, render, Subgraph, Vertex, IVertex3 } from "@hpcc-js/react";
+import { IconEx, Icons, React, render, Subgraph, Vertex, IVertex3, IVertex4Annotation, Icon } from "@hpcc-js/react";
 import { getScriptSrc, Graph2 as GraphCollection, hashSum } from "@hpcc-js/util";
 import { HTMLTooltip } from "@hpcc-js/html";
 import "d3-transition";
 import { Circle, Dagre, ForceDirected, ForceDirectedAnimated, Graphviz, ILayout, Null } from "./layouts/index";
 import { Options as FDOptions } from "./layouts/forceDirectedWorker";
-import { EdgePlaceholder, IEdge, IGraphData2, IHierarchy, ISubgraph, IVertex, SubgraphPlaceholder, VertexPlaceholder } from "./layouts/placeholders";
-import { graphviz as gvWorker } from "./layouts/graphvizWorker";
+import type { IEdge, IGraphData2, IHierarchy, ISubgraph, IVertex } from "./layouts/placeholders";
+import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder } from "./layouts/placeholders";
+import { Engine, graphviz as gvWorker } from "./layouts/graphvizWorker";
 import { Tree, RadialTree, Dendrogram, RadialDendrogram } from "./layouts/tree";
 
 import "../../src/graph2/graph.css";
-import { Engine } from "./layouts/graphvizWorker";
 
 const wasmFolder = `${getScriptSrc("/graph/lib-umd/graph2/graph") || getScriptSrc("/graph/dist/index") || "."}/graph/dist`;
 
@@ -186,10 +186,11 @@ export class Graph2 extends SVGZoomWidget {
                     }, d3Event().sourceEvent);
                     context.selectionChanged();
                     const selected = d.element.classed("selected");
-                    context.vertex_click(d.props.origData || d.props, "", selected);
+                    const eventOrigin = context.resolveEventOrigin();
+                    context.vertex_click(d.props.origData || d.props, "", selected, eventOrigin);
                     const doClickTime = Date.now();
                     if (doClickTime - context._prevDoClickTime < context.doubleClickMaxDelay()) {
-                        context.vertex_dblclick(d.props.origData || d.props, "", selected);
+                        context.vertex_dblclick(d.props.origData || d.props, "", selected, eventOrigin);
                     }
                     context._prevDoClickTime = doClickTime;
                 }
@@ -199,6 +200,27 @@ export class Graph2 extends SVGZoomWidget {
         this.zoomToFitLimit(1);
     }
 
+    resolveEventOrigin(): { origin: string, data: undefined | IVertex4Annotation | Icon } {
+        const d3evt = d3Event();
+        const eventPath = d3evt?.sourceEvent?.path ?? d3evt?.path;
+        const element = eventPath.find(n => n?.hasAttribute && n?.hasAttribute("data-click"));
+        const origin = element ? element.getAttribute("data-click") : "";
+        const dataStr = element ? element.getAttribute("data-click-data") : "";
+        let data = undefined;
+        if (dataStr) {
+            try {
+                data = JSON.parse(dataStr);
+            } catch (e) {
+                console.warn("Unexpected annotation data:", dataStr);
+            }
+        }
+
+        return {
+            origin,
+            data
+        };
+    }
+
     iconBarButtons(): Widget[] {
         return this._iconBar.buttons();
     }
@@ -749,7 +771,8 @@ export class Graph2 extends SVGZoomWidget {
                         Utility.safeRaise(this);
                         context.highlightVertex(d3Select(this), d);
                         const selected = d.element.classed("selected");
-                        context.vertex_mousein(d.props.origData || d.props, "", selected);
+                        const eventOrigin = context.resolveEventOrigin();
+                        context.vertex_mousein(d.props.origData || d.props, "", selected, eventOrigin);
                     })
                     .on("mouseover", function (d) {
                         Utility.safeRaise(this);
@@ -769,12 +792,14 @@ export class Graph2 extends SVGZoomWidget {
                                 .render()
                                 ;
                         }
-                        context.vertex_mouseover(d.props.origData || d.props, "", selected);
+                        const eventOrigin = context.resolveEventOrigin();
+                        context.vertex_mouseover(d.props.origData || d.props, "", selected, eventOrigin);
                     })
                     .on("mouseout", function (d) {
                         context.highlightVertex(null, null);
                         const selected = d.element.classed("selected");
-                        context.vertex_mouseout(d.props.origData || d.props, "", selected);
+                        const eventOrigin = context.resolveEventOrigin();
+                        context.vertex_mouseout(d.props.origData || d.props, "", selected, eventOrigin);
                         if (d.props.tooltip) {
                             context._tooltip.mouseout();
                         }
@@ -1125,19 +1150,19 @@ export class Graph2 extends SVGZoomWidget {
     subgraph_click(row, _col, sel) {
     }
 
-    vertex_click(row, _col, sel) {
+    vertex_click(row, _col, sel, data) {
     }
 
-    vertex_dblclick(row, _col, sel) {
+    vertex_dblclick(row, _col, sel, data) {
     }
 
-    vertex_mousein(row, _col, sel) {
+    vertex_mousein(row, _col, sel, data) {
     }
 
-    vertex_mouseover(row, _col, sel) {
+    vertex_mouseover(row, _col, sel, data) {
     }
 
-    vertex_mouseout(row, _col, sel) {
+    vertex_mouseout(row, _col, sel, data) {
     }
 
     edge_click(row, _col, sel) {
@@ -1313,14 +1338,14 @@ Graph2.prototype.publish("centroidIconHeight", 50, "number", "Centroid Icon Heig
 Graph2.prototype.publish("centroidIconPadding", 10, "number", "Centroid Icon Padding");
 Graph2.prototype.publish("centroidIconStrokeWidth", 4, "number", "Centroid Icon Stroke Width");
 Graph2.prototype.publish("centroidIconFontFamily", "FontAwesome", "string", "Centroid Icon Font Family");
-Graph2.prototype.publish("centroidLabelFontFamily", "FontAwesome", "string", "Centroid Label Font Family");
+Graph2.prototype.publish("centroidLabelFontFamily", "Verdana", "string", "Centroid Label Font Family");
 Graph2.prototype.publish("vertexTextHeight", 10, "number", "Vertex Text Height");
 Graph2.prototype.publish("vertexTextPadding", 4, "number", "Vertex Text Padding");
 Graph2.prototype.publish("vertexIconHeight", 50, "number", "Vertex Icon Height");
 Graph2.prototype.publish("vertexIconPadding", 10, "number", "Vertex Icon Padding");
 Graph2.prototype.publish("vertexIconStrokeWidth", 0, "number", "Vertex Icon Stroke Width");
 Graph2.prototype.publish("vertexIconFontFamily", "FontAwesome", "string", "Vertex Icon Font Family");
-Graph2.prototype.publish("vertexLabelFontFamily", "FontAwesome", "string", "Vertex Label Font Family");
+Graph2.prototype.publish("vertexLabelFontFamily", "Verdana", "string", "Vertex Label Font Family");
 Graph2.prototype.publish("highlightSelectedPathToCentroid", true, "boolean", "Highlight path to Center Vertex (for selected vertices)");
 
 Graph2.prototype.publish("hierarchyRankDirection", "TB", "set", "Direction for Rank Nodes", ["TB", "BT", "LR", "RL"], { disable: (w: Graph2) => w.layout() !== "Hierarchy" });