@marimo-team/islands 0.23.11-dev23 → 0.23.11-dev25

package/dist/{reveal-component-BcklswWX.js → reveal-component-D6n0D5SX.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom } from "./html-to-image-BJbLjZyG.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
-import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-elFBcBvs.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-Qkh2E7Cp.js";
 import { X as useDebouncedCallback } from "./input-Cn-SZdXY.js";
 import "./toDate-B4-pUFYh.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.11-dev23",
+  "version": "0.23.11-dev25",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/__tests__/columns.test.tsx

@@ -1082,3 +1082,23 @@ describe("renderCellValue with datetime values", () => {
     });
   });
 });
+
+test("column_widths sets fixed size and meta.width", () => {
+  const cols = generateColumns({
+    rowHeaders: [],
+    selection: null,
+    fieldTypes: [
+      ["a", ["number", "int64"]],
+      ["b", ["string", "str"]],
+    ],
+    columnWidths: { a: 120 },
+  });
+  const a = cols.find((c) => c.id === "a");
+  const b = cols.find((c) => c.id === "b");
+  expect(a?.size).toBe(120);
+  expect(a?.minSize).toBe(120);
+  expect(a?.maxSize).toBe(120);
+  expect(a?.meta?.width).toBe(120);
+  expect(b?.size).toBeUndefined();
+  expect(b?.meta?.width).toBeUndefined();
+});

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

@@ -118,6 +118,7 @@ export function generateColumns<T>({
   showDataTypes,
   calculateTopKRows,
   fractionDigitsByColumn,
+  columnWidths,
 }: {
   rowHeaders: FieldTypesWithExternalType;
   selection: DataTableSelection;
@@ -129,6 +130,7 @@ export function generateColumns<T>({
   showDataTypes?: boolean;
   calculateTopKRows?: CalculateTopKRows;
   fractionDigitsByColumn?: Record<string, number>;
+  columnWidths?: Record<string, number>;
 }): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
@@ -311,7 +313,20 @@ export function generateColumns<T>({
       // Can only sort if key is defined
       // For example, unnamed index columns, won't be sortable
       enableSorting: !!key,
-      meta: getMeta(key),
+      meta: {
+        ...getMeta(key),
+        width: columnWidths?.[key],
+      },
+      // size seeds the width before measurement; minSize/maxSize pin
+      // getSize() to the fixed width so the per-paint measurement writeback
+      // cannot drift the header width or sticky-pin offsets.
+      ...(columnWidths?.[key] !== undefined
+        ? {
+            size: columnWidths[key],
+            minSize: columnWidths[key],
+            maxSize: columnWidths[key],
+          }
+        : {}),
     }),
   );
 

package/src/components/data-table/filters/types.ts

@@ -11,6 +11,7 @@ declare module "@tanstack/react-table" {
     dataType?: DataType;
     filterType?: FilterType;
     minFractionDigits?: number;
+    width?: number;
   }
 }
 

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

