@marimo-team/frontend 0.16.1 → 0.16.3

package/src/components/data-table/charts/chart-spec/tooltips.ts

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

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

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

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

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

package/src/components/data-table/charts/constants.ts

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

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

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

package/src/components/data-table/column-summary/chart-spec-model.tsx

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

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