Svelte

ModelGraphView#

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

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

Props#

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#

WeightPanel#

NodePropertyPanel renders WeightPanel when target names an initializer and graph is supplied. The inspector set, the rank and dtype rules that decide which views are offered, and the summary block are the same as React - matrix, distribution, per-axis profile, sparsity, kernel gallery, quantization, diagnostics, and a virtualized values grid.

Render WeightPanel directly to choose which inspectors appear:

<script>
  import { WeightPanel, MatrixInspector, SparsityInspector } from '@wetron/svelte';
  import RowNorms from './row-norms.svelte';
</script>

<WeightPanel target={{ name: 'conv1.weight', shape: [64, 3, 7, 7], dtype: 'float32' }} {graph}>
  <MatrixInspector />
  <SparsityInspector />
  <RowNorms />
</WeightPanel>

The children snippet replaces DefaultWeightInspectors, and the view picker goes with it. The summary block above the picker stays either way. Omit the snippet for the stock picker and all eight views.

Props#

DefaultWeightInspectors exposes bind:selected to drive the picker from your own state.

Writing an inspector#

getWeightInspection() returns the decoded tensor of the enclosing WeightPanel. Call it during component initialization, like any other Svelte context read; it throws outside a WeightPanel.

<script lang="ts">
  import { getWeightInspection } from '@wetron/svelte';

  const context = getWeightInspection();
  const ready = $derived(context.current.status === 'ready' ? context.current : null);
</script>

{#if ready}
  <p>{ready.tensor.name}: {ready.numeric.length} values, max {ready.stats.max}</p>
{/if}

context.current and context.isDark are getters, so read them inside $derived to track changes as the reader switches tensors or themes.

Check status before reading the tensor. values, numeric, and stats are null in every state except "ready", and each other state means the panel is already showing its own placeholder: deferred (the “Show weights” toggle is off), external (the checkpoint or external data file has not been attached), unsupported (the dtype has no decoder), unavailable (no bytes under that name). Rendering nothing is the right response to all four.

context.current is WeightInspectionData. Every stock inspector reads it the same way and takes no props.

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.
• Pass graph to NodePropertyPanel so it can tell initializers from live tensors and open the weight panel.