@@ -141,6 +141,7 @@ export const DataTableBody = <TData,>({
   const renderCells = (cells: Cell<TData, unknown>[]) => {
     return cells.map((cell) => {
       const { className, style: pinningstyle } = getPinningStyles(cell.column);
+      const fixedWidth = cell.column.columnDef.meta?.width;
       const style = Object.assign(
         {},
         cell.getUserStyling?.() || {},
@@ -153,7 +154,8 @@ export const DataTableBody = <TData,>({
           {...getCellDomProps(cell.id)}
           key={cell.id}
           className={cn(
-            "whitespace-pre truncate max-w-[300px] outline-hidden border-r border-r-border/75",
+            "whitespace-pre truncate outline-hidden border-r border-r-border/75",
+            !fixedWidth && "max-w-[300px]",
             cell.column.getColumnWrapping &&
               cell.column.getColumnWrapping?.() === "wrap" &&
               COLUMN_WRAPPING_STYLES,
@@ -297,6 +299,7 @@ function getPinningStyles<TData>(
     isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn =
     isPinned === "right" && column.getIsFirstColumn("right");
+  const fixedWidth = column.columnDef.meta?.width;
 
   return {
     className: cn(isPinned && "bg-inherit", "shadow-r z-10"),
@@ -313,6 +316,7 @@ function getPinningStyles<TData>(
       position: isPinned ? "sticky" : "relative",
       zIndex: isPinned ? 1 : 0,
       width: column.getSize(),
+      ...(fixedWidth ? { minWidth: fixedWidth, maxWidth: fixedWidth } : {}),
     },
   };
 }

package/src/components/editor/header/__tests__/status.test.tsx

@@ -67,10 +67,6 @@ describe("StatusOverlay disconnect indicator", () => {
   });
 
   it.each([
-    [
-      WebSocketClosedReason.MALFORMED_QUERY,
-      "the kernel did not recognize a request; please file a bug with marimo",
-    ],
     [
       WebSocketClosedReason.KERNEL_STARTUP_ERROR,
       "Failed to start kernel sandbox",

package/src/components/editor/header/status.tsx

@@ -22,9 +22,8 @@ export const StatusOverlay: React.FC<{
   const { mode } = useAtomValue(viewStateAtom);
   const isClosed = connection.state === WebSocketState.CLOSED;
   const isOpen = connection.state === WebSocketState.OPEN;
-  // Only KERNEL_DISCONNECTED is recoverable by a retry. Other terminal
-  // reasons (MALFORMED_QUERY, KERNEL_STARTUP_ERROR) would deterministically
-  // fail the same way.
+  // Only KERNEL_DISCONNECTED is recoverable by a retry. KERNEL_STARTUP_ERROR
+  // would deterministically fail the same way.
   const canReconnect =
     isClosed && connection.code === WebSocketClosedReason.KERNEL_DISCONNECTED;
 

package/src/core/websocket/__tests__/useMarimoKernelConnection.test.ts

@@ -32,7 +32,6 @@ describe("classifyCloseEvent", () => {
 
   describe("terminal closes (server-initiated)", () => {
     it.each([
-      "MARIMO_WRONG_KERNEL_ID",
       "MARIMO_NO_FILE_KEY",
       "MARIMO_NO_SESSION_ID",
       "MARIMO_NO_SESSION",
@@ -49,18 +48,6 @@ describe("classifyCloseEvent", () => {
       }
     });
 
-    it("MARIMO_MALFORMED_QUERY → terminal but does NOT close transport", () => {
-      const decision = classify("MARIMO_MALFORMED_QUERY");
-      expect(decision.kind).toBe("terminal");
-      expect(decision.status).toMatchObject({
-        state: WebSocketState.CLOSED,
-        code: WebSocketClosedReason.MALFORMED_QUERY,
-      });
-      if (decision.kind === "terminal") {
-        expect(decision.closeTransport).toBe(false);
-      }
-    });
-
     it("MARIMO_KERNEL_STARTUP_ERROR → terminal + closeTransport", () => {
       const decision = classify("MARIMO_KERNEL_STARTUP_ERROR");
       expect(decision.kind).toBe("terminal");

package/src/core/websocket/types.ts

@@ -14,7 +14,6 @@ export type WebSocketState =
 
 export const WebSocketClosedReason = {
   KERNEL_DISCONNECTED: "KERNEL_DISCONNECTED",
-  MALFORMED_QUERY: "MALFORMED_QUERY",
   KERNEL_STARTUP_ERROR: "KERNEL_STARTUP_ERROR",
 } as const;
 

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -82,12 +82,10 @@ const SUPPORTS_LAZY_KERNELS = true;
 // (marimo/_server/api/endpoints/ws_endpoint.py and ws/*.py). Keep in sync with
 // the backend literals.
 export type CloseReason =
-  | "MARIMO_WRONG_KERNEL_ID"
   | "MARIMO_NO_FILE_KEY"
   | "MARIMO_NO_SESSION_ID"
   | "MARIMO_NO_SESSION"
   | "MARIMO_SHUTDOWN"
-  | "MARIMO_MALFORMED_QUERY"
   | "MARIMO_KERNEL_STARTUP_ERROR"
   | typeof TRANSPORT_EXHAUSTED_REASON;
 
@@ -107,7 +105,6 @@ export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
           reason: "kernel not found",
         },
       };
-    case "MARIMO_WRONG_KERNEL_ID":
     case "MARIMO_NO_FILE_KEY":
     case "MARIMO_NO_SESSION_ID":
     case "MARIMO_NO_SESSION":
@@ -121,17 +118,6 @@ export function classifyCloseEvent(event: { reason?: string }): CloseDecision {
         },
         closeTransport: true,
       };
-    case "MARIMO_MALFORMED_QUERY":
-      return {
-        kind: "terminal",
-        status: {
-          state: WebSocketState.CLOSED,
-          code: WebSocketClosedReason.MALFORMED_QUERY,
-          reason:
-            "the kernel did not recognize a request; please file a bug with marimo",
-        },
-        closeTransport: false,
-      };
     case "MARIMO_KERNEL_STARTUP_ERROR":
       return {
         kind: "terminal",

package/src/plugins/impl/DataTablePlugin.tsx

@@ -195,6 +195,7 @@ interface Data<T> {
   hiddenColumns?: string[];
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
+  columnWidths?: Record<string, number>;
   headerTooltip?: Record<string, string>;
   totalColumns: number;
   maxColumns: number | "all";
@@ -274,6 +275,9 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         .record(z.string(), z.enum(["left", "center", "right"]))
         .optional(),
       wrappedColumns: z.array(z.string()).optional(),
+      columnWidths: z
+        .record(z.string(), z.number().int().positive())
+        .optional(),
       headerTooltip: z.record(z.string(), z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
@@ -848,6 +852,7 @@ const DataTableComponent = ({
   hiddenColumns,
   textJustifyColumns,
   wrappedColumns,
+  columnWidths,
   headerTooltip,
   totalColumns,
   get_row_ids,
@@ -935,6 +940,7 @@ const DataTableComponent = ({
   const memoizedRowHeaders = useDeepCompareMemoize(rowHeaders);
   const memoizedTextJustifyColumns = useDeepCompareMemoize(textJustifyColumns);
   const memoizedWrappedColumns = useDeepCompareMemoize(wrappedColumns);
+  const memoizedColumnWidths = useDeepCompareMemoize(columnWidths);
   const memoizedChartSpecModel = useDeepCompareMemoize(chartSpecModel);
   const fractionDigitsByColumn = useDeepCompareMemoize(computedFractionDigits);
   const shownColumns = memoizedClampedFieldTypes.length;
@@ -953,6 +959,7 @@ const DataTableComponent = ({
         fieldTypes: memoizedClampedFieldTypes,
         textJustifyColumns: memoizedTextJustifyColumns,
         wrappedColumns: memoizedWrappedColumns,
+        columnWidths: memoizedColumnWidths,
         headerTooltip: headerTooltip,
         // Only show data types if they are explicitly set
         showDataTypes: showDataTypes,
@@ -967,6 +974,7 @@ const DataTableComponent = ({
       memoizedClampedFieldTypes,
       memoizedTextJustifyColumns,
       memoizedWrappedColumns,
+      memoizedColumnWidths,
       headerTooltip,
       calculate_top_k_rows,
       fractionDigitsByColumn,