Wetron
Wetron

Svelte

ModelGraphView

<script>
  import { ModelGraphView } from "@wetron/svelte";
</script>

<ModelGraphView
  graph={graph}
  onTargetClick={(t) => selected = t}
  colorMode="system"
/>

Props

PropTypeDescription
graphModelGraphRequired. The parsed model graph.
onTargetClick(target: PanelTarget) => voidCalled when a node or edge is clicked.
colorMode"light" | "dark" | "system"Theme. "system" follows prefers-color-scheme.
selectedEdgeTensorNamestring | nullHighlights the matching edge.
searchQuerystringDims nodes that don’t match the query.
onWarnings(warnings: readonly ParseWarning[]) => voidCalled when the graph has parse warnings.
bind:exportRefExportHelpers | nullBindable ref for imperative viewport control.

ExportHelpers

type ExportHelpers = {
  fitAll: () => Promise<void>;
  getViewport: () => { x: number; y: number; zoom: number };
  setViewport: (vp: { x: number; y: number; zoom: number }) => void;
  getNodesBounds: () => { x: number; y: number; width: number; height: number };
  getViewportElement: () => HTMLElement | null;
};

NodePropertyPanel

<script>
  import { NodePropertyPanel } from "@wetron/svelte";
</script>

<NodePropertyPanel
  target={selected}
  colorMode="system"
  onClose={() => selected = null}
/>

Props

PropTypeDescription
targetPanelTarget | nullSelected node, edge, or tensor. null renders nothing.
colorMode"light" | "dark" | "system"Theme.
opsetsReadonlyMap<string, number>Op domain -> version (ONNX only). Shown in node header.
inputSourcesReadonlyMap<string, string>Tensor name -> producing op type. Used to colour input chips.
tensorShapesReadonlyMap<string, { shape, dtype }>Shape info for edge panels.
onTensorClick(name: string) => voidCalled when a tensor name chip is clicked.
onBack() => voidShows a back arrow when provided.
onClose() => voidShows a close button when provided.

PanelTarget type

type PanelTarget =
  | GraphNode
  | { graphValue: GraphValue; direction: "input" | "output" }
  | {
      edge: {
        tensorName: string;
        from: { opType: string; name: string };
        to: Array<{ opType: string; name: string }>;
      };
    }
  | { tensor: { name: string; shape: readonly number[] | null; dtype: string | null } };

Peer dependencies

  • svelte ≥ 5
  • @xyflow/svelte ≥ 1.5.2
  • phosphor-svelte ≥ 3

Implementation notes

  • Uses Svelte 5 runes ($state, $derived, $effect).
  • colorMode="system" reads prefers-color-scheme via a media query listener.
  • Layout is computed once on mount via Dagre; re-computed when graph changes.
  • Theme colours for node categories come from @wetron/tokens.
  • The weight inspection panel (histogram + heatmap) is currently only available in @wetron/react. The Svelte NodePropertyPanel falls back to TensorPanel for initializer tensors. Decode bytes manually with decodeWeight / computeStats from @wetron/core if you need stats in a Svelte app today.
Prev
Installation
Next
TFLite