From 8e7b6f2ccd2ffec5e336b6739056f5470a8b33e2 Mon Sep 17 00:00:00 2001
From: Gordon Smith <GordonJSmith@gmail.com>
Date: Thu, 23 Jan 2025 15:57:56 +0000
Subject: [PATCH] feat: Add lit-html enabled graph

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
---
 package-lock.json                             |  27 ++-
 packages/comms/package.json                   |   5 +-
 packages/graph/index.html                     |  42 ++++
 packages/graph/package.json                   |   3 +-
 packages/graph/src/__tests__/test5.ts         |   2 +-
 packages/graph/src/common/graphT.css          |  33 +++
 .../graph/src/{graph2 => common}/graphT.ts    |   7 +-
 packages/graph/src/common/index.ts            |   3 +
 .../src/{graph2 => common}/layouts/circle.ts  |   0
 .../src/{graph2 => common}/layouts/dagre.ts   |   0
 .../{graph2 => common}/layouts/dagreWorker.ts |   0
 .../layouts/forceDirected.ts                  |   0
 .../layouts/forceDirectedWorker.ts            |   0
 .../layouts/geoForceDirected.ts               |   0
 .../{graph2 => common}/layouts/graphviz.ts    |   0
 .../layouts/graphvizWorker.ts                 |   0
 .../src/{graph2 => common}/layouts/index.ts   |   0
 .../src/{graph2 => common}/layouts/layout.ts  |   0
 .../src/{graph2 => common}/layouts/null.ts    |   0
 .../layouts/placeholders.ts                   |   1 +
 .../src/{graph2 => common}/layouts/tree.ts    |   0
 .../layouts/workers/dagre.ts                  |   0
 .../layouts/workers/dagreOptions.ts           |   0
 .../layouts/workers/forceDirected.ts          |   0
 .../layouts/workers/forceDirectedOptions.ts   |   0
 .../layouts/workers/graphviz.ts               |   0
 .../layouts/workers/graphvizOptions.ts        |   0
 .../graph/src/{graph2 => common}/liteMap.ts   |   0
 .../src/{graph2 => common}/liteSVGZooom.ts    |   0
 .../src/{graph2 => common}/sankeyGraph.css    |   0
 .../src/{graph2 => common}/sankeyGraph.ts     |   4 +-
 packages/graph/src/graph2/graph.css           |  34 ---
 packages/graph/src/graph2/index.ts            |   7 -
 packages/graph/src/html/GraphHtml.ts          |   9 +
 packages/graph/src/html/annotation.ts         |  70 ++++++
 packages/graph/src/html/component.ts          |  14 ++
 packages/graph/src/html/graphHtmlT.ts         |  45 ++++
 packages/graph/src/html/icon.ts               |  75 ++++++
 packages/graph/src/html/image.ts              |  26 +++
 packages/graph/src/html/imageChar.ts          |  18 ++
 packages/graph/src/html/index.ts              |   8 +
 packages/graph/src/html/shape.ts              | 140 +++++++++++
 packages/graph/src/html/text.ts               |  80 +++++++
 packages/graph/src/html/textBox.ts            |  41 ++++
 packages/graph/src/html/vertex.ts             |  65 ++++++
 packages/graph/src/index.ts                   |   4 +-
 .../graph/src/{graph2 => react}/dataGraph.ts  |  22 +-
 .../{graph2/graph.ts => react/graphReact.ts}  |  41 ++--
 .../src/{graph2 => react}/graphReactT.ts      |   2 +-
 packages/graph/src/react/index.ts             |   4 +
 .../graph/src/{graph2 => react}/subgraph.tsx  |   2 +-
 .../graph/src/{graph2 => react}/vertex.tsx    |   2 +-
 packages/graph/{src/test.ts => tests/data.ts} | 217 +-----------------
 packages/graph/tests/graph.browser.spec.ts    |  33 ++-
 packages/graph/tests/index.ts                 |  92 ++++++++
 packages/graph/tests/test1.ts                 |  18 ++
 packages/graph/tests/test2.ts                 |  80 +++++++
 packages/graph/tests/test3.ts                 |  46 ++++
 packages/graph/tests/test4.ts                 |  66 ++++++
 packages/graph/tests/test5.ts                 |  86 +++++++
 packages/graph/util/wrapWorker.js             |   2 +-
 vitest.workspace.ts                           |  71 +-----
 62 files changed, 1185 insertions(+), 362 deletions(-)
 create mode 100644 packages/graph/src/common/graphT.css
 rename packages/graph/src/{graph2 => common}/graphT.ts (99%)
 create mode 100644 packages/graph/src/common/index.ts
 rename packages/graph/src/{graph2 => common}/layouts/circle.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/dagre.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/dagreWorker.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/forceDirected.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/forceDirectedWorker.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/geoForceDirected.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/graphviz.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/graphvizWorker.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/index.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/layout.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/null.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/placeholders.ts (99%)
 rename packages/graph/src/{graph2 => common}/layouts/tree.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/workers/dagre.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/workers/dagreOptions.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/workers/forceDirected.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/workers/forceDirectedOptions.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/workers/graphviz.ts (100%)
 rename packages/graph/src/{graph2 => common}/layouts/workers/graphvizOptions.ts (100%)
 rename packages/graph/src/{graph2 => common}/liteMap.ts (100%)
 rename packages/graph/src/{graph2 => common}/liteSVGZooom.ts (100%)
 rename packages/graph/src/{graph2 => common}/sankeyGraph.css (100%)
 rename packages/graph/src/{graph2 => common}/sankeyGraph.ts (99%)
 delete mode 100644 packages/graph/src/graph2/graph.css
 delete mode 100644 packages/graph/src/graph2/index.ts
 create mode 100644 packages/graph/src/html/GraphHtml.ts
 create mode 100644 packages/graph/src/html/annotation.ts
 create mode 100644 packages/graph/src/html/component.ts
 create mode 100644 packages/graph/src/html/graphHtmlT.ts
 create mode 100644 packages/graph/src/html/icon.ts
 create mode 100644 packages/graph/src/html/image.ts
 create mode 100644 packages/graph/src/html/imageChar.ts
 create mode 100644 packages/graph/src/html/index.ts
 create mode 100644 packages/graph/src/html/shape.ts
 create mode 100644 packages/graph/src/html/text.ts
 create mode 100644 packages/graph/src/html/textBox.ts
 create mode 100644 packages/graph/src/html/vertex.ts
 rename packages/graph/src/{graph2 => react}/dataGraph.ts (97%)
 rename packages/graph/src/{graph2/graph.ts => react/graphReact.ts} (75%)
 rename packages/graph/src/{graph2 => react}/graphReactT.ts (97%)
 create mode 100644 packages/graph/src/react/index.ts
 rename packages/graph/src/{graph2 => react}/subgraph.tsx (92%)
 rename packages/graph/src/{graph2 => react}/vertex.tsx (92%)
 rename packages/graph/{src/test.ts => tests/data.ts} (77%)
 create mode 100644 packages/graph/tests/index.ts
 create mode 100644 packages/graph/tests/test1.ts
 create mode 100644 packages/graph/tests/test2.ts
 create mode 100644 packages/graph/tests/test3.ts
 create mode 100644 packages/graph/tests/test4.ts
 create mode 100644 packages/graph/tests/test5.ts

diff --git a/package-lock.json b/package-lock.json
index 030934050c..028108d669 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6186,6 +6186,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -13669,6 +13676,16 @@
         "uc.micro": "^2.0.0"
       }
     },
+    "node_modules/lit-html": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.1.tgz",
+      "integrity": "sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-6.2.0.tgz",
@@ -20828,7 +20845,6 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@hpcc-js/common": "^3.3.0",
-        "@hpcc-js/dgrid-shim": "^3.1.1",
         "@hpcc-js/util": "^3.3.0"
       },
       "devDependencies": {
@@ -20837,6 +20853,9 @@
         "@testing-library/dom": "10.4.0",
         "d3-format": "^1",
         "d3-selection": "^1"
+      },
+      "peerDependencies": {
+        "@hpcc-js/dgrid-shim": "^3.1.0"
       }
     },
     "packages/dgrid-shim": {
@@ -20865,11 +20884,12 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@hpcc-js/common": "^3.3.0",
-        "@hpcc-js/react": "^3.2.0",
         "@hpcc-js/util": "^3.3.0"
       },
       "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.4.0",
+        "@preact/preset-vite": "2.9.2",
+        "preact": "10.25.0",
         "react-data-grid": "7.0.0-beta.47"
       }
     },
@@ -20949,7 +20969,8 @@
         "d3-shape": "^1",
         "d3-tile": "^1",
         "d3-transition": "^1",
