Merge branch '1.5.0-exaforce' into half-donut-2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "unovis",
-  "version": "1.4.4",
+  "version": "1.5.0-exf.3",
   "license": "Apache-2.0",
   "private": true,
   "workspaces": [
@@ -72,4 +72,4 @@
   "lint-staged": {
     "*.{js,ts,jsx,tsx,svelte}": "eslint --quiet --cache --fix"
   }
-}
+}

packages/angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/angular",
   "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
-  "version": "1.4.4",
+  "version": "1.5.0-exf.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",
@@ -44,7 +44,7 @@
     "tslib": "^2.3.1"
   },
   "peerDependencies": {
-    "@unovis/ts": "1.4.4",
+    "@unovis/ts": "1.5.0-exf.3",
     "@angular/common": "12 - 18",
     "@angular/compiler": "12 - 18",
     "@angular/core": "12 - 18"

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/react",
   "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
-  "version": "1.4.4",
+  "version": "1.5.0-exf.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",
@@ -35,7 +35,7 @@
     "publish:dist": "rm -rf dist/.cache; cp ./{LICENSE,README.md,package.json} ./dist; cd ./dist; npm publish"
   },
   "peerDependencies": {
-    "@unovis/ts": "1.4.4",
+    "@unovis/ts": "1.5.0-exf.3",
     "react": ">=16.8.0 || ^17 || ^18",
     "react-dom": ">=16.8.0 || ^17 || ^18"
   },

packages/shared/examples/shaped-scatter-plot/shaped-scatter-plot-solid.tsx

@@ -1,15 +1,15 @@
-import { JSX } from 'solid-js'
-import { colors, Scale, Scatter } from '@unovis/ts'
 import { VisAxis, VisBulletLegend, VisScatter, VisTooltip, VisXYContainer } from '@unovis/solid'
+import { colors, Scale, Scatter } from '@unovis/ts'
+import { JSX } from 'solid-js'
+import { categories, data, DataRecord, shapes, sumCategories } from './data'
 
