@marimo-team/islands 0.22.1-dev24 → 0.22.1-dev28

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

@@ -257,7 +257,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
           saveTabChartType(tab.tabName, chartType);
         };
         return (
-          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-1">
+          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-0">
             <ChartPanel
               tableData={data}
               chartConfig={tab.config}
@@ -475,7 +475,7 @@ export const ChartPanel: React.FC<{
   );
 
   return (
-    <div className="flex flex-row gap-2 h-full rounded-md border pr-2">
+    <div className="flex flex-row gap-2 h-full rounded-md border-t pr-2">
       <div
         className={`relative flex flex-col gap-2 overflow-auto px-2 py-3 scrollbar-thin transition-width duration-200 ${formCollapsed ? "w-8" : "w-[300px]"}`}
       >

package/src/components/data-table/column-formatting/types.ts

@@ -48,8 +48,9 @@ declare module "@tanstack/react-table" {
   //merge column formatting's state with the existing table state
   interface TableState extends ColumnFormattingTableState {}
   //merge column formatting's options with the existing table options
-  interface TableOptionsResolved<TData extends RowData>
-    extends ColumnFormattingOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends ColumnFormattingOptions {}
   //merge column formatting's instance APIs with the existing table instance APIs
   interface Column<TData extends RowData> extends ColumnFormattingInstance {}
 }

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

@@ -63,8 +63,10 @@ import { stringifyUnknownValue } from "./utils";
 
 const TOP_K_ROWS = 30;
 
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTableColumnHeaderProps<
+  TData,
+  TValue,
+> extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>;
   header: React.ReactNode;
   justify?: "left" | "center" | "right";

package/src/components/data-table/column-wrapping/types.ts

@@ -22,8 +22,9 @@ export interface ColumnWrappingInstance {
 declare module "@tanstack/react-table" {
   interface TableState extends ColumnWrappingTableState {}
 
-  interface TableOptionsResolved<TData extends RowData>
-    extends ColumnWrappingOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends ColumnWrappingOptions {}
 
   interface Column<TData extends RowData> extends ColumnWrappingInstance {}
 }

package/src/components/data-table/copy-column/types.ts

@@ -12,8 +12,9 @@ export interface CopyColumnInstance {
 
 // Use declaration merging to add our new feature APIs
 declare module "@tanstack/react-table" {
-  interface TableOptionsResolved<TData extends RowData>
-    extends CopyColumnOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends CopyColumnOptions {}
 
   interface Column<TData extends RowData> extends CopyColumnInstance {}
 }

package/src/components/data-table/focus-row/types.ts

@@ -25,8 +25,9 @@ export interface FocusRowInstance {
 declare module "@tanstack/react-table" {
   interface TableState extends FocusRowTableState {}
 
-  interface TableOptionsResolved<TData extends RowData>
-    extends FocusRowOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends FocusRowOptions {}
 
   interface Row<TData extends RowData> extends FocusRowInstance {}
 }

package/src/components/data-table/range-focus/__tests__/atoms.test.ts

@@ -56,18 +56,18 @@ function createMockCell(
 }
 
 function createMockTable(): Table<T> {
-  const mockToggleSelected = vi.fn().mockImplementation(function (this: {
-    isSelected: boolean;
-  }) {
-    this.isSelected = !this.isSelected;
-    return { isSelected: this.isSelected };
-  });
+  const mockToggleSelected = vi
+    .fn()
+    .mockImplementation(function (this: { isSelected: boolean }) {
+      this.isSelected = !this.isSelected;
+      return { isSelected: this.isSelected };
+    });
 
-  const mockGetIsSelected = vi.fn().mockImplementation(function (this: {
-    isSelected: boolean;
-  }) {
-    return this.isSelected;
-  });
+  const mockGetIsSelected = vi
+    .fn()
+    .mockImplementation(function (this: { isSelected: boolean }) {
+      return this.isSelected;
+    });
 
   const rows = [
     {

package/src/components/data-table/range-focus/__tests__/use-cell-range-selection.test.ts

@@ -23,17 +23,15 @@ describe("isInteractiveTarget", () => {
     expect(isInteractiveTarget(createMouseEvent(span, cell))).toBe(false);
   });
 
-  it.each([
-    "input",
-    "button",
-    "select",
-    "textarea",
-  ])("returns true when clicking a <%s>", (tag) => {
-    const cell = document.createElement("td");
-    const el = document.createElement(tag);
-    cell.append(el);
-    expect(isInteractiveTarget(createMouseEvent(el, cell))).toBe(true);
-  });
+  it.each(["input", "button", "select", "textarea"])(
+    "returns true when clicking a <%s>",
+    (tag) => {
+      const cell = document.createElement("td");
+      const el = document.createElement(tag);
+      cell.append(el);
+      expect(isInteractiveTarget(createMouseEvent(el, cell))).toBe(true);
+    },
+  );
 
   it("returns true when clicking an <a> link", () => {
     const cell = document.createElement("td");

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -33,108 +33,107 @@ beforeAll(() => {
 });
 
 describe("Cell data attributes", () => {
-  it.each([
-    "edit",
-    "read",
-    "present",
-  ])("should render cell with data-cell-id and data-cell-name in %s mode", (mode) => {
-    const { store, wrapper } = createTestWrapper();
-    const cid = cellId("test");
-    const cellName = "test_cell";
+  it.each(["edit", "read", "present"])(
+    "should render cell with data-cell-id and data-cell-name in %s mode",
+    (mode) => {
+      const { store, wrapper } = createTestWrapper();
+      const cid = cellId("test");
+      const cellName = "test_cell";
 
-    const userConfig: UserConfig = {
-      display: {
-        cell_output: "below",
-        code_editor_font_size: 14,
-        dataframes: "rich",
-        default_table_page_size: 10,
-        default_table_max_columns: 10,
-        default_width: "normal",
-        theme: "light",
-        reference_highlighting: false,
-      },
-      keymap: { preset: "default" },
-      completion: {
-        activate_on_typing: true,
-        signature_hint_on_typing: false,
-        copilot: false,
-      },
-      formatting: { line_length: 88 },
-      package_management: { manager: "pip" },
-      runtime: {
-        auto_instantiate: false,
-        default_sql_output: "native",
-        auto_reload: "off",
-        on_cell_change: "lazy",
-        watcher_on_save: "lazy",
-        reactive_tests: true,
-        output_max_bytes: 1_000_000,
-        std_stream_max_bytes: 1_000_000,
-        pythonpath: [],
-        dotenv: [".env"],
-      },
-      server: {
-        browser: "default",
-        follow_symlink: false,
-      },
-      save: { autosave: "off", autosave_delay: 1000, format_on_save: false },
-      ai: {},
-    } as UserConfig;
+      const userConfig: UserConfig = {
+        display: {
+          cell_output: "below",
+          code_editor_font_size: 14,
+          dataframes: "rich",
+          default_table_page_size: 10,
+          default_table_max_columns: 10,
+          default_width: "normal",
+          theme: "light",
+          reference_highlighting: false,
+        },
+        keymap: { preset: "default" },
+        completion: {
+          activate_on_typing: true,
+          signature_hint_on_typing: false,
+          copilot: false,
+        },
+        formatting: { line_length: 88 },
+        package_management: { manager: "pip" },
+        runtime: {
+          auto_instantiate: false,
+          default_sql_output: "native",
+          auto_reload: "off",
+          on_cell_change: "lazy",
+          watcher_on_save: "lazy",
+          reactive_tests: true,
+          output_max_bytes: 1_000_000,
+          std_stream_max_bytes: 1_000_000,
+          pythonpath: [],
+          dotenv: [".env"],
+        },
+        server: {
+          browser: "default",
+          follow_symlink: false,
+        },
+        save: { autosave: "off", autosave_delay: 1000, format_on_save: false },
+        ai: {},
+      } as UserConfig;
 
-    const notebook = MockNotebook.notebookState({
-      cellData: {
-        [cid]: {
-          code: "",
-          name: cellName,
-          edited: false,
-          serializedEditorState: null,
-          config: {
-            disabled: false,
-            hide_code: false,
-            column: null,
+      const notebook = MockNotebook.notebookState({
+        cellData: {
+          [cid]: {
+            code: "",
+            name: cellName,
+            edited: false,
+            serializedEditorState: null,
+            config: {
+              disabled: false,
+              hide_code: false,
+              column: null,
+            },
           },
         },
-      },
-    });
+      });
 
-    notebook.cellRuntime[cid] = createCellRuntimeState({
-      status: "idle",
-      output: null,
-      consoleOutputs: [],
-      interrupted: false,
-      errored: false,
-      stopped: false,
-      staleInputs: false,
-      runStartTimestamp: null,
-      lastRunStartTimestamp: null,
-      runElapsedTimeMs: null,
-      debuggerActive: false,
-      outline: null,
-    });
+      notebook.cellRuntime[cid] = createCellRuntimeState({
+        status: "idle",
+        output: null,
+        consoleOutputs: [],
+        interrupted: false,
+        errored: false,
+        stopped: false,
+        staleInputs: false,
+        runStartTimestamp: null,
+        lastRunStartTimestamp: null,
+        runElapsedTimeMs: null,
+        debuggerActive: false,
+        outline: null,
+      });
 
-    store.set(notebookAtom, notebook);
+      store.set(notebookAtom, notebook);
 
-    const { container } = render(
-      <TooltipProvider>
-        <Cell
-          cellId={cid}
-          mode={mode as AppMode}
-          canDelete={true}
-          userConfig={userConfig}
-          isCollapsed={false}
-          collapseCount={0}
-          canMoveX={false}
-          theme="light"
-          showPlaceholder={false}
-        />
-      </TooltipProvider>,
-      { wrapper },
-    );
+      const { container } = render(
+        <TooltipProvider>
+          <Cell
+            cellId={cid}
+            mode={mode as AppMode}
+            canDelete={true}
+            userConfig={userConfig}
+            isCollapsed={false}
+            collapseCount={0}
+            canMoveX={false}
+            theme="light"
+            showPlaceholder={false}
+          />
+        </TooltipProvider>,
+        { wrapper },
+      );
 
-    const cellElement = container.querySelector(`[data-cell-id="${cid}"]`);
-    expect(cellElement).toBeTruthy();
-    expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
-  });
+      const cellElement = container.querySelector(`[data-cell-id="${cid}"]`);
+      expect(cellElement).toBeTruthy();
+      expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
+    },
+  );
 });
 
 describe("Output data attributes", () => {

package/src/components/editor/actions/name-cell-input.tsx

@@ -14,8 +14,10 @@ import { useOnMount } from "@/hooks/useLifecycle";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 
-interface Props
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+interface Props extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "onChange"
+> {
   value: string;
   onChange: (newName: string) => void;
   placeholder?: string;

package/src/components/editor/actions/useCellActionButton.tsx

@@ -65,8 +65,10 @@ import { useSplitCellCallback } from "../cell/useSplitCell";
 import { NameCellInput } from "./name-cell-input";
 import type { ActionButton } from "./types";
 
-export interface CellActionButtonProps
-  extends Pick<CellData, "name" | "config"> {
+export interface CellActionButtonProps extends Pick<
+  CellData,
+  "name" | "config"
+> {
   cellId: CellId;
   status: RuntimeState;
   hasOutput: boolean;

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

@@ -16,11 +16,10 @@ import "./cell-status.css";
 import { formatDistanceToNow } from "date-fns";
 import { Time } from "@/utils/time";
 
-export interface CellStatusComponentProps
-  extends Pick<
-    CellRuntimeState,
-    "status" | "runStartTimestamp" | "interrupted" | "lastRunStartTimestamp"
-  > {
+export interface CellStatusComponentProps extends Pick<
+  CellRuntimeState,
+  "status" | "runStartTimestamp" | "interrupted" | "lastRunStartTimestamp"
+> {
   editing: boolean;
   edited: boolean;
   disabled: boolean;

package/src/components/editor/cell/cell-context-menu.tsx

@@ -34,8 +34,10 @@ import {
   useCellActionButtons,
 } from "../actions/useCellActionButton";
 
-interface Props
-  extends Pick<CellActionButtonProps, "cellId" | "getEditorView"> {
+interface Props extends Pick<
+  CellActionButtonProps,
+  "cellId" | "getEditorView"
+> {
   children: React.ReactNode;
 }
 

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

@@ -47,7 +47,8 @@ import { useSplitCellCallback } from "../useSplitCell";
 import { LanguageToggles } from "./language-toggle";
 
 export interface CellEditorProps
-  extends Pick<CellRuntimeState, "status">,
+  extends
+    Pick<CellRuntimeState, "status">,
     Pick<CellData, "id" | "code" | "serializedEditorState" | "config"> {
   runCell: () => void;
   theme: Theme;

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

@@ -27,7 +27,8 @@ const toolbarItemVariants = cva(
 );
 
 interface ToolbarItemProps
-  extends VariantProps<typeof toolbarItemVariants>,
+  extends
+    VariantProps<typeof toolbarItemVariants>,
     React.HTMLAttributes<HTMLButtonElement> {
   tooltip: React.ReactNode;
   disabled?: boolean;

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -311,18 +311,17 @@ const ActionButtons: React.FC<{
   );
 };
 
-interface VerticalCellProps
-  extends Pick<
-    CellRuntimeState,
-    | "output"
-    | "consoleOutputs"
-    | "status"
-    | "stopped"
-    | "errored"
-    | "interrupted"
-    | "staleInputs"
-    | "runStartTimestamp"
-  > {
+interface VerticalCellProps extends Pick<
+  CellRuntimeState,
+  | "output"
+  | "consoleOutputs"
+  | "status"
+  | "stopped"
+  | "errored"
+  | "interrupted"
+  | "staleInputs"
+  | "runStartTimestamp"
+> {
   cellOutputArea: "above" | "below";
   cellId: CellId;
   config: CellConfig;

package/src/components/storage/__tests__/storage-snippets.test.ts

@@ -147,9 +147,8 @@ describe("download-file snippet", () => {
   });
 
   it("obstore gcs backend", () => {
-    expect(
-      downloadSnippet.getCode(makeCtx({ protocol: "gcs" })),
-    ).toMatchInlineSnapshot(`
+    expect(downloadSnippet.getCode(makeCtx({ protocol: "gcs" })))
+      .toMatchInlineSnapshot(`
       "from datetime import timedelta
       from obstore import sign
 
@@ -162,9 +161,8 @@ describe("download-file snippet", () => {
   });
 
   it("obstore cloudflare backend", () => {
-    expect(
-      downloadSnippet.getCode(makeCtx({ protocol: "cloudflare" })),
-    ).toMatchInlineSnapshot(`
+    expect(downloadSnippet.getCode(makeCtx({ protocol: "cloudflare" })))
+      .toMatchInlineSnapshot(`
       "from datetime import timedelta
       from obstore import sign
 

package/src/components/tracing/tracing.test.tsx

@@ -5,36 +5,36 @@ import { formatChartTime } from "./utils";
 describe("formatChartTime", () => {
   beforeAll(() => {
     // Mock Date to always use UTC
-    vi.spyOn(global.Date.prototype, "getFullYear").mockImplementation(function (
-      this: Date,
-    ) {
-      return this.getUTCFullYear();
-    });
-    vi.spyOn(global.Date.prototype, "getMonth").mockImplementation(function (
-      this: Date,
-    ) {
-      return this.getUTCMonth();
-    });
-    vi.spyOn(global.Date.prototype, "getDate").mockImplementation(function (
-      this: Date,
-    ) {
-      return this.getUTCDate();
-    });
-    vi.spyOn(global.Date.prototype, "getHours").mockImplementation(function (
-      this: Date,
-    ) {
-      return this.getUTCHours();
-    });
-    vi.spyOn(global.Date.prototype, "getMinutes").mockImplementation(function (
-      this: Date,
-    ) {
-      return this.getUTCMinutes();
-    });
-    vi.spyOn(global.Date.prototype, "getSeconds").mockImplementation(function (
-      this: Date,
-    ) {
-      return this.getUTCSeconds();
-    });
+    vi.spyOn(global.Date.prototype, "getFullYear").mockImplementation(
+      function (this: Date) {
+        return this.getUTCFullYear();
+      },
+    );
+    vi.spyOn(global.Date.prototype, "getMonth").mockImplementation(
+      function (this: Date) {
+        return this.getUTCMonth();
+      },
+    );
+    vi.spyOn(global.Date.prototype, "getDate").mockImplementation(
+      function (this: Date) {
+        return this.getUTCDate();
+      },
+    );
+    vi.spyOn(global.Date.prototype, "getHours").mockImplementation(
+      function (this: Date) {
+        return this.getUTCHours();
+      },
+    );
+    vi.spyOn(global.Date.prototype, "getMinutes").mockImplementation(
+      function (this: Date) {
+        return this.getUTCMinutes();
+      },
+    );
+    vi.spyOn(global.Date.prototype, "getSeconds").mockImplementation(
+      function (this: Date) {
+        return this.getUTCSeconds();
+      },
+    );
     vi.spyOn(global.Date.prototype, "getMilliseconds").mockImplementation(
       function (this: Date) {
         return this.getUTCMilliseconds();

package/src/components/ui/badge.tsx

@@ -29,7 +29,8 @@ const badgeVariants = cva(
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 const Badge = ({ className, variant, ...props }: BadgeProps) => {

package/src/components/ui/button.tsx

@@ -92,7 +92,8 @@ const buttonVariants = cva(
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     Omit<VariantProps<typeof buttonVariants>, "disabled"> {
   asChild?: boolean;
   keyboardShortcut?: string;

package/src/components/ui/calendar.tsx

@@ -183,8 +183,9 @@ const Calendar = <T extends AriaDateValue>({
   );
 };
 
-interface RangeCalendarProps<T extends AriaDateValue>
-  extends AriaRangeCalendarProps<T> {
+interface RangeCalendarProps<
+  T extends AriaDateValue,
+> extends AriaRangeCalendarProps<T> {
   errorMessage?: string;
 }
 

package/src/components/ui/combobox.tsx

@@ -230,7 +230,8 @@ interface ComboboxItemOptions<TValue> {
 }
 
 export interface ComboboxItemProps<TValue>
-  extends ComboboxItemOptions<TValue>,
+  extends
+    ComboboxItemOptions<TValue>,
     Omit<
       React.ComponentProps<typeof CommandItem>,
       keyof ComboboxItemOptions<TValue> | "onSelect" | "role"

package/src/components/ui/date-input.tsx

@@ -41,8 +41,7 @@ const DateSegment = ({ className, ...props }: AriaDateSegmentProps) => {
 };
 
 interface DateInputProps
-  extends AriaDateInputProps,
-    VariantProps<typeof fieldGroupVariants> {}
+  extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}
 
 const DateInput = ({
   className,
@@ -61,8 +60,9 @@ const DateInput = ({
   );
 };
 
-interface DateFieldProps<T extends AriaDateValue>
-  extends AriaDateFieldProps<T> {
+interface DateFieldProps<
+  T extends AriaDateValue,
+> extends AriaDateFieldProps<T> {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: AriaValidationResult) => string);
@@ -94,8 +94,9 @@ const DateField = <T extends AriaDateValue>({
   );
 };
 
-interface TimeFieldProps<T extends AriaTimeValue>
-  extends AriaTimeFieldProps<T> {
+interface TimeFieldProps<
+  T extends AriaTimeValue,
+> extends AriaTimeFieldProps<T> {
   label?: string;
   description?: string;
   errorMessage?: string | ((validation: AriaValidationResult) => string);