Ontology Graph 01 - Cross-source semantic graph

v0.1.5

Interactive, draggable node graph of a pipeline's merged ontology: tables, columns and glossary terms clustered by domain, filterable by use case. Fully host-owned - the block only renders positions/selection/hover it derives from props and reports every interaction back through callbacks.

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@4.1.2 add @signalos/ontology-graph-01

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/button, @signalos/badge, @signalos/tooltip, @signalos/split-panel, @signalos/page-header, @signalos/badge-list) into your app - you own the copy. Requires access.

usage

// after: npx shadcn@4.1.2 add @signalos/ontology-graph-01
// mount the pulled page in a route, e.g. src/app/ontology-graph/page.tsx
import OntologyGraph from "@/components/blocks/ontology-graph-01/OntologyGraph"

export default function Page() {
  return <OntologyGraph />
}

Props

OntologyNodeData

Prop	Type	Default
label*	`string`	-
kind*	`string`	-
cluster*	`string`	-
color*	`string`	-
degree*	`number`	-
useCaseIds*	`string[]`	-
isDimmed*	`boolean`	-
isHovered*	`boolean`	-
isSelected*	`boolean`	-
sizePx*	`number`	-
fontSizePx*	`number`	-

UseCaseTreeNode

Prop	Type	Default
id*	`string`	-
pipeline_id*	`string`	-
use_case_id	`string \| undefined`	-
parent_use_case_id*	`string \| null`	-
title*	`string`	-
statement*	`string`	-
source	`string \| null \| undefined`	-
status*	`SubUseCaseStatus`	-
derivation_basis*	`string[]`	-
hand_added*	`boolean`	-
review_origin	`string \| null \| undefined`	-
review_note	`string \| null \| undefined`	-
created_at	`string \| null \| undefined`	-
updated_at	`string \| null \| undefined`	-
children*	`UseCaseTreeNode[]`	-

OntologyEdgeData

Prop	Type	Default
kind*	`string`	-
isCrossSource*	`boolean`	-
detectionMethod*	`string`	-
useCaseIds*	`string[]`	-
isDimmed*	`boolean`	-

OntologyNodePropertiesLike

Prop	Type	Default
domain	`string \| null \| undefined`	-
business_purpose	`string \| null \| undefined`	-
column_count	`number \| null \| undefined`	-
definition	`string \| null \| undefined`	-
mapped_entity	`string \| null \| undefined`	-
synonyms	`string[] \| null \| undefined`	-
domain_context	`string \| null \| undefined`	-

OntologyNodeLike

Prop	Type	Default
id*	`string`	-
label*	`string`	-
kind*	`string`	-
cluster	`string \| null \| undefined`	-
connector_id	`string \| null \| undefined`	-
use_case_ids	`string[] \| null \| undefined`	-
tags	`string[] \| null \| undefined`	-
properties	`OntologyNodePropertiesLike \| null \| undefined`	-

OntologyEdgeLike

Prop	Type	Default
id*	`string`	-
source*	`string`	-
target*	`string`	-
kind*	`string`	-
is_cross_source	`boolean \| null \| undefined`	-
detection_method	`string \| null \| undefined`	-
use_case_ids	`string[] \| null \| undefined`	-

OntologyGraphSpecLike

Prop	Type	Default
nodes*	`TNode[]`	-
edges*	`TEdge[]`	-
clusters	`string[] \| null \| undefined`	-
connectors	`string[] \| null \| undefined`	-

OntologyUseCaseLike

Prop	Type	Default
id*	`string`	-
title*	`string`	-
use_case_id	`string \| undefined`	-
children	`OntologyUseCaseLike[] \| undefined`	-
description	`string \| null \| undefined`	-
status	`string \| undefined`	-
source	`string \| null \| undefined`	-

OntologyUseCaseOption

Prop	Type	Default
id*	`string`	-
label*	`string`	-
hint	`string \| undefined`	-

OntologyInspectorRow

Prop	Type	Default	Description
label*	`string`	-
value*	`string`	-

OntologyInspectorConnection

Prop	Type	Default
edgeId*	`string`	-
nodeId*	`string`	-
label*	`string`	-
direction*	`"incoming" \| "outgoing"`	-
kind*	`string`	-

OntologyInspectorDetails

Prop	Type	Default
node*	`TNode`	-
useCaseIds*	`string[]`	-
rows*	`OntologyInspectorRow[]`	-
connections*	`OntologyInspectorConnection[]`	-

OntologyUseCaseBadgesRenderProps

Prop	Type	Default	Description
useCases*	`TUseCase[]`	-

Supporting types

export type SubUseCaseStatus = "proposed" | "confirmed" | "rejected"

export type OntologyFlowNode = Node<OntologyNodeData>

export type OntologyFlowEdge = Edge<OntologyEdgeData>

export type OntologyUseCaseBadgesRenderer<
  TUseCase extends OntologyUseCaseLike = OntologyUseCaseLike,
> = (props: OntologyUseCaseBadgesRenderProps<TUseCase>) => ReactNode

Changelog

ontology-graph-01

0.1.5

renderUseCaseBadges's default now composes BadgeList instead of a hand-rolled Badge row, so the selected node's use cases pick up BadgeList's info-popover affordance and +N more overflow for free.

0.1.0

Initial release: a draggable, filterable ontology graph (@xyflow/react) composed from PageHeader and SplitPanel. All state that isn't pure view interaction — the spec, use-case filter options, glossary toggle, selection — is owned by the caller and passed in as props; drag position, hover, pan and zoom stay local to the canvas since they're not meaningful to persist.
Generic over the caller's node (TNode), edge (TEdge) and sub-use-case (TUseCase) shapes via the OntologyNodeLike / OntologyEdgeLike / OntologyUseCaseLike structural interfaces in OntologyGraph.types.ts — no domain types are imported.
renderUseCaseBadges is a content slot for the selected node's resolved use cases; it defaults to a plain Badge row so the block renders out of the box with zero required wiring.