feat: Add lit-html enabled graph

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
hpcc-systems · Jan 28, 2025 · 8e7b6f2 · 8e7b6f2
1 parent 81d2379
commit 8e7b6f2
Show file tree

Hide file tree

Showing 62 changed files with 1,185 additions and 362 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/comms/package.json b/packages/comms/package.json
@@ -7,7 +7,10 @@
     "module": "./dist/index.browser.js",
     "exports": {
         ".": {
-            "types": "./types/index.browser.d.ts",
+            "types": {
+                "node": "./types/index.node.d.ts",
+                "default": "./types/index.browser.d.ts"
+            },
             "node": "./dist/index.node.js",
             "import": "./dist/index.browser.js",
             "require": "./dist/index.browser.umd.cjs"

diff --git a/packages/graph/index.html b/packages/graph/index.html
@@ -17,6 +17,7 @@
         }
 
         #placeholder,
+        #placeholder1,
         #placeholder2 {
             width: 100%;
             height: 500px;
@@ -29,6 +30,11 @@
 </head>
 
 <body onresize="doResize()">
+    <h1>ESM Quick Test</h1>
+    <div id="placeholder1"></div>
+    <script type="module">
+        import "./tests/index.ts";
+    </script>
     <h1>ESM Quick Test</h1>
     <div id="placeholder2"></div>
     <script type="module">
@@ -120,6 +126,42 @@ <h1>ESM Quick Test</h1>
             .render()
             ;
     </script>
+    <div id="placeholder"></div>
+    <script type="module">
+        import { SankeyGraph } from "./src/index.ts";
+
+        import "@hpcc-js/common/font-awesome/css/font-awesome.min.css";
+
+        new SankeyGraph()
+            .target("placeholder")
+            .vertexColumns(["category", "id", "label"])
+            .vertices([
+                [0, 0, "Year 1"],
+                [0, 1, "Year 2"],
+                [0, 2, "Year 3"],
+                [0, 3, "Year 4"],
+                [1, 4, "Math"],
+                [1, 5, "English"],
+                [1, 6, "Geometry"],
+                [1, 7, "Science"],
+            ])
+            .edgeColumns(["source", "target", "weight"])
+            .edges([
+                [0, 4, 1],
+                [1, 4, 1],
+                [2, 4, 1],
+                [3, 4, 1],
+                [0, 5, 1],
+                [1, 5, 1],
+                [2, 6, 1],
+                [3, 6, 1],
+                [1, 7, 1],
+                [2, 7, 1],
+                [3, 7, 1],
+            ])
+            .render()
+            ;
+    </script>
     <script>
         function doResize() {
             window.__widget?.resize()?.render();

diff --git a/packages/graph/package.json b/packages/graph/package.json
@@ -56,7 +56,8 @@
         "d3-shape": "^1",
         "d3-tile": "^1",
         "d3-transition": "^1",
-        "dagre": "0.8.5"
+        "dagre": "0.8.5",
+        "lit-html": "3.2.1"
     },
     "peerDependencies": {},
     "repository": {

diff --git a/packages/graph/src/__tests__/test5.ts b/packages/graph/src/__tests__/test5.ts
@@ -1,5 +1,5 @@
 import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
-import { Graph2 } from "../graph2/graph";
+import { GraphReact } from "../react/graphReact.ts";
 
 const VERTEX_ARR = [{
     id: 0,

diff --git a/packages/graph/src/common/graphT.css b/packages/graph/src/common/graphT.css
@@ -0,0 +1,33 @@
+.graph_GraphT .graphVertex {
+    cursor: pointer;
+}
+
+.graph_GraphT .allowDragging .graphVertex {
+    cursor: pointer;
+}
+
+.graph_GraphT .allowDragging .graphVertex.grabbed {
+    cursor: grabbing;
+}
+
+.graph_GraphT .graphEdge {
+    stroke: darkgray;
+    fill: none;
+}
+
+.graph_GraphT .graphEdge>text {
+    stroke: none;
+    fill: black;
+}
+
+.graph_GraphT .graphEdge.hide-text>text {
+    display: none;
+}
+
+.graph_GraphT g.selected rect {
+    stroke: navy !important;
+}
+
+.graph_GraphT g.selected circle {
+    stroke: navy !important;
+}
diff --git a/packages/graph/src/graph2/graphT.ts → packages/graph/src/common/graphT.ts b/packages/graph/src/graph2/graphT.ts → packages/graph/src/common/graphT.ts
@@ -12,7 +12,7 @@ import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder, isEdgePlacehol
 import { Engine, graphviz as gvWorker } from "./layouts/graphvizWorker.ts";
 import { Tree, RadialTree, Dendrogram, RadialDendrogram } from "./layouts/tree.ts";
 
-import "../../src/graph2/graph.css";
+import "./graphT.css";
 
 let scriptDir = (globalThis?.document?.currentScript as HTMLScriptElement)?.src ?? "./dummy.js";
 scriptDir = scriptDir.substring(0, scriptDir.replace(/[?#].*/, "").lastIndexOf("/") + 1);
@@ -121,6 +121,8 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
         ];
         this._iconBar.buttons(buttons.concat(this._iconBar.buttons()));
 
+        this.selectionGlowColor("navy");
+
         this._dragHandler
             .on("start", function (d) {
                 if (context.allowDragging()) {
@@ -1036,6 +1038,9 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
         super.update(domNode, element);
 
         this._renderElement.classed("allowDragging", this.allowDragging());
+        if (this._centroidFilter) {
+            this._centroidFilter.update(this.selectionGlowColor());
+        }
 
         this.updateCategories();
         this.updateAnnotations();

diff --git a/packages/graph/src/common/index.ts b/packages/graph/src/common/index.ts
@@ -0,0 +1,3 @@
+export * from "../react/dataGraph.ts";
+export * from "./graphT.ts";
+export * from "./sankeyGraph.ts";
diff --git a/packages/graph/src/graph2/layouts/circle.ts → packages/graph/src/common/layouts/circle.ts b/packages/graph/src/graph2/layouts/circle.ts → packages/graph/src/common/layouts/circle.ts
diff --git a/packages/graph/src/graph2/layouts/dagre.ts → packages/graph/src/common/layouts/dagre.ts b/packages/graph/src/graph2/layouts/dagre.ts → packages/graph/src/common/layouts/dagre.ts
diff --git a/...s/graph/src/graph2/layouts/dagreWorker.ts → ...s/graph/src/common/layouts/dagreWorker.ts b/...s/graph/src/graph2/layouts/dagreWorker.ts → ...s/graph/src/common/layouts/dagreWorker.ts
diff --git a/...graph/src/graph2/layouts/forceDirected.ts → ...graph/src/common/layouts/forceDirected.ts b/...graph/src/graph2/layouts/forceDirected.ts → ...graph/src/common/layouts/forceDirected.ts
diff --git a/...src/graph2/layouts/forceDirectedWorker.ts → ...src/common/layouts/forceDirectedWorker.ts b/...src/graph2/layouts/forceDirectedWorker.ts → ...src/common/layouts/forceDirectedWorker.ts
diff --git a/...ph/src/graph2/layouts/geoForceDirected.ts → ...ph/src/common/layouts/geoForceDirected.ts b/...ph/src/graph2/layouts/geoForceDirected.ts → ...ph/src/common/layouts/geoForceDirected.ts
diff --git a/...ages/graph/src/graph2/layouts/graphviz.ts → ...ages/graph/src/common/layouts/graphviz.ts b/...ages/graph/src/graph2/layouts/graphviz.ts → ...ages/graph/src/common/layouts/graphviz.ts
diff --git a/...raph/src/graph2/layouts/graphvizWorker.ts → ...raph/src/common/layouts/graphvizWorker.ts b/...raph/src/graph2/layouts/graphvizWorker.ts → ...raph/src/common/layouts/graphvizWorker.ts
diff --git a/packages/graph/src/graph2/layouts/index.ts → packages/graph/src/common/layouts/index.ts b/packages/graph/src/graph2/layouts/index.ts → packages/graph/src/common/layouts/index.ts
diff --git a/packages/graph/src/graph2/layouts/layout.ts → packages/graph/src/common/layouts/layout.ts b/packages/graph/src/graph2/layouts/layout.ts → packages/graph/src/common/layouts/layout.ts
diff --git a/packages/graph/src/graph2/layouts/null.ts → packages/graph/src/common/layouts/null.ts b/packages/graph/src/graph2/layouts/null.ts → packages/graph/src/common/layouts/null.ts
diff --git a/.../graph/src/graph2/layouts/placeholders.ts → .../graph/src/common/layouts/placeholders.ts b/.../graph/src/graph2/layouts/placeholders.ts → .../graph/src/common/layouts/placeholders.ts
@@ -31,6 +31,7 @@ export interface EdgeBaseProps<V extends VertexBaseProps = VertexBaseProps> exte
     strokeDasharray?: string;
     strokeWidth?: number;
     stroke?: string;
+    path?: string;
     fontFamily?: string;
 }
 

diff --git a/packages/graph/src/graph2/layouts/tree.ts → packages/graph/src/common/layouts/tree.ts b/packages/graph/src/graph2/layouts/tree.ts → packages/graph/src/common/layouts/tree.ts
diff --git a/...graph/src/graph2/layouts/workers/dagre.ts → ...graph/src/common/layouts/workers/dagre.ts b/...graph/src/graph2/layouts/workers/dagre.ts → ...graph/src/common/layouts/workers/dagre.ts
diff --git a/...rc/graph2/layouts/workers/dagreOptions.ts → ...rc/common/layouts/workers/dagreOptions.ts b/...rc/graph2/layouts/workers/dagreOptions.ts → ...rc/common/layouts/workers/dagreOptions.ts
diff --git a/...c/graph2/layouts/workers/forceDirected.ts → ...c/common/layouts/workers/forceDirected.ts b/...c/graph2/layouts/workers/forceDirected.ts → ...c/common/layouts/workers/forceDirected.ts
diff --git a/...2/layouts/workers/forceDirectedOptions.ts → ...n/layouts/workers/forceDirectedOptions.ts b/...2/layouts/workers/forceDirectedOptions.ts → ...n/layouts/workers/forceDirectedOptions.ts
diff --git a/...ph/src/graph2/layouts/workers/graphviz.ts → ...ph/src/common/layouts/workers/graphviz.ts b/...ph/src/graph2/layouts/workers/graphviz.ts → ...ph/src/common/layouts/workers/graphviz.ts
diff --git a/...graph2/layouts/workers/graphvizOptions.ts → ...common/layouts/workers/graphvizOptions.ts b/...graph2/layouts/workers/graphvizOptions.ts → ...common/layouts/workers/graphvizOptions.ts
diff --git a/packages/graph/src/graph2/liteMap.ts → packages/graph/src/common/liteMap.ts b/packages/graph/src/graph2/liteMap.ts → packages/graph/src/common/liteMap.ts
diff --git a/packages/graph/src/graph2/liteSVGZooom.ts → packages/graph/src/common/liteSVGZooom.ts b/packages/graph/src/graph2/liteSVGZooom.ts → packages/graph/src/common/liteSVGZooom.ts
diff --git a/packages/graph/src/graph2/sankeyGraph.css → packages/graph/src/common/sankeyGraph.css b/packages/graph/src/graph2/sankeyGraph.css → packages/graph/src/common/sankeyGraph.css
diff --git a/packages/graph/src/graph2/sankeyGraph.ts → packages/graph/src/common/sankeyGraph.ts b/packages/graph/src/graph2/sankeyGraph.ts → packages/graph/src/common/sankeyGraph.ts
@@ -1,9 +1,9 @@
 import { Palette, SVGWidget, Utility, select as d3Select } from "@hpcc-js/common";
 import { compare2 } from "@hpcc-js/util";
 import { sankey as d3Sankey, sankeyLinkHorizontal as d3SankeyLinkHorizontal } from "d3-sankey";
-import { AnnotationColumn, toJsonObj } from "./dataGraph.ts";
+import { AnnotationColumn, toJsonObj } from "../react/dataGraph.ts";
 
-import "../../src/graph2/sankeyGraph.css";
+import "./sankeyGraph.css";
 import { EdgeBaseProps, VertexBaseProps } from "./graphT.ts";
 
 export class SankeyGraph extends SVGWidget {

diff --git a/packages/graph/src/graph2/graph.css b/packages/graph/src/graph2/graph.css
diff --git a/packages/graph/src/graph2/index.ts b/packages/graph/src/graph2/index.ts
diff --git a/packages/graph/src/html/GraphHtml.ts b/packages/graph/src/html/GraphHtml.ts
@@ -0,0 +1,9 @@
+import { GraphHtmlT, SubgraphBaseProps, EdgeBaseProps } from "./graphHtmlT.ts";
+import { HtmlVertex, HtmlVertexProps } from "./vertex.ts";
+
+export class GraphHtml extends GraphHtmlT<SubgraphBaseProps, HtmlVertexProps, EdgeBaseProps> {
+    constructor() {
+        super(undefined, HtmlVertex);
+    }
+}
+GraphHtml.prototype._class += " graph_GraphHtml";
diff --git a/packages/graph/src/html/annotation.ts b/packages/graph/src/html/annotation.ts
@@ -0,0 +1,70 @@
+import { svg } from "lit-html";
+import { Palette, Utility } from "@hpcc-js/common";
+import { extend } from "./component.ts";
+import { TextBox } from "./textBox.ts";
+
+export interface HtmlAnnotationProps {
+    text: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fill?: string;
+    stroke?: string;
+}
+
+export const HtmlAnnotation = ({
+    text,
+    fontFamily = "FontAwesome",
+    fontSize = 8,
+    fill = "gray",
+    stroke = "darkgray"
+}: HtmlAnnotationProps) => {
+    const renderChar = fontFamily === "FontAwesome" ? Utility.faChar(text) : text;
+    const textBoxTpl = TextBox({
+        text: {
+            text: renderChar,
+            fill: Palette.textColor(fill),
+            fontFamily,
+            fontSize,
+            dominantBaseline: fontFamily === "FontAwesome" ? "ideographic" : undefined
+        },
+        padding: 3,
+        fill,
+        stroke
+    });
+    return extend(svg`\
+ <g data-click="annotation" data-click-data=${JSON.stringify({ text, fill, fontFamily, fontSize, stroke })}>
+    ${textBoxTpl}
+</g>`, textBoxTpl.extent.width, textBoxTpl.extent.height);
+};
+
+export interface AnnotationsProps {
+    annotations: HtmlAnnotationProps[];
+    padding?: number;
+}
+
+export const Annotations = ({
+    annotations,
+    padding = 3,
+}: AnnotationsProps) => {
+    let xOffset = 0;
+    const items = annotations.map(annotationProp => {
+        const annotation = HtmlAnnotation(annotationProp);
+        const itemSvg = extend(svg`\
+<g transform="translate(${xOffset + annotation.extent.width / 2} 0)">
+    ${annotation}
+</g>`, annotation.extent.width, annotation.extent.height);
+        xOffset += annotation.extent.width + padding;
+        return itemSvg;
+    });
+    const { width, height } = items.reduce((acc, item) => {
+        return {
+            width: acc.width + item.extent.width,
+            height: Math.max(acc.height, item.extent.height)
+        };
+    }, { width: (items.length - 1) * padding, height: 0 });
+    return extend(svg`\
+<g transform="translate(${-width / 2} 0)">
+    ${items}
+</g>`, width, height);
+};
+
diff --git a/packages/graph/src/html/component.ts b/packages/graph/src/html/component.ts
@@ -0,0 +1,14 @@
+import type { HTMLTemplateResult, SVGTemplateResult } from "lit-html";
+
+export type TemplateResult = HTMLTemplateResult | SVGTemplateResult;
+export type TemplateResultEx = TemplateResult & {
+    extent?: { width: number, height: number };
+};
+export function extend(result: TemplateResult, width: number, height: number): TemplateResultEx {
+    return {
+        ...result,
+        extent: { width, height }
+    };
+}
+export type Component<T> = (props: T) => TemplateResult;
+