@marimo-team/islands 0.25.3-dev273 → 0.25.3-dev279

package/src/components/editor/cell/collapse.tsx

@@ -14,11 +14,10 @@ import { memo } from "react";
 import { Toolbar } from "@/components/layout/toolbar";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
-import { useNotebook } from "@/core/cells/cells";
 import { columnOf, useLayout } from "@/core/cells/layout";
 import type { CellId } from "@/core/cells/ids";
 import { getDescendantsStatus } from "@/core/cells/utils";
-import { cellExecutionInputsAtom } from "@/core/executions";
+import { cellExecutionInputsAtom, cellFreshnessAtom } from "@/core/executions";
 import { cn } from "@/utils/cn";
 
 interface Props {
@@ -66,12 +65,12 @@ export const CollapsedCellBanner: React.FC<{
   cellId: CellId;
   count: number;
 }> = memo(({ onClick, count, cellId }) => {
-  const notebook = useNotebook();
   const executions = useAtomValue(cellExecutionInputsAtom);
+  const freshness = useAtomValue(cellFreshnessAtom);
   const layout = useLayout();
   const states = getDescendantsStatus(
-    notebook,
     executions,
+    freshness,
     columnOf(layout, cellId).folds.get(cellId) ?? [],
   );
 

package/src/components/editor/cell/useRunCells.ts

@@ -3,12 +3,14 @@
 import { closeCompletion } from "@codemirror/autocomplete";
 import { atom, useSetAtom } from "jotai";
 import useEvent from "react-use-event-hook";
+import { toast } from "@/components/ui/use-toast";
 import { getNotebook, type NotebookState } from "@/core/cells/cells";
 import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import { enabledCellIds, staleCellIds } from "@/core/cells/utils";
 import {
   cellExecutionInputsAtom,
+  cellFreshnessAtom,
   submitCells,
   withdrawCells,
 } from "@/core/executions";
@@ -16,6 +18,7 @@ import { getCurrentLanguageAdapter } from "@/core/codemirror/language/commands";
 import { getEditorCodeAsPython } from "@/core/codemirror/language/utils";
 import { useRequestClient } from "@/core/network/requests";
 import type { ExecuteCellsRequest } from "@/core/network/types";
+import { activeDocumentModelAtom } from "@/core/session/active-notebook";
 import { store } from "@/core/state/jotai";
 import { Logger } from "@/utils/Logger";
 
@@ -26,9 +29,35 @@ export const hasRunAnyCellAtom = atom<boolean>(false);
  */
 export function useRunStaleCells() {
   const runCells = useRunCells();
-  const runStaleCells = useEvent(() =>
-    runCells(staleCellIds(getNotebook(), store.get(cellExecutionInputsAtom))),
-  );
+  const runStaleCells = useEvent(async () => {
+    // Freshness reads the confirmed document, so an edit still in flight
+    // reaches the host before the stale cells are chosen.
+    const model = store.get(activeDocumentModelAtom);
+    try {
+      await model?.flush();
+    } catch (error) {
+      if (store.get(activeDocumentModelAtom) !== model) {
+        return;
+      }
+      Logger.warn("Running stale cells with unsynced edits", error);
+      toast({
+        title: "Edits not yet synced",
+        description: "Stale cells were chosen from the last synced source.",
+        variant: "danger",
+      });
+    }
+    // The request was for the notebook that was open when it was made.
+    if (store.get(activeDocumentModelAtom) !== model) {
+      return;
+    }
+    return runCells(
+      staleCellIds(
+        getNotebook(),
+        store.get(cellExecutionInputsAtom),
+        store.get(cellFreshnessAtom),
+      ),
+    );
+  });
   return runStaleCells;
 }
 

package/src/components/editor/errors/__tests__/send-error-report-button.test.tsx

@@ -418,7 +418,7 @@ describe("SendErrorReportButton", () => {
         store.set(
           notebookAtom,
           MockNotebook.notebookState({
-            cellData: { [CELL_ID]: { code: CODE, lastCodeRun: CODE } },
+            cellData: { [CELL_ID]: { code: CODE } },
             cellRuntime: { [CELL_ID]: { output } },
           }),
         );
@@ -429,7 +429,6 @@ describe("SendErrorReportButton", () => {
             [CELL_ID]: {
               ...state.cellData[CELL_ID],
               code: "print('edited')",
-              edited: true,
             },
           },
         }));
@@ -466,7 +465,7 @@ describe("SendErrorReportButton", () => {
       notebookAtom,
       MockNotebook.notebookState({
         cellData: {
-          [CELL_ID]: { code: "unrelated edit", lastCodeRun: "older run" },
+          [CELL_ID]: { code: "unrelated edit" },
         },
         cellRuntime: {
           [CELL_ID]: {

package/src/components/editor/notebook-cell.tsx

@@ -25,7 +25,11 @@ import { StopButton } from "@/components/editor/cell/StopButton";
 import { Toolbar, ToolbarItem } from "@/components/editor/cell/toolbar";
 import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { aiCompletionCellAtom } from "@/core/ai/state";
-import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
+import {
+  consoleOutputIsStale,
+  outputIsLoading,
+  outputIsStale,
+} from "@/core/cells/cell";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import { useIsPendingCut } from "@/core/cells/pending-cut-service";
 import { autocompletionKeymap } from "@/core/codemirror/cm";
@@ -39,8 +43,10 @@ import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
 import {
   type CellExecutionView,
+  type CellFreshness,
   type CellRunStatus,
   useCellExecution,
+  useCellFreshness,
 } from "@/core/executions";
 import type { CellConfig } from "@/core/network/types";
 import { useResizeObserver } from "@/hooks/useResizeObserver";
@@ -320,6 +326,7 @@ const ReadonlyCellComponent = forwardRef(
     const cellData = useCellData(cellId);
     const cellRuntime = useCellRuntime(cellId);
     const execution = useCellExecution(cellId);
+    const freshness = useCellFreshness(cellId);
     const errored = execution.outcome === "error";
     const interrupted = execution.outcome === "interrupted";
     const stopped = execution.outcome === "skipped";
@@ -354,11 +361,7 @@ const ReadonlyCellComponent = forwardRef(
           className={CSSClasses.outputArea}
           cellId={cellId}
           output={cellRuntime.output}
-          stale={outputIsStale(
-            execution,
-            cellRuntime.staleInputs,
-            cellData.edited,
-          )}
+          stale={outputIsStale(execution, freshness, true)}
           loading={outputIsLoading(execution.status)}
         />
       </div>
@@ -387,6 +390,7 @@ const EditableCellComponent = ({
   const cellData = useCellData(cellId);
   const cellRuntime = useCellRuntime(cellId);
   const execution = useCellExecution(cellId);
+  const freshness = useCellFreshness(cellId);
   const errored = execution.outcome === "error";
   const interrupted = execution.outcome === "interrupted";
   const stopped = execution.outcome === "skipped";
@@ -408,9 +412,8 @@ const EditableCellComponent = ({
   const uninstantiated = isUninstantiated(execution);
 
   const needsRun = cellNeedsRun({
-    edited: cellData.edited,
+    freshness,
     interrupted,
-    staleInputs: cellRuntime.staleInputs,
     disabled: cellData.config.disabled,
     blocked: execution.blocked,
   });
@@ -441,11 +444,7 @@ const EditableCellComponent = ({
 
   // console output is cleared immediately on run, so check for queued instead
   // of loading to determine staleness
-  const consoleOutputStale =
-    (execution.status === "queued" ||
-      cellData.edited ||
-      cellRuntime.staleInputs) &&
-    !interrupted;
+  const consoleOutputStale = consoleOutputIsStale(execution, freshness);
 
   // This getter is called during render, so useEvent cannot be used here.
   // oxlint-disable-next-line react/preserve-manual-memoization
@@ -481,11 +480,7 @@ const EditableCellComponent = ({
   const hasOutput = !isOutputEmpty(cellRuntime.output);
   // While presenting, pending edits do not dim the output as stale,
   // matching the read view.
-  const isStaleCell = outputIsStale(
-    execution,
-    cellRuntime.staleInputs,
-    cellData.edited && !isPresenting,
-  );
+  const isStaleCell = outputIsStale(execution, freshness, !isPresenting);
   const hasConsoleOutput = cellRuntime.consoleOutputs.length > 0;
   const cellOutput = userConfig.display.cell_output;
 
@@ -685,7 +680,7 @@ const EditableCellComponent = ({
               <StagedAIDeletionMarker cellId={cellId} />
               <div className="absolute right-2 -top-4 z-10">
                 <CellToolbar
-                  edited={cellData.edited}
+                  edited={freshness.sourceChanged}
                   status={execution.status}
                   blocked={execution.blocked}
                   cellConfig={cellData.config}
@@ -725,12 +720,11 @@ const EditableCellComponent = ({
                   className={cn(
                     isMarkdownCodeHidden && cellOutput === "below" && "top-14",
                   )}
-                  edited={cellData.edited}
                   execution={execution}
+                  freshness={freshness}
                   isCellStatusInline={isCellStatusInline}
                   uninstantiated={uninstantiated}
                   disabled={cellData.config.disabled}
-                  staleInputs={cellRuntime.staleInputs}
                 />
               )}
               <div className="shoulder-bottom hover-action">
@@ -860,29 +854,26 @@ const CellRightSideActions = memo(
   (props: {
     className?: string;
     disabled: boolean | undefined;
-    edited: boolean;
     execution: CellExecutionView;
+    freshness: CellFreshness;
     isCellStatusInline: boolean;
-    staleInputs: boolean;
     uninstantiated: boolean;
   }) => {
     const {
       className,
       disabled = false,
-      edited,
       execution,
+      freshness,
       isCellStatusInline,
-      staleInputs,
       uninstantiated,
     } = props;
 
     const cellStatusComponent = (
       <CellStatusComponent
         status={execution.status}
-        staleInputs={staleInputs}
+        freshness={freshness}
         interrupted={execution.outcome === "interrupted"}
         editing={true}
-        edited={edited}
         disabled={disabled}
         elapsedTime={execution.duration}
         startedAt={execution.startedAt}
@@ -1059,6 +1050,7 @@ const SetupCellComponent = ({
   const cellData = useCellData(cellId);
   const cellRuntime = useCellRuntime(cellId);
   const execution = useCellExecution(cellId);
+  const freshness = useCellFreshness(cellId);
   const errored = execution.outcome === "error";
   const interrupted = execution.outcome === "interrupted";
   const stopped = execution.outcome === "skipped";
@@ -1076,9 +1068,8 @@ const SetupCellComponent = ({
   const uninstantiated = isUninstantiated(execution);
 
   const needsRun = cellNeedsRun({
-    edited: cellData.edited,
+    freshness,
     interrupted,
-    staleInputs: cellRuntime.staleInputs,
     disabled: cellData.config.disabled,
     blocked: execution.blocked,
   });
@@ -1087,11 +1078,7 @@ const SetupCellComponent = ({
 
   // console output is cleared immediately on run, so check for queued instead
   // of loading to determine staleness
-  const consoleOutputStale =
-    (execution.status === "queued" ||
-      cellData.edited ||
-      cellRuntime.staleInputs) &&
-    !interrupted;
+  const consoleOutputStale = consoleOutputIsStale(execution, freshness);
 
   // This getter is called during render, so useEvent cannot be used here.
   // oxlint-disable-next-line react/preserve-manual-memoization
@@ -1199,7 +1186,7 @@ const SetupCellComponent = ({
               <StagedAIDeletionMarker cellId={cellId} />
               <div className="absolute right-2 -top-4 z-10">
                 <CellToolbar
-                  edited={cellData.edited}
+                  edited={freshness.sourceChanged}
                   status={execution.status}
                   blocked={execution.blocked}
                   cellConfig={cellData.config}
@@ -1237,12 +1224,11 @@ const SetupCellComponent = ({
                   frame for running cells. */}
               {!isPresenting && (
                 <CellRightSideActions
-                  edited={cellData.edited}
                   execution={execution}
+                  freshness={freshness}
                   isCellStatusInline={false}
                   uninstantiated={uninstantiated}
                   disabled={cellData.config.disabled}
-                  staleInputs={cellRuntime.staleInputs}
                 />
               )}
               <div className="shoulder-bottom hover-action">

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -37,7 +37,7 @@ import { NumberField } from "@/components/ui/number-field";
 import { Switch } from "@/components/ui/switch";
 import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import type { CellId } from "@/core/cells/ids";
-import { useCellExecution } from "@/core/executions";
+import { useCellExecution, useCellFreshness } from "@/core/executions";
 import type { AppMode } from "@/core/mode";
 import { useIsDragging } from "@/hooks/useIsDragging";
 import { cn } from "@/utils/cn";
@@ -228,7 +228,6 @@ export const GridLayoutRenderer: React.FC<Props> = ({
               mode={mode}
               cellId={cell.id}
               output={cell.output}
-              staleInputs={cell.staleInputs}
               hideWithoutValue={true}
               isScrollable={isScrollable}
               side={side}
@@ -294,7 +293,6 @@ export const GridLayoutRenderer: React.FC<Props> = ({
                 mode={mode}
                 cellId={cell.id}
                 output={cell.output}
-                staleInputs={cell.staleInputs}
                 hideWithoutValue={false}
                 isScrollable={false}
               />
@@ -363,7 +361,6 @@ export const GridLayoutRenderer: React.FC<Props> = ({
                 mode={mode}
                 cellId={cell.id}
                 output={cell.output}
-                staleInputs={cell.staleInputs}
                 hideWithoutValue={false}
                 isScrollable={false}
               />
@@ -375,10 +372,7 @@ export const GridLayoutRenderer: React.FC<Props> = ({
   );
 };
 
-interface GridCellProps extends Pick<
-  CellRuntimeState,
-  "output" | "staleInputs"
-> {
+interface GridCellProps extends Pick<CellRuntimeState, "output"> {
   className?: string;
   code: string;
   cellId: CellId;
@@ -392,7 +386,6 @@ interface GridCellProps extends Pick<
 const GridCell = memo(
   ({
     output,
-    staleInputs,
     cellId,
     mode,
     code,
@@ -402,8 +395,9 @@ const GridCell = memo(
     className,
   }: GridCellProps) => {
     const execution = useCellExecution(cellId);
+    const freshness = useCellFreshness(cellId);
     const loading = outputIsLoading(execution.status);
-    const stale = outputIsStale(execution, staleInputs, false);
+    const stale = outputIsStale(execution, freshness, false);
     const hidden =
       hideWithoutValue &&
       execution.outcome !== null &&

package/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts

@@ -13,8 +13,6 @@ function makeCell(id: string, code = "print('hi')"): CellData {
     id: cellId(id),
     name: id,
     code,
-    edited: false,
-    lastCodeRun: null,
     config: { hide_code: false, disabled: false, column: null },
   };
 }

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -32,7 +32,11 @@ import { getReadonlyCodeDisplay } from "@/core/cells/readonly-code-display";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses } from "@/core/constants";
-import { runtimeStatusAtom, useCellExecution } from "@/core/executions";
+import {
+  runtimeStatusAtom,
+  useCellExecution,
+  useCellFreshness,
+} from "@/core/executions";
 import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import {
@@ -103,7 +107,6 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
         cellOutputArea={userConfig.display.cell_output}
         showCode={showCode && canShowCode}
         mode={mode}
-        staleInputs={cell.staleInputs}
         name={cell.name}
         kiosk={kioskMode}
         showErrorTracebacks={userConfig.runtime.show_tracebacks ?? false}
@@ -300,7 +303,7 @@ const ActionButtons: React.FC<{
 
 interface VerticalCellProps extends Pick<
   CellRuntimeState,
-  "output" | "consoleOutputs" | "staleInputs"
+  "output" | "consoleOutputs"
 > {
   cellOutputArea: "above" | "below";
   cellId: CellId;
@@ -320,7 +323,6 @@ const VerticalCell = memo(
     cellOutputArea,
     cellId,
     config,
-    staleInputs,
     code,
     showCode,
     mode,
@@ -330,11 +332,12 @@ const VerticalCell = memo(
   }: VerticalCellProps) => {
     const cellRef = useRef<HTMLDivElement>(null);
     const execution = useCellExecution(cellId);
+    const freshness = useCellFreshness(cellId);
     const errored = execution.outcome === "error";
     const interrupted = execution.outcome === "interrupted";
     const stopped = execution.outcome === "skipped";
 
-    const outputStale = outputIsStale(execution, staleInputs, false);
+    const outputStale = outputIsStale(execution, freshness, false);
     const loading = outputIsLoading(execution.status);
 
     // Kiosk and not presenting

package/src/components/slides/minimap.tsx

@@ -2,7 +2,7 @@
 
 import { useDeleteCellCallback } from "@/components/editor/cell/useDeleteCell";
 import { outputIsStale } from "@/core/cells/cell";
-import { useCellExecution } from "@/core/executions";
+import { useCellExecution, useCellFreshness } from "@/core/executions";
 import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import { type CellColumnId, type Layout, useLayout } from "@/core/cells/layout";
@@ -629,6 +629,7 @@ const SlideThumbnailCard = ({
 }: SlideThumbnailCardProps) => {
   const { width, height, scale } = dimensions;
   const execution = useCellExecution(cell.id);
+  const freshness = useCellFreshness(cell.id);
   const visual = isNoOutput ? NO_OUTPUT_VISUAL : getSlideTypeVisual(slideType);
   const isSkipped = isNoOutput || slideType === "skip";
 
@@ -679,7 +680,7 @@ const SlideThumbnailCard = ({
               cellId={cell.id}
               status={execution.status}
               output={cell.output}
-              stale={outputIsStale(execution, cell.staleInputs, false)}
+              stale={outputIsStale(execution, freshness, false)}
             />
           )}
         </div>

package/src/components/slides/reveal-component.tsx

@@ -20,7 +20,7 @@ import { Button } from "@/components/ui/button";
 import { useFullScreenElement } from "@/components/ui/fullscreen";
 import { Tooltip } from "@/components/ui/tooltip";
 import { outputIsStale } from "@/core/cells/cell";
-import { useCellExecution } from "@/core/executions";
+import { useCellExecution, useCellFreshness } from "@/core/executions";
 import type { CellId } from "@/core/cells/ids";
 import type { RuntimeCell } from "@/core/cells/types";
 import type { RevealApi, RevealConfig } from "reveal.js";
@@ -354,13 +354,14 @@ function resolveSlideContentStyle(
  */
 export const CellOutputBlock = ({ cell }: { cell: RuntimeCell }) => {
   const execution = useCellExecution(cell.id);
+  const freshness = useCellFreshness(cell.id);
   return (
     <div className="flex flex-col" {...cellDomProps(cell.id, cell.name)}>
       <CellOutputSlide
         cellId={cell.id}
         status={execution.status}
         output={cell.output}
-        stale={outputIsStale(execution, cell.staleInputs, false)}
+        stale={outputIsStale(execution, freshness, false)}
       />
     </div>
   );

package/src/components/slides/slide-cell-view.tsx

@@ -23,7 +23,7 @@ import {
 } from "@/core/cells/utils";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
-import { useCellExecution } from "@/core/executions";
+import { useCellExecution, useCellFreshness } from "@/core/executions";
 import { connectionAtom } from "@/core/network/connection";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
@@ -64,6 +64,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
   const cellOutputPosition = userConfig.display.cell_output;
   const hasOutput = cell.output != null;
   const execution = useCellExecution(cell.id);
+  const freshness = useCellFreshness(cell.id);
   const errored = execution.outcome === "error";
   const interrupted = execution.outcome === "interrupted";
   const stopped = execution.outcome === "skipped";
@@ -71,9 +72,8 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
   const uninstantiated = isUninstantiated(execution);
 
   const needsRun = cellNeedsRun({
-    edited: cell.edited,
+    freshness,
     interrupted,
-    staleInputs: cell.staleInputs,
     disabled: cell.config.disabled,
     blocked: execution.blocked,
   });
@@ -96,7 +96,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
       cellId={cell.id}
       status={execution.status}
       output={cell.output}
-      stale={outputIsStale(execution, cell.staleInputs, false)}
+      stale={outputIsStale(execution, freshness, false)}
     />
   );
 
@@ -106,8 +106,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
         editing={true}
         status={execution.status}
         disabled={cell.config.disabled ?? false}
-        staleInputs={cell.staleInputs}
-        edited={cell.edited}
+        freshness={freshness}
         interrupted={interrupted}
         elapsedTime={execution.duration}
         startedAt={execution.startedAt}
@@ -123,7 +122,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
       />
       <div className="flex items-center shadow-none gap-1">
         <RunButton
-          edited={cell.edited}
+          edited={freshness.sourceChanged}
           status={execution.status}
           blocked={execution.blocked}
           needsRun={needsRun}
@@ -192,6 +191,7 @@ export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
   const [userConfig] = useUserConfig();
   const cellOutputPosition = userConfig.display.cell_output;
   const execution = useCellExecution(cell.id);
+  const freshness = useCellFreshness(cell.id);
 
   const display = useMemo(() => getReadonlyCodeDisplay(cell.code), [cell.code]);
 
@@ -200,7 +200,7 @@ export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
       cellId={cell.id}
       status={execution.status}
       output={cell.output}
-      stale={outputIsStale(execution, cell.staleInputs, false)}
+      stale={outputIsStale(execution, freshness, false)}
     />
   );