g3-toolkit

Composable graph visualization components for RDF, LPG, and Holonic graph paradigms. Install the pieces you need; compose them into your application.

📘

API Reference

Auto-generated from TypeScript. Every class, function, type, and prop documented.

🧩

Component Gallery

Interactive Storybook. Browse views, controls, and encoding panels live.

🕸️

Seven surfaces driving the graph canvas: Provenance Auditor, MBSE Satellite Workbench, Supply Chain Digital Thread, Biomedical Knowledge Graph, Analytics Dashboard, Scale, Ontology Workbench. Style Lab is dev-only and Scale is deployment-only, so pnpm run dev shows a different set.

🔌

Wiring Guide

Drive the toolkit from your app: custom buttons, store subscriptions, and the JSON contracts. Every snippet runs in CI.

📂

Source & Guides

README, ARCHITECTURE.md, specs, and planning docs on GitHub.

Packages

@g3-toolkit/core

UGM, adapters, projection pipeline, algorithm result interchange (networkx/GraphBLAS documents), event bus, SHACL, theming. Zero React.

@g3-toolkit/react

Views and controls: the encoding-spec grammar (panel, legend, JSON port), graph toolbar with force controls, algorithm overlays, position pinning, workspace snapshots, compound containers, theme-aware canvas. React 19.

@g3-toolkit/charts

LinkedChart with ECharts. Cross-filtered with the graph canvas.

Quick Start

# Install (pnpm required)
pnpm add @g3-toolkit/core @g3-toolkit/react react react-dom \
  cytoscape cytoscape-fcose zustand echarts

// Minimal graph render
import { UGM } from "@g3-toolkit/core";
import { CytoscapeCanvas } from "@g3-toolkit/react";
// Required: the packages ship CSS as a separate file and do not
// import it for you. Without this line every view renders
// unstyled, with no error and no warning.
import "@g3-toolkit/react/style.css";

const ugm = new UGM();
ugm.addNode("alice", { types: ["Person"], properties: { name: "Alice" } });
ugm.addNode("bob",   { types: ["Person"], properties: { name: "Bob" } });
ugm.addEdge("alice", "bob", { type: "knows" });

function App() {
  return <CytoscapeCanvas ugm={ugm} />;
}

Architecture

@g3-toolkit/core is framework-agnostic (no React imports). @g3-toolkit/react wraps it for React consumers. Source-boundary tests enforce this at build time. Read ARCHITECTURE.md for the full design rationale.

GitHub Architecture Contributing Specs