@hpcc-js/graph 3.7.4 → 3.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "3.7.4",
+    "version": "3.7.6",
     "description": "hpcc-js - Viz Graph",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -24,10 +24,12 @@
         "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo ./workers/dist ./workers/lib-es6 ./workers/types",
         "bundle": "vite build",
         "bundle-workers": "vite build -c ./workers/vite.config.ts",
-        "bundle-watch": "vite --port 5509",
+        "bundle-watch": "vite build --watch",
+        "bundle-serve": "vite --port 5509",
         "gen-types": "tsc --project tsconfig.json",
         "gen-types-watch": "npm run gen-types -- --watch",
         "build": "run-p gen-types bundle",
+        "watch": "run-p gen-types-watch bundle-watch",
         "lint": "eslint ./src",
         "lint-fix": "eslint --fix src/**/*.ts",
         "docs": "typedoc --options tdoptions.json .",
@@ -38,18 +40,18 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^3.4.15",
-        "@hpcc-js/common": "^3.7.5",
-        "@hpcc-js/html": "^3.3.15",
-        "@hpcc-js/react": "^3.4.15",
-        "@hpcc-js/util": "^3.5.4"
+        "@hpcc-js/api": "^3.4.17",
+        "@hpcc-js/common": "^3.7.7",
+        "@hpcc-js/html": "^3.3.17",
+        "@hpcc-js/react": "^3.4.17",
+        "@hpcc-js/util": "^3.5.6"
     },
     "optionalPeerDependencies": {
         "react": ">=17.0.0"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.8.7",
-        "@hpcc-js/wasm-graphviz": "1.21.2",
+        "@hpcc-js/esbuild-plugins": "^1.8.8",
+        "@hpcc-js/wasm-graphviz": "1.21.4",
         "@types/d3-transition": "1.3.6",
         "@types/dagre": "0.7.54",
         "d3-force": "^1",
@@ -73,5 +75,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "f8bdd58fc6914054a2313a87bbe1257dc9720545"
+    "gitHead": "630e839917f1cc38f6e3324db5a9ac991234599a"
 }

package/src/AdjacencyGraph.ts

