Component | Sankey: Advanced logic for left / right bleed and label width

Author: rokotyan

packages/ts/src/components/sankey/config.ts

@@ -169,7 +169,7 @@ export const SankeyDefaultConfig: SankeyConfigInterface<SankeyInputNode, SankeyI
   heightNormalizationCoeff: 1 / 16,
   zoomScale: undefined,
   zoomPan: undefined,
-  enableZoom: true,
+  enableZoom: false,
   zoomExtent: [1, 5] as [number, number],
   zoomMode: SankeyZoomMode.Y,
   exitTransitionType: SankeyExitTransitionType.Default,

packages/ts/src/components/sankey/index.ts

@@ -18,6 +18,7 @@ import { VerticalAlign } from 'types/text'
 import { smartTransition } from 'utils/d3'
 import { clamp, getNumber, getString, groupBy, isNumber } from 'utils/data'
 import { getCSSVariableValueInPixels } from 'utils/misc'
+import { estimateStringPixelLength } from 'utils/text'
 
 // Config
 import { SankeyDefaultConfig, SankeyConfigInterface } from './config'
@@ -26,12 +27,12 @@ import { SankeyDefaultConfig, SankeyConfigInterface } from './config'
 import * as s from './style'
 
 // Local Types
-import { SankeyInputLink, SankeyInputNode, SankeyLayout, SankeyLink, SankeyNode, SankeyZoomMode } from './types'
+import { SankeyInputLink, SankeyInputNode, SankeyLayout, SankeyLink, SankeyNode, SankeySubLabelPlacement, SankeyZoomMode } from './types'
 
 // Modules
 import { createLinks, removeLinks, updateLinks } from './modules/link'
 import { createNodes, NODE_SELECTION_RECT_DELTA, onNodeMouseOut, onNodeMouseOver, removeNodes, updateNodes } from './modules/node'
-import { getLabelOrientation, requiredLabelSpace } from './modules/label'
+import { getLabelOrientation, SANKEY_LABEL_BLOCK_PADDING, SANKEY_LABEL_SPACING } from './modules/label'
 
 export class Sankey<
   N extends SankeyInputNode,
@@ -47,6 +48,7 @@ export class Sankey<
   public g: Selection<SVGGElement, unknown, null, undefined>
   // eslint-disable-next-line @typescript-eslint/naming-convention
   private _gNode: SVGGElement & { __zoom: ZoomTransform }
+  private _prevWidth: number | undefined = undefined
   private _extendedWidth: number | undefined = undefined
   private _extendedHeight: number | undefined = undefined
   private _extendedHeightIncreased: number | undefined = undefined
