@opendata-ai/openchart-engine 8.0.0-rc.12 → 8.0.0-rc.3

package/src/graphs/compile-graph.ts

@@ -0,0 +1,329 @@
+/**
+ * Graph compilation pipeline.
+ *
+ * Takes a raw graph spec (unknown shape), validates, normalizes, resolves
+ * encoding channels to visual properties, assigns communities, builds
+ * legend/tooltips/a11y, and returns a GraphCompilation.
+ *
+ * The pipeline mirrors compileChart's structure:
+ *   validate -> normalize -> resolve theme -> resolve visuals ->
+ *   community assignment -> legend -> tooltips -> a11y -> return
+ *
+ * Key difference from charts: the output does NOT include x/y positions.
+ * The force simulation in the adapter handles layout at runtime.
+ */
+
+import type {
+  CompileOptions,
+  LegendEntry,
+  LegendLayout,
+  ResolvedTheme,
+  TextStyle,
+  TooltipContent,
+  TooltipField,
+} from '@opendata-ai/openchart-core';
+import {
+  adaptTheme,
+  computeChrome,
+  defaultNumberFormatter,
+  resolveTheme,
+} from '@opendata-ai/openchart-core';
+import { emitSpecWarnings } from '../compile/spec-sugar';
+import { compile as compileSpec } from '../compiler/index';
+import type { NormalizedGraphSpec } from '../compiler/types';
+import { applyCommunityColors, assignCommunities, buildCommunityColorMap } from './community';
+import { resolveEdgeVisuals, resolveNodeVisuals } from './encoding';
+import type { CompiledGraphNode, GraphCompilation, SimulationConfig } from './types';
+
+const graphNumberFormatter = defaultNumberFormatter({ allIntegers: false, surface: 'chart' });
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const SWATCH_SIZE = 12;
+const SWATCH_GAP = 6;
+const ENTRY_GAP = 16;
+
+// ---------------------------------------------------------------------------
+// Legend builder
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a legend from community assignments or nodeColor encoding.
+ *
+ * Built manually instead of reusing computeLegend (which assumes chart
+ * encoding channels). Returns entries with color swatches and labels.
+ * Position is placeholder (adapter determines actual placement).
+ */
+function buildGraphLegend(
+  nodes: CompiledGraphNode[],
+  communityColorMap: Map<string, string>,
+  hasCommunities: boolean,
+  theme: ResolvedTheme,
+  nodeColorField?: string,
+): LegendLayout {
+  const labelStyle: TextStyle = {
+    fontFamily: theme.fonts.family,
+    fontSize: theme.fonts.sizes.small,
+    fontWeight: theme.fonts.weights.normal,
+    fill: theme.colors.text,
+    lineHeight: 1.3,
+  };
+
+  let entries: LegendEntry[];
+
+  if (hasCommunities && communityColorMap.size > 0) {
+    // One entry per community
+    entries = [...communityColorMap.entries()].map(([label, color]) => ({
+      label,
+      color,
+      shape: 'circle' as const,
+      active: true,
+    }));
+  } else if (nodeColorField) {
+    // Build legend from nodeColor encoding: group by the color field value
+    // so each legend entry shows the categorical value (e.g. "Dataset", "bls")
+    // rather than an arbitrary node label.
+    const categoryColors = new Map<string, string>();
+    for (const node of nodes) {
+      const category = String(node.data[nodeColorField] ?? node.label ?? node.id);
+      if (!categoryColors.has(category)) {
+        categoryColors.set(category, node.fill);
+      }
+    }
+
+    // Only show legend if there are multiple categories
+    entries =
+      categoryColors.size <= 1
+        ? []
+        : [...categoryColors.entries()].map(([label, color]) => ({
+            label,
+            color,
+            shape: 'circle' as const,
+            active: true,
+          }));
+  } else {
+    // No communities and no color encoding: every node shares one fill, so a
+    // legend would just list every node label against identical swatches.
+    entries = [];
+  }
+
+  return {
+    position: 'top',
+    entries,
+    bounds: { x: 0, y: 0, width: 0, height: 0 },
+    labelStyle,
+    swatchSize: SWATCH_SIZE,
+    swatchGap: SWATCH_GAP,
+    entryGap: ENTRY_GAP,
+    swatchChipFill: theme.colors.annotationFill,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Tooltip builder
+// ---------------------------------------------------------------------------
+
+/**
+ * Build tooltip descriptors for each node.
+ *
+ * Keyed by node id. Shows all data fields, label, and community.
+ */
+function buildGraphTooltips(nodes: CompiledGraphNode[]): Map<string, TooltipContent> {
+  const descriptors = new Map<string, TooltipContent>();
+
+  for (const node of nodes) {
+    const fields: TooltipField[] = [];
+
+    // Add community if present
+    if (node.community != null) {
+      fields.push({
+        label: 'Community',
+        value: node.community,
+        color: node.fill,
+      });
+    }
+
+    // Add all data fields (excluding id since it's the title)
+    for (const [key, value] of Object.entries(node.data)) {
+      if (key === 'id') continue;
+      if (value == null) continue;
+
+      fields.push({
+        label: key,
+        value: typeof value === 'number' ? graphNumberFormatter(value) : String(value),
+      });
+    }
+
+    descriptors.set(node.id, {
+      title: node.label ?? node.id,
+      fields,
+    });
+  }
+
+  return descriptors;
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Compile a graph spec into a GraphCompilation.
+ *
+ * Pipeline:
+ * 1. Validate + normalize via the shared compiler pipeline
+ * 2. Resolve theme (merge spec + options, apply dark mode)
+ * 3. Resolve node visuals (size, color, label, stroke)
+ * 4. Assign communities if layout.clustering is set
+ * 5. Apply community colors (override nodeColor)
+ * 6. Resolve edge visuals (width, color)
+ * 7. Build legend from communities or nodeColor
+ * 8. Build tooltip descriptors for each node
+ * 9. Build a11y metadata
+ * 10. Build simulation config from spec layout
+ * 11. Build chrome from spec + theme
+ * 12. Return GraphCompilation
+ *
+ * @param spec - Raw graph spec (validated at runtime).
+ * @param options - Compile options (width, height, theme, darkMode).
+ * @returns GraphCompilation with resolved visual properties.
+ * @throws Error if spec is invalid or not a graph type.
+ */
+export function compileGraph(spec: unknown, options: CompileOptions): GraphCompilation {
+  // 1. Validate + normalize
+  const { spec: normalized, warnings } = compileSpec(spec);
+  emitSpecWarnings(warnings, options.onWarn);
+
+  if (!('type' in normalized) || normalized.type !== 'graph') {
+    throw new Error(
+      'compileGraph received a non-graph spec. Use compileChart or compileTable instead.',
+    );
+  }
+
+  const graphSpec = normalized as NormalizedGraphSpec;
+
+  // Resolve watermark: explicit spec value wins, then options fallback, then default true.
+  const rawWatermark = (spec as Record<string, unknown>).watermark;
+  const watermark = rawWatermark !== undefined ? graphSpec.watermark : (options.watermark ?? true);
+
+  // 2. Resolve theme
+  const mergedThemeConfig = options.theme
+    ? { ...graphSpec.theme, ...options.theme }
+    : graphSpec.theme;
+  let theme: ResolvedTheme = resolveTheme(mergedThemeConfig);
+  if (options.darkMode) {
+    theme = adaptTheme(theme);
+  }
+
+  // 3. Resolve node visuals
+  const compiledNodes = resolveNodeVisuals(
+    graphSpec.nodes,
+    graphSpec.encoding,
+    graphSpec.edges,
+    theme,
+    graphSpec.nodeOverrides,
+  );
+
+  // 4. Assign communities (for force simulation grouping)
+  const clusteringField = graphSpec.layout.clustering?.field;
+  const hasCommunities = !!clusteringField;
+  assignCommunities(compiledNodes, clusteringField);
+
+  // 5. Apply community colors only when no explicit nodeColor encoding is set.
+  // When the consumer specifies nodeColor (e.g. by nodeType or provider), that
+  // encoding should drive both fill colors and legend entries.
+  const hasNodeColorEncoding = !!graphSpec.encoding.nodeColor?.field;
+  let communityColorMap = new Map<string, string>();
+  if (hasCommunities && !hasNodeColorEncoding) {
+    communityColorMap = buildCommunityColorMap(compiledNodes, theme);
+    applyCommunityColors(compiledNodes, communityColorMap);
+  }
+
+  // 6. Resolve edge visuals
+  const compiledEdges = resolveEdgeVisuals(graphSpec.edges, graphSpec.encoding, theme);
+
+  // 7. Build legend (use nodeColor encoding colors when present, community otherwise)
+  const useCommunitiesForLegend = hasCommunities && !hasNodeColorEncoding;
+  const legend = buildGraphLegend(
+    compiledNodes,
+    communityColorMap,
+    useCommunitiesForLegend,
+    theme,
+    graphSpec.encoding.nodeColor?.field,
+  );
+
+  // 8. Build tooltips
+  const tooltipDescriptors = buildGraphTooltips(compiledNodes);
+
+  // 9. Build a11y metadata
+  const communityCount = communityColorMap.size;
+  const altParts = [
+    `Network graph with ${compiledNodes.length} nodes and ${compiledEdges.length} edges`,
+  ];
+  if (communityCount > 0) {
+    altParts.push(`organized into ${communityCount} communities`);
+  }
+  const a11y = {
+    altText: altParts.join(', '),
+    dataTableFallback: compiledNodes.map((n) => [n.id, n.community ?? '', n.label ?? '']),
+    role: 'img',
+    keyboardNavigable: compiledNodes.length > 0,
+  };
+
+  // 10. Build simulation config
+  const collisionPadding = graphSpec.layout.collisionPadding ?? 2;
+  const maxRadius =
+    compiledNodes.length > 0
+      ? Math.max(...compiledNodes.map((n) => n.radius))
+      : DEFAULT_COLLISION_PADDING;
+  const simulationConfig: SimulationConfig = {
+    chargeStrength: graphSpec.layout.chargeStrength ?? -300,
+    linkDistance: graphSpec.layout.linkDistance ?? 30,
+    clustering: clusteringField ? { field: clusteringField, strength: 0.5 } : null,
+    alphaDecay: 0.0228,
+    velocityDecay: 0.4,
+    collisionRadius: maxRadius + collisionPadding,
+    collisionPadding,
+    linkStrength: graphSpec.layout.linkStrength,
+    centerForce: graphSpec.layout.centerForce,
+  };
+
+  // 11. Build chrome
+  const chrome = computeChrome(
+    {
+      title: graphSpec.chrome.title,
+      subtitle: graphSpec.chrome.subtitle,
+      source: graphSpec.chrome.source,
+      byline: graphSpec.chrome.byline,
+      footer: graphSpec.chrome.footer,
+    },
+    theme,
+    options.width,
+    options.measureText,
+    'full',
+    undefined,
+    watermark,
+  );
+
+  // 12. Return compilation
+  return {
+    nodes: compiledNodes,
+    edges: compiledEdges,
+    legend,
+    chrome,
+    tooltipDescriptors,
+    a11y,
+    theme,
+    dimensions: {
+      width: options.width,
+      height: options.height,
+    },
+    simulationConfig,
+    watermark,
+  };
+}
+
+/** Default padding for collision radius when there are no nodes. */
+const DEFAULT_COLLISION_PADDING = 5;

package/src/graphs/encoding.ts

@@ -0,0 +1,356 @@
+/**
+ * Graph encoding resolution.
+ *
+ * Maps graph encoding channels (nodeSize, nodeColor, edgeWidth, edgeColor,
+ * nodeLabel) to computed visual properties on nodes and edges. Uses d3 scales
+ * the same way scatter/bubble charts do: scaleSqrt for size, scaleOrdinal
+ * for categorical color, scaleLinear for quantitative color.
+ */
+
+import type {
+  GraphEdge,
+  GraphEncoding,
+  GraphNode,
+  NodeOverride,
+  ResolvedTheme,
+} from '@opendata-ai/openchart-core';
+import { max, min } from 'd3-array';
+import { scaleLinear, scaleOrdinal, scaleSqrt } from 'd3-scale';
+
+import type { CompiledGraphEdge, CompiledGraphNode } from './types';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const DEFAULT_NODE_RADIUS = 5;
+const MIN_NODE_RADIUS = 3;
+const MAX_NODE_RADIUS = 12;
+
+const DEFAULT_EDGE_WIDTH = 1;
+const MIN_EDGE_WIDTH = 0.5;
+const MAX_EDGE_WIDTH = 4;
+
+const DEFAULT_STROKE_WIDTH = 1;
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Darken a hex color by a percentage.
+ *
+ * Doesn't use d3-color (engine doesn't depend on it). Operates directly
+ * on hex RGB channels. Falls back to the original color on parse failure.
+ */
+export function darkenColor(hex: string, amount: number = 0.2): string {
+  // Strip # prefix
+  const clean = hex.replace(/^#/, '');
+  if (clean.length !== 6 && clean.length !== 3) return hex;
+
+  // Expand shorthand
+  const full =
+    clean.length === 3
+      ? clean
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : clean;
+
+  const r = Math.max(0, Math.round(parseInt(full.substring(0, 2), 16) * (1 - amount)));
+  const g = Math.max(0, Math.round(parseInt(full.substring(2, 4), 16) * (1 - amount)));
+  const b = Math.max(0, Math.round(parseInt(full.substring(4, 6), 16) * (1 - amount)));
+
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+
+/**
+ * Apply opacity to a hex color, returning an rgba string.
+ */
+function hexWithOpacity(hex: string, opacity: number): string {
+  const clean = hex.replace(/^#/, '');
+  if (clean.length !== 6 && clean.length !== 3) {
+    // Non-hex input: return as-is with opacity via CSS
+    return hex;
+  }
+
+  const full =
+    clean.length === 3
+      ? clean
+          .split('')
+          .map((c) => c + c)
+          .join('')
+      : clean;
+
+  const r = parseInt(full.substring(0, 2), 16);
+  const g = parseInt(full.substring(2, 4), 16);
+  const b = parseInt(full.substring(4, 6), 16);
+
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+
+/**
+ * Compute the degree of each node (number of edges touching it).
+ */
+function computeDegrees(nodes: GraphNode[], edges: GraphEdge[]): Map<string, number> {
+  const degrees = new Map<string, number>();
+  for (const node of nodes) {
+    degrees.set(node.id, 0);
+  }
+  for (const edge of edges) {
+    degrees.set(edge.source, (degrees.get(edge.source) ?? 0) + 1);
+    degrees.set(edge.target, (degrees.get(edge.target) ?? 0) + 1);
+  }
+  return degrees;
+}
+
+// ---------------------------------------------------------------------------
+// Node visual resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve visual properties for all graph nodes.
+ *
+ * Applies nodeSize, nodeColor, and nodeLabel encoding channels from the
+ * spec to produce CompiledGraphNode objects with computed fill, radius,
+ * stroke, label, and label priority.
+ */
+export function resolveNodeVisuals(
+  nodes: GraphNode[],
+  encoding: GraphEncoding,
+  edges: GraphEdge[],
+  theme: ResolvedTheme,
+  nodeOverrides?: Record<string, NodeOverride>,
+): CompiledGraphNode[] {
+  const degrees = computeDegrees(nodes, edges);
+  const maxDegree = Math.max(1, ...degrees.values());
+
+  // Build node size scale
+  let sizeScale: ((v: number) => number) | undefined;
+  if (encoding.nodeSize?.field) {
+    const field = encoding.nodeSize.field;
+    const values = nodes.map((n) => Number(n[field])).filter((v) => Number.isFinite(v));
+
+    const sizeMin = min(values) ?? 0;
+    const sizeMax = max(values) ?? 1;
+
+    sizeScale = scaleSqrt().domain([sizeMin, sizeMax]).range([MIN_NODE_RADIUS, MAX_NODE_RADIUS]);
+  }
+
+  // Build node color scale
+  let colorFn: ((node: GraphNode) => string) | undefined;
+  if (encoding.nodeColor?.field) {
+    const field = encoding.nodeColor.field;
+    const fieldType = encoding.nodeColor.type ?? 'nominal';
+    const scaleConfig = encoding.nodeColor.scale;
+
+    if (fieldType === 'quantitative') {
+      const values = nodes.map((n) => Number(n[field])).filter((v) => Number.isFinite(v));
+      const colorMin = min(values) ?? 0;
+      const colorMax = max(values) ?? 1;
+
+      // Use first sequential palette
+      const seqPalettes = Object.values(theme.colors.sequential);
+      const palette = seqPalettes.length > 0 ? seqPalettes[0] : ['#ccc', '#333'];
+
+      const domain =
+        scaleConfig?.domain && scaleConfig.domain.length === 2
+          ? (scaleConfig.domain as [number, number])
+          : [colorMin, colorMax];
+      const range =
+        scaleConfig?.range && scaleConfig.range.length >= 2
+          ? (scaleConfig.range as string[])
+          : [palette[0], palette[palette.length - 1]];
+
+      const colorScale = scaleLinear<string>().domain(domain).range(range);
+
+      colorFn = (node: GraphNode) => {
+        const val = Number(node[field]);
+        return Number.isFinite(val) ? colorScale(val) : theme.colors.categorical[0];
+      };
+    } else {
+      // nominal/ordinal
+      const domain =
+        scaleConfig?.domain && Array.isArray(scaleConfig.domain)
+          ? (scaleConfig.domain as string[])
+          : [...new Set(nodes.map((n) => String(n[field] ?? '')))];
+      const range =
+        scaleConfig?.range && scaleConfig.range.length > 0
+          ? (scaleConfig.range as string[])
+          : theme.colors.categorical;
+
+      const ordinalScale = scaleOrdinal<string>().domain(domain).range(range);
+
+      colorFn = (node: GraphNode) => ordinalScale(String(node[field] ?? ''));
+    }
+  }
+
+  const defaultColor = theme.colors.categorical[0];
+
+  return nodes.map((node) => {
+    // Radius
+    let radius = DEFAULT_NODE_RADIUS;
+    if (sizeScale && encoding.nodeSize?.field) {
+      const val = Number(node[encoding.nodeSize.field]);
+      if (Number.isFinite(val)) {
+        radius = sizeScale(val);
+      }
+    }
+
+    // Color
+    const fill = colorFn ? colorFn(node) : defaultColor;
+
+    // Stroke: darken fill by 20%
+    const stroke = darkenColor(fill);
+
+    // Label
+    let label: string | undefined;
+    if (encoding.nodeLabel?.field) {
+      const labelVal = node[encoding.nodeLabel.field];
+      label = labelVal != null ? String(labelVal) : undefined;
+    } else {
+      label = node.id;
+    }
+
+    // Label priority: degree / maxDegree (0 to 1)
+    const degree = degrees.get(node.id) ?? 0;
+    const labelPriority = maxDegree > 0 ? degree / maxDegree : 0;
+
+    // Data: spread all original node fields
+    const { id: _id, ...rest } = node;
+    const data: Record<string, unknown> = { id: node.id, ...rest };
+
+    // Apply per-node overrides if present
+    const override = nodeOverrides?.[node.id];
+    const finalFill = override?.fill ?? fill;
+    const finalRadius = override?.radius ?? radius;
+    const finalStrokeWidth = override?.strokeWidth ?? DEFAULT_STROKE_WIDTH;
+    const finalStroke = override?.stroke ?? stroke;
+    const finalLabelPriority = override?.alwaysShowLabel ? Infinity : labelPriority;
+
+    return {
+      id: node.id,
+      radius: finalRadius,
+      fill: finalFill,
+      stroke: finalStroke,
+      strokeWidth: finalStrokeWidth,
+      label,
+      labelPriority: finalLabelPriority,
+      community: undefined,
+      data,
+    };
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Edge visual resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve visual properties for all graph edges.
+ *
+ * Applies edgeWidth and edgeColor encoding channels to produce
+ * CompiledGraphEdge objects with computed stroke, strokeWidth, and style.
+ */
+export function resolveEdgeVisuals(
+  edges: GraphEdge[],
+  encoding: GraphEncoding,
+  theme: ResolvedTheme,
+): CompiledGraphEdge[] {
+  // Edge width scale
+  let widthScale: ((v: number) => number) | undefined;
+  if (encoding.edgeWidth?.field) {
+    const field = encoding.edgeWidth.field;
+    const values = edges.map((e) => Number(e[field])).filter((v) => Number.isFinite(v));
+
+    const widthMin = min(values) ?? 0;
+    const widthMax = max(values) ?? 1;
+
+    widthScale = scaleLinear().domain([widthMin, widthMax]).range([MIN_EDGE_WIDTH, MAX_EDGE_WIDTH]);
+  }
+
+  // Edge color scale
+  let edgeColorFn: ((edge: GraphEdge) => string) | undefined;
+  if (encoding.edgeColor?.field) {
+    const field = encoding.edgeColor.field;
+    const fieldType = encoding.edgeColor.type ?? 'nominal';
+    const scaleConfig = encoding.edgeColor.scale;
+
+    if (fieldType === 'quantitative') {
+      const values = edges.map((e) => Number(e[field])).filter((v) => Number.isFinite(v));
+      const colorMin = min(values) ?? 0;
+      const colorMax = max(values) ?? 1;
+
+      const seqPalettes = Object.values(theme.colors.sequential);
+      const palette = seqPalettes.length > 0 ? seqPalettes[0] : ['#ccc', '#333'];
+
+      const domain =
+        scaleConfig?.domain && scaleConfig.domain.length === 2
+          ? (scaleConfig.domain as [number, number])
+          : [colorMin, colorMax];
+      const range =
+        scaleConfig?.range && scaleConfig.range.length >= 2
+          ? (scaleConfig.range as string[])
+          : [palette[0], palette[palette.length - 1]];
+
+      const colorScale = scaleLinear<string>().domain(domain).range(range);
+
+      edgeColorFn = (edge: GraphEdge) => {
+        const val = Number(edge[field]);
+        return Number.isFinite(val) ? colorScale(val) : hexWithOpacity(theme.colors.axis, 0.4);
+      };
+    } else {
+      const domain =
+        scaleConfig?.domain && Array.isArray(scaleConfig.domain)
+          ? (scaleConfig.domain as string[])
+          : [...new Set(edges.map((e) => String(e[field] ?? '')))];
+      const range =
+        scaleConfig?.range && scaleConfig.range.length > 0
+          ? (scaleConfig.range as string[])
+          : theme.colors.categorical;
+
+      const ordinalScale = scaleOrdinal<string>().domain(domain).range(range);
+
+      edgeColorFn = (edge: GraphEdge) => ordinalScale(String(edge[field] ?? ''));
+    }
+  }
+
+  const defaultEdgeColor = hexWithOpacity(theme.colors.axis, 0.4);
+
+  // Edge style mapping (ordinal: map unique field values to solid/dashed/dotted)
+  const EDGE_STYLES: Array<'solid' | 'dashed' | 'dotted'> = ['solid', 'dashed', 'dotted'];
+  let styleFn: ((edge: GraphEdge) => 'solid' | 'dashed' | 'dotted') | undefined;
+  if (encoding.edgeStyle?.field) {
+    const field = encoding.edgeStyle.field;
+    const uniqueValues = [...new Set(edges.map((e) => String(e[field] ?? '')))];
+    const styleMap = new Map<string, 'solid' | 'dashed' | 'dotted'>();
+    for (let i = 0; i < uniqueValues.length; i++) {
+      styleMap.set(uniqueValues[i], EDGE_STYLES[i % EDGE_STYLES.length]);
+    }
+    styleFn = (edge: GraphEdge) => styleMap.get(String(edge[field] ?? '')) ?? 'solid';
+  }
+
+  return edges.map((edge) => {
+    const { source, target, ...rest } = edge;
+
+    let strokeWidth = DEFAULT_EDGE_WIDTH;
+    if (widthScale && encoding.edgeWidth?.field) {
+      const val = Number(edge[encoding.edgeWidth.field]);
+      if (Number.isFinite(val)) {
+        strokeWidth = widthScale(val);
+      }
+    }
+
+    const stroke = edgeColorFn ? edgeColorFn(edge) : defaultEdgeColor;
+    const style = styleFn ? styleFn(edge) : ('solid' as const);
+
+    return {
+      source,
+      target,
+      stroke,
+      strokeWidth,
+      style,
+      data: { source, target, ...rest } as Record<string, unknown>,
+    };
+  });
+}