@marimo-team/islands 0.16.4 → 0.17.0

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

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { DatabaseIcon, PlusIcon } from "lucide-react";
+import { DatabaseIcon, DiamondPlusIcon, PlusIcon } from "lucide-react";
 import { Button } from "@/components/editor/inputs/Inputs";
 import {
   ContextMenu,
@@ -69,7 +69,7 @@ const CreateCellButtonContextMenu = (props: {
   children: React.ReactNode;
 }) => {
   const { children, onClick } = props;
-  const { createNewCell } = useCellActions();
+  const { createNewCell, addSetupCellIfDoesntExist } = useCellActions();
 
   if (!onClick) {
     return children;
@@ -125,6 +125,18 @@ const CreateCellButtonContextMenu = (props: {
           </div>
           SQL cell
         </ContextMenuItem>
+        <ContextMenuItem
+          key="setup"
+          onSelect={(evt) => {
+            evt.stopPropagation();
+            addSetupCellIfDoesntExist({});
+          }}
+        >
+          <div className="mr-3 text-muted-foreground">
+            <DiamondPlusIcon size={13} strokeWidth={1.5} />
+          </div>
+          Setup cell
+        </ContextMenuItem>
       </ContextMenuContent>
     </ContextMenu>
   );

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

@@ -67,6 +67,7 @@ export interface CellEditorProps
   // DOM node where the editorView will be mounted
   editorViewParentRef?: React.RefObject<HTMLDivElement | null>;
   showHiddenCode: (opts?: { focus?: boolean }) => void;
+  outputArea?: "above" | "below";
 }
 
 const CellEditorInternal = ({
@@ -88,6 +89,7 @@ const CellEditorInternal = ({
   languageAdapter,
   setLanguageAdapter,
   showLanguageToggles = true,
+  outputArea,
 }: CellEditorProps) => {
   const [aiCompletionCell, setAiCompletionCell] = useAtom(aiCompletionCellAtom);
   const deleteCell = useDeleteCellCallback();
@@ -187,6 +189,7 @@ const CellEditorInternal = ({
       hotkeys: new OverridingHotkeyProvider(userConfig.keymap.overrides ?? {}),
       diagnosticsConfig: userConfig.diagnostics,
       displayConfig: userConfig.display,
+      inlineAiTooltip: userConfig.ai?.inline_tooltip ?? false,
     });
 
     extensions.push(
@@ -406,6 +409,7 @@ const CellEditorInternal = ({
     <AiCompletionEditor
       enabled={aiCompletionCell?.cellId === cellId}
       initialPrompt={aiCompletionCell?.initialPrompt}
+      triggerImmediately={aiCompletionCell?.triggerImmediately}
       currentCode={editorViewRef.current?.state.doc.toString() ?? code}
       currentLanguageAdapter={languageAdapter}
       declineChange={useEvent(() => {
@@ -432,6 +436,8 @@ const CellEditorInternal = ({
         editorViewRef.current?.focus();
         setAiCompletionCell(null);
       })}
+      runCell={handleRunCell}
+      outputArea={outputArea}
     >
       <div className="relative w-full" {...navigationProps}>
         {showHideButton && (

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 (err) {
+      toast({
+        title: "Error",
+        description:
+          err instanceof Error ? err.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/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

@@ -56,6 +56,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 +177,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
             {selectedPanel === "logs" && <LazyLogsPanel />}
             {selectedPanel === "tracing" && <LazyTracingPanel />}
             {selectedPanel === "secrets" && <LazySecretsPanel />}
+            {selectedPanel === "cache" && <LazyCachePanel />}
           </TooltipProvider>
         </Suspense>
       </div>

package/src/components/editor/database/schemas.ts

@@ -18,11 +18,7 @@ function passwordField() {
 
 function tokenField(label?: string, required?: boolean) {
   let field: z.ZodString | z.ZodOptional<z.ZodString> = z.string();
-  if (required) {
-    field = field.nonempty();
-  } else {
-    field = field.optional();
-  }
+  field = required ? field.nonempty() : field.optional();
 
   field = field.describe(
     FieldOptions.of({
@@ -50,11 +46,7 @@ function warehouseNameField() {
 
 function uriField(label?: string, required?: boolean) {
   let field: z.ZodString | z.ZodOptional<z.ZodString> = z.string();
-  if (required) {
-    field = field.nonempty();
-  } else {
-    field = field.optional();
-  }
+  field = required ? field.nonempty() : field.optional();
 
   return field.describe(
     FieldOptions.of({ label: label || "URI", optionRegex: ".*uri.*" }),