One schedule, two ways to see it

const TimelineContext = createContext<TimelineValue | null>(null);

export function useTimeline() {
  const ctx = useContext(TimelineContext);
  if (!ctx) throw new Error("Timeline.* must be used inside <Timeline>");
  return ctx;
}

export function Timeline({ layout, start, end, step, children }) {
  // Build the time maths once; every child reads it from context.
  const axis = useMemo(
    () => createAxis({ start, end, step }),
    [start, end, step],
  );

  return (
    <TimelineContext.Provider value={{ layout, ...axis }}>
      <div data-layout={layout}>{children}</div>
    </TimelineContext.Provider>
  );
}

function createAxis({ start, end, step, pxPerStep = 24 }) {
  const pxPerMinute = pxPerStep / step;

  return {
    // time → position: where to draw a booking
    toPosition: (time) => minutesBetween(start, time) * pxPerMinute,

    // position → time: where a drag landed, snapped to the step
    toTime: (px) => {
      const minutes = px / pxPerMinute;
      const snapped = Math.round(minutes / step) * step;
      return addMinutes(start, snapped);
    },

    // hour lines / tick marks for <Timeline.Axis />
    ticks: () => range(start, end, 60),
  };
}

function TimelineItem({ start, end, children }) {
  const { layout, toPosition, start: viewStart, end: viewEnd } = useTimeline();

  const from = toPosition(max(start, viewStart));
  const size = toPosition(min(end, viewEnd)) - from;

  // The only place layout matters: which CSS properties to set.
  const style = layout === "vertical"
    ? { top: from, height: size }
    : { left: from, width: size };

  return (
    <div
      style={style}
      data-clip-start={start < viewStart || undefined}
      data-clip-end={end > viewEnd || undefined}
    >
      {children}
    </div>
  );
}

// A slot template stores a rule, not every slot:
//   "FREQ=WEEKLY;BYDAY=MO,WE;BYHOUR=9"  → every Mon & Wed at 9am
function slotsInWindow(template, from, to) {
  return rrulestr(template.rrule)
    .between(from, to, true)
    .map((start) => ({
      start,
      end: addMinutes(start, template.durationMinutes),
    }));
}

const BOOKINGS = gql`
  subscription Bookings($from: timestamptz!, $to: timestamptz!) {
    bookings(where: { start: { _gte: $from, _lt: $to } }) {
      id  start  end  patient  room_id
    }
  }
`;

function LabSchedule({ view }) {
  const { data } = useSubscription(BOOKINGS, {
    variables: windowFor(view),
  });

  // Hasura pushes every change; React re-renders the timeline.
  return <Timeline {...view}>{renderLanes(data, view)}</Timeline>;
}