Tesserae.GraphKit 26.6.1992

Tesserae.GraphKit

Tesserae.GraphKit is a Tesserae (H5 C#-to-JavaScript) wrapper around the graph-kit interactive graph-visualization library.

It lets you drop a fully interactive, WebGL/Canvas-rendered graph into a Tesserae app from C#, with no JavaScript. The graph-kit library itself is bundled into this NuGet package as a browser-global script (window.graphkit) and embedded through h5.json, so there is no preload step — referencing the package is enough.

Usage

using Tesserae.GraphKit;
using static Tesserae.UI;

var graph = GK.Graph()
    .Dark()
    .AddNode("a", label: "Alice", color: "#4dabf7")
    .AddNode("b", label: "Bob",   color: "#51cf66")
    .AddNode("c", label: "Carol")
    .AddEdge("e1", "a", "b")
    .AddEdge("e2", "b", "c")
    .ForceLayout()
    .OnNodeClick(id => Console.WriteLine($"clicked node {id}"));

document.body.appendChild(
    Stack().WS().HS().Children(graph).Render()
);

GraphView is a regular IComponent, so the usual Tesserae sizing helpers (.W(), .H(), .WS(), .HS(), .S(), .Grow(), …) apply. It implements ISpecialCaseStyling, so those styles are written directly onto the graph container.

API highlights

Edge shape (EdgeShape.Line / Arrow / Curve), label placement (EdgeLabelPlacement.Above / On / Below), the multi-select modifier (MultiSelectModifier) and the stats overlay corner (StatsCorner) are exposed as C# enums mirroring the underlying graph-kit options.

The context menu, tooltip and minimap are rendered by the library itself in the active theme with the same frosted-glass chrome as the stats overlay:

• OnContextMenu(target => …) receives a GraphContextTarget (IsNode / IsEdge / IsBackground, Id, SourceId, TargetId) and returns GraphMenuItems. Items support nested submenus (GraphMenuItem.Submenu), separators, icons, shortcut hints, disabled rows, destructive (Danger) commands and per-item Action handlers.
• Tooltip(target => component) returns any Tesserae IComponent as the hover content (or null to suppress it for that target).
• ShowMinimap(corner, width, height) docks a live minimap that recenters the camera on click/drag.

The underlying GraphViz instance is created lazily once the component is mounted (so the renderer can measure its container) and tracks the container size via a ResizeObserver.

How the JavaScript is embedded

build/bundle.mjs uses esbuild to bundle the graph-kit TypeScript sources (../src) into a single browser-global IIFE, producing both a readable (assets/js/graph-kit.js) and a minified (assets/js/graph-kit.min.js) artifact that expose window.graphkit. h5.json lists both as resources; H5 picks the readable one for Debug builds and the minified one for Release builds. The csproj refreshes the bundle before each build via the BundleGraphKitJs MSBuild target.

Building

npm install      # once, to fetch esbuild (from the Tesserae.GraphKit/ folder)
npm run bundle   # regenerate assets/js/graph-kit*.js
dotnet build     # builds the H5 package (also runs the bundle step)

License

MIT © Curiosity GmbH