@marimo-team/islands 0.16.2 → 0.16.3

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
@@ -112,7 +113,7 @@ export const DataTableBody = <TData,>({
     });
   }
 
-  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(

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/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

@@ -451,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;
 
@@ -511,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 &&
@@ -654,7 +655,10 @@ const EditableCellComponent = ({
                 )}
               </div>
             </div>
-            <SqlValidationErrorBanner cellId={cellId} />
+            <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

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

@@ -192,8 +192,24 @@ describe("generateDatabaseCode", () => {
     },
   };
 
+  const databricksConnection: DatabaseConnection = {
+    type: "databricks",
+    access_token: "my_access_token",
+    server_hostname: "localhost",
+    http_path: "http://localhost:8080",
+  };
+
+  const databricksWithCatalogSchema: DatabaseConnection = {
+    type: "databricks",
+    access_token: "my_access_token",
+    server_hostname: "localhost",
+    http_path: "http://localhost:8080",
+    catalog: "my_catalog",
+    schema: "my_schema",
+  };
+
   describe("basic connections", () => {
-    const testCases: Array<[string, DatabaseConnection, ConnectionLibrary]> = [
+    const testCases: [string, DatabaseConnection, ConnectionLibrary][] = [
       ["postgres with SQLModel", basePostgres, "sqlmodel"],
       ["postgres with SQLAlchemy", basePostgres, "sqlalchemy"],
       ["mysql with SQLModel", baseMysql, "sqlmodel"],
@@ -218,9 +234,16 @@ describe("generateDatabaseCode", () => {
       ["pyspark with session", pysparkConnSession, "ibis"],
       ["redshift with DB credentials", redshiftDBConnection, "redshift"],
       ["redshift with IAM credentials", redshiftIAMConnection, "redshift"],
+      ["databricks", databricksConnection, "sqlalchemy"],
+      [
+        "databricks with catalog and schema",
+        databricksWithCatalogSchema,
+        "sqlalchemy",
+      ],
+      ["databricks with ibis", databricksConnection, "ibis"],
     ];
 
-    it.each(testCases)("%s", (name, connection, orm) => {
+    it.each(testCases)("%s", (_name, connection, orm) => {
       expect(generateDatabaseCode(connection, orm)).toMatchSnapshot();
     });
   });
@@ -292,7 +315,7 @@ describe("generateDatabaseCode", () => {
         },
         "duckdb",
       ],
-    ])("%s", (name, connection, orm) => {
+    ])("%s", (_name, connection, orm) => {
       expect(
         generateDatabaseCode(connection, orm as ConnectionLibrary),
       ).toMatchSnapshot();
@@ -300,7 +323,7 @@ describe("generateDatabaseCode", () => {
   });
 
   describe("edge cases", () => {
-    const testCases: Array<[string, DatabaseConnection, string]> = [
+    const testCases: [string, DatabaseConnection, string][] = [
       [
         "ENV with special chars SQLModel",
         {
@@ -504,7 +527,7 @@ describe("generateDatabaseCode", () => {
       ],
     ];
 
-    it.each(testCases)("%s", (name, connection, orm) => {
+    it.each(testCases)("%s", (_name, connection, orm) => {
       expect(
         generateDatabaseCode(connection, orm as ConnectionLibrary),
       ).toMatchSnapshot();
@@ -548,7 +571,7 @@ describe("generateDatabaseCode", () => {
           credentials_json: '{"type": "service_account", "project_id": "test"',
         },
       ],
-    ])("%s", (name, connection) => {
+    ])("%s", (_name, connection) => {
       expect(generateDatabaseCode(connection, "sqlmodel")).toMatchSnapshot();
       expect(generateDatabaseCode(connection, "sqlalchemy")).toMatchSnapshot();
     });
@@ -591,7 +614,7 @@ describe("generateDatabaseCode", () => {
             "sqlmodel",
           ),
       ],
-    ])("%s", (name, fn) => {
+    ])("%s", (_name, fn) => {
       expect(fn).toThrow();
     });
   });

package/src/components/editor/database/add-database-form.tsx

@@ -39,6 +39,7 @@ import {
   ChdbConnectionSchema,
   ClickhouseConnectionSchema,
   type DatabaseConnection,
+  DatabricksConnectionSchema,
   DataFusionConnectionSchema,
   DuckDBConnectionSchema,
   IcebergConnectionSchema,
@@ -210,6 +211,16 @@ const DATABASES = [
       preferred: "redshift",
     },
   },
+  {
+    name: "Databricks",
+    schema: DatabricksConnectionSchema,
+    color: "#c41e0c",
+    logo: "databricks",
+    connectionLibraries: {
+      libraries: ["sqlalchemy", "sqlmodel", "ibis"],
+      preferred: "sqlalchemy",
+    },
+  },
 ] satisfies ConnectionSchema[];
 
 const DATA_CATALOGS = [