@marimo-team/islands 0.17.8 → 0.18.1

package/src/css/md.css

@@ -78,6 +78,11 @@ a .markdown iconify-icon:first-child {
   margin-inline-end: 0.4em;
 }
 
+/* make links and their contents inline-flex to avoid extra gaps */
+a > .markdown > .paragraph {
+  display: inline-flex;
+}
+
 iconify-icon {
   display: inline-flex;
   align-items: center;

package/src/plugins/core/__test__/sanitize.test.ts

@@ -141,7 +141,7 @@ describe("sanitizeHtml", () => {
     const html =
       "<marimo-mermaid data-diagram='&quot;sequenceDiagram&#92;n    Alice-&gt;&gt;John&#92;n    John--&gt;&gt;Alice&#92;n    &quot;'></marimo-mermaid>";
     expect(sanitizeHtml(html)).toMatchInlineSnapshot(
-      `"<marimo-mermaid></marimo-mermaid>"`,
+      `"<marimo-mermaid data-diagram="&quot;sequenceDiagram\\n    Alice->>John\\n    John-->>Alice\\n    &quot;"></marimo-mermaid>"`,
     );
   });
 

package/src/plugins/core/sanitize.ts

@@ -80,7 +80,9 @@ export function sanitizeHtml(html: string) {
       tagNameCheck: /^(marimo-[A-Za-z][\w-]*|iconify-icon)$/,
       attributeNameCheck: /^[A-Za-z][\w-]*$/,
     },
-    SAFE_FOR_XML: html.includes("marimo-mermaid"),
+    // This flag means we should sanitize such that is it safe for XML,
+    // but this is only used for HTML content.
+    SAFE_FOR_XML: !html.includes("marimo-mermaid"),
   };
   return DOMPurify.sanitize(html, sanitizationOptions);
 }

package/src/plugins/impl/DataTablePlugin.tsx

@@ -63,6 +63,7 @@ import { type CellId, findCellId } from "@/core/cells/ids";
 import { slotsController } from "@/core/slots/slots";
 import { store } from "@/core/state/jotai";
 import { isStaticNotebook } from "@/core/static/static-state";
