@ifc-lite/viewer 1.17.6 → 1.18.0

package/src/components/viewer/schedule/GanttTaskTree.tsx

@@ -0,0 +1,250 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * GanttTaskTree — left pane showing the hierarchical task list with
+ * expand/collapse chevrons, milestone diamond markers, and duration.
+ */
+
+import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { ChevronRight, ChevronDown, Diamond, CircleDot, Flag, GripVertical } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { FlattenedTask } from './schedule-utils';
+import { formatDurationShort } from './schedule-utils';
+
+export const GANTT_ROW_HEIGHT = 28;
+/**
+ * Height of the sticky column-header row. MUST match the timeline's tick
+ * header so scroll-sync between the two panes lands on the same row —
+ * otherwise the highlight band / task bars drift by one row.
+ */
+export const GANTT_HEADER_HEIGHT = 28;
+
+interface GanttTaskTreeProps {
+  rows: FlattenedTask[];
+  selectedGlobalIds: Set<string>;
+  hoveredGlobalId: string | null;
+  onToggleExpand: (globalId: string) => void;
+  onSelect: (globalId: string, multi: boolean) => void;
+  /** Click on empty-space below the rows clears the selection. */
+  onBackgroundClick?: () => void;
+  /** User finished a drag — move the source row to the index of the target row. */
+  onReorder?: (sourceGlobalId: string, targetIndex: number) => void;
+  onHover: (globalId: string | null) => void;
+  scrollTop: number;
+  onScroll: (scrollTop: number) => void;
+}
+
+export const GanttTaskTree = memo(function GanttTaskTree({
+  rows,
+  selectedGlobalIds,
+  hoveredGlobalId,
+  onToggleExpand,
+  onSelect,
+  onBackgroundClick,
+  onReorder,
+  onHover,
+  scrollTop,
+  onScroll,
+}: GanttTaskTreeProps) {
+  // Drag-to-reorder state. Uses native HTML5 drag-and-drop for
+  // accessibility (screen-readers can speak the cursor transitions)
+  // and cross-browser reliability. `dropIndex` drives the horizontal
+  // drop-indicator line between rows.
+  const dragSourceRef = useRef<string | null>(null);
+  const [dropIndex, setDropIndex] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    onScroll(e.currentTarget.scrollTop);
+  }, [onScroll]);
+
+  // Sync externally-controlled scrollTop (e.g. timeline → task tree alignment).
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (el.scrollTop !== scrollTop) {
+      el.scrollTop = scrollTop;
+    }
+  }, [scrollTop]);
+
+  /**
+   * Click on the scroll container itself (not a row/cell/button) clears
+   * the Gantt selection. Uses `e.currentTarget === e.target` so clicks
+   * that bubble up from a row don't also fire deselect.
+   */
+  const handleContainerClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.currentTarget === e.target) onBackgroundClick?.();
+  }, [onBackgroundClick]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-full overflow-y-auto overflow-x-hidden border-r bg-background"
+      onScroll={handleScroll}
+      onClick={handleContainerClick}
+      data-testid="gantt-task-tree"
+    >
+      {/*
+        Sticky column header — mirrors the timeline's tick header so both
+        scroll containers have identical content layouts and `scrollTop` sync
+        lands on the same row.
+      */}
+      <div
+        className="sticky top-0 z-10 bg-card/90 backdrop-blur-sm border-b flex items-center justify-between px-2 text-[10px] uppercase tracking-wide text-muted-foreground font-medium"
+        style={{ height: GANTT_HEADER_HEIGHT }}
+      >
+        <span>Task</span>
+        <span>Duration</span>
+      </div>
+      <div style={{ height: rows.length * GANTT_ROW_HEIGHT }}>
+        {/*
+          ARIA grid semantics: the table is a grid, each <tr> keeps its
+          native/`row` role (so `aria-selected` is valid), and the focusable
+          primary cell carries `tabIndex` + keyboard handlers. This keeps the
+          chevron <button> as a real button (not nested inside a `button`).
+        */}
+        <table
+          className="w-full text-xs border-collapse"
+          role="grid"
+          aria-multiselectable="true"
+        >
+          <tbody>
+            {rows.map((row, rowIdx) => {
+              const { task, depth, hasChildren, expanded } = row;
+              const isSelected = selectedGlobalIds.has(task.globalId);
+              const isHovered = hoveredGlobalId === task.globalId;
+              const label = task.name || task.identification || task.globalId.slice(0, 8);
+              const showDropAbove = onReorder && dropIndex === rowIdx;
+              return (
+                <tr
+                  key={task.globalId}
+                  role="row"
+                  aria-selected={isSelected}
+                  style={{ height: GANTT_ROW_HEIGHT }}
+                  className={cn(
+                    'border-b border-border/40 transition-colors select-none',
+                    isSelected && 'bg-primary/15',
+                    !isSelected && isHovered && 'bg-muted/60',
+                    !isSelected && !isHovered && 'hover:bg-muted/40',
+                    showDropAbove && 'border-t-2 border-t-primary',
+                  )}
+                  onMouseEnter={() => onHover(task.globalId)}
+                  onMouseLeave={() => onHover(null)}
+                  draggable={onReorder ? true : undefined}
+                  onDragStart={onReorder ? (e) => {
+                    dragSourceRef.current = task.globalId;
+                    // dataTransfer must be set on Firefox for drag to fire.
+                    e.dataTransfer.effectAllowed = 'move';
+                    e.dataTransfer.setData('text/plain', task.globalId);
+                  } : undefined}
+                  onDragOver={onReorder ? (e) => {
+                    if (!dragSourceRef.current || dragSourceRef.current === task.globalId) return;
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = 'move';
+                    setDropIndex(rowIdx);
+                  } : undefined}
+                  onDragLeave={onReorder ? () => {
+                    if (dropIndex === rowIdx) setDropIndex(null);
+                  } : undefined}
+                  onDrop={onReorder ? (e) => {
+                    e.preventDefault();
+                    const src = dragSourceRef.current;
+                    if (src && src !== task.globalId) onReorder(src, rowIdx);
+                    dragSourceRef.current = null;
+                    setDropIndex(null);
+                  } : undefined}
+                  onDragEnd={onReorder ? () => {
+                    dragSourceRef.current = null;
+                    setDropIndex(null);
+                  } : undefined}
+                >
+                  <td
+                    role="gridcell"
+                    tabIndex={0}
+                    aria-label={label}
+                    className={cn(
+                      'px-1 whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer',
+                      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary',
+                    )}
+                    style={{ paddingLeft: 4 + depth * 14 }}
+                    onClick={(e) => onSelect(task.globalId, e.shiftKey || e.ctrlKey || e.metaKey)}
+                    onKeyDown={(e) => {
+                      // The cell handles its own key events; the nested
+                      // chevron <button> retains native activation via
+                      // `stopPropagation` inside its own handlers.
+                      if (e.key !== 'Enter' && e.key !== ' ') return;
+                      e.preventDefault();
+                      onSelect(task.globalId, e.shiftKey || e.ctrlKey || e.metaKey);
+                    }}
+                  >
+                    <span className="inline-flex items-center gap-1 group">
+                      {onReorder && (
+                        <GripVertical
+                          className="w-3 h-3 text-muted-foreground/30 group-hover:text-muted-foreground/70 transition-colors shrink-0"
+                          aria-hidden
+                        />
+                      )}
+                      {hasChildren ? (
+                        <button
+                          type="button"
+                          aria-expanded={expanded}
+                          aria-label={`${expanded ? 'Collapse' : 'Expand'} ${label}`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onToggleExpand(task.globalId);
+                          }}
+                          onKeyDown={(e) => {
+                            // Let the browser activate the button natively;
+                            // don't let Enter/Space bubble and also trigger
+                            // row selection in the parent cell.
+                            if (e.key === 'Enter' || e.key === ' ') e.stopPropagation();
+                          }}
+                          className="w-4 h-4 flex items-center justify-center text-muted-foreground hover:text-foreground"
+                        >
+                          {expanded ? (
+                            <ChevronDown className="w-3 h-3" />
+                          ) : (
+                            <ChevronRight className="w-3 h-3" />
+                          )}
+                        </button>
+                      ) : (
+                        <span className="w-4 h-4 inline-block" />
+                      )}
+
+                      {task.isMilestone ? (
+                        <Diamond className="w-3 h-3 text-amber-500 fill-amber-500" />
+                      ) : task.taskTime?.isCritical ? (
+                        <Flag className="w-3 h-3 text-red-500 fill-red-500" />
+                      ) : (
+                        <CircleDot className="w-3 h-3 text-primary/70" />
+                      )}
+
+                      <span
+                        className={cn(
+                          'truncate',
+                          task.isMilestone && 'font-semibold',
+                          task.taskTime?.isCritical && 'text-red-600',
+                        )}
+                        title={task.name || task.globalId}
+                      >
+                        {label}
+                      </span>
+                    </span>
+                  </td>
+                  <td
+                    role="gridcell"
+                    className="px-2 text-muted-foreground font-mono text-right whitespace-nowrap"
+                  >
+                    {formatDurationShort(task.taskTime?.scheduleDuration)}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+});

package/src/components/viewer/schedule/GanttTimeline.tsx

@@ -0,0 +1,305 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * GanttTimeline — right pane SVG timeline. Renders tick header, task bars,
+ * milestone diamonds, dependency arrows, and the playback cursor.
+ */
+
+import { memo, useMemo, useCallback, useRef, useLayoutEffect, useState } from 'react';
+import type { ScheduleExtraction } from '@ifc-lite/parser';
+import { cn } from '@/lib/utils';
+import { taskStartEpoch, taskFinishEpoch } from '@/store';
+import type { GanttTimeScale, ScheduleTimeRange } from '@/store';
+import type { FlattenedTask } from './schedule-utils';
+import {
+  computeTicks,
+  formatTickLabel,
+  timeToX,
+} from './schedule-utils';
+import { GANTT_ROW_HEIGHT, GANTT_HEADER_HEIGHT } from './GanttTaskTree';
+import { useGanttBarDrag } from './useGanttBarDrag';
+import { GanttTaskBar } from './GanttTaskBar';
+import { GanttDependencyArrows } from './GanttDependencyArrows';
+import { GanttDragTooltip } from './GanttDragTooltip';
+
+// Alias kept for local readability; binds to the shared constant so the
+// timeline header and the task-tree header stay the same height.
+const HEADER_HEIGHT = GANTT_HEADER_HEIGHT;
+
+interface GanttTimelineProps {
+  rows: FlattenedTask[];
+  data: ScheduleExtraction;
+  range: ScheduleTimeRange;
+  scale: GanttTimeScale;
+  playbackTime: number;
+  selectedGlobalIds: Set<string>;
+  hoveredGlobalId: string | null;
+  onSelect: (globalId: string, multi: boolean) => void;
+  onHover: (globalId: string | null) => void;
+  onScrubSeek: (time: number) => void;
+  scrollTop: number;
+  onScroll: (scrollTop: number) => void;
+}
+
+export const GanttTimeline = memo(function GanttTimeline({
+  rows,
+  data,
+  range,
+  scale,
+  playbackTime,
+  selectedGlobalIds,
+  hoveredGlobalId,
+  onSelect,
+  onHover,
+  onScrubSeek,
+  scrollTop,
+  onScroll,
+}: GanttTimelineProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [pixelWidth, setPixelWidth] = useState(1000);
+
+  // Drag state machine for bar shift / resize. Returned `live` drives
+  // the floating tooltip rendered below the timeline SVG.
+  const barDrag = useGanttBarDrag({ range, pixelWidth, scale });
+
+  /**
+   * Minimum pixels per time-scale unit. When the schedule spans more units
+   * than the container can show at this density, we grow the SVG past the
+   * pane width and the container scrolls horizontally — instead of
+   * squeezing bars into unreadable 2-pixel stripes with overlapping tick
+   * labels. Tuned so "Week" scale gives ~80 px per week (readable labels,
+   * click-accurate bars) and larger scales get proportionally more.
+   */
+  const MIN_PX_PER_TICK: Record<GanttTimeScale, number> = {
+    hour: 40,
+    day: 60,
+    week: 80,
+    month: 100,
+    year: 140,
+  };
+  const MS_PER_TICK_FOR_SCALE: Record<GanttTimeScale, number> = {
+    hour: 3_600_000,
+    day: 86_400_000,
+    week: 7 * 86_400_000,
+    month: 30 * 86_400_000,
+    year: 365 * 86_400_000,
+  };
+
+  // Resize observer keeps pixelWidth synced with the right pane width, but
+  // grows when the schedule is too long to fit at the configured density.
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const recompute = () => {
+      const span = Math.max(1, range.end - range.start);
+      const tickMs = MS_PER_TICK_FOR_SCALE[scale];
+      const minPerTick = MIN_PX_PER_TICK[scale];
+      const required = Math.ceil((span / tickMs) * minPerTick);
+      setPixelWidth(Math.max(200, el.clientWidth, required));
+    };
+    const ro = new ResizeObserver(recompute);
+    ro.observe(el);
+    recompute();
+    return () => ro.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [range.start, range.end, scale]);
+
+  const ticks = useMemo(
+    () => computeTicks(range.start, range.end, scale),
+    [range, scale],
+  );
+
+  const rowsHeight = rows.length * GANTT_ROW_HEIGHT;
+
+  /** Pre-compute per-task y-row lookup for sequence arrows. */
+  const taskRowIndex = useMemo(() => {
+    const m = new Map<string, number>();
+    for (let i = 0; i < rows.length; i++) m.set(rows[i].task.globalId, i);
+    return m;
+  }, [rows]);
+
+  /**
+   * Memoize `{ start, finish }` epoch tuples per task. The rAF playback loop
+   * writes `playbackTime` on every frame (~60 Hz), so re-parsing ISO
+   * datetimes / running the duration regex inside the `rows.map` was showing
+   * up as a hot path for schedules with hundreds of rows. Recompute only when
+   * the rows themselves change (task adds / reorders / schedule reloads).
+   */
+  const taskEpochs = useMemo(() => {
+    const m = new Map<string, { start: number | undefined; finish: number | undefined }>();
+    for (const row of rows) {
+      m.set(row.task.globalId, {
+        start: taskStartEpoch(row.task),
+        finish: taskFinishEpoch(row.task),
+      });
+    }
+    return m;
+  }, [rows]);
+
+  const cursorX = useMemo(
+    () => timeToX(playbackTime, range.start, range.end, pixelWidth),
+    [playbackTime, range, pixelWidth],
+  );
+
+  const handleContainerScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    onScroll(e.currentTarget.scrollTop);
+  }, [onScroll]);
+
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (el.scrollTop !== scrollTop) {
+      el.scrollTop = scrollTop;
+    }
+  }, [scrollTop]);
+
+  const handleTimelineClick = useCallback((e: React.MouseEvent<SVGSVGElement>) => {
+    const target = e.currentTarget;
+    const rect = target.getBoundingClientRect();
+    // `rect.left` tracks the svg's visible left edge, which shifts when the
+    // container scrolls horizontally. Re-anchor to the SVG origin by adding
+    // the scroll offset — keeps click→time mapping correct once horizontal
+    // zoom produces overflow. No-op today because pixelWidth === clientWidth.
+    const scrollLeft = containerRef.current?.scrollLeft ?? 0;
+    const x = e.clientX - rect.left + scrollLeft;
+    const pct = Math.min(1, Math.max(0, x / pixelWidth));
+    onScrubSeek(range.start + pct * (range.end - range.start));
+  }, [pixelWidth, range, onScrubSeek]);
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-full overflow-auto relative bg-gradient-to-b from-muted/10 to-transparent"
+      onScroll={handleContainerScroll}
+      data-testid="gantt-timeline"
+    >
+      {/* Sticky header */}
+      <div
+        className="sticky top-0 z-10 bg-card/90 backdrop-blur-sm border-b"
+        style={{ height: HEADER_HEIGHT }}
+      >
+        <svg width={pixelWidth} height={HEADER_HEIGHT} className="block">
+          {ticks.map((t, i) => {
+            const x = timeToX(t, range.start, range.end, pixelWidth);
+            return (
+              <g key={`t-${i}`}>
+                <line x1={x} y1={0} x2={x} y2={HEADER_HEIGHT} stroke="currentColor" strokeOpacity={0.15} />
+                <text
+                  x={x + 3}
+                  y={HEADER_HEIGHT - 8}
+                  className="text-[10px] fill-muted-foreground font-mono"
+                >
+                  {formatTickLabel(t, scale)}
+                </text>
+              </g>
+            );
+          })}
+        </svg>
+      </div>
+
+      {/* Timeline body */}
+      <svg
+        width={pixelWidth}
+        height={rowsHeight}
+        className="block cursor-crosshair"
+        onClick={handleTimelineClick}
+      >
+        {/* Vertical grid */}
+        {ticks.map((t, i) => {
+          const x = timeToX(t, range.start, range.end, pixelWidth);
+          return (
+            <line
+              key={`g-${i}`}
+              x1={x}
+              y1={0}
+              x2={x}
+              y2={rowsHeight}
+              stroke="currentColor"
+              strokeOpacity={0.08}
+            />
+          );
+        })}
+
+        {/* Row backgrounds + hover/selection highlight */}
+        {rows.map((row, i) => {
+          const y = i * GANTT_ROW_HEIGHT;
+          const isSel = selectedGlobalIds.has(row.task.globalId);
+          const isHov = hoveredGlobalId === row.task.globalId;
+          const highlight = isSel ? 'rgba(99, 102, 241, 0.14)' : isHov ? 'rgba(148, 148, 148, 0.09)' : 'transparent';
+          return (
+            <rect
+              key={`bg-${row.task.globalId}`}
+              x={0}
+              y={y}
+              width={pixelWidth}
+              height={GANTT_ROW_HEIGHT}
+              fill={highlight}
+              onMouseEnter={() => onHover(row.task.globalId)}
+              onMouseLeave={() => onHover(null)}
+            />
+          );
+        })}
+
+        {/* Dependency arrows (drawn before bars so bars overlap) */}
+        <GanttDependencyArrows
+          sequences={data.sequences}
+          taskRowIndex={taskRowIndex}
+          taskEpochs={taskEpochs}
+          rangeStart={range.start}
+          rangeEnd={range.end}
+          pixelWidth={pixelWidth}
+        />
+
+        {/* Task bars — use the memoized taskEpochs map so we don't re-parse
+            ISO datetimes on every playback tick. */}
+        {rows.map((row, i) => {
+          const { task } = row;
+          const epochs = taskEpochs.get(task.globalId);
+          const start = epochs?.start;
+          const finish = epochs?.finish;
+          if (start === undefined || finish === undefined) return null;
+          return (
+            <GanttTaskBar
+              key={task.globalId}
+              task={task}
+              rowIndex={i}
+              start={start}
+              finish={finish}
+              rangeStart={range.start}
+              rangeEnd={range.end}
+              pixelWidth={pixelWidth}
+              playbackTime={playbackTime}
+              isSelected={selectedGlobalIds.has(task.globalId)}
+              isDragging={barDrag.live.taskGlobalId === task.globalId}
+              onHover={onHover}
+              onSelect={onSelect}
+              onPointerDown={barDrag.onPointerDown}
+            />
+          );
+        })}
+
+        {/* Playback cursor */}
+        <line
+          x1={cursorX}
+          y1={0}
+          x2={cursorX}
+          y2={rowsHeight}
+          stroke="#0ea5e9"
+          strokeWidth={1.5}
+          strokeDasharray="4 2"
+          className={cn('pointer-events-none drop-shadow')}
+        />
+      </svg>
+
+      {/* Live-drag tooltip — floats next to the cursor, absolute-
+          positioned inside the scroll container so it scrolls with
+          everything else. Only visible while a drag is active. */}
+      {barDrag.live.taskGlobalId && (
+        <GanttDragTooltip live={barDrag.live} />
+      )}
+    </div>
+  );
+});
+