@hpcc-js/graph 3.5.3 → 3.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/graph",
-    "version": "3.5.3",
+    "version": "3.6.1",
     "description": "hpcc-js - Viz Graph",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -38,18 +38,18 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/api": "^3.4.3",
-        "@hpcc-js/common": "^3.5.3",
-        "@hpcc-js/html": "^3.3.3",
-        "@hpcc-js/react": "^3.4.3",
-        "@hpcc-js/util": "^3.4.3"
+        "@hpcc-js/api": "^3.4.5",
+        "@hpcc-js/common": "^3.6.1",
+        "@hpcc-js/html": "^3.3.5",
+        "@hpcc-js/react": "^3.4.5",
+        "@hpcc-js/util": "^3.4.4"
     },
     "optionalPeerDependencies": {
         "react": ">=17.0.0"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.7.0",
-        "@hpcc-js/wasm-graphviz": "1.15.0",
+        "@hpcc-js/esbuild-plugins": "^1.8.0",
+        "@hpcc-js/wasm-graphviz": "1.17.0",
         "@types/d3-transition": "1.3.6",
         "@types/dagre": "0.7.53",
         "d3-force": "^1",
@@ -73,5 +73,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "0289b8552e19395a8da9b70a154821cf70ce42e7"
+    "gitHead": "70194f16ed27ea1167af126b35cbf4af5f181be9"
 }

package/src/common/graphT.css

@@ -30,4 +30,10 @@
 
 .graph_GraphT g.selected circle {
     stroke: navy !important;
+}
+
+.graph_GraphT .graphVertex:focus,
+.graph_GraphT .graphVertex:focus-visible {
+    outline: 2px solid #0078d4;
+    outline-offset: 2px;
 }

package/src/common/graphT.ts

@@ -747,6 +747,34 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
                     .on("contextmenu", function (this: SVGElement, d) {
                         d3Event().preventDefault();
                     })
