Feat/part 2 878

packages/ts/src/components/axis/index.ts

@@ -715,4 +715,8 @@ export class Axis<Datum> extends XYComponentCore<Datum, AxisConfigInterface<Datu
       default: return 0
     }
   }
+
+  protected _onDestroy (): void {
+    cancelAnimationFrame(this._collideTickLabelsAnimFrameId)
+  }
 }

packages/ts/src/components/crosshair/index.ts

@@ -316,6 +316,11 @@ export class Crosshair<Datum> extends XYComponentCore<Datum, CrosshairConfigInte
     this.hide(event)
   }
 
+  protected _onDestroy (): void {
+    window.cancelAnimationFrame(this._animFrameId)
+    this.container?.on('.crosshair', null)
+  }
+
   _showTooltip (datum: Datum | undefined, xValue: number, pos: [number, number], nearestDatumIndex: number | undefined): void {
     const { config, datamodel } = this
     const tooltip = config.tooltip ?? this.tooltip

packages/ts/src/components/graph/index.ts

@@ -241,17 +241,19 @@
       this._brush.call(this._brushBehavior)
 
       // Activate the brush when the shift key is pressed
+      // The event namespace includes the component uid to prevent
+      // multiple Graph instances from overriding each other's listeners
       select(window)
-        .on('keydown.unovis-graph', e => e.key === 'Shift' && this._activateBrush())
-        .on('keyup.unovis-graph', e => e.key === 'Shift' && this._clearBrush())
+        .on(`keydown.unovis-graph-${this.uid}`, e => e.key === 'Shift' && this._activateBrush())
+        .on(`keyup.unovis-graph-${this.uid}`, e => e.key === 'Shift' && this._clearBrush())
 
       this._zoomBehavior.filter(event => !event.shiftKey)
     } else {
       this._brush.on('.brush', null)
 
       select(window)
-        .on('keydown.unovis-graph', null)
-        .on('keyup.unovis-graph', null)
+        .on(`keydown.unovis-graph-${this.uid}`, null)
+        .on(`keyup.unovis-graph-${this.uid}`, null)
 
       // Clear brush in case it was disabled in an active state
       if (this._brush.classed('active')) this._clearBrush()
@@ -669,21 +671,21 @@
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private _onNodeClick (d: GraphNode<N, L>): void {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private _onNodeMouseOut (d: GraphNode<N, L>): void {
     this._updateNodesLinksPartial()
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private _onNodeMouseOver (d: GraphNode<N, L>): void {
     this._updateNodesLinksPartial()
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   private _onLinkClick (d: GraphLink<N, L>): void {
   }
 
   private _onLinkMouseOver (d: GraphLink<N, L>): void {
@@ -1144,4 +1146,13 @@
     const nodeElements = this._nodesGroup.selectAll<SVGGElement, GraphNode<N, L>>(`.${nodeSelectors.gNode}:not(.${nodeSelectors.gNodeExit})`)
     updateNodePositions(nodeElements, animDuration)
   }
+
+  protected _onDestroy (): void {
+    this._timer?.stop()
+    this._timer = undefined
+
+    select(window)
+      .on(`keydown.unovis-graph-${this.uid}`, null)
+      .on(`keyup.unovis-graph-${this.uid}`, null)
+  }
 }

packages/ts/src/components/leaflet-flow-map/index.ts

@@ -229,12 +229,12 @@ export class LeafletFlowMap<
     this.canvasElement.style.transform = `translate(${shift.x}px, ${shift.y}px)`
   }
 
-  public destroy (): void {
+  protected _onDestroy (): void {
     this.resizeObserver?.disconnect()
     this.renderer?.destroy()
     this.canvasElement?.removeEventListener('mousemove', this.onCanvasMouseMoveBound)
     this.canvasElement?.removeEventListener('click', this.onCanvasClickBound)
-    super.destroy()
+    this.leafletMap?.destroy()
   }
 
   // Leaflet Map useful methods

packages/ts/src/components/leaflet-map/index.ts

@@ -520,7 +520,7 @@
 
     // Render content
     const points = this._pointGroup.selectAll<SVGGElement, LeafletMapPoint<Datum>>(`.${s.point}:not(.exit)`)
       .data(pointData, (d: LeafletMapPoint<Datum>, i) => `${d.id || d.geometry.coordinates.join('')}`)
 
     points.exit<LeafletMapPoint<Datum>>().classed('exit', true).call(removeNodes)
     const pointsEnter = points.enter().append('g').attr('class', s.point)
@@ -533,7 +533,7 @@
 
     this._clusterBackground.call(updateBackgroundNode, this._expandedCluster, config, this._map.leaflet, this._clusterBackgroundRadius)
     if (this._expandedCluster && config.clusterBackground) {
       pointData.forEach((d, i) => { d._zIndex = (d.properties as LeafletMapPointDatum<Datum>)?.expandedClusterPoint ? 2 : 0 })
       this._pointGroup
         .selectAll<SVGGElement, LeafletMapPoint<Datum>>(`.${s.point}, .${s.clusterBackground}, .${s.pointSelectionRing}`)
         .sort((a: LeafletMapPoint<Datum>, b: LeafletMapPoint<Datum>) => a._zIndex - b._zIndex)
@@ -647,7 +647,7 @@
 
     if (this._expandedCluster) {
       // Remove expanded cluster from the data
       geoJSONPoints = geoJSONPoints.filter(c => (c as ClusterFeature<LeafletMapClusterDatum<Datum>>).properties.cluster_id !== (this._expandedCluster.cluster.properties as LeafletMapClusterDatum<Datum>).cluster_id)
       // Add points from the expanded cluster
       geoJSONPoints = geoJSONPoints.concat(this._expandedCluster.points)
     }
@@ -747,7 +747,7 @@
     config.onMapMoveZoom?.(this._getMapZoomState())
   }
 
   private _onBackgroundClick (el: HTMLElement, event: MouseEvent): void {
     const { config } = this
 
     if (this._cancelBackgroundClick) {
@@ -779,7 +779,7 @@
     }
   }
 
   private _onPointMouseDown (d: LeafletMapPoint<Datum>, event: MouseEvent): void {
     this._cancelBackgroundClick = true
   }
 
@@ -813,7 +813,7 @@
     this.fitToPoints()
   }
 
-  public destroy (): void {
+  protected _onDestroy (): void {
     constraintMapViewThrottled.cancel()
     cancelAnimationFrame(this._renderDataAnimationFrameId)
     cancelAnimationFrame(this._flyToBoundsAnimationFrameId)
@@ -822,7 +822,6 @@
 
     map?.stop()
     map?.remove()
-    this.g.remove()
     this.resizeObserver.disconnect()
     this.themeObserver?.disconnect()
   }

packages/ts/src/components/tooltip/index.ts

@@ -360,12 +360,12 @@ export class Tooltip {
             const template = currentConfig.triggers[className]
             if (!template) continue // Skip if the trigger is not configured
 
-            const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()
-
             // Go through all of the elements in the event path (from the deepest element upwards)
             for (const el of path) {
               if (el === selection.node()) break // Break on the component's level (usually the `<g>` element)
               if (el.classList.contains(className)) { // If there's a match, show the tooltip
+                // Query the trigger elements only after a match (we need the element index for the template)
+                const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()
                 const i = els.indexOf(el)
                 const d = select(el).datum()
                 const content = template(d, i, els)

packages/ts/src/components/topojson-map/index.ts

@@ -1571,7 +1571,7 @@ export class TopoJSONMap<
     this._renderPoints(this.config.duration)
   }
 
-  destroy (): void {
+  protected _onDestroy (): void {
     window.cancelAnimationFrame(this._animFrameId)
     this._stopFlowAnimation()
     window.cancelAnimationFrame(this._collisionDetectionAnimFrameId)

packages/ts/src/containers/single-container/index.ts

@@ -39,9 +39,11 @@ export class SingleContainer<Data> extends ContainerCore {
   public setData (data: Data, preventRender?: boolean): void {
     const { config } = this
 
+    // Hide the tooltip only when the data has actually changed
+    const hasDataUpdated = this.component?.datamodel.data !== data
     if (this.component) this.component.setData(data)
     if (!preventRender) this.render()
-    config.tooltip?.hide()
+    if (hasDataUpdated) config.tooltip?.hide()
   }
 
   public updateContainer (containerConfig: SingleContainerConfigInterface<Data>, preventRender?: boolean): void {

packages/ts/src/containers/xy-container/index.ts

@@ -20,7 +20,7 @@ import { ScaleDimension } from '@/types/scale'
 import { Direction } from '@/types/direction'
 
 // Utils
-import { clamp, clean, flatten, isEqual } from '@/utils/data'
+import { clamp, clean, flatten } from '@/utils/data'
 import { guid } from '@/utils/misc'
 
 // Config
@@ -117,6 +117,7 @@ export class XYContainer<Datum> extends ContainerCore {
     const { components, config } = this
     if (!data) return
 
+    const hasDataUpdated = this.datamodel.data !== data
     this.datamodel.data = data
 
     components.forEach((c) => {
@@ -130,7 +131,6 @@ export class XYContainer<Datum> extends ContainerCore {
     // Hide tooltip and crosshair if the data has changed
     // Important: We still want to do `setData` for the components above even if the data hasn't changed
     // because calling `updateContainer` may add new components and we need to pass them the data
-    const hasDataUpdated = !isEqual(this.datamodel.data, data)
     if (hasDataUpdated) {
       config.tooltip?.hide()
       config.crosshair?.hide()
@@ -197,6 +197,11 @@ export class XYContainer<Datum> extends ContainerCore {
   public updateComponents (componentConfigs: XYConfigInterface<Datum>[], preventRender?: boolean): void {
     const { config } = this
 
+    // Configs are matched to components by array index
+    if (componentConfigs && componentConfigs.length !== this.components.length) {
+      console.warn('Unovis | XY Container: The number of provided component configs doesn\'t match the number of components. Configs are matched to components by index, so some components won\'t be updated')
+    }
+
     this.components.forEach((c, i) => {
       const componentConfig = componentConfigs[i]
       if (componentConfig) {
@@ -444,6 +449,15 @@ export class XYContainer<Datum> extends ContainerCore {
     }
   }
 
+  protected _onResize (): void {
+    const { config } = this
+    super._onResize()
+
+    // Hide the tooltip and crosshair on resize to prevent them from rendering at a stale position
+    config.tooltip?.hide()
+    config.crosshair?.hide()
+  }
+
   private _getBleed<T extends XYComponentCore<Datum>> (components: T[]): Spacing {
     return components.map(c => c.bleed).reduce((bleed, b) => {
       for (const key of Object.keys(bleed)) {

packages/ts/src/core/component/index.ts

@@ -160,8 +160,11 @@ export class ComponentCore<
       Object.keys(events[className]).forEach(eventType => {
         const selection = (this.g as Selection<SVGGElement | HTMLElement, unknown, null, undefined>)
           .selectAll<SVGGElement | HTMLElement, unknown>(`.${className}`)
+
+        // Snapshot the matched elements once at bind time (events are re-bound after every render)
+        // instead of re-querying the DOM on every dispatched event
+        const els = selection.nodes()
         selection.on(eventType + suffix, (event: MouseEvent & WheelEvent & PointerEvent & TouchEvent, d) => {
-          const els = selection.nodes()
           const i = els.indexOf(event.currentTarget as SVGGElement | HTMLElement)
           const eventFunction = events[className][eventType as VisEventType]
           const { datum, index } = this._mapEventDatum(d, i)
@@ -171,7 +174,15 @@ export class ComponentCore<
     })
   }
 
+  /** Override to release component-specific resources (timers, animation frames, global event
+   * listeners, observers). Called by `destroy()` before the component's DOM node is removed. */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  protected _onDestroy (): void {}
+
   public destroy (): void {
+    if (this.isDestroyed()) return
+
+    this._onDestroy()
     this.g?.remove()
     this.element = undefined
   }

packages/ts/src/data-models/graph.ts

@@ -1,4 +1,4 @@
-import { isNumber, isUndefined, cloneDeep, isFunction, without, isString, isObject, isEqual } from '@/utils/data'
+import { isNumber, isUndefined, cloneDeep, isFunction, isString, isObject, isEqual } from '@/utils/data'
 
 // Types
 import { GraphInputLink, GraphInputNode, GraphLinkCore, GraphNodeCore } from '@/types/graph'
@@ -23,6 +23,8 @@ export class GraphDataModel<
   private _links: OutLink[] = []
   private _inputNodesMap = new Map<OutNode, N>()
   private _nodesMap = new Map<string | number, OutNode>()
+  private _nodesByUserId = new Map<string, OutNode>()
+  private _nodesByInputRef = new Map<N, OutNode>()
 
   // Model configuration
   public nodeId: ((n: N) => string | undefined) = n => (isString(n.id) || isFinite(n.id as number)) ? `${n.id}` : undefined
@@ -45,6 +47,8 @@ export class GraphDataModel<
 
     this._inputNodesMap.clear()
     this._nodesMap.clear()
+    this._nodesByUserId.clear()
+    this._nodesByInputRef.clear()
 
     // Todo: Figure out why TypeScript complains about types
     const nodes = cloneDeep(inputData?.nodes ?? []) as undefined as OutNode[]
@@ -61,6 +65,12 @@ export class GraphDataModel<
       node._id = this.nodeId(node) || `${i}`
       this._inputNodesMap.set(node, inputData.nodes[i])
       this._nodesMap.set(node._id, node)
+      this._nodesByInputRef.set(inputData.nodes[i], node)
+
+      // Index nodes by their user-provided id for link endpoint resolution.
+      // The first node wins on duplicate ids, matching lookup-by-scan behavior
+      const userId = this.nodeId(node)
+      if (userId !== undefined && !this._nodesByUserId.has(userId)) this._nodesByUserId.set(userId, node)
     })
 
     // Sort nodes
@@ -73,31 +83,48 @@ export class GraphDataModel<
       link.target = this.findNode(nodes, link.target)
     })
 
-    // Set link index for multiple link rendering
-    links.forEach((link, i) => {
-      if (!isUndefined(link._index) && !isUndefined(link._neighbours)) return
+    // Group links connecting the same pair of nodes (in either direction) to set
+    // their index for multiple link rendering. Nodes are keyed by `_index` because
+    // it's unique per node object (unlike `_id`, which can collide on duplicate user ids)
+    const linkGroups = new Map<string, OutLink[]>()
+    for (const link of links) {
+      const sourceIndex = (link.source as OutNode)?._index ?? -1
+      const targetIndex = (link.target as OutNode)?._index ?? -1
+      const key = sourceIndex <= targetIndex ? `${sourceIndex}|${targetIndex}` : `${targetIndex}|${sourceIndex}`
+      const group = linkGroups.get(key)
+      if (group) group.push(link)
+      else linkGroups.set(key, [link])
+    }
 
-      const linksFiltered = links.filter(l =>
-        ((link.source === l.source) && (link.target === l.target)) ||
-        ((link.source === l.target) && (link.target === l.source))
-      )
+    linkGroups.forEach(group => {
+      // Links that came in with `_index` and `_neighbours` already set keep their values,
+      // but a single new link in the group triggers a reindex of the whole group
+      if (group.every(l => !isUndefined(l._index) && !isUndefined(l._neighbours))) return
 
-      linksFiltered.forEach((l, i) => {
+      const firstLink = group[0]
+      group.forEach((l, i) => {
         l._index = i
         l._id = this.linkId(l) || `${l.source?._id}-${l.target?._id}-${i}`
-        l._neighbours = linksFiltered.length
-        l._direction = ((link.source === l.source) && (link.target === l.target)) ? 1 : -1
+        l._neighbours = group.length
+        l._direction = ((firstLink.source === l.source) && (firstLink.target === l.target)) ? 1 : -1
       })
     })
 
+    // Determine if a node is connected or not and store its links as a property
+    const linksByNode = new Map<OutNode, OutLink[]>()
+    nodes.forEach(node => linksByNode.set(node, []))
+    for (const l of links) {
+      if (l.source) linksByNode.get(l.source as OutNode)?.push(l)
+      if (l.target && l.target !== l.source) linksByNode.get(l.target as OutNode)?.push(l)
+    }
+
     nodes.forEach(d => {
-      // Determine if a node is connected or not and store it as a property
-      d.links = links.filter(l => (l.source === d) || (l.target === d))
+      d.links = linksByNode.get(d)
       d._isConnected = d.links.length !== 0
     })
 
     this._nonConnectedNodes = nodes.filter(d => !d._isConnected)
-    this._connectedNodes = without(nodes, ...this._nonConnectedNodes)
+    this._connectedNodes = nodes.filter(d => d._isConnected)
 
     this._nodes = nodes
 
@@ -131,8 +158,13 @@ export class GraphDataModel<
     let foundNode: OutNode | undefined
 
     if (isNumber(nodeIdentifier)) foundNode = nodes[nodeIdentifier as number]
-    else if (isString(nodeIdentifier)) foundNode = nodes.find(node => this.nodeId(node) === nodeIdentifier)
-    else if (isObject(nodeIdentifier)) foundNode = nodes.find(node => isEqual(this._inputNodesMap.get(node), nodeIdentifier))
+    else if (isString(nodeIdentifier)) foundNode = this._nodesByUserId.get(nodeIdentifier as string)
+    else if (isObject(nodeIdentifier)) {
+      // Fast path: the identifier is the same object as one of the input nodes.
+      // Fall back to a deep-equality scan for value-equal but not identical objects
+      foundNode = this._nodesByInputRef.get(nodeIdentifier as N) ??
+        nodes.find(node => isEqual(this._inputNodesMap.get(node), nodeIdentifier))
+    }
 
     if (!foundNode) {
       console.warn(`Unovis | Graph Data Model: Node ${nodeIdentifier} is missing from the nodes list`)
@@ -146,8 +178,15 @@ export class GraphDataModel<
     itemsPrev: T[],
     getId: (d: T) => string
   ): void {
+    // The first item wins on duplicate ids, matching lookup-by-scan behavior
+    const prevById = new Map<string, T>()
+    for (const dPrev of itemsPrev) {
+      const id = getId(dPrev)
+      if (!prevById.has(id)) prevById.set(id, dPrev)
+    }
+
     for (const item of items) {
-      const dPrev = itemsPrev.find((dp) => getId(dp) === getId(item))
+      const dPrev = prevById.get(getId(item))
       if (dPrev) item._state = { ...dPrev._state }
       else item._state = {}
     }

packages/ts/src/utils/data.ts

@@ -29,6 +29,8 @@ export const isEqual = (
   skipKeys: string[] = [],
   visited: Set<any> = new Set()
 ): boolean => {
+  if (a === b) return true
+
   if (Array.isArray(a)) {
     if (!Array.isArray(b) || a.length !== b.length) return false