-import { data, DataRecord, shapes, categories, sumCategories } from './data'
 
 const ShapedScatterPlot = (): JSX.Element => {
   const shapeScale = Scale.scaleOrdinal(shapes).domain(categories)
   const colorScale = Scale.scaleOrdinal(colors).domain(categories)
 
   // scatter props
-  const x = (d: DataRecord) => +new Date(d.date)
+  const x = (d: DataRecord) => +(new Date(`01-${d.date}`))
   const y = (d: DataRecord) => d.trainedParam
   const color = (d: DataRecord) => colorScale(sumCategories(d.owner))
   const shape = (d: DataRecord) => shapeScale(sumCategories(d.owner))

packages/shared/examples/shaped-scatter-plot/shaped-scatter-plot.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { Scale, Scatter, StringAccessor, colors } from '@unovis/ts'
+import { Scale, Scatter, colors } from '@unovis/ts'
 import { data, DataRecord, shapes, categories, sumCategories } from './data'
 
 const shapeScale = Scale.scaleOrdinal(shapes).domain(categories)
@@ -12,7 +12,7 @@ const colorScale = Scale.scaleOrdinal(colors).domain(categories)
 export class ShapedScatterPlotComponent {
   data = data
 
-  getX = (d: DataRecord): number => +(new Date(d.date))
+  getX = (d: DataRecord): number => +(new Date(`01-${d.date}`))
   getY = (d: DataRecord): number => d.trainedParam
   getColor = (d: DataRecord): string => colorScale(sumCategories(d.owner))
   getShape = (d: DataRecord): string => shapeScale(sumCategories(d.owner))

packages/shared/examples/shaped-scatter-plot/shaped-scatter-plot.svelte

@@ -7,7 +7,7 @@
   const colorScale = Scale.scaleOrdinal(colors).domain(categories)
 
   // scatter props
-  const x = (d: DataRecord) => +(new Date(d.date))
+  const x = (d: DataRecord) => +(new Date(`01-${d.date}`))
   const y = (d: DataRecord) => d.trainedParam
   const color = (d: DataRecord) => colorScale(sumCategories(d.owner))
   const shape = (d: DataRecord) => shapeScale(sumCategories(d.owner))

packages/shared/examples/shaped-scatter-plot/shaped-scatter-plot.ts

@@ -1,4 +1,4 @@
-import { Axis, BulletLegend, Position, Scale, Scatter, Tooltip, XYContainer, colors } from '@unovis/ts'
+import { Axis, BulletLegend, Scale, Scatter, Tooltip, XYContainer, colors } from '@unovis/ts'
 import { data, DataRecord, shapes, categories, sumCategories } from './data'
 
 const shapeScale = Scale.scaleOrdinal(shapes).domain(categories)
@@ -14,7 +14,7 @@ const legend = new BulletLegend(container, {
 })
 
 const scatter = new Scatter<DataRecord>({
-  x: (d: DataRecord) => +(new Date(d.date)),
+  x: (d: DataRecord) => +(new Date(`01-${d.date}`)),
   y: (d: DataRecord) => d.trainedParam,
   color: (d: DataRecord) => colorScale(sumCategories(d.owner)),
   shape: (d: DataRecord) => shapeScale(sumCategories(d.owner)),

packages/shared/examples/shaped-scatter-plot/shaped-scatter-plot.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback } from 'react'
-import { Position, Scale, Scatter, colors } from '@unovis/ts'
 import { VisAxis, VisBulletLegend, VisScatter, VisTooltip, VisXYContainer } from '@unovis/react'
-import { data, DataRecord, shapes, categories, sumCategories } from './data'
+import { colors, Scale, Scatter } from '@unovis/ts'
+import React, { useCallback } from 'react'
+import { categories, data, DataRecord, shapes, sumCategories } from './data'
 
 const shapeScale = Scale.scaleOrdinal(shapes).domain(categories)
 const colorScale = Scale.scaleOrdinal(colors).domain(categories)
@@ -20,7 +20,7 @@ export default function ShapedScatterPlot (): JSX.Element {
       <VisBulletLegend items={legendItems}/>
       <VisXYContainer data={data} height={'60vh'} scaleByDomain={true}>
         <VisScatter
-          x={useCallback((d: DataRecord) => +(new Date(d.date)), [])}
+          x={useCallback((d: DataRecord) => +(new Date(`01-${d.date}`)), [])}
           y={useCallback((d: DataRecord) => d.trainedParam, [])}
           shape={useCallback((d: DataRecord) => shapeScale(sumCategories(d.owner)), [])}
           size={15}

packages/shared/examples/shaped-scatter-plot/shaped-scatter-plot.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { Position, Scale, Scatter, colors } from '@unovis/ts'
+import { Scale, Scatter, colors } from '@unovis/ts'
 import { VisXYContainer, VisScatter, VisAxis, VisTooltip, VisBulletLegend } from '@unovis/vue'
 import { data, DataRecord, shapes, categories, sumCategories } from './data'
 
 const shapeScale = Scale.scaleOrdinal(shapes).domain(categories)
 const colorScale = Scale.scaleOrdinal(colors).domain(categories)
 
 // scatter props
-const x = (d: DataRecord) => +(new Date(d.date))
+const x = (d: DataRecord) => +(new Date(`01-${d.date}`))
 const y = (d: DataRecord) => d.trainedParam
 const color = (d: DataRecord) => colorScale(sumCategories(d.owner))
 const shape = (d: DataRecord) => shapeScale(sumCategories(d.owner))

packages/shared/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/shared",
   "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
-  "version": "1.4.4",
+  "version": "1.5.0-exf.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",

packages/solid/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/solid",
   "description": "Modular data visualization framework for React, Angular, Svelte, Vue, Solid and vanilla TypeScript or JavaScript",
-  "version": "1.4.4",
+  "version": "1.5.0-exf.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",
@@ -34,7 +34,7 @@
     "gallery": "vite"
   },
   "peerDependencies": {
-    "@unovis/ts": "1.4.4",
+    "@unovis/ts": "1.5.0-exf.3",
     "solid-js": "^1.9.0"
   },
   "devDependencies": {

packages/svelte/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/svelte",
   "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
-  "version": "1.4.4",
+  "version": "1.5.0-exf.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",
@@ -43,7 +43,7 @@
     "publish:dist": "rm -rf dist/.cache; cp ./{LICENSE,README.md,package.json} ./dist; cd ./dist; npm publish"
   },
   "peerDependencies": {
-    "@unovis/ts": "1.4.4",
+    "@unovis/ts": "1.5.0-exf.3",
     "svelte": "^3.48.0 || ^4.0.0"
   },
   "devDependencies": {

packages/ts/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/ts",
   "description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
-  "version": "1.4.4",
+  "version": "1.5.0-exf.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",

packages/ts/src/components/graph/config.ts

@@ -3,12 +3,15 @@ import { D3DragEvent } from 'd3-drag'
 import { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
 import { Selection } from 'd3-selection'
 
+// Utils
+import { isEqual } from 'utils/data'
+
 // Config
 import { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'
 
 // Types
 import { TrimMode } from 'types/text'
-import { GraphInputLink, GraphInputNode } from 'types/graph'
+import { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'
 import { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'
 
 // Local Types
@@ -145,6 +148,8 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
    * `1.5` - very curve.
    * Default: `0` */
   linkCurvature?: NumericAccessor<L>;
+  /** Highlight links on hover. Default: `true` */
+  linkHighlightOnHover?: boolean;
   /** Set selected link by its unique id. Default: `undefined` */
   selectedLinkId?: number | string;
 
@@ -261,6 +266,14 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
     width: number,
     height: number
   ) => void;
+
+  /** Determines whether the component should update when new data is provided.
+   * This function takes the previous and new data as parameters and returns a boolean
+   * indicating whether the update should proceed. Useful for fine-grained control over
+   * update behavior when your data has a complex nested structure.
+   * By default the `isEqual` function from Unovis will be used to do the comparison.
+   */
+  shouldDataUpdate?: (prevData: GraphInputData<N, L>, nextData: GraphInputData<N, L>) => boolean;
 }
 
 export const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInputLink> = {
@@ -316,6 +329,7 @@ export const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInput
   linkNeighborSpacing: 8,
   linkDisabled: false,
   linkCurvature: 0,
+  linkHighlightOnHover: true,
   selectedLinkId: undefined,
   nodeGaugeAnimDuration: 1500,
 
@@ -361,4 +375,8 @@ export const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInput
   onNodeSelectionBrush: undefined,
   onNodeSelectionDrag: undefined,
   onRenderComplete: undefined,
+
+  shouldDataUpdate: (prevData: GraphInputData<GraphInputNode, GraphInputLink>, nextData: GraphInputData<GraphInputNode, GraphInputLink>): boolean => {
+    return !isEqual(prevData, nextData)
+  },
 }

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

@@ -11,7 +11,7 @@ import { ComponentCore } from 'core/component'
 import { GraphDataModel } from 'data-models/graph'
 
 // Types
-import { GraphInputLink, GraphInputNode } from 'types/graph'
+import { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'
 import { Spacing } from 'types/spacing'
 
 // Utils
@@ -43,7 +43,7 @@ export class Graph<
   N extends GraphInputNode,
   L extends GraphInputLink,
 > extends ComponentCore<
-  {nodes: N[]; links?: L[]},
+  GraphInputData<N, L>,
   GraphConfigInterface<N, L>
   > {
   static selectors = {
@@ -58,6 +58,7 @@ export class Graph<
     dimmedNode: nodeSelectors.greyedOutNode,
     link: linkSelectors.gLink,
     linkLine: linkSelectors.link,
+    linkLabel: linkSelectors.linkLabelGroup,
     dimmedLink: linkSelectors.greyedOutLink,
     panel: panelSelectors.gPanel,
     panelRect: panelSelectors.panel,
@@ -161,9 +162,9 @@ export class Graph<
     this._getLinkArrowDefId = this._getLinkArrowDefId.bind(this)
   }
 
-  setData (data: {nodes: N[]; links?: L[]}): void {
+  setData (data: GraphInputData<N, L>): void {
     const { config } = this
-    if (isEqual(this.datamodel.data, data)) return
+    if (!config.shouldDataUpdate(this.datamodel.data, data)) return
 
     this.datamodel.nodeSort = config.nodeSort
     this.datamodel.data = data
@@ -295,13 +296,6 @@ export class Graph<
       if (disableZoom) this.g.on('.zoom', null)
       else this.g.call(this._zoomBehavior).on('dblclick.zoom', null)
 
-      // While the graph is animating we disable pointer events on the graph group
-      if (animDuration) { this._graphGroup.attr('pointer-events', 'none') }
-      smartTransition(this._graphGroup, animDuration)
-        .on('end interrupt', () => {
-          this._graphGroup.attr('pointer-events', null)
-        })
-
       // We need to set up events and attributes again because the rendering might have been delayed by the layout
       // calculation and they were not set up properly (see the render function of `ComponentCore`)
       this._setUpComponentEventsThrottled()
@@ -643,7 +637,7 @@ export class Graph<
   private _onLinkMouseOver (d: GraphLink<N, L>): void {
     if (this._isDragging) return
 
-    d._state.hovered = true
+    if (this.config.linkHighlightOnHover) d._state.hovered = true
     this._updateNodesLinksPartial()
   }
 

packages/ts/src/components/graph/modules/link/style.ts

@@ -40,7 +40,6 @@ export const linkSupport = css`
 
   fill: none;
   stroke-linecap: round;
-  pointer-events: stroke;
   stroke-width: var(--vis-graph-link-support-stroke-width);
   stroke-opacity: 0;
   stroke: var(--vis-graph-link-stroke-color);
@@ -108,7 +107,6 @@ export const flowCircle = css`
 
 export const linkLabelGroup = css`
   label: label-group;
-  pointer-events: all;
 `
 
 export const linkLabelBackground = css`

packages/ts/src/types/graph.ts

@@ -10,6 +10,14 @@ export interface GraphInputLink {
   target: number | string | GraphInputNode;
 }
 
+export type GraphInputData<
+  N extends GraphInputNode = GraphInputNode,
+  L extends GraphInputLink = GraphInputLink,
+> = {
+  nodes: N[];
+  links?: L[];
+}
+
 export type GraphNodeCore<N extends GraphInputNode, L extends GraphInputLink> = N & {
   // eslint-disable-next-line no-use-before-define
   links: GraphLinkCore<N, L>[];

packages/ts/src/utils/data.ts

@@ -22,15 +22,20 @@ export const isEmpty = <T>(obj: T): boolean => {
 }
 
 // Based on https://github.com/maplibre/maplibre-gl-js/blob/e78ad7944ef768e67416daa4af86b0464bd0f617/src/style-spec/util/deep_equal.ts, 3-Clause BSD license
-export const isEqual = (a?: unknown | null, b?: unknown | null, visited: Set<any> = new Set()): boolean => {
+export const isEqual = (
+  a: unknown | null | undefined,
+  b: unknown | null | undefined,
+  skipKeys: string[] = [],
+  visited: Set<any> = new Set()
+): boolean => {
   if (Array.isArray(a)) {
     if (!Array.isArray(b) || a.length !== b.length) return false
 
     if (visited.has(a)) return true
     else visited.add(a)
 
     for (let i = 0; i < a.length; i++) {
-      if (!isEqual(a[i], b[i], visited)) return false
+      if (!isEqual(a[i], b[i], skipKeys, visited)) return false
     }
 
     return true
@@ -44,14 +49,16 @@ export const isEqual = (a?: unknown | null, b?: unknown | null, visited: Set<any
     if (!(typeof b === 'object')) return false
     if (a === b) return true
 
-    const keys = Object.keys(a)
-    if (keys.length !== Object.keys(b).length) return false
+    const keysA = Object.keys(a).filter(key => !skipKeys.includes(key))
+    const keysB = Object.keys(b).filter(key => !skipKeys.includes(key))
+
+    if (keysA.length !== keysB.length) return false
 
     if (visited.has(a)) return true
     else visited.add(a)
 
-    for (const key in a) {
-      if (!isEqual((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key], visited)) return false
+    for (const key of keysA) {
+      if (!isEqual((a as Record<string, unknown>)[key], (b as Record<string, unknown>)[key], skipKeys, visited)) return false
     }
 
     return true