Merge pull request #4331 from GordonSmith/LIT_GRAPH

feat: Add lit-html enabled graph
hpcc-systems · Jan 30, 2025 · a4c4a1d · a4c4a1d
2 parents 81d2379 + 8dec33c
commit a4c4a1d
Show file tree

Hide file tree

Showing 65 changed files with 2,052 additions and 1,132 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,7 +17,9 @@
         }
 
         #placeholder,
-        #placeholder2 {
+        #placeholder1,
+        #placeholder2,
+        #placeholder3 {
             width: 100%;
             height: 500px;
             background-color: #fff;
@@ -26,103 +28,44 @@
     </style>
 
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist/index.min.js"></script>
+
+    <script type="module">
+        import "@hpcc-js/common/font-awesome/css/font-awesome.min.css";
+    </script>
 </head>
 
 <body onresize="doResize()">
     <h1>ESM Quick Test</h1>
-    <div id="placeholder2"></div>
+    <div id="placeholder1"></div>
     <script type="module">
-        import { Graph2 } from "./src/index.ts";
+        import { Test6 as Test } from "./tests/index.ts";
 
-        import "@hpcc-js/common/font-awesome/css/font-awesome.min.css";
-
-        const nodeCount = 500;
-
-        const categories = [
-            { id: 0, imageChar: "fa-user" },
-            { id: 1, imageChar: "fa-home" }
-        ];
+        new Test()
+            .target("placeholder1")
+            .render()
+            ;
+    </script>
+    <h1>ESM Quick Test</h1>
+    <div id="placeholder2"></div>
+    <script type="module">
+        import { Test1 as Test } from "./tests/index.ts";
 
-        new Graph2()
-            .categories(categories)
-            .data(createData())
+        new Test()
             .target("placeholder2")
-            .layout("ForceDirected")
-            .applyScaleOnLayout(true)
-            .allowDragging(false)
             .render()
             ;
-
-        function createData() {
-            const rawData = {
-                "nodes": Array.from({ length: nodeCount }, (_, i) => {
-                    return { "name": i + 1, "type": "number" }
-                }),
-                "links": Array.from({ length: nodeCount }, (_, i) => {
-                    return { "source": Math.floor(Math.sqrt(i)), "target": i };
-                }).slice(1)
-            };
-            const vertices = rawData.nodes.map(function (node, idx) {
-                return {
-                    categoryID: 0,
-                    id: idx,
-                    text: "" + node.name,
-                    textFontFamily: "monospace"
-                };
-            });
-            return {
-                vertices: vertices,
-                edges: rawData.links.map(function (link, idx) {
-                    return {
-                        id: idx,
-                        source: vertices[link.source],
-                        target: vertices[link.target],
-                        label: link.name,
-                        fontFamily: "monospace"
-                    };
-                }),
-            };
-        }
     </script>
-    <div id="placeholder"></div>
+    <div id="placeholder3"></div>
     <script type="module">
-        import { SankeyGraph } from "./src/index.ts";
-
-        import "@hpcc-js/common/font-awesome/css/font-awesome.min.css";
+        import { Test3 as Test } from "./tests/index.ts";
 
-        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],
-            ])
+        new Test()
+            .target("placeholder3")
             .render()
             ;
     </script>
     <script>
         function doResize() {
-            window.__widget?.resize()?.render();
         }
     </script>
 </body>

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;
+}