@marimo-team/islands 0.25.3-dev267 → 0.25.3-dev268

package/src/stories/cell-status.stories.tsx

@@ -5,6 +5,7 @@ import {
   type CellStatusComponentProps,
 } from "@/components/editor/cell/CellStatus";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import type { Milliseconds } from "@/utils/time";
 
 const meta: Meta<typeof CellStatusComponent> = {
   title: "CellStatusComponent",
@@ -39,7 +40,7 @@ Edited.args = {
   edited: true,
   interrupted: false,
   disabled: false,
-  elapsedTime: 100,
+  elapsedTime: 100 as Milliseconds,
 };
 
 export const Interrupted = Template.bind({});
@@ -49,7 +50,7 @@ Interrupted.args = {
   edited: false,
   interrupted: true,
   disabled: false,
-  elapsedTime: 50,
+  elapsedTime: 50 as Milliseconds,
 };
 
 export const Running = Template.bind({});
@@ -59,7 +60,7 @@ Running.args = {
   edited: false,
   interrupted: true,
   disabled: false,
-  elapsedTime: 50,
+  elapsedTime: 50 as Milliseconds,
 };
 
 export const Queued = Template.bind({});
@@ -69,7 +70,7 @@ Queued.args = {
   edited: false,
   interrupted: true,
   disabled: false,
-  elapsedTime: 50,
+  elapsedTime: 50 as Milliseconds,
 };
 
 export const Disabled = Template.bind({});
@@ -85,7 +86,8 @@ Disabled.args = {
 export const DisabledTransitively = Template.bind({});
 DisabledTransitively.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   edited: false,
   interrupted: false,
   disabled: false,
@@ -95,7 +97,8 @@ DisabledTransitively.args = {
 export const DisabledTransitivelyAndEdited = Template.bind({});
 DisabledTransitivelyAndEdited.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   edited: true,
   interrupted: false,
   disabled: false,
@@ -105,7 +108,8 @@ DisabledTransitivelyAndEdited.args = {
 export const Stale = Template.bind({});
 Stale.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   staleInputs: true,
   edited: false,
   interrupted: false,
@@ -116,7 +120,8 @@ Stale.args = {
 export const StaleAndDisabled = Template.bind({});
 StaleAndDisabled.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   staleInputs: true,
   edited: false,
   interrupted: false,
@@ -127,7 +132,8 @@ StaleAndDisabled.args = {
 export const EditedStaleAndDisabled = Template.bind({});
 EditedStaleAndDisabled.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   staleInputs: true,
   interrupted: false,
   disabled: true,
@@ -137,7 +143,8 @@ EditedStaleAndDisabled.args = {
 export const EditedAndStale = Template.bind({});
 EditedAndStale.args = {
   editing: true,
-  status: "disabled-transitively",
+  status: "idle",
+  blocked: true,
   edited: true,
   interrupted: false,
   disabled: false,

package/src/stories/cell.stories.tsx

@@ -15,19 +15,14 @@ import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
 import type { CellConfig } from "@/core/network/types";
 import { ConnectionState } from "@/core/session/types";
-import type { Milliseconds, Seconds } from "@/utils/time";
 import { Cell as EditorCell } from "../components/editor/notebook-cell";
 import { TooltipProvider } from "../components/ui/tooltip";
 
 type Story = StoryObj<typeof Cell>;
 
 interface CellOverrides {
-  runElapsedTimeMs?: Milliseconds;
   output?: CellRuntimeState["output"];
   edited?: boolean;
-  interrupted?: boolean;
-  errored?: boolean;
-  status?: CellRuntimeState["status"];
   staleInputs?: boolean;
   config?: CellConfig;
 }
@@ -51,22 +46,14 @@ const Cell: React.FC<{
           column: null,
         },
         lastCodeRun: null,
-        lastExecutionTime: null,
       },
     },
     cellIds: [cid],
     cellRuntime: {
       [cid]: createCellRuntimeState({
         output: overrides.output ?? null,
-        runElapsedTimeMs: overrides.runElapsedTimeMs ?? (10 as Milliseconds),
-        status: overrides.status ?? "idle",
         consoleOutputs: [],
-        interrupted: overrides.interrupted ?? false,
-        errored: overrides.errored ?? false,
-        stopped: false,
         staleInputs: overrides.staleInputs ?? false,
-        runStartTimestamp: 0 as Seconds,
-        lastRunStartTimestamp: 0 as Seconds,
         debuggerActive: false,
         outline: null,
       }),
@@ -121,7 +108,6 @@ export const WithOutput: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
           output: {
             channel: "output",
             data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",
@@ -139,7 +125,6 @@ export const WithLargeOutput: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
           output: {
             channel: "output",
             data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>".repeat(
@@ -160,7 +145,6 @@ export const UnsavedEditsOutput: Story = {
       <TooltipProvider>
         <Cell
           overrides={{
-            runElapsedTimeMs: 20 as Milliseconds,
             edited: true,
             output: {
               channel: "output",
@@ -181,8 +165,6 @@ export const InterruptedOutput: Story = {
       <TooltipProvider>
         <Cell
           overrides={{
-            runElapsedTimeMs: 20 as Milliseconds,
-            interrupted: true,
             output: {
               channel: "output",
               data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",
@@ -201,8 +183,6 @@ export const WithError: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          errored: true,
           output: {
             channel: "output",
             data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",
@@ -220,7 +200,6 @@ export const Disabled: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
           config: {
             disabled: true,
             hide_code: false,
@@ -243,8 +222,6 @@ export const DisabledTransitively: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          status: "disabled-transitively",
           output: {
             channel: "output",
             data: "This data is stale because a parent is disabled",
@@ -262,8 +239,6 @@ export const StaleStatus: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          status: "disabled-transitively",
           staleInputs: true,
           output: {
             channel: "output",
@@ -282,8 +257,6 @@ export const StaleAndEditedStatus: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          status: "disabled-transitively",
           staleInputs: true,
           edited: true,
           output: {
@@ -303,13 +276,11 @@ export const DisabledAndStaleStatus: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
           config: {
             column: null,
             disabled: true,
             hide_code: false,
           },
-          status: "disabled-transitively",
           staleInputs: true,
           output: {
             channel: "output",
@@ -328,8 +299,6 @@ export const Running: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          runElapsedTimeMs: 20 as Milliseconds,
-          status: "running",
           output: {
             channel: "output",
             data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",

package/src/stories/layout/vertical/one-column.stories.tsx

@@ -14,7 +14,6 @@ import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
 import { ConnectionState } from "@/core/session/types";
-import type { Milliseconds, Seconds } from "@/utils/time";
 import { CellArray } from "../../../components/editor/renderers/cell-array";
 import { CellsRenderer } from "../../../components/editor/renderers/cells-renderer";
 import { TooltipProvider } from "../../../components/ui/tooltip";
@@ -50,7 +49,6 @@ LongReprA()`,
 
 print('hello')
 LongReprA()`,
-      lastExecutionTime: null,
     },
   },
   cellIds: [cellId],
@@ -62,8 +60,6 @@ LongReprA()`,
         mimetype: "text/plain",
         timestamp: 1_686_863_710,
       },
-      runElapsedTimeMs: 8 as Milliseconds,
-      status: "idle",
       consoleOutputs: [
         {
           channel: "stdout",
@@ -72,12 +68,7 @@ LongReprA()`,
           timestamp: 1_686_863_705,
         },
       ],
-      interrupted: false,
-      errored: false,
-      stopped: false,
       staleInputs: false,
-      runStartTimestamp: 0 as Seconds,
-      lastRunStartTimestamp: 0 as Seconds,
       debuggerActive: false,
       outline: null,
     }),

package/src/utils/time.ts

@@ -31,6 +31,11 @@ export class Time {
     return new Time(Date.now() as Milliseconds);
   }
 
+  /** The instant an ISO 8601 timestamp names. */
+  public static parse(iso: string): Time {
+    return new Time(Date.parse(iso) as Milliseconds);
+  }
+
   private constructor(ms: Milliseconds) {
     this.ms = ms;
   }
@@ -39,6 +44,11 @@ export class Time {
     return this.ms;
   }
 
+  /** How long after `start` this instant is. */
+  public since(start: Time): Milliseconds {
+    return (this.ms - start.ms) as Milliseconds;
+  }
+
   public toSeconds(): Seconds {
     return (this.ms / 1000) as Seconds;
   }