Core architecture fixes -- Review in steps

[rokotyan]

@lee00678 @suryahanumandla
I'm not sure if we want to merge all of this, but it's definitely worth reviewing. Every commit has a description of the problem it solves.

Summary

This PR is a broad pass over the unovis core, containers, and all five framework wrappers (React, Angular, Svelte, Vue, Solid), fixing a set of long-standing correctness bugs, removing several large per-frame/per-render performance cliffs, and tightening the container/component architecture. It also consolidates the five copy-pasted component generator drivers into one shared implementation and adds a multi-framework gallery example that exercises the reactivity paths fixed here.

No public API is removed. Behavior changes are listed in the "Notes for reviewers" section at the bottom.

Correctness fixes

Shared default config aliasing (c6bdfdae)

Components created without a config kept the module-level default config object as their own instance config, so mutating instance.config polluted every other instance of the same component class (e.g. XYContainer setting xAxis.config.type changed the type for every axis in the app). Constructors now always go through setConfig(), which produces a private merged clone. XYComponentCore.setConfig and LeafletMap.setConfig tolerate an undefined argument.

XYContainer.setData change detection was dead code (4d412067)

setData assigned the new data to the data model before comparing, so the change check compared the data with itself and never fired — the tooltip and crosshair were never hidden on data updates. The previous reference is now captured before assignment and compared by reference, which also removes a full deep-equality walk of the dataset on every setData. isEqual() gained a reference short-circuit.

Component resource leaks on destroy (b4ac750a)

ComponentCore.destroy() is now idempotent and invokes a new protected _onDestroy() hook. Fixed leaks:

• Graph: the 35 ms link-flow interval kept firing forever after destroy (retaining the whole component); window keydown/keyup listeners are now removed and namespaced per instance uid, so multiple graphs no longer clobber each other's shift-brush handlers.
• Crosshair: cancels its pending render animation frame and detaches container mouse/wheel listeners.
• Axis: cancels the pending tick-collision animation frame.
• TopoJSONMap / LeafletMap: their destroy() overrides skipped super.destroy() (leaving isDestroyed() false and DOM attached); they're now _onDestroy() implementations.
• LeafletFlowMap: destroys its internal LeafletMap, which was previously never cleaned up.

Sizing.Extend / Sizing.FitWidth crash → graceful fallback (40178956)

Configuring extended sizing with a component that doesn't report its own size threw a TypeError on unguarded getWidth()/getHeight() calls. ExtendedSizeComponent is now a real interface with an isExtendedSizeComponent type guard; SingleContainer warns and falls back to Sizing.Fit.

Tooltip hide behavior unified across containers (e5de46a5)

SingleContainer hid the tooltip on every setData (even with preventRender), while XYContainer only hid it on data changes and never on resize. Both containers now hide the tooltip (and XYContainer the crosshair) when data actually changes and on container resize.

Positional config mismatch warning (339974d9)

XYContainer.updateComponents matches configs to components positionally, so inserting/reordering components silently mis-assigns configs. A console warning now surfaces count mismatches.

Framework wrapper fixes

Svelte: child prop updates never re-rendered the chart (88b657ca)

Child data/config prop updates called setData/setConfig on the component instance but nothing notified the container — the chart didn't redraw until an unrelated container prop change or resize. The containers now provide a dirty context that generated components invoke after setData/setConfig; renders are rAF-batched by the core.

Vue: implicit proxy tracking replaced with explicit notifications (30108713)

Child data updates didn't trigger a render at all, and config updates re-rendered only by accident — component instances lived in deeply reactive refs, so the container's watchEffect happened to track config mutations through the proxy (and the child also called component.render() directly, double-rendering and skipping container-level scale recalculation). Now: container accessors expose a dirty() callback (rAF-batched), instances live in shallowRef/shallowReactive (no deep proxying on hot render paths), inject() defaults to undefined so components no longer throw outside a container, and SingleContainer's exposed component is a ref that actually updates.

Unified data prop contract across all five frameworks (eb9d5047)

The wrappers disagreed on falsy data: React/Solid/Angular ignored any falsy value (so resetting to an empty array only worked by accident), while Svelte/Vue forwarded undefined into setData. Every wrapper now forwards the data prop whenever it is not undefined, in components and containers alike.

Stop passing datasets and framework props into component configs (124340e3)

