From 5953227c1bf3f1f4faddd94558ffe15d47029a2e Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@exaforce.com>
Date: Wed, 19 Mar 2025 13:47:00 -0700
Subject: [PATCH 1/8] Component | Graph: Update link flow configuration to use
 NumericAccessor

- Changed `linkFlowAnimDuration` and `linkFlowParticleSize` to use `NumericAccessor` for better flexibility.
- Updated related calculations in the `_onLinkFlowTimerFrame` and `updateLinks` functions to accommodate the new accessor type.
---
 packages/ts/src/components/graph/config.ts          |  5 ++---
 packages/ts/src/components/graph/index.ts           | 13 +++++++------
 .../ts/src/components/graph/modules/link/index.ts   | 13 +++++++------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/ts/src/components/graph/config.ts b/packages/ts/src/components/graph/config.ts
index 61aa6ff77..4eea3ec58 100644
--- a/packages/ts/src/components/graph/config.ts
+++ b/packages/ts/src/components/graph/config.ts
@@ -34,7 +34,6 @@ import {
   GraphNodeSelectionHighlightMode,
 } from './types'
 
-
 export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {
   // Zoom and drag
   /** Zoom level constraints. Default: [0.35, 1.25] */
@@ -143,9 +142,9 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
   /** Link flow animation accessor function or constant value. Default: `false` */
   linkFlow?: BooleanAccessor<L>;
   /** Animation duration of the flow (traffic) circles. Default: `20000` */
-  linkFlowAnimDuration?: number;
+  linkFlowAnimDuration?: NumericAccessor<L>;
   /** Size of the moving particles that represent traffic flow. Default: `2` */
-  linkFlowParticleSize?: number;
+  linkFlowParticleSize?: NumericAccessor<L>;
   /** Link label accessor function or constant value. Default: `undefined` */
   linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;
   /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */
diff --git a/packages/ts/src/components/graph/index.ts b/packages/ts/src/components/graph/index.ts
index 3d14caac6..024bff98b 100644
--- a/packages/ts/src/components/graph/index.ts
+++ b/packages/ts/src/components/graph/index.ts
@@ -15,7 +15,7 @@ import { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'
 import { Spacing } from 'types/spacing'
 
 // Utils
-import { isNumber, clamp, shallowDiff, isFunction, getBoolean, isPlainObject, isEqual } from 'utils/data'
+import { isNumber, clamp, shallowDiff, isFunction, getBoolean, isPlainObject, isEqual, getNumber } from 'utils/data'
 import { smartTransition } from 'utils/d3'
 
 // Local Types
@@ -661,16 +661,17 @@ export class Graph<
   }
 
   private _onLinkFlowTimerFrame (elapsed = 0): void {
-    const { config: { linkFlow, linkFlowAnimDuration }, datamodel: { links } } = this
+    const { config, datamodel: { links } } = this
 
-    const hasLinksWithFlow = links.some((d, i) => getBoolean(d, linkFlow, i))
+    const hasLinksWithFlow = links.some((d, i) => getBoolean(d, config.linkFlow, i))
     if (!hasLinksWithFlow) return
 
-    const t = (elapsed % linkFlowAnimDuration) / linkFlowAnimDuration
     const linkElements = this._linksGroup.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.gLink}`)
-
     const linksToAnimate = linkElements.filter(d => !d._state.greyout)
-    linksToAnimate.each(d => { d._state.flowAnimTime = t })
+    linksToAnimate.each((l, i, els) => {
+      const linkFlowAnimDuration = getNumber(l, config.linkFlowAnimDuration, l._indexGlobal)
+      l._state.flowAnimTime = (elapsed % linkFlowAnimDuration) / linkFlowAnimDuration
+    })
     animateLinkFlow(linksToAnimate, this.config, this._scale, this._linkPathLengthMap)
   }
 
diff --git a/packages/ts/src/components/graph/modules/link/index.ts b/packages/ts/src/components/graph/modules/link/index.ts
index b40c20973..e42b00733 100644
--- a/packages/ts/src/components/graph/modules/link/index.ts
+++ b/packages/ts/src/components/graph/modules/link/index.ts
@@ -180,7 +180,7 @@ export function updateLinks<N extends GraphInputNode, L extends GraphInputLink>
   getLinkArrowDefId: (arrow: GraphLinkArrowStyle | undefined) => string,
   linkPathLengthMap: Map<string, number>
 ): void {
-  const { linkFlowParticleSize, linkStyle, linkFlow, linkLabel, linkLabelShiftFromCenter } = config
+  const { linkStyle, linkFlow, linkLabel, linkLabelShiftFromCenter } = config
   if (!selection.size()) return
 
   selection
@@ -204,6 +204,7 @@ export function updateLinks<N extends GraphInputNode, L extends GraphInputLink>
     const linkLabelData = ensureArray(
       getValue<GraphLink<N, L>, GraphCircleLabel | GraphCircleLabel[]>(d, linkLabel, d._indexGlobal)
     )
+    const linkFlowParticleSize = getNumber(d, config.linkFlowParticleSize, d._indexGlobal)
 
     // Particle Flow
     flowGroup
@@ -212,7 +213,7 @@ export function updateLinks<N extends GraphInputNode, L extends GraphInputLink>
 
     flowGroup
       .selectAll(`.${linkSelectors.flowCircle}`)
-      .attr('r', linkFlowParticleSize / scale)
+      .attr('r', linkFlowParticleSize / Math.sqrt(scale))
       .style('fill', linkColor)
 
     smartTransition(flowGroup, duration)
@@ -387,15 +388,15 @@ export function zoomLinks<N extends GraphInputNode, L extends GraphInputLink> (
   config: GraphConfigInterface<N, L>,
   scale: number
 ): void {
-  const { linkFlowParticleSize } = config
-
   selection.classed(generalSelectors.zoomOutLevel2, scale < ZoomLevel.Level2)
 
   selection.select(`.${linkSelectors.flowGroup}`)
     .style('opacity', scale < ZoomLevel.Level2 ? 0 : 1)
 
-  selection.selectAll(`.${linkSelectors.flowCircle}`)
-    .attr('r', linkFlowParticleSize / scale)
+  selection.each((l, i, els) => {
+    const r = getNumber(l, config.linkFlowParticleSize, l._indexGlobal) / Math.sqrt(scale)
+    select(els[i]).selectAll(`.${linkSelectors.flowCircle}`).attr('r', r)
+  })
 
   const linkElements = selection.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.link}`)
   linkElements

