@marimo-team/frontend 0.22.1-dev2 → 0.22.1-dev21

package/src/components/data-table/TableBottomBar.tsx

@@ -4,6 +4,7 @@
 import type { RowSelectionState, Table } from "@tanstack/react-table";
 import { useLocale } from "react-aria";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
+import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
 import { Button } from "../ui/button";
@@ -21,6 +22,8 @@ interface TableBottomBarProps<TData> {
   getRowIds?: GetRowIds;
   showPageSizeSelector?: boolean;
   tableLoading?: boolean;
+  part?: string;
+  className?: string;
 }
 
 export const TableBottomBar = <TData,>({
@@ -32,6 +35,8 @@ export const TableBottomBar = <TData,>({
   getRowIds,
   showPageSizeSelector,
   tableLoading,
+  part,
+  className,
 }: TableBottomBarProps<TData>) => {
   const { locale } = useLocale();
   const handleSelectAllRows = (value: boolean) => {
@@ -143,7 +148,13 @@ export const TableBottomBar = <TData,>({
   };
 
   return (
-    <div className="flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0 pt-1">
+    <div
+      part={part}
+      className={cn(
+        "flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0",
+        className,
+      )}
+    >
       <div className="flex flex-col text-sm text-muted-foreground px-2 shrink-0">
         <div className="flex items-center gap-1">{renderTotal()}</div>
         <CellSelectionStats table={table} className="lg:hidden" />

package/src/components/data-table/TableTopBar.tsx

@@ -69,43 +69,39 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   }
 
   return (
-    <div className="flex items-center h-10 px-2 border-b gap-3">
-      {/* always-visible search */}
+    <div className="flex items-center h-10 px-2 border-b gap-2">
       {onSearchQueryChange && enableSearch && (
-        <div className="flex items-center">
-          <div className="flex items-center gap-1 rounded-full border px-2 w-56">
-            <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
-            <input
-              ref={inputRef}
-              type="text"
-              className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
-              value={internalValue}
-              onKeyDown={(e) => {
-                if (e.key === "Escape") {
-                  setInternalValue("");
-                  inputRef.current?.blur();
-                }
-              }}
-              onChange={(e) => setInternalValue(e.target.value)}
-              placeholder="Search..."
-            />
-            {reloading && <Spinner size="small" />}
-            {internalValue && (
-              <Button
-                variant="text"
-                size="xs"
-                className="h-5 w-5 p-0 shrink-0"
-                onClick={() => setInternalValue("")}
-              >
-                <XIcon className="w-3 h-3 text-muted-foreground" />
-              </Button>
-            )}
-          </div>
+        <div className="flex flex-1 items-center gap-1 px-2 rounded-sm focus-within:ring-1 focus-within:ring-border transition-shadow">
+          <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
+            value={internalValue}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                setInternalValue("");
+                inputRef.current?.blur();
+              }
+            }}
+            onChange={(e) => setInternalValue(e.target.value)}
+            placeholder="Search..."
+          />
+          {reloading && <Spinner size="small" />}
+          {internalValue && (
+            <Button
+              variant="text"
+              size="xs"
+              className="h-5 w-5 p-0 shrink-0"
+              onClick={() => setInternalValue("")}
+            >
+              <XIcon className="w-3 h-3 text-muted-foreground" />
+            </Button>
+          )}
         </div>
       )}
 
-      {/* actions grouped together */}
-      <div className="flex items-center gap-1 shrink-0">
+      <div className="flex items-center shrink-0">
         {showChartBuilder && (
           <Button
             variant="text"
@@ -117,7 +113,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             onClick={toggleDisplayHeader}
           >
             <ChartSplineIcon className="w-3.5 h-3.5" />
-            Chart Builder
+            Visualize
           </Button>
         )}
         {showTableExplorer && togglePanel && (
@@ -131,7 +127,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
           >
             <PanelRightIcon className="w-3.5 h-3.5" />
-            Table Explorer
+            Explorer
           </Button>
         )}
         {downloadAs && <ExportMenu downloadAs={downloadAs} />}

package/src/components/data-table/charts/charts.tsx

@@ -13,7 +13,7 @@ import {
   XIcon,
 } from "lucide-react";
 import type { JSX } from "react";
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import useResizeObserver from "use-resize-observer";
 import { PythonIcon } from "@/components/editor/cell/code/icons";
@@ -61,6 +61,7 @@ export interface TablePanelProps {
   totalRows: number | TooManyRows;
   columns: number;
   displayHeader: boolean;
+  onCloseChartBuilder?: () => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
 }
@@ -74,12 +75,33 @@ export const TablePanel: React.FC<TablePanelProps> = ({
   getDataUrl,
   fieldTypes,
   displayHeader,
+  onCloseChartBuilder,
 }) => {
   const [tabsMap, saveTabsMap] = useAtom(tabsStorageAtom);
   const tabs = cellId ? (tabsMap.get(cellId) ?? []) : [];
 
-  const [tabNum, setTabNum] = useState(0);
   const [selectedTab, setSelectedTab] = useState(DEFAULT_TAB_NAME);
+  const [tabCounter, setTabCounter] = useState(tabs.length);
+  const prevDisplayHeader = useRef(displayHeader);
+
+  // Auto-create a default chart tab when chart builder opens with no tabs
+  if (
+    displayHeader &&
+    !prevDisplayHeader.current &&
+    tabs.length === 0 &&
+    cellId
+  ) {
+    prevDisplayHeader.current = displayHeader;
+    const tabName = getChartTabName(0, NEW_CHART_TYPE);
+    const newTabs = new Map(tabsMap);
+    newTabs.set(cellId, [
+      { tabName, chartType: NEW_CHART_TYPE, config: getChartDefaults() },
+    ]);
+    saveTabsMap(newTabs);
+    setTabCounter(1);
+    setSelectedTab(tabName);
+  }
+  prevDisplayHeader.current = displayHeader;
 
   if (!displayHeader || (tabs.length === 0 && !displayHeader)) {
     return dataTable;
@@ -89,7 +111,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     if (!cellId) {
       return;
     }
-    const tabName = getChartTabName(tabNum, NEW_CHART_TYPE);
+    const tabName = getChartTabName(tabCounter, NEW_CHART_TYPE);
 
     const newTabs = new Map(tabsMap);
     newTabs.set(cellId, [
@@ -102,7 +124,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     ]);
 
     saveTabsMap(newTabs);
-    setTabNum(tabNum + 1);
+    setTabCounter(tabCounter + 1);
     setSelectedTab(tabName);
   };
 
@@ -110,14 +132,21 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     if (!cellId) {
       return;
     }
+    const deletedIndex = tabs.findIndex((tab) => tab.tabName === tabName);
+    const remaining = tabs.filter((tab) => tab.tabName !== tabName);
     const newTabs = new Map(tabsMap);
-    newTabs.set(
-      cellId,
-      tabs.filter((tab) => tab.tabName !== tabName),
-    );
+    newTabs.set(cellId, remaining);
     saveTabsMap(newTabs);
-    setSelectedTab(DEFAULT_TAB_NAME);
-    setTabNum(tabNum - 1);
+
+    if (remaining.length === 0) {
+      onCloseChartBuilder?.();
+    } else if (tabName === selectedTab) {
+      if (deletedIndex < remaining.length) {
+        setSelectedTab(remaining[deletedIndex].tabName);
+      } else {
+        setSelectedTab(remaining[remaining.length - 1].tabName);
+      }
+    }
   };
 
   const saveTabChart = ({
@@ -178,7 +207,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
 
   return (
     <Tabs value={selectedTab} className="-mt-1">
-      <TabsList>
+      <TabsList part="table-tabs">
         <TabsTrigger
           className="text-xs"
           value={DEFAULT_TAB_NAME}

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -72,7 +72,7 @@ export const ColumnExplorerPanel = ({
   });
 
   return (
-    <div className="mt-5 mb-3">
+    <div className="mb-3">
       <span className="text-xs font-semibold ml-2 flex">
         {prettifyRowColumnCount(totalRows, totalColumns, locale)}
         <CopyClipboardIcon

package/src/components/data-table/data-table.tsx

@@ -283,7 +283,10 @@ const DataTableInternal = <TData,>({
     <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
       <FilterPills filters={filters} table={table} />
       <CellSelectionProvider>
-        <div className={cn(className || "rounded-md border overflow-hidden")}>
+        <div
+          part="table-wrapper"
+          className={cn(className || "rounded-md border overflow-hidden")}
+        >
           <TableTopBar
             enableSearch={enableSearch}
             searchQuery={searchQuery}
@@ -313,6 +316,8 @@ const DataTableInternal = <TData,>({
           </Table>
         </div>
         <TableBottomBar
+          part="table-footer"
+          className="border-t border-border pt-1.5 pb-0.5"
           totalColumns={totalColumns}
           pagination={pagination}
           selection={selection}

package/src/components/data-table/loading-table.tsx

@@ -24,7 +24,10 @@ export const LoadingTable = ({
 
   return (
     <div className={cn(wrapperClassName, "flex flex-col space-y-2")}>
-      <div className={cn(className || "rounded-md border")}>
+      <div
+        part="table-wrapper"
+        className={cn(className || "rounded-md border")}
+      >
         <Table>
           <TableHeader>
             {Array.from({ length: 1 }).map((_, i) => (

package/src/components/data-table/range-focus/cell-selection-stats.tsx

@@ -34,7 +34,9 @@ export const CellSelectionStats = <TData,>({
   if (dataCellCount < 2) {
     return (
       <Tooltip content="Select multiple cells to see stats">
-        <span className={cn("text-sm text-muted-foreground italic", className)}>
+        <span
+          className={cn("text-xs text-muted-foreground/80 italic", className)}
+        >
           No selection
         </span>
       </Tooltip>

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -247,7 +247,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
 
   return (
     <div
-      className="flex flex-col gap-3 mt-4 focus:outline-hidden"
+      className="flex flex-col gap-3 focus:outline-hidden"
       ref={panelRef}
       tabIndex={-1}
       onKeyDown={handleKeyDown}

package/src/components/data-table/table-explorer-panel/table-explorer-panel.tsx

@@ -42,7 +42,7 @@ export interface TableExplorerPanelProps {
 }
 
 const tabTriggerClassName =
-  "text-xs uppercase tracking-wide font-semibold cursor-pointer transition-colors";
+  "text-[13px] uppercase tracking-wide font-semibold cursor-pointer transition-colors";
 const activeClassName = "text-primary";
 const inactiveClassName = "hover:text-foreground";
 
@@ -110,7 +110,7 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
     <Tabs
       value={resolvedTab}
       onValueChange={(value) => onTabChange(value as PanelType)}
-      className="h-full flex flex-col min-w-[350px]"
+      className="flex flex-col min-w-[350px]"
     >
       <Fill name={SlotNames.CONTEXT_AWARE_PANEL_HEADER}>
         <div className="flex items-center gap-1">

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -122,7 +122,7 @@ export const AddCellWithAI: React.FC<{
     transport: new StreamingChunkTransport(
       {
         api: runtimeManager.getAiURL("completion").toString(),
-        headers: runtimeManager.headers(),
+        headers: () => runtimeManager.headers(),
         prepareSendMessagesRequest: async (options) => {
           const completionBody = await buildCompletionRequestBody(
             options.messages,
@@ -136,6 +136,7 @@ export const AddCellWithAI: React.FC<{
           };
 
           return {
+            api: runtimeManager.getAiURL("completion").toString(),
             body: body,
           };
         },

package/src/components/editor/chrome/panels/context-aware-panel/context-aware-panel.tsx

@@ -101,7 +101,7 @@ export const ContextAwarePanel: React.FC = () => {
   const renderBody = () => {
     return (
       <div className="pb-7 mb-4 h-full overflow-auto">
-        <div className="p-3 border-b flex justify-between items-center">
+        <div className="px-3 py-2 border-b flex justify-between items-center">
           {renderModeToggle()}
           <Slot name={SlotNames.CONTEXT_AWARE_PANEL_HEADER} />
           <Button

package/src/components/editor/chrome/wrapper/footer-items/lsp-status.tsx

@@ -13,6 +13,7 @@ import type {
   LspRestartRequest,
   LspRestartResponse,
 } from "@/core/network/types";
+import { isWasm } from "@/core/wasm/utils";
 import { isAppConnected } from "@/core/websocket/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
@@ -26,7 +27,7 @@ export const LspStatus: React.FC = () => {
   const setLspHealth = useSetAtom(lspHealthAtom);
 
   const { isFetching, data, refetch } = useAsyncData(async () => {
-    if (!isAppConnected(connection)) {
+    if (isWasm() || !isAppConnected(connection)) {
       return null;
     }
 

package/src/core/cells/__tests__/apply-transaction.test.ts

@@ -18,6 +18,7 @@ import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { afterEach, beforeAll, beforeEach, describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import type { CellHandle } from "@/components/editor/notebook-cell";
 import { adaptiveLanguageConfiguration } from "@/core/codemirror/language/extension";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
@@ -121,7 +122,7 @@ describe("applyTransactionChanges edge cases", () => {
     apply([
       {
         type: "create-cell",
-        cellId: "new-cell",
+        cellId: cellId("new-cell"),
         code: "configured",
         name: "",
         config: { hide_code: true, disabled: true, column: 1 },
@@ -141,12 +142,12 @@ describe("applyTransactionChanges edge cases", () => {
     apply([
       {
         type: "create-cell",
-        cellId: "new-cell",
+        cellId: cellId("new-cell"),
         code: "new",
         name: "",
         config: {},
       },
-      { type: "move-cell", cellId: "new-cell", before: a },
+      { type: "move-cell", cellId: cellId("new-cell"), before: a },
     ]);
     expect(pretty(state)).toMatchInlineSnapshot(`
       "
@@ -162,12 +163,12 @@ describe("applyTransactionChanges edge cases", () => {
     apply([
       {
         type: "create-cell",
-        cellId: "new-cell",
+        cellId: cellId("new-cell"),
         code: "initial",
         name: "",
         config: {},
       },
-      { type: "set-code", cellId: "new-cell", code: "updated" },
+      { type: "set-code", cellId: cellId("new-cell"), code: "updated" },
     ]);
     expect(pretty(state)).toMatchInlineSnapshot(`
       "
@@ -182,12 +183,12 @@ describe("applyTransactionChanges edge cases", () => {
     apply([
       {
         type: "create-cell",
-        cellId: "ephemeral",
+        cellId: cellId("ephemeral"),
         code: "tmp",
         name: "",
         config: {},
       },
-      { type: "delete-cell", cellId: "ephemeral" },
+      { type: "delete-cell", cellId: cellId("ephemeral") },
     ]);
     expect(pretty(state)).toMatchInlineSnapshot(`
       "
@@ -228,7 +229,7 @@ describe("applyTransactionChanges edge cases", () => {
   it("move-cell with missing after anchor falls back to end", () => {
     setup("a", "b");
     const [a] = state.cellIds.inOrderIds;
-    apply([{ type: "move-cell", cellId: a, after: "nonexistent" as CellId }]);
+    apply([{ type: "move-cell", cellId: a, after: cellId("nonexistent") }]);
     expect(pretty(state)).toMatchInlineSnapshot(`
       "
       1: 'b'
@@ -240,7 +241,7 @@ describe("applyTransactionChanges edge cases", () => {
   it("move-cell with missing before anchor falls back to start", () => {
     setup("a", "b");
     const [, b] = state.cellIds.inOrderIds;
-    apply([{ type: "move-cell", cellId: b, before: "nonexistent" as CellId }]);
+    apply([{ type: "move-cell", cellId: b, before: cellId("nonexistent") }]);
     expect(pretty(state)).toMatchInlineSnapshot(`
       "
       1: 'b'
@@ -254,8 +255,8 @@ describe("applyTransactionChanges edge cases", () => {
     apply([
       {
         type: "move-cell",
-        cellId: "nonexistent" as CellId,
-        after: "0" as CellId,
+        cellId: cellId("nonexistent"),
+        after: cellId("0"),
       },
     ]);
     expect(pretty(state)).toMatchInlineSnapshot(`

package/src/core/cells/document-changes.ts

@@ -425,7 +425,7 @@ export function fromDocumentChanges(
             cellId,
             before,
             code: change.code,
-            newCellId: change.cellId as CellId,
+            newCellId: change.cellId,
             autoFocus: false,
             hideCode: change.config?.hide_code ?? false,
           },
@@ -433,14 +433,14 @@ export function fromDocumentChanges(
         if (change.name) {
           actions.push({
             type: "updateCellName",
-            payload: { cellId: change.cellId as CellId, name: change.name },
+            payload: { cellId: change.cellId, name: change.name },
           });
         }
         if (change.config?.disabled != null || change.config?.column != null) {
           actions.push({
             type: "updateCellConfig",
             payload: {
-              cellId: change.cellId as CellId,
+              cellId: change.cellId,
               config: {
                 ...(change.config.disabled != null && {
                   disabled: change.config.disabled,
@@ -460,7 +460,7 @@ export function fromDocumentChanges(
       case "delete-cell":
         actions.push({
           type: "deleteCell",
-          payload: { cellId: change.cellId as CellId },
+          payload: { cellId: change.cellId },
         });
         break;
 
@@ -471,7 +471,7 @@ export function fromDocumentChanges(
       // missing. No-ops if the cell itself doesn't exist.
       case "move-cell": {
         const ids = [...getCurrentCellIds()];
-        const cellId = change.cellId as CellId;
+        const cellId = change.cellId;
         const idx = ids.indexOf(cellId);
         if (idx < 0) {
           break;
@@ -507,7 +507,7 @@ export function fromDocumentChanges(
       case "reorder-cells":
         actions.push({
           type: "setCellIds",
-          payload: { cellIds: change.cellIds as CellId[] },
+          payload: { cellIds: change.cellIds },
         });
         break;
 
@@ -518,7 +518,7 @@ export function fromDocumentChanges(
         actions.push({
           type: "setCellCodes",
           payload: {
-            ids: [change.cellId as CellId],
+            ids: [change.cellId],
             codes: [change.code],
             codeIsStale: true,
           },
@@ -530,7 +530,7 @@ export function fromDocumentChanges(
       case "set-name":
         actions.push({
           type: "updateCellName",
-          payload: { cellId: change.cellId as CellId, name: change.name },
+          payload: { cellId: change.cellId, name: change.name },
         });
         break;
 
@@ -542,7 +542,7 @@ export function fromDocumentChanges(
         actions.push({
           type: "updateCellConfig",
           payload: {
-            cellId: change.cellId as CellId,
+            cellId: change.cellId,
             config: {
               ...(change.hideCode != null && { hide_code: change.hideCode }),
               ...(change.disabled != null && { disabled: change.disabled }),