@hpcc-js/graph 3.2.1 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "3.2.1",
+    "version": "3.3.0",
     "description": "hpcc-js - Viz Graph",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -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"
     },
     "repository": {
         "type": "git",
@@ -69,5 +70,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "ed4453ec6a4a8af9c0beb11b46c7f4365bc0669e"
+    "gitHead": "220704148d2a9cc72a4bfa5160107d6fdf37c914"
 }

package/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,

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

package/src/{graph2 → common}/graphT.ts

@@ -1,5 +1,4 @@
-import { d3Event, drag as d3Drag, Palette, select as d3Select, Selection, Spacer, SVGGlowFilter, SVGZoomWidget, ToggleButton, Utility, Widget, BaseType as D3BaseType } from "@hpcc-js/common";
-import { IconEx, Icons, render } from "@hpcc-js/react";
+import { d3Event, drag as d3Drag, Palette, select as d3Select, Selection, Spacer, SVGGlowFilter, SVGZoomWidget, Button, ToggleButton, Utility, Widget } from "@hpcc-js/common";
 import { Graph2 as GraphCollection, hashSum } from "@hpcc-js/util";
 import { HTMLTooltip } from "@hpcc-js/html";
 import { interpolateNumberArray as d3InterpolateNumberArray } from "d3-interpolate";
@@ -7,17 +6,18 @@ import "d3-transition";
 import { interpolatePath as d3InterpolatePath } from "d3-interpolate-path";
 import { Circle, Dagre, ForceDirected, ForceDirectedAnimated, Graphviz, ILayout, Null } from "./layouts/index.ts";
 import { Options as FDOptions } from "./layouts/forceDirectedWorker.ts";
-import type { VertexBaseProps, EdgeBaseProps, GraphDataProps, HierarchyBase, SubgraphBaseProps } from "./layouts/placeholders.ts";
+import type { BaseProps, VertexBaseProps, EdgeBaseProps, GraphDataProps, HierarchyBase, SubgraphBaseProps } from "./layouts/placeholders.ts";
 import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder, isEdgePlaceholder } from "./layouts/placeholders.ts";
 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);
 
 export {
+    BaseProps,
     GraphDataProps,
     SubgraphBaseProps,
     VertexBaseProps,
@@ -43,7 +43,7 @@ function dragEnd<V extends VertexBaseProps>(n: VertexPlaceholder<V>) {
     n.fy = n.sy = undefined;
 }
 
-export type RendererT<T> = (props: T, element: SVGGElement) => void;
+export type RendererT<T> = (props: T, element: SVGGElement) => unknown;
 
 export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E extends EdgeBaseProps<V>> extends SVGZoomWidget {
 
@@ -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()) {
@@ -241,24 +243,6 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
         return this._iconBar.buttons();
     }
 
-    protected _categories: IconEx[] = [];
-    categories(): IconEx[];
-    categories(_: IconEx[]): this;
-    categories(_?: IconEx[]): IconEx[] | this {
-        if (_ === void 0) return this._categories;
-        this._categories = _;
-        return this;
-    }
-
-    protected _annotations: IconEx[] = [];
-    annotations(): IconEx[];
-    annotations(_: IconEx[]): this;
-    annotations(_?: IconEx[]): IconEx[] | this {
-        if (_ === void 0) return this._annotations;
-        this._annotations = _;
-        return this;
-    }
-
     private _origData: GraphDataProps<SG, V, E> = {
         subgraphs: [],
         vertices: [],
@@ -485,7 +469,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
                             ...context.vertexMapper(d.props, d.props.origData)
                         }
                     );
-                    context._vertexRenderer(props, this);
+                    d.renderResult = context._vertexRenderer(props, this);
                 }
             })
             .transition().duration(this.transitionDuration())
@@ -579,7 +563,10 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
 
     moveEdgePlaceholder(ep: EdgePlaceholder<V, E>, transition: boolean): this {
         const edgeLayout = {
-            ...this._layoutAlgo.edgePath(ep as any, this.edgeArcDepth())
+            ...this._layoutAlgo.edgePath(ep as any, this.edgeArcDepth()),
+            markerStart: `url(#${this.id()}_circleFoot)`,
+            markerEnd: `url(#${this.id()}_arrowHead)`,
+
         };
         const context = this;
         if (this._edgeRenderer && ep.element) {
@@ -596,7 +583,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
                             strokeWidth: ep.props.strokeWidth ?? context.edgeStrokeWidth(),
                             color: ep.props.stroke ?? context.edgeColor()
                         };
-                        context._edgeRenderer({ ...edgeLayout, ...ep.props, ...updated }, ep.element.node());
+                        ep.renderResult = context._edgeRenderer({ graphInstance: context, ...edgeLayout, ...ep.props, ...updated }, ep.element.node());
                     };
                 });
         }
