@cdc/chart 4.26.6 → 4.26.10

package/src/components/Network/components/Network.tsx

@@ -0,0 +1,372 @@
+import { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react'
+import { Graph } from '@visx/network'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+import 'react-tooltip/dist/react-tooltip.css'
+
+import ConfigContext from '../../../ConfigContext'
+import type { ChartContext } from '../../../types/ChartContext'
+import { layoutNetwork, resolveNetworkNodeRadius } from '../helpers/layoutNetwork'
+import { prepareNetworkData } from '../helpers/prepareNetworkData'
+import { resolveNetworkLabels } from '../helpers/resolveNetworkLabels'
+import type { NetworkLayoutLink, NetworkLayoutNode, NetworkProps } from '../types'
+import Button from '@cdc/core/components/elements/Button'
+import { sanitizePaletteColor } from '@cdc/core/helpers/palettes/colorValidation'
+import '../network.css'
+
+type NetworkView = {
+  rotation: number
+  scale: number
+  offsetX: number
+  offsetY: number
+}
+
+const LINK_KEY_HEIGHT = 32
+const DEFAULT_LINK_STYLE_LABELS = { solid: 'Solid', dashed: 'Dashed' } as const
+
+const Network = ({ data, width, height, runtime }: NetworkProps) => {
+  const { config, handleChartAriaLabels } = useContext<ChartContext>(ConfigContext)
+  const reactId = useId().replace(/:/g, '')
+  const network = config.network
+  const prepared = useMemo(
+    () => prepareNetworkData(data, network?.columns, network?.directed),
+    [data, network?.columns, network?.directed]
+  )
+  const parsedWidth = Number(width)
+  const parsedAuthoredHeight = Number(network?.height)
+  const parsedParentHeight = Number(height)
+  const chartWidth = Math.max(Number.isFinite(parsedWidth) ? parsedWidth : 640, 160)
+  const chartHeight = Math.max(
+    Number.isFinite(parsedAuthoredHeight)
+      ? parsedAuthoredHeight
+      : Number.isFinite(parsedParentHeight)
+      ? parsedParentHeight
+      : 500,
+    160
+  )
+  const linkStyleColumn = network?.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 && !config.legend?.hide
+        ? (['solid', 'dashed'] as const).filter(style => prepared.links.some(link => link.style === style))
+        : [],
+    [config.legend?.hide, hasMappedLinkStyle, prepared.links]
+  )
+  const plotHeight = chartHeight - (renderedLinkStyles.length ? LINK_KEY_HEIGHT : 0)
+  const layout = useMemo(
+    () =>
+      layoutNetwork(prepared, {
+        width: chartWidth,
+        height: plotHeight,
+        nodeRadius: network?.nodeRadius ?? 8,
+        linkDistance: network?.linkDistance ?? 90,
+        chargeStrength: network?.chargeStrength ?? -240
+      }),
+    [chartWidth, network, plotHeight, prepared]
+  )
+  const constrainedNodeRadius = resolveNetworkNodeRadius(network?.nodeRadius ?? 8, chartWidth, plotHeight)
+  const resolvedLabels = useMemo(
+    () => resolveNetworkLabels(layout.nodes, layout.links, { nodeRadius: constrainedNodeRadius }),
+    [constrainedNodeRadius, layout.links, layout.nodes]
+  )
+  const labelsByNodeId = useMemo(
+    () => new Map(resolvedLabels.map(placement => [placement.nodeId, placement])),
+    [resolvedLabels]
+  )
+  const contentPoints = useMemo(
+    () => [
+      ...layout.nodes.flatMap(node => [
+        { x: node.x - constrainedNodeRadius, y: node.y - constrainedNodeRadius },
+        { x: node.x + constrainedNodeRadius, y: node.y - constrainedNodeRadius },
+        { x: node.x + constrainedNodeRadius, y: node.y + constrainedNodeRadius },
+        { x: node.x - constrainedNodeRadius, y: node.y + constrainedNodeRadius }
+      ]),
+      ...resolvedLabels.flatMap(({ bounds }) => [
+        { x: bounds.x, y: bounds.y },
+        { x: bounds.x + bounds.width, y: bounds.y },
+        { x: bounds.x + bounds.width, y: bounds.y + bounds.height },
+        { x: bounds.x, y: bounds.y + bounds.height }
+      ])
+    ],
+    [constrainedNodeRadius, layout.nodes, resolvedLabels]
+  )
+  const constrainView = useCallback(
+    (nextView: NetworkView): NetworkView => {
+      if (!contentPoints.length) return { ...nextView, offsetX: 0, offsetY: 0 }
+      const normalizedRotation = Number.isFinite(nextView.rotation) ? ((nextView.rotation % 360) + 360) % 360 : 0
+      const radians = (normalizedRotation * Math.PI) / 180
+      const cosine = Math.cos(radians)
+      const sine = Math.sin(radians)
+      const centerX = chartWidth / 2
+      const centerY = plotHeight / 2
+      const transformedPoints = contentPoints.map(point => {
+        const x = point.x - centerX
+        const y = point.y - centerY
+        return {
+          x: centerX + nextView.scale * (cosine * x - sine * y),
+          y: centerY + nextView.scale * (sine * x + cosine * y)
+        }
+      })
+      const extents = transformedPoints.reduce(
+        (result, point) => ({
+          minX: Math.min(result.minX, point.x),
+          maxX: Math.max(result.maxX, point.x),
+          minY: Math.min(result.minY, point.y),
+          maxY: Math.max(result.maxY, point.y)
+        }),
+        { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity }
+      )
+      const minX = extents.minX - 4
+      const maxX = extents.maxX + 4
+      const minY = extents.minY - 4
+      const maxY = extents.maxY + 4
+      const horizontalLimits = [chartWidth - maxX, -minX].sort((a, b) => a - b)
+      const verticalLimits = [plotHeight - maxY, -minY].sort((a, b) => a - b)
+
+      return {
+        ...nextView,
+        rotation: normalizedRotation,
+        offsetX: Math.min(horizontalLimits[1], Math.max(horizontalLimits[0], nextView.offsetX)),
+        offsetY: Math.min(verticalLimits[1], Math.max(verticalLimits[0], nextView.offsetY))
+      }
+    },
+    [chartWidth, contentPoints, plotHeight]
+  )
+  const getInitialView = useCallback(
+    () =>
+      constrainView({
+        rotation: Number.isFinite(Number(network?.rotation)) ? Number(network.rotation) : 0,
+        scale: Math.min(4, Math.max(0.25, Number.isFinite(Number(network?.scale)) ? Number(network.scale) : 1)),
+        offsetX: Number.isFinite(Number(network?.offsetX)) ? Number(network.offsetX) : 0,
+        offsetY: Number.isFinite(Number(network?.offsetY)) ? Number(network.offsetY) : 0
+      }),
+    [constrainView, network?.offsetX, network?.offsetY, network?.rotation, network?.scale]
+  )
+  const [view, setView] = useState(getInitialView)
+  const dragStart = useRef<{ x: number; y: number; offsetX: number; offsetY: number } | null>(null)
+
+  useEffect(() => {
+    setView(getInitialView())
+  }, [getInitialView])
+
+  if (config.visualizationType !== 'Network') return null
+
+  if (!network?.columns?.source || !network?.columns?.target) {
+    return <div className='network-chart__message'>Select source and target columns to display the network.</div>
+  }
+
+  if (!layout.links.length) {
+    return (
+      <div className='network-chart__message'>
+        No valid connections are available. Check the selected columns and remove blank endpoints, self-links, or
+        invalid weights.
+        {prepared.rejectedRowCount > 0 && ` ${prepared.rejectedRowCount} row(s) were rejected.`}
+      </div>
+    )
+  }
+
+  const instanceId = `${runtime?.uniqueId || 'chart'}-${reactId}`
+  const tooltipId = `cdc-open-viz-tooltip-${instanceId}-network`
+  const markerId = `network-arrow-${instanceId}`
+  const nodeRadius = constrainedNodeRadius
+  const nodeColor = sanitizePaletteColor(network.nodeColor) || '#005eaa'
+  const linkColor = sanitizePaletteColor(network.linkColor) || '#333333'
+  const getLinkStyleLabel = (style: (typeof renderedLinkStyles)[number]) => {
+    const authoredLabel: unknown = network.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}) rotate(${
+    view.rotation
+  }) scale(${view.scale}) translate(${-chartWidth / 2} ${-plotHeight / 2})`
+  const zoomBy = (factor: number) =>
+    setView(current => constrainView({ ...current, scale: Math.min(4, Math.max(0.25, current.scale * factor)) }))
+  const resetView = () => setView(getInitialView())
+  const handlePointerDown = (event: React.PointerEvent<SVGSVGElement>) => {
+    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 LinkComponent = ({ link }: { link: NetworkLayoutLink }) => {
+    const endpoints = network.directed
+      ? `${link.source.id} to ${link.target.id}`
+      : `${link.source.id} and ${link.target.id}`
+    const label = `${endpoints}, ${link.style} link${prepared.hasWeights ? `, weight ${link.weight}` : ''}`
+    const deltaX = link.target.x - link.source.x
+    const deltaY = link.target.y - link.source.y
+    const distance = Math.hypot(deltaX, deltaY) || 1
+    const offsetX = (deltaX / distance) * nodeRadius
+    const offsetY = (deltaY / distance) * nodeRadius
+    const lineCoordinates = {
+      x1: link.source.x + offsetX,
+      y1: link.source.y + offsetY,
+      x2: link.target.x - offsetX,
+      y2: link.target.y - offsetY
+    }
+    return (
+      <g
+        className='network-chart__link-group'
+        tabIndex={0}
+        role='img'
+        aria-label={label}
+        data-tooltip-id={config.enableTooltips ? tooltipId : undefined}
+        data-tooltip-content={config.enableTooltips ? label : undefined}
+      >
+        <line
+          {...lineCoordinates}
+          className='network-chart__link-hitbox'
+          stroke='transparent'
+          strokeWidth={Math.max(link.strokeWidth, 12)}
+          pointerEvents='stroke'
+        />
+        <line
+          {...lineCoordinates}
+          aria-hidden='true'
+          className={`network-chart__link${link.style === 'dashed' ? ' network-chart__link--dashed' : ''}`}
+          stroke={linkColor}
+          strokeWidth={link.strokeWidth}
+          markerEnd={network.directed ? `url(#${markerId})` : undefined}
+        />
+      </g>
+    )
+  }
+
+  const NodeComponent = ({ node }: { node: NetworkLayoutNode }) => {
+    const placement = labelsByNodeId.get(node.id)
+    const label = `${node.id}, ${node.connectionCount} connection${node.connectionCount === 1 ? '' : 's'}`
+    return (
+      <g
+        className='network-chart__node'
+        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={`network-chart__label network-chart__label--${placement.anchor}`}
+            x={placement.x}
+            y={placement.y}
+            textAnchor={placement.textAnchor}
+            dominantBaseline={placement.dominantBaseline}
+            fill='currentColor'
+          >
+            {node.id}
+          </text>
+        )}
+      </g>
+    )
+  }
+
+  return (
+    <div className='network-chart__container' style={{ height: chartHeight }}>
+      {renderedLinkStyles.length > 0 && (
+        <div className='network-chart__link-key' role='group' aria-label='Link styles'>
+          {renderedLinkStyles.map(style => (
+            <div className='network-chart__link-key-item' key={style}>
+              <svg aria-hidden='true' width='36' height='12' viewBox='0 0 36 12'>
+                <line
+                  className={`network-chart__link-key-line${style === 'dashed' ? ' network-chart__link--dashed' : ''}`}
+                  x1='1'
+                  x2='35'
+                  y1='6'
+                  y2='6'
+                  stroke={linkColor}
+                  strokeWidth='2'
+                />
+              </svg>
+              <span>{getLinkStyleLabel(style)}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className='network-chart__plot'>
+        {prepared.rejectedRowCount > 0 && (
+          <div className='network-chart__status' role='status'>
+            {prepared.rejectedRowCount} invalid row(s) excluded.
+          </div>
+        )}
+        <svg
+          className='network-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
+          }}
+        >
+          <defs>
+            <marker
+              id={markerId}
+              viewBox='0 0 10 10'
+              refX='10'
+              refY='5'
+              markerWidth='7'
+              markerHeight='7'
+              orient='auto-start-reverse'
+            >
+              <path d='M 0 0 L 10 5 L 0 10 z' fill={linkColor} />
+            </marker>
+          </defs>
+          <g className='network-chart__viewport' transform={viewTransform}>
+            <Graph<NetworkLayoutLink, NetworkLayoutNode>
+              graph={layout}
+              linkComponent={LinkComponent}
+              nodeComponent={NodeComponent}
+            />
+          </g>
+        </svg>
+        <div
+          className='network-chart__controls'
+          role='group'
+          aria-label='Network 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='network-chart__tooltip' />}
+      </div>
+    </div>
+  )
+}
+
+export default Network

package/src/components/Network/helpers/layoutNetwork.test.ts

@@ -0,0 +1,68 @@
+import { layoutNetwork } from './layoutNetwork'
+import { prepareNetworkData } from './prepareNetworkData'
+
+describe('layoutNetwork', () => {
+  const prepared = prepareNetworkData(
+    [
+      { source: 'A', target: 'B', weight: 1 },
+      { source: 'B', target: 'C', weight: 5 },
+      { source: 'C', target: 'A', weight: 10 }
+    ],
+    { source: 'source', target: 'target', weight: 'weight' }
+  )
+  const options = { width: 480, height: 320, nodeRadius: 8, linkDistance: 80, chargeStrength: -200 }
+
+  it('produces stable coordinates within responsive bounds', () => {
+    const first = layoutNetwork(prepared, options)
+    const second = layoutNetwork(prepared, options)
+
+    expect(second).toEqual(first)
+    first.nodes.forEach(node => {
+      expect(node.x).toBeGreaterThanOrEqual(80)
+      expect(node.x).toBeLessThanOrEqual(400)
+      expect(node.y).toBeGreaterThanOrEqual(20)
+      expect(node.y).toBeLessThanOrEqual(300)
+    })
+  })
+
+  it('scales weighted link widths within fixed bounds', () => {
+    const result = layoutNetwork(prepared, options)
+    expect(Math.min(...result.links.map(link => link.strokeWidth))).toBeGreaterThanOrEqual(1.5)
+    expect(Math.max(...result.links.map(link => link.strokeWidth))).toBeLessThanOrEqual(8)
+  })
+
+  it('clamps authored layout values at their supported minimums while allowing zero charge', () => {
+    const result = layoutNetwork(prepared, {
+      ...options,
+      nodeRadius: 0,
+      linkDistance: 0,
+      chargeStrength: 0
+    })
+
+    result.nodes.forEach(node => {
+      expect(node.x).toBeGreaterThanOrEqual(80)
+      expect(node.x).toBeLessThanOrEqual(400)
+    })
+    expect(result.links).toHaveLength(3)
+  })
+
+  it('keeps nodes in bounds when the authored radius exceeds the viewport', () => {
+    const result = layoutNetwork(prepared, { ...options, width: 160, height: 160, nodeRadius: 500 })
+
+    result.nodes.forEach(node => {
+      expect(node.x).toBeGreaterThanOrEqual(80)
+      expect(node.x).toBeLessThanOrEqual(80)
+      expect(node.y).toBeGreaterThanOrEqual(20)
+      expect(node.y).toBeLessThanOrEqual(140)
+    })
+  })
+
+  it('uses the exact plot height after the link-style key reserves outer chart space', () => {
+    const result = layoutNetwork(prepared, { ...options, height: 128 })
+
+    result.nodes.forEach(node => {
+      expect(node.y).toBeGreaterThanOrEqual(20)
+      expect(node.y).toBeLessThanOrEqual(108)
+    })
+  })
+})

package/src/components/Network/helpers/layoutNetwork.ts

@@ -0,0 +1,87 @@
+import { forceCenter, forceCollide, forceLink, forceManyBody, forceSimulation } from 'd3-force'
+import type { NetworkLayout, NetworkLayoutLink, NetworkLayoutNode, NetworkPreparedData } from '../types'
+
+type LayoutOptions = {
+  width: number
+  height: number
+  nodeRadius: number
+  linkDistance: number
+  chargeStrength: number
+}
+
+const seededRandom = () => {
+  let seed = 0x2f6e2b1
+  return () => {
+    seed = (Math.imul(1664525, seed) + 1013904223) >>> 0
+    return seed / 4294967296
+  }
+}
+
+export const resolveNetworkNodeRadius = (radius: number, width: number, height: number) => {
+  const parsedRadius = Number(radius)
+  const requestedRadius = Math.max(2, Number.isFinite(parsedRadius) ? parsedRadius : 8)
+  const maxRadius = Math.max(2, Math.min(width / 2 - 72, height / 2 - 12))
+  return Math.min(requestedRadius, maxRadius)
+}
+
+export const layoutNetwork = (prepared: NetworkPreparedData, options: LayoutOptions): NetworkLayout => {
+  const width = Math.max(160, Number(options.width) || 640)
+  // The outer chart enforces its 160px minimum before reserving space for the link-style key.
+  const height = Math.max(1, Number(options.height) || 500)
+  const radius = resolveNetworkNodeRadius(options.nodeRadius, width, height)
+  const horizontalPadding = radius + 72
+  const verticalPadding = radius + 12
+  const usableWidth = Math.max(1, width - horizontalPadding * 2)
+  const usableHeight = Math.max(1, height - verticalPadding * 2)
+  const nodes: NetworkLayoutNode[] = prepared.nodes.map((node, index) => {
+    const angle = (Math.PI * 2 * index) / Math.max(prepared.nodes.length, 1) - Math.PI / 2
+    return {
+      ...node,
+      x: width / 2 + Math.cos(angle) * usableWidth * 0.32,
+      y: height / 2 + Math.sin(angle) * usableHeight * 0.32
+    }
+  })
+  const links = prepared.links.map(link => ({ ...link })) as unknown as NetworkLayoutLink[]
+
+  if (nodes.length) {
+    const simulation = forceSimulation(nodes)
+      .randomSource(seededRandom())
+      .force(
+        'link',
+        forceLink<NetworkLayoutNode, NetworkLayoutLink>(links)
+          .id(node => node.id)
+          .distance(Math.max(20, Number.isFinite(Number(options.linkDistance)) ? Number(options.linkDistance) : 90))
+      )
+      .force(
+        'charge',
+        forceManyBody().strength(
+          Number.isFinite(Number(options.chargeStrength)) ? Number(options.chargeStrength) : -240
+        )
+      )
+      .force('center', forceCenter(width / 2, height / 2))
+      .force('collide', forceCollide(radius + 5))
+      .stop()
+
+    for (let tick = 0; tick < 300; tick += 1) simulation.tick()
+    simulation.stop()
+  }
+
+  nodes.forEach(node => {
+    const x = Number(node.x)
+    const y = Number(node.y)
+    node.x = Math.min(width - horizontalPadding, Math.max(horizontalPadding, Number.isFinite(x) ? x : width / 2))
+    node.y = Math.min(height - verticalPadding, Math.max(verticalPadding, Number.isFinite(y) ? y : height / 2))
+  })
+
+  const weights = prepared.links.map(link => link.weight)
+  const minWeight = Math.min(...weights)
+  const maxWeight = Math.max(...weights)
+  const getStrokeWidth = (weight: number) =>
+    !prepared.hasWeights || minWeight === maxWeight ? 2 : 1.5 + ((weight - minWeight) / (maxWeight - minWeight)) * 6.5
+
+  links.forEach(link => {
+    link.strokeWidth = getStrokeWidth(link.weight)
+  })
+
+  return { nodes, links }
+}

package/src/components/Network/helpers/prepareNetworkData.test.ts

@@ -0,0 +1,116 @@
+import { prepareNetworkData } from './prepareNetworkData'
+
+describe('prepareNetworkData', () => {
+  it('aggregates duplicates and reverse pairs for an undirected network', () => {
+    const result = prepareNetworkData(
+      [
+        { from: 'A', to: 'B', amount: '1,200' },
+        { from: 'B', to: 'A', amount: 300 }
+      ],
+      { source: 'from', target: 'to', weight: 'amount' }
+    )
+
+    expect(result.links).toEqual([expect.objectContaining({ source: 'A', target: 'B', weight: 1500, rowCount: 2 })])
+    expect(result.nodes).toEqual([
+      { id: 'A', connectionCount: 1 },
+      { id: 'B', connectionCount: 1 }
+    ])
+  })
+
+  it('keeps reverse pairs distinct for a directed network', () => {
+    const result = prepareNetworkData(
+      [
+        { source: 'A', target: 'B' },
+        { source: 'B', target: 'A' }
+      ],
+      { source: 'source', target: 'target' },
+      true
+    )
+
+    expect(result.links).toHaveLength(2)
+  })
+
+  it('maps per-row link styles and lets dashed win when duplicate links aggregate', () => {
+    const result = prepareNetworkData(
+      [
+        { source: 'A', target: 'B', style: 'solid' },
+        { source: 'B', target: 'A', style: 'DASHED' },
+        { source: 'B', target: 'C', style: 'unknown' }
+      ],
+      { source: 'source', target: 'target', style: 'style' }
+    )
+
+    expect(result.links).toEqual([
+      expect.objectContaining({ source: 'A', target: 'B', style: 'dashed', weight: 2, rowCount: 2 }),
+      expect.objectContaining({ source: 'B', target: 'C', style: 'solid' })
+    ])
+  })
+
+  it('maps source-node colors and keeps the first valid color assigned to a node', () => {
+    const result = prepareNetworkData(
+      [
+        { source: 'A', target: 'B', nodeColor: '#005eaa' },
+        { source: 'B', target: 'C', nodeColor: '#4b830d' },
+        { source: 'B', target: 'D', nodeColor: '#712177' },
+        { source: 'C', target: 'D', nodeColor: 'not-a-color' }
+      ],
+      {
+        source: 'source',
+        target: 'target',
+        nodeColor: 'nodeColor'
+      }
+    )
+
+    expect(result.nodes).toEqual([
+      { id: 'A', connectionCount: 1, color: '#005eaa' },
+      { id: 'B', connectionCount: 3, color: '#4b830d' },
+      { id: 'C', connectionCount: 2 },
+      { id: 'D', connectionCount: 2 }
+    ])
+  })
+
+  it('rejects blank endpoints, self-links, and invalid selected weights', () => {
+    const result = prepareNetworkData(
+      [
+        { source: '', target: 'B', weight: 1 },
+        { source: 'A', target: 'A', weight: 1 },
+        { source: 'A', target: 'B', weight: 0 },
+        { source: 'B', target: 'C', weight: 2 }
+      ],
+      { source: 'source', target: 'target', weight: 'weight' }
+    )
+
+    expect(result.rejectedRowCount).toBe(3)
+    expect(result.links).toHaveLength(1)
+  })
+
+  it('counts malformed rows and rejects non-scalar endpoints and malformed comma weights', () => {
+    const result = prepareNetworkData(
+      [
+        null,
+        'not-a-row',
+        ['A', 'B'],
+        { source: { id: 'A' }, target: 'B', weight: 1 },
+        { source: 'A', target: 'B', weight: '12,34' },
+        { source: 'A', target: 'B', weight: '1,234.5' }
+      ],
+      { source: 'source', target: 'target', weight: 'weight' }
+    )
+
+    expect(result.rejectedRowCount).toBe(5)
+    expect(result.links).toEqual([expect.objectContaining({ source: 'A', target: 'B', weight: 1234.5 })])
+  })
+
+  it('keeps endpoint pairs distinct when labels contain delimiter characters', () => {
+    const result = prepareNetworkData(
+      [
+        { source: 'A\u0000B', target: 'C' },
+        { source: 'A', target: 'B\u0000C' }
+      ],
+      { source: 'source', target: 'target' },
+      true
+    )
+
+    expect(result.links).toHaveLength(2)
+  })
+})