@marimo-team/islands 0.16.1 → 0.16.3

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

@@ -17,6 +17,7 @@ import { JsonOutput } from "../editor/output/JsonOutput";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Tooltip } from "../ui/tooltip";
 import { DataTableColumnHeader } from "./column-header";
 import type { ColumnChartSpecModel } from "./column-summary/chart-spec-model";
 import { TableColumnSummary } from "./column-summary/column-summary";
@@ -103,6 +104,7 @@ export function generateColumns<T>({
   chartSpecModel,
   textJustifyColumns,
   wrappedColumns,
+  headerTooltip,
   showDataTypes,
   calculateTopKRows,
 }: {
@@ -112,9 +114,10 @@ export function generateColumns<T>({
   chartSpecModel?: ColumnChartSpecModel<unknown>;
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
+  headerTooltip?: Record<string, string>;
   showDataTypes?: boolean;
   calculateTopKRows?: CalculateTopKRows;
-}): Array<ColumnDef<T>> {
+}): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
 
@@ -165,6 +168,7 @@ export function generateColumns<T>({
       header: ({ column }) => {
         const stats = chartSpecModel?.getColumnStats(key);
         const dtype = column.columnDef.meta?.dtype;
+        const headerTitle = headerTooltip?.[key];
         const dtypeHeader =
           showDataTypes && dtype ? (
             <div className="flex flex-row gap-1">
@@ -179,14 +183,29 @@ export function generateColumns<T>({
 
         const headerWithType = (
           <div className="flex flex-col">
-            <span className="font-bold">{key === "" ? " " : key}</span>
+            <span
+              className={cn(
+                "font-bold",
+                headerTitle && "underline decoration-dotted",
+              )}
+            >
+              {key === "" ? " " : key}
+            </span>
             {dtypeHeader}
           </div>
         );
 
+        const headerWithTooltip = headerTitle ? (
+          <Tooltip content={headerTitle} delayDuration={300}>
+            {headerWithType}
+          </Tooltip>
+        ) : (
+          headerWithType
+        );
+
         const dataTableColumnHeader = (
           <DataTableColumnHeader
-            header={headerWithType}
+            header={headerWithTooltip}
             column={column}
             calculateTopKRows={calculateTopKRows}
           />

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

@@ -47,7 +47,8 @@ import { getStableRowId } from "./utils";
 interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   wrapperClassName?: string;
   className?: string;
-  columns: Array<ColumnDef<TData>>;
+  maxHeight?: number;
+  columns: ColumnDef<TData>[];
   data: TData[];
   // Sorting
   manualSorting?: boolean; // server-side sorting
@@ -95,6 +96,7 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
 const DataTableInternal = <TData,>({
   wrapperClassName,
   className,
+  maxHeight,
   columns,
   data,
   selection,
@@ -250,6 +252,36 @@ const DataTableInternal = <TData,>({
 
   const rowViewerPanelOpen = isPanelOpen?.("row-viewer") ?? false;
 
+  const tableRef = React.useRef<HTMLTableElement | null>(null);
+
+  // Why use a ref to set max-height on the wrapper?
+  // - position: sticky only works when the sticky element's nearest scrollable
+  //   ancestor is its immediate container. If max-height/overflow are applied
+  //   on a grandparent, sticky table headers (th) will not stick.
+  // - We keep the scroll wrapper colocated with the base Table component, but
+  //   derive the scroll boundary from maxHeight here to avoid coupling UI base
+  //   components to data-table specifics or expanding their API surface.
+  // - Setting styles on the table's direct wrapper ensures the header sticks
+  //   reliably across browsers without changing upstream components.
+  React.useEffect(() => {
+    if (!tableRef.current) {
+      return;
+    }
+    const wrapper = tableRef.current.parentElement as HTMLDivElement | null;
+    if (!wrapper) {
+      return;
+    }
+    if (maxHeight) {
+      wrapper.style.maxHeight = `${maxHeight}px`;
+      // Ensure wrapper scrolls
+      if (!wrapper.style.overflow) {
+        wrapper.style.overflow = "auto";
+      }
+    } else {
+      wrapper.style.removeProperty("max-height");
+    }
+  }, [maxHeight]);
+
   return (
     <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
       <FilterPills filters={filters} table={table} />
@@ -263,11 +295,11 @@ const DataTableInternal = <TData,>({
             reloading={reloading}
           />
         )}
-        <Table className="relative">
+        <Table className="relative" ref={tableRef}>
           {showLoadingBar && (
             <div className="absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide" />
           )}
-          {renderTableHeader(table)}
+          {renderTableHeader(table, Boolean(maxHeight))}
           <CellSelectionProvider>
             <DataTableBody
               table={table}

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

@@ -124,7 +124,7 @@ const RelativeTime = ({ date }: { date: Date }) => {
   const differenceInSeconds = (currentTime.getTime() - date.getTime()) / 1000;
 
   // Define time units with their thresholds and conversion factors
-  const timeUnits: Array<[number, number, string]> = [
+  const timeUnits: [number, number, string][] = [
     [60, 1, "second"], // Less than 60 seconds
     [60, 60, "minute"], // Less than 60 minutes
     [24, 3600, "hour"], // Less than 24 hours

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

@@ -167,7 +167,7 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
   );
 };
 
-function fetchJson(url: string): Promise<Array<Record<string, unknown>>> {
+function fetchJson(url: string): Promise<Record<string, unknown>[]> {
   return fetch(url).then((res) => {
     if (!res.ok) {
       throw new Error(res.statusText);

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

@@ -20,17 +20,17 @@ function createMockCell(id: string, value: unknown): Cell<unknown, unknown> {
 function createMockColumn(id: string): Column<unknown> {
   return {
     id: id,
-    getIndex: () => Number.parseInt(id),
+    getIndex: () => Number.parseInt(id, 10),
   } as unknown as Column<unknown>;
 }
 
 function createMockRow(
   id: string,
-  cells: Array<Cell<unknown, unknown>>,
+  cells: Cell<unknown, unknown>[],
 ): Row<unknown> {
   return {
     id,
-    index: Number.parseInt(id),
+    index: Number.parseInt(id, 10),
     getAllCells: () => cells,
     original: {},
     depth: 0,
@@ -43,8 +43,8 @@ function createMockRow(
 }
 
 function createMockTable(
-  rows: Array<Row<unknown>>,
-  columns: Array<Column<unknown>>,
+  rows: Row<unknown>[],
+  columns: Column<unknown>[],
 ): Table<unknown> {
   return {
     getRow: (id: string) => rows.find((row) => row.id === id),

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

@@ -26,12 +26,13 @@ import { useScrollIntoViewOnFocus } from "./range-focus/use-scroll-into-view";
 
 export function renderTableHeader<TData>(
   table: Table<TData>,
+  isSticky?: boolean,
 ): JSX.Element | null {
   if (!table.getRowModel().rows?.length) {
     return null;
   }
 
-  const renderHeaderGroup = (headerGroups: Array<HeaderGroup<TData>>) => {
+  const renderHeaderGroup = (headerGroups: HeaderGroup<TData>[]) => {
     return headerGroups.map((headerGroup) =>
       headerGroup.headers.map((header) => {
         const { className, style } = getPinningStyles(header.column);
@@ -57,7 +58,7 @@ export function renderTableHeader<TData>(
   };
 
   return (
-    <TableHeader>
+    <TableHeader className={cn(isSticky && "sticky top-0 z-10")}>
       <TableRow>
         {renderHeaderGroup(table.getLeftHeaderGroups())}
         {renderHeaderGroup(table.getCenterHeaderGroups())}
@@ -69,7 +70,7 @@ export function renderTableHeader<TData>(
 
 interface DataTableBodyProps<TData> {
   table: Table<TData>;
-  columns: Array<ColumnDef<TData>>;
+  columns: ColumnDef<TData>[];
   rowViewerPanelOpen: boolean;
   getRowIndex?: (row: TData, idx: number) => number;
   viewedRowIdx?: number;
@@ -95,7 +96,7 @@ export const DataTableBody = <TData,>({
 
   function applyHoverTemplate(
     template: string,
-    cells: Array<Cell<TData, unknown>>,
+    cells: Cell<TData, unknown>[],
   ): string {
     const variableRegex = /{{(\w+)}}/g;
     // Map column id -> stringified value
@@ -106,13 +107,13 @@ export const DataTableBody = <TData,>({
       const s = renderUnknownValue({ value: v, nullAsEmptyString: true });
       idToValue.set(c.column.id, s);
     }
-    return template.replace(variableRegex, (_substr, varName: string) => {
+    return template.replaceAll(variableRegex, (_substr, varName: string) => {
       const val = idToValue.get(varName);
-      return val !== undefined ? val : `{{${varName}}}`;
+      return val === undefined ? `{{${varName}}}` : val;
     });
   }
 
-  const renderCells = (cells: Array<Cell<TData, unknown>>) => {
+  const renderCells = (cells: Cell<TData, unknown>[]) => {
     return cells.map((cell) => {
       const { className, style: pinningstyle } = getPinningStyles(cell.column);
       const style = Object.assign(
@@ -154,6 +155,8 @@ export const DataTableBody = <TData,>({
     }
   };
 
+  const hoverTemplate = table.getState().cellHoverTemplate || null;
+
   return (
     <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
       {table.getRowModel().rows?.length ? (
@@ -165,12 +168,18 @@ export const DataTableBody = <TData,>({
           const isRowViewedInPanel =
             rowViewerPanelOpen && viewedRowIdx === rowIndex;
 
-          // Compute hover title once per row using this row's cells (visible or hidden)
-          const hoverTemplate = table.getState().cellHoverTemplate || null;
-          const rowCells = row.getAllCells();
-          const rowTitle = hoverTemplate
-            ? applyHoverTemplate(hoverTemplate, rowCells)
-            : undefined;
+          // Compute hover title once per row using all visible cells
+          let rowTitle: string | undefined;
+          if (hoverTemplate) {
+            const visibleCells = row.getVisibleCells?.() ?? [
+              ...row.getLeftVisibleCells(),
+              ...row.getCenterVisibleCells(),
+              ...row.getRightVisibleCells(),
+            ];
+            rowTitle = hoverTemplate
+              ? applyHoverTemplate(hoverTemplate, visibleCells)
+              : undefined;
+          }
 
           return (
             <TableRow

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

@@ -188,7 +188,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
           </TableRow>
         </TableHeader>
         <TableBody>
-          {fieldTypes?.map(([columnName, [dataType, externalType]]) => {
+          {fieldTypes?.map(([columnName, [dataType, _externalType]]) => {
             const columnValue = rowValues[columnName];
 
             if (!inSearchQuery({ columnName, columnValue, searchQuery })) {

package/src/components/data-table/schemas.ts

@@ -0,0 +1,16 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import z from "zod";
+import { rpc } from "@/plugins/core/rpc";
+
+export type DownloadAsArgs = (req: {
+  format: "csv" | "json" | "parquet";
+}) => Promise<string>;
+
+export const DownloadAsSchema = rpc
+  .input(
+    z.object({
+      format: z.enum(["csv", "json", "parquet"]),
+    }),
+  )
+  .output(z.string());

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

@@ -27,9 +27,10 @@ export type ColumnHeaderStats = Record<
   number | string | null
 >;
 
-export type FieldTypesWithExternalType = Array<
-  [columnName: string, [dataType: DataType, externalType: string]]
->;
+export type FieldTypesWithExternalType = [
+  columnName: string,
+  [dataType: DataType, externalType: string],
+][];
 export type FieldTypes = Record<string, DataType>;
 
 export function toFieldTypes(

package/src/components/datasources/column-preview.tsx

@@ -110,7 +110,8 @@ export const DatasetColumnPreview: React.FC<{
     });
 
   const stats =
-    preview.stats && renderStats(preview.stats, column.type, locale);
+    preview.stats &&
+    renderStats({ stats: preview.stats, dataType: column.type, locale });
 
   const chart = preview.chart_spec && renderChart(preview.chart_spec, theme);
 
@@ -175,11 +176,13 @@ export function renderPreviewError({
   );
 }
 
-export function renderStats(
-  stats: Partial<Record<ColumnHeaderStatsKey, unknown>>,
-  dataType: DataType,
-  locale: string,
-) {
+interface RenderStatsProps {
+  stats: Partial<Record<ColumnHeaderStatsKey, unknown>>;
+  dataType: DataType;
+  locale: string;
+}
+
+export function renderStats({ stats, dataType, locale }: RenderStatsProps) {
   return (
     <div className="gap-x-16 gap-y-1 grid grid-cols-2-fit border rounded p-2 empty:hidden">
       {Object.entries(stats).map(([key, value]) => {

package/src/components/debugger/debugger-code.tsx

@@ -106,7 +106,7 @@ const DebuggerInput: React.FC<{
                 key: "Enter",
                 preventDefault: true,
                 stopPropagation: true,
-                run: (view: EditorView) => {
+                run: () => {
                   const v = value.trim().replaceAll("\n", "\\n");
                   if (!v) {
                     return true;

package/src/components/dependency-graph/custom-node.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import React, { memo, use } from "react";
+import React, { memo, use, useId } from "react";
 import { Handle, Position, useStore } from "reactflow";
 import { TinyCode } from "@/components/editor/cell/TinyCode";
 import { useCellIds } from "@/core/cells/cells";
@@ -23,7 +23,7 @@ const EQUALITY_CHECK = (
   prevProps: CustomNodeProps,
   nextProps: CustomNodeProps,
 ) => {
-  const keys: Array<keyof CustomNodeProps> = ["data", "selected", "id"];
+  const keys: (keyof CustomNodeProps)[] = ["data", "selected", "id"];
   return keys.every((key) => prevProps[key] === nextProps[key]);
 };
 
@@ -37,18 +37,25 @@ export const CustomNode = memo((props: CustomNodeProps) => {
   const reactFlowWidth = useStore(({ width }) => width);
   const edgeMarkers = use(EdgeMarkerContext);
 
+  const inputOneId = useId();
+  const inputTwoId = useId();
+  const outputOneId = useId();
+  const outputTwoId = useId();
+
   const linesOfCode = cell.code.split("\n").length;
   return (
     <div>
       <Handle
         type="target"
-        id="inputs"
+        id={inputOneId}
+        data-testid="input-one"
         position={edgeMarkers === "LR" ? Position.Left : Position.Top}
         style={{ background: color }}
       />
       <Handle
         type="source"
-        id="inputs"
+        id={inputTwoId}
+        data-testid="input-two"
         position={edgeMarkers === "LR" ? Position.Left : Position.Top}
         style={{ background: color }}
       />
@@ -69,13 +76,15 @@ export const CustomNode = memo((props: CustomNodeProps) => {
       </div>
       <Handle
         type="source"
-        id="outputs"
+        id={outputOneId}
+        data-testid="output-one"
         position={edgeMarkers === "LR" ? Position.Right : Position.Bottom}
         style={{ background: color }}
       />
       <Handle
         type="target"
-        id="outputs"
+        id={outputTwoId}
+        data-testid="output-two"
         position={edgeMarkers === "LR" ? Position.Right : Position.Bottom}
         style={{ background: color }}
       />

package/src/components/dependency-graph/dependency-graph-minimap.tsx

@@ -31,7 +31,7 @@ import { useFitToViewOnDimensionChange } from "./utils/useFitToViewOnDimensionCh
 interface Props {
   cellIds: CellId[];
   variables: Variables;
-  cellAtoms: Array<Atom<CellData>>;
+  cellAtoms: Atom<CellData>[];
 }
 
 const elementsBuilder = new VerticalElementsBuilder();
@@ -57,7 +57,7 @@ export const DependencyGraphMinimap: React.FC<PropsWithChildren<Props>> = ({
 
   // If the cellIds change, update the nodes.
   const syncChanges = useEvent(
-    (elements: { nodes: Array<Node<NodeData>>; edges: Edge[] }) => {
+    (elements: { nodes: Node<NodeData>[]; edges: Edge[] }) => {
       setNodes(elements.nodes);
       setEdges([]);
     },

package/src/components/dependency-graph/dependency-graph-tree.tsx

@@ -36,7 +36,7 @@ import { useFitToViewOnDimensionChange } from "./utils/useFitToViewOnDimensionCh
 interface Props {
   cellIds: CellId[];
   variables: Variables;
-  cellAtoms: Array<Atom<CellData>>;
+  cellAtoms: Atom<CellData>[];
   layoutDirection: LayoutDirection;
   settings: GraphSettings;
 }
@@ -74,7 +74,7 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
   const api = useReactFlow();
 
   const syncChanges = useEvent(
-    (elements: { nodes: Array<Node<NodeData>>; edges: Edge[] }) => {
+    (elements: { nodes: Node<NodeData>[]; edges: Edge[] }) => {
       // Layout the elements
       const result = layoutElements({
         nodes: elements.nodes,

package/src/components/dependency-graph/dependency-graph.tsx

@@ -18,7 +18,7 @@ import "./dependency-graph.css";
 interface Props {
   cellIds: CellId[];
   variables: Variables;
-  cellAtoms: Array<Atom<CellData>>;
+  cellAtoms: Atom<CellData>[];
   children?: React.ReactNode;
 }
 

package/src/components/dependency-graph/elements.ts

@@ -22,10 +22,10 @@ export function getNodeHeight(linesOfCode: number) {
 interface ElementsBuilder {
   createElements: (
     cellIds: CellId[],
-    cellAtoms: Array<Atom<CellData>>,
+    cellAtoms: Atom<CellData>[],
     variables: Variables,
     hidePureMarkdown: boolean,
-  ) => { nodes: Array<Node<NodeData>>; edges: Edge[] };
+  ) => { nodes: Node<NodeData>[]; edges: Edge[] };
 }
 
 export class VerticalElementsBuilder implements ElementsBuilder {
@@ -69,12 +69,12 @@ export class VerticalElementsBuilder implements ElementsBuilder {
 
   createElements(
     cellIds: CellId[],
-    cellAtoms: Array<Atom<CellData>>,
+    cellAtoms: Atom<CellData>[],
     variables: Variables,
-    hidePureMarkdown: boolean,
+    _hidePureMarkdown: boolean,
   ) {
     let prevY = 0;
-    const nodes: Array<Node<NodeData>> = [];
+    const nodes: Node<NodeData>[] = [];
     const edges: Edge[] = [];
     for (const [cellId, cellAtom] of Arrays.zip(cellIds, cellAtoms)) {
       const node = this.createNode(cellId, cellAtom, prevY);
@@ -135,11 +135,11 @@ export class TreeElementsBuilder implements ElementsBuilder {
 
   createElements(
     cellIds: CellId[],
-    cellAtoms: Array<Atom<CellData>>,
+    cellAtoms: Atom<CellData>[],
     variables: Variables,
     hidePureMarkdown: boolean,
   ) {
-    const nodes: Array<Node<NodeData>> = [];
+    const nodes: Node<NodeData>[] = [];
     const edges: Edge[] = [];
 
     const nodesWithEdges = new Set<CellId>();

package/src/components/dependency-graph/utils/changes.ts

@@ -11,8 +11,8 @@ import type {
 export function getNodeChanges(
   prevNodes: Node[],
   nextNodes: Node[],
-): Array<NodeAddChange | NodeRemoveChange> {
-  const changes: Array<NodeAddChange | NodeRemoveChange> = [];
+): (NodeAddChange | NodeRemoveChange)[] {
+  const changes: (NodeAddChange | NodeRemoveChange)[] = [];
   const prevNodeIds = new Set(prevNodes.map((node) => node.id));
   const nextNodeIds = new Set(nextNodes.map((node) => node.id));
 
@@ -33,8 +33,8 @@ export function getNodeChanges(
 export function getEdgeChanges(
   prevEdges: Edge[],
   nextEdges: Edge[],
-): Array<EdgeAddChange | EdgeRemoveChange> {
-  const changes: Array<EdgeAddChange | EdgeRemoveChange> = [];
+): (EdgeAddChange | EdgeRemoveChange)[] {
+  const changes: (EdgeAddChange | EdgeRemoveChange)[] = [];
   const prevEdgeIds = new Set(prevEdges.map((edge) => edge.id));
   const nextEdgeIds = new Set(nextEdges.map((edge) => edge.id));
 

package/src/components/editor/Cell.tsx

@@ -80,6 +80,7 @@ import { useDeleteCellCallback } from "./cell/useDeleteCell";
 import { useRunCell } from "./cell/useRunCells";
 import { HideCodeButton } from "./code/readonly-python-code";
 import { cellDomProps } from "./common";
+import { SqlValidationErrorBanner } from "./errors/sql-validation-errors";
 import { useCellNavigationProps } from "./navigation/navigation";
 import {
   useTemporarilyShownCode,
@@ -450,6 +451,7 @@ const EditableCellComponent = ({
   });
   const canCollapse = canCollapseOutline(cellRuntime.outline);
   const hasOutput = !isOutputEmpty(cellRuntime.output);
+  const isStaleCell = outputIsStale(cellRuntime, cellData.edited);
   const hasConsoleOutput = cellRuntime.consoleOutputs.length > 0;
   const cellOutput = userConfig.display.cell_output;
 
@@ -510,7 +512,7 @@ const EditableCellComponent = ({
         className="output-area"
         cellId={cellId}
         output={cellRuntime.output}
-        stale={outputIsStale(cellRuntime, cellData.edited)}
+        stale={isStaleCell}
         loading={outputIsLoading(cellRuntime.status)}
       />
       {isMarkdownCodeHidden &&
@@ -653,6 +655,10 @@ const EditableCellComponent = ({
                 )}
               </div>
             </div>
+            <SqlValidationErrorBanner
+              cellId={cellId}
+              hide={cellRuntime.errored && !isStaleCell}
+            />
             {cellOutput === "below" && outputArea}
             {cellRuntime.serialization && (
               <div className="py-1 px-2 flex items-center justify-end gap-2 last:rounded-b">

package/src/components/editor/ai/transport/chat-transport.tsx

@@ -16,7 +16,7 @@ export class StreamingChunkTransport<
   private onChunkReceived: (chunk: UIMessageChunk) => void;
 
   constructor(
-    options: HttpChatTransportInitOptions<UI_MESSAGE> = {},
+    options: HttpChatTransportInitOptions<UI_MESSAGE>,
     onChunkReceived: (chunk: UIMessageChunk) => void,
   ) {
     super(options);

package/src/components/editor/chrome/panels/outline/useActiveOutline.tsx

@@ -18,7 +18,7 @@ function getRootScrollableElement() {
  * React hook to find the active header in the outline
  */
 export function useActiveOutline(
-  headerElements: Array<readonly [HTMLElement, string]>,
+  headerElements: (readonly [HTMLElement, string])[],
 ) {
   const [activeHeaderId, setActiveHeaderId] = useState<string | undefined>(
     undefined,

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -300,7 +300,7 @@ const InstallPackageForm: React.FC<{
 
 const PackagesList: React.FC<{
   onSuccess: () => void;
-  packages: Array<{ name: string; version: string }>;
+  packages: { name: string; version: string }[];
 }> = ({ onSuccess, packages }) => {
   if (packages.length === 0) {
     return (

package/src/components/editor/columns/storage.ts

@@ -7,7 +7,7 @@ import { NotebookScopedLocalStorage } from "@/utils/localStorage";
 const BASE_KEY = "marimo:notebook-col-sizes";
 
 interface ColumnSizes {
-  widths: Array<number | "contentWidth">;
+  widths: (number | "contentWidth")[];
 }
 
 function initialState(): ColumnSizes {

package/src/components/editor/database/__tests__/__snapshots__/as-code.test.ts.snap

@@ -28,6 +28,42 @@ engine = clickhouse_connect.get_client(
 )"
 `;
 
+exports[`generateDatabaseCode > basic connections > databricks 1`] = `
+"import os
+import sqlalchemy
+
+_access_token = os.environ.get("DATABRICKS_ACCESS_TOKEN", "my_access_token")
+_server_hostname = os.environ.get("DATABRICKS_SERVER_HOSTNAME", "localhost")
+_http_path = os.environ.get("DATABRICKS_HTTP_PATH", "http://localhost:8080")
+DATABASE_URL = f"databricks://token:{_access_token}@{_server_hostname}?http_path={_http_path}"
+engine = sqlalchemy.create_engine(DATABASE_URL)"
+`;
+
+exports[`generateDatabaseCode > basic connections > databricks with catalog and schema 1`] = `
+"import os
+import sqlalchemy
+
+_access_token = os.environ.get("DATABRICKS_ACCESS_TOKEN", "my_access_token")
+_server_hostname = os.environ.get("DATABRICKS_SERVER_HOSTNAME", "localhost")
+_http_path = os.environ.get("DATABRICKS_HTTP_PATH", "http://localhost:8080")
+DATABASE_URL = f"databricks://token:{_access_token}@{_server_hostname}?http_path={_http_path}&catalog=my_catalog&schema=my_schema"
+engine = sqlalchemy.create_engine(DATABASE_URL)"
+`;
+
+exports[`generateDatabaseCode > basic connections > databricks with ibis 1`] = `
+"import ibis
+import os
+
+_access_token = os.environ.get("DATABRICKS_ACCESS_TOKEN", "my_access_token")
+_server_hostname = os.environ.get("DATABRICKS_SERVER_HOSTNAME", "localhost")
+_http_path = os.environ.get("DATABRICKS_HTTP_PATH", "http://localhost:8080")
+engine = ibis.databricks.connect(
+  server_hostname=_server_hostname,
+  http_path=_http_path,
+  access_token=_access_token
+)"
+`;
+
 exports[`generateDatabaseCode > basic connections > datafusion 1`] = `
 "from datafusion import SessionContext
 import ibis