+                    .on("keydown", function (this: SVGElement, d) {
+                        if (!context.tabNavigation()) return;
+                        const event = d3Event() as KeyboardEvent;
+                        const isSpace = event.code === "Space" || event.key === " " || event.key === "Spacebar";
+                        const isEnter = event.key === "Enter";
+                        if (!(isSpace || isEnter)) return;
+
+                        event.preventDefault();
+                        const selectionItem = {
+                            _id: String(d.id),
+                            element: () => d.element as any
+                        };
+                        if (event.ctrlKey || event.metaKey) {
+                            if (context._selection.isSelected(selectionItem)) {
+                                context._selection.remove(selectionItem);
+                            } else {
+                                context._selection.append(selectionItem);
+                            }
+                        } else {
+                            context._selection.clear();
+                            context._selection.append(selectionItem);
+                        }
+
+                        context.selectionChanged();
+                        const selected = d.element.classed("selected");
+                        const eventOrigin = context.resolveEventOrigin();
+                        context.vertex_click(d.props.origData || d.props, "", selected, eventOrigin);
+                    })
                     .on("mousein", function (d) {
                         Utility.safeRaise(this);
                         context.highlightVertex(d3Select(this), d);
@@ -798,6 +826,10 @@ 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)
+            .attr("tabindex", d => context.tabNavigation() && !d.props.hidden ? 0 : null)
+            .attr("role", context.tabNavigation() ? "button" : null)
+            .attr("aria-label", d => context.tabNavigation() ? context.vertexAriaLabel(d) : null)
+            .attr("aria-hidden", d => d.props.hidden ? "true" : null)
             .each(function (this: any, d) {
                 const props = context.calcProps(
                     {
@@ -815,6 +847,10 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
         return { ...props };
     }
 
+    protected vertexAriaLabel(d: VertexPlaceholder<V>): string {
+        return d.props?.text || `Vertex ${d.id}`;
+    }
+
     hasSubgraphs() {
         switch (this.layout()) {
             case "DOT":
@@ -1008,6 +1044,21 @@ export class GraphT<SG extends SubgraphBaseProps, V extends VertexBaseProps, E e
     update(domNode, element) {
         super.update(domNode, element);
 
+        const hostDiv = this.parentRelativeDiv;
+        if (this.tabNavigation() && hostDiv) {
+            const vertexCount = this._graphData?.allVertices().length ?? 0;
+            const ariaLabel = vertexCount ? `Graph data (${vertexCount} vertices)` : "Graph data";
+            hostDiv
+                .attr("tabindex", "0")
+                .attr("role", "group")
+                .attr("aria-label", ariaLabel);
+        } else if (hostDiv) {
+            hostDiv
+                .attr("tabindex", null)
+                .attr("role", null)
+                .attr("aria-label", null);
+        }
+
         this._renderElement.classed("allowDragging", this.allowDragging());
         if (this._centroidFilter) {
             this._centroidFilter.update(this.selectionGlowColor());
@@ -1178,6 +1229,8 @@ export interface GraphT<SG extends SubgraphBaseProps = any, V extends VertexBase
     showVertexLabels(_: boolean): this;
     showVertexLabelsOnHighlight(): boolean;
     showVertexLabelsOnHighlight(_: boolean): this;
+    tabNavigation(): boolean;
+    tabNavigation(_: boolean): this;
 
     hierarchyRankDirection(): "TB" | "BT" | "LR" | "RL";
     hierarchyRankDirection(_: "TB" | "BT" | "LR" | "RL"): this;
@@ -1250,6 +1303,7 @@ GraphT.prototype.publish("showEdgeLabels", true, "boolean", "Show Edge labels");
 GraphT.prototype.publish("showEdgeLabelsOnHighlight", true, "boolean", "Show Edge labels when highlighted");
 GraphT.prototype.publish("showVertexLabels", true, "boolean", "Show Vertex labels");
 GraphT.prototype.publish("showVertexLabelsOnHighlight", true, "boolean", "Show Vertex labels when highlighted");
+GraphT.prototype.publish("tabNavigation", false, "boolean", "Enable or disable tab navigation");
 GraphT.prototype.publish("snapToGrid", 0, "number", "Snap to Grid");
 GraphT.prototype.publish("selectionClearOnBackgroundClick", false, "boolean", "Clear selection on background click");
 GraphT.prototype.publish("edgeArcDepth", 8, "number", "Edge Arc Depth");

package/src/html/graphHtml.ts

@@ -1,7 +1,6 @@
 import { GraphHtmlT, SubgraphBaseProps, EdgeBaseProps } from "./graphHtmlT.ts";
 import { vertex, VertexProps } from "./vertex.ts";
 import { edge, EdgeProps } from "./edge.ts";
-import { Vertex } from "@hpcc-js/util";
 
 export class GraphHtml extends GraphHtmlT<SubgraphBaseProps, VertexProps, EdgeProps<VertexProps>> {
     constructor() {

package/types/common/graphT.d.ts

@@ -107,6 +107,7 @@ export declare class GraphT<SG extends SubgraphBaseProps, V extends VertexBasePr
     vertexMapper(props: V, origRow: V): V;
     updateVertices(): this;
     calcProps(props: V): V;
+    protected vertexAriaLabel(d: VertexPlaceholder<V>): string;
     hasSubgraphs(): boolean;
     private _subgraphRenderer;
     subgraphRenderer(): RendererT<SG>;
@@ -171,6 +172,8 @@ export interface GraphT<SG extends SubgraphBaseProps = any, V extends VertexBase
     showVertexLabels(_: boolean): this;
     showVertexLabelsOnHighlight(): boolean;
     showVertexLabelsOnHighlight(_: boolean): this;
+    tabNavigation(): boolean;
+    tabNavigation(_: boolean): this;
     hierarchyRankDirection(): "TB" | "BT" | "LR" | "RL";
     hierarchyRankDirection(_: "TB" | "BT" | "LR" | "RL"): this;
     hierarchyNodeSeparation(): number;