marimo-team · mscolnick · Sep 28, 2025 · Sep 28, 2025
diff --git a/frontend/e2e-tests/bugs.spec.ts b/frontend/e2e-tests/bugs.spec.ts
@@ -16,7 +16,7 @@ test.beforeEach(async ({ page }, info) => {
  * This test makes sure that downstream UI elements are re-initialized when
  * upstream source cells are re-run.
  */
-test("correctly initializes cells", async ({ page }, info) => {
+test("correctly initializes cells", async ({ page }) => {
   // Is initialized to 1
   const number = page
     .getByTestId("marimo-plugin-number-input")

diff --git a/frontend/e2e-tests/global-setup.ts b/frontend/e2e-tests/global-setup.ts
@@ -1,10 +1,9 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-/** biome-ignore-all lint/suspicious/noConsole: for debugging */
 
 import { chromium, type FullConfig } from "@playwright/test";
 import { type ApplicationNames, getAppUrl } from "../playwright.config";
 
-async function globalSetup(config: FullConfig) {
+async function globalSetup(_config: FullConfig) {
   // Start a browser to test server connectivity
   const browser = await chromium.launch();
   const page = await browser.newPage();

@@ -134,11 +134,11 @@ export const MockNotebook = {
    * Create a notebook state with error outputs for testing ErrorContextProvider
    */
   notebookStateWithErrors: (
-    errors: Array<{
+    errors: {
       cellId: CellId;
       cellName: string;
       errorData: MarimoError[];
-    }>,
+    }[],
   ): NotebookState => {
     const cellData: Record<string, Partial<CellData>> = {};
 

@@ -23,7 +23,7 @@ vi.mock("../utils/vitals", () => ({
 }));
 
 vi.mock("react-dom/client", () => ({
-  createRoot: vi.fn().mockImplementation((el) => {
+  createRoot: vi.fn().mockImplementation((_el) => {
     return {
       render: vi.fn(),
     };
@@ -47,7 +47,7 @@ describe("main", () => {
 
   it.each(["edit", "read", "home", "run"])(
     "should mount with mode %s",
-    (mode) => {
+    (_mode) => {
       const el = document.createElement("div");
       mount({ mode: "edit" }, el);
 

@@ -36,10 +36,10 @@ export const SettingDescription: React.FC<PropsWithChildren> = ({
   return <p className="text-sm text-muted-foreground">{children}</p>;
 };
 
-export const SQL_OUTPUT_SELECT_OPTIONS: Array<{
+export const SQL_OUTPUT_SELECT_OPTIONS: {
   label: string;
   value: SqlOutputType;
-}> = [
+}[] = [
   { label: "Auto (Default)", value: "auto" },
   { label: "Native", value: "native" },
   { label: "Polars", value: "polars" },

@@ -17,7 +17,6 @@ interface AudioRecorderProps {
 export const AudioRecorder: React.FC<AudioRecorderProps> = ({
   onStart,
   onStop,
-  onPause,
   status,
   time,
 }) => {

@@ -528,7 +528,7 @@ export const CurrentModeBlock = (props: {
 };
 
 export const ToolNotificationsBlock = (props: {
-  data: Array<ToolCallNotificationEvent | ToolCallUpdateNotificationEvent>;
+  data: (ToolCallNotificationEvent | ToolCallUpdateNotificationEvent)[];
 }) => {
   const toolCalls = mergeToolCalls(props.data);
 
@@ -561,7 +561,7 @@ export const ToolNotificationsBlock = (props: {
 };
 
 export const DiffBlocks = (props: {
-  data: Array<Extract<ToolCallContent, { type: "diff" }>>;
+  data: Extract<ToolCallContent, { type: "diff" }>[];
 }) => {
   return (
     <div className="flex flex-col gap-2 text-muted-foreground">

@@ -99,23 +99,21 @@ export const AgentThread = ({
 
 function isErrorGroup(
   group: NotificationEvent[],
-): group is Array<Extract<NotificationEvent, { type: "error" }>> {
+): group is Extract<NotificationEvent, { type: "error" }>[] {
   // We only check the first since we know the group is the same type
   return group[0].type === "error";
 }
 
 function isConnectionChangeGroup(
   group: NotificationEvent[],
-): group is Array<Extract<NotificationEvent, { type: "connection_change" }>> {
+): group is Extract<NotificationEvent, { type: "connection_change" }>[] {
   // We only check the first since we know the group is the same type
   return group[0].type === "connection_change";
 }
 
 function isSessionNotificationGroup(
   group: NotificationEvent[],
-): group is Array<
-  Extract<NotificationEvent, { type: "session_notification" }>
-> {
+): group is Extract<NotificationEvent, { type: "session_notification" }>[] {
   // We only check the first since we know the group is the same type
   return group[0].type === "session_notification";
 }
@@ -3,7 +3,7 @@ import type { NotificationDataOf, SessionNotificationEventData } from "./types";
 
 export function isToolCalls(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"tool_call" | "tool_call_update">> {
+): group is NotificationDataOf<"tool_call" | "tool_call_update">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return (
@@ -14,31 +14,31 @@ export function isToolCalls(
 
 export function isAgentThoughts(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"agent_thought_chunk">> {
+): group is NotificationDataOf<"agent_thought_chunk">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return first.sessionUpdate === "agent_thought_chunk";
 }
 
 export function isUserMessages(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"user_message_chunk">> {
+): group is NotificationDataOf<"user_message_chunk">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return first.sessionUpdate === "user_message_chunk";
 }
 
 export function isAgentMessages(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"agent_message_chunk">> {
+): group is NotificationDataOf<"agent_message_chunk">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return first.sessionUpdate === "agent_message_chunk";
 }
 
 export function isPlans(
   group: SessionNotificationEventData[],
-): group is Array<NotificationDataOf<"plan">> {
+): group is NotificationDataOf<"plan">[] {
   // We only check the first since we know the group is the same type
   const first = group[0];
   return first.sessionUpdate === "plan";

@@ -18,7 +18,7 @@ describe("DataTable", () => {
       { id: 2, name: "Test 2" },
     ];
 
-    const columns: Array<ColumnDef<TestData>> = [
+    const columns: ColumnDef<TestData>[] = [
       { accessorKey: "name", header: "Name" },
     ];
 
@@ -70,7 +70,7 @@ describe("DataTable", () => {
       { id: 2, first: "Jim", last: "Halpert" },
     ];
 
-    const columns: Array<ColumnDef<RowData>> = [
+    const columns: ColumnDef<RowData>[] = [
       { accessorKey: "first", header: "First" },
       { accessorKey: "last", header: "Last" },
     ];

@@ -11,7 +11,7 @@ function createSpec(spec: {
   encoding: Record<
     string,
     | { field: string; type?: string }
-    | Array<{ field: string; tooltip?: Record<string, string> }>
+    | { field: string; tooltip?: Record<string, string> }[]
   >;
   resolve?: Record<string, unknown>;
   title?: string;

@@ -29,7 +29,7 @@ interface GetTooltipParams {
 
 export function getTooltips(
   params: GetTooltipParams,
-): Array<StringFieldDef<string>> | undefined {
+): StringFieldDef<string>[] | undefined {
   const { formValues, xEncoding, yEncoding, colorByEncoding } = params;
 
   if (!formValues.tooltips) {
@@ -73,7 +73,7 @@ export function getTooltips(
 
   // If autoTooltips is enabled, we manually add the x, y, and color columns to the tooltips
   if (formValues.tooltips.auto) {
-    const tooltips: Array<StringFieldDef<string>> = [];
+    const tooltips: StringFieldDef<string>[] = [];
     const xTooltip = addTooltip(
       xEncoding,
       formValues.general?.xColumn?.type || "string",
@@ -105,7 +105,7 @@ export function getTooltips(
 
   // Selected tooltips from the form.
   const selectedTooltips = formValues.tooltips.fields ?? [];
-  const tooltips: Array<StringFieldDef<string>> = [];
+  const tooltips: StringFieldDef<string>[] = [];
 
   // We need to find the matching columns for the selected tooltips if they exist
   // Otherwise, we can add them without other parameters

@@ -103,7 +103,7 @@ const ColumnSelectorWithAggregation: React.FC<{
     selectedDataType?: SelectedDataType;
   };
   defaultAggregation?: AggregationFn;
-  columns: Array<{ name: string; type: DataType }>;
+  columns: { name: string; type: DataType }[];
   binFieldName: FieldName;
 }> = ({
   columnFieldName,

@@ -86,7 +86,7 @@ export const ColumnSelector = ({
   includeCountField = true,
 }: {
   fieldName: FieldName;
-  columns: Array<{ name: string; type: DataType }>;
+  columns: { name: string; type: DataType }[];
   onValueChange?: (fieldName: string, type: DataType | undefined) => void;
   includeCountField?: boolean;
 }) => {
@@ -197,7 +197,7 @@ export const SelectField = ({
 }: {
   fieldName: FieldName;
   label: string;
-  options: Array<{ display: React.ReactNode; value: string }>;
+  options: { display: React.ReactNode; value: string }[];
   defaultValue: string;
 }) => {
   const form = useFormContext();

@@ -79,7 +79,7 @@ export const AGGREGATION_TYPE_DESCRIPTIONS: Record<AggregationFn, string> = {
   bin: "Group values into bins",
 };
 
-export const COLOR_SCHEMES: Array<ColorScheme | typeof DEFAULT_COLOR_SCHEME> = [
+export const COLOR_SCHEMES: (ColorScheme | typeof DEFAULT_COLOR_SCHEME)[] = [
   DEFAULT_COLOR_SCHEME,
   // Categorical schemes
   "accent",

@@ -211,7 +211,7 @@ const ColumnPreview = ({
       refetchPreview,
     });
 
-  const previewStats = stats && renderStats(stats, dataType, locale);
+  const previewStats = stats && renderStats({ stats, dataType, locale });
 
   const chart = chart_spec && renderChart(chart_spec, theme);
 

@@ -778,14 +778,14 @@ export class ColumnChartSpecModel<T> {
         const yField = "value";
 
         // Calculate xStart and xEnd for each value count
-        const newValueCounts: Array<{
+        const newValueCounts: {
           count: number;
           value: string;
           xStart: number;
           xEnd: number;
           xMid: number;
           proportion: number;
-        }> = [];
+        }[] = [];
         let xStart = 0;
         for (const valueCount of valueCounts) {
           const xEnd = xStart + valueCount.count;

@@ -117,7 +117,7 @@ export function generateColumns<T>({
   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));
 

@@ -48,7 +48,7 @@ interface DataTableProps<TData> extends Partial<DownloadActionProps> {
   wrapperClassName?: string;
   className?: string;
   maxHeight?: number;
-  columns: Array<ColumnDef<TData>>;
+  columns: ColumnDef<TData>[];
   data: TData[];
   // Sorting
   manualSorting?: boolean; // server-side sorting

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

@@ -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);

@@ -26,7 +26,7 @@ function createMockColumn(id: string): Column<unknown> {
 
 function createMockRow(
   id: string,
-  cells: Array<Cell<unknown, unknown>>,
+  cells: Cell<unknown, unknown>[],
 ): Row<unknown> {
   return {
     id,
@@ -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),

@@ -32,7 +32,7 @@ export function renderTableHeader<TData>(
     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);
@@ -70,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;
@@ -96,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
@@ -113,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(

@@ -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 })) {

@@ -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(
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,6 @@ interface AudioRecorderProps { @@
     export const AudioRecorder: React.FC<AudioRecorderProps> = ({
       onStart,
       onStop,
-      onPause,
       status,
       time,
     }) => {
@@ Expand Down @@