@hpcc-js/graph 2.86.0 → 3.1.0

package/src/Sankey.ts

@@ -1,5 +1,4 @@
-import { Palette, PropertyExt, SVGWidget, Utility } from "@hpcc-js/common";
-import { max as d3Max, mean as d3Mean, median as d3Median, min as d3Min, sum as d3Sum } from "d3-array";
+import { Palette, PropertyExt, SVGWidget, Utility, max as d3Max, mean as d3Mean, median as d3Median, min as d3Min, sum as d3Sum } from "@hpcc-js/common";
 import { sankey as d3Sankey, sankeyLinkHorizontal as d3SankeyLinkHorizontal } from "d3-sankey";
 import { select as d3Select } from "d3-selection";
 
@@ -46,28 +45,31 @@ export class SankeyColumn extends PropertyExt {
                 });
         }
     }
-
-    column: { (): string; (_: string): SankeyColumn; };
-    aggrType: { (): string; (_: string): SankeyColumn; };
-    aggrColumn: { (): string; (_: string): SankeyColumn; };
-
 }
 SankeyColumn.prototype._class += " graph_Sankey.SankeyColumn";
 
-SankeyColumn.prototype.publish("column", null, "set", "Field", function () { return this._owner ? this._owner.columns() : []; }, { optional: true });
+export interface SankeyColumn {
+    column(): string;
+    column(_: string): this;
+    aggrType(): string;
+    aggrType(_: string): this;
+    aggrColumn(): string;
+    aggrColumn(_: string): this;
+}
+
+SankeyColumn.prototype.publish("column", null, "set", "Field", function (this: SankeyColumn) { return this._owner ? this._owner.columns() : []; }, { optional: true });
 SankeyColumn.prototype.publish("aggrType", null, "set", "Aggregation Type", [null, "mean", "median", "sum", "min", "max"], { optional: true, disable: w => !w._owner || w._owner.mappings().indexOf(w) === 0 });
-SankeyColumn.prototype.publish("aggrColumn", null, "set", "Aggregation Field", function () { return this._owner ? this._owner.columns() : []; }, { optional: true, disable: w => !w._owner || !w.aggrType() || w._owner.mappings().indexOf(w) === 0 });
+SankeyColumn.prototype.publish("aggrColumn", null, "set", "Aggregation Field", function (this: SankeyColumn) { return this._owner ? this._owner.columns() : []; }, { optional: true, disable: w => !w._owner || !w.aggrType() || w._owner.mappings().indexOf(w) === 0 });
 
 export class Sankey extends SVGWidget {
     Column;
-    _palette;
     _d3Sankey;
     _d3SankeyPath;
     _selection;
 
     constructor() {
         super();
-        Utility.SimpleSelectionMixin.call(this);
+        Utility.SimpleSelectionMixin.call(this, false);
         this._drawStartPos = "origin";
     }
 
@@ -80,7 +82,7 @@ export class Sankey extends SVGWidget {
         const vertexIndex = {};
         const valueIdx = 2;
         const mappings = this.mappings().filter(mapping => mapping.valid());
-        mappings.forEach(function (mapping, idx) {
+        mappings.forEach((mapping, idx) => {
             const view = this._db.rollupView([mapping.column()]);
             view.entries().forEach(function (row) {
                 const id = mapping.column() + ":" + idx + ":" + row.key;
@@ -95,8 +97,8 @@ export class Sankey extends SVGWidget {
                     vertexIndex[id] = retVal.vertices.length - 1;
                 }
             }, this);
-        }, this);
-        mappings.forEach(function (mapping, idx) {
+        });
+        mappings.forEach((mapping, idx) => {
             if (idx < mappings.length - 1) {
                 const mapping2 = mappings[idx + 1];
                 const view = this._db.rollupView([mapping.column(), mapping2.column()]);
@@ -113,7 +115,7 @@ export class Sankey extends SVGWidget {
                     });
                 });
             }
-        }, this);
+        });
 
         return retVal;
     }
