@marimo-team/frontend 0.16.0-dev96986 → 0.16.0

package/src/plugins/impl/anywidget/model.ts

@@ -17,10 +17,8 @@ export type EventHandler = (...args: any[]) => void;
 
 class ModelManager {
   private models = new Map<string, Deferred<Model<any>>>();
-  private timeout: number;
-  constructor(timeout = 10_000) {
-    this.timeout = timeout;
-  }
+
+  constructor(private timeout = 10_000) {}
 
   get(key: string): Promise<Model<any>> {
     let deferred = this.models.get(key);
@@ -66,25 +64,16 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
   private ANY_CHANGE_EVENT = "change";
   private dirtyFields;
   public static _modelManager: ModelManager = MODEL_MANAGER;
-  private data: T;
-  private onChange: (value: Partial<T>) => void;
-  private sendToWidget: (req: {
-    content?: any;
-    buffers?: ArrayBuffer[] | ArrayBufferView[];
-  }) => Promise<null | undefined>;
 
   constructor(
-    data: T,
-    onChange: (value: Partial<T>) => void,
-    sendToWidget: (req: {
+    private data: T,
+    private onChange: (value: Partial<T>) => void,
+    private sendToWidget: (req: {
       content?: any;
       buffers?: ArrayBuffer[] | ArrayBufferView[];
     }) => Promise<null | undefined>,
     initialDirtyFields: Set<keyof T>,
   ) {
-    this.data = data;
-    this.onChange = onChange;
-    this.sendToWidget = sendToWidget;
     this.dirtyFields = new Set(initialDirtyFields);
   }
 

package/src/plugins/impl/data-editor/types.ts

@@ -10,13 +10,11 @@ export interface PositionalEdit {
   value: unknown;
 }
 
-export const BulkEdit = {
-  Insert: "insert",
-  Remove: "remove",
-  Rename: "rename",
-} as const;
-
-type BulkEdit = (typeof BulkEdit)[keyof typeof BulkEdit];
+export enum BulkEdit {
+  Insert = "insert",
+  Remove = "remove",
+  Rename = "rename",
+}
 
 export interface RowEdit {
   rowIdx: number;

package/src/plugins/impl/data-explorer/components/column-summary.tsx

@@ -3,7 +3,6 @@
 import type { Schema } from "compassql/build/src/schema";
 import { BarChartBigIcon } from "lucide-react";
 import React, { useState } from "react";
-import { useDateFormatter, useNumberFormatter } from "react-aria";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -132,9 +131,7 @@ export const ColumnSummary: React.FC<Props> = ({ schema }) => {
           {STAT_KEYS.map((key) => (
             <div key={key} className="flex flex-row gap-2 min-w-[100px]">
               <span className="font-semibold">{key}</span>
-              <span>
-                <FormatStat value={stats?.[key]} />
-              </span>
+              <span>{formatStat(stats?.[key])}</span>
             </div>
           ))}
         </div>
@@ -154,28 +151,24 @@ const STAT_KEYS = [
   "stdev",
 ];
 
-const FormatStat = ({ value }: { value: unknown }) => {
-  // Decimal .2
-  const numberFormatter = useNumberFormatter({
-    maximumFractionDigits: 2,
-  });
-
-  // Just day, month, year
-  const dateFormatter = useDateFormatter({
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-
+function formatStat(value: unknown) {
   if (typeof value === "number") {
-    return numberFormatter.format(value);
+    // Decimal .2
+    return new Intl.NumberFormat("en-US", {
+      maximumFractionDigits: 2,
+    }).format(value);
   }
   if (typeof value === "string") {
     return value;
   }
   if (typeof value === "object" && value instanceof Date) {
-    return dateFormatter.format(value);
+    // Just day, month, year
+    return new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    }).format(value);
   }
 
   return String(value);
-};
+}

package/src/plugins/impl/panel/utils.ts

@@ -57,13 +57,11 @@ export class EventBuffer<T> {
   private buffer: T[] = [];
   private isBlocked = false;
   private timeout: number | null = null;
-  private processEvents: () => void;
-  private blockDuration: number;
 
-  constructor(processEvents: () => void, blockDuration = 200) {
-    this.processEvents = processEvents;
-    this.blockDuration = blockDuration;
-  }
+  constructor(
+    private processEvents: () => void,
+    private blockDuration = 200,
+  ) {}
 
   add(event: T) {
     this.buffer.push(event);

package/src/plugins/layout/StatPlugin.tsx

@@ -2,7 +2,6 @@
 
 import { TriangleIcon } from "lucide-react";
 import type { JSX } from "react";
-import { useLocale } from "react-aria";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
 import { prettyNumber } from "@/utils/numbers";
@@ -42,8 +41,6 @@ export const StatComponent: React.FC<Data> = ({
   bordered,
   direction,
 }) => {
-  const { locale } = useLocale();
-
   const renderPrettyValue = () => {
     if (value == null) {
       return <i>No value</i>;
@@ -54,7 +51,7 @@ export const StatComponent: React.FC<Data> = ({
     }
 
     if (typeof value === "number") {
-      return prettyNumber(value, locale);
+      return prettyNumber(value);
     }
 
     if (typeof value === "boolean") {

package/src/plugins/plugins.ts

@@ -45,7 +45,6 @@ import { JsonOutputPlugin } from "./layout/JsonOutputPlugin";
 import { LazyPlugin } from "./layout/LazyPlugin";
 import { MimeRendererPlugin } from "./layout/MimeRenderPlugin";
 import { MermaidPlugin } from "./layout/mermaid/MermaidPlugin";
-import { OutlinePlugin } from "./layout/OutlinePlugin";
 import { ProgressPlugin } from "./layout/ProgressPlugin";
 import { RoutesPlugin } from "./layout/RoutesPlugin";
 import { StatPlugin } from "./layout/StatPlugin";
@@ -100,7 +99,6 @@ const LAYOUT_PLUGINS: Array<IStatelessPlugin<unknown>> = [
   new MimeRendererPlugin(),
   new MermaidPlugin(),
   new NavigationMenuPlugin(),
-  new OutlinePlugin(),
   new ProgressPlugin(),
   new RoutesPlugin(),
   new StatPlugin(),

package/src/utils/__tests__/dates.test.ts

@@ -8,8 +8,6 @@ import {
   timeAgo,
 } from "../dates";
 
-const locale = "en-US";
-
 describe("dates", () => {
   // Save original timezone
   let originalTimezone: string | undefined;
@@ -27,38 +25,36 @@ describe("dates", () => {
 
   describe("prettyDate", () => {
     it("returns empty string for null or undefined", () => {
-      expect(prettyDate(null, "date", locale)).toBe("");
-      expect(prettyDate(undefined, "date", locale)).toBe("");
+      expect(prettyDate(null, "date")).toBe("");
+      expect(prettyDate(undefined, "date")).toBe("");
     });
 
     it("formats date correctly", () => {
       const date = new Date("2023-05-15T12:00:00Z");
       // Using a regex to match the pattern since exact format may vary by locale
-      expect(prettyDate(date.toISOString(), "date", locale)).toMatch(
-        /May 15, 2023/,
-      );
+      expect(prettyDate(date.toISOString(), "date")).toMatch(/May 15, 2023/);
     });
 
     it("formats datetime correctly", () => {
       const date = new Date("2023-05-15T12:00:00Z");
-      expect(prettyDate(date.toISOString(), "datetime", locale)).toMatch(
+      expect(prettyDate(date.toISOString(), "datetime")).toMatch(
         /May 15, 2023/,
       );
     });
 
     it("handles errors gracefully", () => {
-      expect(prettyDate("invalid-date", "date", locale)).toBe("Invalid Date");
+      expect(prettyDate("invalid-date", "date")).toBe("Invalid Date");
     });
 
     it("handles numeric timestamp input", () => {
       const timestamp = 1_684_152_000_000; // 2023-05-15T12:00:00Z in milliseconds
-      expect(prettyDate(timestamp, "date", locale)).toMatch(/May 15, 2023/);
+      expect(prettyDate(timestamp, "date")).toMatch(/May 15, 2023/);
     });
 
     it("preserves timezone for datetime type", () => {
       // This date is in winter time to avoid daylight saving time issues
       const date = new Date("2023-01-15T15:30:00Z");
-      expect(prettyDate(date.toISOString(), "datetime", locale)).toMatch(
+      expect(prettyDate(date.toISOString(), "datetime")).toMatch(
         /Jan 15, 2023/,
       );
     });
@@ -66,9 +62,7 @@ describe("dates", () => {
     it("drops timezone for date type by using UTC", () => {
       // Create a date that would be different days in different timezones
       const date = new Date("2023-05-15T23:30:00Z"); // Late in the day UTC
-      expect(prettyDate(date.toISOString(), "date", locale)).toMatch(
-        /May 15, 2023/,
-      );
+      expect(prettyDate(date.toISOString(), "date")).toMatch(/May 15, 2023/);
     });
 
     describe("with different locales", () => {
@@ -92,9 +86,7 @@ describe("dates", () => {
         };
 
         const date = new Date("2023-05-15T12:00:00Z");
-        expect(prettyDate(date.toISOString(), "date", locale)).toBe(
-          "15 mai 2023",
-        );
+        expect(prettyDate(date.toISOString(), "date")).toBe("15 mai 2023");
       });
     });
   });
@@ -102,42 +94,34 @@ describe("dates", () => {
   describe("exactDateTime", () => {
     it("formats date without milliseconds", () => {
       const date = new Date("2023-05-15T12:00:00.000Z");
-      expect(exactDateTime(date, undefined, locale)).toBe(
-        "2023-05-15 12:00:00",
-      );
+      expect(exactDateTime(date, undefined)).toBe("2023-05-15 12:00:00");
     });
 
     it("formats date with milliseconds", () => {
       const date = new Date("2023-05-15T12:00:00.123Z");
-      expect(exactDateTime(date, undefined, locale)).toBe(
-        "2023-05-15 12:00:00.123",
-      );
+      expect(exactDateTime(date, undefined)).toBe("2023-05-15 12:00:00.123");
     });
 
     it("formats date in UTC when renderInUTC is true", () => {
       const date = new Date("2023-05-15T12:00:00.000Z");
-      expect(exactDateTime(date, "UTC", locale)).toBe(
-        "2023-05-15 12:00:00 UTC",
-      );
+      expect(exactDateTime(date, "UTC")).toBe("2023-05-15 12:00:00 UTC");
     });
 
     it("formats date with milliseconds in UTC when renderInUTC is true", () => {
       const date = new Date("2023-05-15T12:00:00.123Z");
-      expect(exactDateTime(date, "UTC", locale)).toBe(
-        "2023-05-15 12:00:00.123 UTC",
-      );
+      expect(exactDateTime(date, "UTC")).toBe("2023-05-15 12:00:00.123 UTC");
     });
 
     it("formats date in America/New_York timezone", () => {
       const date = new Date("2023-05-15T12:00:00.000Z");
-      expect(exactDateTime(date, "America/New_York", locale)).toBe(
+      expect(exactDateTime(date, "America/New_York")).toBe(
         "2023-05-15 08:00:00 EDT",
       );
     });
 
     it("formats date with milliseconds in America/New_York timezone", () => {
       const date = new Date("2023-05-15T12:00:00.123Z");
-      expect(exactDateTime(date, "America/New_York", locale)).toBe(
+      expect(exactDateTime(date, "America/New_York")).toBe(
         "2023-05-15 08:00:00.123 EDT",
       );
     });
@@ -145,47 +129,42 @@ describe("dates", () => {
 
   describe("timeAgo", () => {
     it("returns empty string for null, undefined, or 0", () => {
-      expect(timeAgo(null, locale)).toBe("");
-      expect(timeAgo(undefined, locale)).toBe("");
-      expect(timeAgo(0, locale)).toBe("");
+      expect(timeAgo(null)).toBe("");
+      expect(timeAgo(undefined)).toBe("");
+      expect(timeAgo(0)).toBe("");
     });
 
     it("formats today's date correctly", () => {
       const today = new Date();
-      const result = timeAgo(today.toISOString(), locale);
+      const result = timeAgo(today.toISOString());
       expect(result).toMatch(/Today at/);
     });
 
     it("formats yesterday's date correctly", () => {
       const yesterday = new Date();
       yesterday.setDate(yesterday.getDate() - 1);
-      const result = timeAgo(yesterday.toISOString(), locale);
+      const result = timeAgo(yesterday.toISOString());
       expect(result).toMatch(/Yesterday at/);
     });
 
     it("formats older dates correctly", () => {
       const oldDate = new Date("2020-01-01T12:00:00Z");
-      const result = timeAgo(oldDate.toISOString(), locale);
+      const result = timeAgo(oldDate.toISOString());
       expect(result).toMatch(/Jan 1, 2020 at/);
     });
 
     it("handles errors gracefully", () => {
-      expect(timeAgo("invalid-date", locale)).toBe(
-        "Invalid Date at Invalid Date",
-      );
+      expect(timeAgo("invalid-date")).toBe("Invalid Date at Invalid Date");
     });
   });
 
   describe("getShortTimeZone", () => {
     it("returns the short timezone", () => {
-      expect(getShortTimeZone("America/New_York", locale)).toBeOneOf([
-        "EDT",
-        "EST",
-      ]);
+      expect(getShortTimeZone("America/New_York")).toBeOneOf(["EDT", "EST"]);
     });
 
     it("handles errors gracefully", () => {
-      expect(getShortTimeZone("MarimoLand", locale)).toBe("MarimoLand");
+      expect(getShortTimeZone("MarimoLand")).toBe("MarimoLand");
     });
   });
 

package/src/utils/__tests__/numbers.test.ts

@@ -6,32 +6,24 @@ import {
   prettyScientificNumber,
 } from "../numbers";
 
-const locale = "en-US";
-
 describe("prettyNumber", () => {
   it("should format numbers", () => {
-    expect(prettyNumber(123_456_789, locale)).toBe("123,456,789");
-    expect(prettyNumber(1234.567_89, locale)).toBe("1,234.57");
-    expect(prettyNumber(0, locale)).toBe("0");
+    expect(prettyNumber(123_456_789)).toBe("123,456,789");
+    expect(prettyNumber(1234.567_89)).toBe("1,234.57");
+    expect(prettyNumber(0)).toBe("0");
   });
 });
 
-const options = { locale };
-
 describe("prettyScientificNumber", () => {
   it("should handle special cases", () => {
-    expect(prettyScientificNumber(0, options)).toBe("0");
-    expect(prettyScientificNumber(Number.NaN, options)).toBe("NaN");
-    expect(prettyScientificNumber(Number.POSITIVE_INFINITY, options)).toBe(
-      "Infinity",
-    );
-    expect(prettyScientificNumber(Number.NEGATIVE_INFINITY, options)).toBe(
-      "-Infinity",
-    );
+    expect(prettyScientificNumber(0)).toBe("0");
+    expect(prettyScientificNumber(Number.NaN)).toBe("NaN");
+    expect(prettyScientificNumber(Number.POSITIVE_INFINITY)).toBe("Infinity");
+    expect(prettyScientificNumber(Number.NEGATIVE_INFINITY)).toBe("-Infinity");
   });
 
   it("should format decimals with scientific notation, ignoring integer part rounding", () => {
-    const opts = { shouldRound: true, locale };
+    const opts = { shouldRound: true };
     expect(prettyScientificNumber(123_456, opts)).toBe("123,456");
     expect(prettyScientificNumber(123_456.7, opts)).toBe("123,456.7");
     expect(prettyScientificNumber(12_345.6789, opts)).toBe("12,345.68");
@@ -48,10 +40,10 @@ describe("prettyScientificNumber", () => {
   });
 
   it("should not round numbers when shouldRound is false", () => {
-    expect(prettyScientificNumber(123_456, options)).toBe("123,456");
-    expect(prettyScientificNumber(123_456.7, options)).toBe("123,456.7");
-    expect(prettyScientificNumber(12_345.6789, options)).toBe("12,345.6789");
-    expect(prettyScientificNumber(1.234_567_891_011_12, options)).toBe(
+    expect(prettyScientificNumber(123_456)).toBe("123,456");
+    expect(prettyScientificNumber(123_456.7)).toBe("123,456.7");
+    expect(prettyScientificNumber(12_345.6789)).toBe("12,345.6789");
+    expect(prettyScientificNumber(1.234_567_891_011_12)).toBe(
       "1.23456789101112",
     );
   });
@@ -59,30 +51,26 @@ describe("prettyScientificNumber", () => {
 
 describe("prettyEngineeringNumber", () => {
   it("should handle special cases", () => {
-    expect(prettyEngineeringNumber(0, locale)).toBe("0");
-    expect(prettyEngineeringNumber(-0, locale)).toBe("0"); // Test with negative zero
-    expect(prettyEngineeringNumber(Number.NaN, locale)).toBe("NaN");
-    expect(prettyEngineeringNumber(Number.POSITIVE_INFINITY, locale)).toBe(
-      "Infinity",
-    );
-    expect(prettyEngineeringNumber(Number.NEGATIVE_INFINITY, locale)).toBe(
-      "-Infinity",
-    );
+    expect(prettyEngineeringNumber(0)).toBe("0");
+    expect(prettyEngineeringNumber(-0)).toBe("0"); // Test with negative zero
+    expect(prettyEngineeringNumber(Number.NaN)).toBe("NaN");
+    expect(prettyEngineeringNumber(Number.POSITIVE_INFINITY)).toBe("Infinity");
+    expect(prettyEngineeringNumber(Number.NEGATIVE_INFINITY)).toBe("-Infinity");
   });
 
   it("should format decimals with engineering notation, ignoring integer part", () => {
-    expect(prettyEngineeringNumber(123_456, locale)).toBe("123k");
-    expect(prettyEngineeringNumber(123_456.7, locale)).toBe("123k");
-    expect(prettyEngineeringNumber(12_345.6789, locale)).toBe("12.3k");
-    expect(prettyEngineeringNumber(1.2345, locale)).toBe("1.23");
-    expect(prettyEngineeringNumber(1.000_001_234, locale)).toBe("1");
-    expect(prettyEngineeringNumber(0.12, locale)).toBe("120m");
-    expect(prettyEngineeringNumber(0.1234, locale)).toBe("123m");
-    expect(prettyEngineeringNumber(0.000_123_4, locale)).toBe("123µ");
-    expect(prettyEngineeringNumber(-1.2345, locale)).toBe("-1.23"); // Test with negative numbers
-    expect(prettyEngineeringNumber(-1.000_001_234, locale)).toBe("-1");
-    expect(prettyEngineeringNumber(-0.12, locale)).toBe("-120m");
-    expect(prettyEngineeringNumber(-0.1234, locale)).toBe("-123m");
-    expect(prettyEngineeringNumber(-0.000_123_4, locale)).toBe("-123µ");
+    expect(prettyEngineeringNumber(123_456)).toBe("123k");
+    expect(prettyEngineeringNumber(123_456.7)).toBe("123k");
+    expect(prettyEngineeringNumber(12_345.6789)).toBe("12.3k");
+    expect(prettyEngineeringNumber(1.2345)).toBe("1.23");
+    expect(prettyEngineeringNumber(1.000_001_234)).toBe("1");
+    expect(prettyEngineeringNumber(0.12)).toBe("120m");
+    expect(prettyEngineeringNumber(0.1234)).toBe("123m");
+    expect(prettyEngineeringNumber(0.000_123_4)).toBe("123µ");
+    expect(prettyEngineeringNumber(-1.2345)).toBe("-1.23"); // Test with negative numbers
+    expect(prettyEngineeringNumber(-1.000_001_234)).toBe("-1");
+    expect(prettyEngineeringNumber(-0.12)).toBe("-120m");
+    expect(prettyEngineeringNumber(-0.1234)).toBe("-123m");
+    expect(prettyEngineeringNumber(-0.000_123_4)).toBe("-123µ");
   });
 });

package/src/utils/dates.ts

@@ -7,7 +7,6 @@ import { Logger } from "./Logger";
 export function prettyDate(
   value: string | number | null | undefined,
   type: "date" | "datetime",
-  locale: string,
 ): string {
   if (value == null) {
     return "";
@@ -17,7 +16,7 @@ export function prettyDate(
     // If type is date, drop the timezone by rendering in UTC
     // since dates are absolute
     if (type === "date") {
-      return new Date(value).toLocaleDateString(locale, {
+      return new Date(value).toLocaleDateString(undefined, {
         year: "numeric",
         month: "short",
         day: "numeric",
@@ -26,7 +25,7 @@ export function prettyDate(
     }
 
     // For datetime, we keep the original timezone
-    return new Date(value).toLocaleDateString(locale, {
+    return new Date(value).toLocaleDateString(undefined, {
       year: "numeric",
       month: "short",
       day: "numeric",
@@ -44,13 +43,12 @@ export function prettyDate(
 export function exactDateTime(
   value: Date,
   timezone: string | undefined,
-  locale: string,
 ): string {
   const hasSubSeconds = value.getUTCMilliseconds() !== 0;
   try {
     if (timezone) {
       const valueWithTimezone = new TZDate(value, timezone);
-      const shortTimeZone = getShortTimeZone(timezone, locale);
+      const shortTimeZone = getShortTimeZone(timezone);
       if (hasSubSeconds) {
         return `${formatDate(valueWithTimezone, "yyyy-MM-dd HH:mm:ss.SSS")} ${shortTimeZone}`;
       }
@@ -68,9 +66,9 @@ export function exactDateTime(
   }
 }
 
-export function getShortTimeZone(timezone: string, locale: string): string {
+export function getShortTimeZone(timezone: string): string {
   try {
-    const abbrev = new Intl.DateTimeFormat(locale, {
+    const abbrev = new Intl.DateTimeFormat("en-US", {
       timeZone: timezone,
       timeZoneName: "short",
     })
@@ -90,10 +88,7 @@ export function getShortTimeZone(timezone: string, locale: string): string {
  *
  * If a date in the past, it should say "<date> at 8:00 AM".
  */
-export function timeAgo(
-  value: string | number | null | undefined,
-  locale: string,
-): string {
+export function timeAgo(value: string | number | null | undefined): string {
   if (value == null) {
     return "";
   }
@@ -108,22 +103,22 @@ export function timeAgo(
     yesterday.setDate(yesterday.getDate() - 1);
 
     if (date.toDateString() === today.toDateString()) {
-      return `Today at ${date.toLocaleTimeString(locale, {
+      return `Today at ${date.toLocaleTimeString(undefined, {
         hour: "numeric",
         minute: "numeric",
       })}`;
     }
     if (date.toDateString() === yesterday.toDateString()) {
-      return `Yesterday at ${date.toLocaleTimeString(locale, {
+      return `Yesterday at ${date.toLocaleTimeString(undefined, {
         hour: "numeric",
         minute: "numeric",
       })}`;
     }
-    return `${date.toLocaleDateString(locale, {
+    return `${date.toLocaleDateString(undefined, {
       year: "numeric",
       month: "short",
       day: "numeric",
-    })} at ${date.toLocaleTimeString(locale, {
+    })} at ${date.toLocaleTimeString(undefined, {
       hour: "numeric",
       minute: "numeric",
     })}`;

package/src/utils/edit-distance.ts

@@ -1,13 +1,11 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-export const OperationType = {
-  INSERT: "insert",
-  DELETE: "delete",
-  SUBSTITUTE: "substitute",
-  MATCH: "match",
-};
-
-type OperationType = (typeof OperationType)[keyof typeof OperationType];
+export enum OperationType {
+  INSERT = "insert",
+  DELETE = "delete",
+  SUBSTITUTE = "substitute",
+  MATCH = "match",
+}
 
 export interface EditOperation {
   type: OperationType;

package/src/utils/errors.ts

@@ -64,7 +64,7 @@ function safeJSONParse(message: string): unknown {
 
 export class CellNotInitializedError extends Error {
   constructor(
-    message = "The cell containing this UI element has not been run yet. Please run the cell first.",
+    message: string = "The cell containing this UI element has not been run yet. Please run the cell first.",
   ) {
     super(message);
     this.name = "CellNotInitializedError";

package/src/utils/id-tree.tsx

@@ -23,15 +23,11 @@ export type CellIndex = number & { __brand?: "CellIndex" };
  * Tree data structure for handling ids with nested children
  */
 export class TreeNode<T> {
-  public value: T;
-  public isCollapsed: boolean;
-  public children: Array<TreeNode<T>>;
-
-  constructor(value: T, isCollapsed: boolean, children: Array<TreeNode<T>>) {
-    this.value = value;
-    this.isCollapsed = isCollapsed;
-    this.children = children;
-  }
+  constructor(
+    public value: T,
+    public isCollapsed: boolean,
+    public children: Array<TreeNode<T>>,
+  ) {}
 
   /**
    * Recursively count the number of nodes in the tree
@@ -106,13 +102,10 @@ export class TreeNode<T> {
 let uniqueId = 0;
 
 export class CollapsibleTree<T> {
-  public readonly nodes: Array<TreeNode<T>>;
-  public readonly id: CellColumnId;
-
-  private constructor(nodes: Array<TreeNode<T>>, id: CellColumnId) {
-    this.nodes = nodes;
-    this.id = id;
-  }
+  private constructor(
+    public readonly nodes: Array<TreeNode<T>>,
+    public readonly id: CellColumnId,
+  ) {}
 
   static from<T>(ids: T[]): CollapsibleTree<T> {
     const id = `tree_${uniqueId++}` as CellColumnId;
@@ -599,11 +592,7 @@ export class CollapsibleTree<T> {
 }
 
 export class MultiColumn<T> {
-  private readonly columns: ReadonlyArray<CollapsibleTree<T>>;
-
-  constructor(columns: ReadonlyArray<CollapsibleTree<T>>) {
-    this.columns = columns;
-
+  constructor(private readonly columns: ReadonlyArray<CollapsibleTree<T>>) {
     // Ensure there is always at least one column
     if (columns.length === 0) {
       this.columns = [CollapsibleTree.from([])];