@rokkit/graph 1.8.0 → 1.8.2

package/dist/model/tree.d.ts

@@ -3,8 +3,13 @@ export type TreeNode = {
     /** Path joined by `/`. The root is `''`. */
     id: string;
     label: string;
-    /** Full path to this node, outermost first. Empty at the root. */
+    /** Full path to this node, outermost first. Empty at the root. Folding splices it. */
     path: string[];
+    /**
+     * The node's path in the DATA — never folded. What a host knows a node by, so what a drill
+     * reports and what `focusPath` names; `path` is only where the box sits in the picture.
+     */
+    address: string[];
     /** 0 at the root. A layout materialising N levels reads this. */
     depth: number;
     /** The real node behind this box. Absent only on a container nothing declared. */
@@ -22,6 +27,7 @@ export type TreeNode = {
  */
 export declare function buildTree(model: GraphModel, options?: {
     measure?: string;
+    keep?: string[];
 }): TreeNode;
 /** The node at `path`, or undefined. */
 export declare function findNode(root: TreeNode, path: string[]): TreeNode | undefined;

package/dist/model/tree.js

@@ -22,6 +22,7 @@ function container(path) {
         id: idOf(path),
         label: path[path.length - 1] ?? ROOT,
         path,
+        address: path,
         depth: path.length,
         children: [],
         value: 0
@@ -95,6 +96,8 @@ function attach(root, node, measure, degree) {
             id: node.id,
             label: node.label,
             path: [],
+            // No address either: a pathless node has no place in the containment tree to drill to.
+            address: [],
             depth: 1,
             node,
             children: [],
@@ -131,9 +134,13 @@ function summarise(node, depth) {
  * edges, and folding it would silently drop them. The rule is "a wrapper is not a level", and
  * a thing the data names is not a wrapper.
  */
-function fold(node) {
-    node.children = node.children.map(fold);
-    if (node.children.length === 1 && node.node === undefined && node.depth > 0) {
+function fold(node, keep) {
+    node.children = node.children.map((child) => fold(child, keep));
+    // A container ON the focus chain is the scope the reader asked for, not punctuation: folding
+    // it would make the focusPath naming it stop resolving. A host loading one level at a time
+    // sends exactly such a chain — a crate's modules, with nothing declaring the crate.
+    const onFocusChain = node.address.every((segment, i) => keep[i] === segment);
+    if (node.children.length === 1 && node.node === undefined && node.depth > 0 && !onFocusChain) {
         const only = node.children[0];
         // The child takes this box's PLACE, so the segment this box contributed is spliced out
         // of its path — not merely trimmed from the end, which would leave a leaf sitting at
@@ -165,7 +172,7 @@ export function buildTree(model, options = {}) {
     // a descendant arriving first synthesises the box, and its owner fills in the identity.
     for (const node of model.nodes)
         attach(root, node, measure, degree);
-    const folded = fold(root);
+    const folded = fold(root, options.keep ?? []);
     sort(folded);
     summarise(folded, 0);
     return folded;

package/dist/preset.d.ts

@@ -12,6 +12,15 @@ export type GraphShades = {
     stroke: string;
     label: string;
 };
+/**
+ * The sequential ramp a share is shaded on (#164): a palette family and the two steps it runs
+ * between. Unlike `groups` this is ORDINAL — more of the measure is more of the colour.
+ */
+export type GraphShadeRamp = {
+    family: string;
+    from: string;
+    to: string;
+};
 export type GraphPreset = {
     /** Ordered ramp assigned to open-ended group names, wrapping when exhausted. */
     groups: string[];
@@ -21,6 +30,8 @@ export type GraphPreset = {
     };
     patterns: string[];
     using: GraphChannel;
+    /** The ramp a `shadeBy` share is painted on (#164). Independent of `using`. */
+    shade: GraphShadeRamp;
 };
 /**
  * Mirrors `createChartPreset`'s shape on purpose — a consumer who has met one
@@ -32,6 +43,13 @@ export type GraphPreset = {
  */
 export declare const defaultGraphPreset: GraphPreset;
 export declare function createGraphPreset(overrides?: Partial<GraphPreset>): GraphPreset;
+/**
+ * A share in 0..1 as custom properties, the way `resolveGroupStyles` resolves a group: the
+ * ramp step nearest the share for the fill, two steps on for the stroke, and a label MEASURED
+ * against that fill — rokkit's auto on-color (near-black or near-white by luminance), so the
+ * flip point falls out of the ramp instead of being guessed.
+ */
+export declare function resolveShade(share: number, mode: 'light' | 'dark', preset?: GraphPreset): Record<'--group-fill' | '--group-stroke' | '--group-label', string>;
 /**
  * Resolves group names to CSS custom properties.
  *

package/dist/preset.js

@@ -1,4 +1,4 @@
-import { categoricalPalette } from '@rokkit/core';
+import { categoricalPalette, pickOnColor, relativeLuminance } from '@rokkit/core';
 /**
  * Mirrors `createChartPreset`'s shape on purpose — a consumer who has met one
  * has met both. Shade picks differ from chart's because a cluster is a large
@@ -17,7 +17,9 @@ export const defaultGraphPreset = {
         dark: { fill: '900', stroke: '600', label: '100' }
     },
     patterns: ['diagonal', 'dots', 'triangles', 'hatch', 'lattice', 'swell', 'checkerboard', 'waves'],
-    using: 'color'
+    using: 'color',
+    // Neutral, so a shade never reads as a group's hue. The palette has no `slate`.
+    shade: { family: 'gray', from: '50', to: '900' }
 };
 export function createGraphPreset(overrides = {}) {
     return {
@@ -26,7 +28,36 @@ export function createGraphPreset(overrides = {}) {
         shades: {
             light: { ...defaultGraphPreset.shades.light, ...overrides.shades?.light },
             dark: { ...defaultGraphPreset.shades.dark, ...overrides.shades?.dark }
-        }
+        },
+        shade: { ...defaultGraphPreset.shade, ...overrides.shade }
+    };
+}
+/** The family's steps from `from` to `to`, in that order — reversed in dark mode. */
+function rampSteps(ramp, mode) {
+    const family = categoricalPalette[ramp.family] ?? categoricalPalette[defaultGraphPreset.shade.family];
+    const [lo, hi] = [Number(ramp.from), Number(ramp.to)].sort((a, b) => a - b);
+    const steps = Object.keys(family)
+        .map(Number)
+        .filter((step) => step >= lo && step <= hi)
+        .sort((a, b) => a - b)
+        .map((step) => family[String(step)]);
+    // In dark mode the paper is dark, so "more ink" runs toward the light end.
+    return mode === 'dark' ? steps.reverse() : steps;
+}
+/**
+ * A share in 0..1 as custom properties, the way `resolveGroupStyles` resolves a group: the
+ * ramp step nearest the share for the fill, two steps on for the stroke, and a label MEASURED
+ * against that fill — rokkit's auto on-color (near-black or near-white by luminance), so the
+ * flip point falls out of the ramp instead of being guessed.
+ */
+export function resolveShade(share, mode, preset = defaultGraphPreset) {
+    const steps = rampSteps(preset.shade, mode);
+    const at = Math.round(Math.min(1, Math.max(0, share)) * (steps.length - 1));
+    const fill = steps[at];
+    return {
+        '--group-fill': fill,
+        '--group-stroke': steps[Math.min(steps.length - 1, at + 2)],
+        '--group-label': pickOnColor(relativeLuminance(fill))
     };
 }
 /**

package/dist/schema/EntitiesView.svelte

@@ -6,6 +6,7 @@
 	import type { EntityRow, GraphStateConfig } from '../GraphState.svelte.js'
 	import NoteBlocks from './NoteBlocks.svelte'
 	import type { GraphFields } from '../types.js'
+	import { say } from '../messages.js'
 
 	let {
 		state: provided,
@@ -40,12 +41,13 @@
 		if (graph === own) own.update(config())
 	})
 
-	const columns: TableColumn[] = [
-		{ name: 'label', label: 'Entity', snippet: 'entity' },
-		{ name: 'rowCount', label: 'Rows', align: 'right', snippet: 'rows' },
-		{ name: 'refCount', label: 'Refs', align: 'right', snippet: 'refs' },
-		{ name: 'note', label: 'Comment', sortable: false, snippet: 'comment' }
-	]
+	// $derived, so the headings follow a locale change.
+	const columns: TableColumn[] = $derived([
+		{ name: 'label', label: say('entity'), snippet: 'entity' },
+		{ name: 'rowCount', label: say('rows'), align: 'right', snippet: 'rows' },
+		{ name: 'refCount', label: say('refs'), align: 'right', snippet: 'refs' },
+		{ name: 'note', label: say('comment'), sortable: false, snippet: 'comment' }
+	])
 </script>
 
 {#snippet entity(_value: unknown, _column: TableColumn, row: Record<string, unknown>)}

package/dist/schema/EntityView.svelte

@@ -5,6 +5,8 @@
 	import NoteBlocks from './NoteBlocks.svelte'
 	import { baseType, typeSize } from './column-type.js'
 	import type { GraphFields } from '../types.js'
+	import { counted, say } from '../messages.js'
+	import { interactions } from '../actions/interactions.js'
 
 	let {
 		state: provided,
@@ -44,22 +46,22 @@
 </script>
 
 {#if entity}
-	<article data-graph-entity data-node-kind={entity.kind} class={className}>
+	<article data-graph-entity data-node-kind={entity.kind} class={className} use:interactions={{ state: graph }}>
 		<header data-graph-entity-head>
 			{#if entity.group}<span data-graph-entity-group>{entity.group}.</span>{/if}
 			<h2 data-graph-entity-title>{entity.label}</h2>
-			<span data-graph-entity-count>{entity.rows.length} columns</span>
+			<span data-graph-entity-count>{counted(entity.rows.length, 'columnOne', 'columnMany')}</span>
 		</header>
 
 		{#if entity.note}
 			<section data-graph-section="note">
-				<h3 data-graph-section-title>Comment</h3>
+				<h3 data-graph-section-title>{say('comment')}</h3>
 				<NoteBlocks note={entity.note} />
 			</section>
 		{/if}
 
 		<section data-graph-section="columns">
-			<h3 data-graph-section-title>Columns</h3>
+			<h3 data-graph-section-title>{say('columns')}</h3>
 			{#each entity.rows as row (row.name)}
 				<div data-graph-column>
 					<span data-graph-column-name>{row.name}</span>
@@ -77,11 +79,11 @@
 
 		{#if indexes.length > 0}
 			<section data-graph-section="indexes">
-				<h3 data-graph-section-title>Indexes</h3>
+				<h3 data-graph-section-title>{say('indexes')}</h3>
 				{#each indexes as index, i (i)}
 					<div data-graph-index>
 						<span data-graph-index-def>{index.def}</span>
-						{#if index.unique}<span data-graph-index-unique>unique</span>{/if}
+						{#if index.unique}<span data-graph-index-unique>{say('unique')}</span>{/if}
 						{#if index.name}<span data-graph-index-name>{index.name}</span>{/if}
 					</div>
 				{/each}
@@ -89,15 +91,16 @@
 		{/if}
 
 		<section data-graph-section="relationships">
-			<h3 data-graph-section-title>Relationships</h3>
+			<h3 data-graph-section-title>{say('relationships')}</h3>
 			{#if graph.relationships.length === 0}
-				<p data-graph-relationships-empty>No relationships reference this entity.</p>
+				<p data-graph-relationships-empty>{say('noRelationships')}</p>
 			{:else}
 				{#each graph.relationships as rel, i (rel.edge.id + i)}
 					<button
 						type="button"
 						data-graph-relationship={rel.direction}
-						onclick={() => graph.select(rel.id)}
+						data-graph-press="select"
+						data-graph-key={rel.id}
 					>
 						{#if rel.group}<span data-graph-relationship-group>{rel.group}.</span>{/if}
 						<span data-graph-relationship-label>{rel.label}</span>
@@ -111,6 +114,6 @@
 	</article>
 {:else}
 	<article data-graph-entity data-graph-entity-empty class={className}>
-		<p>No entity selected.</p>
+		<p>{say('noEntity')}</p>
 	</article>
 {/if}

package/dist/state/GraphConfig.svelte.d.ts

@@ -0,0 +1,124 @@
+import type { GraphPreset } from '../preset.js';
+import type { Arrange, Density, EdgeStyle, LayoutFn, NodeAxis, ShowEdges } from '../layout/types.js';
+import type { GraphFields } from '../types.js';
+import type { GraphStateConfig } from '../GraphState.svelte.js';
+export type GraphConfigValues = {
+    nodes: unknown[];
+    edges: unknown[];
+    fields: GraphFields;
+    layout: string | LayoutFn;
+    focus: string | null;
+    density: Density;
+    arrange: Arrange;
+    groupBy: NodeAxis;
+    nestBy: NodeAxis | null;
+    groupTint: boolean;
+    sizeBy: string;
+    sizeScale: 'linear' | 'log';
+    depth: number;
+    focusPath: string[];
+    levels: number | undefined;
+    root: string | null;
+    bundleTension: number | undefined;
+    radialMode: 'tree' | 'dendrogram';
+    edgeStyle: EdgeStyle;
+    preset: GraphPreset;
+    mode: 'light' | 'dark';
+    label: string | undefined;
+    onselect: ((id: string | null) => void) | undefined;
+    ondrill: GraphStateConfig['ondrill'];
+    ondrillup: GraphStateConfig['ondrillup'];
+    onfocuspath: GraphStateConfig['onfocuspath'];
+    onexpand: GraphStateConfig['onexpand'];
+    oncollapse: GraphStateConfig['oncollapse'];
+    showEdges: ShowEdges;
+    layerLabels: string[] | undefined;
+    widthBy: string | undefined;
+    heightBy: string | undefined;
+    colorBy: string | undefined;
+    above: string | undefined;
+    shadeBy: string | undefined;
+};
+type Key = keyof GraphConfigValues;
+type Field = {
+    key: Key;
+    /** Shapes the supplied-or-fallback value; sees the whole config (nestBy reads groupBy). */
+    normalise?: (value: unknown, config: GraphStateConfig) => unknown;
+} & ({
+    fallback: () => unknown;
+    raw?: never;
+}
+/** Taken as given — a `null` stays `null`, an omitted key is `undefined` — no fallback. */
+ | {
+    raw: true;
+    fallback?: never;
+});
+/**
+ * Every input, its default, and how it is shaped. `update()` assigns every field on every call —
+ * an omitted key reverts to its fallback, which is the contract the GraphState specs pin
+ * field by field.
+ */
+export declare const CONFIG_FIELDS: readonly Field[];
+/**
+ * A graph's inputs — the one job `update()` has. The layout pipeline and the selection read
+ * from here.
+ *
+ * `update()` FULLY re-applies config rather than merging deltas, matching `SparkState.update` —
+ * so a prop reverting to undefined actually reverts. `apply()` is the merging verb, for a
+ * component writing the few options its own controls drive into a state someone else owns.
+ */
+export declare class GraphConfig {
+    #private;
+    constructor(config?: GraphStateConfig);
+    update(config?: GraphStateConfig): void;
+    /** Merge a partial config over the last full one, leaving every key it does not name alone. */
+    apply(config: Partial<GraphStateConfig>): GraphStateConfig;
+    /**
+     * Change the detail level from inside the component. `Graph`'s `density` PROP only reaches
+     * the state it owns; with a caller-supplied state — how all three views share one — a
+     * control that set the prop would render, click, and change nothing.
+     */
+    setDensity(density: Density): void;
+    /** Every edge or only the climbing ones (#167) — what `ViolationsControl` drives. */
+    setShowEdges(value: ShowEdges): void;
+    /** Move the drill path from inside the state — drilling. See `GraphDrill`. */
+    setFocusPath(path: string[]): void;
+    /** Change the grouping axes from inside the component — same reason as `setDensity`. */
+    setGrouping(outer: NodeAxis, inner?: NodeAxis | null): void;
+    get nodes(): unknown[];
+    get edges(): unknown[];
+    get fields(): GraphFields;
+    get layout(): string | LayoutFn;
+    get focus(): string | null;
+    get density(): Density;
+    get arrange(): Arrange;
+    get groupBy(): NodeAxis;
+    get nestBy(): NodeAxis | null;
+    get groupTint(): boolean;
+    get sizeBy(): string;
+    get sizeScale(): "linear" | "log";
+    get depth(): number;
+    get focusPath(): string[];
+    get levels(): number | undefined;
+    get root(): string | null;
+    get bundleTension(): number | undefined;
+    get radialMode(): "tree" | "dendrogram";
+    get edgeStyle(): EdgeStyle;
+    get preset(): GraphPreset;
+    get mode(): "light" | "dark";
+    get label(): string | undefined;
+    get onselect(): ((id: string | null) => void) | undefined;
+    get ondrill(): ((path: string[], node: import("../types.js").GraphNode | null) => void | Promise<void>) | undefined;
+    get ondrillup(): ((path: string[]) => void | Promise<void>) | undefined;
+    get onfocuspath(): ((path: string[]) => void) | undefined;
+    get onexpand(): ((id: string, node: import("../types.js").GraphNode) => void) | undefined;
+    get oncollapse(): ((id: string, node: import("../types.js").GraphNode) => void) | undefined;
+    get showEdges(): ShowEdges;
+    get layerLabels(): string[] | undefined;
+    get widthBy(): string | undefined;
+    get heightBy(): string | undefined;
+    get colorBy(): string | undefined;
+    get above(): string | undefined;
+    get shadeBy(): string | undefined;
+}
+export {};

package/dist/state/GraphConfig.svelte.js

@@ -0,0 +1,253 @@
+import { defaultGraphPreset } from '../preset.js';
+/**
+ * A level cap, or nothing.
+ *
+ * Left UNDEFINED when the caller said nothing: a state-level default of 2 is indistinguishable
+ * from an explicit 2, and `radial` needs "no cap" to mean the whole tree — inventing a number
+ * here silently pruned a codebase dendrogram to two rings.
+ */
+const floorLevels = (levels) => levels === undefined ? undefined : Math.max(1, Math.floor(levels));
+/**
+ * Rejected rather than rendered: a box subdivided by its OWN axis yields exactly one child
+ * containing everything, which reads as a rendering fault, not a no-op.
+ */
+const distinctNest = (inner, outer) => (inner === outer ? null : inner);
+/**
+ * Every input, its default, and how it is shaped. `update()` assigns every field on every call —
+ * an omitted key reverts to its fallback, which is the contract the GraphState specs pin
+ * field by field.
+ */
+export const CONFIG_FIELDS = Object.freeze([
+    { key: 'nodes', fallback: () => [] },
+    { key: 'edges', fallback: () => [] },
+    { key: 'fields', fallback: () => ({}) },
+    { key: 'layout', fallback: () => 'flow' },
+    { key: 'focus', fallback: () => null },
+    { key: 'density', fallback: () => 'keys' },
+    { key: 'arrange', fallback: () => 'untangle' },
+    { key: 'groupBy', fallback: () => 'group' },
+    {
+        key: 'nestBy',
+        fallback: () => null,
+        normalise: (v, config) => distinctNest(v, config.groupBy ?? 'group')
+    },
+    { key: 'groupTint', fallback: () => false },
+    { key: 'sizeBy', fallback: () => 'degree' },
+    { key: 'sizeScale', fallback: () => 'linear' },
+    // Floored at 1: a depth of 0 or -1 is a request for nothing, and returning an empty canvas
+    // for it looks identical to a broken focus.
+    { key: 'depth', fallback: () => 1, normalise: (v) => Math.max(1, Math.floor(v)) },
+    { key: 'focusPath', fallback: () => [] },
+    { key: 'levels', normalise: floorLevels, raw: true },
+    { key: 'root', fallback: () => null },
+    { key: 'bundleTension', raw: true },
+    { key: 'radialMode', fallback: () => 'tree' },
+    { key: 'edgeStyle', fallback: () => 'curved' },
+    { key: 'preset', fallback: () => defaultGraphPreset },
+    { key: 'mode', fallback: () => 'light' },
+    { key: 'label', raw: true },
+    { key: 'onselect', raw: true },
+    { key: 'ondrill', raw: true },
+    { key: 'ondrillup', raw: true },
+    { key: 'onfocuspath', raw: true },
+    { key: 'onexpand', raw: true },
+    { key: 'oncollapse', raw: true },
+    { key: 'showEdges', fallback: () => 'all' },
+    { key: 'layerLabels', raw: true },
+    { key: 'widthBy', raw: true },
+    { key: 'heightBy', raw: true },
+    { key: 'colorBy', raw: true },
+    { key: 'above', raw: true },
+    { key: 'shadeBy', raw: true }
+]);
+function resolve(config) {
+    const values = {};
+    for (const field of CONFIG_FIELDS) {
+        const given = config[field.key];
+        const value = field.raw ? given : (given ?? field.fallback());
+        const { key, normalise } = field;
+        values[key] = normalise ? normalise(value, config) : value;
+    }
+    return values;
+}
+/**
+ * A graph's inputs — the one job `update()` has. The layout pipeline and the selection read
+ * from here.
+ *
+ * `update()` FULLY re-applies config rather than merging deltas, matching `SparkState.update` —
+ * so a prop reverting to undefined actually reverts. `apply()` is the merging verb, for a
+ * component writing the few options its own controls drive into a state someone else owns.
+ */
+export class GraphConfig {
+    #v = $state(resolve({}));
+    /** The last FULL config, so `apply` can merge over it rather than reset around it. */
+    #last = {};
+    constructor(config = {}) {
+        this.update(config);
+    }
+    update(config = {}) {
+        const previous = this.#last;
+        this.#last = config;
+        // Field by field onto the one proxy, not a new object: each field stays its own signal,
+        // so a re-render that leaves `nodes` alone does not re-trigger what reads only `nodes`.
+        //
+        // And only the fields whose INPUT changed. Re-assigning the same array still fires its
+        // signal — the proxy wraps it afresh — and an absent `fields` resolves to a fresh `{}`, so
+        // every update would re-normalise the whole model even when only a layout option moved.
+        // A consumer's own `$state` array mutated in place is unaffected: it is tracked through
+        // its own proxy, not through this assignment.
+        const resolved = resolve(config);
+        const target = this.#v;
+        for (const key of Object.keys(resolved)) {
+            if (key in config && config[key] === previous[key])
+                continue;
+            if (!(key in config) && !(key in previous))
+                continue;
+            target[key] = resolved[key];
+        }
+    }
+    /** Merge a partial config over the last full one, leaving every key it does not name alone. */
+    apply(config) {
+        const merged = { ...this.#last, ...config };
+        this.update(merged);
+        return merged;
+    }
+    /**
+     * Change the detail level from inside the component. `Graph`'s `density` PROP only reaches
+     * the state it owns; with a caller-supplied state — how all three views share one — a
+     * control that set the prop would render, click, and change nothing.
+     */
+    setDensity(density) {
+        this.#v.density = density;
+        this.#remember({ density });
+    }
+    /** Every edge or only the climbing ones (#167) — what `ViolationsControl` drives. */
+    setShowEdges(value) {
+        this.#v.showEdges = value;
+        this.#remember({ showEdges: value });
+    }
+    /** Move the drill path from inside the state — drilling. See `GraphDrill`. */
+    setFocusPath(path) {
+        this.#v.focusPath = path;
+        this.#remember({ focusPath: path });
+    }
+    /** Change the grouping axes from inside the component — same reason as `setDensity`. */
+    setGrouping(outer, inner = null) {
+        this.#v.groupBy = outer;
+        this.#v.nestBy = distinctNest(inner, outer);
+        this.#remember({ groupBy: outer, nestBy: this.#v.nestBy });
+    }
+    /**
+     * Fold a change made from INSIDE into the last full config. `apply()` merges over that, so a
+     * setter that changed only the live value was quietly undone by the next merge — any
+     * component writing its own options put the old drill path, density or grouping back.
+     */
+    #remember(change) {
+        this.#last = { ...this.#last, ...change };
+    }
+    get nodes() {
+        return this.#v.nodes;
+    }
+    get edges() {
+        return this.#v.edges;
+    }
+    get fields() {
+        return this.#v.fields;
+    }
+    get layout() {
+        return this.#v.layout;
+    }
+    get focus() {
+        return this.#v.focus;
+    }
+    get density() {
+        return this.#v.density;
+    }
+    get arrange() {
+        return this.#v.arrange;
+    }
+    get groupBy() {
+        return this.#v.groupBy;
+    }
+    get nestBy() {
+        return this.#v.nestBy;
+    }
+    get groupTint() {
+        return this.#v.groupTint;
+    }
+    get sizeBy() {
+        return this.#v.sizeBy;
+    }
+    get sizeScale() {
+        return this.#v.sizeScale;
+    }
+    get depth() {
+        return this.#v.depth;
+    }
+    get focusPath() {
+        return this.#v.focusPath;
+    }
+    get levels() {
+        return this.#v.levels;
+    }
+    get root() {
+        return this.#v.root;
+    }
+    get bundleTension() {
+        return this.#v.bundleTension;
+    }
+    get radialMode() {
+        return this.#v.radialMode;
+    }
+    get edgeStyle() {
+        return this.#v.edgeStyle;
+    }
+    get preset() {
+        return this.#v.preset;
+    }
+    get mode() {
+        return this.#v.mode;
+    }
+    get label() {
+        return this.#v.label;
+    }
+    get onselect() {
+        return this.#v.onselect;
+    }
+    get ondrill() {
+        return this.#v.ondrill;
+    }
+    get ondrillup() {
+        return this.#v.ondrillup;
+    }
+    get onfocuspath() {
+        return this.#v.onfocuspath;
+    }
+    get onexpand() {
+        return this.#v.onexpand;
+    }
+    get oncollapse() {
+        return this.#v.oncollapse;
+    }
+    get showEdges() {
+        return this.#v.showEdges;
+    }
+    get layerLabels() {
+        return this.#v.layerLabels;
+    }
+    get widthBy() {
+        return this.#v.widthBy;
+    }
+    get heightBy() {
+        return this.#v.heightBy;
+    }
+    get colorBy() {
+        return this.#v.colorBy;
+    }
+    get above() {
+        return this.#v.above;
+    }
+    get shadeBy() {
+        return this.#v.shadeBy;
+    }
+}