@@ -151,7 +153,7 @@ export class Sankey extends SVGWidget {
         const link = element.selectAll(".link").data(sankeyData.edges);
         link.enter().append("path")
             .attr("class", "link")
-            .each(function () {
+            .each(function (this: HTMLElement) {
                 d3Select(this)
                     .append("title")
                     ;
@@ -173,13 +175,13 @@ export class Sankey extends SVGWidget {
         node.enter().append("g")
             .attr("class", "node")
             .call(this._selection.enter.bind(this._selection))
-            .on("click", function (d) {
+            .on("click", function (this: HTMLElement, d) {
                 context.click(context.rowToObj(d.origRow[0]), "", context._selection.selected(this));
             })
-            .on("dblclick", function (d) {
+            .on("dblclick", function (this: HTMLElement, d) {
                 context.dblclick(context.rowToObj(d.origRow[0]), "", context._selection.selected(this));
             })
-            .each(function () {
+            .each(function (this: HTMLElement) {
                 const gElement = d3Select(this);
                 gElement.append("rect");
                 gElement.append("text");
@@ -201,7 +203,7 @@ export class Sankey extends SVGWidget {
                 if (d.y0) _y = d.y0;
                 return "translate(" + (_x + strokeWidth) + "," + (_y + strokeWidth) + ")";
             })
-            .each(function () {
+            .each(function (this: HTMLElement) {
                 const n = d3Select(this);
                 n.select("rect")
                     .attr("height", function (d: any) { return d.y1 - d.y0; })
@@ -255,15 +257,6 @@ export class Sankey extends SVGWidget {
         */
     }
 
-    paletteID: { (): string; (_: string): Sankey; };
-    mappings: { (): SankeyColumn[]; (_: SankeyColumn[]): Sankey; };
-    vertexStrokeWidth: { (): number; (_: number): Sankey; };
-    vertexStrokeColor: { (): string; (_: string): Sankey; };
-    vertexWidth: { (): number; (_: number): Sankey; };
-    vertexPadding: { (): number; (_: number): Sankey; };
-    xAxisMovement: { (): boolean; (_: boolean): Sankey; };
-    yAxisMovement: { (): boolean; (_: boolean): Sankey; };
-
     exit(domNode, element) {
         super.exit(domNode, element);
     }
@@ -279,6 +272,26 @@ Sankey.prototype._class += " graph_Sankey";
 Sankey.prototype.Column = SankeyColumn;
 Sankey.prototype.mixin(Utility.SimpleSelectionMixin);
 
+export interface Sankey {
+    _palette;
+    paletteID(): string;
+    paletteID(_: string): this;
+    mappings(): SankeyColumn[];
+    mappings(_: SankeyColumn[]): this;
+    vertexStrokeWidth(): number;
+    vertexStrokeWidth(_: number): this;
+    vertexStrokeColor(): string;
+    vertexStrokeColor(_: string): this;
+    vertexWidth(): number;
+    vertexWidth(_: number): this;
+    vertexPadding(): number;
+    vertexPadding(_: number): this;
+    xAxisMovement(): boolean;
+    xAxisMovement(_: boolean): this;
+    yAxisMovement(): boolean;
+    yAxisMovement(_: boolean): this;
+}
+
 Sankey.prototype._palette = Palette.ordinal("default");
 
 Sankey.prototype.publish("paletteID", "default", "set", "Color palette for this widget", Sankey.prototype._palette.switch());

package/src/Vertex.ts

@@ -126,7 +126,7 @@ export class Vertex extends SVGWidget {
             const annotations = element.selectAll(".annotation").data(this.annotationIcons());
             const annotationsEnter = annotations.enter().append("g")
                 .attr("class", "annotation")
-                .each(function (_d, idx) {
+                .each(function (this: HTMLElement, _d, idx) {
                     context._annotationWidgets[idx] = new Icon()
                         .target(this)
                         .shape("square")
@@ -164,7 +164,7 @@ export class Vertex extends SVGWidget {
                 })
                 ;
             annotations.exit()
-                .each(function (_d, idx) {
+                .each(function (this: HTMLElement, _d, idx) {
                     const element2 = d3Select(this);
                     context._annotationWidgets[idx].target(null);
                     delete context._annotationWidgets[idx];

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/graph";
-export const PKG_VERSION = "2.86.0";
-export const BUILD_VERSION = "2.106.0";
+export const PKG_VERSION = "3.1.0";
+export const BUILD_VERSION = "3.2.0";

package/src/graph2/dataGraph.ts

@@ -1,8 +1,8 @@
-import { PropertyExt, publish, Widget } from "@hpcc-js/common";
+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";
-import { HierarchyBase } from "./layouts/placeholders";
+import { Graph2 } from "./graph.ts";
+import { HierarchyBase } from "./layouts/placeholders.ts";
 
 //  Backward compatibility layer  ---
 export type IVertex3 = Vertex3Props;
@@ -15,11 +15,6 @@ export function toJsonObj<T>(row, columns): T {
 
 export class AnnotationColumn extends PropertyExt {
 
-    @publish("", "set", "Annotation column (boolean)", function (this: AnnotationColumn) { return this._owner.vertexColumns(); })
-    columnID: publish<this, string>;
-    @publish("", "string", "Annotation ID")
-    annotationID: publish<this, string>;
-
     protected _owner: DataGraph;
     owner(): DataGraph;
     owner(_: DataGraph): this;
@@ -35,69 +30,17 @@ export class AnnotationColumn extends PropertyExt {
 }
 AnnotationColumn.prototype._class += " graph_AnnotationColumn";
 
-export class DataGraph extends Graph2 {
-
-    @publish([], "any", "Subgraph Columns", null, { internal: true })
-    subgraphColumns: publish<this, string[]>;
-    @publish([], "any", "Subgraphs", null, { internal: true })
-    subgraphs: publish<this, Array<Array<string | number | boolean>>>;
-    @publish("", "string", "Subgraph ID column")
-    subgraphIDColumn: publish<this, string>;
-    @publish("", "string", "Subgraph Label column")
-    subgraphLabelColumn: publish<this, string>;
-
-    @publish([], "any", "Vertex Columns", null, { internal: true })
-    vertexColumns: publish<this, string[]>;
-    @publish([], "any", "Vertices (Nodes)", null, { internal: true })
-    vertices: publish<this, Array<Array<string | number | boolean>>>;
-    @publish("", "set", "Vertex Category ID column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexCategoryColumn: publish<this, string>;
-    @publish("", "set", "Vertex ID column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexIDColumn: publish<this, string>;
-    @publish("", "set", "Vertex label column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexLabelColumn: publish<this, string>;
-    @publish("", "set", "Vertex centroid column (boolean)", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexCentroidColumn: publish<this, string>;
-    @publish("", "string", "Vertex default image url")
-    vertexImageUrl: publish<this, string>;
-    @publish("", "set", "Vertex image url column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexImageUrlColumn: publish<this, string>;
-    @publish("?", "string", "Vertex default FAChar")
-    vertexFAChar: publish<this, string>;
-    @publish("", "set", "Vertex FAChar column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexFACharColumn: publish<this, string>;
-    @publish("", "set", "Vertex tooltip column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexTooltipColumn: publish<this, string>;
-    @publish([], "propertyArray", "Annotations", null, { autoExpand: AnnotationColumn })
-    vertexAnnotationColumns: publish<this, AnnotationColumn[]>;
-    @publish("", "set", "Vertex expansion FAChar column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true })
-    vertexExpansionFACharColumn: publish<this, string>;
+export interface AnnotationColumn {
+    columnID(): string;
+    columnID(_: string): this;
+    annotationID(): string;
+    annotationID(_: string): this;
+}
 
-    @publish([], "any", "Edge columns", null, { internal: true })
-    edgeColumns: publish<this, string[]>;
-    @publish([], "any", "Edges (Edges)", null, { internal: true })
-    edges: publish<this, Array<Array<string | number | boolean>>>;
-    @publish("", "set", "Edge ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeIDColumn: publish<this, string>;
-    @publish("", "set", "Edge label column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeLabelColumn: publish<this, string>;
-    @publish("", "set", "Edge source ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeSourceColumn: publish<this, string>;
-    @publish("", "set", "Edge target ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeTargetColumn: publish<this, string>;
-    @publish("", "set", "Edge weight column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeWeightColumn: publish<this, string>;
-    @publish("", "set", "Edge color column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true })
-    edgeColorColumn: publish<this, string>;
+AnnotationColumn.prototype.publish("columnID", "", "set", "Annotation column (boolean)", function (this: AnnotationColumn) { return this._owner.vertexColumns(); });
+AnnotationColumn.prototype.publish("annotationID", "", "string", "Annotation ID");
 
-    @publish([], "any", "Subgraph Columns")
-    hierarchyColumns: publish<this, string[]>;
-    @publish([], "any", "Subgraphs")
-    hierarchy: publish<this, Array<Array<string | number | boolean>>>;
-    @publish("", "string", "Subgraph ID column")
-    hierarchyParentIDColumn: publish<this, string>;
-    @publish("", "string", "Subgraph Label column")
-    hierarchyChildIDColumn: publish<this, string>;
+export class DataGraph extends Graph2 {
 
     constructor() {
         super();
@@ -303,3 +246,100 @@ export class DataGraph extends Graph2 {
     }
 }
 DataGraph.prototype._class += " graph_DataGraph";
+
+export interface DataGraph {
+    subgraphColumns(): string[];
+    subgraphColumns(_: string[]): this;
+    subgraphs(): Array<Array<string | number | boolean>>;
+    subgraphs(_: Array<Array<string | number | boolean>>): this;
+    subgraphIDColumn(): string;
+    subgraphIDColumn(_: string): this;
+    subgraphLabelColumn(): string;
+    subgraphLabelColumn(_: string): this;
+
+    vertexColumns(): string[];
+    vertexColumns(_: string[]): this;
+    vertices(): Array<Array<string | number | boolean>>;
+    vertices(_: Array<Array<string | number | boolean>>): this;
+    vertexCategoryColumn(): string;
+    vertexCategoryColumn(_: string): this;
+    vertexIDColumn(): string;
+    vertexIDColumn(_: string): this;
+    vertexLabelColumn(): string;
+    vertexLabelColumn(_: string): this;
+    vertexCentroidColumn(): string;
+    vertexCentroidColumn(_: string): this;
+    vertexImageUrl(): string;
+    vertexImageUrl(_: string): this;
+    vertexImageUrlColumn(): string;
+    vertexImageUrlColumn(_: string): this;
+    vertexFAChar(): string;
+    vertexFAChar(_: string): this;
+    vertexFACharColumn(): string;
+    vertexFACharColumn(_: string): this;
+    vertexTooltipColumn(): string;
+    vertexTooltipColumn(_: string): this;
+    vertexAnnotationColumns(): AnnotationColumn[];
+    vertexAnnotationColumns(_: AnnotationColumn[]): this;
+    vertexExpansionFACharColumn(): string;
+    vertexExpansionFACharColumn(_: string): this;
+
+    edgeColumns(): string[];
+    edgeColumns(_: string[]): this;
+    edges(): Array<Array<string | number | boolean>>;
+    edges(_: Array<Array<string | number | boolean>>): this;
+    edgeIDColumn(): string;
+    edgeIDColumn(_: string): this;
+    edgeLabelColumn(): string;
+    edgeLabelColumn(_: string): this;
+    edgeSourceColumn(): string;
+    edgeSourceColumn(_: string): this;
+    edgeTargetColumn(): string;
+    edgeTargetColumn(_: string): this;
+    edgeWeightColumn(): string;
+    edgeWeightColumn(_: string): this;
+    edgeColorColumn(): string;
+    edgeColorColumn(_: string): this;
+
+    hierarchyColumns(): string[];
+    hierarchyColumns(_: string[]): this;
+    hierarchy(): Array<Array<string | number | boolean>>;
+    hierarchy(_: Array<Array<string | number | boolean>>): this;
+    hierarchyParentIDColumn(): string;
+    hierarchyParentIDColumn(_: string): this;
+    hierarchyChildIDColumn(): string;
+    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("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("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 });
+DataGraph.prototype.publish("vertexCentroidColumn", "", "set", "Vertex centroid column (boolean)", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
+DataGraph.prototype.publish("vertexImageUrl", "", "string", "Vertex default image url");
+DataGraph.prototype.publish("vertexImageUrlColumn", "", "set", "Vertex image url column", function (this: DataGraph) { return this.vertexColumns(); }, { optional: true });
+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("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("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 });
+DataGraph.prototype.publish("edgeTargetColumn", "", "set", "Edge target ID column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true });
+DataGraph.prototype.publish("edgeWeightColumn", "", "set", "Edge weight column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true });
+DataGraph.prototype.publish("edgeColorColumn", "", "set", "Edge color column", function (this: DataGraph) { return this.edgeColumns(); }, { optional: true });
+
+DataGraph.prototype.publish("hierarchyColumns", [], "any", "Subgraph Columns");
+DataGraph.prototype.publish("hierarchy", [], "any", "Subgraphs");
+DataGraph.prototype.publish("hierarchyParentIDColumn", "", "string", "Subgraph ID column");
+DataGraph.prototype.publish("hierarchyChildIDColumn", "", "string", "Subgraph Label column");

package/src/graph2/graph.ts

@@ -1,7 +1,7 @@
-import { React, Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
-// import { IVertexEdgeProps, VertexEdge } from "./edge";
-import { GraphReactT } from "./graphReactT";
-import { GraphDataProps, HierarchyBase } from "./graphT";
+import React from "react";
+import { Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
+import { GraphReactT } from "./graphReactT.ts";
+import { GraphDataProps, HierarchyBase } from "./graphT.ts";
 
 //  Backward compatibility layer  ---
 export type ISubgraph = SubgraphProps;
@@ -50,19 +50,19 @@ export class Graph2 extends GraphReactT<ISubgraph, IVertex, IEdge> {
         return props;
     }
 
-    protected _reactVertexRenderer2: React.FunctionComponent<VertexProps>;
-    vertexRenderer(): React.FunctionComponent<VertexProps>;
-    vertexRenderer(_: React.FunctionComponent<VertexProps>): this;
-    vertexRenderer(_?: React.FunctionComponent<VertexProps>): this | React.FunctionComponent<VertexProps> {
+    protected _reactVertexRenderer2: React.FunctionComponent<any>;
+    vertexRenderer<T extends VertexProps>(): React.FunctionComponent<T>;
+    vertexRenderer<T extends VertexProps>(_: React.FunctionComponent<T>): this;
+    vertexRenderer<T extends VertexProps>(_?: React.FunctionComponent<T>): this | React.FunctionComponent<T> {
         if (!arguments.length) return this._reactVertexRenderer2;
         this._reactVertexRenderer2 = _;
         return this;
     }
 
-    protected _reactCentroidRenderer: React.FunctionComponent<VertexProps>;
-    centroidRenderer(): React.FunctionComponent<VertexProps>;
-    centroidRenderer(_: React.FunctionComponent<VertexProps>): this;
-    centroidRenderer(_?: React.FunctionComponent<VertexProps>): this | React.FunctionComponent<VertexProps> {
+    protected _reactCentroidRenderer: React.FunctionComponent<any>;
+    centroidRenderer<T extends VertexProps>(): React.FunctionComponent<T>;
+    centroidRenderer<T extends VertexProps>(_: React.FunctionComponent<T>): this;
+    centroidRenderer<T extends VertexProps>(_?: React.FunctionComponent<T>): this | React.FunctionComponent<T> {
         if (!arguments.length) return this._reactCentroidRenderer;
         this._reactCentroidRenderer = _;
         return this;

package/src/graph2/graphReactT.ts

@@ -1,11 +1,12 @@
-import { render, React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
-import { GraphT, RendererT } from "./graphT";
+import React from "react";
+import { SubgraphProps, VertexProps, EdgeProps, render } from "@hpcc-js/react";
+import { GraphT, RendererT } from "./graphT.ts";
 
 function adapter<T>(reactRenderer: React.FunctionComponent<T>): RendererT<T> {
     return (props: T, element: SVGGElement) => render(reactRenderer, props, element);
 }
 
-export class GraphReactT<SG extends SubgraphProps, V extends VertexProps, E extends EdgeProps<V>> extends GraphT<SG, V, E>  {
+export class GraphReactT<SG extends SubgraphProps, V extends VertexProps, E extends EdgeProps<V>> extends GraphT<SG, V, E> {
 
     constructor(subgraphRenderer: React.FunctionComponent<SG>, vertexRenderer: React.FunctionComponent<V>, edgeRenderer: React.FunctionComponent<E>) {
         super(adapter(subgraphRenderer), adapter(vertexRenderer), adapter(edgeRenderer));

package/src/graph2/graphT.ts

@@ -1,16 +1,16 @@
-import { d3Event, drag as d3Drag, Palette, select as d3Select, Selection, Spacer, SVGGlowFilter, SVGZoomWidget, ToggleButton, Utility, Widget } from "@hpcc-js/common";
+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 { Graph2 as GraphCollection, hashSum } from "@hpcc-js/util";
 import { HTMLTooltip } from "@hpcc-js/html";
 import { interpolateNumberArray as d3InterpolateNumberArray } from "d3-interpolate";
 import "d3-transition";
 import { interpolatePath as d3InterpolatePath } from "d3-interpolate-path";
-import { Circle, Dagre, ForceDirected, ForceDirectedAnimated, Graphviz, ILayout, Null } from "./layouts/index";
-import { Options as FDOptions } from "./layouts/forceDirectedWorker";
-import type { VertexBaseProps, EdgeBaseProps, GraphDataProps, HierarchyBase, SubgraphBaseProps } from "./layouts/placeholders";
-import { EdgePlaceholder, SubgraphPlaceholder, VertexPlaceholder, isEdgePlaceholder } from "./layouts/placeholders";
-import { Engine, graphviz as gvWorker } from "./layouts/graphvizWorker";
-import { Tree, RadialTree, Dendrogram, RadialDendrogram } from "./layouts/tree";
+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 { 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";
 
@@ -32,7 +32,7 @@ function dragStart<V extends VertexBaseProps>(n: VertexPlaceholder<V>) {
     n.fx = n.sx = n.x;
     n.fy = n.sy = n.y;
 }
-function dragTick(n: VertexPlaceholder<VertexBaseProps>, d: VertexPlaceholder<VertexBaseProps>) {
+function dragTick<V extends VertexBaseProps>(n: VertexPlaceholder<V>, d: VertexPlaceholder<V>) {
     n.fx = n.sx + d.fx - d.sx;
     n.fy = n.sy + d.fy - d.sy;
 }
@@ -88,7 +88,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
     protected _tooltip: HTMLTooltip = new HTMLTooltip();
 
     protected _selection = new Utility.Selection(this);
-    private _dragHandler = d3Drag<Element, VertexPlaceholder<V>>();
+    private _dragHandler = d3Drag<SVGGElement, VertexPlaceholder<V>, SVGGElement>();
 
     protected _catPalette = Palette.ordinal("hpcc10");
     _svgDefs: any;
@@ -195,7 +195,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
                     const event = d3Event();
                     context._selection.click({
                         _id: String(d.id),
-                        element: () => d.element
+                        element: () => d.element as any
                     }, event.sourceEvent);
                     context.selectionChanged();
                     const selected = d.element.classed("selected");
@@ -319,7 +319,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
             const vp = this._graphData.item(item.id);
             return {
                 _id: String(vp.id),
-                element: () => vp.element
+                element: () => vp.element as any
             };
         }));
         return this;
@@ -579,7 +579,7 @@ 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, this.edgeArcDepth())
+            ...this._layoutAlgo.edgePath(ep as any, this.edgeArcDepth())
         };
         const context = this;
         if (this._edgeRenderer && ep.element) {
@@ -605,9 +605,11 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
 
     moveVertexPlaceholder(vp: VertexPlaceholder<V>, transition: boolean, moveNeighbours: boolean): this {
         const { x, y } = this.projectPlacholder(vp);
-        vp.element && (transition ? vp.element.transition().duration(this.transitionDuration()) as unknown as Selection<SVGPathElement, EdgePlaceholder<V, E>, SVGGElement, any> : vp.element)
-            .attr("transform", `translate(${x} ${y})`)
-            ;
+        if (vp.element) {
+            (transition ? vp.element.transition().duration(this.transitionDuration()) as unknown as Selection<SVGPathElement, EdgePlaceholder<V, E>, SVGGElement, any> : vp.element)
+                .attr("transform", `translate(${x} ${y})`)
+                ;
+        }
         if (moveNeighbours) {
             this._graphData.vertexEdges(vp.id).forEach(e => this.moveEdgePlaceholder(e, transition));
         }
@@ -695,14 +697,14 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
     updateEdges(): this {
         const context = this;
         this._edgeG.selectAll(".graphEdge")
-            .data(this._graphData.allEdges(), (d: EdgePlaceholder<V, E>) => d.id)
+            .data(this._graphData.allEdges(), d => (d as EdgePlaceholder<V, E>).id)
             .join(
                 enter => enter.append("g")
                     .attr("class", "graphEdge")
                     .on("click.selectionBag", function (d) {
                         context._selection.click({
                             _id: String(d.id),
-                            element: () => d.element
+                            element: () => d.element as any
                         }, d3Event());
                         context.selectionChanged();
                     })
@@ -761,7 +763,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
     updateVertices(): this {
         const context = this;
         this._vertexG.selectAll(".graphVertex")
-            .data(this._graphData.allVertices(), (d: VertexPlaceholder<V>) => d.id)
+            .data(this._graphData.allVertices(), d => (d as VertexPlaceholder<V>).id)
             .join(
                 enter => enter.append("g")
                     .attr("class", "graphVertex")
@@ -808,7 +810,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
                             context._tooltip.mouseout();
                         }
                     })
-                    .call(this._dragHandler)
+                    .call((sel) => this._dragHandler(sel))
                     .each(function (d) {
                         d.element = d3Select(this);
                     }),
@@ -822,7 +824,7 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
             .classed("centroid", d => d.props.centroid)
             .attr("opacity", d => d.props.hidden ? 0 : 1)
             .attr("filter", d => d.props.centroid ? "url(#" + this.id() + "_glow)" : null)
-            .each(function (this: SVGGElement, d) {
+            .each(function (this: any, d) {
                 const props = context.calcProps(
                     {
                         showLabel: context.showVertexLabels(),
@@ -860,14 +862,14 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
     updateSubgraphs(): this {
         const context = this;
         this._subgraphG.selectAll(".subgraphPlaceholder")
-            .data(this.hasSubgraphs() ? this._graphData.allSubgraphs() : [], (d: SubgraphPlaceholder<SG>) => d.id)
+            .data(this.hasSubgraphs() ? this._graphData.allSubgraphs() : [], d => (d as SubgraphPlaceholder<SG>).id)
             .join(
                 enter => enter.append("g")
                     .attr("class", "subgraphPlaceholder")
                     .on("click.selectionBag", function (d) {
                         context._selection.click({
                             _id: String(d.id),
-                            element: () => d.element
+                            element: () => d.element as any
                         }, d3Event());
                         context.selectionChanged();
                     })
@@ -1310,8 +1312,9 @@ GraphT.prototype.publish("treeRankDirection", "LR", "set", "Direction for Rank N
 GraphT.prototype.publish("wasmFolder", null, "string", "WASM Folder", null, { optional: true, disable: (w: GraphT) => ["DOT", "Neato", "FDP", "TwoPI", "Circo"].indexOf(w.layout()) < 0 });
 
 const _origScale = GraphT.prototype.scale;
+//  @ts-ignore  ---
 GraphT.prototype.scale = function (_?, transitionDuration?) {
-    const retVal = _origScale.apply(this, arguments);
+    const retVal = _origScale.apply(this, arguments as any);
     if (arguments.length) {
         this.zoomTo(_, transitionDuration);
     }

package/src/graph2/index.ts

@@ -1,7 +1,7 @@
-export * from "./graphT";
-export * from "./graphReactT";
-export * from "./graph";
-export * from "./dataGraph";
-export * from "./sankeyGraph";
-export * from "./subgraph";
-export * from "./vertex";
+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";

package/src/graph2/layouts/circle.ts

@@ -1,4 +1,4 @@
-import { Layout } from "./layout";
+import { Layout } from "./layout.ts";
 
 const rads = (degrees: number) => degrees * Math.PI / 180;
 const radius = (vertexCount: number, sideLength: number) => sideLength / (2 * Math.sin(rads(180 / vertexCount)));

package/src/graph2/layouts/dagre.ts

@@ -1,7 +1,7 @@
 import { curveBasis as d3CurveBasis, line as d3Line } from "d3-shape";
-import { dagre, Options } from "./dagreWorker";
-import { Layout, Point } from "./layout";
-import { EdgePlaceholder } from "./placeholders";
+import { dagre, Options } from "./dagreWorker.ts";
+import { Layout, Point } from "./layout.ts";
+import { EdgePlaceholder } from "./placeholders.ts";
 
 const lineBasis = d3Line<Point>()
     .x(d => d[0])