React/Vue/Solid wrappers spread raw props into setConfig/updateContainer, so the config merge deep-cloned the entire dataset (plus React children, className, style) on every update — once per component and once for the container. React templates/containers destructure non-config props away, Vue's useForwardProps skips data, Solid uses splitProps. React's arePropsEqual now compares data by reference instead of deep equality (deep-comparing large datasets on every parent render dominated the memo check).

Performance

Config merging no longer deep-clones (286d29c7)

Every setConfig/updateContainer deep-cloned the entire default config and all provided values — wrappers issue these on nearly every prop change, so animated charts paid a full config deep clone per component per frame. Merging now uses mergeByReference(): a new config object is still built each update (so prevConfig comparisons keep working and defaults are never mutated), plain objects merge recursively into new objects, everything else assigns by reference.

GraphDataModel: O(n²) passes → linear (bcc86a4b)

Multi-link detection, per-node link lists, previous-state transfer, and link endpoint resolution were all quadratic (endpoint resolution even used deep equality per comparison). Large graphs spent seconds of main-thread time in setData. All passes now use maps/indexes (canonical node-pair keys, id + reference indexes), keeping the deep-equality scan only as a fallback for value-equal object identifiers.

Graph: per-node forced reflows removed; shallow-copy data inputs (1de5d846)

The node update loop did a getBBox() and a getComputedStyle() read per node right after style writes — a thousand forced layout recalcs per render for a thousand nodes. Label font size is now resolved once per pass, and getBBox runs only for custom SVG nodes whose size isn't known upfront. GraphDataModel/MapGraphDataModel also deep-cloned every node/link/area/point per update; they now shallow-copy (the library only augments top-level properties, so nested user objects are safely shared).

Axis: auto-margin measurement caching + collision-pass rect snapshots (ac29b47e)

With autoMargin, preRender() built a complete invisible axis (full d3 render, per-tick wrapping/trimming, several getBBox calls) and threw it away — every render, twice on first render. Measurements are now cached keyed on config/data instances, size, and scale state. The tick collision pass re-read every label's getBoundingClientRect for each pair in each of three iterations; rects are now measured once per pass.

Scale domains computed once per render cycle; bleed getters memoized (5fbd9d4d)

XYContainer recomputed scale domains 3–4× per render (updateComponents, _preRender, _setAutoMargin) and repeatedly evaluated bleed getters that do O(n) or worse work (Scatter rebuilds all on-screen points, Timeline appends and measures live label elements, Sankey runs a full probe layout). _preRender now sets domains exactly once (auto-margin iterations only refresh ranges); Scatter/Timeline/Sankey cache bleed keyed on data/config instances and scale state; onRenderComplete reuses the bleed computed during _preRender.

Crosshair: bisect over cached sorted x values (37459ef8)

Every mousemove render sorted the entire dataset (twice per frame with snapping) and ran O(n) indexOf lookups. The crosshair now caches data indices sorted by x (invalidated on data/config/accessor changes) and bisects per frame.

Container: SVG child reconciliation instead of full teardown (750a8b40)

Every updateContainer call detached all SVG children and re-appended them, killing in-flight transitions and forcing style recalcs. Containers now reconcile the desired child list against the DOM, touching only elements that changed. The setData pass inside updateContainer also skips components already holding the current data instance, so config-only updates no longer reprocess data.

Tooltip/event dispatch: stop re-querying the DOM (aa63d022)

Event dispatch collected matched elements via selection.nodes() inside every handler invocation; elements are now snapshotted once at bind time (events re-bind after every render, so the snapshot stays in sync). The tooltip's delegated mousemove handler queried all trigger elements for every configured trigger on every mouse move; it now queries only after an event-path match.

Architecture

