@cdc/chart 4.26.6 → 4.26.10

package/src/components/Dendrogram/components/Dendrogram.tsx

@@ -0,0 +1,374 @@
+import { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+import Button from '@cdc/core/components/elements/Button'
+import { sanitizePaletteColor } from '@cdc/core/helpers/palettes/colorValidation'
+
+import ConfigContext from '../../../ConfigContext'
+import type { ChartContext } from '../../../types/ChartContext'
+import { layoutDendrogram } from '../helpers/layoutDendrogram'
+import { prepareDendrogramData } from '../helpers/prepareDendrogramData'
+import { resolveDendrogramLabels } from '../helpers/resolveDendrogramLabels'
+import type { DendrogramLayoutLink, DendrogramLayoutNode, DendrogramProps } from '../types'
+import '../dendrogram.css'
+
+type DendrogramView = {
+  scale: number
+  offsetX: number
+  offsetY: number
+}
+
+const DEFAULT_VIEW: DendrogramView = { scale: 1, offsetX: 0, offsetY: 0 }
+const LINK_KEY_HEIGHT = 32
+const DEFAULT_LINK_STYLE_LABELS = { solid: 'Solid', dashed: 'Dashed' } as const
+
+const Dendrogram = ({ data, width, height, runtime }: DendrogramProps) => {
+  const { config, handleChartAriaLabels } = useContext<ChartContext>(ConfigContext)
+  const dendrogram = config.dendrogram
+  const reactId = useId().replace(/:/g, '')
+  const parsedWidth = Number(width)
+  const parsedHeight = Number(dendrogram?.height)
+  const parsedParentHeight = Number(height)
+  const chartWidth = Math.max(Number.isFinite(parsedWidth) ? parsedWidth : 640, 160)
+  const chartHeight = Math.max(
+    Number.isFinite(parsedHeight) ? parsedHeight : Number.isFinite(parsedParentHeight) ? parsedParentHeight : 500,
+    160
+  )
+  const orientation = dendrogram?.orientation === 'vertical' ? 'vertical' : 'horizontal'
+  const connectionType = ['line', 'elbow'].includes(dendrogram?.connectionType || '')
+    ? dendrogram!.connectionType
+    : 'curve'
+  const nodeRadius = Math.max(2, Number.isFinite(Number(dendrogram?.nodeRadius)) ? Number(dendrogram.nodeRadius) : 6)
+  const prepared = useMemo(() => prepareDendrogramData(data, dendrogram?.columns), [data, dendrogram?.columns])
+  const layout = useMemo(
+    () =>
+      layoutDendrogram(prepared, {
+        orientation,
+        leafSpacing: dendrogram?.leafSpacing ?? 40,
+        depthSpacing: dendrogram?.depthSpacing ?? 140,
+        nodeRadius
+      }),
+    [dendrogram?.depthSpacing, dendrogram?.leafSpacing, nodeRadius, orientation, prepared]
+  )
+  const linkStyleColumn = dendrogram?.columns?.style
+  const hasMappedLinkStyle = Boolean(
+    linkStyleColumn &&
+      Array.isArray(data) &&
+      data.some(row => row && typeof row === 'object' && !Array.isArray(row) && linkStyleColumn in row)
+  )
+  const renderedLinkStyles = useMemo(
+    () =>
+      hasMappedLinkStyle && layout.links.length
+        ? (['solid', 'dashed'] as const).filter(style => layout.links.some(link => link.style === style))
+        : [],
+    [hasMappedLinkStyle, layout.links]
+  )
+  const plotHeight = chartHeight - (renderedLinkStyles.length ? LINK_KEY_HEIGHT : 0)
+  const resolvedLabels = useMemo(
+    () => resolveDendrogramLabels(layout.nodes, layout.links, { orientation, connectionType, nodeRadius }),
+    [connectionType, layout.links, layout.nodes, nodeRadius, orientation]
+  )
+  const labelsByNodeId = useMemo(
+    () => new Map(resolvedLabels.map(placement => [placement.nodeId, placement])),
+    [resolvedLabels]
+  )
+  const contentBounds = useMemo(() => {
+    if (!layout.nodes.length) return null
+    const extents = layout.nodes.reduce(
+      (result, node) => ({
+        minX: Math.min(result.minX, node.x - nodeRadius),
+        maxX: Math.max(result.maxX, node.x + nodeRadius),
+        minY: Math.min(result.minY, node.y - nodeRadius),
+        maxY: Math.max(result.maxY, node.y + nodeRadius)
+      }),
+      { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity }
+    )
+    resolvedLabels.forEach(({ bounds }) => {
+      extents.minX = Math.min(extents.minX, bounds.x)
+      extents.maxX = Math.max(extents.maxX, bounds.x + bounds.width)
+      extents.minY = Math.min(extents.minY, bounds.y)
+      extents.maxY = Math.max(extents.maxY, bounds.y + bounds.height)
+    })
+    const padding = 4
+    return {
+      minX: extents.minX - padding,
+      maxX: extents.maxX + padding,
+      minY: extents.minY - padding,
+      maxY: extents.maxY + padding
+    }
+  }, [layout.nodes, nodeRadius, resolvedLabels])
+
+  const constrainView = useCallback(
+    (nextView: DendrogramView): DendrogramView => {
+      if (!contentBounds) return DEFAULT_VIEW
+      const centerX = chartWidth / 2
+      const centerY = plotHeight / 2
+      const minX = centerX + (contentBounds.minX - centerX) * nextView.scale
+      const maxX = centerX + (contentBounds.maxX - centerX) * nextView.scale
+      const minY = centerY + (contentBounds.minY - centerY) * nextView.scale
+      const maxY = centerY + (contentBounds.maxY - centerY) * nextView.scale
+      const horizontalLimits = [chartWidth - maxX, -minX].sort((a, b) => a - b)
+      const verticalLimits = [plotHeight - maxY, -minY].sort((a, b) => a - b)
+
+      return {
+        ...nextView,
+        offsetX: Math.min(horizontalLimits[1], Math.max(horizontalLimits[0], nextView.offsetX)),
+        offsetY: Math.min(verticalLimits[1], Math.max(verticalLimits[0], nextView.offsetY))
+      }
+    },
+    [chartWidth, contentBounds, plotHeight]
+  )
+
+  const getAlignedView = useCallback((): DendrogramView => {
+    if (!contentBounds) return DEFAULT_VIEW
+    const offsetX = chartWidth / 2 - (contentBounds.minX + contentBounds.maxX) / 2
+    const offsetY = plotHeight / 2 - (contentBounds.minY + contentBounds.maxY) / 2
+    return constrainView({ ...DEFAULT_VIEW, offsetX, offsetY })
+  }, [chartWidth, constrainView, contentBounds, plotHeight])
+
+  const alignedView = useMemo(getAlignedView, [getAlignedView])
+  const [view, setView] = useState<DendrogramView>(alignedView)
+  const previousAlignedView = useRef(alignedView)
+  const dragStart = useRef<{ x: number; y: number; offsetX: number; offsetY: number } | null>(null)
+
+  useEffect(() => {
+    const previous = previousAlignedView.current
+    if (
+      previous.scale === alignedView.scale &&
+      previous.offsetX === alignedView.offsetX &&
+      previous.offsetY === alignedView.offsetY
+    )
+      return
+
+    previousAlignedView.current = alignedView
+    setView(alignedView)
+  }, [alignedView])
+
+  if (config.visualizationType !== 'Dendrogram') return null
+
+  if (!dendrogram?.columns?.node || !dendrogram?.columns?.parent) {
+    return (
+      <div className='dendrogram-chart__message'>Select Node ID and Parent ID columns to display the dendrogram.</div>
+    )
+  }
+
+  const selectedColumnsExist = [dendrogram.columns.node, dendrogram.columns.parent].every(column =>
+    Array.isArray(data)
+      ? data.some(row => row && typeof row === 'object' && !Array.isArray(row) && column in row)
+      : false
+  )
+  if (!selectedColumnsExist) {
+    return (
+      <div className='dendrogram-chart__message'>
+        Select Node ID and Parent ID columns that exist in the imported data to display the dendrogram.
+      </div>
+    )
+  }
+
+  if (!prepared.nodes.length) {
+    return (
+      <div className='dendrogram-chart__message'>
+        No valid hierarchy rows are available. Check the selected Node ID and Parent ID columns.
+        {prepared.rejectedRowCount > 0 && ` ${prepared.rejectedRowCount} row(s) were rejected.`}
+      </div>
+    )
+  }
+
+  if (prepared.error) {
+    return (
+      <div className='dendrogram-chart__message' role='alert'>
+        {prepared.error.message}
+        {prepared.rejectedRowCount > 0 && ` ${prepared.rejectedRowCount} row(s) were rejected.`}
+      </div>
+    )
+  }
+
+  const instanceId = `${runtime?.uniqueId || 'chart'}-${reactId}`
+  const tooltipId = `cdc-open-viz-tooltip-${instanceId}-dendrogram`
+  const nodeColor = sanitizePaletteColor(dendrogram?.nodeColor) || '#005eaa'
+  const linkColor = sanitizePaletteColor(dendrogram?.linkColor) || '#333333'
+  const getLinkStyleLabel = (style: (typeof renderedLinkStyles)[number]) => {
+    const authoredLabel: unknown = dendrogram.linkStyleLabels?.[style]
+    return typeof authoredLabel === 'string' && authoredLabel.trim()
+      ? authoredLabel.trim()
+      : DEFAULT_LINK_STYLE_LABELS[style]
+  }
+  const viewTransform = `translate(${chartWidth / 2 + view.offsetX} ${plotHeight / 2 + view.offsetY}) scale(${
+    view.scale
+  }) translate(${-chartWidth / 2} ${-plotHeight / 2})`
+  const childCounts = new Map<string, number>()
+  layout.nodes.forEach(node => {
+    if (node.parentId !== null) childCounts.set(node.parentId, (childCounts.get(node.parentId) || 0) + 1)
+  })
+
+  const zoomBy = (factor: number) =>
+    setView(current => constrainView({ ...current, scale: Math.min(4, Math.max(0.25, current.scale * factor)) }))
+  const resetView = () => setView(alignedView)
+  const handlePointerDown = (event: React.PointerEvent<SVGSVGElement>) => {
+    if (event.button !== 0) return
+    event.currentTarget.setPointerCapture(event.pointerId)
+    dragStart.current = { x: event.clientX, y: event.clientY, offsetX: view.offsetX, offsetY: view.offsetY }
+  }
+  const handlePointerMove = (event: React.PointerEvent<SVGSVGElement>) => {
+    if (!dragStart.current) return
+    const bounds = event.currentTarget.getBoundingClientRect()
+    const scaleX = bounds.width ? chartWidth / bounds.width : 1
+    const scaleY = bounds.height ? plotHeight / bounds.height : 1
+    setView(current =>
+      constrainView({
+        ...current,
+        offsetX: dragStart.current!.offsetX + (event.clientX - dragStart.current!.x) * scaleX,
+        offsetY: dragStart.current!.offsetY + (event.clientY - dragStart.current!.y) * scaleY
+      })
+    )
+  }
+  const handlePointerUp = (event: React.PointerEvent<SVGSVGElement>) => {
+    dragStart.current = null
+    if (event.currentTarget.hasPointerCapture(event.pointerId))
+      event.currentTarget.releasePointerCapture(event.pointerId)
+  }
+  const getLinkPath = (link: DendrogramLayoutLink) => {
+    if (connectionType === 'line') {
+      return `M ${link.source.x} ${link.source.y} L ${link.target.x} ${link.target.y}`
+    }
+    if (orientation === 'vertical') {
+      const midpoint = (link.source.y + link.target.y) / 2
+      if (connectionType === 'elbow') {
+        return `M ${link.source.x} ${link.source.y} L ${link.source.x} ${midpoint} L ${link.target.x} ${midpoint} L ${link.target.x} ${link.target.y}`
+      }
+      return `M ${link.source.x} ${link.source.y} C ${link.source.x} ${midpoint}, ${link.target.x} ${midpoint}, ${link.target.x} ${link.target.y}`
+    }
+    const midpoint = (link.source.x + link.target.x) / 2
+    if (connectionType === 'elbow') {
+      return `M ${link.source.x} ${link.source.y} L ${midpoint} ${link.source.y} L ${midpoint} ${link.target.y} L ${link.target.x} ${link.target.y}`
+    }
+    return `M ${link.source.x} ${link.source.y} C ${midpoint} ${link.source.y}, ${midpoint} ${link.target.y}, ${link.target.x} ${link.target.y}`
+  }
+
+  const renderLink = (link: DendrogramLayoutLink) => {
+    const label = `${link.source.label} to ${link.target.label}, ${link.style} link`
+    const path = getLinkPath(link)
+    return (
+      <g
+        key={link.id}
+        className='dendrogram-chart__link-group'
+        tabIndex={0}
+        role='img'
+        aria-label={label}
+        data-tooltip-id={config.enableTooltips ? tooltipId : undefined}
+        data-tooltip-content={config.enableTooltips ? label : undefined}
+      >
+        <path className='dendrogram-chart__link-hitbox' d={path} stroke='transparent' strokeWidth={12} />
+        <path
+          aria-hidden='true'
+          className={`dendrogram-chart__link${link.style === 'dashed' ? ' dendrogram-chart__link--dashed' : ''}`}
+          d={path}
+          stroke={linkColor}
+        />
+      </g>
+    )
+  }
+
+  const renderNode = (node: DendrogramLayoutNode) => {
+    const placement = labelsByNodeId.get(node.id)
+    const children = childCounts.get(node.id) || 0
+    const accessibleName = node.label === node.id ? node.label : `${node.label} (${node.id})`
+    const label = `${accessibleName}, depth ${node.depth}, ${children} ${children === 1 ? 'child' : 'children'}`
+    return (
+      <g
+        key={node.id}
+        className='dendrogram-chart__node'
+        transform={`translate(${node.x} ${node.y})`}
+        tabIndex={0}
+        role='img'
+        aria-label={label}
+        data-tooltip-id={config.enableTooltips ? tooltipId : undefined}
+        data-tooltip-content={config.enableTooltips ? label : undefined}
+      >
+        <circle r={nodeRadius} fill={node.color || nodeColor} />
+        {placement && (
+          <text
+            className={`dendrogram-chart__label dendrogram-chart__label--${placement.anchor}`}
+            x={placement.x}
+            y={placement.y}
+            textAnchor={placement.textAnchor}
+            dominantBaseline={placement.dominantBaseline}
+          >
+            {node.label}
+          </text>
+        )}
+      </g>
+    )
+  }
+
+  return (
+    <div className='dendrogram-chart__container' style={{ height: chartHeight }}>
+      {renderedLinkStyles.length > 0 && (
+        <div className='dendrogram-chart__link-key' role='group' aria-label='Link styles'>
+          {renderedLinkStyles.map(style => (
+            <div className='dendrogram-chart__link-key-item' key={style}>
+              <svg aria-hidden='true' width='36' height='12' viewBox='0 0 36 12'>
+                <line
+                  className={`dendrogram-chart__link${style === 'dashed' ? ' dendrogram-chart__link--dashed' : ''}`}
+                  x1='1'
+                  x2='35'
+                  y1='6'
+                  y2='6'
+                  stroke={linkColor}
+                />
+              </svg>
+              <span>{getLinkStyleLabel(style)}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className='dendrogram-chart__plot'>
+        {prepared.rejectedRowCount > 0 && (
+          <div className='dendrogram-chart__status' role='status'>
+            {prepared.rejectedRowCount} invalid row(s) excluded.
+          </div>
+        )}
+        <svg
+          className='dendrogram-chart'
+          width='100%'
+          height='100%'
+          viewBox={`0 0 ${chartWidth} ${plotHeight}`}
+          role='group'
+          aria-label={handleChartAriaLabels(config)}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+          onLostPointerCapture={() => {
+            dragStart.current = null
+          }}
+        >
+          <g className='dendrogram-chart__viewport' transform={viewTransform}>
+            {layout.links.map(renderLink)}
+            {layout.nodes.map(renderNode)}
+          </g>
+        </svg>
+        <div
+          className='dendrogram-chart__controls'
+          role='group'
+          aria-label='Dendrogram view controls'
+          data-html2canvas-ignore='true'
+        >
+          <Button type='button' variant='light' size='sm' onClick={() => zoomBy(1.2)} aria-label='Zoom in'>
+            +
+          </Button>
+          <Button type='button' variant='light' size='sm' onClick={() => zoomBy(1 / 1.2)} aria-label='Zoom out'>
+            −
+          </Button>
+          <Button type='button' variant='light' size='sm' onClick={resetView} aria-label='Reset view'>
+            Reset
+          </Button>
+        </div>
+        {config.enableTooltips && <ReactTooltip id={tooltipId} variant='light' className='dendrogram-chart__tooltip' />}
+      </div>
+    </div>
+  )
+}
+
+export default Dendrogram

package/src/components/Dendrogram/dendrogram.css

@@ -0,0 +1,113 @@
+.dendrogram-chart__container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.dendrogram-chart__plot {
+  flex: 1 1 auto;
+  min-height: 0;
+  position: relative;
+}
+
+.dendrogram-chart {
+  cursor: grab;
+  display: block;
+  overflow: hidden;
+  touch-action: none;
+}
+
+.dendrogram-chart:active {
+  cursor: grabbing;
+}
+
+.dendrogram-chart__controls {
+  align-items: center;
+  bottom: 2em;
+  display: flex;
+  gap: 0.25rem;
+  left: 1em;
+  position: absolute;
+  z-index: 4;
+}
+
+.dendrogram-chart__controls .cove-button {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
+.dendrogram-chart__status {
+  background: rgb(255 255 255 / 90%);
+  color: #666;
+  left: 0;
+  padding: 0.25rem 0.5rem;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+
+.dendrogram-chart__link {
+  fill: none;
+  stroke-width: 2;
+}
+
+.dendrogram-chart__link-hitbox {
+  fill: none;
+  pointer-events: stroke;
+}
+
+.dendrogram-chart__link-group,
+.dendrogram-chart__node {
+  outline: none;
+}
+
+.dendrogram-chart__link-group:focus-visible,
+.dendrogram-chart__node:focus-visible {
+  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #005ea8);
+}
+
+.dendrogram-chart__link--dashed {
+  stroke-dasharray: 12 8;
+}
+
+.dendrogram-chart__label {
+  fill: currentcolor;
+  font-size: 16px;
+  pointer-events: none;
+}
+
+.dendrogram-chart__link-key {
+  align-items: center;
+  display: flex;
+  flex: 0 0 32px;
+  font-size: 12px;
+  gap: 1rem;
+  justify-content: flex-end;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 0 0.5rem;
+  white-space: nowrap;
+}
+
+.dendrogram-chart__link-key-item {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  gap: 0.35rem;
+}
+
+.dendrogram-chart__message {
+  color: #666;
+  padding: 2rem;
+  text-align: center;
+}
+
+.dendrogram-chart__tooltip {
+  --rt-opacity: 1;
+
+  background: #fff;
+  border: 1px solid #bdbdbd;
+  box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
+  color: var(--cool-gray-90, #1b1b1b);
+}

package/src/components/Dendrogram/helpers/layoutDendrogram.test.ts

@@ -0,0 +1,95 @@
+import { layoutDendrogram } from './layoutDendrogram'
+import { prepareDendrogramData } from './prepareDendrogramData'
+
+describe('layoutDendrogram', () => {
+  const prepared = prepareDendrogramData(
+    [
+      { id: 'root', parentId: '' },
+      { id: 'branch-b', parentId: 'root' },
+      { id: 'branch-a', parentId: 'root' },
+      { id: 'leaf', parentId: 'branch-a', linkStyle: 'dashed' }
+    ],
+    { node: 'id', parent: 'parentId', style: 'linkStyle' }
+  )
+  const options = { orientation: 'horizontal' as const, leafSpacing: 50, depthSpacing: 100, nodeRadius: 6 }
+
+  it('produces stable deterministic coordinates and one link per non-root node', () => {
+    const first = layoutDendrogram(prepared, options)
+    const second = layoutDendrogram(prepared, options)
+
+    expect(second).toEqual(first)
+    expect(first.nodes).toHaveLength(4)
+    expect(first.links).toHaveLength(3)
+    expect(first.nodes.find(node => node.id === 'root')?.depth).toBe(0)
+    expect(first.nodes.find(node => node.id === 'leaf')?.depth).toBe(2)
+    expect(first.links.find(link => link.target.id === 'leaf')?.style).toBe('dashed')
+  })
+
+  it('uses depth on the x-axis horizontally and on the y-axis vertically', () => {
+    const horizontal = layoutDendrogram(prepared, options)
+    const vertical = layoutDendrogram(prepared, { ...options, orientation: 'vertical' })
+    const horizontalRoot = horizontal.nodes.find(node => node.id === 'root')!
+    const horizontalLeaf = horizontal.nodes.find(node => node.id === 'leaf')!
+    const verticalRoot = vertical.nodes.find(node => node.id === 'root')!
+    const verticalLeaf = vertical.nodes.find(node => node.id === 'leaf')!
+
+    expect(horizontalLeaf.x - horizontalRoot.x).toBe(200)
+    expect(verticalLeaf.y - verticalRoot.y).toBe(200)
+    expect(verticalLeaf.x).toBe(horizontalLeaf.y)
+    expect(verticalLeaf.y).toBe(horizontalLeaf.x)
+  })
+
+  it('honors leaf and depth spacing while clamping unsafe values', () => {
+    const regular = layoutDendrogram(prepared, options)
+    const expanded = layoutDendrogram(prepared, { ...options, leafSpacing: 80, depthSpacing: 140 })
+    const clamped = layoutDendrogram(prepared, { ...options, leafSpacing: 0, depthSpacing: 0, nodeRadius: 0 })
+
+    expect(Math.max(...expanded.nodes.map(node => node.x))).toBeGreaterThan(
+      Math.max(...regular.nodes.map(node => node.x))
+    )
+    expect(Math.max(...expanded.nodes.map(node => node.y))).toBeGreaterThan(
+      Math.max(...regular.nodes.map(node => node.y))
+    )
+    expect(Math.min(...clamped.nodes.map(node => node.x))).toBeGreaterThanOrEqual(14)
+    expect(Math.min(...clamped.nodes.map(node => node.y))).toBeGreaterThanOrEqual(14)
+  })
+
+  it('handles a one-node hierarchy and returns no layout for invalid input', () => {
+    const oneNode = prepareDendrogramData([{ id: 'root', parentId: '' }], { node: 'id', parent: 'parentId' })
+    const invalid = prepareDendrogramData(
+      [
+        { id: 'root', parentId: '' },
+        { id: 'child', parentId: 'missing' }
+      ],
+      { node: 'id', parent: 'parentId' }
+    )
+
+    expect(layoutDendrogram(oneNode, options)).toEqual({
+      nodes: [expect.objectContaining({ id: 'root', x: 18, y: 18 })],
+      links: []
+    })
+    expect(layoutDendrogram(invalid, options)).toEqual({ nodes: [], links: [] })
+  })
+
+  it('does not mutate prepared hierarchy data', () => {
+    const before = structuredClone(prepared)
+    layoutDendrogram(prepared, options)
+    expect(prepared).toEqual(before)
+  })
+
+  it('preserves authored sibling order and safely lays out wide hierarchies', () => {
+    const ordered = layoutDendrogram(prepared, options)
+    expect(ordered.nodes.find(node => node.id === 'branch-b')!.y).toBeLessThan(
+      ordered.nodes.find(node => node.id === 'branch-a')!.y
+    )
+
+    const wide = prepareDendrogramData(
+      [
+        { id: 'root', parentId: '' },
+        ...Array.from({ length: 10000 }, (_, i) => ({ id: `leaf-${i}`, parentId: 'root' }))
+      ],
+      { node: 'id', parent: 'parentId' }
+    )
+    expect(() => layoutDendrogram(wide, { ...options, leafSpacing: Number.MAX_VALUE })).not.toThrow()
+  })
+})

package/src/components/Dendrogram/helpers/layoutDendrogram.ts

@@ -0,0 +1,56 @@
+import { stratify } from '@visx/hierarchy'
+import { cluster } from 'd3-hierarchy'
+
+import type { DendrogramLayout, DendrogramLayoutNode, DendrogramOrientation, DendrogramPreparedData } from '../types'
+
+type LayoutOptions = {
+  orientation: DendrogramOrientation
+  leafSpacing: number
+  depthSpacing: number
+  nodeRadius: number
+}
+
+const getPositiveNumber = (value: unknown, fallback: number, minimum: number, maximum: number) => {
+  const parsed = Number(value)
+  return Math.min(maximum, Math.max(minimum, Number.isFinite(parsed) ? parsed : fallback))
+}
+
+export const layoutDendrogram = (prepared: DendrogramPreparedData, options: LayoutOptions): DendrogramLayout => {
+  if (!prepared.rootId || prepared.error || !prepared.nodes.length) return { nodes: [], links: [] }
+
+  const leafSpacing = getPositiveNumber(options.leafSpacing, 40, 12, 10000)
+  const depthSpacing = getPositiveNumber(options.depthSpacing, 140, 24, 10000)
+  const nodeRadius = getPositiveNumber(options.nodeRadius, 6, 2, 1000)
+  const root = stratify<(typeof prepared.nodes)[number]>()
+    .id(node => node.id)
+    .parentId(node => node.parentId)(prepared.nodes)
+
+  cluster<(typeof prepared.nodes)[number]>().nodeSize([leafSpacing, depthSpacing])(root)
+
+  const descendants = root.descendants()
+  const minimumCrossAxis = descendants.reduce((minimum, node) => Math.min(minimum, node.x), Infinity)
+  const padding = nodeRadius + 12
+  const nodes = descendants.map(node => {
+    const depthPosition = node.y + padding
+    const leafPosition = node.x - minimumCrossAxis + padding
+    const x = options.orientation === 'vertical' ? leafPosition : depthPosition
+    const y = options.orientation === 'vertical' ? depthPosition : leafPosition
+    return {
+      ...node.data,
+      depth: node.depth,
+      x,
+      y
+    } satisfies DendrogramLayoutNode
+  })
+  const nodesById = new Map(nodes.map(node => [node.id, node]))
+  const links = nodes
+    .filter(node => node.parentId !== null)
+    .map(node => ({
+      id: JSON.stringify([node.parentId, node.id]),
+      source: nodesById.get(node.parentId!)!,
+      target: node,
+      style: node.style
+    }))
+
+  return { nodes, links }
+}