@elabs-ai/components-process 4.1.0 → 5.0.0

package/src/process-kpi-strip/process-kpi-strip.tsx

@@ -33,13 +33,15 @@
  * identical line height without showing misleading or duplicated copy to a sighted or
  * screen-reader user.
  */
-import { type HTMLAttributes } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import { CircleSlash2 } from "lucide-react";
-import { MetricCard, type LocaleContextValue } from "@elabs-ai/components-ui";
+import { MetricCard, Skeleton, type LocaleContextValue } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { useLocale } from "@elabs-ai/components-ui";
 import { MetricGrid } from "@elabs-ai/components-charts";
 import { Sparkline } from "@elabs-ai/components-charts";
 import { formatDurationMs } from "../process-map/map-model";
+import type { ConformanceRatePoint, ConformanceResult } from "../core/conformance";
 
 export interface ProcessKpiStripKpis {
   cases: number;
@@ -53,11 +55,34 @@ export type ProcessKpiStripTrendKey = keyof ProcessKpiStripKpis | "conformance";
 
 export interface ProcessKpiStripProps extends HTMLAttributes<HTMLDivElement> {
   kpis: ProcessKpiStripKpis;
-  /** `0..1`, or `null`/`undefined` when no conformance model has been fitted. */
-  conformance?: number | null;
+  /**
+   * `0..1`, a replay result (RM-061's `tokenReplay`, whose `overallFitness` the tile
+   * prints — RM-062), or `null`/`undefined` when no conformance model has been fitted.
+   */
+  conformance?: number | ConformanceResult | null;
   /** Optional per-tile trend series (oldest -> newest), keyed by KPI. */
   trends?: Partial<Record<ProcessKpiStripTrendKey, number[]>>;
+  /**
+   * Conformance rate over time (`conformanceRateSeries`), plotted as the conformance
+   * tile's sparkline — the rate-over-time reading (RM-062). Takes precedence over
+   * `trends.conformance`.
+   */
+  conformanceSeries?: ConformanceRatePoint[];
   loading?: boolean;
+  /**
+   * How the six numbers are laid out. `"grid"` (default) is the card grid a dashboard page
+   * opens with. `"inline"` is one dense ribbon — label, value and sparkline per cell, divided
+   * by hairlines, scrolling sideways when it runs out of room — for a workspace whose height
+   * belongs to the process map, not to its KPIs. Same numbers, same formats, same sparkline
+   * text alternatives in both.
+   */
+  layout?: "grid" | "inline";
+}
+
+/** The tile's fraction: a number as given, a replay result's `overallFitness`. */
+function conformanceFraction(conformance: number | ConformanceResult | null | undefined) {
+  if (conformance === null || conformance === undefined) return undefined;
+  return typeof conformance === "number" ? conformance : conformance.overallFitness;
 }
 
 /** How a trend's two endpoints are formatted — mirrors each tile's own headline format. */
@@ -106,6 +131,7 @@ function trendVisual(
   format: TrendValueFormat,
   t: LocaleContextValue["t"],
   formatNumber: LocaleContextValue["formatNumber"],
+  size?: { width: number; height: number },
 ) {
   if (!values || values.length === 0) return undefined;
   const first = values[0]!;
@@ -117,22 +143,136 @@ function trendVisual(
     first: formatTrendValue(formatNumber, first, format),
     last: formatTrendValue(formatNumber, last, format),
   });
-  return <Sparkline values={values} label={label} />;
+  return <Sparkline values={values} label={label} {...size} />;
+}
+
+/** One cell of the `layout="inline"` ribbon. */
+function InlineKpi({
+  label,
+  value,
+  visual,
+  loading,
+}: {
+  label: string;
+  value: ReactNode;
+  visual?: ReactNode;
+  loading: boolean;
+}) {
+  return (
+    // A `div` inside a `<dl>` may hold nothing but `dt`/`dd` — so the cell is
+    // exactly those two, and the trend rides INSIDE the `dd` beside the number
+    // rather than as a third sibling.
+    <div data-slot="process-kpi-strip-cell" className="flex flex-1 flex-col px-4 py-2">
+      <dt className="text-meta whitespace-nowrap text-muted-foreground">{label}</dt>
+      <dd className="flex items-center justify-between gap-3">
+        <span className="text-subtitle font-semibold tabular-nums whitespace-nowrap">
+          {loading ? <Skeleton className="mt-1 h-5 w-14" /> : value}
+        </span>
+        {/* The trend is the first thing to go when the ribbon is short of room; the number stays. */}
+        {!loading && visual ? (
+          <span className="hidden shrink-0 text-muted-foreground @4xl:block">{visual}</span>
+        ) : null}
+      </dd>
+    </div>
+  );
 }
 
 export function ProcessKpiStrip({
   kpis,
   conformance,
   trends,
+  conformanceSeries,
   loading = false,
+  layout = "grid",
   className,
   ...props
 }: ProcessKpiStripProps) {
   const { t, formatNumber } = useLocale();
 
-  const hasConformance = conformance !== null && conformance !== undefined;
+  const fraction = conformanceFraction(conformance);
+  const hasConformance = fraction !== undefined;
+  const conformanceTrend = conformanceSeries
+    ? conformanceSeries.map((point) => point.fitness)
+    : trends?.conformance;
   const conformanceHint = t("process.kpiStrip.conformanceUnavailableHint");
 
+  if (layout === "inline") {
+    const percent = (value: number) =>
+      formatNumber(value, { style: "percent", maximumFractionDigits: 1 });
+    const spark = (values: number[] | undefined, subject: string, format: TrendValueFormat) =>
+      trendVisual(values, subject, format, t, formatNumber, { width: 64, height: 24 });
+    return (
+      <div
+        data-slot="process-kpi-strip"
+        data-layout="inline"
+        role={loading ? "status" : undefined}
+        aria-busy={loading || undefined}
+        className={cn("@container overflow-x-auto", className)}
+        {...props}
+      >
+        <dl className="flex min-w-max divide-x divide-border">
+          <InlineKpi
+            label={t("process.kpiStrip.cases")}
+            value={formatNumber(kpis.cases)}
+            visual={spark(trends?.cases, t("process.kpiStrip.cases"), "count")}
+            loading={loading}
+          />
+          <InlineKpi
+            label={t("process.kpiStrip.events")}
+            value={formatNumber(kpis.events)}
+            visual={spark(trends?.events, t("process.kpiStrip.events"), "count")}
+            loading={loading}
+          />
+          <InlineKpi
+            label={t("process.kpiStrip.variants")}
+            value={formatNumber(kpis.variants)}
+            visual={spark(trends?.variants, t("process.kpiStrip.variants"), "count")}
+            loading={loading}
+          />
+          <InlineKpi
+            label={t("process.kpiStrip.medianThroughput")}
+            value={formatDurationMs(kpis.medianThroughput)}
+            visual={spark(
+              trends?.medianThroughput,
+              t("process.kpiStrip.medianThroughput"),
+              "duration",
+            )}
+            loading={loading}
+          />
+          <InlineKpi
+            label={t("process.kpiStrip.reworkRate")}
+            value={percent(kpis.reworkRate)}
+            visual={spark(trends?.reworkRate, t("process.kpiStrip.reworkRate"), "percent")}
+            loading={loading}
+          />
+          <InlineKpi
+            label={t("process.kpiStrip.conformance")}
+            value={
+              hasConformance ? (
+                percent(fraction)
+              ) : (
+                <span
+                  data-slot="process-kpi-strip-conformance-unavailable"
+                  title={conformanceHint}
+                  className="inline-flex items-center gap-1.5 text-body font-normal text-muted-foreground"
+                >
+                  <CircleSlash2 aria-hidden="true" className="size-4" />
+                  {t("process.kpiStrip.conformanceUnavailable")}
+                </span>
+              )
+            }
+            visual={
+              hasConformance
+                ? spark(conformanceTrend, t("process.kpiStrip.conformance"), "percent")
+                : undefined
+            }
+            loading={loading}
+          />
+        </dl>
+      </div>
+    );
+  }
+
   return (
     <div data-slot="process-kpi-strip" className={className} {...props}>
       <MetricGrid columns={3} loading={loading}>
@@ -195,7 +335,7 @@ export function ProcessKpiStrip({
           label={t("process.kpiStrip.conformance")}
           value={
             hasConformance ? (
-              (conformance as number)
+              fraction
             ) : (
               <span
                 data-slot="process-kpi-strip-conformance-unavailable"
@@ -222,7 +362,7 @@ export function ProcessKpiStrip({
           visual={
             hasConformance
               ? trendVisual(
-                  trends?.conformance,
+                  conformanceTrend,
                   t("process.kpiStrip.conformance"),
                   "percent",
                   t,

package/src/process-map/activity-accent.ts

@@ -0,0 +1,25 @@
+/**
+ * How an activity's identity colour is painted (RM-054).
+ *
+ * The ONE place that turns an {@link ActivityColor} into CSS, shared by
+ * `ProcessActivityNode`'s accent swatch and `VariantExplorer`'s sequence chips — so the
+ * two views cannot drift into painting the same activity differently. Both endpoints are
+ * semantic tokens; no literal colour is authored.
+ *
+ * The shared "other" bucket is a diagonal hatch over a light wash of the same token, so
+ * it reads as "one of many" in greyscale too, never as a twelfth distinct activity.
+ */
+import type { CSSProperties } from "react";
+import type { ActivityColor } from "../core/activity-color-scale";
+
+/** Inline style for an accent swatch painted with `color`. */
+export function activityAccentStyle(color: ActivityColor): CSSProperties {
+  const ink = `var(${color.token})`;
+  if (color.pattern === "other") {
+    return {
+      backgroundColor: `color-mix(in oklab, ${ink} 30%, transparent)`,
+      backgroundImage: `repeating-linear-gradient(135deg, ${ink} 0 1.5px, transparent 1.5px 3.5px)`,
+    };
+  }
+  return { backgroundColor: ink };
+}

package/src/process-map/index.ts

@@ -5,6 +5,7 @@
  * read, the layout hook, and the whole `map-model` vocabulary (the model is what keeps the
  * canvas and the `tableView` twin printing identical numbers, so it is public on purpose).
  */
+export * from "./activity-accent";
 export * from "./map-model";
 export * from "./process-map";
 export * from "./process-map-context";

package/src/process-map/map-model.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { computeEdgeWeightScale, DEFAULT_EDGE_WIDTH_RANGE } from "@elabs-ai/components-flow";
+import { activityColorScale } from "../core/activity-color-scale";
 import { discoverGraph } from "../core/discover-graph";
 import { detectRework } from "../core/detect-rework";
 import { generateSyntheticLog } from "../core/fixtures/synthetic-log";
@@ -324,3 +325,18 @@ describe("non-colour channels reach assistive technology", () => {
     for (const edge of model.edges) expect(edge.ariaLabel).toBeTruthy();
   });
 });
+
+describe("activity colour accent (RM-054)", () => {
+  const metric = { node: "absolute_case", edge: "absolute" } as const;
+
+  it("carries no accent when no colour scale is given — today's model, unchanged", () => {
+    const plain = buildProcessMapModel({ graph, metric });
+    for (const node of plain.nodes) expect("accent" in node.data).toBe(false);
+  });
+
+  it("stamps each node with the scale's colour for its activity", () => {
+    const scale = activityColorScale(graph);
+    const coloured = buildProcessMapModel({ graph, metric, colorScale: scale });
+    for (const node of coloured.nodes) expect(node.data.accent).toEqual(scale.colorFor(node.id));
+  });
+});

package/src/process-map/map-model.ts

@@ -38,11 +38,14 @@
 // bundle's tree-shaking mercy; naming the four modules the map actually needs takes it off
 // the table entirely. Same package, so this is an ordinary relative import.
 import type { Edge, Node } from "@xyflow/react";
+import type { ActivityColor, ActivityColorScale } from "../core/activity-color-scale";
+import type { ConformanceState } from "../conformance-overlay/conformance-state";
 import { performanceValue } from "../core/aggregate-performance";
 import { EDGE_KEY_SEPARATOR } from "../core/discover-graph";
 import { minMax } from "../core/scale";
 import type { ReworkStats } from "../core/detect-rework";
 import type { FilterSpec } from "../core/filter-log";
+import type { ObjectCentricGraph } from "../core/discover-object-centric-graph";
 import type {
   ActivityStats,
   FrequencyMode,
@@ -192,6 +195,22 @@ export interface ProcessActivityNodeData extends Record<string, unknown> {
   /** Repeat executions of this activity across the log; omitted when no rework data. */
   reworkCount?: number;
   selectionState: ProcessSelectionState;
+  /**
+   * The activity's identity colour from a shared `ActivityColorScale` (RM-054), painted as
+   * a small accent swatch — never the card fill, which would fight the metric reading.
+   * Absent when the map was given no `colorScale`.
+   */
+  accent?: ActivityColor;
+  /**
+   * Where this activity sits against a reference model (RM-062). Set only when the map
+   * was given `conformance`; drives `data-conformance` plus its glyph and dash.
+   */
+  conformance?: ConformanceState;
+  /**
+   * Object-centric — RM-066. One entry per object type this activity occurs in, in the
+   * graph's type order. Set only in object-centric mode; drives the per-type chips.
+   */
+  objectTypes?: ProcessObjectTypeCount[];
 }
 
 /** `data` carried by every {@link ProcessMapEdge}. */
@@ -210,6 +229,32 @@ export interface ProcessTransitionEdgeData extends Record<string, unknown> {
   isSelfLoop: boolean;
   isBackEdge: boolean;
   selectionState: ProcessSelectionState;
+  /**
+   * This transition's composed accessible name ({@link transitionAriaLabel}), duplicated
+   * here from the edge object's own `ariaLabel` (#354). React Flow's `EdgeWrapper` reads
+   * `ariaLabel` off the edge OBJECT for the outer, non-focusable `<g>` — it never forwards
+   * it to the edge COMPONENT via `EdgeProps` (`@xyflow/react`'s `EdgeProps` type has no
+   * `ariaLabel` field) — so `ProcessTransitionEdge`, which only receives `data`, has no
+   * other channel to reach it. Read this field, never recompute the name locally, or the
+   * canvas and the `TableView` twin (`transitionRows`) can drift apart. Always set by
+   * {@link buildProcessMapModel} — optional only because it is filled in a step after the
+   * rest of this object (it is itself derived from this object).
+   */
+  ariaLabel?: string;
+  /**
+   * Where this transition sits against a reference model (RM-062). Set only when the map
+   * was given `conformance`; drives `data-conformance` plus its glyph and dash.
+   */
+  conformance?: ConformanceState;
+  /**
+   * Object-centric — RM-066. The object type this edge belongs to; per-type edges between
+   * the same two activities are drawn side by side (see `parallelIndex`/`parallelCount`).
+   */
+  objectType?: ProcessObjectTypeMark;
+  /** Object-centric — RM-066. This edge's slot among the per-type edges of its pair. */
+  parallelIndex?: number;
+  /** Object-centric — RM-066. How many per-type edges join this edge's pair. */
+  parallelCount?: number;
 }
 
 /** A process-map activity node. Register as `nodeTypes={{ "process-activity": … }}`. */
@@ -226,6 +271,8 @@ export interface ProcessActivityRow {
   reworkCount?: number;
   role: string;
   selectionState: ProcessSelectionState;
+  /** Object-centric — RM-066. Per-type counts, as printed in the table twin. */
+  objectTypes?: string;
 }
 
 /** One row of the accessible `TableView` twin — transitions half. */
@@ -237,6 +284,8 @@ export interface ProcessTransitionRow {
   secondaryLabel?: string;
   shape: string;
   selectionState: ProcessSelectionState;
+  /** Object-centric — RM-066. The object type's display name. */
+  objectType?: string;
 }
 
 /** Everything the canvas and the table are both rendered from. */
@@ -627,6 +676,11 @@ export interface BuildProcessMapModelOptions {
    * every edge starts `isBackEdge: false` exactly as `discoverGraph` leaves it.
    */
   backEdgeIds?: ReadonlySet<string>;
+  /**
+   * The shared activity colour scale (RM-054). When given, every node carries
+   * `data.accent`, so the map and `VariantExplorer` paint an activity identically.
+   */
+  colorScale?: ActivityColorScale;
 }
 
 /**
@@ -640,6 +694,7 @@ export function buildProcessMapModel({
   selection,
   selectionStates,
   backEdgeIds,
+  colorScale,
 }: BuildProcessMapModelOptions): ProcessMapModel {
   const neighbourhood = selectionNeighbourhood(graph, selection);
   const denominators = processEdgeDenominators(graph.transitions);
@@ -688,6 +743,7 @@ export function buildProcessMapModel({
       isEnd: activity.isEnd,
       reworkCount,
       selectionState,
+      ...(colorScale ? { accent: colorScale.colorFor(activity.id) } : {}),
     };
     return {
       id: activity.id,
@@ -741,13 +797,18 @@ export function buildProcessMapModel({
       isBackEdge: backEdgeIds?.has(id) ?? transition.isBackEdge,
       selectionState,
     };
+    // Computed once, read from two places (#354): React Flow's own `EdgeWrapper` reads
+    // `ariaLabel` off THIS edge object for the outer, non-focusable `<g>`; `data.ariaLabel`
+    // is what `ProcessTransitionEdge` — which never sees this edge object, only `data` —
+    // folds onto the focused label pill. One computation, so the two can never drift.
+    data.ariaLabel = transitionAriaLabel(data, resolvedEdgeMetricLabel);
     return {
       id,
       source: transition.source,
       target: transition.target,
       type: "process-transition",
       data,
-      ariaLabel: transitionAriaLabel(data, resolvedEdgeMetricLabel),
+      ariaLabel: data.ariaLabel,
     };
   });
 
@@ -871,3 +932,264 @@ export function transitionAriaLabel(data: ProcessTransitionEdgeData, metricLabel
   if (data.selectionState !== "associated") parts.push(data.selectionState);
   return parts.join(", ");
 }
+// ── Object-centric — RM-066 ──────────────────────────────────────────────────
+
+/** How one object type is marked on the map: a name, a text code and a chart colour. */
+export interface ProcessObjectTypeMark {
+  /** The object type's id, as keyed in the `ObjectCentricGraph`. */
+  type: string;
+  /** Display name. */
+  label: string;
+  /** Two-character code printed beside every swatch — the non-colour channel. */
+  code: string;
+  /** A categorical chart token from `objectTypeColorScale` (RM-054's scale, reused). */
+  color: ActivityColor;
+}
+
+/** One object type's share of an activity node. */
+export interface ProcessObjectTypeCount extends ProcessObjectTypeMark {
+  instances: number;
+  /** Distinct objects of this type the activity touches. */
+  cases: number;
+  /** The chip's accessible name, e.g. "order: 2 objects, 3 occurrences". */
+  ariaLabel: string;
+}
+
+/** Every string the object-centric mode composes. Override for a non-English locale. */
+export interface ObjectCentricMapLabels {
+  /** A node chip's accessible name and table text. */
+  typeCount: (type: string, objects: number, occurrences: number) => string;
+  /** Prefixes a per-type edge's accessible name. */
+  edgePrefix: (type: string) => string;
+  /** Activity-table column header. */
+  columnObjectTypes: string;
+  /** Transition-table column header. */
+  columnObjectType: string;
+  /** The canvas legend's title. */
+  legendTitle: string;
+}
+
+/** English defaults for {@link ObjectCentricMapLabels}. */
+export const OBJECT_CENTRIC_MAP_DEFAULT_LABELS: Readonly<ObjectCentricMapLabels> = Object.freeze({
+  typeCount: (type: string, objects: number, occurrences: number) =>
+    `${type}: ${objects} ${objects === 1 ? "object" : "objects"}, ${occurrences} ${
+      occurrences === 1 ? "occurrence" : "occurrences"
+    }`,
+  edgePrefix: (type: string) => `${type} flow`,
+  columnObjectTypes: "Object types",
+  columnObjectType: "Object type",
+  legendTitle: "Object types",
+});
+
+/** The id of one object type's edge: the merged edge id, the separator, the type. */
+export function objectCentricEdgeId(source: string, target: string, type: string): string {
+  return `${processEdgeId(source, target)}${EDGE_KEY_SEPARATOR}${type}`;
+}
+
+/** Inputs to {@link buildObjectCentricMapModel}. */
+export interface BuildObjectCentricMapModelOptions extends BuildProcessMapModelOptions {
+  /**
+   * The object-centric graph `graph` was flattened from (`objectCentricProcessGraph`).
+   * Omit — or omit `objectTypeScale` — and this is exactly {@link buildProcessMapModel}.
+   */
+  objectCentric?: ObjectCentricGraph;
+  /** `objectTypeColorScale(objectCentric)`, built once from the FULL graph. */
+  objectTypeScale?: ActivityColorScale;
+  objectCentricLabels?: ObjectCentricMapLabels;
+}
+
+/**
+ * The object-centric process-map model: {@link buildProcessMapModel} over the flattened
+ * graph, then
+ *
+ * - every node gains `data.objectTypes` (one chip per type, each with a text code and a
+ *   real accessible name folded into the node's own), and
+ * - every merged edge is replaced by one edge PER OBJECT TYPE — its weight and printed
+ *   label read that type's own counts, its label is prefixed with the type's code, and its
+ *   stroke is the type's chart token. The edge-value colour ramp is never used here.
+ *
+ * A transition selection may name either a per-type edge or the merged pair; both select
+ * the pair's neighbourhood, and only the named per-type edge reads `"selected"`.
+ */
+export function buildObjectCentricMapModel({
+  objectCentric,
+  objectTypeScale,
+  objectCentricLabels = OBJECT_CENTRIC_MAP_DEFAULT_LABELS,
+  ...options
+}: BuildObjectCentricMapModelOptions): ProcessMapModel {
+  if (!objectCentric || !objectTypeScale) return buildProcessMapModel(options);
+  const labels = objectCentricLabels;
+  const { metric } = options;
+
+  const typeEdges = new Map<string, Map<string, TransitionStats>>();
+  const mergedIdOf = new Map<string, string>();
+  for (const type of objectCentric.objectTypes) {
+    for (const transition of objectCentric.transitionsByType[type] ?? []) {
+      const mergedId = processEdgeId(transition.source, transition.target);
+      mergedIdOf.set(objectCentricEdgeId(transition.source, transition.target, type), mergedId);
+      let byType = typeEdges.get(mergedId);
+      if (byType === undefined) {
+        byType = new Map();
+        typeEdges.set(mergedId, byType);
+      }
+      byType.set(type, transition);
+    }
+  }
+
+  const requested = options.selection;
+  const typeSelectionId =
+    requested?.kind === "transition" && mergedIdOf.has(requested.id) ? requested.id : undefined;
+  const model = buildProcessMapModel({
+    ...options,
+    selection: typeSelectionId
+      ? { kind: "transition", id: mergedIdOf.get(typeSelectionId) as string }
+      : requested,
+  });
+
+  const marks = new Map<string, ProcessObjectTypeMark>(
+    objectCentric.objectTypes.map((type) => [
+      type,
+      {
+        type,
+        label: objectTypeScale.labelFor(type),
+        code: objectTypeScale.codeFor(type),
+        color: objectTypeScale.colorFor(type),
+      },
+    ]),
+  );
+
+  const activityById = new Map(objectCentric.activities.map((a) => [a.id, a]));
+  const nodes: ProcessMapNode[] = model.nodes.map((node) => {
+    const activity = activityById.get(node.id);
+    if (!activity) return node;
+    const objectTypes: ProcessObjectTypeCount[] = [];
+    for (const type of objectCentric.objectTypes) {
+      const counts = activity.perType[type];
+      const mark = marks.get(type);
+      if (!counts || !mark) continue;
+      objectTypes.push({
+        ...mark,
+        instances: counts.instances,
+        cases: counts.cases,
+        ariaLabel: labels.typeCount(mark.label, counts.cases, counts.instances),
+      });
+    }
+    return {
+      ...node,
+      data: { ...node.data, objectTypes },
+      ariaLabel: [node.ariaLabel, ...objectTypes.map((entry) => entry.ariaLabel)].join(", "),
+    };
+  });
+
+  const denominators = new Map(
+    objectCentric.objectTypes.map((type) => [
+      type,
+      processEdgeDenominators(objectCentric.transitionsByType[type] ?? []),
+    ]),
+  );
+
+  const edges: ProcessMapEdge[] = [];
+  const values: number[] = [];
+  for (const merged of model.edges) {
+    const byType = typeEdges.get(merged.id);
+    const mergedData = merged.data as ProcessTransitionEdgeData;
+    if (!byType) continue;
+    let parallelIndex = 0;
+    for (const type of objectCentric.objectTypes) {
+      const transition = byType.get(type);
+      const mark = marks.get(type);
+      const typeGraph = objectCentric.graphsByType[type];
+      if (!transition || !mark || !typeGraph) continue;
+      const typeDenominators = denominators.get(type) as ProcessEdgeDenominators;
+      const id = objectCentricEdgeId(transition.source, transition.target, type);
+      const value = transitionMetricValue(
+        transition,
+        metric.edge,
+        typeGraph.totals,
+        typeDenominators,
+      );
+      values.push(value);
+      const selectionState: ProcessSelectionState =
+        typeSelectionId !== undefined &&
+        mergedData.selectionState === "selected" &&
+        typeSelectionId !== id
+          ? "associated"
+          : mergedData.selectionState;
+      const data: ProcessTransitionEdgeData = {
+        ...mergedData,
+        weight: value,
+        value,
+        label: `${mark.code} ${formatMetricValue(value, metric.edge)}`,
+        secondaryLabel:
+          metric.secondary === undefined
+            ? undefined
+            : formatMetricValue(
+                transitionMetricValue(
+                  transition,
+                  metric.secondary,
+                  typeGraph.totals,
+                  typeDenominators,
+                ),
+                metric.secondary,
+              ),
+        selectionState,
+        objectType: mark,
+        parallelIndex,
+        parallelCount: byType.size,
+      };
+      data.ariaLabel = `${labels.edgePrefix(mark.label)}: ${transitionAriaLabel(
+        data,
+        model.edgeMetricLabel,
+      )}`;
+      edges.push({
+        ...merged,
+        id,
+        data,
+        ariaLabel: data.ariaLabel,
+        style: { stroke: `var(${mark.color.token})` },
+      });
+      parallelIndex += 1;
+    }
+  }
+
+  const edgeDomain = values.length > 0 ? minMax(values) : model.edgeDomain;
+  for (const edge of edges) (edge.data as ProcessTransitionEdgeData).valueDomain = edgeDomain;
+
+  const activityRows: ProcessActivityRow[] = model.activityRows.map((row, index) => {
+    const objectTypes = nodes[index]?.data.objectTypes;
+    return objectTypes
+      ? {
+          ...row,
+          objectTypes: objectTypes.map((entry) => entry.ariaLabel).join("; "),
+        }
+      : row;
+  });
+
+  const transitionRows: ProcessTransitionRow[] = edges.map((edge) => {
+    const data = edge.data as ProcessTransitionEdgeData;
+    return {
+      id: edge.id,
+      source: data.source,
+      target: data.target,
+      primaryLabel: data.label,
+      secondaryLabel: data.secondaryLabel,
+      shape: transitionShape(data),
+      selectionState: data.selectionState,
+      objectType: data.objectType?.label,
+    };
+  });
+
+  return {
+    ...model,
+    nodes,
+    edges,
+    edgeDomain,
+    activityRows,
+    transitionRows,
+    excludedCounts: {
+      ...model.excludedCounts,
+      transitions: transitionRows.filter((row) => row.selectionState === "excluded").length,
+      totalTransitions: transitionRows.length,
+    },
+  };
+}