@marimo-team/islands 0.16.4 → 0.17.0

package/src/core/errors/errors.ts

@@ -1,21 +1,26 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import type { EditorView } from "@codemirror/view";
 import { invariant } from "@/utils/invariant";
+import { getDatasourceContext } from "../ai/context/providers/datasource";
+import type { AiCompletionCell } from "../ai/state";
 import type { CellId } from "../cells/ids";
 import type { MarimoError } from "../kernel/messages";
 import { wrapInFunction } from "./utils";
 
+interface AIFix {
+  setAiCompletionCell: (opts: AiCompletionCell) => void;
+  triggerFix: boolean;
+}
+
 export interface AutoFix {
   title: string;
   description: string;
+  fixType: "manual" | "ai";
   onFix: (ctx: {
     addCodeBelow: (code: string) => void;
     editor: EditorView | undefined;
     cellId: CellId;
-    setAiCompletionCell?: (cell: {
-      cellId: CellId;
-      initialPrompt?: string;
-    }) => void;
+    aiFix?: AIFix;
   }) => Promise<void>;
 }
 
@@ -31,6 +36,7 @@ export function getAutoFixes(
         title: "Fix: Wrap in a function",
         description:
           "Make this cell's variables local by wrapping the cell in a function.",
+        fixType: "manual",
         onFix: async (ctx) => {
           invariant(ctx.editor, "Editor is null");
           const code = wrapInFunction(ctx.editor.state.doc.toString());
@@ -59,6 +65,7 @@ export function getAutoFixes(
       {
         title: `Fix: Add '${cellCode}'`,
         description: "Add a new cell for the missing import",
+        fixType: "manual",
         onFix: async (ctx) => {
           ctx.addCodeBelow(cellCode);
         },
@@ -75,10 +82,17 @@ export function getAutoFixes(
       {
         title: "Fix with AI",
         description: "Fix the SQL statement",
+        fixType: "ai",
         onFix: async (ctx) => {
-          ctx.setAiCompletionCell?.({
+          const datasourceContext = getDatasourceContext(ctx.cellId);
+          let initialPrompt = `Fix the SQL statement: ${error.msg}.`;
+          if (datasourceContext) {
+            initialPrompt += `\nDatabase schema: ${datasourceContext}`;
+          }
+          ctx.aiFix?.setAiCompletionCell({
             cellId: ctx.cellId,
-            initialPrompt: `Fix the SQL statement: ${error.msg}`,
+            initialPrompt: initialPrompt,
+            triggerImmediately: ctx.aiFix.triggerFix,
           });
         },
       },

package/src/core/islands/bridge.ts

@@ -180,6 +180,8 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   listSecretKeys = throwNotImplemented;
   writeSecret = throwNotImplemented;
   invokeAiTool = throwNotImplemented;
+  clearCache = throwNotImplemented;
+  getCacheInfo = throwNotImplemented;
 
   private async putControlRequest(operation: object) {
     await this.rpc.proxy.request.bridge({

package/src/core/islands/main.ts

@@ -185,6 +185,10 @@ export async function initialize() {
         return;
       case "reconnected":
         return;
+      case "cache-cleared":
+        return;
+      case "cache-info-fetched":
+        return;
       default:
         logNever(msg.data);
     }

package/src/core/kernel/messages.ts

@@ -43,6 +43,7 @@ export type SecretKeysResult = OperationMessageData<"secret-keys-result">;
 export type StartupLogs = OperationMessageData<"startup-logs">;
 export type CellMessage = OperationMessageData<"cell-op">;
 export type Capabilities = OperationMessageData<"kernel-ready">["capabilities"];
+export type CacheInfoFetched = OperationMessageData<"cache-info-fetched">;
 
 export type MessageOperationUnion = schemas["KnownUnions"]["operation"];
 

package/src/core/network/CachingRequestRegistry.ts

@@ -56,9 +56,9 @@ export class CachingRequestRegistry<REQ, RES> {
 
     const promise = this.delegate.request(req);
     this.cache.set(key, promise);
-    return promise.catch((err) => {
+    return promise.catch((error) => {
       this.cache.delete(key);
-      throw err;
+      throw error;
     });
   }
 

package/src/core/network/requests-network.ts

@@ -409,5 +409,19 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponse);
     },
+    clearCache: async () => {
+      return getClient()
+        .POST("/api/cache/clear", {
+          body: {},
+        })
+        .then(handleResponseReturnNull);
+    },
+    getCacheInfo: async () => {
+      return getClient()
+        .POST("/api/cache/info", {
+          body: {},
+        })
+        .then(handleResponseReturnNull);
+    },
   };
 }

package/src/core/network/requests-static.ts

@@ -86,5 +86,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     listSecretKeys: throwNotInEditMode,
     writeSecret: throwNotInEditMode,
     invokeAiTool: throwNotInEditMode,
+    clearCache: throwNotInEditMode,
+    getCacheInfo: throwNotInEditMode,
   };
 }

package/src/core/network/requests-toasting.ts

@@ -64,6 +64,8 @@ export function createErrorToastingRequests(
     listSecretKeys: "Failed to fetch secrets",
     writeSecret: "Failed to write secret",
     invokeAiTool: "Failed to invoke AI tool",
+    clearCache: "Failed to clear cache",
+    getCacheInfo: "", // No toast
   };
 
   const handlers = {} as EditRequests & RunRequests;

package/src/core/network/types.ts

@@ -99,6 +99,8 @@ export type OpenTutorialRequest = schemas["OpenTutorialRequest"];
 export type TutorialId = OpenTutorialRequest["tutorialId"];
 export type InvokeAiToolRequest = schemas["InvokeAiToolRequest"];
 export type InvokeAiToolResponse = schemas["InvokeAiToolResponse"];
+export type ClearCacheRequest = schemas["ClearCacheRequest"];
+export type GetCacheInfoRequest = schemas["GetCacheInfoRequest"];
 
 /**
  * Requests sent to the BE during run/edit mode.
@@ -188,6 +190,9 @@ export interface EditRequests {
   writeSecret: (request: CreateSecretRequest) => Promise<null>;
   // AI Tool requests
   invokeAiTool: (request: InvokeAiToolRequest) => Promise<InvokeAiToolResponse>;
+  // Cache requests
+  clearCache: () => Promise<null>;
+  getCacheInfo: () => Promise<null>;
 }
 
 export type RequestKey = keyof (EditRequests & RunRequests);

package/src/core/saving/save-component.tsx

@@ -96,54 +96,61 @@ export function useSaveNotebook() {
   const store = useStore();
 
   // Save the notebook with the given filename
-  const saveNotebook = useEvent((filename: string, userInitiated: boolean) => {
-    const notebook = getNotebook();
-    const cells = notebookCells(notebook);
-    const cellIds = cells.map((cell) => cell.id);
-    const codes = cells.map((cell) => cell.code);
-    const cellNames = cells.map((cell) => cell.name);
-    const configs = getCellConfigs(notebook);
-    const connection = store.get(connectionAtom);
-    const autoSaveConfig = store.get(autoSaveConfigAtom);
-    const layout = store.get(layoutStateAtom);
-    const kioskMode = store.get(kioskModeAtom);
+  const saveNotebook = useEvent(
+    async (filename: string, userInitiated: boolean) => {
+      const connection = store.get(connectionAtom);
+      const autoSaveConfig = store.get(autoSaveConfigAtom);
+      const kioskMode = store.get(kioskModeAtom);
 
-    if (kioskMode) {
-      return;
-    }
+      if (kioskMode) {
+        return;
+      }
 
-    // Don't save if there are no cells
-    if (codes.length === 0) {
-      return;
-    }
+      // Don't save if we are not connected to a kernel
+      if (connection.state !== WebSocketState.OPEN) {
+        openAlert("Failed to save notebook: not connected to a kernel.");
+        return;
+      }
 
-    // Don't save if we are not connected to a kernel
-    if (connection.state !== WebSocketState.OPEN) {
-      openAlert("Failed to save notebook: not connected to a kernel.");
-      return;
-    }
+      Logger.log("saving to ", filename);
 
-    Logger.log("saving to ", filename);
-    sendSave({
-      cellIds: cellIds,
-      codes,
-      names: cellNames,
-      filename,
-      configs,
-      layout: getSerializedLayout(),
-      persist: true,
-    }).then(() => {
       if (userInitiated && autoSaveConfig.format_on_save) {
-        formatAll();
+        Logger.log("formatting notebook (onSave)");
+        await formatAll();
+      }
+
+      // Grab the latest notebook state, after formatting
+      const notebook = getNotebook();
+      const cells = notebookCells(notebook);
+      const cellIds = cells.map((cell) => cell.id);
+      const codes = cells.map((cell) => cell.code);
+      const cellNames = cells.map((cell) => cell.name);
+      const configs = getCellConfigs(notebook);
+      const layout = store.get(layoutStateAtom);
+
+      // Don't save if there are no cells
+      if (codes.length === 0) {
+        return;
       }
+
+      await sendSave({
+        cellIds: cellIds,
+        codes,
+        names: cellNames,
+        filename,
+        configs,
+        layout: getSerializedLayout(),
+        persist: true,
+      });
+
       setLastSavedNotebook({
         names: cellNames,
         codes,
         configs,
         layout,
       });
-    });
-  });
+    },
+  );
 
   // Save the notebook with the current filename, only if the filename exists
   const saveIfNotebookIsPersistent = useEvent((userInitiated = false) => {

package/src/core/wasm/bridge.ts

@@ -551,6 +551,8 @@ export class PyodideBridge implements RunRequests, EditRequests {
   };
 
   invokeAiTool = throwNotImplemented;
+  clearCache = throwNotImplemented;
+  getCacheInfo = throwNotImplemented;
 
   private async putControlRequest(operation: object) {
     await this.rpc.proxy.request.bridge({

package/src/core/websocket/useMarimoWebSocket.tsx

@@ -24,6 +24,7 @@ import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
 import { Logger } from "@/utils/Logger";
 import { reloadSafe } from "@/utils/reload-safe";
 import { useAlertActions } from "../alerts/state";
+import { cacheInfoAtom } from "../cache/requests";
 import type { CellId, UIElementId } from "../cells/ids";
 import { useRunsActions } from "../cells/runs";
 import { focusAndScrollCellOutputIntoView } from "../cells/scrollCellIntoView";
@@ -87,6 +88,7 @@ export function useMarimoWebSocket(opts: {
   const setKioskMode = useSetAtom(kioskModeAtom);
   const setCapabilities = useSetAtom(capabilitiesAtom);
   const runtimeManager = useRuntimeManager();
+  const setCacheInfo = useSetAtom(cacheInfoAtom);
 
   const handleMessage = (e: MessageEvent<JsonString<OperationMessage>>) => {
     const msg = jsonParseWithSpecialChar(e.data);
@@ -248,6 +250,12 @@ export function useMarimoWebSocket(opts: {
       case "secret-keys-result":
         SECRETS_REGISTRY.resolve(msg.data.request_id as RequestId, msg.data);
         return;
+      case "cache-info-fetched":
+        setCacheInfo(msg.data);
+        return;
+      case "cache-cleared":
+        // Cache cleared, could refresh cache info if needed
+        return;
       case "data-source-connections":
         addDataSourceConnection({
           connections: msg.data.connections.map((conn) => ({

package/src/css/app/codemirror-completions.css

@@ -247,7 +247,7 @@
 
   .cm-completionInfo.cm-completionInfo-right-narrow {
     /* CodeMirror's default makes the completionInfo overlap with the
-      * compeletion symbol */
+      * completion symbol */
     left: 100%;
   }
 

package/src/custom.d.ts

@@ -16,6 +16,8 @@ interface JSON {
     text: string,
     reviver?: (this: any, key: string, value: any) => any,
   ): unknown;
+
+  rawJSON(value: string): unknown;
 }
 
 // Improve type inference for Array.filter with BooleanConstructor

package/src/plugins/core/registerReactComponent.tsx

@@ -32,6 +32,7 @@ import { UIElementRegistry } from "@/core/dom/uiregistry";
 import { FUNCTIONS_REGISTRY } from "@/core/functions/FunctionRegistry";
 import { LocaleProvider } from "@/core/i18n/locale-provider";
 import { store } from "@/core/state/jotai";
+import { isStaticNotebook } from "@/core/static/static-state";
 import {
   type HTMLElementNotDerivedFromRef,
   useEventListener,
@@ -182,10 +183,13 @@ function PluginSlotInternal<T>(
         const objectId = getUIElementObjectId(hostElement);
         invariant(objectId, "Object ID should exist");
 
+        const isStatic = isStaticNotebook();
+
         const htmlId = HTMLCellId.findElementThroughShadowDOMs(hostElement)?.id;
         const cellId = htmlId ? HTMLCellId.parse(htmlId) : null;
-        if (cellId) {
+        if (cellId && !isStatic) {
           // If the cell is not initialized, throw an error
+          // Continue if the cell is static, so we can propagate a clearer error message.
           const notebookState = store.get(notebookAtom);
           const cellRuntime = notebookState.cellRuntime[cellId];
           const cellData = notebookState.cellData[cellId];

package/src/plugins/impl/DataTablePlugin.tsx

@@ -205,7 +205,7 @@ type DataTableFunctions = {
     sort?: {
       by: string;
       descending: boolean;
-    };
+    }[];
     query?: string;
     filters?: ConditionType[];
     page_number: number;
@@ -298,7 +298,12 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       .input(
         z.object({
           sort: z
-            .object({ by: z.string(), descending: z.boolean() })
+            .array(
+              z.object({
+                by: z.string(),
+                descending: z.boolean(),
+              }),
+            )
             .optional(),
           query: z.string().optional(),
           filters: z.array(ConditionSchema).optional(),
@@ -501,19 +506,15 @@ export const LoadingDataTableComponent = memo(
         !props.lazy &&
         !pageSizeChanged;
 
-      if (sorting.length > 1) {
-        Logger.warn("Multiple sort columns are not supported");
-      }
+      // Convert sorting state to API format
+      const sortArgs =
+        sorting.length > 0
+          ? sorting.map((s) => ({ by: s.id, descending: s.desc }))
+          : undefined;
 
       // If we have sort/search/filter, use the search function
       const searchResultsPromise = search<T>({
-        sort:
-          sorting.length > 0
-            ? {
-                by: sorting[0].id,
-                descending: sorting[0].desc,
-              }
-            : undefined,
+        sort: sortArgs,
         query: searchQuery,
         page_number: paginationState.pageIndex,
         page_size: paginationState.pageSize,
@@ -563,16 +564,15 @@ export const LoadingDataTableComponent = memo(
 
     const getRow = useCallback(
       async (rowId: number) => {
+        const sortArgs =
+          sorting.length > 0
+            ? sorting.map((s) => ({ by: s.id, descending: s.desc }))
+            : undefined;
+
         const result = await search<T>({
           page_number: rowId,
           page_size: 1,
-          sort:
-            sorting.length > 0
-              ? {
-                  by: sorting[0].id,
-                  descending: sorting[0].desc,
-                }
-              : undefined,
+          sort: sortArgs,
           query: searchQuery,
           filters: filters.flatMap((filter) => {
             return filterToFilterCondition(

package/src/plugins/impl/__tests__/DateTimePickerPlugin.test.tsx

@@ -42,4 +42,36 @@ describe("DateTimePickerPlugin", () => {
     const datePicker = container.querySelector('[class*="group"]');
     expect(datePicker).not.toBeNull();
   });
+
+  it("should render with datetime.min and datetime.max edge cases", () => {
+    // Regression test for issue #6700
+    // Ensure the component can handle edge case dates like datetime.min
+    const plugin = new DateTimePickerPlugin();
+    const host = document.createElement("div");
+    const props: IPluginProps<string, DateTimeData> = {
+      host,
+      value: "2024-01-01T12:00:00",
+      setValue: (valueOrFn) => {
+        if (typeof valueOrFn === "function") {
+          valueOrFn("2024-01-01T12:00:00");
+        }
+      },
+      data: {
+        label: null,
+        // These are the exact values that datetime.min and datetime.max produce
+        start: "0001-01-01T00:00:00",
+        stop: "9999-12-31T23:59:59",
+        fullWidth: false,
+      },
+      functions: {},
+    };
+
+    // This should not throw an error
+    const { container } = render(plugin.render(props));
+
+    // Check if the component renders successfully
+    expect(container.innerHTML).not.toBe("");
+    const datePicker = container.querySelector('[class*="group"]');
+    expect(datePicker).not.toBeNull();
+  });
 });

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -41,7 +41,7 @@ export const ChatPlugin = createPlugin<{ messages: ChatMessage[] }>(
           z.object({
             role: z.enum(["system", "user", "assistant"]),
             content: z.string(),
-            parts: z.array(z.any()),
+            parts: z.array(z.any()).nullable(),
           }),
         ),
       }),

package/src/plugins/impl/chat/chat-ui.tsx

@@ -253,6 +253,20 @@ export const Chatbot: React.FC<Props> = (props) => {
     });
   }, [messages.length, scrollContainerRef]);
 
+  const codemirrorView = codeMirrorInputRef.current?.view;
+
+  const resetInput = () => {
+    // Clear input immediately by directly manipulating the editor
+    // There is some delay if we use setInput("") only
+    if (codemirrorView) {
+      const docLength = codemirrorView.state.doc.length;
+      codemirrorView.dispatch({
+        changes: { from: 0, to: docLength, insert: "" },
+      });
+    }
+    setInput("");
+  };
+
   return (
     <div
       className="flex flex-col h-full bg-(--slate-1) rounded-lg shadow border border-(--slate-6) overflow-hidden relative"
@@ -367,6 +381,7 @@ export const Chatbot: React.FC<Props> = (props) => {
             role: "user",
             parts: [{ type: "text", text: input }, ...(fileParts ?? [])],
           });
+          resetInput();
         }}
         ref={formRef}
         className="flex w-full border-t border-(--slate-6) px-2 py-1 items-center"
@@ -380,8 +395,8 @@ export const Chatbot: React.FC<Props> = (props) => {
             onSelect={(prompt) => {
               setInput(prompt);
               requestAnimationFrame(() => {
-                codeMirrorInputRef.current?.view?.focus();
-                moveToEndOfEditor(codeMirrorInputRef.current?.view);
+                codemirrorView?.focus();
+                moveToEndOfEditor(codemirrorView);
               });
             }}
           />

package/src/plugins/impl/chat/types.ts

@@ -7,7 +7,7 @@ export type ChatRole = "system" | "user" | "assistant";
 export interface ChatMessage {
   role: ChatRole;
   content: string; // TODO: Deprecate content
-  parts: UIMessage["parts"];
+  parts: UIMessage["parts"] | null;
 }
 
 export interface SendMessageRequest {

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -63,7 +63,7 @@ type PluginFunctions = {
     sort?: {
       by: string;
       descending: boolean;
-    };
+    }[];
     query?: string;
     filters?: ConditionType[];
     page_number: number;
@@ -117,7 +117,12 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
       .input(
         z.object({
           sort: z
-            .object({ by: z.string(), descending: z.boolean() })
+            .array(
+              z.object({
+                by: z.string(),
+                descending: z.boolean(),
+              }),
+            )
             .optional(),
           query: z.string().optional(),
           filters: z.array(ConditionSchema).optional(),

package/src/plugins/impl/plotly/__tests__/parse-from-template.test.ts

@@ -70,4 +70,21 @@ describe("createParser", () => {
       Year: "1964",
     });
   });
+
+  it("should handle labels with special characters (brackets, parentheses, spaces)", () => {
+    const hovertemplate =
+      "Horsepower [ps]=%{x}<br>Miles per Gallon=%{y}<br>Weight (lbs)=%{marker.size}<extra></extra>";
+    const parser = createParser(hovertemplate);
+    const data = {
+      x: "110",
+      y: "20.6",
+      "marker.size": "3000",
+    } as unknown as Plotly.PlotDatum;
+    const result = parser.parse(data);
+    expect(result).toEqual({
+      "Horsepower [ps]": "110",
+      "Miles per Gallon": "20.6",
+      "Weight (lbs)": "3000",
+    });
+  });
 });

package/src/plugins/impl/plotly/parse-from-template.ts

@@ -24,7 +24,8 @@ export interface PlotlyTemplateParser {
  */
 export function createParser(hovertemplate: string): PlotlyTemplateParser {
   // Regular expression to match the pattern key=%{selector}
-  const regex = /(\w+)=%{([^}]+)}/g;
+  // Match any characters except = for the key (non-greedy to avoid capturing previous content)
+  const regex = /([^=<>]+)=%{([^}]+)}/g;
 
   // Create an object to hold the key-selector pairs
   const keySelectorPairs: Record<string, string> = {};

package/src/stories/cell.stories.tsx

@@ -16,7 +16,7 @@ import type { CellConfig } from "@/core/network/types";
 import { WebSocketState } from "@/core/websocket/types";
 import { MultiColumn } from "@/utils/id-tree";
 import type { Milliseconds, Seconds } from "@/utils/time";
-import { Cell as EditorCell } from "../components/editor/Cell";
+import { Cell as EditorCell } from "../components/editor/notebook-cell";
 import { TooltipProvider } from "../components/ui/tooltip";
 import type { CellId } from "../core/cells/ids";
 

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

@@ -13,7 +13,7 @@ import { resolveRequestClient } from "@/core/network/resolve";
 import { WebSocketState } from "@/core/websocket/types";
 import { MultiColumn } from "@/utils/id-tree";
 import type { Milliseconds, Seconds } from "@/utils/time";
-import { CellArray } from "../../../components/editor/renderers/CellArray";
+import { CellArray } from "../../../components/editor/renderers/cell-array";
 import { CellsRenderer } from "../../../components/editor/renderers/cells-renderer";
 import { TooltipProvider } from "../../../components/ui/tooltip";
 import type { CellId } from "../../../core/cells/ids";