@marimo-team/islands 0.16.5 → 0.17.1

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

@@ -1,15 +1,23 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { closeCompletion } from "@codemirror/autocomplete";
+import { atom, useSetAtom } from "jotai";
 import useEvent from "react-use-event-hook";
-import { getNotebook, useCellActions } from "@/core/cells/cells";
+import {
+  getNotebook,
+  type NotebookState,
+  useCellActions,
+} from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { enabledCellIds, staleCellIds } from "@/core/cells/utils";
 import { getCurrentLanguageAdapter } from "@/core/codemirror/language/commands";
 import { getEditorCodeAsPython } from "@/core/codemirror/language/utils";
 import { useRequestClient } from "@/core/network/requests";
+import type { RunRequest } from "@/core/network/types";
 import { Logger } from "@/utils/Logger";
 
+export const hasRunAnyCellAtom = atom<boolean>(false);
+
 /**
  * Creates a function that runs all cells that have been edited or interrupted.
  */
@@ -45,42 +53,66 @@ export function useRunAllCells() {
 export function useRunCells() {
   const { prepareForRun } = useCellActions();
   const { sendRun } = useRequestClient();
+  const setHasRunAnyCell = useSetAtom(hasRunAnyCellAtom);
 
-  const runCells = useEvent(async (cellIds: CellId[]) => {
+  const runCellsMemoized = useEvent(async (cellIds: CellId[]) => {
     if (cellIds.length === 0) {
       return;
     }
 
-    const { cellHandles, cellData } = getNotebook();
-
-    const codes: string[] = [];
-    for (const cellId of cellIds) {
-      const ref = cellHandles[cellId];
-      const ev = ref?.current?.editorView;
-      let code: string;
-      // Performs side-effects that must run whenever the cell is run, but doesn't
-      // actually run the cell.
-      if (ev) {
-        // Skip close on markdown, since we autorun, otherwise we'll close the
-        // completion each time.
-        if (getCurrentLanguageAdapter(ev) !== "markdown") {
-          closeCompletion(ev);
-        }
-        // Prefer code from editor
-        code = getEditorCodeAsPython(ev);
-      } else {
-        code = cellData[cellId]?.code || "";
-      }
+    const notebook = getNotebook();
 
-      codes.push(code);
-      prepareForRun({ cellId });
-    }
+    // Set a flag that a user has manually run at least one cell.
+    setHasRunAnyCell(true);
 
-    // Send the run request to the Kernel
-    await sendRun({ cellIds: cellIds, codes: codes }).catch((error) => {
-      Logger.error(error);
-    });
+    return runCells({ cellIds, sendRun, prepareForRun, notebook });
   });
 
-  return runCells;
+  return runCellsMemoized;
+}
+
+export async function runCells({
+  cellIds,
+  sendRun,
+  prepareForRun,
+  notebook,
+}: {
+  cellIds: CellId[];
+  sendRun: (request: RunRequest) => Promise<null>;
+  prepareForRun: (action: { cellId: CellId }) => void;
+  notebook: NotebookState;
+}) {
+  if (cellIds.length === 0) {
+    return;
+  }
+
+  const { cellHandles, cellData } = notebook;
+
+  const codes: string[] = [];
+  for (const cellId of cellIds) {
+    const ref = cellHandles[cellId];
+    const ev = ref?.current?.editorView;
+    let code: string;
+    // Performs side-effects that must run whenever the cell is run, but doesn't
+    // actually run the cell.
+    if (ev) {
+      // Skip close on markdown, since we autorun, otherwise we'll close the
+      // completion each time.
+      if (getCurrentLanguageAdapter(ev) !== "markdown") {
+        closeCompletion(ev);
+      }
+      // Prefer code from editor
+      code = getEditorCodeAsPython(ev);
+    } else {
+      code = cellData[cellId]?.code || "";
+    }
+
+    codes.push(code);
+    prepareForRun({ cellId });
+  }
+
+  // Send the run request to the Kernel
+  await sendRun({ cellIds: cellIds, codes: codes }).catch((error) => {
+    Logger.error(error);
+  });
 }

package/src/components/editor/chrome/panels/cache-panel.tsx

@@ -0,0 +1,216 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { DatabaseZapIcon, RefreshCwIcon, Trash2Icon } from "lucide-react";
+import React, { useState } from "react";
+import { useLocale } from "react-aria";
+import { Spinner } from "@/components/icons/spinner";
+import { Button } from "@/components/ui/button";
+import { ConfirmationButton } from "@/components/ui/confirmation-button";
+import { toast } from "@/components/ui/use-toast";
+import { cacheInfoAtom } from "@/core/cache/requests";
+import { useRequestClient } from "@/core/network/requests";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { cn } from "@/utils/cn";
+import { formatBytes, formatTime } from "@/utils/formatting";
+import { prettyNumber } from "@/utils/numbers";
+import { PanelEmptyState } from "./empty-state";
+
+const CachePanel = () => {
+  const { clearCache, getCacheInfo } = useRequestClient();
+  const cacheInfo = useAtomValue(cacheInfoAtom);
+  const [purging, setPurging] = useState(false);
+  const { locale } = useLocale();
+
+  const { isPending, isFetching, refetch } = useAsyncData(async () => {
+    await getCacheInfo();
+    // Artificially spin the icon if the request is really fast
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }, []);
+
+  const handlePurge = async () => {
+    try {
+      setPurging(true);
+      await clearCache();
+      toast({
+        title: "Cache purged",
+        description: "All cached data has been cleared",
+      });
+      // Request updated cache info after purge
+      refetch();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description:
+          error instanceof Error ? error.message : "Failed to purge cache",
+        variant: "danger",
+      });
+    } finally {
+      setPurging(false);
+    }
+  };
+
+  // Show spinner only on initial load
+  if (isPending && !cacheInfo) {
+    return <Spinner size="medium" centered={true} />;
+  }
+
+  const refreshButton = (
+    <Button variant="outline" size="sm" onClick={refetch} disabled={isFetching}>
+      {isFetching ? (
+        <Spinner size="small" className="w-4 h-4 mr-2" />
+      ) : (
+        <RefreshCwIcon className="w-4 h-4 mr-2" />
+      )}
+      Refresh
+    </Button>
+  );
+
+  if (!cacheInfo) {
+    return (
+      <PanelEmptyState
+        title="No cache data"
+        description="Cache information is not available."
+        icon={<DatabaseZapIcon />}
+        action={refreshButton}
+      />
+    );
+  }
+
+  const totalHits = cacheInfo.hits;
+  const totalMisses = cacheInfo.misses;
+  const totalTime = cacheInfo.time;
+  const diskTotal = cacheInfo.disk_total;
+  const diskToFree = cacheInfo.disk_to_free;
+
+  const totalRequests = totalHits + totalMisses;
+  const hitRate = totalRequests > 0 ? (totalHits / totalRequests) * 100 : 0;
+
+  // Show empty state if no cache activity
+  if (totalRequests === 0) {
+    return (
+      <PanelEmptyState
+        title="No cache activity"
+        description="The cache has not been used yet. Cached functions will appear here once they are executed."
+        icon={<DatabaseZapIcon />}
+        action={refreshButton}
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-auto">
+      <div className="flex flex-col gap-4 p-4 h-full">
+        {/* Header with Refresh Button */}
+        <div className="flex items-center justify-end">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={refetch}
+            disabled={isFetching}
+          >
+            <RefreshCwIcon
+              className={cn(
+                "h-4 w-4 text-muted-foreground hover:text-foreground",
+                isFetching && "animate-[spin_0.5s]",
+              )}
+            />
+          </Button>
+        </div>
+
+        {/* Statistics Section */}
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold text-foreground">Statistics</h3>
+          <div className="grid grid-cols-2 gap-3">
+            <StatCard
+              label="Time saved"
+              value={formatTime(totalTime, locale)}
+              description="Total execution time saved"
+            />
+            <StatCard
+              label="Hit rate"
+              value={
+                totalRequests > 0 ? `${prettyNumber(hitRate, locale)}%` : "—"
+              }
+              description={`${prettyNumber(totalHits, locale)} hits / ${prettyNumber(totalRequests, locale)} total`}
+            />
+            <StatCard
+              label="Cache hits"
+              value={prettyNumber(totalHits, locale)}
+              description="Successful cache retrievals"
+            />
+            <StatCard
+              label="Cache misses"
+              value={prettyNumber(totalMisses, locale)}
+              description="Cache not found"
+            />
+          </div>
+        </div>
+
+        {/* Storage Section */}
+        {diskTotal > 0 && (
+          <div className="space-y-3 pt-2 border-t">
+            <h3 className="text-sm font-semibold text-foreground">Storage</h3>
+            <div className="grid grid-cols-1 gap-3">
+              <StatCard
+                label="Disk usage"
+                value={formatBytes(diskTotal, locale)}
+                description={
+                  diskToFree > 0
+                    ? `${formatBytes(diskToFree, locale)} can be freed`
+                    : "Cache storage on disk"
+                }
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="my-auto" />
+
+        {/* Actions Section */}
+        <div className="pt-2 border-t">
+          <ConfirmationButton
+            title="Purge cache?"
+            description="This will permanently delete all cached data. This action cannot be undone."
+            confirmText="Purge"
+            destructive={true}
+            onConfirm={handlePurge}
+          >
+            <Button
+              variant="outlineDestructive"
+              size="xs"
+              disabled={purging}
+              className="w-full"
+            >
+              {purging ? (
+                <Spinner size="small" className="w-3 h-3 mr-2" />
+              ) : (
+                <Trash2Icon className="w-3 h-3 mr-2" />
+              )}
+              Purge Cache
+            </Button>
+          </ConfirmationButton>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const StatCard: React.FC<{
+  label: string;
+  value: string;
+  description?: string;
+}> = ({ label, value, description }) => {
+  return (
+    <div className="flex flex-col gap-1 p-3 rounded-lg border bg-card">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="text-lg font-semibold">{value}</span>
+      {description && (
+        <span className="text-xs text-muted-foreground">{description}</span>
+      )}
+    </div>
+  );
+};
+
+export default CachePanel;

package/src/components/editor/chrome/panels/empty-state.tsx

@@ -18,7 +18,9 @@ export const PanelEmptyState = ({
     <div className="mx-6 my-6 flex flex-col gap-2">
       <div className="flex flex-row gap-2 items-center">
         {icon &&
-          React.cloneElement(icon, { className: "text-accent-foreground" })}
+          React.cloneElement(icon, {
+            className: "text-accent-foreground flex-shrink-0",
+          })}
         <span className="mt-1 text-accent-foreground">{title}</span>
       </div>
       <span className="text-muted-foreground text-sm">{description}</span>

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -211,7 +211,7 @@ const InstallPackageForm: React.FC<{
           ) : (
             <Tooltip content="Change package manager">
               <BoxIcon
-                onClick={() => openSettings("packageManagement")}
+                onClick={() => openSettings("packageManagementAndData")}
                 className="mr-2 h-4 w-4 shrink-0 opacity-50 hover:opacity-80 cursor-pointer"
               />
             </Tooltip>

package/src/components/editor/chrome/state.ts

@@ -3,7 +3,7 @@
 import { useAtomValue } from "jotai";
 import { z } from "zod";
 import { createReducerAndAtoms } from "@/utils/createReducer";
-import { ZodLocalStorage } from "@/utils/localStorage";
+import { ZodLocalStorage } from "@/utils/storage/typed";
 import type { PanelType } from "./types";
 
 export interface ChromeState {

package/src/components/editor/chrome/types.ts

@@ -5,6 +5,7 @@ import {
   BotMessageSquareIcon,
   BoxIcon,
   DatabaseIcon,
+  DatabaseZapIcon,
   FileTextIcon,
   FolderTreeIcon,
   FunctionSquareIcon,
@@ -13,7 +14,6 @@ import {
   type LucideIcon,
   NetworkIcon,
   NotebookPenIcon,
-  ScrollTextIcon,
   SquareDashedBottomCodeIcon,
   TextSearchIcon,
   XCircleIcon,
@@ -35,6 +35,7 @@ export type PanelType =
   | "scratchpad"
   | "chat"
   | "agents"
+  | "cache"
   | "secrets"
   | "logs";
 
@@ -46,13 +47,29 @@ export interface PanelDescriptor {
   position: "sidebar" | "footer";
 }
 
+/* Panels are ordered in roughly decreasing order of importance as well as
+ * logically grouped.
+ *
+ * 1. Must-have panels first.
+ * 2. Panels that can add cells to the editor.
+ * 3. Nice-to-have observability panels.
+ */
 export const PANELS: PanelDescriptor[] = [
+  // 1. Must-have panels.
+  //
+  // The files panel is at the top to orient
+  // users within their filesystem and give
+  // them a quick glance at their project structure,
+  // without having to leave their editor.
   {
     type: "files",
     Icon: FolderTreeIcon,
     tooltip: "View files",
     position: "sidebar",
   },
+  // Because notebooks uniquely have data in RAM,
+  // it's important to give humans visibility into
+  // what that data is.
   {
     type: "variables",
     Icon: FunctionSquareIcon,
@@ -65,24 +82,18 @@ export const PANELS: PanelDescriptor[] = [
     tooltip: "Explore data sources",
     position: "sidebar",
   },
-  {
-    type: "dependencies",
-    Icon: NetworkIcon,
-    tooltip: "Explore dependencies",
-    position: "sidebar",
-  },
+  // Every notebook has a package environment that must
+  // be managed.
   {
     type: "packages",
     Icon: BoxIcon,
     tooltip: "Manage packages",
     position: "sidebar",
   },
-  {
-    type: "outline",
-    Icon: ScrollTextIcon,
-    tooltip: "View outline",
-    position: "sidebar",
-  },
+  // 2. "Add cells" panels.
+  //
+  // We start with chat because it's the easiest
+  // way to add new cells to the editor.
   {
     type: "chat",
     Icon: BotMessageSquareIcon,
@@ -90,12 +101,38 @@ export const PANELS: PanelDescriptor[] = [
     position: "sidebar",
   },
   {
+    // TODO(akshayka): Consider merging with chat panel
+    // before release.
     type: "agents",
     Icon: HatGlassesIcon,
     tooltip: "Agents",
     position: "sidebar",
     hidden: !getFeatureFlag("external_agents"),
   },
+  // Scratchpad is the only way users can
+  // code without DAG restrictions, so it is
+  // privileged.
+  {
+    type: "scratchpad",
+    Icon: NotebookPenIcon,
+    tooltip: "Scratchpad",
+    position: "sidebar",
+  },
+  {
+    // TODO(akshayka): Consider making snippets default
+    // off, user configuration to enable.
+    type: "snippets",
+    Icon: SquareDashedBottomCodeIcon,
+    tooltip: "Snippets",
+    position: "sidebar",
+  },
+  // 3. Nice-to-have observability panels.
+  //
+  // Utility panels that provide observability
+  // into the state or structure of the notebook. These
+  // observability panels are less crucial than variables
+  // or datasets, so they are positioned at the end of the
+  // sidebar.
   {
     type: "documentation",
     Icon: TextSearchIcon,
@@ -109,15 +146,18 @@ export const PANELS: PanelDescriptor[] = [
     position: "sidebar",
   },
   {
-    type: "tracing",
-    Icon: ActivityIcon,
-    tooltip: "Tracing",
+    // TODO(akshayka): Consider making dependencies
+    // default off; the minimap is a more effective
+    // overview.
+    type: "dependencies",
+    Icon: NetworkIcon,
+    tooltip: "Explore dependencies",
     position: "sidebar",
   },
   {
-    type: "snippets",
-    Icon: SquareDashedBottomCodeIcon,
-    tooltip: "Snippets",
+    type: "tracing",
+    Icon: ActivityIcon,
+    tooltip: "Tracing",
     position: "sidebar",
   },
   {
@@ -128,11 +168,15 @@ export const PANELS: PanelDescriptor[] = [
     hidden: isWasm(),
     position: "sidebar",
   },
+  // TODO(akshayka): The cache panel should not be default shown,
+  // even when it's out of feature flag. (User config to
+  // turn it on.)
   {
-    type: "scratchpad",
-    Icon: NotebookPenIcon,
-    tooltip: "Scratchpad",
+    type: "cache",
+    Icon: DatabaseZapIcon,
+    tooltip: "Manage cache",
     position: "sidebar",
+    hidden: !getFeatureFlag("cache_panel"),
   },
   {
     type: "errors",

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -25,6 +25,7 @@ import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-p
 import { useChromeActions, useChromeState } from "../state";
 import { Minimap } from "./minimap";
 import { PanelsWrapper } from "./panels";
+import { PendingAICells } from "./pending-ai-cells";
 import { createStorage } from "./storage";
 import { handleDragging } from "./utils";
 
@@ -56,6 +57,7 @@ const LazySecretsPanel = React.lazy(() => import("../panels/secrets-panel"));
 const LazySnippetsPanel = React.lazy(() => import("../panels/snippets-panel"));
 const LazyTracingPanel = React.lazy(() => import("../panels/tracing-panel"));
 const LazyVariablePanel = React.lazy(() => import("../panels/variable-panel"));
+const LazyCachePanel = React.lazy(() => import("../panels/cache-panel"));
 
 export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
   const { isSidebarOpen, isTerminalOpen, selectedPanel } = useChromeState();
@@ -176,6 +178,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             {selectedPanel === "logs" && <LazyLogsPanel />}
             {selectedPanel === "tracing" && <LazyTracingPanel />}
             {selectedPanel === "secrets" && <LazySecretsPanel />}
+            {selectedPanel === "cache" && <LazyCachePanel />}
           </TooltipProvider>
         </Suspense>
       </div>
@@ -270,6 +273,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         <ContextAwarePanel />
       </PanelGroup>
       <Minimap />
+      <PendingAICells />
       <ErrorBoundary>
         <TooltipProvider>
           <Footer />

package/src/components/editor/chrome/wrapper/minimap.tsx

@@ -64,6 +64,7 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
 
   return (
     <button
+      type="button"
       data-node-id={cell.id}
       className={cn(
         "group bg-transparent text-left w-full flex relative justify-between items-center",
@@ -107,6 +108,7 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
         width="1"
         height="1"
       >
+        <title>Cell dependency connections for cell {cell.id}</title>
         {isSelected ? (
           <SelectedCell
             cell={cell}

package/src/components/editor/chrome/wrapper/pending-ai-cells.tsx

@@ -0,0 +1,108 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { useAtomValue, useStore } from "jotai";
+import { ChevronDown, ChevronUp, SparklesIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { stagedAICellsAtom, useStagedCells } from "@/core/ai/staged-cells";
+import type { CellId } from "@/core/cells/ids";
+import { getNextIndex } from "@/utils/arrays";
+import { cn } from "@/utils/cn";
+import {
+  AcceptCompletionButton,
+  RejectCompletionButton,
+} from "../../ai/completion-handlers";
+import { acceptStagedCell, rejectStagedCell } from "../../cell/StagedAICell";
+import { useRunCells } from "../../cell/useRunCells";
+import { scrollAndHighlightCell } from "../../links/cell-link";
+
+export const PendingAICells: React.FC = () => {
+  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+
+  const stagedAiCells = useAtomValue(stagedAICellsAtom);
+  const listStagedCells = [...stagedAiCells.keys()];
+  const store = useStore();
+  const { deleteStagedCell, removeStagedCell } = useStagedCells(store);
+  const runCell = useRunCells();
+
+  if (stagedAiCells.size === 0) {
+    return null;
+  }
+
+  const scrollToCell = (cellId: CellId) => {
+    scrollAndHighlightCell(cellId, "focus");
+  };
+
+  const clickNext = (direction: "up" | "down") => {
+    const newIndex = getNextIndex(
+      currentIndex,
+      listStagedCells.length,
+      direction,
+    );
+    setCurrentIndex(newIndex);
+    scrollToCell(listStagedCells[newIndex]);
+  };
+
+  const acceptAllCompletions = () => {
+    for (const [cellId, edit] of stagedAiCells) {
+      acceptStagedCell(cellId, edit, removeStagedCell, deleteStagedCell);
+    }
+  };
+
+  const rejectAllCompletions = () => {
+    for (const [cellId, edit] of stagedAiCells) {
+      rejectStagedCell(cellId, edit, removeStagedCell, deleteStagedCell);
+    }
+  };
+
+  const runAllCells = () => {
+    runCell(listStagedCells);
+  };
+
+  const cyanShadow = "shadow-[0_0_6px_0_#00A2C733]";
+
+  return (
+    <div
+      className={cn(
+        "fixed bottom-16 left-1/2 transform -translate-x-1/2 z-50 bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/80 border border-border rounded-lg px-3 py-2 flex items-center justify-between gap-2.5 w-100",
+        cyanShadow,
+      )}
+    >
+      <SparklesIcon className="h-4 w-4 text-primary" />
+
+      <div className="flex items-center">
+        <Button variant="ghost" size="icon" onClick={() => clickNext("up")}>
+          <ChevronUp className="h-3.5 w-3.5" />
+        </Button>
+        <span className="text-xs font-mono min-w-[3.5rem] text-center">
+          {currentIndex === null
+            ? `${listStagedCells.length} pending`
+            : `${currentIndex + 1} / ${listStagedCells.length}`}
+        </span>
+        <Button variant="ghost" size="icon" onClick={() => clickNext("down")}>
+          <ChevronDown className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      <div className="h-5 w-px bg-border" />
+
+      <div className="flex items-center gap-1.5">
+        <AcceptCompletionButton
+          multipleCompletions={true}
+          onAccept={acceptAllCompletions}
+          isLoading={false}
+          size="xs"
+          buttonStyles="h-6.5"
+          playButtonStyles="h-6.5"
+          runCell={runAllCells}
+        />
+        <RejectCompletionButton
+          multipleCompletions={true}
+          onDecline={rejectAllCompletions}
+          size="xs"
+          className="h-6.5"
+        />
+      </div>
+    </div>
+  );
+};