-        "dagre": "0.8.5"
+        "dagre": "0.8.5",
+        "lit-html": "3.2.1"
       }
     },
     "packages/html": {
diff --git a/packages/comms/package.json b/packages/comms/package.json
index 79f819a0e9..e6ca820511 100644
--- 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
index 6e2052755c..3af7cbc4cb 100644
--- 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
index 638c1352ce..aebe51bb85 100644
--- 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
index d9b2f42e2f..7d302689b4 100644
--- 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
new file mode 100644
index 0000000000..d6c8ae8c81
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/packages/graph/src/graph2/graphT.ts b/packages/graph/src/common/graphT.ts
similarity index 99%
rename from packages/graph/src/graph2/graphT.ts
rename to packages/graph/src/common/graphT.ts
index fdf200a9fc..83815f99d8 100644
--- a/packages/graph/src/graph2/graphT.ts
+++ b/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
new file mode 100644
index 0000000000..acafa4353b
--- /dev/null
+++ 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 b/packages/graph/src/common/layouts/circle.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/circle.ts
rename to packages/graph/src/common/layouts/circle.ts
diff --git a/packages/graph/src/graph2/layouts/dagre.ts b/packages/graph/src/common/layouts/dagre.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/dagre.ts
rename to packages/graph/src/common/layouts/dagre.ts
diff --git a/packages/graph/src/graph2/layouts/dagreWorker.ts b/packages/graph/src/common/layouts/dagreWorker.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/dagreWorker.ts
rename to packages/graph/src/common/layouts/dagreWorker.ts
diff --git a/packages/graph/src/graph2/layouts/forceDirected.ts b/packages/graph/src/common/layouts/forceDirected.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/forceDirected.ts
rename to packages/graph/src/common/layouts/forceDirected.ts
diff --git a/packages/graph/src/graph2/layouts/forceDirectedWorker.ts b/packages/graph/src/common/layouts/forceDirectedWorker.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/forceDirectedWorker.ts
rename to packages/graph/src/common/layouts/forceDirectedWorker.ts
diff --git a/packages/graph/src/graph2/layouts/geoForceDirected.ts b/packages/graph/src/common/layouts/geoForceDirected.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/geoForceDirected.ts
rename to packages/graph/src/common/layouts/geoForceDirected.ts
diff --git a/packages/graph/src/graph2/layouts/graphviz.ts b/packages/graph/src/common/layouts/graphviz.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/graphviz.ts
rename to packages/graph/src/common/layouts/graphviz.ts
diff --git a/packages/graph/src/graph2/layouts/graphvizWorker.ts b/packages/graph/src/common/layouts/graphvizWorker.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/graphvizWorker.ts
rename to packages/graph/src/common/layouts/graphvizWorker.ts
diff --git a/packages/graph/src/graph2/layouts/index.ts b/packages/graph/src/common/layouts/index.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/index.ts
rename to packages/graph/src/common/layouts/index.ts
diff --git a/packages/graph/src/graph2/layouts/layout.ts b/packages/graph/src/common/layouts/layout.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/layout.ts
rename to packages/graph/src/common/layouts/layout.ts
diff --git a/packages/graph/src/graph2/layouts/null.ts b/packages/graph/src/common/layouts/null.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/null.ts
rename to packages/graph/src/common/layouts/null.ts
diff --git a/packages/graph/src/graph2/layouts/placeholders.ts b/packages/graph/src/common/layouts/placeholders.ts
similarity index 99%
rename from packages/graph/src/graph2/layouts/placeholders.ts
rename to packages/graph/src/common/layouts/placeholders.ts
index 3dd3155dff..c1c1585520 100644
--- a/packages/graph/src/graph2/layouts/placeholders.ts
+++ b/packages/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 b/packages/graph/src/common/layouts/tree.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/tree.ts
rename to packages/graph/src/common/layouts/tree.ts
diff --git a/packages/graph/src/graph2/layouts/workers/dagre.ts b/packages/graph/src/common/layouts/workers/dagre.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/workers/dagre.ts
rename to packages/graph/src/common/layouts/workers/dagre.ts
diff --git a/packages/graph/src/graph2/layouts/workers/dagreOptions.ts b/packages/graph/src/common/layouts/workers/dagreOptions.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/workers/dagreOptions.ts
rename to packages/graph/src/common/layouts/workers/dagreOptions.ts
diff --git a/packages/graph/src/graph2/layouts/workers/forceDirected.ts b/packages/graph/src/common/layouts/workers/forceDirected.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/workers/forceDirected.ts
rename to packages/graph/src/common/layouts/workers/forceDirected.ts
diff --git a/packages/graph/src/graph2/layouts/workers/forceDirectedOptions.ts b/packages/graph/src/common/layouts/workers/forceDirectedOptions.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/workers/forceDirectedOptions.ts
rename to packages/graph/src/common/layouts/workers/forceDirectedOptions.ts
diff --git a/packages/graph/src/graph2/layouts/workers/graphviz.ts b/packages/graph/src/common/layouts/workers/graphviz.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/workers/graphviz.ts
rename to packages/graph/src/common/layouts/workers/graphviz.ts
diff --git a/packages/graph/src/graph2/layouts/workers/graphvizOptions.ts b/packages/graph/src/common/layouts/workers/graphvizOptions.ts
similarity index 100%
rename from packages/graph/src/graph2/layouts/workers/graphvizOptions.ts
rename to packages/graph/src/common/layouts/workers/graphvizOptions.ts
diff --git a/packages/graph/src/graph2/liteMap.ts b/packages/graph/src/common/liteMap.ts
similarity index 100%
rename from packages/graph/src/graph2/liteMap.ts
rename to packages/graph/src/common/liteMap.ts
diff --git a/packages/graph/src/graph2/liteSVGZooom.ts b/packages/graph/src/common/liteSVGZooom.ts
similarity index 100%
rename from packages/graph/src/graph2/liteSVGZooom.ts
rename to packages/graph/src/common/liteSVGZooom.ts
diff --git a/packages/graph/src/graph2/sankeyGraph.css b/packages/graph/src/common/sankeyGraph.css
similarity index 100%
rename from packages/graph/src/graph2/sankeyGraph.css
rename to packages/graph/src/common/sankeyGraph.css
diff --git a/packages/graph/src/graph2/sankeyGraph.ts b/packages/graph/src/common/sankeyGraph.ts
similarity index 99%
rename from packages/graph/src/graph2/sankeyGraph.ts
rename to packages/graph/src/common/sankeyGraph.ts
index 585758ece9..15002c8b12 100644
--- a/packages/graph/src/graph2/sankeyGraph.ts
+++ b/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
deleted file mode 100644
index 54335ef770..0000000000
--- a/packages/graph/src/graph2/graph.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.graph_Graph2 .graphVertex {
-    cursor: pointer;
-}
-
-
-.graph_Graph2 .allowDragging .graphVertex {
-    cursor: pointer;
-}
-
-.graph_Graph2 .allowDragging .graphVertex.grabbed {
-    cursor: grabbing;
-}
-
-.graph_Graph2 .graphEdge {
-    stroke: darkgray;
-    fill: none;
-}
-
-.graph_Graph2 .graphEdge > text {
-    stroke: none;
-    fill: black;
-}
-
-.graph_Graph2 .graphEdge.hide-text > text {
-    display: none;
-}
-
-.graph_Graph2 g.selected rect {
-    stroke:red !important;
-}
-
-.graph_Graph2 g.selected circle {
-    stroke:red !important;
-}
diff --git a/packages/graph/src/graph2/index.ts b/packages/graph/src/graph2/index.ts
deleted file mode 100644
index 78fa73c881..0000000000
--- a/packages/graph/src/graph2/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from "./graphT.ts";
-export * from "./graphReactT.ts";
-export * from "./graph.ts";
-export * from "./dataGraph.ts";
-export * from "./sankeyGraph.ts";
-export * from "./subgraph.tsx";
-export * from "./vertex.tsx";
diff --git a/packages/graph/src/html/GraphHtml.ts b/packages/graph/src/html/GraphHtml.ts
new file mode 100644
index 0000000000..be456193a9
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..ed1821b8bc
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..2f212ad7d9
--- /dev/null
+++ 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;
+
diff --git a/packages/graph/src/html/graphHtmlT.ts b/packages/graph/src/html/graphHtmlT.ts
new file mode 100644
index 0000000000..1df6270e28
--- /dev/null
+++ b/packages/graph/src/html/graphHtmlT.ts
@@ -0,0 +1,45 @@
+import { html, svg, render } from "lit-html";
+import type { EdgeBaseProps, SubgraphBaseProps, VertexBaseProps } from "../common/graphT.ts";
+import { GraphT, RendererT } from "../common/graphT.ts";
+import type { Component } from "./component.ts";
+import { TextBox } from "./textBox.ts";
+import { Icon } from "./icon.ts";
+
+export { html, svg, EdgeBaseProps, SubgraphBaseProps, VertexBaseProps };
+
+export function adapter<T>(component: Component<T>): RendererT<T> {
+    return (props: T, element: SVGGElement) => {
+        render(component(props), element as any);
+    };
+}
+
+const defaultSubgraphRenderer = ({
+    text = "",
+}: SubgraphBaseProps) => {
+    return svg`<text font-family="monospace" font-size="10px" text-anchor="middle" dominant-baseline="middle" fill="black">${text}</text>`;
+};
+
+const defaultVertexRenderer = ({
+    text
+}: VertexBaseProps) => {
+
+    return svg`\
+    ${Icon({ imageChar: "" })}
+    ${TextBox({ text: { text } })}
+`;
+};
+
+const defaultEdgeRenderer = ({
+    strokeWidth,
+    path,
+}: EdgeBaseProps<VertexBaseProps>) => {
+    return svg`<path d="${path}" style="stroke-width:${strokeWidth}px"></path>`;
+};
+
+export class GraphHtmlT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends GraphT<SG, V, E> {
+
+    constructor(subgraphRenderer: Component<SG> = defaultSubgraphRenderer, vertexRenderer: Component<V> = defaultVertexRenderer, edgeRenderer: Component<E> = defaultEdgeRenderer) {
+        super(adapter(subgraphRenderer), adapter<V>(vertexRenderer), adapter(edgeRenderer));
+    }
+}
+GraphHtmlT.prototype._class += " graph_GraphHtmlT";
diff --git a/packages/graph/src/html/icon.ts b/packages/graph/src/html/icon.ts
new file mode 100644
index 0000000000..1669454b0d
--- /dev/null
+++ b/packages/graph/src/html/icon.ts
@@ -0,0 +1,75 @@
+import { svg } from "lit-html";
+import { Palette } from "@hpcc-js/common";
+import { Image } from "./image.ts";
+import { ImageChar } from "./imageChar.ts";
+import { Shape } from "./shape.ts";
+import { extend } from "./component.ts";
+
+export interface IconProps {
+    shape?: "circle" | "square" | "rectangle";
+    width?: number;
+    height?: number;
+    padding?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    imageUrl?: string;
+    imageFontFamily?: string;
+    imageChar?: string;
+    imageCharFill?: string;
+    cornerRadius?: number;
+}
+
+export function Icon({
+    shape = "circle",
+    width,
+    height = 32,
+    fill = "transparent",
+    stroke = fill !== "transparent" ? "black" : undefined,
+    strokeWidth = stroke === undefined ? 0 : 1,
+    imageUrl = "",
+    imageFontFamily = "FontAwesome",
+    imageChar = "",
+    imageCharFill = Palette.textColor(fill),
+    padding = height / 5,
+    cornerRadius,
+}: IconProps) {
+    const shapeTpl = Shape({
+        shape,
+        width,
+        height,
+        fill,
+        stroke,
+        strokeWidth,
+        cornerRadius
+    });
+    const imageTpl = imageUrl ?
+        Image({
+            href: imageUrl,
+            height: height - padding * 2
+        }) :
+        ImageChar({
+            text: imageChar,
+            fill: imageCharFill,
+            fontFamily: imageFontFamily,
+            fontSize: height - padding * 2,
+        });
+
+    return extend(svg`\
+<g>
+${shapeTpl}
+${imageTpl}
+</g>`, shapeTpl.extent.width, shapeTpl.extent.height);
+};
+
+export interface IconEx extends IconProps {
+    id: string;
+}
+
+export interface IconsProps {
+    icons: IconEx[];
+}
+
+export const Icons = ({ icons = [] }: IconsProps) => {
+    return icons.map(cat => svg`<g key=${cat.id} id=${cat.id}>${Icon({ ...cat })}</g>`);
+};
diff --git a/packages/graph/src/html/image.ts b/packages/graph/src/html/image.ts
new file mode 100644
index 0000000000..0be8bed26c
--- /dev/null
+++ b/packages/graph/src/html/image.ts
@@ -0,0 +1,26 @@
+import { svg } from "lit-html";
+import { extend } from "./component.ts";
+
+export interface ImageProps {
+    href: string;
+    x?: number;
+    y?: number;
+    height?: number;
+    yOffset?: number;
+}
+
+export const Image = ({
+    href,
+    x = 0,
+    y = 0,
+    height = 12
+}: ImageProps) => {
+    return extend(svg`\
+<image
+    xlink:href=${href}
+    x=${x - height / 2}
+    y=${y - height / 2}
+    width=${height}
+    height=${height}
+></image>`, height, height);
+};
diff --git a/packages/graph/src/html/imageChar.ts b/packages/graph/src/html/imageChar.ts
new file mode 100644
index 0000000000..1010214035
--- /dev/null
+++ b/packages/graph/src/html/imageChar.ts
@@ -0,0 +1,18 @@
+import { Utility } from "@hpcc-js/common";
+import { TextLine, TextLineProps } from "./text.ts";
+
+export const ImageChar = ({
+    text = "",
+    fill,
+    fontFamily = "FontAwesome",
+    fontSize = 12
+}: TextLineProps) => {
+    const renderChar = fontFamily === "FontAwesome" ? Utility.faChar(text) : text;
+    return TextLine({
+        text: renderChar,
+        fill,
+        fontFamily,
+        fontSize,
+        dominantBaseline: fontFamily === "FontAwesome" ? "ideographic" : undefined
+    });
+};
diff --git a/packages/graph/src/html/index.ts b/packages/graph/src/html/index.ts
new file mode 100644
index 0000000000..74d7bb3e88
--- /dev/null
+++ b/packages/graph/src/html/index.ts
@@ -0,0 +1,8 @@
+export * from "./annotation.ts";
+export * from "./graphHtml.ts";
+export * from "./icon.ts";
+export * from "./image.ts";
+export * from "./imageChar.ts";
+export * from "./shape.ts";
+export * from "./text.ts";
+export * from "./vertex.ts";
diff --git a/packages/graph/src/html/shape.ts b/packages/graph/src/html/shape.ts
new file mode 100644
index 0000000000..7448964304
--- /dev/null
+++ b/packages/graph/src/html/shape.ts
@@ -0,0 +1,140 @@
+import { svg } from "lit-html";
+import { extend } from "./component.ts";
+
+export const DEFAULT_SHAPE_SIZE = 32;
+
+interface BaseProps {
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
+}
+
+export interface CircleProps extends BaseProps {
+    diameter?: number;
+}
+export const Circle = ({
+    diameter = DEFAULT_SHAPE_SIZE,
+    fill = "whiteSmoke",
+    stroke = fill,
+    strokeWidth = 1,
+    shapeRendering = "auto"
+}: CircleProps) => {
+    return extend(svg`\
+<circle
+    r=${diameter / 2}
+    fill=${fill}
+    stroke=${stroke}
+    stroke-width=${strokeWidth}
+    shape-rendering=${shapeRendering}
+/>`, diameter, diameter);
+};
+
+export interface SquareProps extends BaseProps {
+    width?: number;
+    cornerRadius?: number;
+}
+
+export const Square = ({
+    width = DEFAULT_SHAPE_SIZE,
+    cornerRadius = 0,
+    fill = "whiteSmoke",
+    stroke = fill,
+    strokeWidth = 1,
+    shapeRendering = "auto"
+}: SquareProps) => {
+    return extend(svg`\
+<rect
+    x=${-width / 2}
+    y=${-width / 2}
+    rx=${cornerRadius}
+    ry=${cornerRadius}
+    width=${width}
+    height=${width}
+    fill=${fill}
+    stroke=${stroke}
+    stroke-width=${strokeWidth}
+    shape-rendering=${shapeRendering}
+/>`, width, width);
+};
+
+export interface RectangleProps extends BaseProps {
+    width: number;
+    height: number;
+    cornerRadius?: number;
+}
+
+export const Rectangle = ({
+    width = DEFAULT_SHAPE_SIZE,
+    height = DEFAULT_SHAPE_SIZE,
+    cornerRadius = 0,
+    fill = "whiteSmoke",
+    stroke = fill,
+    strokeWidth = 1,
+    shapeRendering = "crispEdges"
+}: RectangleProps) => {
+    return extend(svg`\
+<rect
+    x=${-width / 2}
+    y=${-height / 2}
+    rx=${cornerRadius}
+    ry=${cornerRadius}
+    width=${width}
+    height=${height}
+    fill=${fill}
+    stroke=${stroke}
+    stroke-width=${strokeWidth}
+    shape-rendering=${shapeRendering}
+/>`, width, height);
+};
+
+export interface ShapeProps extends BaseProps {
+    shape?: "circle" | "square" | "rectangle";
+    diameter?: number;
+    width?: number;
+    height?: number;
+    cornerRadius?: number;
+}
+
+export const Shape = ({
+    shape = "circle",
+    diameter,
+    width,
+    height,
+    fill,
+    stroke,
+    strokeWidth = 1,
+    shapeRendering = "auto",
+    cornerRadius
+}: ShapeProps) => {
+    switch (shape) {
+        case "square":
+            return Square({
+                width: width ?? height ?? diameter ?? DEFAULT_SHAPE_SIZE,
+                fill,
+                stroke,
+                strokeWidth,
+                shapeRendering,
+                cornerRadius
+            });
+        case "rectangle":
+            return Rectangle({
+                width: width ?? height ?? diameter ?? DEFAULT_SHAPE_SIZE,
+                height: height ?? width ?? diameter ?? DEFAULT_SHAPE_SIZE,
+                fill,
+                stroke,
+                strokeWidth,
+                shapeRendering,
+                cornerRadius
+            });
+        case "circle":
+        default:
+            return Circle({
+                diameter: diameter ?? width ?? height ?? DEFAULT_SHAPE_SIZE,
+                fill,
+                stroke,
+                strokeWidth,
+                shapeRendering
+            });
+    }
+};
diff --git a/packages/graph/src/html/text.ts b/packages/graph/src/html/text.ts
new file mode 100644
index 0000000000..a9e17d55da
--- /dev/null
+++ b/packages/graph/src/html/text.ts
@@ -0,0 +1,80 @@
+import { svg } from "lit-html";
+import { Utility } from "@hpcc-js/common";
+import { extend } from "./component.ts";
+import { Rectangle } from "./shape.ts";
+
+const textSize = ({
+    text,
+    fontFamily = "Verdana",
+    fontSize = 12,
+}: TextProps): Utility.TextSize => {
+    const parts = text.split("\n");
+    return Utility.textSize(parts, fontFamily, fontSize);
+};
+
+export interface TextLineProps {
+    text: string;
+    anchor?: "left" | "middle" | "end";
+    fill?: string;
+    fontFamily?: string;
+    fontSize?: number;
+    dominantBaseline?: string;
+}
+
+export const TextLine = ({
+    text,
+    anchor = "middle",
+    fill = "black",
+    fontFamily = "Verdana",
+    fontSize = 12,
+    dominantBaseline = "middle",
+}: TextLineProps) => {
+    const { width, height } = textSize({ text, fontFamily, fontSize });
+    return extend(svg`\
+<text y=${height / 2} font-family=${fontFamily} font-size=${`${fontSize}px`} text-anchor=${anchor} fill=${fill} dominant-baseline=${dominantBaseline}>
+    ${text}
+</text>`, width, height);
+};
+
+export interface TextProps extends TextLineProps {
+    placeholderSize?: Utility.TextSize;
+}
+
+export const defaultTextProps: Partial<TextProps> = {
+    anchor: "middle",
+    fill: "black",
+    fontSize: 12,
+    fontFamily: "Verdana"
+};
+
+export const Text = ({
+    text,
+    anchor = "middle",
+    fill = "black",
+    fontFamily = "Verdana",
+    fontSize = 12,
+}: TextProps) => {
+    const parts = text.split("\n").map(line => TextLine({ text: line, anchor, fill, fontFamily, fontSize }));
+    const { width, height } = parts.reduce((acc, part) => {
+        return {
+            width: Math.max(acc.width, part.extent.width),
+            height: acc.height + part.extent.height
+        };
+    }, { width: 0, height: 0 });
+
+    let xOffset = 0;
+    if (anchor === "left") {
+        xOffset = -width / 2;
+    } else if (anchor === "end") {
+        xOffset = width / 2;
+    }
+    const lineHeight = height / parts.length;
+    const TextLines = parts.map((p, i) => {
+        return svg`\
+<g key=${`key-${i}`} transform="translate(${xOffset} ${-height / 2 + i * lineHeight})">
+    ${p}
+</g>`;
+    });
+
+    return extend(svg`${TextLines}`, width, height);
+};
diff --git a/packages/graph/src/html/textBox.ts b/packages/graph/src/html/textBox.ts
new file mode 100644
index 0000000000..ce4e4981a4
--- /dev/null
+++ b/packages/graph/src/html/textBox.ts
@@ -0,0 +1,41 @@
+import { svg } from "lit-html";
+import { extend } from "./component.ts";
+import { Rectangle } from "./shape.ts";
+import { Text, TextProps } from "./text.ts";
+
+export interface TextBoxProps {
+    text: TextProps;
+
+    padding?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    cornerRadius?: number;
+    yOffset?: number;
+}
+
+export const TextBox = ({
+    text,
+
+    padding = 4,
+    fill = "whitesmoke",
+    stroke = "lightgray",
+    strokeWidth = 1,
+    cornerRadius = 0,
+}: TextBoxProps) => {
+    const textTpl = Text(text);
+    const { width, height } = textTpl.extent;
+    const rectTpl = Rectangle({
+        width: width + padding * 2,
+        height: height + padding * 2,
+        fill,
+        stroke,
+        strokeWidth,
+        cornerRadius
+    });
+
+    return extend(svg`\
+${rectTpl}
+${textTpl}`, rectTpl.extent.width, rectTpl.extent.height);
+};
+
diff --git a/packages/graph/src/html/vertex.ts b/packages/graph/src/html/vertex.ts
new file mode 100644
index 0000000000..05b0c3d423
--- /dev/null
+++ b/packages/graph/src/html/vertex.ts
@@ -0,0 +1,65 @@
+import { svg } from "lit-html";
+import type { VertexBaseProps } from "../common/layouts/placeholders.ts";
+import { Icon, IconProps } from "./icon.ts";
+import { TextBox, TextBoxProps } from "./textBox.ts";
+import { Annotations, HtmlAnnotationProps } from "./annotation.ts";
+import { Component } from "./component.ts";
+
+export interface HtmlVertexProps extends VertexBaseProps {
+    icon?: IconProps;
+    iconOffset?: number;
+    iconAnnotations?: HtmlAnnotationProps[];
+    iconAnnotationsOffset?: number;
+    textBox?: TextBoxProps;
+    textBoxAnnotationsE?: HtmlAnnotationProps[];
+    textBoxAnnotationsSE?: HtmlAnnotationProps[];
+    textBoxAnnotationsS?: HtmlAnnotationProps[];
+    textBoxAnnotationsOffset?: number
+}
+
+export const HtmlVertex: Component<HtmlVertexProps> = ({
+    id,
+    text,
+    textBox,
+    textBoxAnnotationsE = [],
+    textBoxAnnotationsSE = [],
+    textBoxAnnotationsS = [],
+    textBoxAnnotationsOffset = 4,
+    icon = {},
+    iconOffset = 6,
+    iconAnnotations = [],
+    iconAnnotationsOffset = 0,
+}: HtmlVertexProps) => {
+    const iconTpl = Icon(icon);
+    const iconAnnotationsTpl = Annotations({
+        annotations: iconAnnotations
+    });
+    const textBoxTpl = TextBox({ text: { text: text, ...textBox?.text } });
+    const textBoxAnnotationsETpl = Annotations({ annotations: textBoxAnnotationsE });
+    const textBoxAnnotationsSETpl = Annotations({ annotations: textBoxAnnotationsSE });
+    const textBoxAnnotationsSTpl = Annotations({ annotations: textBoxAnnotationsS });
+
+    const yIconOffset = -iconOffset - (textBoxTpl.extent.height + iconTpl.extent.height) / 2;
+
+    const radius = iconAnnotationsOffset + iconTpl.extent.width / 2;
+    const xIconAnnotationOffset = radius * Math.cos(45 * (Math.PI / 180));
+    const yIconAnnotationOffset = radius * Math.sin(45 * (Math.PI / 180));
+    return svg`\
+${textBoxTpl}
+<g transform="translate(${textBoxTpl.extent.width / 2 + textBoxAnnotationsOffset + textBoxAnnotationsETpl.extent.width / 2})">
+    ${textBoxAnnotationsETpl}
+</g>
+<g transform="translate(${textBoxTpl.extent.width / 2 + textBoxAnnotationsOffset + textBoxAnnotationsETpl.extent.width / 2} ${textBoxTpl.extent.height / 2 + textBoxAnnotationsOffset + textBoxAnnotationsSETpl.extent.height / 2})">
+    ${textBoxAnnotationsSETpl}
+</g>
+<g transform="translate(0 ${textBoxTpl.extent.height / 2 + textBoxAnnotationsOffset + textBoxAnnotationsSTpl.extent.height / 2})">
+    ${textBoxAnnotationsSTpl}
+</g>
+<g data-click="icon" data-click-data=${JSON.stringify(icon)} transform="translate(0 ${yIconOffset})">
+    ${iconTpl}
+</g>
+<g transform="translate(${iconAnnotationsTpl.extent.width / 2 + xIconAnnotationOffset} ${yIconOffset - yIconAnnotationOffset})">
+    ${iconAnnotationsTpl}
+</g>
+`;
+};
diff --git a/packages/graph/src/index.ts b/packages/graph/src/index.ts
index 8429fb853a..bf5abc455f 100644
--- a/packages/graph/src/index.ts
+++ b/packages/graph/src/index.ts
@@ -5,4 +5,6 @@ export * from "./Graph.ts";
 export * from "./Sankey.ts";
 export * from "./Subgraph.ts";
 export * from "./Vertex.ts";
-export * from "./graph2/index.ts";
+export * from "./common/index.ts";
+export * from "./html/index.ts";
+export * from "./react/index.ts";
diff --git a/packages/graph/src/graph2/dataGraph.ts b/packages/graph/src/react/dataGraph.ts
similarity index 97%
rename from packages/graph/src/graph2/dataGraph.ts
rename to packages/graph/src/react/dataGraph.ts
index c8520f51d5..1aab58c41c 100644
--- a/packages/graph/src/graph2/dataGraph.ts
+++ b/packages/graph/src/react/dataGraph.ts
@@ -1,8 +1,8 @@
 import { PropertyExt, Widget } from "@hpcc-js/common";
 import { Vertex3, CentroidVertex3, Vertex3Props, EdgeProps, SubgraphProps } from "@hpcc-js/react";
 import { compare2 } from "@hpcc-js/util";
-import { Graph2 } from "./graph.ts";
-import { HierarchyBase } from "./layouts/placeholders.ts";
+import { GraphReact } from "./graphReact.ts";
+import { HierarchyBase } from "../common/layouts/placeholders.ts";
 
 //  Backward compatibility layer  ---
 export type IVertex3 = Vertex3Props;
@@ -20,7 +20,7 @@ export class AnnotationColumn extends PropertyExt {
     owner(_: DataGraph): this;
     owner(_?: DataGraph): DataGraph | this {
         if (!arguments.length) return this._owner;
-        this._owner = _;
+        this._owner = _!;
         return this;
     }
 
@@ -40,7 +40,7 @@ export interface AnnotationColumn {
 AnnotationColumn.prototype.publish("columnID", "", "set", "Annotation column (boolean)", function (this: AnnotationColumn) { return this._owner.vertexColumns(); });
 AnnotationColumn.prototype.publish("annotationID", "", "string", "Annotation ID");
 
-export class DataGraph extends Graph2 {
+export class DataGraph extends GraphReact {
 
     constructor() {
         super();
@@ -311,13 +311,13 @@ export interface DataGraph {
     hierarchyChildIDColumn(_: string): this;
 }
 
-DataGraph.prototype.publish("subgraphColumns", [], "any", "Subgraph Columns", null, { internal: true });
-DataGraph.prototype.publish("subgraphs", [], "any", "Subgraphs", null, { internal: true });
+DataGraph.prototype.publish("subgraphColumns", [], "any", "Subgraph Columns", undefined, { internal: true });
+DataGraph.prototype.publish("subgraphs", [], "any", "Subgraphs", undefined, { internal: true });
 DataGraph.prototype.publish("subgraphIDColumn", "", "string", "Subgraph ID column");
 DataGraph.prototype.publish("subgraphLabelColumn", "", "string", "Subgraph Label column");
 
-DataGraph.prototype.publish("vertexColumns", [], "any", "Vertex Columns", null, { internal: true });
-DataGraph.prototype.publish("vertices", [], "any", "Vertices (Nodes)", null, { internal: true });
+DataGraph.prototype.publish("vertexColumns", [], "any", "Vertex Columns", undefined, { internal: true });
+DataGraph.prototype.publish("vertices", [], "any", "Vertices (Nodes)", undefined, { internal: true });
 DataGraph.prototype.publish("vertexCategoryColumn", "", "set", "Vertex Category ID column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
 DataGraph.prototype.publish("vertexIDColumn", "", "set", "Vertex ID column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
 DataGraph.prototype.publish("vertexLabelColumn", "", "set", "Vertex label column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
@@ -327,11 +327,11 @@ DataGraph.prototype.publish("vertexImageUrlColumn", "", "set", "Vertex image url
 DataGraph.prototype.publish("vertexFAChar", "?", "string", "Vertex default FAChar");
 DataGraph.prototype.publish("vertexFACharColumn", "", "set", "Vertex FAChar column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
 DataGraph.prototype.publish("vertexTooltipColumn", "", "set", "Vertex tooltip column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
-DataGraph.prototype.publish("vertexAnnotationColumns", [], "propertyArray", "Annotations", null, { autoExpand: AnnotationColumn });
+DataGraph.prototype.publish("vertexAnnotationColumns", [], "propertyArray", "Annotations", undefined, { autoExpand: AnnotationColumn });
 DataGraph.prototype.publish("vertexExpansionFACharColumn", "", "set", "Vertex expansion FAChar column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
 
-DataGraph.prototype.publish("edgeColumns", [], "any", "Edge columns", null, { internal: true });
-DataGraph.prototype.publish("edges", [], "any", "Edges (Edges)", null, { internal: true });
+DataGraph.prototype.publish("edgeColumns", [], "any", "Edge columns", undefined, { internal: true });
+DataGraph.prototype.publish("edges", [], "any", "Edges (Edges)", undefined, { internal: true });
 DataGraph.prototype.publish("edgeIDColumn", "", "set", "Edge ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true });
 DataGraph.prototype.publish("edgeLabelColumn", "", "set", "Edge label column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true });
 DataGraph.prototype.publish("edgeSourceColumn", "", "set", "Edge source ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true });
diff --git a/packages/graph/src/graph2/graph.ts b/packages/graph/src/react/graphReact.ts
similarity index 75%
rename from packages/graph/src/graph2/graph.ts
rename to packages/graph/src/react/graphReact.ts
index ec813c4484..ef59d33d0b 100644
--- a/packages/graph/src/graph2/graph.ts
+++ b/packages/graph/src/react/graphReact.ts
@@ -1,6 +1,6 @@
 import { React, Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
 import { GraphReactT } from "./graphReactT.ts";
-import { GraphDataProps, HierarchyBase } from "./graphT.ts";
+import { GraphDataProps, HierarchyBase } from "../common/graphT.ts";
 
 //  Backward compatibility layer  ---
 export type ISubgraph = SubgraphProps;
@@ -9,7 +9,7 @@ export type IEdge = EdgeProps;
 export type IHierarchy = HierarchyBase<ISubgraph, IVertex>;
 export type IGraphData2 = GraphDataProps<ISubgraph, IVertex, IEdge>;
 
-export class Graph2 extends GraphReactT<ISubgraph, IVertex, IEdge> {
+export class GraphReact extends GraphReactT<ISubgraph, IVertex, IEdge> {
 
     constructor() {
         super(Subgraph, Vertex, Edge);
@@ -76,9 +76,9 @@ export class Graph2 extends GraphReactT<ISubgraph, IVertex, IEdge> {
         this._centroidFilter.update(this.centroidColor());
     }
 }
-Graph2.prototype._class += " graph_Graph2";
+GraphReact.prototype._class += " graph_GraphReact";
 
-export interface Graph2 {
+export interface GraphReact {
     vertexTextHeight(): number;
     vertexTextHeight(_: number): this;
     vertexTextPadding(): number;
@@ -114,21 +114,22 @@ export interface Graph2 {
     centroidLabelFontFamily(_: string): this;
 }
 
-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", "Verdana", "string", "Vertex Label Font Family");
+GraphReact.prototype.publish("vertexTextHeight", 10, "number", "Vertex Text Height");
+GraphReact.prototype.publish("vertexTextPadding", 4, "number", "Vertex Text Padding");
+GraphReact.prototype.publish("vertexIconHeight", 50, "number", "Vertex Icon Height");
+GraphReact.prototype.publish("vertexIconPadding", 10, "number", "Vertex Icon Padding");
+GraphReact.prototype.publish("vertexIconStrokeWidth", 0, "number", "Vertex Icon Stroke Width");
+GraphReact.prototype.publish("vertexIconFontFamily", "FontAwesome", "string", "Vertex Icon Font Family");
+GraphReact.prototype.publish("vertexLabelFontFamily", "Verdana", "string", "Vertex Label Font Family");
 
-Graph2.prototype.publish("centroidColor", "#00A000", "html-color", "Centroid Glow Color");
-Graph2.prototype.publish("centroidScale", 1, "number", "Centroid Scale");
-Graph2.prototype.publish("centroidTextHeight", 12, "number", "Centroid Text Height");
-Graph2.prototype.publish("centroidTextPadding", 4, "number", "Centroid Text Padding");
-Graph2.prototype.publish("centroidIconHeight", 50, "number", "Centroid Icon Height");
-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", "Verdana", "string", "Centroid Label Font Family");
+GraphReact.prototype.publish("centroidColor", "#00A000", "html-color", "Centroid Glow Color");
+GraphReact.prototype.publish("centroidScale", 1, "number", "Centroid Scale");
+GraphReact.prototype.publish("centroidTextHeight", 12, "number", "Centroid Text Height");
+GraphReact.prototype.publish("centroidTextPadding", 4, "number", "Centroid Text Padding");
+GraphReact.prototype.publish("centroidIconHeight", 50, "number", "Centroid Icon Height");
+GraphReact.prototype.publish("centroidIconPadding", 10, "number", "Centroid Icon Padding");
+GraphReact.prototype.publish("centroidIconStrokeWidth", 4, "number", "Centroid Icon Stroke Width");
+GraphReact.prototype.publish("centroidIconFontFamily", "FontAwesome", "string", "Centroid Icon Font Family");
+GraphReact.prototype.publish("centroidLabelFontFamily", "Verdana", "string", "Centroid Label Font Family");
 
+export const Graph2 = GraphReact;
diff --git a/packages/graph/src/graph2/graphReactT.ts b/packages/graph/src/react/graphReactT.ts
similarity index 97%
rename from packages/graph/src/graph2/graphReactT.ts
rename to packages/graph/src/react/graphReactT.ts
index 615aaa81a3..36672c4e73 100644
--- a/packages/graph/src/graph2/graphReactT.ts
+++ b/packages/graph/src/react/graphReactT.ts
@@ -1,5 +1,5 @@
 import { render, React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
-import { GraphT, RendererT } from "./graphT.ts";
+import { GraphT, RendererT } from "../common/graphT.ts";
 
 function adapter<T>(reactRenderer: React.FunctionComponent<T>): RendererT<T> {
     return (props: T, element: SVGGElement) => render(reactRenderer, props, element);
diff --git a/packages/graph/src/react/index.ts b/packages/graph/src/react/index.ts
new file mode 100644
index 0000000000..d5a91610f3
--- /dev/null
+++ b/packages/graph/src/react/index.ts
@@ -0,0 +1,4 @@
+export * from "./graphReactT.ts";
+export * from "./graphReact.ts";
+export * from "./subgraph.tsx";
+export * from "./vertex.tsx";
diff --git a/packages/graph/src/graph2/subgraph.tsx b/packages/graph/src/react/subgraph.tsx
similarity index 92%
rename from packages/graph/src/graph2/subgraph.tsx
rename to packages/graph/src/react/subgraph.tsx
index 8aeaca08d6..27f11d78ba 100644
--- a/packages/graph/src/graph2/subgraph.tsx
+++ b/packages/graph/src/react/subgraph.tsx
@@ -1,5 +1,5 @@
 import { React, Text } from "@hpcc-js/react";
-import { SubgraphBaseProps } from "./layouts/placeholders.ts";
+import { SubgraphBaseProps } from "../common/layouts/placeholders.ts";
 
 export interface BasicSubgraphProps extends SubgraphBaseProps {
     label?: string;
diff --git a/packages/graph/src/graph2/vertex.tsx b/packages/graph/src/react/vertex.tsx
similarity index 92%
rename from packages/graph/src/graph2/vertex.tsx
rename to packages/graph/src/react/vertex.tsx
index 4b36d83aec..4b488a4769 100644
--- a/packages/graph/src/graph2/vertex.tsx
+++ b/packages/graph/src/react/vertex.tsx
@@ -1,5 +1,5 @@
 import { React, Text } from "@hpcc-js/react";
-import { VertexBaseProps } from "./layouts/placeholders.ts";
+import { VertexBaseProps } from "../common/layouts/placeholders.ts";
 
 export interface BasicVertexProps extends VertexBaseProps {
     textFill?: string;
diff --git a/packages/graph/src/test.ts b/packages/graph/tests/data.ts
similarity index 77%
rename from packages/graph/src/test.ts
rename to packages/graph/tests/data.ts
index 270d956618..367f41134c 100644
--- a/packages/graph/src/test.ts
+++ b/packages/graph/tests/data.ts
@@ -1,217 +1,12 @@
 import { Palette } from "@hpcc-js/common";
-import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
-import { Graph } from "./Graph";
-import { Vertex } from "./Vertex";
-import { Edge } from "./Edge";
-import { DataGraph } from "./graph2/dataGraph";
-import { SankeyGraph } from "./graph2/sankeyGraph";
+import { Vertex } from "../Vertex";
+import { Edge } from "../Edge";
 
-export { Test4 as Test };
-
-export class Test1 extends Graph {
-
-    constructor() {
-        super();
-        this
-            .data(createData())
-            .layout("ForceDirected")
-            .applyScaleOnLayout(true)
-            .centroidColor("darkgreen")
-            .dragSingleNeighbors(true)
-            .highlightSelectedPathToCentroid(true)
-            ;
-    }
-}
-
-export class Test2 extends DataGraph {
-
-    constructor() {
-        super();
-        const g = genData2();
-        this
-            .layout("ForceDirected")
-            .forceDirectedRepulsionStrength(-3500)
-            .forceDirectedLinkDistance(150)
-            .forceDirectedLinkStrength(1.5)
-            .forceDirectedPinCentroid(true)
-            .hierarchyDigraph(false)
-
-            .centroidColor("#777777")
-
-            .selectionGlowColor("#555555")
-            .highlightOnMouseOverEdge(true)
-            .highlightOnMouseOverVertex(true)
-            .showVertexLabels(true)
-
-            .applyScaleOnLayout(true)
-            .zoomToFitLimit(1)
-
-            .edgeArcDepth(8)
-            .edgeStrokeWidth(2)
-            .edgeColor("#287EC4")
-
-            .allowDragging(true)
-
-            .annotations([{
-                id: "0",
-                imageChar: "fa-plus",
-                fill: "white",
-                stroke: "whitesmoke",
-                imageCharFill: "red"
-            }, {
-                id: "1",
-                imageChar: "fa-star",
-                fill: "navy",
-                imageCharFill: "white"
-            }])
-
-            .vertexColumns(["id", "label", "fachar", "centroid", "ann1", "ann2", "expandedFAChar"])
-            .vertexCentroidColumn("centroid")
-            .vertexFACharColumn("fachar")
-            .vertexIDColumn("id")
-            .vertexLabelColumn("label")
-            .vertexAnnotationColumns([
-                { columnID: "ann1", annotationID: "0" } as any,
-                { columnID: "ann2", annotationID: "1" } as any
-            ])
-            .vertexExpansionFACharColumn("expandedFAChar")
-            .vertices(g.vertices)
-
-            .edgeColumns(["source", "target", "label", "weightXXX"])
-            // .edgeIDColumn("id")
-            .edgeSourceColumn("source")
-            .edgeTargetColumn("target")
-            .edgeLabelColumn("label")
-            // .edgeWeightColumn("weight")
-            .edges(g.edges)
-
-            //  Events  ---
-            .on("vertex_mousein", (vertex, col, sel, anno) => console.info("vertex_mousein", vertex, anno))
-            .on("vertex_mouseout", (vertex, col, sel, anno) => console.info("vertex_mouseout", vertex, anno))
-            .on("vertex_mouseover", (vertex, col, sel, anno) => console.info("vertex_mouseover", vertex, anno))
-            .on("vertex_click", (vertex, col, sel, anno) => console.info("vertex_click", vertex, anno))
-            .on("vertex_dblclick", (vertex, col, sel, anno) => console.info("vertex_dblclick", vertex, anno))
-            ;
-
-        setTimeout(() => {
-            // this.downloadPNG();
-        }, 3000);
-    }
-}
-
-export class Test3 extends SankeyGraph {
-
-    constructor() {
-        super();
-        this
-            .vertexColumns(["category", "id", "label"])
-            .vertices([
-                [0, 0, "A"],
-                [0, 1, "B"],
-                [0, 2, "C"],
-                [0, 3, "D"],
-                [0, 4, "F"],
-                [1, 5, "Math"],
-                [2, 6, "English"],
-                [3, 7, "Geometry"],
-                [4, 8, "Science"],
-            ])
-            .edgeColumns(["source", "target", "weight"])
-            .edges([
-                [0, 5, 48],
-                [0, 6, 28],
-                [0, 7, 26],
-                [0, 8, 38],
-                [1, 5, 63],
-                [1, 6, 39],
-                [1, 7, 36],
-                [1, 8, 58],
-                [2, 5, 42],
-                [2, 6, 36],
-                [2, 7, 27],
-                [2, 8, 68],
-                [3, 5, 90],
-                [3, 6, 59],
-                [3, 7, 15],
-                [3, 8, 35],
-                [4, 5, 10],
-                [4, 6, 3],
-                [4, 7, 6],
-                [4, 8, 4],
-            ])
-            ;
-    }
-}
-
-export class Test4 extends Test2 {
-    constructor() {
-        super();
-        this
-            .vertexRenderer(Vertex4)
-            .centroidRenderer(CentroidVertex4)
-            ;
-    }
-}
-
-// 8
-let seed = 8;
-function random() {
-    const x = Math.sin(seed++) * 10000;
-    return x - Math.floor(x);
-}
-function rand() {
-    return Math.round(random() * 32767);
-}
-
-function make_pair<T>(a: T, b: T): [T, T] {
-    return [a, b];
-}
-
-// @ts-ignore
-function genData(MAX_VERTICES = 200, MAX_EDGES = 200) {
-    const edges: [number, number][] = [];
-    function edges_has(p: [number, number]): boolean {
-        return edges.some(row => row[0] === p[0] && row[1] === p[1]);
-    }
-
-    const NUM = 1 + rand() % MAX_VERTICES;
-    let NUMEDGE = 1 + rand() % MAX_EDGES;
-
-    while (NUMEDGE > NUM * (NUM - 1) / 2) {
-        NUMEDGE = 1 + rand() % MAX_EDGES;
-    }
-
-    for (let j = 1; j <= NUMEDGE; j++) {
-        let a = 1 + rand() % NUM;
-        let b = 1 + rand() % NUM;
-        let p = make_pair(a, b);
-
-        while (edges_has(p) || a == b) {
-            a = 1 + rand() % NUM;
-            b = 1 + rand() % NUM;
-            p = make_pair(a, b);
-        }
-        edges.push(p);
-    }
-
-    const vertices: { [id: number]: boolean } = {};
-    for (const it of edges) {
-        vertices[it[0]] = true;
-        vertices[it[1]] = true;
-    }
-
-    const icons = ["fa-at", "fa-user-o", "fa-address-card-o", "fa-globe", "fa-phone"];
-    return {
-        vertices: Object.keys(vertices).map(v => [v, `Node-${v}`, icons[Math.floor(Math.random() * icons.length)]]),
-        edges: edges.map(e => [e[0], e[1], "", 1])
-    };
-}
-
-function genData2() {
+export function genData2() {
     return {
         vertices: [
-            ["a", "myriel@gmail.com", "fa-at", false, false, false, "fa-plus"],
-            [1, "Napoleon", "fa-user-o", true, true, true, "fa-plus"],
+            ["a", "myriel@gmail.com", "fa-at", false, false, false, "fa-plus", "https://th.bing.com/th/id/OIP.3FhSHq5xMXMDZ7gYBZ1nzQHaHa?w=210&h=210&c=7&r=0&o=5&pid=1.7"],
+            [1, "Napoleon", "fa-user-o", true, true, true, "fa-plus", "https://th.bing.com/th/id/OIP.3FhSHq5xMXMDZ7gYBZ1nzQHaHa?w=210&h=210&c=7&r=0&o=5&pid=1.7"],
             [2, "Mlle.Baptistine", "fa-user-o"],
             [3, "Mme.Magloire", "fa-user-o"],
             [4, "CountessdeLo", "fa-user-o"],
@@ -276,7 +71,7 @@ function genData2() {
     };
 }
 
-function createData() {
+export function createData() {
     const vertices = [];
     const edges = [];
     const palette = Palette.ordinal("dark2");
diff --git a/packages/graph/tests/graph.browser.spec.ts b/packages/graph/tests/graph.browser.spec.ts
index 78a14ca354..9e0ccaab0d 100644
--- a/packages/graph/tests/graph.browser.spec.ts
+++ b/packages/graph/tests/graph.browser.spec.ts
@@ -1,6 +1,6 @@
-import * as graph from "@hpcc-js/graph";
+import * as graph from "../src/index.ts";
 import { Class, HTMLWidget, Palette, SVGWidget } from "@hpcc-js/common";
-import { AdjacencyGraph, AnnotationColumn, BasicSubgraph, BasicVertex, DataGraph, Edge, Graph, GraphT, GraphReactT, Graph2, Sankey, SankeyColumn, SankeyGraph, Subgraph, Vertex } from "@hpcc-js/graph";
+import { AdjacencyGraph, AnnotationColumn, BasicSubgraph, BasicVertex, DataGraph, Edge, Graph, GraphT, GraphReactT, GraphHtml, Graph2, Sankey, SankeyColumn, SankeyGraph, Subgraph, Vertex } from "../src/index.ts";
 import { Subgraph as ReactSubgraph, Vertex as ReactVertex, Edge as ReactEdge } from "@hpcc-js/react";
 import { describe, it, expect } from "vitest";
 import { classDef, dataBreach, render } from "../../common/tests/index.ts";
@@ -553,6 +553,35 @@ describe("@hpcc-js/graph", () => {
                                     render(graphB);
                                 }
                                 break;
+                            case GraphHtml:
+                                {
+                                    const subgraphsB = [
+                                        { id: "10", text: "Adults" }
+                                    ];
+
+                                    const verticesB = [
+                                        { id: "0", text: "Daddy", annotations: [] },
+                                        { id: "1", text: "Mummy", annotations: [] },
+                                        { id: "2", text: "Baby", annotations: [] }
+                                    ];
+
+                                    const edgesB = [
+                                        { id: "0", source: verticesB[0], target: verticesB[2] },
+                                        { id: "1", source: verticesB[1], target: verticesB[2] }
+                                    ];
+
+                                    const hierarchyB = [
+                                        { id: "0", parent: subgraphsB[0], child: verticesB[0] },
+                                        { id: "1", parent: subgraphsB[0], child: verticesB[1] }
+                                    ];
+
+                                    const graphB = new GraphHtml()
+                                        .data({ subgraphs: subgraphsB, vertices: verticesB, edges: edgesB, hierarchy: hierarchyB })
+                                        ;
+
+                                    render(graphB);
+                                }
+                                break;
                             case DataGraph:
                                 {
                                     const graphD = new DataGraph()
diff --git a/packages/graph/tests/index.ts b/packages/graph/tests/index.ts
new file mode 100644
index 0000000000..53b419d59c
--- /dev/null
+++ b/packages/graph/tests/index.ts
@@ -0,0 +1,92 @@
+import { GraphHtml, VertexProps } from "../src/index.ts";
+
+import "@hpcc-js/common/font-awesome/css/font-awesome.min.css";
+
+const categories = [
+    { id: 0, imageChar: "fa-user" },
+    { id: 1, imageChar: "fa-home" }
+];
+
+const VERTEX_ARR: VertexProps[] = [{
+    id: 0,
+    centroid: true,
+    text: "Vertex One",
+    icon: {
+        imageChar: "fa-home",
+        height: 48,
+        fill: "#ED1C24",
+    },
+    textBoxAnnotationsE: [{
+        text: "fa-star",
+        fill: "red",
+        stroke: "darkred"
+    }]
+},
+{
+    id: 1,
+    centroid: false,
+    text: "Vertex\nTwo\nthree\nfourteen Yeah",
+    icon: {
+        imageChar: "fa-car",
+        height: 48,
+        fill: "#00802b",
+    },
+    textBoxAnnotationsS: [{
+        text: "fa-star",
+        fill: "red",
+        stroke: "darkred"
+    }, {
+        text: "fa-user",
+        fill: "blue",
+        stroke: "darkblue"
+    }, {
+        text: "fa-car",
+        fill: "green",
+        stroke: "darkgreen"
+    }]
+},
+{
+    id: 2,
+    centroid: false,
+    text: "Vertex yyggyy Three",
+    icon: {
+        imageChar: "fa-user",
+        height: 48,
+        fill: "#ffcc33",
+    },
+    iconAnnotations: [{
+        text: "fa-plus",
+        fill: "whitesmoke",
+        stroke: "darkgray"
+    }]
+}];
+
+const EDGE_ARR = [{
+    id: 0,
+    source: VERTEX_ARR[0],
+    target: VERTEX_ARR[1]
+},
+{
+    id: 1,
+    source: VERTEX_ARR[0],
+    target: VERTEX_ARR[2]
+}
+];
+
+new GraphHtml()
+    // .categories(categories)
+    .data({
+        vertices: VERTEX_ARR,
+        edges: EDGE_ARR
+    })
+    .target("placeholder1")
+    .layout("ForceDirected")
+    .applyScaleOnLayout(true)
+    .allowDragging(true)
+    .on("vertex_click", (row, col, sel, data) => {
+        console.log("vertex_click", row, col, sel);
+    })
+    .on("vertex_contextmenu", (row, col, sel, data) => console.log("vertex_contextmenu", row, col, sel))
+    .render()
+    ;
+6
\ No newline at end of file
diff --git a/packages/graph/tests/test1.ts b/packages/graph/tests/test1.ts
new file mode 100644
index 0000000000..c685627cd8
--- /dev/null
+++ b/packages/graph/tests/test1.ts
@@ -0,0 +1,18 @@
+import { Graph } from "../Graph";
+import { createData } from "./data";
+
+export class Test extends Graph {
+
+    constructor() {
+        super();
+        this
+            .data(createData())
+            .layout("ForceDirected")
+            .applyScaleOnLayout(true)
+            .centroidColor("darkgreen")
+            .dragSingleNeighbors(true)
+            .highlightSelectedPathToCentroid(true)
+            ;
+    }
+}
+
diff --git a/packages/graph/tests/test2.ts b/packages/graph/tests/test2.ts
new file mode 100644
index 0000000000..dee8b5ba05
--- /dev/null
+++ b/packages/graph/tests/test2.ts
@@ -0,0 +1,80 @@
+import { DataGraph } from "../graph2/dataGraph";
+import { genData2 } from "./data";
+
+export class Test2 extends DataGraph {
+
+    constructor() {
+        super();
+        const g = genData2();
+        this
+            .layout("ForceDirected")
+            .forceDirectedRepulsionStrength(-3500)
+            .forceDirectedLinkDistance(150)
+            .forceDirectedLinkStrength(1.5)
+            .forceDirectedPinCentroid(true)
+            .hierarchyDigraph(false)
+
+            .centroidColor("#777777")
+
+            .selectionGlowColor("#555555")
+            .highlightOnMouseOverEdge(true)
+            .highlightOnMouseOverVertex(true)
+            .showVertexLabels(true)
+
+            .applyScaleOnLayout(true)
+            .zoomToFitLimit(1)
+
+            .edgeArcDepth(8)
+            .edgeStrokeWidth(2)
+            .edgeColor("#287EC4")
+
+            .allowDragging(true)
+
+            .annotations([{
+                id: "0",
+                imageChar: "fa-plus",
+                fill: "white",
+                stroke: "whitesmoke",
+                imageCharFill: "red"
+            }, {
+                id: "1",
+                imageChar: "fa-star",
+                fill: "navy",
+                imageCharFill: "white"
+            }])
+
+            .vertexColumns(["id", "label", "fachar", "centroid", "ann1", "ann2", "expandedFAChar", "imageUrl"])
+            .vertexCentroidColumn("centroid")
+            .vertexImageUrlColumn("imageUrl")
+            .vertexFACharColumn("fachar")
+            .vertexIDColumn("id")
+            .vertexLabelColumn("label")
+            .vertexAnnotationColumns([
+                { columnID: "ann1", annotationID: "0" } as any,
+                { columnID: "ann2", annotationID: "1" } as any
+            ])
+            .vertexExpansionFACharColumn("expandedFAChar")
+            .vertices(g.vertices)
+
+            .edgeColumns(["source", "target", "label", "weightXXX"])
+            // .edgeIDColumn("id")
+            .edgeSourceColumn("source")
+            .edgeTargetColumn("target")
+            .edgeLabelColumn("label")
+            // .edgeWeightColumn("weight")
+            .edges(g.edges)
+
+            //  Events  ---
+            .on("vertex_mousein", (vertex, col, sel, anno) => console.info("vertex_mousein", vertex, anno))
+            .on("vertex_mouseout", (vertex, col, sel, anno) => console.info("vertex_mouseout", vertex, anno))
+            .on("vertex_mouseover", (vertex, col, sel, anno) => console.info("vertex_mouseover", vertex, anno))
+            .on("vertex_click", (vertex, col, sel, anno) => console.info("vertex_click", vertex, anno))
+            .on("vertex_dblclick", (vertex, col, sel, anno) => console.info("vertex_dblclick", vertex, anno))
+            ;
+
+        setTimeout(() => {
+            // this.downloadPNG();
+        }, 3000);
+    }
+}
+
diff --git a/packages/graph/tests/test3.ts b/packages/graph/tests/test3.ts
new file mode 100644
index 0000000000..2295458d05
--- /dev/null
+++ b/packages/graph/tests/test3.ts
@@ -0,0 +1,46 @@
+import { SankeyGraph } from "../graph2/sankeyGraph";
+
+export class Test3 extends SankeyGraph {
+
+    constructor() {
+        super();
+        this
+            .vertexColumns(["category", "id", "label"])
+            .vertices([
+                [0, 0, "A"],
+                [0, 1, "B"],
+                [0, 2, "C"],
+                [0, 3, "D"],
+                [0, 4, "F"],
+                [1, 5, "Math"],
+                [2, 6, "English"],
+                [3, 7, "Geometry"],
+                [4, 8, "Science"],
+            ])
+            .edgeColumns(["source", "target", "weight"])
+            .edges([
+                [0, 5, 48],
+                [0, 6, 28],
+                [0, 7, 26],
+                [0, 8, 38],
+                [1, 5, 63],
+                [1, 6, 39],
+                [1, 7, 36],
+                [1, 8, 58],
+                [2, 5, 42],
+                [2, 6, 36],
+                [2, 7, 27],
+                [2, 8, 68],
+                [3, 5, 90],
+                [3, 6, 59],
+                [3, 7, 15],
+                [3, 8, 35],
+                [4, 5, 10],
+                [4, 6, 3],
+                [4, 7, 6],
+                [4, 8, 4],
+            ])
+            ;
+    }
+}
+
diff --git a/packages/graph/tests/test4.ts b/packages/graph/tests/test4.ts
new file mode 100644
index 0000000000..c59e2451a8
--- /dev/null
+++ b/packages/graph/tests/test4.ts
@@ -0,0 +1,66 @@
+import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
+import { Test2 } from "./test2";
+
+export class Test4 extends Test2 {
+    constructor() {
+        super();
+        this
+            .vertexRenderer(Vertex4)
+            .centroidRenderer(CentroidVertex4)
+            ;
+    }
+}
+
+// 8
+let seed = 8;
+function random() {
+    const x = Math.sin(seed++) * 10000;
+    return x - Math.floor(x);
+}
+function rand() {
+    return Math.round(random() * 32767);
+}
+
+function make_pair<T>(a: T, b: T): [T, T] {
+    return [a, b];
+}
+
+// @ts-ignore
+function genData(MAX_VERTICES = 200, MAX_EDGES = 200) {
+    const edges: [number, number][] = [];
+    function edges_has(p: [number, number]): boolean {
+        return edges.some(row => row[0] === p[0] && row[1] === p[1]);
+    }
+
+    const NUM = 1 + rand() % MAX_VERTICES;
+    let NUMEDGE = 1 + rand() % MAX_EDGES;
+
+    while (NUMEDGE > NUM * (NUM - 1) / 2) {
+        NUMEDGE = 1 + rand() % MAX_EDGES;
+    }
+
+    for (let j = 1; j <= NUMEDGE; j++) {
+        let a = 1 + rand() % NUM;
+        let b = 1 + rand() % NUM;
+        let p = make_pair(a, b);
+
+        while (edges_has(p) || a == b) {
+            a = 1 + rand() % NUM;
+            b = 1 + rand() % NUM;
+            p = make_pair(a, b);
+        }
+        edges.push(p);
+    }
+
+    const vertices: { [id: number]: boolean } = {};
+    for (const it of edges) {
+        vertices[it[0]] = true;
+        vertices[it[1]] = true;
+    }
+
+    const icons = ["fa-at", "fa-user-o", "fa-address-card-o", "fa-globe", "fa-phone"];
+    return {
+        vertices: Object.keys(vertices).map(v => [v, `Node-${v}`, icons[Math.floor(Math.random() * icons.length)]]),
+        edges: edges.map(e => [e[0], e[1], "", 1])
+    };
+}
diff --git a/packages/graph/tests/test5.ts b/packages/graph/tests/test5.ts
new file mode 100644
index 0000000000..7d302689b4
--- /dev/null
+++ b/packages/graph/tests/test5.ts
@@ -0,0 +1,86 @@
+import { Vertex4, CentroidVertex4 } from "@hpcc-js/react";
+import { GraphReact } from "../react/graphReact.ts";
+
+const VERTEX_ARR = [{
+    id: 0,
+    centroid: true,
+    text: "Vertex One",
+    iconFontFamily: "'Font Awesome 5 Free'",
+}, {
+    id: 1,
+    centroid: false,
+    text: "Vertex Two",
+
+}, {
+    id: 2,
+    centroid: false,
+    text: "Vertex Three",
+}];
+
+const EDGE_ARR = [{
+    id: 0,
+    source: VERTEX_ARR[0],
+    target: VERTEX_ARR[1]
+}, {
+    id: 1,
+    source: VERTEX_ARR[0],
+    target: VERTEX_ARR[2]
+}];
+
+const VERTEX_ARR_UPDATED = [{
+    id: 0,
+    text: "Vertex One",
+    iconFontFamily: "'Font Awesome 5 Free'",
+}, {
+    centroid: true,
+    id: 1,
+    text: "Vertex Two",
+
+}, {
+    id: 2,
+    centroid: false,
+    text: "Vertex Three",
+}];
+
+export const EDGE_ARR_UPDATE = [{
+    id: 0,
+    source: VERTEX_ARR_UPDATED[1],
+    target: VERTEX_ARR_UPDATED[2]
+}];
+
+export class Test5 extends Graph2 {
+
+    constructor() {
+        super();
+        this
+            .minScale(0.1)
+            .layout("ForceDirected")
+            .centroidRenderer(CentroidVertex4)
+            .vertexRenderer(Vertex4)
+            .data({
+                vertices: VERTEX_ARR,
+                edges: EDGE_ARR
+            })
+            .transitionDuration(200)
+            .forceDirectedIterations(800)
+            .forceDirectedLinkDistance(100)
+            .forceDirectedAlphaDecay(0.014)
+            .applyScaleOnLayout(true)
+            .centroidColor("#ffffff")
+            .edgeStrokeWidth(2)
+            .edgeColor("#227AC2")
+            .minScale(0.1)
+            .edgeArcDepth(0)
+            .layout("ForceDirected")
+            .on("vertex_click", (vertex, col, sel, anno) => {
+                console.info("vertex_click", vertex);
+            })
+            .on("vertex_dblclick", (vertex, col, sel, anno) => {
+                console.info("vertex_dblclick", vertex);
+            })
+            .on("vertex_contextmenu", (vertex, col, sel, anno) => {
+                console.info("vertex_contextmenu", vertex);
+            })
+            ;
+    }
+}
\ No newline at end of file
diff --git a/packages/graph/util/wrapWorker.js b/packages/graph/util/wrapWorker.js
index 5bd3d7af72..c557582b26 100644
--- a/packages/graph/util/wrapWorker.js
+++ b/packages/graph/util/wrapWorker.js
@@ -9,7 +9,7 @@ var myArgs = process.argv.slice(2);
 var inFile = myArgs[0];
 var inFilePath = `workers/dist/${inFile}${min ? ".min" : ""}.js`;
 var inFileOptionsPath = `workers/src/${inFile}Options.ts`;
-var outFilePath = `src/graph2/layouts/${inFile}Worker.ts`;
+var outFilePath = `src/common/layouts/${inFile}Worker.ts`;
 var fileName = path.basename(inFilePath).split(".")[0];
 
 function escapeQuote(str) {
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
index d43fc45e25..73f65b64c5 100644
--- a/vitest.workspace.ts
+++ b/vitest.workspace.ts
@@ -1,12 +1,12 @@
-import { configDefaults, defineWorkspace } from 'vitest/config'
+import { configDefaults, defineWorkspace } from "vitest/config";
 
 export default defineWorkspace([
     {
         test: {
-            name: 'node',
+            name: "node",
             exclude: [
                 ...configDefaults.exclude,
-                '**/*.browser.spec.{ts,js}',
+                "**/*.browser.spec.{ts,js}",
                 "**/node_modules/**",
                 "**/.nx/**",
                 "**/apps/**",
@@ -14,16 +14,16 @@ export default defineWorkspace([
                 "**/demos/**",
                 "**/src/**",
             ],
-            environment: 'node',
+            environment: "node",
             setupFiles: []
         }
     }, {
         test: {
-            name: 'browser',
+            name: "browser",
             exclude: [
                 ...configDefaults.exclude,
                 "@hpcc-js/dgrid-shim",
-                '**/*.node.spec.{ts,js}',
+                "**/*.node.spec.{ts,js}",
                 "**/node_modules/**",
                 "**/.nx/**",
                 "**/apps/**",
@@ -43,62 +43,7 @@ export default defineWorkspace([
                 },
                 screenshotFailures: false
             },
-            setupFiles: []
+            setupFiles: [],
         }
     }
-])
-
-// export default defineConfig(({ mode }) => {
-//     switch (mode) {
-//         case "browser":
-//             return {
-//                 test: {
-//                     include: [
-//                         "tests/*.spec.ts",
-//                         "tests/browser/*.spec.ts"
-//                     ],
-//                     browser: {
-//                         enabled: true,
-//                         provider: "playwright",
-//                         headless: true,
-//                         name: "chromium",
-//                         providerOptions: {
-//                             launch: {
-//                                 args: ["--disable-web-security"],
-//                             }
-//                         },
-//                         screenshotFailures: false
-//                     },
-//                     testTimeout: 30000,
-//                     coverage: {
-//                         provider: "v8",
-//                         allowExternal: false,
-//                         // include: ["src/**/*.ts"],
-//                         reporter: ["json", "text"],
-
-//                     }
-//                 }
-//             };
-//         case "node":
-//         default:
-//             return {
-//                 test: {
-//                     include: [
-//                         "tests/*.spec.ts",
-//                         "tests/node/*.spec.ts"
-//                     ],
-//                     node: {
-//                         enabled: true,
-//                         provider: "node",
-//                     },
-//                     testTimeout: 20000,
-//                     coverage: {
-//                         provider: "v8",
-//                         allowExternal: false,
-//                         // include: ["src/**/*.ts"],
-//                         reporter: ["json", "text"]
-//                     },
-//                 }
-//             };
-//     }
-// });
+]);