@@ -1,224 +1,224 @@
-import { PropertyExt } from "@hpcc-js/common";
-import { hashSum } from "@hpcc-js/util";
-import { Edge } from "./Edge.ts";
-import { Graph, IGraphData } from "./Graph.ts";
-import { IAnnotation, Vertex } from "./Vertex.ts";
-
-interface IAnnotationIndexes {
-    iconCol: number;
-    iconFillCol: number;
-    tooltipCol: number;
-    shapeStrokeCol: number;
-    shapeFillCol: number;
-}
-
-export class Annotation extends PropertyExt {
-    protected _owner: AdjacencyGraph;
-
-    owner(): AdjacencyGraph;
-    owner(_: AdjacencyGraph): this;
-    owner(_?: AdjacencyGraph): AdjacencyGraph | this {
-        if (!arguments.length) return this._owner;
-        this._owner = _;
-        return this;
-    }
-
-    valid(): boolean {
-        return !!this.iconColumn();
-    }
-
-    indexes(): IAnnotationIndexes {
-        const columns = this._owner.columns();
-        return {
-            iconCol: columns.indexOf(this.iconColumn()),
-            iconFillCol: columns.indexOf(this.iconFillColumn()),
-            tooltipCol: columns.indexOf(this.tooltipColumn()),
-            shapeStrokeCol: columns.indexOf(this.shapeStrokeColumn()),
-            shapeFillCol: columns.indexOf(this.shapeFillColumn())
-        };
-    }
-
-    mapper(): (row) => IAnnotation {
-        const indexes = this.indexes();
-        return (row) => ({
-            faChar: row[indexes.iconCol],
-            tooltip: row[indexes.tooltipCol],
-            shape_colorFill: row[indexes.shapeFillCol] || this.shapeFillDefault(),
-            shape_colorStroke: row[indexes.shapeStrokeCol] || this.shapeStrokeDefault(),
-            image_colorFill: row[indexes.iconFillCol] || this.iconFillDefault()
-        });
-    }
-}
-Annotation.prototype._class += " graph_Annotation";
-export interface Annotation {
-    iconColumn(): string;
-    iconColumn(_: string): this;
-    iconFillDefault(): string;
-    iconFillDefault(_: string): this;
-    iconFillColumn(): string;
-    iconFillColumn(_: string): this;
-    tooltipColumn(): string;
-    tooltipColumn(_: string): this;
-    shapeStrokeDefault(): string;
-    shapeStrokeDefault(_: string): this;
-    shapeStrokeColumn(): string;
-    shapeStrokeColumn(_: string): this;
-    shapeFillDefault(): string;
-    shapeFillDefault(_: string): this;
-    shapeFillColumn(): string;
-    shapeFillColumn(_: string): this;
-}
-Annotation.prototype.publish("iconColumn", "", "set", "Icon column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
-Annotation.prototype.publish("iconFillDefault", "white", "html-color", "Icon fill default color");
-Annotation.prototype.publish("iconFillColumn", "", "set", "Icon fill color column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
-Annotation.prototype.publish("tooltipColumn", "", "set", "Tooltip column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
-Annotation.prototype.publish("shapeStrokeDefault", "darkred", "html-color", "Shape stroke default color");
-Annotation.prototype.publish("shapeStrokeColumn", "", "set", "Shape stroke color column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
-Annotation.prototype.publish("shapeFillDefault", "red", "html-color", "Shape fill default color");
-Annotation.prototype.publish("shapeFillColumn", "", "set", "Shape fill color column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
-
-export class AdjacencyGraph extends Graph {
-
-    private _vertexMap: { [key: string]: Vertex } = {};
-    private _edgeMap: { [key: string]: Edge } = {};
-    private _prevAdjacencyDataHash: string;
-    private _merge: boolean = false;
-    private _adjacencyData: object[] = [];
-
-    constructor() {
-        super();
-    }
-
-    linksColumns(): string[] {
-        const linksCol: number = this.columns().indexOf(this.linksColumn());
-        const linksField = this._db.field(linksCol);
-        if (linksField) {
-            return linksField.children().map(field => field.label());
-        }
-        return [];
-    }
-
-    validAnnotations() {
-        return this.annotations().filter(a => a.valid());
-    }
-
-    updateData() {
-        const prevAdjacencyDataHash = hashSum([this._adjacencyData, this.uidColumn(), this.labelColumn(), this.iconColumn(), this.linksColumn(), this.linkUidColumn(), this.linkLabelColumn(), this.validAnnotations().map(a => a.hashSum())]);
-        if (this._prevAdjacencyDataHash !== prevAdjacencyDataHash) {
-            this._prevAdjacencyDataHash = prevAdjacencyDataHash;
-
-            const columns = this.columns();
-            const uidCol: number = columns.indexOf(this.uidColumn());
-            const labelCol: number = columns.indexOf(this.labelColumn());
-            const iconCol: number = columns.indexOf(this.iconColumn());
-            const linksCol: number = columns.indexOf(this.linksColumn());
-
-            const linksColumns = this.linksColumns();
-            const linksUidCol: number = linksColumns.indexOf(this.linkUidColumn());
-            const linksLabelCol: number = linksColumns.indexOf(this.linkLabelColumn());
-
-            const annotationMappers = this.validAnnotations().map(a => a.mapper());
-
-            const vertexMap: { [key: string]: Vertex } = {};
-            const edgeMap: { [key: string]: Edge } = {};
-            const graphData: IGraphData = {
-                vertices: this._adjacencyData.map(row => {
-                    const uid = row[uidCol];
-                    if (uid !== undefined) {
-                        let retVal = vertexMap[uid] || this._vertexMap[uid];
-                        if (!retVal) {
-                            retVal = new Vertex();
-                        }
-                        vertexMap[uid] = retVal;
-
-                        retVal
-                            .text(row[labelCol])
-                            .data(row)
-                            .faChar(row[iconCol])
-                            .annotationIcons(annotationMappers.map(am => am(row)))
-                            ;
-
-                        return retVal;
-                    }
-                }).filter(v => !!v),
-                edges: []
-            };
-            for (const row of this._adjacencyData) {
-                const uid = row[uidCol];
-                const links = row[linksCol];
-                if (uid !== undefined && links !== undefined) {
-                    for (const childRow of links) {
-                        const linkUid = childRow[linksUidCol];
-                        const linkLabel = childRow[linksLabelCol];
-                        const edgeID = `${uid}->${linkUid}`;
-                        let retVal = edgeMap[edgeID] || this._edgeMap[edgeID];
-                        if (!retVal) {
-                            if (vertexMap[uid] && vertexMap[linkUid]) {
-                                retVal = new Edge()
-                                    .sourceVertex(vertexMap[uid])
-                                    .targetVertex(vertexMap[linkUid])
-                                    .data(childRow)
-                                    ;
-                            } else {
-                                console.warn("Missing vertices for edge:  " + edgeID);
-                            }
-                        }
-                        if (retVal) {
-                            retVal.text(linkLabel);
-                            edgeMap[edgeID] = retVal;
-                            graphData.edges.push(retVal);
-                        }
-                    }
-                }
-            }
-            this._vertexMap = vertexMap;
-            this._edgeMap = edgeMap;
-            super.data(graphData, this._merge);
-        }
-    }
-
-    data(): IGraphData;
-    data(_: IGraphData, merge?: boolean): this;
-    data(_?: IGraphData | object[], merge?: boolean): IGraphData | object[] | this {
-        if (!arguments.length) return this._adjacencyData;
-        if (_ instanceof Array) {
-            this._merge = merge;
-            this._adjacencyData = _;
-            return this;
-        }
-        throw new Error("Invalid data shape.");
-    }
-
-    update(domNode, element) {
-        this.updateData();
-        super.update(domNode, element);
-    }
-
-    click(row, col, sel) {
-    }
-}
-AdjacencyGraph.prototype._class += " graph_AdjacencyGraph";
-
-export interface AdjacencyGraph {
-    uidColumn(): string;
-    uidColumn(_: string): this;
-    labelColumn(): string;
-    labelColumn(_: string): this;
-    iconColumn(): string;
-    iconColumn(_: string): this;
-    linksColumn(): string;
-    linksColumn(_: string): this;
-    linkUidColumn(): string;
-    linkUidColumn(_: string): this;
-    linkLabelColumn(): string;
-    linkLabelColumn(_: string): this;
-    annotations(): Annotation[];
-    annotations(_: Annotation[]): this;
-}
-AdjacencyGraph.prototype.publish("uidColumn", "", "set", "UID column", function (this: AdjacencyGraph) { return this.columns(); }, { optional: true });
-AdjacencyGraph.prototype.publish("labelColumn", "", "set", "Label column", function (this: AdjacencyGraph) { return this.columns(); }, { optional: true });
-AdjacencyGraph.prototype.publish("iconColumn", "", "set", "Icon column", function (this: AdjacencyGraph) { return this.columns(); }, { optional: true });
-AdjacencyGraph.prototype.publish("linksColumn", "", "set", "Links column", function (this: AdjacencyGraph) { return this.columns(); }, { optional: true });
-AdjacencyGraph.prototype.publish("linkUidColumn", "", "set", "Link UID column", function (this: AdjacencyGraph) { return this.linksColumns(); }, { optional: true });
-AdjacencyGraph.prototype.publish("linkLabelColumn", "", "set", "Link Label column", function (this: AdjacencyGraph) { return this.linksColumns(); }, { optional: true });
-AdjacencyGraph.prototype.publish("annotations", [], "propertyArray", "Annotations", null, { autoExpand: Annotation });
+import { PropertyExt } from "@hpcc-js/common";
+import { hashSum } from "@hpcc-js/util";
+import { Edge } from "./Edge.ts";
+import { Graph, IGraphData } from "./Graph.ts";
+import { IAnnotation, Vertex } from "./Vertex.ts";
+
+interface IAnnotationIndexes {
+    iconCol: number;
+    iconFillCol: number;
+    tooltipCol: number;
+    shapeStrokeCol: number;
+    shapeFillCol: number;
+}
+
+export class Annotation extends PropertyExt {
+    protected _owner: AdjacencyGraph;
+
+    owner(): AdjacencyGraph;
+    owner(_: AdjacencyGraph): this;
+    owner(_?: AdjacencyGraph): AdjacencyGraph | this {
+        if (!arguments.length) return this._owner;
+        this._owner = _;
+        return this;
+    }
+
+    valid(): boolean {
+        return !!this.iconColumn();
+    }
+
+    indexes(): IAnnotationIndexes {
+        const columns = this._owner.columns();
+        return {
+            iconCol: columns.indexOf(this.iconColumn()),
+            iconFillCol: columns.indexOf(this.iconFillColumn()),
+            tooltipCol: columns.indexOf(this.tooltipColumn()),
+            shapeStrokeCol: columns.indexOf(this.shapeStrokeColumn()),
+            shapeFillCol: columns.indexOf(this.shapeFillColumn())
+        };
+    }
+
+    mapper(): (row) => IAnnotation {
+        const indexes = this.indexes();
+        return (row) => ({
+            faChar: row[indexes.iconCol],
+            tooltip: row[indexes.tooltipCol],
+            shape_colorFill: row[indexes.shapeFillCol] || this.shapeFillDefault(),
+            shape_colorStroke: row[indexes.shapeStrokeCol] || this.shapeStrokeDefault(),
+            image_colorFill: row[indexes.iconFillCol] || this.iconFillDefault()
+        });
+    }
+}
+Annotation.prototype._class += " graph_Annotation";
+export interface Annotation {
+    iconColumn(): string;
+    iconColumn(_: string): this;
+    iconFillDefault(): string;
+    iconFillDefault(_: string): this;
+    iconFillColumn(): string;
+    iconFillColumn(_: string): this;
+    tooltipColumn(): string;
+    tooltipColumn(_: string): this;
+    shapeStrokeDefault(): string;
+    shapeStrokeDefault(_: string): this;
+    shapeStrokeColumn(): string;
+    shapeStrokeColumn(_: string): this;
+    shapeFillDefault(): string;
+    shapeFillDefault(_: string): this;
+    shapeFillColumn(): string;
+    shapeFillColumn(_: string): this;
+}
+Annotation.prototype.publish("iconColumn", "", "set", "Icon column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
+Annotation.prototype.publish("iconFillDefault", "white", "html-color", "Icon fill default color");
+Annotation.prototype.publish("iconFillColumn", "", "set", "Icon fill color column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
+Annotation.prototype.publish("tooltipColumn", "", "set", "Tooltip column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
+Annotation.prototype.publish("shapeStrokeDefault", "darkred", "html-color", "Shape stroke default color");
+Annotation.prototype.publish("shapeStrokeColumn", "", "set", "Shape stroke color column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
+Annotation.prototype.publish("shapeFillDefault", "red", "html-color", "Shape fill default color");
+Annotation.prototype.publish("shapeFillColumn", "", "set", "Shape fill color column", function (this: Annotation) { return this._owner.columns(); }, { optional: true });
+
+export class AdjacencyGraph extends Graph {
+
+    private _vertexMap: { [key: string]: Vertex } = {};
+    private _edgeMap: { [key: string]: Edge } = {};
+    private _prevAdjacencyDataHash: string;
+    private _merge: boolean = false;
+    private _adjacencyData: object[] = [];
+
+    constructor() {
+        super();
+    }
+
+    linksColumns(): string[] {
+        const linksCol: number = this.columns().indexOf(this.linksColumn());
+        const linksField = this._db.field(linksCol);
+        if (linksField) {
+            return linksField.children().map(field => field.label());
+        }
+        return [];
+    }
+
+    validAnnotations() {
+        return this.annotations().filter(a => a.valid());
+    }
+
+    updateData() {
+        const prevAdjacencyDataHash = hashSum([this._adjacencyData, this.uidColumn(), this.labelColumn(), this.iconColumn(), this.linksColumn(), this.linkUidColumn(), this.linkLabelColumn(), this.validAnnotations().map(a => a.hashSum())]);
+        if (this._prevAdjacencyDataHash !== prevAdjacencyDataHash) {
+            this._prevAdjacencyDataHash = prevAdjacencyDataHash;
+
+            const columns = this.columns();
+            const uidCol: number = columns.indexOf(this.uidColumn());
+            const labelCol: number = columns.indexOf(this.labelColumn());
+            const iconCol: number = columns.indexOf(this.iconColumn());
+            const linksCol: number = columns.indexOf(this.linksColumn());
+
+            const linksColumns = this.linksColumns();
+            const linksUidCol: number = linksColumns.indexOf(this.linkUidColumn());
+            const linksLabelCol: number = linksColumns.indexOf(this.linkLabelColumn());
+
+            const annotationMappers = this.validAnnotations().map(a => a.mapper());
+
+            const vertexMap: { [key: string]: Vertex } = {};
+            const edgeMap: { [key: string]: Edge } = {};
+            const graphData: IGraphData = {
+                vertices: this._adjacencyData.map(row => {
+                    const uid = row[uidCol];
+                    if (uid !== undefined) {
+                        let retVal = vertexMap[uid] || this._vertexMap[uid];
+                        if (!retVal) {
+                            retVal = new Vertex();
+                        }
+                        vertexMap[uid] = retVal;
+
+                        retVal
+                            .text(row[labelCol])
+                            .data(row)
+                            .faChar(row[iconCol])
+                            .annotationIcons(annotationMappers.map(am => am(row)))
+                            ;
+
+                        return retVal;
+                    }
+                }).filter(v => !!v),
+                edges: []
+            };
+            for (const row of this._adjacencyData) {
+                const uid = row[uidCol];
+                const links = row[linksCol];
+                if (uid !== undefined && links !== undefined) {
+                    for (const childRow of links) {
+                        const linkUid = childRow[linksUidCol];
+                        const linkLabel = childRow[linksLabelCol];
+                        const edgeID = `${uid}->${linkUid}`;
+                        let retVal = edgeMap[edgeID] || this._edgeMap[edgeID];
+                        if (!retVal) {
+                            if (vertexMap[uid] && vertexMap[linkUid]) {
+                                retVal = new Edge()
+                                    .sourceVertex(vertexMap[uid])
+                                    .targetVertex(vertexMap[linkUid])
+                                    .data(childRow)
+                                    ;
+                            } else {
+                                console.warn("Missing vertices for edge:  " + edgeID);
+                            }
+                        }
+                        if (retVal) {
+                            retVal.text(linkLabel);
+                            edgeMap[edgeID] = retVal;
+                            graphData.edges.push(retVal);
+                        }
+                    }
+                }
+            }
+            this._vertexMap = vertexMap;
+            this._edgeMap = edgeMap;
+            super.data(graphData, this._merge);
+        }
+    }
+
+    data(): IGraphData;
+    data(_: IGraphData, merge?: boolean): this;
+    data(_?: IGraphData | object[], merge?: boolean): IGraphData | object[] | this {
+        if (!arguments.length) return this._adjacencyData;
+        if (_ instanceof Array) {
+            this._merge = merge;
+            this._adjacencyData = _;
+            return this;
+        }
+        throw new Error("Invalid data shape.");
+    }
+
+    update(domNode, element) {
+        this.updateData();
+        super.update(domNode, element);
+    }
+
+    click(row, col, sel) {
+    }
+}
+AdjacencyGraph.prototype._class += " graph_AdjacencyGraph";
+
+export interface AdjacencyGraph {
+    uidColumn(): string;
+    uidColumn(_: string): this;
+    labelColumn(): string;
+    labelColumn(_: string): this;
+    iconColumn(): string;
+    iconColumn(_: string): this;
+    linksColumn(): string;
+    linksColumn(_: string): this;
+    linkUidColumn(): string;
+    linkUidColumn(_: string): this;
+    linkLabelColumn(): string;
+    linkLabelColumn(_: string): this;
+    annotations(): Annotation[];
+    annotations(_: Annotation[]): this;
+}
+AdjacencyGraph.prototype.publish("uidColumn", "", "set", "UID column", function (this: AdjacencyGraph) { return this.columns(); }, { optional: true });
+AdjacencyGraph.prototype.publish("labelColumn", "", "set", "Label column", function (this: AdjacencyGraph) { return this.columns(); }, { optional: true });
+AdjacencyGraph.prototype.publish("iconColumn", "", "set", "Icon column", function (this: AdjacencyGraph) { return this.columns(); }, { optional: true });
+AdjacencyGraph.prototype.publish("linksColumn", "", "set", "Links column", function (this: AdjacencyGraph) { return this.columns(); }, { optional: true });
+AdjacencyGraph.prototype.publish("linkUidColumn", "", "set", "Link UID column", function (this: AdjacencyGraph) { return this.linksColumns(); }, { optional: true });
+AdjacencyGraph.prototype.publish("linkLabelColumn", "", "set", "Link Label column", function (this: AdjacencyGraph) { return this.linksColumns(); }, { optional: true });
+AdjacencyGraph.prototype.publish("annotations", [], "propertyArray", "Annotations", null, { autoExpand: Annotation });

package/src/Edge.css

@@ -1,23 +1,23 @@
-.graph_Edge {
-    fill: none;
-    stroke: #656565;
-    stroke-width: 1.0px;
-}
-
-.graph_Edge .common_TextBox .common_Text {
-    fill: black;
-    stroke: none;
-}
-
-.graph_Edge .common_TextBox .common_Shape {
-    fill: white;
-    stroke: none;
-}
-
-.graph_Edge.selected {
-    stroke: red !important;
-}
-
-.graph_Edge.selected .common_Text {
-    fill: red !important;
+.graph_Edge {
+    fill: none;
+    stroke: #656565;
+    stroke-width: 1.0px;
+}
+
+.graph_Edge .common_TextBox .common_Text {
+    fill: black;
+    stroke: none;
+}
+
+.graph_Edge .common_TextBox .common_Shape {
+    fill: white;
+    stroke: none;
+}
+
+.graph_Edge.selected {
+    stroke: red !important;
+}
+
+.graph_Edge.selected .common_Text {
+    fill: red !important;
 }