• render() is awaitable (9a53463e) — rendering is rAF-deferred, so callers reading the DOM right after render() got stale output. It now returns a promise resolving after the scheduled _render pass (batched calls share one promise; destroy() resolves pending promises so awaiting callers don't hang). rAF scheduling and resize-observer setup moved into a shared _scheduleRender(), removing SingleContainer's duplicated override.
• Container decoupled from concrete component configs (325568b6) — XYContainer imported six component config interfaces and cast to AreaConfigInterface to find the crosshair baseline, inverting the layering. XYComponentCore now exposes a getBaselineAccessor() contract method (overridden by Area), and XYConfigInterface is the base interface all component configs extend.
• Shared size/margin/color propagation (9b1d6abb) — both containers duplicated the per-component setSize/setContainerMargin/setColorFunction plumbing and the copies had drifted (SingleContainer never passed the color function to annotations). The loop now lives in ContainerCore.

Tooling: shared autogen driver (55b6fd1f)

Each wrapper package had a ~90% identical generator driver with fragile shell usage (async exec('mkdir') with ignored errors, per-file eslint shell-outs, silent failures). Only svelte/vue/solid generated export barrels — react and angular required manual edits, which is how the Angular barrel ended up missing RadialBar and Treemap entirely. A shared runComponentGenerator in @unovis/shared/integrations/autogen now does synchronous writes, error propagation, one eslint pass, and barrel generation for all five packages; generate scripts chain with &&.

Fixes: VisRadialBarComponent/Module and VisTreemapComponent/Module are now exported from @unovis/angular.

New example (c8d0cab6)

Added a data-reactivity gallery example with controls that mutate child-level data and config (<VisLine>'s data and lineWidth, not the container's) — the exact path the wrapper reactivity fixes address. Verified across React, Vue, Solid, Svelte, and vanilla TS that width toggling, point addition, clearing (empty data), and reset behave identically in all five panels.

Notes for reviewers

• mergeByReference semantics: configs no longer deep-clone user-provided values — nested objects are shared by reference. The library never mutates nested config values, so defaults stay intact, but user code that mutated a config object after passing it in will now be observed.
• Graph data shallow-copy: GraphDataModel no longer deep-clones nodes/links; nested user objects are shared by reference. Top-level augmentation (underscore state, layout fields) still happens on copies.
• Data prop contract: data={[]} now reliably clears charts in all frameworks; data={undefined} is consistently a no-op.
• Tooltip hiding: XYContainer now hides the tooltip/crosshair on resize (it previously didn't), and SingleContainer no longer hides it on no-op setData calls.
• The wrapper diffs are wide but almost entirely autogenerated — review the templates in packages/*/autogen/ and packages/shared/integrations/autogen.ts rather than each generated file.

[lee00678]

cc @suryahanumandla there's a svelte fix in here. Let's release a beta version with svelte 5 update and see if we could get the community to test it besides just us.

[lee00678]

How did we miss this. :p

[rokotyan]

Yeah this is embarrassing 😄

[lee00678]

This one is awesome!

[lee00678]

#	Commit Message	Reviewed	Merging PR
1	Core / Utils: Fix merge() class instance value handling and clone-on-empty aliasing	[x]	#881
2	Component / All: Fix shared default config aliasing when constructed without a config	[x]	#881
3	Container / XY: Fix data change detection in setData	[x]	#883
4	Core / Component: Add _onDestroy teardown hook and fix component resource leaks	[x]	#883
5	Core / GraphDataModel: Index nodes and links with maps instead of quadratic scans	[x]	#883
6	Core / Tooltip: Avoid re-querying the DOM on every dispatched event	[x]	#883
7	Container / XY: Warn when updateComponents receives a mismatched number of configs	[x]	#883
8	Container: Unify tooltip hide behavior between XY and Single containers	[x]	#883
9	Container / Single: Validate extended sizing support instead of crashing	[ ]
10	Core / Container: Make render() awaitable and share the render scheduling logic	[ ]	Pending.
11	Container / XY: Decouple the container from concrete component config types	[ ]
12	Container: Reconcile SVG children on update instead of full DOM teardown	[ ]
13	Container: Consolidate component size, margin, and color propagation	[ ]
14	Svelte: Re-render the chart when child component data or config changes	[ ]
15	Vue: Replace implicit proxy tracking with explicit container notifications	[ ]
16	React / Vue / Solid: Stop passing datasets and framework props into component configs	[ ]
17	Misc / Wrappers: Unify the data prop contract across all five frameworks	[ ]
18	Shared / Autogen: Consolidate the five component generator drivers	[ ]
19	Component / Crosshair: Bisect over cached sorted x values on mousemove	[ ]
20	Container / XY / Component: Compute scale domains once per render cycle and memoize expensive bleed getters	[ ]
21	Component / Graph: Avoid per-node forced reflows; shallow-copy data model inputs	[ ]
22	Core / Utils: Stop deep-cloning configs on every configuration update	[ ]
23	Component / Axis: Cache auto-margin measurements and snapshot rects in the tick collision pass	[ ]
24	Shared / Examples: Add data-reactivity example to the multi-framework gallery	[ ]