@cardenelabs/cdl 0.124.0 → 0.125.0

package/src/layout/nodes.ts

@@ -1,6 +1,7 @@
 import { requiredRowsWidth } from "../kinds/row-align";
 import type { CdlDiagram, CdlTextMetrics, LaidLane, LaidNode } from "../types";
 import { 端の字に要る線の長さ } from "./head-label";
+import { METRO_DECISION_HEIGHT, METRO_DECISION_WIDTH } from "./metro-path";
 import {
   hasRenderedLabel,
   labelPillH,
@@ -181,6 +182,16 @@ export function layoutNodes(
   textMetrics: CdlTextMetrics,
 ): LaidNode[] {
   const laneMap = new Map(lanes.map((l) => [l.id, l]));
+  const metroDecisionIds = new Set(
+    diag.edges
+      .filter((edge) => edge.routing === "metro")
+      .flatMap((edge) => [edge.from, edge.to])
+      .filter((id) => diag.nodes.some((node) => node.id === id && node.kind === "decision")),
+  );
+  const nodeSize = (node: CdlDiagram["nodes"][number]) =>
+    metroDecisionIds.has(node.id)
+      ? { w: METRO_DECISION_WIDTH, h: METRO_DECISION_HEIGHT }
+      : NODE_SIZE[node.kind];
 
   // 全 lane を跨いで stack 番号で row を共有する。
   // 同 stack 番号の node は全 lane で同じ y 中心になり、 lane 間 edge が水平で揃う。
@@ -189,7 +200,7 @@ export function layoutNodes(
   const rowH = new Map<number, number>();
   for (const stack of allStacks) {
     const nodesAtStack = diag.nodes.filter((n) => n.stack === stack);
-    const h = Math.max(...nodesAtStack.map((n) => 箱の高さ(n, NODE_SIZE[n.kind].h)));
+    const h = Math.max(...nodesAtStack.map((n) => 箱の高さ(n, nodeSize(n).h)));
     rowH.set(stack, h);
   }
   const rowCy = new Map<number, number>();
@@ -238,7 +249,7 @@ export function layoutNodes(
     if (!lane) {
       throw new Error(`cdl layout: node "${n.id}" の lane "${n.lane}" が定義されていない`);
     }
-    const size = NODE_SIZE[n.kind];
+    const size = nodeSize(n);
     if (n.posX !== undefined && n.posY !== undefined) {
       const w = n.posW ?? n.w ?? autoRowsWidth(n, size.w, textMetrics);
       const h = n.posH ?? n.h ?? rowH.get(n.stack) ?? size.h;

package/src/layout/spec.ts

@@ -200,7 +200,7 @@ export function drawsTitleOutsideBox(kind: string | undefined): boolean {
  */
 const TITLE_FONT_SIZE_DEFAULT = 18;
 const TITLE_FONT_SIZE: ReadonlyMap<string, number> = new Map<string, number>([
-  ...(["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "station"] as const).map(
+  ...(["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon"] as const).map(
     (k) => [k, 13] as const,
   ),
   ...(
@@ -251,8 +251,10 @@ const TITLE_FONT_SIZE: ReadonlyMap<string, number> = new Map<string, number>([
     ] as const
   ).map((k) => [k, 20] as const),
   ...(["card", "event", "function"] as const).map((k) => [k, 24] as const),
+  ["station", 25],
   ["actor", 32],
   ["storage", 34],
+  ["timeline-number", 18],
 ]);
 
 /**
@@ -286,6 +288,17 @@ export function skipsNodeTitleWidthCheck(kind: string | undefined): boolean {
  */
 export const TITLE_BOX_PADDING = 52;
 
+/** 時間軸の番号と軸に共通する縁の太さ。active でも変えない。 */
+export const TIMELINE_NUMBER_STROKE = 4;
+
+/** 題を描ける幅。丸い番号は縁の内側、それ以外は既存の箱内外の余白を使う。 */
+export function titleUsableWidth(kind: string | undefined, w: number, h: number): number {
+  if (kind === "timeline-number") {
+    return Math.min(w, h) - 2 * TIMELINE_NUMBER_STROKE;
+  }
+  return w - (drawsTitleOutsideBox(kind) ? 0 : TITLE_BOX_PADDING);
+}
+
 /**
  * 低い箱の時だけ題を箱に収まるまで小さくする種別。
  *
@@ -303,6 +316,7 @@ const KINDS_SCALING_TITLE_WHEN_LOW: ReadonlySet<string> = new Set(["actor", "eve
  */
 const KINDS_SCALING_TITLE_ALWAYS: ReadonlySet<string> = new Set([
   "card",
+  "timeline-number",
   "shape-file",
   "shape-folder",
   "shape-cloud",
@@ -470,6 +484,7 @@ const KINDS_DRAWING_ONLY_SHAPE: readonly string[] = [
 const KINDS_WITHOUT_EYEBROW_TEXT: ReadonlySet<string> = new Set([
   ...KINDS_DRAWING_ONLY_SHAPE,
   ...KINDS_WITHOUT_TITLE_TEXT,
+  "timeline-number",
 ]);
 
 /**
@@ -499,6 +514,7 @@ export function rendersEyebrow(kind: string | undefined): boolean {
 const KINDS_WITHOUT_SUBTITLE_TEXT: ReadonlySet<string> = new Set([
   ...KINDS_DRAWING_OWN_PAYLOAD,
   ...KINDS_WITHOUT_TITLE_TEXT,
+  "timeline-number",
 ]);
 
 /** その node が `subtitle` を文字として描くか (SSOT)。 破綻の扱いは `rendersEyebrow` と同じ */

package/src/layout/tokens.ts

@@ -14,6 +14,8 @@ export const TOKENS = {
   lane_label_h: 40,
   lane_top_pad: 100,
   contain_pad: 28,
+  stage_column_gap: 48,
+  stage_card_text_inset: 18,
 
   // node sizes (kind ごと、 unified row h は engine が max() で算出)
   node: {
@@ -141,7 +143,10 @@ export const TOKENS = {
     "mark-start": { w: 96, h: 96 },
     "mark-end": { w: 96, h: 96 },
     // 路線図の駅 (#996) ... 正方形にして小さな丸が縦横どちらにも歪まないようにする。
-    station: { w: 24, h: 24 },
+    // 半径 16 と縁 6 の外径を、線路との接点を含めて収める。
+    station: { w: 38, h: 38 },
+    // 時間軸の番号 (#1017) ... 半径 24 の丸と太さ 4 の縁を収める。
+    "timeline-number": { w: 52, h: 52 },
     // 時系列のやり取り (#578)。 実寸は中身から決まる (`sequenceBoardMetrics`) ので、
     // ここは書かなかった時の受け皿
     "sequence-board": { w: 960, h: 640 },
@@ -176,6 +181,8 @@ export const LANE_TOP_PAD = TOKENS.lane_top_pad;
 export const STACK_GAP = TOKENS.row_gap;
 export const NODE_SIZE = TOKENS.node;
 export const CONTAIN_PAD = TOKENS.contain_pad;
+export const STAGE_COLUMN_GAP = TOKENS.stage_column_gap;
+export const STAGE_CARD_TEXT_INSET = TOKENS.stage_card_text_inset;
 export const VIEW_PAD = TOKENS.view_pad;
 export const HEADER_RESERVE = TOKENS.header_reserve;
 export const LANE_AUTO_GAP = 80;

package/src/layout.ts

@@ -25,6 +25,7 @@ import {
   slideLabelsAlongOwnPath,
 } from "./layout/edges";
 import { applyFooterShapeDrops } from "./layout/footer-shape";
+import { layoutLegend } from "./layout/legend";
 import {
   expandLaneGapsForEdgeLabels,
   expandLanesForNodes,
@@ -181,7 +182,7 @@ function dropUnsafeLaneDx(
  */
 export function applyRowLevelNodeShifts<
   N extends { id: string; stack: number; lane: string; cx: number; cy: number },
-  L extends { id: string; x: number },
+  L extends { id: string; x: number; stage?: unknown },
 >(
   nodes: readonly N[],
   lanes: readonly L[],
@@ -189,6 +190,11 @@ export function applyRowLevelNodeShifts<
 ): { nodes: N[]; lanes: L[] } | null {
   const dyByStack = aggregateRowDy(nodes, nodeShifts);
   const dxByLane = dropUnsafeLaneDx(aggregateLaneDx(nodes, nodeShifts), nodes);
+  // 段階列は隣り合う列面の間を線の回廊として使うため、札回避の横 shift で列だけを動かさない。
+  // 縦 shift は stack の整列に必要なので、従来どおり適用する。
+  for (const lane of lanes) {
+    if (lane.stage !== undefined) dxByLane.delete(lane.id);
+  }
   let moved = false;
   const outNodes = nodes.map((n) => {
     const dx = dxByLane.get(n.lane) ?? 0;
@@ -434,7 +440,18 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     }
   }
 
-  const viewBox = computeViewBox(containedLanesFinal, nodesFinal, edges, bboxes, diag.viewport);
+  const contentViewBox = computeViewBox(
+    containedLanesFinal,
+    nodesFinal,
+    edges,
+    bboxes,
+    diag.viewport,
+  );
+  // 凡例なしの経路では関数を呼ばず、既存の viewBox と配置結果の形を保つ。
+  const legendLayout = diag.legend?.length
+    ? layoutLegend(diag.legend, contentViewBox, textMetrics, nodesFinal)
+    : undefined;
+  const viewBox = legendLayout?.viewBox ?? contentViewBox;
 
   return {
     id: diag.id,
@@ -462,6 +479,7 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     ...(textMetrics === "monospace" ? { textMetrics: "monospace" as const } : {}),
     // 種類も配色と同じく空の目印を出さない。 遮断をここに揃えると手書きの図にも効く
     ...(diag.type ? { type: diag.type } : {}),
+    ...(legendLayout ? { legend: legendLayout.legend } : {}),
     bboxes,
     collisions,
     nearCollisions,

package/src/render/edge-head.ts

@@ -7,6 +7,12 @@ import {
 import { hasTone } from "./tone";
 
 export const EDGE_HEAD_MUTED_MARKER_ID = "cdl-arrow-muted";
+export const METRO_RETURN_ARROW_D = "M 21 0 L 4 9.5 L 4 -9.5 Z";
+
+/** 戻る metro 線専用の矢印。通常の edge marker と寸法・線端からの距離が違う。 */
+export function metroReturnArrowMarkerId(tone: string): string {
+  return `cdl-metro-return-arrow-${tone}`;
+}
 
 /**
  * 関係の端の形の **描き方と marker の名前** (SSOT、 #560)。

package/src/render/edges.tsx

@@ -2,6 +2,7 @@ import { 等幅の字 } from "./mono-text";
 import type { JSX } from "react";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import { 端の字の大きさ, 端の字を置く, type 線の端 } from "../layout/head-label";
+import { METRO_LINE_WIDTH, METRO_LINE_WIDTH_CSS } from "../layout/metro-path";
 import {
   EDGE_HEAD_MARKER_SIZE,
   type CdlTextMetrics,
@@ -9,9 +10,12 @@ import {
   type LaidEdge,
   type Tone,
 } from "../types";
-import { edgeHeadMarkerName } from "./edge-head";
+import { edgeHeadMarkerName, metroReturnArrowMarkerId } from "./edge-head";
 import { toneColor } from "./tone";
 
+/** 段がまだ通っていない metro 区間を、意匠側が選ぶための属性名。 */
+export const METRO_PENDING_ATTRIBUTE = "data-cdl-pending";
+
 /**
  * 辺の色 (#618)。 役目を書いた辺だけ「いま」 の色で引く。
  *
@@ -62,6 +66,7 @@ export function CdlEdgeView({
   progress,
   stateValues,
   flowing = false,
+  pending = false,
 }: {
   edge: LaidEdge;
   active: boolean;
@@ -81,6 +86,8 @@ export function CdlEdgeView({
    * 2 つの動きが同時に走って線がどちらに進んでいるか読めなくなる。
    */
   flowing?: boolean;
+  /** metro 線の初出より前の段だけに付く。非 metro 線では常に偽。 */
+  pending?: boolean;
 }): JSX.Element {
   const color = edgeColor(edge);
   // 光っていない edge も tone の色で描く。 以前は一律の灰色に落としていたため、 何も光っていない
@@ -96,7 +103,11 @@ export function CdlEdgeView({
   // その色なら 0.9 で 4.51-4.92 と 4.5:1 を満たす (0.8 では 3.69-4.04 で届かない)。
   // 実線と点線で同じ組を使い、 光らせた側が薄くなる逆転を作らない。
   // 端の形は線の種類と別の軸 (#560)。 書かなければ既定の塗った三角で、名前も従来のまま
-  const marker = edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
+  const style = edge.style ?? "solid";
+  const isMetroReturn = edge.metroReturn === true;
+  const marker = isMetroReturn
+    ? metroReturnArrowMarkerId(edge.tone)
+    : edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
   // 出どころ側の印 (#578)。 marker は経路の向きに従って回るので、始点に置いた印は
   // 自動で外向きになる (`orient="auto-start-reverse"`)。 書かない図では端が無い
   const tailMarker =
@@ -104,7 +115,6 @@ export function CdlEdgeView({
       ? undefined
       : edgeHeadMarkerName(edge.tone, edge.tailHead, !active, edge.tailHeadFill);
 
-  const style = edge.style ?? "solid";
   const isDotted = style === "dotted-flow";
   const isPassThrough = isDotted && Boolean(edge.dThrough);
 
@@ -124,6 +134,7 @@ export function CdlEdgeView({
 
   return (
     <g
+      {...(pending ? { [METRO_PENDING_ATTRIBUTE]: "true" } : {})}
       data-cdl-edge={edge.id}
       data-cdl-routing={edge.routing === "metro" ? "metro" : undefined}
       data-cdl-from={edge.from}
@@ -148,11 +159,12 @@ export function CdlEdgeView({
             fill="none"
             stroke={color}
             strokeOpacity={active ? 0.95 : 0.9}
-            strokeWidth={active ? 5 : 4}
+            strokeWidth={edge.routing === "metro" ? METRO_LINE_WIDTH : active ? 5 : 4}
             strokeDasharray="0 18"
             strokeLinecap="round"
             style={{
               transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease",
+              strokeWidth: edge.routing === "metro" ? METRO_LINE_WIDTH_CSS : undefined,
             }}
           />
           {active && !isPassThrough && <EdgeGlowCircles color={color} edgeId={edge.id} />}
@@ -237,12 +249,20 @@ function SolidEdgePath({
   const boundDashOffset = edge.dashOffsetBind && stateValues
     ? resolveNumericAttr(edge.dashOffsetBind, stateValues, 0)
     : undefined;
+  const strokeWidth = edge.routing === "metro" && edge.widthBind === undefined
+    ? edge.metroReturn ? 6 : METRO_LINE_WIDTH
+    : boundWidth;
+  const strokeWidthCss = edge.routing === "metro" && !edge.metroReturn
+    ? edge.widthBind === undefined
+      ? METRO_LINE_WIDTH_CSS
+      : `var(--cdl-metro-line-width, ${strokeWidth}px)`
+    : undefined;
   // dashoffset は dasharray 前提、 signal 経由の流れる線を出したい時は "6 6" 等
   // 刻みは 2 つの役目を持つ。 光っていないことの合図 (`"solid"` の光っていない側) と、
   // 線の種類そのもの (`"dashed"`)。 **後者は光っても刻みのまま**にする = 意味を持つ刻みが
   // 光った瞬間に消えると、その関係だけ種類が変わって見える (#578)
   const dashArray = dashed
-    ? "10 8"
+    ? edge.metroReturn ? "0 9.6" : "10 8"
     : active
       ? boundDashOffset !== undefined ? "8 6" : undefined
       : "4 5";
@@ -253,7 +273,7 @@ function SolidEdgePath({
       fill="none"
       stroke={boundStroke}
       strokeOpacity={active ? 0.95 : 0.9}
-      strokeWidth={boundWidth}
+      strokeWidth={strokeWidth}
       strokeDasharray={dashArray}
       strokeDashoffset={boundDashOffset}
       strokeLinecap="round"
@@ -261,6 +281,7 @@ function SolidEdgePath({
       markerStart={tailMarker === undefined ? undefined : `url(#${tailMarker})`}
       style={{
         transition: "stroke 280ms ease, stroke-opacity 280ms ease, stroke-width 280ms ease",
+        strokeWidth: strokeWidthCss,
       }}
     />
   );

package/src/render/legend.tsx

@@ -0,0 +1,120 @@
+import type { JSX } from "react";
+
+import {
+  LEGEND_FONT_SIZE,
+  LEGEND_MARK_REFERENCE_WIDTH,
+  LEGEND_MARK_SCALE,
+  LEGEND_MARK_TEXT_GAP,
+  LEGEND_MARK_WIDTH,
+} from "../layout/legend";
+import type { LaidLegendItem, LegendMark } from "../types";
+
+const ink = "var(--cdl-text-accent, #143a52)";
+const paper = "var(--cdl-stage-bg, #f8fafc)";
+
+const LEGEND_MARK_RENDERERS = {
+  diamond: () => (
+    <path d="M 23 -26 L 46 -8 L 23 10 L 0 -8 Z" fill="none" stroke={ink} strokeWidth={2} />
+  ),
+  "filled-circle": () => <circle cx={23} cy={-8} r={11} fill={ink} />,
+  "double-circle": () => (
+    <>
+      <circle cx={23} cy={-8} r={12} fill="none" stroke={ink} strokeWidth={2.5} />
+      <circle cx={23} cy={-8} r={6} fill={ink} />
+    </>
+  ),
+  "dotted-line": () => (
+    <path
+      d={`M 0 -8 H ${LEGEND_MARK_REFERENCE_WIDTH}`}
+      fill="none"
+      stroke={ink}
+      strokeWidth={6}
+      strokeLinecap="round"
+      strokeDasharray="0 9.6"
+    />
+  ),
+  "solid-line": () => (
+    <path
+      d={`M 0 -8 H ${LEGEND_MARK_REFERENCE_WIDTH}`}
+      fill="none"
+      stroke={ink}
+      strokeWidth={4}
+      strokeLinecap="round"
+    />
+  ),
+  "curved-line": () => (
+    <path
+      d={`M 0 6 C 12 -22, 34 -22, ${LEGEND_MARK_REFERENCE_WIDTH} 6`}
+      fill="none"
+      stroke={ink}
+      strokeWidth={4}
+      strokeLinecap="round"
+    />
+  ),
+  "rounded-label": () => (
+    <rect
+      x={0}
+      y={-23}
+      width={LEGEND_MARK_REFERENCE_WIDTH}
+      height={30}
+      rx={9}
+      fill={paper}
+      stroke={ink}
+      strokeWidth={2}
+    />
+  ),
+  "numbered-circle": () => (
+    <>
+      <circle cx={23} cy={-8} r={13} fill={paper} stroke={ink} strokeWidth={2.5} />
+      <text x={23} y={-2} textAnchor="middle" fontSize={17} fontWeight={700} fill={ink}>
+        1
+      </text>
+    </>
+  ),
+  station: () => <circle cx={23} cy={-8} r={11} fill={paper} stroke={ink} strokeWidth={4} />,
+  arrow: () => (
+    <path
+      d={`M 0 -8 H 42 M 32 -18 L ${LEGEND_MARK_REFERENCE_WIDTH} -8 L 32 2`}
+      fill="none"
+      stroke={ink}
+      strokeWidth={3}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+} satisfies Record<LegendMark, () => JSX.Element>;
+
+export function CdlLegend({ items }: { items: readonly LaidLegendItem[] }): JSX.Element {
+  return (
+    <g data-cdl-role="legend">
+      {items.map((item, index) => {
+        const Mark = LEGEND_MARK_RENDERERS[item.mark];
+        return (
+          <g
+            key={`${item.mark}-${index}`}
+            data-cdl-role="legend-item"
+            data-cdl-y={item.y}
+            transform={`translate(${item.x} ${item.y})`}
+          >
+            <g
+              data-cdl-role="legend-mark"
+              data-cdl-legend-mark={item.mark}
+              transform={`scale(${LEGEND_MARK_SCALE})`}
+            >
+              <Mark />
+            </g>
+            <text
+              data-cdl-role="legend-text"
+              x={LEGEND_MARK_WIDTH + LEGEND_MARK_TEXT_GAP}
+              y={0}
+              fontSize={LEGEND_FONT_SIZE}
+              fill="var(--cdl-text-mute, #4d7187)"
+            >
+              {item.text}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}

package/src/render/nodes.tsx

@@ -7,7 +7,7 @@ import { FunctionNode } from "../kinds/function";
 import { StorageNode } from "../kinds/storage";
 import { GenericNode } from "../kinds/generic";
 import { MarkStartNode, MarkEndNode } from "../kinds/terminal-mark";
-import { StationNode } from "../kinds/station";
+import { StationNode, TimelineNumberNode } from "../kinds/station";
 import { DynShapeNode } from "../kinds/dyn-shape";
 import { ChartLineNode, type ChartLineScale } from "../kinds/chart-line";
 import { ChartPieNode } from "../kinds/chart-pie";
@@ -119,10 +119,14 @@ export function CdlNodeView({
   stateValues,
   currentPhaseId,
   chartLineScale,
+  compactTitleInset,
   関係の受け口,
   lang,
   textMetrics,
   値の名前,
+  metroDiagram = false,
+  metroDecision = false,
+  stationNameRight = false,
 }: {
   node: LaidNode;
   active: boolean;
@@ -144,8 +148,16 @@ export function CdlNodeView({
   stateValues: Record<string, string>;
   currentPhaseId: string | undefined;
   chartLineScale?: ChartLineScale;
+  /** 小型 card の名前を左寄せにする時の左端からの距離。段階列の札だけが渡す。 */
+  compactTitleInset?: number;
   /** 触れた箱の関係を光らせる時の受け口 (#806)。 書かない図では `undefined` */
   関係の受け口?: 関係の受け口;
+  /** metro 線と駅を持つ図だけが担当の名札と端の印を路線図向けに描く。 */
+  metroDiagram?: boolean;
+  /** `routing: "metro"` の線が出入りする分かれ道だけを路線図向けに描く。 */
+  metroDecision?: boolean;
+  /** 真上から線路が入る駅の名前を右へ置く。 */
+  stationNameRight?: boolean;
 }): JSX.Element {
   const value = node.value ? interpolate(node.value, stateValues, 値の名前) : undefined;
   const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues, 値の名前));
@@ -201,7 +213,7 @@ export function CdlNodeView({
       case "event":
         return <EventNode node={resolvedNode} active={active} progress={progress} />;
       case "card":
-        return <CardNode node={resolvedNode} active={active} />;
+        return <CardNode node={resolvedNode} active={active} compactTitleInset={compactTitleInset} />;
       // 時系列のやり取り (#578)。 1 つの箱が図を丸ごと描く = 縦が時間で、参加者は箱を持たない
       case "sequence-board":
         return (
@@ -479,11 +491,13 @@ export function CdlNodeView({
       case "shape-customer-service":
         return <ShapeCustomerServiceNode node={resolvedNode} active={active} />;
       case "mark-start":
-        return <MarkStartNode node={resolvedNode} active={active} />;
+        return <MarkStartNode node={resolvedNode} active={active} metro={metroDiagram} />;
       case "mark-end":
-        return <MarkEndNode node={resolvedNode} active={active} />;
+        return <MarkEndNode node={resolvedNode} active={active} metro={metroDiagram} />;
       case "station":
-        return <StationNode node={resolvedNode} active={active} />;
+        return <StationNode node={resolvedNode} active={active} nameRight={stationNameRight} />;
+      case "timeline-number":
+        return <TimelineNumberNode node={resolvedNode} />;
       default:
         // 新 NodeKind 25 種は GenericNode で汎用描画 (kind 別 icon / color / shape)
         return (
@@ -494,6 +508,8 @@ export function CdlNodeView({
             stateValues={stateValues}
             値の名前={値の名前}
             textMetrics={textMetrics}
+            showKindIcon={!(metroDiagram && node.kind === "decision")}
+            metroDecision={metroDecision}
           />
         );
     }