@@ -104,45 +106,71 @@ export class Sankey<
 
   get bleed (): Spacing {
     const { config, datamodel: { nodes, links } } = this
-    if (!nodes.length) return { top: 0, bottom: 0, left: 0, right: 0 }
+    let bleed: Spacing = { top: 0, bottom: 0, left: 0, right: 0 }
 
-    const labelFontSize = config.labelFontSize ?? getCSSVariableValueInPixels('var(--vis-sankey-label-font-size)', this.element)
+    if (nodes.length) {
+      const labelFontSize = config.labelFontSize || getCSSVariableValueInPixels('var(--vis-sankey-node-label-font-size)', this.element)
+      const subLabelFontSize = config.subLabelFontSize || getCSSVariableValueInPixels('var(--vis-sankey-node-sublabel-font-size)', this.element)
 
-    // We pre-calculate sankey layout to get information about node labels placement and calculate bleed properly
-    // Potentially it can be a performance bottleneck for large layouts, but generally rendering of such layouts is much more computationally heavy
-    const sankeyProbeSize = 1000
-    this._populateLinkAndNodeValues()
-    this._sankey.size([sankeyProbeSize, sankeyProbeSize])
-    this._sankey({ nodes, links })
-    const layerSpacing = this._getLayerSpacing(nodes)
-    const labelSize = requiredLabelSpace(clamp(layerSpacing, 0, config.labelMaxWidth ?? Infinity), labelFontSize)
-    const maxDepth = max(nodes, d => d.depth)
-    const zeroDepthNodes = nodes.filter(d => d.depth === 0)
-    const maxDepthNodes = nodes.filter(d => d.depth === maxDepth)
-
-
-    const left = zeroDepthNodes.some(d => getLabelOrientation(d, sankeyProbeSize, config.labelPosition) === Position.Left) ? labelSize.width : 0
-    const right = (maxDepthNodes.some(d => getString(d, config.label)) &&
-        maxDepthNodes.some(d => getLabelOrientation(d, sankeyProbeSize, config.labelPosition) === Position.Right))
-      ? labelSize.width
-      : 0
-
-    const top = config.labelVerticalAlign === VerticalAlign.Top ? 0
-      : config.labelVerticalAlign === VerticalAlign.Bottom ? labelSize.height
-        : labelSize.height / 2
-
-    const bottom = config.labelVerticalAlign === VerticalAlign.Top ? labelSize.height
-      : config.labelVerticalAlign === VerticalAlign.Bottom ? 0
-        : labelSize.height / 2
-
-    const nodeSelectionBleed = config.selectedNodeIds ? 1 + NODE_SELECTION_RECT_DELTA : 0
-    const bleed = {
-      top: nodeSelectionBleed + top,
-      bottom: nodeSelectionBleed + bottom,
-      left: nodeSelectionBleed + left,
-      right: nodeSelectionBleed + right,
+      // We pre-calculate sankey layout to get information about node labels placement and calculate bleed properly
+      // Potentially it can be a performance bottleneck for large layouts, but generally rendering of such layouts is much more computationally heavy
+      const sankeyProbeSize = 1000
+      this._populateLinkAndNodeValues()
+      this._sankey.size([sankeyProbeSize, sankeyProbeSize])
+      this._sankey({ nodes, links })
+      const requiredLabelHeight = labelFontSize * 2.5 + 2 * SANKEY_LABEL_BLOCK_PADDING // Assuming 2.5 lines per label
+
+      const maxLayer = max(nodes, d => d.layer)
+      const zeroLayerNodes = nodes.filter(d => d.layer === 0)
+      const maxLayerNodes = nodes.filter(d => d.layer === maxLayer)
+      const layerSpacing = this._getLayerSpacing(nodes)
+
+      let left = 0
+      const fallbackLabelMaxWidth = Math.min(this._width / 6, layerSpacing)
+      const labelMaxWidth = config.labelMaxWidth || fallbackLabelMaxWidth
+      const labelHorizontalPadding = 2 * SANKEY_LABEL_SPACING + 2 * SANKEY_LABEL_BLOCK_PADDING
+      const hasLabelsOnTheLeft = zeroLayerNodes.some(d => getLabelOrientation(d, sankeyProbeSize, config.labelPosition) === Position.Left)
+
+      const estimateRequiredLabelWidth = (d: SankeyNode<N, L>, config: SankeyConfigInterface<N, L>): number => {
+        const inlineLabelAddWidth = 5 // Without this, the label anf sub-label will look too close to each other
+        const tolerance = 1.1
+        const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline
+        const labelText = `${getString(d, config.label) ?? ''}` // Stringify because theoretically it can be a number
+        const sublabelText = `${getString(d, config.subLabel) ?? ''}` // Stringify because theoretically it can be a number
+        const labelTextWidth = tolerance * estimateStringPixelLength(labelText, labelFontSize)
+        const sublabelTextWidth = tolerance * estimateStringPixelLength(sublabelText, subLabelFontSize)
+        return isSublabelInline ? inlineLabelAddWidth + (labelTextWidth + sublabelTextWidth) : Math.max(labelTextWidth, sublabelTextWidth)
+      }
+      if (hasLabelsOnTheLeft) {
+        const maxLeftLabelWidth = max(zeroLayerNodes, d => estimateRequiredLabelWidth(d, config))
+        left = min([labelMaxWidth, maxLeftLabelWidth]) + labelHorizontalPadding
+      }
+
+      let right = 0
+      const hasLabelsOnTheRight = maxLayerNodes.some(d => getLabelOrientation(d, sankeyProbeSize, config.labelPosition) === Position.Right)
+      if (hasLabelsOnTheRight) {
+        const maxRightLabelWidth = max(maxLayerNodes, d => estimateRequiredLabelWidth(d, config))
+        right = min([labelMaxWidth, maxRightLabelWidth]) + labelHorizontalPadding
+      }
+
+      const top = config.labelVerticalAlign === VerticalAlign.Top ? 0
+        : config.labelVerticalAlign === VerticalAlign.Bottom ? requiredLabelHeight
+          : requiredLabelHeight / 2
+
+      const bottom = config.labelVerticalAlign === VerticalAlign.Top ? requiredLabelHeight
+        : config.labelVerticalAlign === VerticalAlign.Bottom ? 0
+          : requiredLabelHeight / 2
+
+      const nodeSelectionRectBleed = config.selectedNodeIds ? 1 + NODE_SELECTION_RECT_DELTA : 0
+      bleed = {
+        top: nodeSelectionRectBleed + top,
+        bottom: nodeSelectionRectBleed + bottom,
+        left: left + (hasLabelsOnTheLeft ? 0 : nodeSelectionRectBleed),
+        right: right + (hasLabelsOnTheRight ? 0 : nodeSelectionRectBleed),
+      }
     }
 
+
     // Cache bleed for onZoom
     this._bleedCached = bleed
 
@@ -200,7 +228,9 @@ export class Sankey<
 
   _render (customDuration?: number): void {
     const { config, datamodel: { nodes, links } } = this
-    const bleed = this._bleedCached ?? this.bleed
+    const wasResized = this._prevWidth !== this._width
+    this._prevWidth = this._width
+    const bleed = wasResized || !this._bleedCached ? this.bleed : this._bleedCached
     const duration = isNumber(customDuration) ? customDuration : config.duration
 
     if (
@@ -327,7 +357,7 @@ export class Sankey<
     const transform = event.transform
     const sourceEvent = event.sourceEvent as WheelEvent | MouseEvent | TouchEvent | undefined
     const zoomMode = config.zoomMode || SankeyZoomMode.XY
-    const bleed = this._bleedCached
+    const bleed = this._bleedCached ?? this.bleed
 
     // Zoom pivots
     const minX = min(nodes, d => d.x0) ?? 0
@@ -441,7 +471,7 @@ export class Sankey<
 
   private _prepareLayout (): void {
     const { config, datamodel } = this
-    const bleed = this._bleedCached
+    const bleed = this._bleedCached ?? this.bleed
     const isExtendedSize = this.sizing === Sizing.Extend
     const sankeyHeight = this.sizing === Sizing.Fit ? this._height : this._extendedHeight
     const sankeyWidth = this.sizing === Sizing.Fit ? this._width : this._extendedWidth
@@ -665,23 +695,25 @@ export class Sankey<
     const { config } = this
     if (!nodes?.length) return 0
 
-    const firstNode = nodes[0]
-    const nextLayerNode = nodes.find(d => d.layer === firstNode.layer + 1)
-    return nextLayerNode ? nextLayerNode.x0 - (firstNode.x0 + config.nodeWidth) : this._width - firstNode.x1
+    const firstLayerNode = nodes.find(d => d.layer === 0)
+    const nextLayerNode = nodes.find(d => d.layer === firstLayerNode.layer + 1)
+    return nextLayerNode ? nextLayerNode.x0 - (firstLayerNode.x0 + config.nodeWidth) : this._width - firstLayerNode.x1
   }
 
   private _onNodeMouseOver (d: SankeyNode<N, L>, event: MouseEvent): void {
     const { datamodel } = this
+    const bleed = this._bleedCached ?? this.bleed
     const nodeSelection = select<SVGGElement, SankeyNode<N, L>>(event.currentTarget as SVGGElement)
     const sankeyWidth = this.sizing === Sizing.Fit ? this._width : this._extendedWidth
-    onNodeMouseOver(d, datamodel.nodes, nodeSelection, this.config, sankeyWidth, this._getLayerSpacing(this.datamodel.nodes))
+    onNodeMouseOver(d, datamodel.nodes, nodeSelection, this.config, sankeyWidth, this._getLayerSpacing(this.datamodel.nodes), bleed)
   }
 
   private _onNodeMouseOut (d: SankeyNode<N, L>, event: MouseEvent): void {
     const { datamodel } = this
+    const bleed = this._bleedCached ?? this.bleed
     const nodeSelection = select<SVGGElement, SankeyNode<N, L>>(event.currentTarget as SVGGElement)
     const sankeyWidth = this.sizing === Sizing.Fit ? this._width : this._extendedWidth
-    onNodeMouseOut(d, datamodel.nodes, nodeSelection, this.config, sankeyWidth, this._getLayerSpacing(this.datamodel.nodes))
+    onNodeMouseOut(d, datamodel.nodes, nodeSelection, this.config, sankeyWidth, this._getLayerSpacing(this.datamodel.nodes), bleed)
   }
 
   private _onNodeRectMouseOver (d: SankeyNode<N, L>): void {

packages/ts/src/components/sankey/modules/label.ts

@@ -10,6 +10,7 @@ import { getCSSVariableValueInPixels } from 'utils/misc'
 import { GenericAccessor } from 'types/accessor'
 import { FitMode, VerticalAlign } from 'types/text'
 import { Position } from 'types/position'
+import { Spacing } from 'types/spacing'
 
 // Local Types
 import { SankeyInputLink, SankeyInputNode, SankeyNode, SankeySubLabelPlacement } from '../types'
@@ -20,8 +21,8 @@ import { SankeyConfigInterface } from '../config'
 // Styles
 import * as s from '../style'
 
-export const NODE_LABEL_SPACING = 10
-export const LABEL_BLOCK_PADDING = 6.5
+export const SANKEY_LABEL_SPACING = 10
+export const SANKEY_LABEL_BLOCK_PADDING = 6.5
 
 function getLabelBackground (
   width: number,
@@ -61,32 +62,23 @@ export function getLabelOrientation<N extends SankeyInputNode, L extends SankeyI
 ): (Position.Left | Position.Right) {
   let orientation = getValue(d, labelPosition)
   if (orientation === Position.Auto || !orientation) {
-    orientation = d.x0 < sankeyWidth / 2 ? Position.Left : Position.Right
+    orientation = d.x1 < sankeyWidth / 2 ? Position.Left : Position.Right
   }
 
   return orientation as (Position.Left | Position.Right)
 }
 
-export const requiredLabelSpace = (labelWidth: number, labelFontSize: number): { width: number; height: number } => {
-  if (labelWidth === 0) return { width: 0, height: 0 }
-
-  return {
-    height: labelFontSize * 2.5 + 2 * LABEL_BLOCK_PADDING, // Assuming 2.5 lines per label
-    width: labelWidth + 2 * NODE_LABEL_SPACING + 2 * LABEL_BLOCK_PADDING,
-  }
-}
-
 export function getLabelGroupXTranslate<N extends SankeyInputNode, L extends SankeyInputLink> (
   d: SankeyNode<N, L>,
   config: SankeyConfigInterface<N, L>,
   width: number
 ): number {
   const orientation = getLabelOrientation(d, width, config.labelPosition)
   switch (orientation) {
-    case Position.Right: return config.nodeWidth + NODE_LABEL_SPACING
+    case Position.Right: return config.nodeWidth + SANKEY_LABEL_SPACING
     case Position.Left:
     default:
-      return -NODE_LABEL_SPACING
+      return -SANKEY_LABEL_SPACING
   }
 }
 
@@ -135,19 +127,45 @@ export function getSubLabelTextAnchor<N extends SankeyInputNode, L extends Sanke
   }
 }
 
+export function getLabelMaxWidth<N extends SankeyInputNode, L extends SankeyInputLink> (
+  d: SankeyNode<N, L>,
+  config: SankeyConfigInterface<N, L>,
+  labelOrientation: Position.Left | Position.Right,
+  layerSpacing: number,
+  sankeyMaxLayer: number,
+  bleed: Spacing
+): number {
+  const labelHorizontalPadding = 2 * SANKEY_LABEL_SPACING + 2 * SANKEY_LABEL_BLOCK_PADDING
+
+  // We want to fall through to the default case
+  /* eslint-disable no-fallthrough */
+  switch (d.layer) {
+    case 0:
+      if (labelOrientation === Position.Left) return bleed.left - labelHorizontalPadding
+    case (sankeyMaxLayer):
+      if (labelOrientation === Position.Right) {
+        return bleed.right - labelHorizontalPadding
+      }
+    default:
+      return clamp(layerSpacing - labelHorizontalPadding, 0, config.labelMaxWidth ?? Infinity)
+  } /* eslint-enable no-fallthrough */
+}
+
 export function renderLabel<N extends SankeyInputNode, L extends SankeyInputLink> (
   labelGroup: Selection<SVGGElement, SankeyNode<N, L>, SVGGElement, any>,
   d: SankeyNode<N, L>,
   config: SankeyConfigInterface<N, L>,
   width: number,
   duration: number,
-  forceExpand = false,
-  layerSpacing: number | undefined = undefined
+  layerSpacing: number | undefined,
+  sankeyMaxLayer: number,
+  bleed: Spacing,
+  forceExpand = false
 ): { x: number; y: number; width: number; height: number; layer: number; selection: any; hidden?: boolean } {
   const labelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.label}`)
   const labelShowBackground = config.labelBackground || forceExpand
   const sublabelTextSelection: Selection<SVGTextElement, SankeyNode<N, L>, SVGGElement, SankeyNode<N, L>> = labelGroup.select(`.${s.sublabel}`)
-  const labelPadding = labelShowBackground ? LABEL_BLOCK_PADDING : 0
+  const labelPadding = labelShowBackground ? SANKEY_LABEL_BLOCK_PADDING : 0
   const isSublabelInline = config.subLabelPlacement === SankeySubLabelPlacement.Inline
   const separator = config.labelForceWordBreak ? '' : config.labelTextSeparator
   const fastEstimatesMode = true // Fast but inaccurate
@@ -173,7 +191,7 @@ export function renderLabel<N extends SankeyInputNode, L extends SankeyInputLink
     .attr('transform', `translate(${labelOrientationMult * labelPadding},${labelTranslateY})`)
     .style('cursor', (d: SankeyNode<N, L>) => getString(d, config.labelCursor))
 
-  const labelMaxWidth = clamp(layerSpacing - 2 * NODE_LABEL_SPACING - 2 * LABEL_BLOCK_PADDING, 0, config.labelMaxWidth ?? Infinity)
+  const labelMaxWidth = getLabelMaxWidth(d, config, labelOrientation, layerSpacing, sankeyMaxLayer, bleed)
   const labelWrapTrimWidth = isSublabelInline
     ? labelMaxWidth * (1 - (sublabelText ? config.subLabelToLabelInlineWidthRatio : 0))
     : labelMaxWidth