From e2675ed8dc69b1d7eff85ef28e714391228a1cae Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@exaforce.com>
Date: Wed, 19 Mar 2025 13:48:15 -0700
Subject: [PATCH 2/8] Dev | Examples | Graph | Custom Nodes: Enhance link flow
 configuration with animation duration and particle size

- Added `linkFlowAnimDuration` and `linkFlowParticleSize` properties to `CustomGraphLink` type for improved customization of link animations.
- Updated example implementation to utilize the new properties for better visual representation of link flows.
---
 .../graph/graph-custom-node-rendering/index.tsx     | 13 +++++++------
 .../graph/graph-custom-node-rendering/types.ts      |  2 ++
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx
index f9a284780..417af0a99 100644
--- a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx
+++ b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx
@@ -35,11 +35,11 @@ export const component = (): JSX.Element => {
   ]), [])
 
   const links: CustomGraphLink[] = useMemo(() => ([
-    { source: '0', target: '1', showFlow: true },
-    { source: '0', target: '2', showFlow: true },
-    { source: '0', target: '3', showFlow: true },
-    { source: '0', target: '4', showFlow: true },
-    { source: '1', target: '5', showFlow: true },
+    { source: '0', target: '1', showFlow: true, linkFlowAnimDuration: 10000, linkFlowParticleSize: 1.5 },
+    { source: '0', target: '2', showFlow: true, linkFlowAnimDuration: 10000, linkFlowParticleSize: 2 },
+    { source: '0', target: '3', showFlow: true, linkFlowAnimDuration: 10000, linkFlowParticleSize: 3 },
+    { source: '0', target: '4', showFlow: true, linkFlowAnimDuration: 10000, linkFlowParticleSize: 3 },
+    { source: '1', target: '5', showFlow: true, linkFlowAnimDuration: 5000, linkFlowParticleSize: 2.5 },
   ]), [])
 
   // Modifying layout after the calculation
