@multiplatform.one/components 7.7.4 → 7.8.0

package/src/views/Gantt.spec.tsx

@@ -7,14 +7,22 @@ import {
   barGeometry,
   clampResizeDayDelta,
   computeGanttRange,
+  dateLineX,
   dateToX,
   dayDiff,
   dxToDayDelta,
   formatSpanLabel,
   ganttTaskAccessibleLabel,
   generateTicks,
+  isBoundedSpan,
+  isEternalSpan,
   normalizeSpanEdges,
+  openBarGeometry,
+  openSpanExtent,
+  openSpanExtents,
+  openSpanLabelParts,
   resizeSpanByDays,
+  scrollAnchorX,
   shiftSpanByDays,
   spanInclusiveDays,
   todayLineX,
@@ -29,6 +37,32 @@ const mar = (day: number, hours = 0, minutes = 0) => new Date(2026, 2, day, hour
 // Pure math: date → position
 // ---------------------------------------------------------------------------
 describe("ganttMath", () => {
+  describe("scroll anchoring", () => {
+    const start = mar(1);
+    const date = mar(20);
+    const options = { labelWidth: 180, chartWidth: 2000, viewportWidth: 178, rtl: false };
+
+    it("keeps a narrow marker inside the canvas while preserving the desktop inset", () => {
+      const narrow = scrollAnchorX(date, start, 24, options);
+      expect(narrow).toBe(397);
+      expect(dateToX(date, start, 24) + 12 - narrow).toBe(71);
+      expect(scrollAnchorX(date, start, 24, { ...options, viewportWidth: 820 })).toBe(276);
+      expect(scrollAnchorX(date, start, 24, { ...options, viewportWidth: null })).toBe(276);
+    });
+
+    it("clamps both edges and short charts to the measured extent", () => {
+      expect(scrollAnchorX(start, start, 24, options)).toBe(0);
+      expect(scrollAnchorX(mar(90), start, 24, options)).toBe(1822);
+      expect(scrollAnchorX(date, start, 24, { ...options, chartWidth: 100 })).toBe(0);
+    });
+
+    it("mirrors the narrow anchor inset in RTL", () => {
+      const left = scrollAnchorX(date, start, 24, { ...options, rtl: true });
+      expect(left).toBe(1425);
+      expect(2000 - dateToX(date, start, 24) - 12 - left).toBe(107);
+    });
+  });
+
   describe("day arithmetic", () => {
     it("computes whole-day differences and shifts", () => {
       expect(dayDiff(mar(10), mar(13))).toBe(3);
@@ -201,6 +235,84 @@ describe("ganttMath", () => {
     });
   });
 
+  describe("open-ended spans", () => {
+    const range: GanttRange = { start: mar(8), end: mar(22) };
+
+    it("names an absent bound as open, not as missing", () => {
+      expect(isEternalSpan({})).toBe(true);
+      expect(isEternalSpan({ start: mar(10) })).toBe(false);
+      expect(isBoundedSpan({ start: mar(10), end: mar(12) })).toBe(true);
+      expect(isBoundedSpan({ start: mar(10) })).toBe(false);
+    });
+
+    it("contributes only the dates a span actually names to the range", () => {
+      expect(openSpanExtent({})).toBeUndefined();
+      expect(openSpanExtent({ start: mar(10) })).toEqual({ start: mar(10), end: mar(10) });
+      expect(openSpanExtent({ end: mar(12) })).toEqual({ start: mar(12), end: mar(12) });
+      // An eternal span names nothing, so it must not stretch the axis.
+      expect(openSpanExtents([{}, { start: mar(10) }, { start: mar(1), end: mar(3) }])).toEqual([
+        { start: mar(10), end: mar(10) },
+        { start: mar(1), end: mar(3) },
+      ]);
+    });
+
+    it("measures a bounded span exactly as barGeometry does", () => {
+      const open = openBarGeometry({ start: mar(10), end: mar(12) }, range, 24);
+      const closed = barGeometry({ start: mar(10), end: mar(12) }, range.start, 24);
+      expect(open.x).toBe(closed.x);
+      expect(open.width).toBe(closed.width);
+      expect(open.openStart).toBe(false);
+      expect(open.openEnd).toBe(false);
+      expect(open.eternal).toBe(false);
+    });
+
+    it("runs an open end to the chart edge and reports which end is open", () => {
+      const chartWidth = 14 * 24;
+      const openEnd = openBarGeometry({ start: mar(10) }, range, 24);
+      expect(openEnd.x).toBe(48);
+      expect(openEnd.x + openEnd.width).toBe(chartWidth);
+      expect(openEnd.openEnd).toBe(true);
+      expect(openEnd.openStart).toBe(false);
+
+      const openStart = openBarGeometry({ end: mar(12) }, range, 24);
+      expect(openStart.x).toBe(0);
+      // Inclusive end: the bar paints through the 12th.
+      expect(openStart.width).toBe(dateToX(mar(13), range.start, 24));
+      expect(openStart.openStart).toBe(true);
+      expect(openStart.openEnd).toBe(false);
+    });
+
+    it("covers the whole chart for an eternal span, flagged as a rail", () => {
+      const rail = openBarGeometry({}, range, 24);
+      expect(rail.x).toBe(0);
+      expect(rail.width).toBe(14 * 24);
+      expect(rail.eternal).toBe(true);
+      expect(rail.openStart).toBe(true);
+      expect(rail.openEnd).toBe(true);
+    });
+
+    it("labels only the bounds a span has", () => {
+      const bounded = openSpanLabelParts({ start: mar(10), end: mar(12) });
+      expect(bounded.start).toMatch(/10/);
+      expect(bounded.end).toMatch(/12/);
+      expect(openSpanLabelParts({ start: mar(10) })).toEqual({
+        start: bounded.start,
+        end: undefined,
+      });
+      expect(openSpanLabelParts({ end: mar(12) })).toEqual({
+        start: undefined,
+        end: bounded.end,
+      });
+      expect(openSpanLabelParts({})).toEqual({});
+    });
+
+    it("measures any date's line the same way the today line is measured", () => {
+      expect(dateLineX(range, 24, mar(10, 14, 30))).toBe(60);
+      expect(dateLineX(range, 24, mar(30))).toBeNull();
+      expect(dateLineX(range, 24, mar(10))).toBe(todayLineX(range, 24, mar(10)));
+    });
+  });
+
   describe("labels", () => {
     it("builds accessible names with the inclusive day range", () => {
       const label = ganttTaskAccessibleLabel({
@@ -541,6 +653,33 @@ describe("GanttView", () => {
       expect(span.end).toEqual(mar(10));
     });
 
+    it("mirrors the marker scrub: a rightward drag moves it EARLIER", () => {
+      const onMarkerDateChange = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} markerDate={mar(15)} onMarkerDateChange={onMarkerDateChange} />,
+      );
+      const handle = container.querySelector('[data-gantt-marker-handle="true"]') as Element;
+
+      fireEvent.pointerDown(handle, { button: 0, clientX: 100, clientY: 10 });
+      fireEvent.pointerMove(window, { clientX: 172, clientY: 10 });
+      fireEvent.pointerUp(window, { clientX: 172, clientY: 10 });
+
+      expect(onMarkerDateChange.mock.calls.at(-1)?.[0]).toEqual(mar(12));
+    });
+
+    it("mirrors the open-end chevron to the side the span is open at", () => {
+      const { container } = renderWithProviders(
+        <GanttView tasks={[{ id: "vat", title: "VAT", start: mar(10) }]} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="vat"]') as HTMLElement;
+      // Time flows right-to-left, so the open END is on the physical LEFT and
+      // its glyph points that way.
+      const chevron = bar.querySelector("[data-gantt-open-end]") as HTMLElement;
+      expect(chevron.textContent).toBe("«");
+      // Mirrored anchoring: the bar is placed from the right edge, not the left.
+      expect(bar.style.right || getComputedStyle(bar).right).not.toBe("");
+    });
+
     it("the physical-left handle is the END edge under RTL and inverts its delta", () => {
       const onItemMove = vi.fn();
       const { container } = renderWithProviders(
@@ -609,6 +748,243 @@ describe("GanttView", () => {
     });
   });
 
+  // ── Track view (MPO-248): open bounds, several spans a row, a marker ────
+
+  describe("open-ended spans", () => {
+    const openTasks: GanttTask[] = [
+      { id: "from", title: "Live from Mar 10", start: mar(10) },
+      { id: "until", title: "Closed Mar 12", end: mar(12) },
+      { id: "always", title: "No dates at all" },
+    ];
+
+    it("draws each open shape differently and says which end is open", () => {
+      const { container } = renderWithProviders(<GanttView tasks={openTasks} />);
+      expect(container.querySelectorAll("[data-gantt-bar]")).toHaveLength(3);
+      expect(
+        container.querySelector('[data-gantt-bar="from"]')?.getAttribute("data-gantt-span-open"),
+      ).toBe("end");
+      expect(
+        container.querySelector('[data-gantt-bar="until"]')?.getAttribute("data-gantt-span-open"),
+      ).toBe("start");
+      // Eternal is a RAIL, not a full-width bar with two chosen-looking caps.
+      const rail = container.querySelector('[data-gantt-bar="always"]');
+      expect(rail?.getAttribute("data-gantt-rail")).toBe("true");
+      expect(rail?.getAttribute("data-gantt-span-open")).toBe("both");
+      expect(container.querySelectorAll("[data-gantt-open-start]")).toHaveLength(2);
+      expect(container.querySelectorAll("[data-gantt-open-end]")).toHaveLength(2);
+    });
+
+    it("speaks the open end instead of reading out an invented date", () => {
+      const { container } = renderWithProviders(<GanttView tasks={openTasks} />);
+      const name = (id: string) =>
+        container.querySelector(`[data-gantt-bar="${id}"]`)?.getAttribute("aria-label") ?? "";
+      expect(name("from")).toMatch(/no end/i);
+      expect(name("until")).toMatch(/no start/i);
+      expect(name("always")).toMatch(/always/i);
+      expect(name("always")).not.toMatch(/\d/);
+    });
+
+    it("refuses to reschedule a span with only one bound", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={openTasks} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="from"]') as Element;
+
+      fireEvent.pointerDown(bar, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 148, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 148, clientY: 100 });
+      fireEvent.keyDown(bar, { key: "ArrowRight" });
+
+      expect(onItemMove).not.toHaveBeenCalled();
+      // No second edge to hold a duration against, so no handles either.
+      expect(bar.querySelector("[data-gantt-resize-handle]")).toBeNull();
+    });
+
+    it("keeps an eternal span from stretching the axis", () => {
+      // A span that names no date must not widen the chart. Weekend columns
+      // are one per Saturday and Sunday in the range, so their count IS the
+      // range length.
+      const dated = renderWithProviders(<GanttView tasks={[openTasks[1]]} />);
+      const weekends = dated.container.querySelectorAll("[data-gantt-weekend]").length;
+      expect(weekends).toBeGreaterThan(0);
+      cleanup();
+      const withRail = renderWithProviders(<GanttView tasks={[openTasks[1], openTasks[2]]} />);
+      expect(withRail.container.querySelectorAll("[data-gantt-weekend]")).toHaveLength(weekends);
+    });
+  });
+
+  describe("several spans on one row", () => {
+    const era: GanttTask = {
+      id: "era",
+      title: "Federal true-up",
+      spans: [
+        { id: "2026", start: mar(1), end: mar(5) },
+        { id: "2027", start: mar(8), end: mar(12) },
+        { id: "2028", start: mar(15) },
+      ],
+    };
+
+    it("draws one row carrying every span", () => {
+      const { container } = renderWithProviders(<GanttView tasks={[era]} />);
+      expect(container.querySelectorAll("[data-gantt-row-label]")).toHaveLength(1);
+      expect(container.querySelectorAll("[data-gantt-row]")).toHaveLength(1);
+      expect(container.querySelectorAll("[data-gantt-bar]")).toHaveLength(3);
+      expect(container.querySelector('[data-gantt-bar="2027"]')).toBeTruthy();
+      expect(
+        container.querySelector('[data-gantt-bar="2028"]')?.getAttribute("data-gantt-span-open"),
+      ).toBe("end");
+    });
+
+    it("falls back to an index key when a span carries no id", () => {
+      const { container } = renderWithProviders(
+        <GanttView tasks={[{ id: "e", title: "E", spans: [{ start: mar(10), end: mar(12) }] }]} />,
+      );
+      expect(container.querySelector('[data-gantt-bar="e#0"]')).toBeTruthy();
+    });
+
+    it("moves only the span that was grabbed, and names it", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={[era]} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="2027"]') as Element;
+
+      fireEvent.pointerDown(bar, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 148, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 148, clientY: 100 });
+
+      expect(onItemMove).toHaveBeenCalledTimes(1);
+      const [task, range, ref] = onItemMove.mock.calls[0];
+      expect(task.id).toBe("era");
+      expect(range.start).toEqual(mar(10));
+      expect(range.end).toEqual(mar(14));
+      expect(ref.key).toBe("2027");
+      expect(ref.index).toBe(1);
+      expect(ref.span.id).toBe("2027");
+    });
+
+    it("reports a one-bar row as its own span, keyed by the task id", () => {
+      const onItemMove = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} onItemMove={onItemMove} />,
+      );
+      const bar = container.querySelector('[data-gantt-bar="t1"]') as Element;
+
+      fireEvent.pointerDown(bar, { button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { clientX: 148, clientY: 100 });
+      fireEvent.pointerUp(window, { clientX: 148, clientY: 100 });
+
+      const ref = onItemMove.mock.calls[0][2];
+      expect(ref.key).toBe("t1");
+      expect(ref.index).toBe(0);
+      expect(ref.span.id).toBe("t1");
+    });
+  });
+
+  describe("controlled marker", () => {
+    const handleOf = (container: Element) =>
+      container.querySelector('[data-gantt-marker-handle="true"]') as Element;
+
+    it("paints the marker at markerDate, with the today line switched off", () => {
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} markerDate={mar(15)} showToday={false} />,
+      );
+      expect(container.querySelector('[data-gantt-marker="true"]')).toBeTruthy();
+      expect(container.querySelector('[data-gantt-today="true"]')).toBeNull();
+      expect(handleOf(container)).toBeTruthy();
+    });
+
+    it("renders no marker at all when markerDate is absent", () => {
+      const { container } = renderWithProviders(<GanttView tasks={tasks} />);
+      expect(container.querySelector('[data-gantt-marker="true"]')).toBeNull();
+      expect(container.querySelector('[data-gantt-marker-handle="true"]')).toBeNull();
+    });
+
+    it("scrubs by dragging the axis handle, snapped to whole days", () => {
+      const onMarkerDateChange = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} markerDate={mar(15)} onMarkerDateChange={onMarkerDateChange} />,
+      );
+      const handle = handleOf(container);
+
+      // 24 px/day at week zoom → +72px = +3 days.
+      fireEvent.pointerDown(handle, { button: 0, clientX: 100, clientY: 10 });
+      fireEvent.pointerMove(window, { clientX: 172, clientY: 10 });
+      fireEvent.pointerUp(window, { clientX: 172, clientY: 10 });
+
+      expect(onMarkerDateChange).toHaveBeenCalled();
+      expect(onMarkerDateChange.mock.calls.at(-1)?.[0]).toEqual(mar(18));
+    });
+
+    it("emits once per day crossed, from the date the scrub started", () => {
+      const onMarkerDateChange = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} markerDate={mar(15)} onMarkerDateChange={onMarkerDateChange} />,
+      );
+      const handle = handleOf(container);
+
+      fireEvent.pointerDown(handle, { button: 0, clientX: 100, clientY: 10 });
+      fireEvent.pointerMove(window, { clientX: 124, clientY: 10 });
+      fireEvent.pointerMove(window, { clientX: 128, clientY: 10 });
+      fireEvent.pointerMove(window, { clientX: 148, clientY: 10 });
+      fireEvent.pointerUp(window, { clientX: 148, clientY: 10 });
+
+      // Two days crossed, not four moves: +1 then +2, never a repeat.
+      expect(onMarkerDateChange).toHaveBeenCalledTimes(2);
+      expect(onMarkerDateChange.mock.calls[0][0]).toEqual(mar(16));
+      expect(onMarkerDateChange.mock.calls[1][0]).toEqual(mar(17));
+    });
+
+    it("puts the marker back where the scrub started on Escape", () => {
+      const onMarkerDateChange = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} markerDate={mar(15)} onMarkerDateChange={onMarkerDateChange} />,
+      );
+      const handle = handleOf(container);
+
+      fireEvent.pointerDown(handle, { button: 0, clientX: 100, clientY: 10 });
+      fireEvent.pointerMove(window, { clientX: 172, clientY: 10 });
+      fireEvent.keyDown(window, { key: "Escape" });
+      fireEvent.pointerUp(window, { clientX: 172, clientY: 10 });
+
+      expect(onMarkerDateChange.mock.calls.at(-1)?.[0]).toEqual(mar(15));
+    });
+
+    it("steps the focused handle with the arrow keys (Shift = 7 days)", () => {
+      const onMarkerDateChange = vi.fn();
+      const { container } = renderWithProviders(
+        <GanttView tasks={tasks} markerDate={mar(15)} onMarkerDateChange={onMarkerDateChange} />,
+      );
+      const handle = handleOf(container);
+
+      fireEvent.keyDown(handle, { key: "ArrowRight" });
+      expect(onMarkerDateChange.mock.calls.at(-1)?.[0]).toEqual(mar(16));
+      fireEvent.keyDown(handle, { key: "ArrowLeft", shiftKey: true });
+      expect(onMarkerDateChange.mock.calls.at(-1)?.[0]).toEqual(mar(8));
+    });
+
+    it("is read-only, and says so, with no change handler", () => {
+      const { container } = renderWithProviders(<GanttView tasks={tasks} markerDate={mar(15)} />);
+      const handle = handleOf(container);
+      expect(handle.getAttribute("role")).toBe("slider");
+      expect(handle.getAttribute("aria-valuetext")).toMatch(/15/);
+      expect(handle.getAttribute("tabindex")).toBe("-1");
+    });
+
+    it("leaves the today line alone — the marker is a separate line", () => {
+      const today = new Date();
+      const { container } = renderWithProviders(
+        <GanttView
+          tasks={[{ id: "now", title: "Now", start: addDays(today, -2), end: addDays(today, 2) }]}
+          markerDate={addDays(today, -1)}
+        />,
+      );
+      expect(container.querySelector('[data-gantt-today="true"]')).toBeTruthy();
+      expect(container.querySelector('[data-gantt-marker="true"]')).toBeTruthy();
+    });
+  });
+
   describe("design-law (MPO-60)", () => {
     function atoms(el: Element, prefixes: string[]): string[] {
       return String((el as HTMLElement).className || "")

package/src/views/Gantt.stories.tsx

@@ -3,7 +3,7 @@ import { action } from "@multiplatform.one/storybook";
 import { useEffect, useState } from "react";
 import { formatAbsoluteDate, resolveChartPalette } from "@multiplatform.one/theme";
 import { Text, YStack } from "tamagui";
-import { GanttView, type GanttItemMoveRange, type GanttTask } from "./Gantt";
+import { GanttView, type GanttItemMoveRange, type GanttSpanRef, type GanttTask } from "./Gantt";
 import { addDays, startOfDay } from "./ganttMath";
 
 // Fixture colors from the sanctioned categorical palette (LC-27 precedent) —
@@ -15,7 +15,14 @@ const day = (offset: number) => addDays(startOfDay(new Date()), offset);
 
 const tasks: GanttTask[] = [
   { id: "1", title: "Discovery & scoping", start: day(-9), end: day(-5), progress: 100 },
-  { id: "2", title: "Design review", start: day(-4), end: day(-1), intent: "warning", progress: 100 },
+  {
+    id: "2",
+    title: "Design review",
+    start: day(-4),
+    end: day(-1),
+    intent: "warning",
+    progress: 100,
+  },
   { id: "3", title: "Implementation", start: day(-2), end: day(6), intent: "accent", progress: 55 },
   { id: "4", title: "QA pass", start: day(4), end: day(9), color: blue, progress: 20 },
   { id: "5", title: "Docs & handoff", start: day(7), end: day(11), intent: "success", progress: 0 },
@@ -180,6 +187,72 @@ export const StickyHeader = {
   },
 };
 
+/**
+ * The track shape: open-ended spans, an era row carrying three of them, and a
+ * marker the story owns and the axis handle scrubs.
+ */
+function TrackViewDemo() {
+  const [asOf, setAsOf] = useState<Date>(day(0));
+  const [tracks, setTracks] = useState<GanttTask[]>([
+    {
+      id: "true-up",
+      title: "Federal true-up",
+      spans: [
+        { id: "2026", start: day(-44), end: day(-25), intent: "success" },
+        { id: "2027", start: day(-22), end: day(-3), intent: "success" },
+        { id: "2028", start: day(0), end: day(19), intent: "success" },
+      ],
+    },
+    { id: "vat", title: "VAT registration", start: day(-12), intent: "accent" },
+    { id: "grandfathered", title: "Grandfathered rate", end: day(-6), intent: "warning" },
+    { id: "base", title: "Base policy" },
+    { id: "audit", title: "Audit window", start: day(-3), end: day(9), color: blue, progress: 40 },
+  ]);
+  return (
+    <YStack gap="$2">
+      <Text {...{ "data-testid": "as-of" }} fontSize="$2">
+        {`As of ${formatAbsoluteDate(asOf)} — drag the handle on the time axis to scrub it`}
+      </Text>
+      <GanttView
+        tasks={tracks}
+        zoom="week"
+        markerDate={asOf}
+        onMarkerDateChange={setAsOf}
+        onItemPress={action("onItemPress")}
+        onItemMove={(task: GanttTask, range: GanttItemMoveRange, span?: GanttSpanRef) => {
+          action("onItemMove")(task.id, span?.key, range.start.toISOString());
+          setTracks((prev) =>
+            prev.map((t) => {
+              if (t.id !== task.id) return t;
+              if (!t.spans) return { ...t, start: range.start, end: range.end };
+              return {
+                ...t,
+                spans: t.spans.map((s, i) =>
+                  i === span?.index ? { ...s, start: range.start, end: range.end } : s,
+                ),
+              };
+            }),
+          );
+        }}
+        height={420}
+      />
+    </YStack>
+  );
+}
+
+export const TrackView = {
+  name: "Track View",
+  render: () => <TrackViewDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The same view drawing effective windows rather than a schedule. "Federal true-up" is ONE row carrying three era spans, because one emitter shipping a variant per period is one thing, not three. "VAT registration" has a start and no end and "Grandfathered rate" an end and no start, so each runs off exactly the edge it is open at, uncapped, with a chevron. "Base policy" has no dates at all and draws as a thin half-height rail: painting it edge to edge as a bar would put two dates on screen nobody chose. The marker is a controlled prop — drag its handle on the axis (or focus it and press ArrowLeft/ArrowRight, Shift = 7 days) and the story owns the date. Bounded spans still drag, resize and step by keyboard; open ones get no session, because there is no second edge to hold a duration against.',
+      },
+    },
+  },
+};
+
 export const Empty = {
   render: () => <GanttView tasks={[]} height={420} />,
   parameters: {