Feat/schedule visualizer

content/src/components/schedule-visualizer/ScheduleVisualizer.css

@@ -0,0 +1,40 @@
+.arrow {
+  position: relative;
+  display: inline-block;
+  height: 2px;
+  margin: 12px 0;
+  border-radius: 9999px;
+  background-color: #000000;
+}
+
+.arrow::before,
+.arrow::after {
+  content: "";
+  position: absolute;
+  top: calc(50% - 1px);
+  right: 0;
+  width: 19px;
+  height: 2px;
+  border-radius: 9999px;
+  background-color: #000000;
+  transform-origin: calc(100% - 1px) 50%;
+}
+
+.arrow::before {
+  transform: rotate(45deg);
+}
+
+.arrow::after {
+  transform: rotate(-45deg);
+}
+
+@media (prefers-color-scheme: dark) {
+  .arrow {
+    background-color: #ffffff;
+  }
+
+  .arrow::before,
+  .arrow::after {
+    background-color: #ffffff;
+  }
+}

content/src/components/schedule-visualizer/ScheduleVisualizer.tsx

@@ -0,0 +1,112 @@
+import React from "react"
+
+import "./ScheduleVisualizer.css"
+import { Duration, Effect, Schedule } from "effect"
+import { sample } from "./run-schedule"
+
+export type ScheduleVisualizerProps = {
+  items: ReadonlyArray<ScheduleItem>
+}
+
+type ScheduleItem = {
+  value: string
+  interval: Duration.Duration | undefined
+  clock: Duration.Duration
+  hasNewValue: boolean
+}
+
+export const ScheduleVisualizer: React.FC<ScheduleVisualizerProps> = ({
+  items
+}) => {
+  return (
+    <div className="not-content mb-12">
+      <div className="relative">
+        <div className="w-full absolute inset-0 top-[70px] z-10">
+          <div className="arrow w-full" />
+          <div className="absolute -bottom-4 right-0 text-sm">time</div>
+          <div className="absolute -top-[54px] right-0 text-sm">
+            output
+          </div>
+        </div>
+        <div className="flex space-x-0.5 z-20 relative p-4 w-full overflow-x-auto">
+          {items.map((item, index) => (
+            <ScheduleItem key={index} {...item} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ScheduleItem: React.FC<ScheduleItem> = ({
+  value,
+  interval,
+  clock,
+  hasNewValue
+}) => {
+  return (
+    <div className="h-[80px] flex flex-col space-y-2">
+      <div className="-ml-[4px] text-sm pb-2">{value}</div>
+      <div
+        className={`w-3 h-3 rounded-full bg-red-500 flex-shrink-0 -ml-[5px] ${
+          hasNewValue ? "opacity-100" : "opacity-0"
+        }`}
+      />
+      <div className="flex space-x-0.5 items-center">
+        <div className="w-px h-4 bg-white" />
+        <div
+          style={{
+            width: `${durationToPixels(
+              interval ?? Duration.seconds(0)
+            )}px`,
+            background: "#DAF0FF",
+            border: "1px solid #0095FF",
+            color: "#007BD3"
+          }}
+          className="font-bold text-center p-0.5 text-xs overflow-hidden"
+        >
+          {interval && Duration.toMillis(interval) > 0
+            ? Duration.format(interval)
+            : "0"}
+        </div>
+      </div>
+      <div
+        className="-ml-[4px] text-sm"
+        style={{
+          maxWidth: `${durationToPixels(
+            interval ?? Duration.seconds(0)
+          )}px`
+        }}
+      >
+        {Duration.toMillis(clock) === 0 ? "0s" : Duration.format(clock)}
+      </div>
+    </div>
+  )
+}
+
+const durationToPixels = (duration: Duration.Duration) => {
+  return Math.max(20, Math.round(Duration.toSeconds(duration) * 60))
+}
+
+export const scheduleToItems = async (
+  schedule: Schedule.Schedule<unknown>,
+  limit: number
+) => {
+  let accDuration = Duration.millis(0)
+  return sample(schedule, limit).pipe(
+    Effect.map((_) =>
+      _.map((duration) => {
+        const clock = accDuration
+        accDuration = Duration.sum(accDuration, duration)
+        return {
+          interval: duration,
+          clock,
+          hasNewValue: true,
+          value: ""
+        } satisfies ScheduleItem
+      })
+    ),
+    Effect.tapErrorCause(Effect.logError),
+    Effect.runPromise
+  )
+}

content/src/components/schedule-visualizer/ScheduleVisualizerAstro.astro

@@ -0,0 +1,19 @@
+---
+import { Schedule } from "effect"
+import { ScheduleVisualizer, scheduleToItems } from "./ScheduleVisualizer"
+// import { Code } from "astro:components"
+
+type Props = {
+  code: string
+  schedule: Schedule.Schedule<unknown>
+}
+
+const limit = 10
+const items = await scheduleToItems(Astro.props.schedule, limit)
+---
+
+<slot name="code" />
+
+<ScheduleVisualizer 
+  items={items}
+/>

content/src/components/schedule-visualizer/run-schedule.ts

@@ -0,0 +1,35 @@
+import {
+  Array,
+  Duration,
+  Effect,
+  Fiber,
+  Schedule,
+  TestClock,
+  TestContext
+} from "effect"
+
+export const sample = (
+  schedule: Schedule.Schedule<any>,
+  limit: number
+) => {
+  return Effect.gen(function* () {
+    const output: Array<Duration.Duration> = []
+
+    const fiber = yield* Effect.gen(function* () {
+      const now = yield* TestClock.currentTimeMillis
+      const previous = Array.reduce(output, Duration.zero, Duration.sum)
+
+      output.push(Duration.subtract(now, previous))
+    }).pipe(
+      Effect.schedule(
+        schedule.pipe(Schedule.intersect(Schedule.recurs(limit)))
+      ),
+      Effect.fork
+    )
+
+    yield* TestClock.adjust(Infinity)
+    yield* Fiber.join(fiber)
+
+    return output
+  }).pipe(Effect.provide(TestContext.TestContext))
+}

content/src/content/docs/docs/scheduling/schedule-visualizer.mdx

@@ -0,0 +1,48 @@
+---
+title: Schedule Visualizer
+---
+
+import ScheduleVisualizer from "@/components/schedule-visualizer/ScheduleVisualizerAstro.astro"
+import { Duration, Schedule } from "effect"
+
+<ScheduleVisualizer schedule={Schedule.fixed(Duration.seconds(1))}>
+	<Fragment slot="code">
+	```ts
+	Schedule.fixed(Duration.seconds(1))
+	```
+	</Fragment>
+</ScheduleVisualizer>
+
+<ScheduleVisualizer
+	schedule={Schedule.recurs(2)}
+>
+	<Fragment slot="code">
+	```ts
+	Schedule.recurs(2)
+	```
+	</Fragment>
+</ScheduleVisualizer>
+
+<ScheduleVisualizer
+	schedule={Schedule.fibonacci(Duration.seconds(1))}
+>
+	<Fragment slot="code">
+	```ts
+	Schedule.fibonacci(Duration.seconds(1))
+	```
+	</Fragment>
+</ScheduleVisualizer>
+
+<ScheduleVisualizer
+	schedule={Schedule.exponential(Duration.millis(10), 4).pipe(Schedule.andThenEither(Schedule.spaced(Duration.seconds(1))), Schedule.compose(Schedule.elapsed), Schedule.whileOutput(Duration.lessThanOrEqualTo(Duration.seconds(10))))}
+>
+	<Fragment slot="code">
+	```ts
+	Schedule.exponential(Duration.millis(10), 4).pipe(
+		Schedule.andThenEither(Schedule.spaced(Duration.seconds(1))),
+		Schedule.compose(Schedule.elapsed),
+		Schedule.whileOutput(Duration.lessThanOrEqualTo(Duration.seconds(10)))
+	)
+	```
+	</Fragment>
+</ScheduleVisualizer>