+import { isInVscodeExtension } from "@/core/vscode/is-in-vscode";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import { useEffectSkipFirstRender } from "@/hooks/useEffectSkipFirstRender";
@@ -179,6 +180,7 @@ interface Data<T> {
   showDataTypes: boolean;
   showPageSizeSelector: boolean;
   showColumnExplorer: boolean;
+  showRowExplorer: boolean;
   showChartBuilder: boolean;
   rowHeaders: FieldTypesWithExternalType;
   fieldTypes?: FieldTypesWithExternalType | null;
@@ -250,6 +252,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       showDataTypes: z.boolean().default(true),
       showPageSizeSelector: z.boolean().default(true),
       showColumnExplorer: z.boolean().default(true),
+      showRowExplorer: z.boolean().default(true),
       showChartBuilder: z.boolean().default(true),
       rowHeaders: columnToFieldTypesSchema,
       freezeColumnsLeft: z.array(z.string()).optional(),
@@ -718,6 +721,7 @@ const DataTableComponent = ({
   showDownload,
   showPageSizeSelector,
   showColumnExplorer,
+  showRowExplorer,
   showChartBuilder,
   showDataTypes,
   rowHeaders,
@@ -899,6 +903,8 @@ const DataTableComponent = ({
   const showColExplorer =
     showColumnExplorer && preview_column && isPanelOpen("column-explorer");
 
+  const isInVscode = isInVscodeExtension();
+
   return (
     <>
       {/* When the totalRows is "too_many" and the pageSize is the same as the
@@ -988,7 +994,10 @@ const DataTableComponent = ({
             toggleDisplayHeader={toggleDisplayHeader}
             showChartBuilder={showChartBuilder}
             showPageSizeSelector={showPageSizeSelector}
-            showColumnExplorer={showColumnExplorer}
+            // Hidden in VSCode (for now) because we don't have a panel to show
+            // the column/row explorer.
+            showColumnExplorer={showColumnExplorer && !isInVscode}
+            showRowExplorer={showRowExplorer && !isInVscode}
             togglePanel={togglePanel}
             isPanelOpen={isPanelOpen}
             viewedRowIdx={viewedRowIdx}

package/src/plugins/impl/DateTimePickerPlugin.tsx

@@ -14,6 +14,7 @@ interface Data {
   start: string;
   stop: string;
   step?: string;
+  precision: "hour" | "minute" | "second";
   fullWidth: boolean;
   disabled?: boolean;
 }
@@ -27,6 +28,7 @@ export class DateTimePickerPlugin implements IPlugin<T, Data> {
     start: z.string(),
     stop: z.string(),
     step: z.string().optional(),
+    precision: z.enum(["hour", "minute", "second"]).default("minute"),
     fullWidth: z.boolean().default(false),
     disabled: z.boolean().optional(),
   });
@@ -63,7 +65,7 @@ const DateTimePickerComponent = (props: DateTimePickerProps): JSX.Element => {
   return (
     <Labeled label={props.label} fullWidth={props.fullWidth}>
       <DatePicker
-        granularity="minute"
+        granularity={props.precision}
         value={parsedValue}
         onChange={handleInput}
         aria-label={props.label ?? "date time picker"}

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

@@ -11,6 +11,7 @@ interface DateTimeData {
   label: string | null;
   start: string;
   stop: string;
+  precision: "hour" | "minute" | "second";
   fullWidth: boolean;
 }
 
@@ -37,6 +38,7 @@ describe("DateTimePickerPlugin", () => {
         label: null,
         start: "2024-01-01T00:00:00",
         stop: "2024-12-31T23:59:59",
+        precision: "minute",
         fullWidth: false,
       },
       functions: {},
@@ -68,6 +70,7 @@ describe("DateTimePickerPlugin", () => {
         // These are the exact values that datetime.min and datetime.max produce
         start: "0001-01-01T00:00:00",
         stop: "9999-12-31T23:59:59",
+        precision: "minute",
         fullWidth: false,
       },
       functions: {},

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

@@ -89,6 +89,7 @@ export const ChatPlugin = createPlugin<{ messages: ChatMessage[] }>(
           send_prompt={props.functions.send_prompt}
           value={props.value?.messages || Arrays.EMPTY}
           setValue={(messages) => props.setValue({ messages })}
+          host={props.host}
         />
       </Suspense>
     </TooltipProvider>

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

@@ -12,6 +12,7 @@ import {
   DownloadIcon,
   HelpCircleIcon,
   PaperclipIcon,
+  RotateCwIcon,
   SendIcon,
   SettingsIcon,
   Trash2Icon,
@@ -42,7 +43,12 @@ import {
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { moveToEndOfEditor } from "@/core/codemirror/utils";
+import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import {
+  type HTMLElementNotDerivedFromRef,
+  useEventListener,
+} from "@/hooks/useEventListener";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
 import { Logger } from "@/utils/Logger";
@@ -63,6 +69,7 @@ interface Props extends PluginFunctions {
   allowAttachments: boolean | string[];
   value: ChatMessage[];
   setValue: (messages: ChatMessage[]) => void;
+  host: HTMLElement;
 }
 
 export const Chatbot: React.FC<Props> = (props) => {
@@ -74,6 +81,12 @@ export const Chatbot: React.FC<Props> = (props) => {
   const codeMirrorInputRef = useRef<ReactCodeMirrorRef>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
+  // Track streaming state - maps backend message_id to frontend message index
+  const streamingStateRef = useRef<{
+    backendMessageId: string | null;
+    frontendMessageIndex: number | null;
+  }>({ backendMessageId: null, frontendMessageIndex: null });
+
   const { data: initialMessages } = useAsyncData(async () => {
     const chatMessages = await props.get_chat_history({});
     const messages: UIMessage[] = chatMessages.messages.map((message, idx) => ({
@@ -113,6 +126,19 @@ export const Chatbot: React.FC<Props> = (props) => {
               .join("\n"),
             parts: m.parts,
           }));
+
+          // Create a placeholder message for streaming
+          const messageId = Date.now().toString();
+
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: messageId,
+              role: "assistant",
+              parts: [{ type: "text", text: "" }],
+            },
+          ]);
+
           const response = await props.send_prompt({
             messages: messages,
             config: {
@@ -124,18 +150,35 @@ export const Chatbot: React.FC<Props> = (props) => {
               presence_penalty: config.presence_penalty,
             },
           });
-          // Update local state with AI response
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: Date.now().toString(),
-              role: "assistant",
-              parts: [{ type: "text", text: response }],
-            },
-          ]);
+
+          // If streaming didn't happen (non-generator response), update the message
+          // Check if streaming state is still set (meaning no chunks were received)
+          if (
+            streamingStateRef.current.backendMessageId === null &&
+            streamingStateRef.current.frontendMessageIndex === null
+          ) {
+            setMessages((prev) => {
+              const updated = [...prev];
+              const index = updated.findIndex((m) => m.id === messageId);
+              if (index !== -1) {
+                updated[index] = {
+                  ...updated[index],
+                  parts: [{ type: "text", text: response }],
+                };
+              }
+              return updated;
+            });
+          }
+
           return new Response(response);
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (error: any) {
+          // Clear streaming state on error
+          streamingStateRef.current = {
+            backendMessageId: null,
+            frontendMessageIndex: null,
+          };
+
           // HACK: strip the error message to clean up the response
           const strippedError = error.message
             .split("failed with exception ")
@@ -152,12 +195,98 @@ export const Chatbot: React.FC<Props> = (props) => {
         fileInputRef.current.value = "";
       }
       Logger.debug("Finished streaming message:", message);
+
+      // Clear streaming state
+      streamingStateRef.current = {
+        backendMessageId: null,
+        frontendMessageIndex: null,
+      };
     },
     onError: (error) => {
       Logger.error("An error occurred:", error);
+      // Clear streaming state on error
+      streamingStateRef.current = {
+        backendMessageId: null,
+        frontendMessageIndex: null,
+      };
     },
   });
 
+  // Listen for streaming chunks from backend
+  useEventListener(
+    props.host as HTMLElementNotDerivedFromRef,
+    MarimoIncomingMessageEvent.TYPE,
+    (e) => {
+      const message = e.detail.message;
+      if (
+        typeof message === "object" &&
+        message !== null &&
+        "type" in message &&
+        message.type === "stream_chunk"
+      ) {
+        const chunkMessage = message as {
+          type: string;
+          message_id: string;
+          content: string;
+          is_final: boolean;
+        };
+
+        // Initialize streaming state on first chunk if not already set
+        if (streamingStateRef.current.backendMessageId === null) {
+          // Find the last assistant message (which should be the placeholder we created)
+          setMessages((prev) => {
+            const updated = [...prev];
+            // Find the last assistant message
+            for (let i = updated.length - 1; i >= 0; i--) {
+              if (updated[i].role === "assistant") {
+                streamingStateRef.current = {
+                  backendMessageId: chunkMessage.message_id,
+                  frontendMessageIndex: i,
+                };
+                break;
+              }
+            }
+            return updated;
+          });
+        }
+
+        // Only process chunks for the current streaming message
+        const frontendIndex = streamingStateRef.current.frontendMessageIndex;
+        if (
+          streamingStateRef.current.backendMessageId ===
+            chunkMessage.message_id &&
+          frontendIndex !== null
+        ) {
+          setMessages((prev) => {
+            const updated = [...prev];
+            const index = frontendIndex;
+
+            // Update the message at the tracked index
+            if (index < updated.length) {
+              const messageToUpdate = updated[index];
+              if (messageToUpdate.role === "assistant") {
+                updated[index] = {
+                  ...messageToUpdate,
+                  parts: [{ type: "text", text: chunkMessage.content }],
+                };
+              }
+            }
+
+            return updated;
+          });
+
+          // Clear streaming state when final chunk arrives
+          if (chunkMessage.is_final) {
+            streamingStateRef.current = {
+              backendMessageId: null,
+              frontendMessageIndex: null,
+            };
+          }
+        }
+      }
+    },
+  );
+
   const isLoading = status === "submitted" || status === "streaming";
 
   const handleDelete = (id: string) => {
@@ -283,13 +412,14 @@ export const Chatbot: React.FC<Props> = (props) => {
         <Button
           variant="text"
           size="icon"
+          disabled={messages.length === 0}
           onClick={() => {
             setMessages([]);
             props.setValue([]);
             props.delete_chat_history({});
           }}
         >
-          <Trash2Icon className="h-3 w-3" />
+          <RotateCwIcon className="h-3 w-3" />
         </Button>
       </div>
       <div

package/src/plugins/impl/common/error-banner.tsx

@@ -6,6 +6,7 @@ import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogContent,
+  AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
@@ -48,9 +49,12 @@ export const ErrorBanner = ({
           <AlertDialogHeader>
             <AlertDialogTitle className="text-error">Error</AlertDialogTitle>
           </AlertDialogHeader>
-          <pre className="text-error text-sm p-2 font-mono overflow-auto whitespace-pre-wrap">
-            {message}
-          </pre>
+          <AlertDialogDescription
+            asChild={true}
+            className="text-error text-sm p-2 font-mono overflow-auto whitespace-pre-wrap"
+          >
+            <pre>{message}</pre>
+          </AlertDialogDescription>
           <AlertDialogFooter>
             <AlertDialogAction autoFocus={true} onClick={() => setOpen(false)}>
               Ok

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

@@ -297,6 +297,7 @@ export const DataFrameComponent = memo(
           get_column_summaries={getColumnSummaries}
           showPageSizeSelector={(total_rows && total_rows > 5) || false}
           showColumnExplorer={false}
+          showRowExplorer={true}
           showChartBuilder={false}
           value={Arrays.EMPTY}
           setValue={Functions.NOOP}

package/src/plugins/impl/vega/VegaPlugin.tsx

@@ -24,6 +24,7 @@ export class VegaPlugin implements IPlugin<VegaComponentState, Data> {
       .union([z.boolean(), z.literal("point"), z.literal("interval")])
       .default(true),
     fieldSelection: z.union([z.boolean(), z.array(z.string())]).default(true),
+    embedOptions: z.object({}).passthrough().default({}),
   });
 
   render(props: IPluginProps<VegaComponentState, Data>): JSX.Element {

package/src/plugins/impl/vega/vega-component.tsx

@@ -33,6 +33,7 @@ export interface Data {
   spec: VegaLiteSpec;
   chartSelection: boolean | "point" | "interval";
   fieldSelection: boolean | string[];
+  embedOptions?: Record<string, unknown>;
 }
 
 export interface VegaComponentState {
@@ -60,6 +61,7 @@ const VegaComponent = ({
   chartSelection,
   fieldSelection,
   spec,
+  embedOptions,
 }: VegaComponentProps<VegaComponentState>) => {
   const { data: resolvedSpec, error } = useAsyncData(async () => {
     // We try to resolve the data before passing it to Vega
@@ -84,6 +86,7 @@ const VegaComponent = ({
       chartSelection={chartSelection}
       fieldSelection={fieldSelection}
       spec={resolvedSpec}
+      embedOptions={embedOptions}
     />
   );
 };
@@ -94,12 +97,35 @@ const LoadedVegaComponent = ({
   chartSelection,
   fieldSelection,
   spec,
+  embedOptions,
 }: VegaComponentProps<VegaComponentState>): JSX.Element => {
   const { theme } = useTheme();
   const vegaRef = useRef<HTMLDivElement>(null);
   const vegaView = useRef<View>(undefined);
   const [error, setError] = useState<Error>();
 
+  // Merge default actions with user-provided embed options
+  const actions = useMemo(() => {
+    // If embedOptions contains 'actions', use it directly
+    if (embedOptions && "actions" in embedOptions) {
+      return embedOptions.actions as
+        | boolean
+        | {
+            export?: boolean;
+            source?: boolean;
+            compiled?: boolean;
+            editor?: boolean;
+          }
+        | undefined;
+    }
+
+    // Otherwise use defaults
+    return {
+      source: false,
+      compiled: false,
+    };
+  }, [embedOptions]);
+
   // Aggressively memoize the spec, so Vega doesn't re-render/re-mount the component
   const specMemo = useDeepCompareMemoize(spec);
   const selectableSpec = useMemo(() => {
@@ -289,11 +315,6 @@ const LoadedVegaComponent = ({
   );
 };
 
-const actions = {
-  source: false,
-  compiled: false,
-};
-
 /**
  * Convert any sets to a list before passing to the BE
  */

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -14,11 +14,13 @@ import {
 import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { cn } from "@/utils/cn";
+import { appendQueryParams } from "@/utils/urls";
 import type {
   IStatelessPlugin,
   IStatelessPluginProps,
 } from "../stateless-plugin";
 import "./navigation-menu.css";
+import { KnownQueryParams } from "@/core/constants";
 
 interface MenuItem {
   label: string;
@@ -99,6 +101,15 @@ const NavMenuComponent = ({
     return "_self";
   };
 
+  const preserveQueryParams = (href: string) => {
+    const currentUrl = new URL(globalThis.location.href);
+    return appendQueryParams({
+      href,
+      queryParams: currentUrl.search,
+      keys: [KnownQueryParams.filePath],
+    });
+  };
+
   const renderMenuItem = (item: MenuItem | MenuItemGroup) => {
     if ("items" in item) {
       return orientation === "horizontal" ? (
@@ -113,7 +124,7 @@ const NavMenuComponent = ({
                   <ListItem
                     key={subItem.label}
                     label={subItem.label}
-                    href={subItem.href}
+                    href={preserveQueryParams(subItem.href)}
                     target={target(subItem.href)}
                   >
                     {subItem.description &&
@@ -142,7 +153,7 @@ const NavMenuComponent = ({
                 {maybeWithTooltip(
                   <NavigationMenuLink
                     key={subItem.label}
-                    href={subItem.href}
+                    href={preserveQueryParams(subItem.href)}
                     target={target(subItem.href)}
                     className={navigationMenuTriggerStyle({
                       orientation: orientation,
@@ -162,7 +173,7 @@ const NavMenuComponent = ({
     return (
       <NavigationMenuItem key={item.label}>
         <NavigationMenuLink
-          href={item.href}
+          href={preserveQueryParams(item.href)}
           target={target(item.href)}
           className={navigationMenuTriggerStyle({
             orientation: orientation,

package/src/plugins/layout/ProgressPlugin.tsx

@@ -93,10 +93,13 @@ export const ProgressComponent = ({
 
     const elements: React.ReactNode[] = [];
     if (rate) {
-      elements.push(
-        <span key="rate">{rate} iter/s</span>,
-        <span key="spacer-rate">&middot;</span>,
-      );
+      if (rate < 1) {
+        elements.push(<span key="rate">{prettyTime(1 / rate)} per iter</span>);
+      } else {
+        elements.push(<span key="rate">{rate} iter/s</span>);
+      }
+
+      elements.push(<span key="spacer-rate">&middot;</span>);
     }
 
     if (!hasCompleted && eta) {
@@ -170,6 +173,6 @@ export function prettyTime(seconds: number): string {
     language: "shortEn",
     largest: 2,
     spacer: "",
-    maxDecimalPoints: 2,
+    maxDecimalPoints: seconds < 10 ? 2 : 0,
   });
 }

package/src/plugins/layout/StatPlugin.tsx

@@ -17,6 +17,7 @@ interface Data {
   caption?: string;
   bordered?: boolean;
   direction?: "increase" | "decrease";
+  target_direction?: "increase" | "decrease";
 }
 
 export class StatPlugin implements IStatelessPlugin<Data> {
@@ -28,6 +29,7 @@ export class StatPlugin implements IStatelessPlugin<Data> {
     caption: z.string().optional(),
     bordered: z.boolean().default(false),
     direction: z.enum(["increase", "decrease"]).optional(),
+    target_direction: z.enum(["increase", "decrease"]).default("increase"),
   });
 
   render({ data }: IStatelessPluginProps<Data>): JSX.Element {
@@ -41,6 +43,7 @@ export const StatComponent: React.FC<Data> = ({
   caption,
   bordered,
   direction,
+  target_direction,
 }) => {
   const { locale } = useLocale();
 
@@ -64,6 +67,10 @@ export const StatComponent: React.FC<Data> = ({
     return String(value);
   };
 
+  const onTarget = direction === target_direction;
+  const fillColor = onTarget ? "var(--grass-8)" : "var(--red-8)";
+  const strokeColor = onTarget ? "var(--grass-9)" : "var(--red-9)";
+
   return (
     <div
       className={cn(
@@ -83,15 +90,15 @@ export const StatComponent: React.FC<Data> = ({
             {direction === "increase" && (
               <TriangleIcon
                 className="w-4 h-4 mr-1 p-0.5"
-                fill="var(--grass-8)"
-                stroke="var(--grass-9)"
+                fill={fillColor}
+                stroke={strokeColor}
               />
             )}
             {direction === "decrease" && (
               <TriangleIcon
                 className="w-4 h-4 mr-1 p-0.5 transform rotate-180"
-                fill="var(--red-8)"
-                stroke="var(--red-9)"
+                fill={fillColor}
+                stroke={strokeColor}
               />
             )}
             {caption}