@@ -61,7 +61,8 @@ export const component = (): JSX.Element => {
         height={'100vh'}
         linkFlow={useCallback((l: CustomGraphLink) => showLinkFlow && l.showFlow, [showLinkFlow])}
         onLayoutCalculated={onLayoutCalculated}
-
+        linkFlowAnimDuration={useCallback((l: CustomGraphLink) => l.linkFlowAnimDuration, [])}
+        linkFlowParticleSize={useCallback((l: CustomGraphLink) => l.linkFlowParticleSize, [])}
       />
       <div className={s.checkboxContainer}>
         <label>
diff --git a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/types.ts b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/types.ts
index ec6f97131..d270c707b 100644
--- a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/types.ts
+++ b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/types.ts
@@ -38,6 +38,8 @@ export type CustomGraphLink<Datum = unknown> = {
   showArrow?: boolean;
   showFlow?: boolean;
   width?: number;
+  linkFlowAnimDuration?: number;
+  linkFlowParticleSize?: number;
 };
 
 export type CustomGraphSwimlane = {

From f6b938cfb6d87bd9c73964707512f4c9c6a63843 Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@exaforce.com>
Date: Thu, 20 Mar 2025 13:50:51 -0700
Subject: [PATCH 3/8] Component | Graph: Particle speed, css prop for particle
 opacity

- Added `linkFlowParticleSpeed` property to `GraphConfigInterface` for improved control over link flow animations.
- Updated animation duration calculation in the graph component to consider particle speed, allowing for more dynamic link flow behavior.
- New CSS props: --vis-graph-link-flow-opacity
---
 packages/ts/src/components/graph/config.ts             |  6 +++++-
 packages/ts/src/components/graph/index.ts              | 10 +++++++++-
 packages/ts/src/components/graph/modules/link/style.ts |  5 ++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/ts/src/components/graph/config.ts b/packages/ts/src/components/graph/config.ts
index 4eea3ec58..06a7c03f4 100644
--- a/packages/ts/src/components/graph/config.ts
+++ b/packages/ts/src/components/graph/config.ts
@@ -141,10 +141,13 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
   linkDisabled?: BooleanAccessor<L>;
   /** Link flow animation accessor function or constant value. Default: `false` */
   linkFlow?: BooleanAccessor<L>;
-  /** Animation duration of the flow (traffic) circles. Default: `20000` */
+  /** Animation duration of the flow (traffic) circles in milliseconds. If `linkFlowParticleSpeed` is provided,
+   * this duration will be calculated based on the link length and particle speed. Default: `20000` */
   linkFlowAnimDuration?: NumericAccessor<L>;
   /** Size of the moving particles that represent traffic flow. Default: `2` */
   linkFlowParticleSize?: NumericAccessor<L>;
+  /** Speed of the moving particles in pixels per second. This property takes precedence over `linkFlowAnimDuration`. Default: `undefined` */
+  linkFlowParticleSpeed?: NumericAccessor<L>;
   /** Link label accessor function or constant value. Default: `undefined` */
   linkLabel?: GenericAccessor<GraphCircleLabel | GraphCircleLabel[], L> | undefined;
   /** Shift label along the link center a little bit to avoid overlap with the link arrow. Default: `true` */
@@ -336,6 +339,7 @@ export const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInput
 
   linkFlowAnimDuration: 20000,
   linkFlowParticleSize: 2,
+  linkFlowParticleSpeed: undefined,
   linkWidth: 1,
   linkStyle: GraphLinkStyle.Solid,
   linkBandWidth: 0,
diff --git a/packages/ts/src/components/graph/index.ts b/packages/ts/src/components/graph/index.ts
index 024bff98b..a07fe69f4 100644
--- a/packages/ts/src/components/graph/index.ts
+++ b/packages/ts/src/components/graph/index.ts
@@ -669,7 +669,15 @@ export class Graph<
     const linkElements = this._linksGroup.selectAll<SVGGElement, GraphLink<N, L>>(`.${linkSelectors.gLink}`)
     const linksToAnimate = linkElements.filter(d => !d._state.greyout)
     linksToAnimate.each((l, i, els) => {
-      const linkFlowAnimDuration = getNumber(l, config.linkFlowAnimDuration, l._indexGlobal)
+      let linkFlowAnimDuration = getNumber(l, config.linkFlowAnimDuration, l._indexGlobal)
+      const linkFlowParticleSpeed = getNumber(l, config.linkFlowParticleSpeed, l._indexGlobal)
+
+      // If particle speed is provided, calculate duration based on link length and speed
+      if (linkFlowParticleSpeed) {
+        const linkPathElement = els[i].querySelector<SVGPathElement>(`.${linkSelectors.linkSupport}`)
+        const pathLength = linkPathElement ? (this._linkPathLengthMap.get(linkPathElement.getAttribute('d')) ?? linkPathElement.getTotalLength()) : 0
+        if (pathLength > 0) linkFlowAnimDuration = (pathLength / linkFlowParticleSpeed) * 1000 // Convert to milliseconds
+      }
       l._state.flowAnimTime = (elapsed % linkFlowAnimDuration) / linkFlowAnimDuration
     })
     animateLinkFlow(linksToAnimate, this.config, this._scale, this._linkPathLengthMap)
diff --git a/packages/ts/src/components/graph/modules/link/style.ts b/packages/ts/src/components/graph/modules/link/style.ts
index 73d883e06..21b6e9389 100644
--- a/packages/ts/src/components/graph/modules/link/style.ts
+++ b/packages/ts/src/components/graph/modules/link/style.ts
@@ -19,11 +19,13 @@ export const variables = injectGlobal`
 
     --vis-graph-link-band-opacity: 0.35;
     --vis-graph-link-support-stroke-width: 10px;
+    --vis-graph-link-flow-opacity: 1;
 
     --vis-dark-graph-link-stroke-color: #494b56;
     --vis-dark-graph-link-label-background: #3f3f45;
     --vis-dark-graph-link-label-text-color: var(--vis-graph-link-label-text-color-bright);
 
+
     --vis-graph-link-dominant-baseline: middle;
   }
 
@@ -95,7 +97,7 @@ export const linkBand = css`
 
 export const flowGroup = css`
   label: flow-group;
-
+  
   pointer-events: none;
 `
 
@@ -103,6 +105,7 @@ export const flowCircle = css`
   label: flow-circle;
 
   fill: var(--vis-graph-link-stroke-color);
+  opacity: var(--vis-graph-link-flow-opacity);
 `
 
 export const linkLabelGroup = css`

From 86008b94973225a540bf9b4e584a5226ef1b887a Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@exaforce.com>
Date: Thu, 20 Mar 2025 13:52:10 -0700
Subject: [PATCH 4/8] Dev | Examples | Graph | Custom Node: Flow Speed

---
 .../graph/graph-custom-node-rendering/index.tsx     | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx
index 417af0a99..aba4c58b2 100644
--- a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx
+++ b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx
@@ -35,11 +35,11 @@ export const component = (): JSX.Element => {
   ]), [])
 
   const links: CustomGraphLink[] = useMemo(() => ([
-    { source: '0', target: '1', showFlow: true, linkFlowAnimDuration: 10000, linkFlowParticleSize: 1.5 },
-    { source: '0', target: '2', showFlow: true, linkFlowAnimDuration: 10000, linkFlowParticleSize: 2 },
-    { source: '0', target: '3', showFlow: true, linkFlowAnimDuration: 10000, linkFlowParticleSize: 3 },
-    { source: '0', target: '4', showFlow: true, linkFlowAnimDuration: 10000, linkFlowParticleSize: 3 },
-    { source: '1', target: '5', showFlow: true, linkFlowAnimDuration: 5000, linkFlowParticleSize: 2.5 },
+    { source: '0', target: '1', showFlow: true, linkFlowParticleSize: 1.5, linkFlowParticleSpeed: 15 },
+    { source: '0', target: '2', showFlow: true, linkFlowParticleSize: 2, linkFlowParticleSpeed: 25 },
+    { source: '0', target: '3', showFlow: true, linkFlowParticleSize: 3, linkFlowParticleSpeed: 10 },
+    { source: '0', target: '4', showFlow: true, linkFlowParticleSize: 3, linkFlowParticleSpeed: 30 },
+    { source: '1', target: '5', showFlow: true, linkFlowParticleSize: 2.5, linkFlowParticleSpeed: 20 },
   ]), [])
 
   // Modifying layout after the calculation
@@ -62,7 +62,10 @@ export const component = (): JSX.Element => {
         linkFlow={useCallback((l: CustomGraphLink) => showLinkFlow && l.showFlow, [showLinkFlow])}
         onLayoutCalculated={onLayoutCalculated}
         linkFlowAnimDuration={useCallback((l: CustomGraphLink) => l.linkFlowAnimDuration, [])}
+        linkFlowParticleSpeed={useCallback((l: CustomGraphLink) => l.linkFlowParticleSpeed, [])}
         linkFlowParticleSize={useCallback((l: CustomGraphLink) => l.linkFlowParticleSize, [])}
+        linkWidth={0}
+        linkBandWidth={useCallback((l: CustomGraphLink) => 2 * (l.linkFlowParticleSize ?? 1), [])}
       />
       <div className={s.checkboxContainer}>
         <label>

From 3ab064bc0616b67be2c33d8eacd9f878974a0a1e Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@exaforce.com>
Date: Mon, 31 Mar 2025 14:00:45 -0700
Subject: [PATCH 5/8] Component | Graph: Introduce `fitViewPadding` for
 customizable graph padding

- Added `fitViewPadding` property to `GraphConfigInterface` to allow for customizable padding when fitting the graph to its container.
- Updated the `bleed` method to utilize `fitViewPadding` for dynamic padding adjustments based on configuration.
---
 packages/ts/src/components/graph/config.ts |  5 ++++-
 packages/ts/src/components/graph/index.ts  | 10 ++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/ts/src/components/graph/config.ts b/packages/ts/src/components/graph/config.ts
index 06a7c03f4..c548016b6 100644
--- a/packages/ts/src/components/graph/config.ts
+++ b/packages/ts/src/components/graph/config.ts
@@ -15,6 +15,7 @@ import { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component
 
 // Types
 import { TrimMode } from 'types/text'
+import { Spacing } from 'types/spacing'
 import { GraphInputLink, GraphInputNode, GraphInputData } from 'types/graph'
 import { BooleanAccessor, ColorAccessor, NumericAccessor, StringAccessor, GenericAccessor } from 'types/accessor'
 
@@ -50,6 +51,8 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
   disableBrush?: boolean;
   /** Interval to re-render the graph when zooming. Default: `100` */
   zoomThrottledUpdateNodeThreshold?: number;
+  /** Padding for the graph when fitting to container. Default: `50` */
+  fitViewPadding?: Spacing | number;
 
   // Layout general settings
   /** Type of the graph layout. Default: `GraphLayoutType.Force` */
@@ -309,7 +312,7 @@ export const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInput
   layoutAutofit: true,
   layoutAutofitTolerance: 8.0,
   layoutNonConnectedAside: false,
-
+  fitViewPadding: 50,
   layoutGroupOrder: [],
   layoutParallelSubGroupsPerRow: 1,
   layoutParallelNodesPerColumn: 6,
diff --git a/packages/ts/src/components/graph/index.ts b/packages/ts/src/components/graph/index.ts
index a07fe69f4..ff5ce4840 100644
--- a/packages/ts/src/components/graph/index.ts
+++ b/packages/ts/src/components/graph/index.ts
@@ -203,8 +203,10 @@ export class Graph<
   }
 
   get bleed (): Spacing {
-    const extraPadding = 50 // Extra padding to take into account labels and selection outlines
-    return { top: extraPadding, bottom: extraPadding, left: extraPadding, right: extraPadding }
+    const padding = this.config.fitViewPadding // Extra padding to take into account labels and selection outlines
+    return isNumber(padding)
+      ? { top: padding, bottom: padding, left: padding, right: padding }
+      : padding
   }
 
   _render (customDuration?: number): void {
@@ -500,8 +502,8 @@ export class Graph<
       return zoomIdentity
     }
 
-    const xScale = w / (xExtent[1] - xExtent[0] + left + right)
-    const yScale = h / (yExtent[1] - yExtent[0] + top + bottom)
+    const xScale = w / (xExtent[1] - xExtent[0] + (left || 0) + (right || 0))
+    const yScale = h / (yExtent[1] - yExtent[0] + (top || 0) + (bottom || 0))
 
     const clampedScale = clamp(min([xScale, yScale]), zoomScaleExtent[0], zoomScaleExtent[1])
 

From 04c61311f8d2c9ea35bb745af995851ce9440859 Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@rokotyan.com>
Date: Sat, 5 Apr 2025 13:36:57 -0700
Subject: [PATCH 6/8] Component | Graph: Fit view configurable alignment

- Added `GraphFitViewAlignment` enum to define alignment options (Center, Top, Bottom, Left, Right).
- Updated `GraphConfigInterface` to include `fitViewAlign` property with a default value.
- Modified `_fit` and `_getTransform` methods to utilize the new alignment options for fitting the graph view.
- Adjusted `fitView` method to accept alignment parameter for enhanced flexibility.
---
 packages/ts/src/components/graph/config.ts |  5 +++
 packages/ts/src/components/graph/index.ts  | 52 +++++++++++++++++-----
 packages/ts/src/components/graph/types.ts  |  8 ++++
 3 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/packages/ts/src/components/graph/config.ts b/packages/ts/src/components/graph/config.ts
index c548016b6..96133a947 100644
--- a/packages/ts/src/components/graph/config.ts
+++ b/packages/ts/src/components/graph/config.ts
@@ -33,6 +33,7 @@ import {
   GraphNode,
   GraphLink,
   GraphNodeSelectionHighlightMode,
+  GraphFitViewAlignment,
 } from './types'
 
 export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphInputLink> extends ComponentConfigInterface {
@@ -53,6 +54,8 @@ export interface GraphConfigInterface<N extends GraphInputNode, L extends GraphI
   zoomThrottledUpdateNodeThreshold?: number;
   /** Padding for the graph when fitting to container. Default: `50` */
   fitViewPadding?: Spacing | number;
+  /** Default alignment when fitting the graph view. Default: `GraphFitViewAlignment.Center` */
+  fitViewAlign?: GraphFitViewAlignment;
 
   // Layout general settings
   /** Type of the graph layout. Default: `GraphLayoutType.Force` */
@@ -313,6 +316,8 @@ export const GraphDefaultConfig: GraphConfigInterface<GraphInputNode, GraphInput
   layoutAutofitTolerance: 8.0,
   layoutNonConnectedAside: false,
   fitViewPadding: 50,
+  fitViewAlign: GraphFitViewAlignment.Center,
+
   layoutGroupOrder: [],
   layoutParallelSubGroupsPerRow: 1,
   layoutParallelNodesPerColumn: 6,
diff --git a/packages/ts/src/components/graph/index.ts b/packages/ts/src/components/graph/index.ts
index ff5ce4840..85f247085 100644
--- a/packages/ts/src/components/graph/index.ts
+++ b/packages/ts/src/components/graph/index.ts
@@ -19,7 +19,15 @@ import { isNumber, clamp, shallowDiff, isFunction, getBoolean, isPlainObject, is
 import { smartTransition } from 'utils/d3'
 
 // Local Types
-import { GraphNode, GraphLink, GraphLayoutType, GraphLinkArrowStyle, GraphPanel, GraphNodeSelectionHighlightMode } from './types'
+import {
+  GraphNode,
+  GraphLink,
+  GraphLayoutType,
+  GraphLinkArrowStyle,
+  GraphPanel,
+  GraphNodeSelectionHighlightMode,
+  GraphFitViewAlignment,
+} from './types'
 
 // Config
 import { GraphDefaultConfig, GraphConfigInterface } from './config'
@@ -471,16 +479,16 @@ export class Graph<
     }
   }
 
-  private _fit (duration = 0, nodeIds?: (string | number)[]): void {
+  private _fit (duration = 0, nodeIds?: (string | number)[], alignment = this.config.fitViewAlign): void {
     const { datamodel: { nodes } } = this
     const fitViewNodes = nodeIds?.length ? nodes.filter(n => nodeIds.includes(n.id)) : nodes
-    const transform = this._getTransform(fitViewNodes)
+    const transform = this._getTransform(fitViewNodes, alignment)
     smartTransition(this.g, duration)
       .call(this._zoomBehavior.transform, transform)
     this._onZoom(transform)
   }
 
-  private _getTransform (nodes: GraphNode<N, L>[]): ZoomTransform {
+  private _getTransform (nodes: GraphNode<N, L>[], alignment: GraphFitViewAlignment): ZoomTransform {
     const { nodeSize, zoomScaleExtent } = this.config
     const { left, top, right, bottom } = this.bleed
 
@@ -507,10 +515,33 @@ export class Graph<
 
     const clampedScale = clamp(min([xScale, yScale]), zoomScaleExtent[0], zoomScaleExtent[1])
 
-    const xCenter = (xExtent[1] + xExtent[0]) / 2
-    const yCenter = (yExtent[1] + yExtent[0]) / 2
-    const translateX = this._width / 2 - xCenter * clampedScale
-    const translateY = this._height / 2 - yCenter * clampedScale
+    // Calculate translation based on alignment
+    let translateX: number
+    let translateY: number
+
+    switch (alignment) {
+      case GraphFitViewAlignment.Left:
+        translateX = left - xExtent[0] * clampedScale
+        translateY = this._height / 2 - (yExtent[0] + (yExtent[1] - yExtent[0]) / 2) * clampedScale
+        break
+      case GraphFitViewAlignment.Right:
+        translateX = this._width - (xExtent[1] - xExtent[0]) * clampedScale - right
+        translateY = this._height / 2 - (yExtent[0] + (yExtent[1] - yExtent[0]) / 2) * clampedScale
+        break
+      case GraphFitViewAlignment.Top:
+        translateX = this._width / 2 - (xExtent[0] + (xExtent[1] - xExtent[0]) / 2) * clampedScale
+        translateY = top - yExtent[0] * clampedScale
+        break
+      case GraphFitViewAlignment.Bottom:
+        translateX = this._width / 2 - (xExtent[0] + (xExtent[1] - xExtent[0]) / 2) * clampedScale
+        translateY = this._height - (yExtent[1] - yExtent[0]) * clampedScale - bottom
+        break
+      case GraphFitViewAlignment.Center:
+      default:
+        translateX = this._width / 2 - (xExtent[0] + (xExtent[1] - xExtent[0]) / 2) * clampedScale
+        translateY = this._height / 2 - (yExtent[0] + (yExtent[1] - yExtent[0]) / 2) * clampedScale
+    }
+
     const transform = zoomIdentity
       .translate(translateX, translateY)
       .scale(clampedScale)
@@ -518,7 +549,6 @@ export class Graph<
     return transform
   }
 
-
   private _setNodeSelectionState (nodesToSelect: (GraphNode<N, L> | undefined)[]): void {
     const { config, datamodel } = this
 
@@ -1003,9 +1033,9 @@ export class Graph<
     return zoomTransform(this.g.node()).k
   }
 
-  public fitView (duration = this.config.duration, nodeIds?: (string | number)[]): void {
+  public fitView (duration = this.config.duration, nodeIds?: (string | number)[], alignment?: GraphFitViewAlignment): void {
     this._layoutCalculationPromise?.then(() => {
-      this._fit(duration, nodeIds)
+      this._fit(duration, nodeIds, alignment)
     })
   }
 
diff --git a/packages/ts/src/components/graph/types.ts b/packages/ts/src/components/graph/types.ts
index eba7babc2..e402ecda8 100644
--- a/packages/ts/src/components/graph/types.ts
+++ b/packages/ts/src/components/graph/types.ts
@@ -239,3 +239,11 @@ export enum GraphNodeSelectionHighlightMode {
   Greyout ='greyout',
   GreyoutNonConnected ='greyout-non-connected',
 }
+
+export enum GraphFitViewAlignment {
+  Center = 'center',
+  Top = 'top',
+  Bottom = 'bottom',
+  Left = 'left',
+  Right = 'right',
+}

From e25188f6d808690dfdaf7113bc3a553d0edfba9b Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@rokotyan.com>
Date: Sat, 5 Apr 2025 13:50:34 -0700
Subject: [PATCH 7/8] Dev | Graph | Custom Nodes: Implement fit view alignment
 selection

- Introduced state management for `fitViewAlignment` to allow users to select alignment options for graph fitting.
- Added a dropdown for selecting alignment, utilizing the `GraphFitViewAlignment` enum.
- Updated the graph component to pass the selected alignment and padding to the fitting logic.
---
 .../graph/graph-custom-node-rendering/index.tsx  | 16 +++++++++++++++-
 .../graph/graph-custom-node-rendering/types.ts   |  1 +
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx
index aba4c58b2..5b1197cc6 100644
--- a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx
+++ b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react'
-import type { GraphLink, GraphNode } from '@unovis/ts'
+import { GraphFitViewAlignment, GraphLink, GraphNode } from '@unovis/ts'
 import type { VisGraphRef } from '@unovis/react'
 
 import { CustomGraph } from './component'
@@ -13,6 +13,7 @@ export const subTitle = 'User provided rendering functions'
 
 export const component = (): JSX.Element => {
   const [showLinkFlow, setShowLinkFlow] = useState(true)
+  const [fitViewAlignment, setFitViewAlignment] = useState<GraphFitViewAlignment>(GraphFitViewAlignment.Center)
   const graphRef = useRef<VisGraphRef<CustomGraphNode, CustomGraphLink> | null>(null)
 
   const nodes: CustomGraphNode[] = useMemo(() => ([
@@ -66,6 +67,8 @@ export const component = (): JSX.Element => {
         linkFlowParticleSize={useCallback((l: CustomGraphLink) => l.linkFlowParticleSize, [])}
         linkWidth={0}
         linkBandWidth={useCallback((l: CustomGraphLink) => 2 * (l.linkFlowParticleSize ?? 1), [])}
+        fitViewAlign={fitViewAlignment}
+        fitViewPadding={useMemo(() => ({ top: 50, right: 50, bottom: 100, left: 50 }), [])}
       />
       <div className={s.checkboxContainer}>
         <label>
@@ -76,6 +79,17 @@ export const component = (): JSX.Element => {
           />
           Show Link Flow
         </label>
+        <select
+          value={fitViewAlignment}
+          onChange={(e) => setFitViewAlignment(e.target.value as GraphFitViewAlignment)}
+          className={s.graphButton}
+        >
+          {Object.values(GraphFitViewAlignment).map((alignment) => (
+            <option key={alignment} value={alignment}>
+              {alignment.charAt(0).toUpperCase() + alignment.slice(1)}
+            </option>
+          ))}
+        </select>
         <button className={s.graphButton} onClick={() => fitView(['0', '1', '2', '3'])}>Zoom To Identity and Network Nodes</button>
         <button className={s.graphButton} onClick={() => fitView()}>Fit Graph</button>
       </div>
diff --git a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/types.ts b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/types.ts
index d270c707b..3e5e642d5 100644
--- a/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/types.ts
+++ b/packages/dev/src/examples/networks-and-flows/graph/graph-custom-node-rendering/types.ts
@@ -40,6 +40,7 @@ export type CustomGraphLink<Datum = unknown> = {
   width?: number;
   linkFlowAnimDuration?: number;
   linkFlowParticleSize?: number;
+  linkFlowParticleSpeed?: number;
 };
 
 export type CustomGraphSwimlane = {

From 9d5ccb7925839ab8eaf8d13d205ebd6cf92b33bf Mon Sep 17 00:00:00 2001
From: Nikita Rokotyan <nikita@exaforce.com>
Date: Tue, 8 Apr 2025 09:38:08 -0700
Subject: [PATCH 8/8] Component | Graph: Use the actual link path for flow
 animation

This give a way better transitions when data or layout changes, and doesn't seem to have a too negative effect on performance
---
 packages/ts/src/components/graph/modules/link/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ts/src/components/graph/modules/link/index.ts b/packages/ts/src/components/graph/modules/link/index.ts
index e42b00733..daa2bb2f4 100644
--- a/packages/ts/src/components/graph/modules/link/index.ts
+++ b/packages/ts/src/components/graph/modules/link/index.ts
@@ -366,7 +366,7 @@ export function animateLinkFlow<N extends GraphInputNode, L extends GraphInputLi
     const linkGroup = select(element)
     const flowGroup = linkGroup.select(`.${linkSelectors.flowGroup}`)
 
-    const linkPathElement = linkGroup.select<SVGPathElement>(`.${linkSelectors.linkSupport}`).node()
+    const linkPathElement = linkGroup.select<SVGPathElement>(`.${linkSelectors.link}`).node()
     const cachedLinkPathLength = linkPathLengthMap.get(linkPathElement.getAttribute('d'))
     const pathLength = cachedLinkPathLength ?? linkPathElement.getTotalLength()