@marimo-team/islands 0.17.2 → 0.17.4

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

@@ -2,20 +2,9 @@
 
 import { mint, orange, slate } from "@radix-ui/colors";
 import type { TopLevelSpec } from "vega-lite";
-import type { StringFieldDef } from "vega-lite/build/src/channeldef";
-// @ts-expect-error vega-typings does not include formats
-import { formats } from "vega-loader";
-import { asRemoteURL } from "@/core/runtime/config";
+import type { StringFieldDef } from "vega-lite/types_unstable/channeldef.js";
 import type { TopLevelFacetedUnitSpec } from "@/plugins/impl/data-explorer/queries/types";
-import { arrow } from "@/plugins/impl/vega/formats";
-import { parseCsvData } from "@/plugins/impl/vega/loader";
 import { logNever } from "@/utils/assertNever";
-import {
-  byteStringToBinary,
-  extractBase64FromDataURL,
-  isDataURLString,
-  typedAtob,
-} from "@/utils/json/base64";
 import type {
   BinValues,
   ColumnHeaderStats,
@@ -24,9 +13,11 @@ import type {
   ValueCounts,
 } from "../types";
 import {
+  getDataSpecAndSourceName,
   getLegacyBooleanSpec,
   getLegacyNumericSpec,
   getLegacyTemporalSpec,
+  getScale,
 } from "./legacy-chart-spec";
 import { calculateBinStep, getPartialTimeTooltip } from "./utils";
 
@@ -34,15 +25,13 @@ import { calculateBinStep, getPartialTimeTooltip } from "./utils";
 const MAX_BAR_HEIGHT = 20; // px
 
 // If we are concatenating charts, we need to specify each chart's height and width.
-const CHART_HEIGHT = 30;
-const CHART_WIDTH = 70;
-const NULL_BAR_WIDTH = 5;
-
-// Arrow formats have a magic number at the beginning of the file.
-const ARROW_MAGIC_NUMBER = "ARROW1";
+const CONCAT_CHART_HEIGHT = 30;
+const CONCAT_CHART_WIDTH = 70;
+const CONCAT_NULL_BAR_WIDTH = 5;
 
-// register arrow reader under type 'arrow'
-formats("arrow", arrow);
+const BAR_COLOR = mint.mint11;
+const UNHOVERED_BAR_OPACITY = 0.6;
+const NULL_BAR_COLOR = orange.orange11;
 
 export class ColumnChartSpecModel<T> {
   private columnStats = new Map<ColumnName, Partial<ColumnHeaderStats>>();
@@ -57,21 +46,21 @@ export class ColumnChartSpecModel<T> {
     {},
     {
       includeCharts: false,
-      usePreComputedValues: false,
     },
   );
 
   private dataSpec: TopLevelSpec["data"];
-  private sourceName: "data_0" | "source_0";
 
-  private readonly data: T[] | string;
+  // Legacy data spec for fallback
+  private legacyDataSpec: TopLevelSpec["data"];
+  private legacySourceName: "data_0" | "source_0";
+
   private readonly fieldTypes: FieldTypes;
   readonly stats: Record<ColumnName, Partial<ColumnHeaderStats>>;
   readonly binValues: Record<ColumnName, BinValues>;
   readonly valueCounts: Record<ColumnName, ValueCounts>;
   private readonly opts: {
     includeCharts: boolean;
-    usePreComputedValues?: boolean;
   };
 
   constructor(
@@ -82,56 +71,22 @@ export class ColumnChartSpecModel<T> {
     valueCounts: Record<ColumnName, ValueCounts>,
     opts: {
       includeCharts: boolean;
-      usePreComputedValues?: boolean;
     },
   ) {
-    this.data = data;
     this.fieldTypes = fieldTypes;
     this.stats = stats;
     this.binValues = binValues;
     this.valueCounts = valueCounts;
     this.opts = opts;
 
-    // Data may come in from a few different sources:
-    // - A URL
-    // - A CSV data URI (e.g. "data:text/csv;base64,...")
-    // - A CSV string (e.g. "a,b,c\n1,2,3\n4,5,6")
-    // - An array of objects
-    // For each case, we need to set up the data spec and source name appropriately.
-    // If its a file, the source name will be "source_0", otherwise it will be "data_0".
-    // We have a few snapshot tests to ensure that the spec is correct for each case.
-    if (typeof this.data === "string") {
-      if (this.data.startsWith("./@file") || this.data.startsWith("/@file")) {
-        this.dataSpec = { url: asRemoteURL(this.data).href };
-        this.sourceName = "source_0";
-      } else if (isDataURLString(this.data)) {
-        this.sourceName = "data_0";
-        const base64 = extractBase64FromDataURL(this.data);
-        const decoded = typedAtob(base64);
-
-        if (decoded.startsWith(ARROW_MAGIC_NUMBER)) {
-          // @ts-expect-error vega-typings does not include arrow format
-          this.dataSpec = {
-            values: byteStringToBinary(decoded),
-            format: { type: "arrow" },
-          };
-        } else {
-          // Assume it's a CSV string
-          this.parseCsv(decoded);
-        }
-      } else {
-        // Assume it's a CSV string
-        this.parseCsv(this.data);
-        this.sourceName = "data_0";
-      }
-    } else {
-      this.dataSpec = { values: this.data };
-      this.sourceName = "source_0";
-    }
-
     this.columnBinValues = new Map(Object.entries(binValues));
     this.columnValueCounts = new Map(Object.entries(valueCounts));
     this.columnStats = new Map(Object.entries(stats));
+
+    const { dataSpec, sourceName } = getDataSpecAndSourceName(data);
+    this.dataSpec = dataSpec;
+    this.legacyDataSpec = dataSpec;
+    this.legacySourceName = sourceName;
   }
 
   public getColumnStats(column: string) {
@@ -146,42 +101,8 @@ export class ColumnChartSpecModel<T> {
     };
   }
 
-  private parseCsv(data: string) {
-    this.dataSpec = {
-      values: parseCsvData(data) as T[],
-    };
-  }
-
-  private getVegaSpec(column: string): TopLevelFacetedUnitSpec | null {
-    if (!this.data) {
-      return null;
-    }
-
-    const usePreComputedValues = this.opts.usePreComputedValues;
-    const binValues = this.columnBinValues.get(column);
-    const valueCounts = this.columnValueCounts.get(column);
-    const hasValueCounts = valueCounts && valueCounts.length > 0;
-
-    let data = this.dataSpec as TopLevelFacetedUnitSpec["data"];
-    const stats = this.columnStats.get(column);
-
-    if (usePreComputedValues) {
-      if (hasValueCounts) {
-        data = { values: valueCounts, name: "value_counts" };
-      } else {
-        // Bin values can be empty if all values are nulls
-        if (stats?.nulls) {
-          binValues?.push({
-            bin_start: null,
-            bin_end: null,
-            count: stats.nulls as number,
-          });
-        }
-        data = { values: binValues, name: "bin_values" };
-      }
-    }
-
-    const base: TopLevelFacetedUnitSpec = {
+  private createBase(data: TopLevelSpec["data"]): TopLevelFacetedUnitSpec {
+    return {
       background: "transparent",
       data,
       config: {
@@ -194,7 +115,31 @@ export class ColumnChartSpecModel<T> {
       },
       height: 100,
     } as TopLevelFacetedUnitSpec;
+  }
+
+  private getVegaSpec(column: string): TopLevelFacetedUnitSpec | null {
+    const binValues = this.columnBinValues.get(column);
+    const valueCounts = this.columnValueCounts.get(column);
+    const hasValueCounts = valueCounts && valueCounts.length > 0;
+
+    let data = this.dataSpec as TopLevelFacetedUnitSpec["data"];
+    const stats = this.columnStats.get(column);
 
+    if (hasValueCounts) {
+      data = { values: valueCounts, name: "value_counts" };
+    } else {
+      // Bin values can be empty if all values are nulls
+      if (stats?.nulls) {
+        binValues?.push({
+          bin_start: null,
+          bin_end: null,
+          count: stats.nulls as number,
+        });
+      }
+      data = { values: binValues, name: "bin_values" };
+    }
+
+    const base = this.createBase(data);
     const type = this.fieldTypes[column];
 
     // https://github.com/vega/altair/blob/32990a597af7c09586904f40b3f5e6787f752fa5/doc/user_guide/encodings/index.rst#escaping-special-characters-in-column-names
@@ -205,18 +150,16 @@ export class ColumnChartSpecModel<T> {
     // escape colons in column names
     column = column.replaceAll(":", "\\:");
 
-    const scale = this.getScale();
-
     switch (type) {
       case "date":
       case "datetime":
       case "time": {
-        if (!usePreComputedValues) {
-          return getLegacyTemporalSpec(column, type, base, scale);
+        if (!binValues) {
+          const legacyBase = this.createBase(this.legacyDataSpec);
+          const scale = getScale(this.legacySourceName);
+          return getLegacyTemporalSpec(column, type, legacyBase, scale);
         }
 
-        const binStep = calculateBinStep(binValues || []);
-
         const tooltip = getPartialTimeTooltip(binValues || []);
         const singleValue = binValues?.length === 1;
 
@@ -224,7 +167,7 @@ export class ColumnChartSpecModel<T> {
         if (singleValue) {
           return {
             ...base,
-            mark: { type: "bar", color: mint.mint11 },
+            mark: { type: "bar", color: BAR_COLOR },
             encoding: {
               x: {
                 field: "bin_start",
@@ -255,16 +198,12 @@ export class ColumnChartSpecModel<T> {
         }
 
         const histogram: TopLevelFacetedUnitSpec = {
-          height: CHART_HEIGHT,
-          width: CHART_WIDTH,
           // @ts-expect-error 'layer' property not in TopLevelFacetedUnitSpec
           layer: [
             {
               mark: {
                 type: "bar",
-                color: mint.mint11,
-                stroke: mint.mint11,
-                strokeWidth: 0,
+                color: BAR_COLOR,
               },
               params: [
                 {
@@ -279,13 +218,7 @@ export class ColumnChartSpecModel<T> {
               encoding: {
                 x: {
                   field: "bin_start",
-                  type: "temporal",
-                  bin: { binned: true, step: binStep },
-                  axis: null,
-                },
-                x2: {
-                  field: "bin_end",
-                  type: "temporal",
+                  type: "ordinal",
                   axis: null,
                 },
                 y: {
@@ -293,13 +226,21 @@ export class ColumnChartSpecModel<T> {
                   type: "quantitative",
                   axis: null,
                 },
-                strokeWidth: {
+                color: {
                   condition: {
-                    param: "hover",
-                    empty: false,
-                    value: 0.5,
+                    test: "datum['bin_start'] === null && datum['bin_end'] === null",
+                    value: NULL_BAR_COLOR,
                   },
-                  value: 0,
+                  value: BAR_COLOR,
+                },
+                opacity: {
+                  condition: [
+                    {
+                      param: "hover",
+                      value: 1,
+                    },
+                  ],
+                  value: UNHOVERED_BAR_OPACITY,
                 },
               },
             },
@@ -309,18 +250,13 @@ export class ColumnChartSpecModel<T> {
               mark: {
                 type: "bar",
                 opacity: 0,
+                // Wider bars to cover gaps between bars, prevents flickering when hovering over bars
+                width: { band: 1.2 },
               },
               encoding: {
                 x: {
                   field: "bin_start",
-                  type: "temporal",
-                  bin: { binned: true, step: binStep },
-                  axis: null,
-                },
-                x2: {
-                  field: "bin_end",
-                  type: "temporal",
-                  bin: { binned: true, step: binStep },
+                  type: "ordinal",
                   axis: null,
                 },
                 y: {
@@ -353,130 +289,33 @@ export class ColumnChartSpecModel<T> {
           ],
         };
 
-        const nullBar: TopLevelFacetedUnitSpec = {
-          height: CHART_HEIGHT,
-          width: NULL_BAR_WIDTH,
-          // @ts-expect-error 'layer' property not in TopLevelFacetedUnitSpec
-          layer: [
-            {
-              mark: {
-                type: "bar",
-                color: orange.orange11,
-              },
-              encoding: {
-                x: {
-                  field: "bin_start",
-                  type: "nominal",
-                  axis: null,
-                },
-                y: {
-                  field: "count",
-                  type: "quantitative",
-                  axis: null,
-                },
-              },
-            },
-
-            // Invisible tooltip layer with max-height
-            {
-              mark: {
-                type: "bar",
-                opacity: 0,
-              },
-              encoding: {
-                x: {
-                  field: "bin_start",
-                  type: "nominal",
-                  axis: null,
-                },
-                y: {
-                  aggregate: "max",
-                  type: "quantitative",
-                  axis: null,
-                },
-                tooltip: [
-                  {
-                    field: "count",
-                    type: "quantitative",
-                    title: "nulls",
-                    format: ",d",
-                  },
-                ],
-              },
-            },
-          ],
-          transform: [
-            {
-              filter:
-                "datum['bin_start'] === null && datum['bin_end'] === null",
-            },
-          ],
-        };
-
-        let chart: TopLevelFacetedUnitSpec = histogram;
-        let timeBase = base;
-
-        if (stats?.nulls) {
-          timeBase = {
-            ...base,
-            config: {
-              ...base.config,
-              concat: {
-                spacing: 0,
-              },
-            },
-            resolve: {
-              scale: {
-                y: "shared",
-              },
-            },
-          };
-          chart = {
-            // Temporal axis will not show nulls, so we concat 2 charts
-            // @ts-expect-error 'hconcat' property not in TopLevelFacetedUnitSpec
-            hconcat: [nullBar, histogram],
-          };
-        }
-
         return {
-          ...timeBase,
-          ...chart,
+          ...base,
+          ...histogram,
         };
       }
       case "integer":
       case "number": {
         // Create a histogram spec that properly handles null values
         const format = type === "integer" ? ",d" : ".2f";
-        const binStep = calculateBinStep(binValues || []);
 
-        if (!usePreComputedValues) {
-          return getLegacyNumericSpec(column, format, base);
+        if (!binValues) {
+          const legacyBase = this.createBase(this.legacyDataSpec);
+          return getLegacyNumericSpec(column, format, legacyBase);
         }
 
-        const stats = this.columnStats.get(column);
+        const binStep = calculateBinStep(binValues || []);
 
         const histogram: TopLevelFacetedUnitSpec = {
-          height: CHART_HEIGHT,
-          width: CHART_WIDTH,
+          height: CONCAT_CHART_HEIGHT,
+          width: CONCAT_CHART_WIDTH,
           // @ts-expect-error 'layer' property not in TopLevelFacetedUnitSpec
           layer: [
             {
               mark: {
                 type: "bar",
-                color: mint.mint11,
-                stroke: mint.mint11,
-                strokeWidth: 0,
+                color: BAR_COLOR,
               },
-              params: [
-                {
-                  name: "hover",
-                  select: {
-                    type: "point",
-                    on: "mouseover",
-                    clear: "mouseout",
-                  },
-                },
-              ],
               encoding: {
                 x: {
                   field: "bin_start",
@@ -492,13 +331,14 @@ export class ColumnChartSpecModel<T> {
                   type: "quantitative",
                   axis: null,
                 },
-                strokeWidth: {
-                  condition: {
-                    param: "hover",
-                    empty: false,
-                    value: 0.5,
-                  },
-                  value: 0,
+                opacity: {
+                  condition: [
+                    {
+                      param: "hover",
+                      value: 1,
+                    },
+                  ],
+                  value: UNHOVERED_BAR_OPACITY,
                 },
               },
             },
@@ -509,6 +349,17 @@ export class ColumnChartSpecModel<T> {
                 type: "bar",
                 opacity: 0,
               },
+              params: [
+                {
+                  name: "hover",
+                  select: {
+                    type: "point",
+                    on: "mouseover",
+                    clear: "mouseout",
+                    nearest: true, // Nearest avoids flickering when hovering over bars, but it's not perfect
+                  },
+                },
+              ],
               encoding: {
                 x: {
                   field: "bin_start",
@@ -564,14 +415,14 @@ export class ColumnChartSpecModel<T> {
         };
 
         const nullBar: TopLevelFacetedUnitSpec = {
-          height: CHART_HEIGHT,
-          width: NULL_BAR_WIDTH,
+          height: CONCAT_CHART_HEIGHT,
+          width: CONCAT_NULL_BAR_WIDTH,
           // @ts-expect-error 'layer' property not in TopLevelFacetedUnitSpec
           layer: [
             {
               mark: {
                 type: "bar",
-                color: orange.orange11,
+                color: NULL_BAR_COLOR,
               },
               encoding: {
                 x: {
@@ -652,7 +503,7 @@ export class ColumnChartSpecModel<T> {
         };
       }
       case "boolean": {
-        if (!usePreComputedValues || !stats?.true || !stats?.false) {
+        if (!stats?.true || !stats?.false) {
           return getLegacyBooleanSpec(column, base, MAX_BAR_HEIGHT);
         }
 
@@ -699,7 +550,7 @@ export class ColumnChartSpecModel<T> {
           },
           mark: {
             type: "bar",
-            color: mint.mint11,
+            color: BAR_COLOR,
           },
           encoding: {
             y: {
@@ -726,7 +577,7 @@ export class ColumnChartSpecModel<T> {
               type: "nominal",
               scale: {
                 domain: ["true", "false", "null"],
-                range: [mint.mint11, mint.mint11, orange.orange11],
+                range: [BAR_COLOR, BAR_COLOR, NULL_BAR_COLOR],
               },
               legend: null,
             },
@@ -740,7 +591,7 @@ export class ColumnChartSpecModel<T> {
             {
               mark: {
                 type: "bar",
-                color: mint.mint11,
+                color: BAR_COLOR,
                 height: BAR_HEIGHT,
               },
             },
@@ -764,7 +615,7 @@ export class ColumnChartSpecModel<T> {
         } as TopLevelFacetedUnitSpec; // "layer" not in TopLevelFacetedUnitSpec
       }
       case "string": {
-        if (!usePreComputedValues || !hasValueCounts) {
+        if (!hasValueCounts) {
           return null;
         }
 
@@ -840,18 +691,20 @@ export class ColumnChartSpecModel<T> {
               type: "quantitative",
             },
             color: {
+              condition: {
+                test: `datum.${yField} == "None" || datum.${yField} == "null"`,
+                value: NULL_BAR_COLOR,
+              },
+              value: BAR_COLOR,
+            },
+            opacity: {
               condition: [
                 {
                   param: "hover_bar",
-                  value: mint.mint11,
-                },
-                {
-                  test: `datum.${yField} == "None" || datum.${yField} == "null"`,
-                  value: orange.orange11,
+                  value: 1,
                 },
               ],
-              value: mint.mint8,
-              legend: null,
+              value: UNHOVERED_BAR_OPACITY,
             },
             tooltip: [
               {
@@ -920,14 +773,4 @@ export class ColumnChartSpecModel<T> {
         return null;
     }
   }
-
-  private getScale() {
-    return {
-      align: 0,
-      paddingInner: 0,
-      paddingOuter: {
-        expr: `length(data('${this.sourceName}')) == 2 ? 1 : length(data('${this.sourceName}')) == 3 ? 0.5 : length(data('${this.sourceName}')) == 4 ? 0 : 0`,
-      },
-    };
-  }
 }

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

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import React, { Suspense } from "react";
 import { useLocale } from "react-aria";
+import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { createBatchedLoader } from "@/plugins/impl/vega/batched";
 import { useTheme } from "@/theme/useTheme";
 import { logNever } from "@/utils/assertNever";
@@ -19,10 +20,6 @@ interface Props<TData, TValue> {
   columnId: string;
 }
 
-const LazyVegaLite = React.lazy(() =>
-  import("react-vega").then((m) => ({ default: m.VegaLite })),
-);
-
 // We batch multiple calls to the same URL returning the same promise
 // for all calls with the same key.
 const batchedLoader = createBatchedLoader();
@@ -46,16 +43,19 @@ export const TableColumnSummary = <TData, TValue>({
         fallback={skeleton}
       >
         <Suspense fallback={skeleton}>
-          <LazyVegaLite
+          <LazyVegaEmbed
             spec={spec}
-            width={70}
-            height={30}
-            renderer="svg"
-            // @ts-expect-error - Our `loader.load` method is broader than VegaLite's typings but is functionally supported.
-            loader={batchedLoader}
+            options={{
+              width: 80,
+              height: 30,
+              renderer: "svg",
+              actions: false,
+              theme: theme === "dark" ? "dark" : "vox",
+              // @ts-expect-error - Our `loader.load` method is broader than VegaLite's typings but is functionally supported.
+              loader: batchedLoader,
+              mode: "vega-lite",
+            }}
             style={{ minWidth: "unset", maxHeight: "40px" }}
-            actions={false}
-            theme={theme === "dark" ? "dark" : "vox"}
           />
         </Suspense>
       </DelayMount>