@@ -639,7 +626,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
             if (this._transformScale > this.maxScale() + (this._transformScale - this.maxScale()) / 2) {
                 scale = this.maxScale() + (this._transformScale - this.maxScale()) / 2;
             } else if (this._transformScale < this.minScale() - (this._transformScale - this.minScale()) / 13) {
-                // scale = this.minScale() - (this._transformScale - this.minScale()) / 13;
+                scale = this.minScale() - (this._transformScale - this.minScale()) / 13;
             }
         }
         return Math.round(pos * scale * rf) / rf;
@@ -654,7 +641,14 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
     projectPlacholder(vp: VertexPlaceholder<V>) {
         return {
             x: this.project(vp.fx !== undefined ? vp.fx : vp.x),
-            y: this.project(vp.fy !== undefined ? vp.fy : vp.y)
+            y: this.project(vp.fy !== undefined ? vp.fy : vp.y),
+        };
+    }
+
+    rprojectPlacholder(vp: VertexPlaceholder<V>) {
+        return {
+            x: this.rproject(vp.fx !== undefined ? vp.fx : vp.x),
+            y: this.rproject(vp.fy !== undefined ? vp.fy : vp.y),
         };
     }
 
@@ -663,26 +657,9 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
     }
 
     updateCategories() {
-        render(Icons, {
-            icons: this._categories.map((c): IconEx => ({
-                ...c,
-                id: this.categoryID(c.id),
-                fill: c.fill || "transparent",
-                imageCharFill: c.imageCharFill || this._catPalette(c.id)
-            }))
-        }, this._svgDefsCat.node());
     }
 
     updateAnnotations() {
-        render(Icons, {
-            icons: this._annotations.map((c): IconEx => ({
-                ...c,
-                id: this.categoryID(c.id, "ann"),
-                shape: c.shape || "square",
-                height: c.height || 12,
-                fill: c.fill || this._catPalette(c.id)
-            }))
-        }, this._svgDefsAnn.node());
     }
 
     private _edgeRenderer: RendererT<E>;
@@ -831,7 +808,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
                         ...context.vertexMapper(d.props, d.props.origData)
                     }
                 );
-                context._vertexRenderer(props, this);
+                d.renderResult = context._vertexRenderer(props, this);
             })
             ;
         return this;
@@ -900,15 +877,66 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
         return this;
     }
 
+    addMarkers(clearFirst: boolean = false) {
+        if (clearFirst) {
+            this._svgDefs.select("#" + this._id + "_arrowHead").remove();
+            this._svgDefs.select("#" + this._id + "_circleFoot").remove();
+            this._svgDefs.select("#" + this._id + "_circleHead").remove();
+        }
+        this._svgDefs.append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_arrowHead")
+            .attr("viewBox", "0 0 10 10")
+            .attr("refX", 10)
+            .attr("refY", 5)
+            .attr("markerWidth", 8)
+            .attr("markerHeight", 8)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("polyline")
+            .attr("points", "0,0 10,5 0,10 1,5")
+            ;
+        this._svgDefs.append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_circleFoot")
+            .attr("viewBox", "0 0 10 10")
+            .attr("refX", 1)
+            .attr("refY", 5)
+            .attr("markerWidth", 7)
+            .attr("markerHeight", 7)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("circle")
+            .attr("cx", 5)
+            .attr("cy", 5)
+            .attr("r", 4)
+            ;
+        this._svgDefs.append("marker")
+            .attr("class", "marker")
+            .attr("id", this._id + "_circleHead")
+            .attr("viewBox", "0 0 10 10")
+            .attr("refX", 9)
+            .attr("refY", 5)
+            .attr("markerWidth", 7)
+            .attr("markerHeight", 7)
+            .attr("markerUnits", "strokeWidth")
+            .attr("orient", "auto")
+            .append("circle")
+            .attr("cx", 5)
+            .attr("cy", 5)
+            .attr("r", 4)
+            ;
+    }
+
     enter(domNode, element) {
         super.enter(domNode, element);
 
         const svg = this.locateSVGNode(domNode);
         this._svgDefs = d3Select(svg).select<SVGDefsElement>("defs");
         this._centroidFilter = new SVGGlowFilter(this._svgDefs, this._id + "_glow");
-
         this._svgDefsCat = this._svgDefs.append("g");
         this._svgDefsAnn = this._svgDefs.append("g");
+        this.addMarkers();
         this._subgraphG = this._renderElement.append("g");
         this._edgeG = this._renderElement.append("g");
         this._vertexG = this._renderElement.append("g");
@@ -1036,6 +1064,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();

package/src/common/index.ts

@@ -0,0 +1,3 @@
+export * from "../react/dataGraph.ts";
+export * from "./graphT.ts";
+export * from "./sankeyGraph.ts";

package/src/{graph2 → common}/layouts/dagre.ts

@@ -111,9 +111,22 @@ export class Dagre extends Layout {
         let points = [];
         let hasNaN = false;
         if (ep.points) {
-            points = ep.points.map(p => {
-                const x = this._graph.project(p[0], false);
-                const y = this._graph.project(p[1], false);
+            const line = this.edgeLine(ep);
+            points = ep.points.map((p, idx) => {
+                let x = NaN;
+                let y = NaN;
+                if (idx === 0) {
+                    x = this._graph.rproject(line.source.x);
+                    y = this._graph.rproject(line.source.y);
+                } else if (idx === ep.points.length - 1) {
+                    x = this._graph.rproject(line.target.x);
+                    y = this._graph.rproject(line.target.y);
+                } else {
+                    x = p[0];
+                    y = p[1];
+                }
+                x = this._graph.project(x, false);
+                y = this._graph.project(y, false);
                 if (isNaN(x) || isNaN(y)) {
                     hasNaN = true;
                 }

package/src/{graph2 → common}/layouts/graphviz.ts

@@ -38,7 +38,7 @@ export class Graphviz extends Layout {
                 case "vertex":
                     delete item["fx"];
                     delete item["fy"];
-                    const bbox = item.element.node().getBBox();
+                    const bbox = this.vertexSize(item);
                     const retVal = {
                         id: item.id,
                         text: item.props.text,
@@ -102,9 +102,22 @@ export class Graphviz extends Layout {
         let points = [];
         let hasNaN = false;
         if (ep.points) {
-            points = ep.points.map(p => {
-                const x = this._graph.project(p[0], false);
-                const y = this._graph.project(p[1], false);
+            const line = this.edgeLine(ep);
+            points = ep.points.map((p, idx) => {
+                let x = NaN;
+                let y = NaN;
+                if (idx === 0) {
+                    x = this._graph.rproject(line.source.x);
+                    y = this._graph.rproject(line.source.y);
+                } else if (idx === ep.points.length - 1) {
+                    x = this._graph.rproject(line.target.x);
+                    y = this._graph.rproject(line.target.y);
+                } else {
+                    x = p[0];
+                    y = p[1];
+                }
+                x = this._graph.project(x, false);
+                y = this._graph.project(y, false);
                 if (isNaN(x) || isNaN(y)) {
                     hasNaN = true;
                 }

package/src/{graph2 → common}/layouts/layout.ts

@@ -2,9 +2,20 @@ import { Graph2 as GraphCollection } from "@hpcc-js/util";
 import { curveBasis as d3CurveBasis, curveCardinal as d3CurveCardinal, line as d3Line } from "d3-shape";
 import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder } from "./placeholders.ts";
 import { EdgeLayout } from "./tree.ts";
+import { intersection } from "./pathIntersection.ts";
 
 export type Point = [number, number];
 
+interface Position {
+    x: number;
+    y: number;
+}
+
+interface Line {
+    source: Position;
+    target: Position;
+}
+
 const lineBasis = d3Line<Point>()
     .x(d => d[0])
     .y(d => d[1])
@@ -27,11 +38,15 @@ export interface ILayout {
 
 export type Size = { width: number, height: number };
 export interface IGraph {
+    id(): string;
     size(): Size;
     graphData(): GraphCollection<VertexPlaceholder, EdgePlaceholder, SubgraphPlaceholder>;
 
-    project(pos: number, clip: boolean);
+    project(pos: number, clip?: boolean);
+    rproject(pos: number);
+
     projectPlacholder(vp: VertexPlaceholder);
+    rprojectPlacholder(vp: VertexPlaceholder);
 
     moveSubgraphs(transition: boolean): this;
 
@@ -78,10 +93,38 @@ export class Layout implements ILayout {
         return [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2];
     }
 
+    vertexSize(vp: VertexPlaceholder): { width: number, height: number } {
+        const size = vp.renderResult?.extent ? vp.renderResult.extent : vp.element.node().getBBox();
+        const retVal = {
+            width: this._graph.rproject(size.width),
+            height: this._graph.rproject(size.height)
+        };
+        return retVal;
+    }
+
+    edgeLine(ep: EdgePlaceholder): Line {
+        const sPos = { ...this._graph.projectPlacholder(ep.source), w: ep.source?.renderResult?.extent?.width ?? 0, h: ep.source?.renderResult?.extent?.height ?? 0 };
+        const tPos = { ...this._graph.projectPlacholder(ep.target), w: ep.target?.renderResult?.extent?.width ?? 0, h: ep.target?.renderResult?.extent?.height ?? 0 };
+        const sIntersect = intersection(sPos, { start: sPos, end: tPos });
+        const tIntersect = intersection(tPos, { start: sPos, end: tPos });
+        return {
+            source: {
+                x: sIntersect ? sIntersect.x : sPos.x,
+                y: sIntersect ? sIntersect.y : sPos.y
+            },
+            target: {
+                x: tIntersect ? tIntersect.x : tPos.x,
+                y: tIntersect ? tIntersect.y : tPos.y
+            }
+        };
+    }
+
     edgePath(ep: EdgePlaceholder, curveDepth: number): { path: string, labelPos: Point } {
-        const sPos = this._graph.projectPlacholder(ep.source);
-        const tPos = this._graph.projectPlacholder(ep.target);
-        const points: Point[] = [[sPos.x, sPos.y], [tPos.x, tPos.y]];
+        const line = this.edgeLine(ep);
+        const points: Point[] = [
+            [line.source.x, line.source.y],
+            [line.target.x, line.target.y]
+        ];
 
         if (curveDepth) {
             const dx = points[0][0] - points[1][0];
@@ -92,7 +135,7 @@ export class Layout implements ILayout {
                 const midY = (points[0][1] + points[1][1]) / 2 + dx * curveDepth / 100;
                 return {
                     path: lineCardinal([points[0], [midX, midY], points[1]]),
-                    labelPos: [midX, midY]
+                    labelPos: [midX, midY],
                 };
             }
         }

package/src/common/layouts/pathIntersection.ts

@@ -0,0 +1,67 @@
+export interface Pos {
+    x: number;
+    y: number;
+}
+
+export interface Segment {
+    start: Pos;
+    end: Pos;
+}
+
+export interface Rectangle {
+    topLeft: Pos;
+    topRight: Pos;
+    bottomLeft: Pos;
+    bottomRight: Pos;
+}
+
+export interface Rectangle2 {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+
+function rectEdges(rect: Rectangle) {
+    return [
+        { start: rect.topLeft, end: rect.topRight },
+        { start: rect.topRight, end: rect.bottomRight },
+        { start: rect.bottomRight, end: rect.bottomLeft },
+        { start: rect.bottomLeft, end: rect.topLeft }
+    ];
+}
+
+function lineIntersection(segment1: Segment, segment2: Segment) {
+    const { x: x1, y: y1 } = segment1.start;
+    const { x: x2, y: y2 } = segment1.end;
+    const { x: x3, y: y3 } = segment2.start;
+    const { x: x4, y: y4 } = segment2.end;
+
+    const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+    if (denom === 0) return null; // Parallel lines
+
+    const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
+    const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / denom;
+
+    if (t > 0 && t < 1 && u > 0 && u < 1) {
+        return {
+            x: x1 + t * (x2 - x1),
+            y: y1 + t * (y2 - y1)
+        };
+    }
+
+    return null; // No intersection
+}
+
+export function intersection(rect: Rectangle2, line: Segment) {
+    for (const edge of rectEdges({
+        topLeft: { x: rect.x - rect.w / 2, y: rect.y - rect.h / 2 },
+        topRight: { x: rect.x + rect.w / 2, y: rect.y - rect.h / 2 },
+        bottomRight: { x: rect.x + rect.w / 2, y: rect.y + rect.h / 2 },
+        bottomLeft: { x: rect.x - rect.w / 2, y: rect.y + rect.h / 2 }
+    })) {
+        const intersectionPoint = lineIntersection(edge, line);
+        if (intersectionPoint) return intersectionPoint;
+    }
+    return null;
+}

package/src/{graph2 → common}/layouts/placeholders.ts

@@ -31,7 +31,10 @@ export interface EdgeBaseProps<V extends VertexBaseProps = VertexBaseProps> exte
     strokeDasharray?: string;
     strokeWidth?: number;
     stroke?: string;
+    path?: string;
     fontFamily?: string;
+    markerStart?: string;
+    markerEnd?: string;
 }
 
 export interface HierarchyBase<SG extends SubgraphBaseProps, V extends VertexBaseProps> {
@@ -52,6 +55,9 @@ export interface SubgraphPlaceholder<SG extends SubgraphBaseProps = SubgraphBase
     element?: Selection<SVGGElement, SubgraphPlaceholder<SG>, SVGGElement, any>;
     props: SG;
 
+    //  render result properties  ---
+    renderResult?: unknown;
+
     //  Dagre / Graphviz Properties  ---
     x?: number; // The node’s current x-position
     y?: number; // The node’s current y-position
@@ -62,6 +68,9 @@ export interface VertexPlaceholder<V extends VertexBaseProps = VertexBaseProps>
     element?: Selection<SVGGElement, VertexPlaceholder<V>, SVGGElement, any>;
     props: V;
 
+    //  render result properties  ---
+    renderResult?: any;
+
     //  D3 Assigned Properties  ---
     index?: number; // The node’s zero-based index into nodes
     x?: number; // The node’s current x-position
@@ -91,6 +100,9 @@ export interface EdgePlaceholder<V extends VertexBaseProps = VertexBaseProps, E
     source: VertexPlaceholder<V>; // The link’s source node
     target: VertexPlaceholder<V>; // The link’s target node
 
+    //  render result properties  ---
+    renderResult?: any;
+
     //  D3 Assigned Properties  ---
     index?: number; // The zero-based index into links, assigned by this method
 

package/src/{graph2 → common}/layouts/tree.ts

@@ -236,8 +236,7 @@ export class Tree extends TidyTreeBase {
     }
 
     edgePath(ep: EdgePlaceholder, curveDepth: number): EdgeLayout {
-        const source = this._graph.projectPlacholder(ep.source);
-        const target = this._graph.projectPlacholder(ep.target);
+        const { source, target } = this.edgeLine(ep);
         return {
             path: linkHorizontal({ source, target }),
             labelPos: this.center([[source.x, source.y], [target.x, target.y]])
@@ -294,8 +293,7 @@ export class Dendrogram extends TidyTreeBase {
     }
 
     edgePath(ep: EdgePlaceholder, curveDepth: number): EdgeLayout {
-        const source = this._graph.projectPlacholder(ep.source);
-        const target = this._graph.projectPlacholder(ep.target);
+        const { source, target } = this.edgeLine(ep);
         return {
             path: linkHorizontal({ source, target }),
             labelPos: this.center([[source.x, source.y], [target.x, target.y]])

package/src/{graph2 → 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 {

package/src/html/annotation.ts

@@ -0,0 +1,71 @@
+import { svg } from "lit-html";
+import { Palette, Utility } from "@hpcc-js/common";
+import { extend } from "./component.ts";
+import { TextBox } from "./textBox.ts";
+
+export interface AnnotationProps {
+    text: string;
+    fontFamily?: string;
+    fontSize?: number;
+    fill?: string;
+    stroke?: string;
+}
+
+export const annotation = ({
+    text,
+    fontFamily = "FontAwesome",
+    fontSize = 8,
+    fill = "gray",
+    stroke = "darkgray"
+}: AnnotationProps) => {
+    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,
+        cornerRadius: 0
+    });
+    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: AnnotationProps[];
+    padding?: number;
+}
+
+export const annotations = ({
+    annotations,
+    padding = 3,
+}: AnnotationsProps) => {
+    let xOffset = 0;
+    const items = annotations.map(annotationProp => {
+        const ann = annotation(annotationProp);
+        const itemSvg = extend(svg`\
+<g transform="translate(${xOffset + ann.extent.width / 2} 0)">
+    ${ann}
+</g>`, ann.extent.width, ann.extent.height);
+        xOffset += ann.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);
+};
+