@marimo-team/frontend 0.25.3-dev134 → 0.25.3-dev136

package/src/components/datasources/__tests__/utils.test.ts

@@ -34,6 +34,37 @@ describe("sqlCode", () => {
     name: "email" as const,
   } as DataTableColumn;
 
+  it.each([
+    {
+      path: ["finance", "reports"],
+      expected: '"memory"."finance"."reports"."users"',
+    },
+    { path: ["finance.reports"], expected: '"finance.reports"."users"' },
+    {
+      path: ['fi"nance', "reports"],
+      expected: '"memory"."fi""nance"."reports"."users"',
+    },
+    {
+      path: ["main", "reports"],
+      expected: '"memory"."main"."reports"."users"',
+    },
+  ])("preserves schema path $path in generated SQL", ({ path, expected }) => {
+    const result = sqlCode({
+      table: mockTable,
+      columnName: "*",
+      sqlTableContext: {
+        engine: DUCKDB_ENGINE,
+        dialect: "duckdb",
+        database: "memory",
+        defaultDatabase: "memory",
+        defaultSchema: "main",
+        schema: path.at(-1)!,
+        schemaPath: path,
+      },
+    });
+    expect(result).toContain(`FROM ${expected}`);
+  });
+
   describe("basic SQL generation", () => {
     it("should generate basic SQL without sqlTableContext", () => {
       const result = sqlCode({ table: mockTable, columnName: mockColumn.name });
@@ -484,7 +515,7 @@ describe("tableUniqueId", () => {
 
   it("uses database + schema for flat engines", () => {
     expect(tableUniqueId(ctx({ database: "db", schema: "public" }), "t")).toBe(
-      "db.public.t",
+      '["db","public","t"]',
     );
   });
 
@@ -495,7 +526,7 @@ describe("tableUniqueId", () => {
         ctx({ database: "top", schema: "nested", schemaPath: ["nested"] }),
         "t",
       ),
-    ).toBe("top.nested.t");
+    ).toBe('["top","nested","t"]');
   });
 
   it("includes the full schema path for deeply nested namespaces", () => {
@@ -508,7 +539,7 @@ describe("tableUniqueId", () => {
         }),
         "t",
       ),
-    ).toBe("top.nested.deep.t");
+    ).toBe('["top","nested","deep","t"]');
   });
 
   it("falls back to the flat schema when schemaPath is empty", () => {
@@ -517,16 +548,36 @@ describe("tableUniqueId", () => {
         ctx({ database: "db", schema: "public", schemaPath: [] }),
         "t",
       ),
-    ).toBe("db.public.t");
+    ).toBe('["db","public","t"]');
   });
 
   it("does not emit a double dot for schemaless tables", () => {
     expect(
       tableUniqueId(ctx({ database: "db", schema: "", schemaPath: [] }), "t"),
-    ).toBe("db.t");
+    ).toBe('["db","t"]');
     expect(tableUniqueId(ctx({ database: "db", schema: "" }), "t")).toBe(
-      "db.t",
+      '["db","t"]',
+    );
+  });
+
+  it("keeps literal-dot and nested schemas distinct", () => {
+    const nested = tableUniqueId(
+      ctx({
+        database: "memory",
+        schema: "reports",
+        schemaPath: ["finance", "reports"],
+      }),
+      "sales",
+    );
+    const literal = tableUniqueId(
+      ctx({
+        database: "memory",
+        schema: "finance.reports",
+        schemaPath: ["finance.reports"],
+      }),
+      "sales",
     );
+    expect(nested).not.toBe(literal);
   });
 });
 

package/src/components/datasources/column-preview.tsx

@@ -29,7 +29,7 @@ import { Button } from "../ui/button";
 import { Tooltip } from "../ui/tooltip";
 import { ColumnPreviewContainer } from "./components";
 import { InstallPackageButton } from "./install-package-button";
-import { convertStatsName, sqlCode, tableUniqueId } from "./utils";
+import { convertStatsName, fullyQualifiedTableName, sqlCode } from "./utils";
 
 export const DatasetColumnPreview: React.FC<{
   table: DataTable;
@@ -48,7 +48,10 @@ export const DatasetColumnPreview: React.FC<{
       tableName: table.name,
       columnName: column.name,
       sourceType: table.source_type,
-      fullyQualifiedTableName: tableUniqueId(sqlTableContext, table.name),
+      fullyQualifiedTableName: fullyQualifiedTableName(
+        sqlTableContext,
+        table.name,
+      ),
     });
   };
 

package/src/components/datasources/datasources.tsx

@@ -78,6 +78,7 @@ import {
   areChildSchemasResolved,
   areSchemasResolved,
   areTablesResolved,
+  fullyQualifiedTableName,
   isSchemaless,
   schemaSubtreeMatchesSearch,
   shouldExpandDatabaseForSearch,
@@ -637,7 +638,7 @@ const SchemaNode: React.FC<SchemaNodeProps> = (props) => {
   const [prevSearchValue, setPrevSearchValue] = React.useState(searchValue);
   const [prevExpandForSearch, setPrevExpandForSearch] =
     React.useState(expandForSearch);
-  const uniqueValue = `${databaseName}:${schemaPath.join(".")}`;
+  const uniqueValue = JSON.stringify(["schema", databaseName, ...schemaPath]);
   const childSchemas = schema.child_schemas ?? [];
 
   // Re-sync when the query changes or when newly resolved data turns this
@@ -1095,9 +1096,7 @@ const DatasetColumnItem: React.FC<{
               column={column}
               onAddColumnChart={handleAddColumn}
               preview={columnsPreviews.get(
-                sqlTableContext
-                  ? `${sqlTableContext.database}.${sqlTableContext.schema}.${table.name}:${column.name}`
-                  : `${table.name}:${column.name}`,
+                `${fullyQualifiedTableName(sqlTableContext, table.name)}:${column.name}`,
               )}
               sqlTableContext={sqlTableContext}
             />

package/src/components/datasources/utils.ts

@@ -13,26 +13,29 @@ import type {
 import { logNever } from "@/utils/assertNever";
 import type { ColumnHeaderStatsKey } from "../data-table/types";
 
-/**
- * Stable id for a table node in the datasources tree.
- *
- * schemaPath already includes the leaf schema for nested namespaces, so use it
- * when present and fall back to the flat schema name otherwise (avoids
- * duplicating the leaf, e.g. `top.nested.nested.table`).
- */
+function tablePath(context: SQLTableContext, tableName: string): string[] {
+  const segments = context.schemaPath?.length
+    ? context.schemaPath
+    : [context.schema];
+  return [context.database, ...segments.filter(Boolean), tableName];
+}
+
 export function tableUniqueId(
-  sqlTableContext: SQLTableContext | undefined,
+  context: SQLTableContext | undefined,
   tableName: string,
 ): string {
-  if (!sqlTableContext) {
-    return tableName;
-  }
-  const segments = (
-    sqlTableContext.schemaPath?.length
-      ? sqlTableContext.schemaPath
-      : [sqlTableContext.schema]
-  ).filter(Boolean);
-  return [sqlTableContext.database, ...segments, tableName].join(".");
+  return context ? JSON.stringify(tablePath(context, tableName)) : tableName;
+}
+
+export function fullyQualifiedTableName(
+  context: SQLTableContext | undefined,
+  tableName: string,
+): string {
+  return context
+    ? getFormatter(context.dialect).formatTablePath(
+        tablePath(context, tableName),
+      )
+    : tableName;
 }
 
 // Some databases have no schemas, so we don't show it (eg. Clickhouse)
@@ -114,6 +117,10 @@ const defaultFormatter: SqlCodeFormatter = {
     `SELECT ${columnName} FROM ${tableName} LIMIT 100`,
 };
 
+function quoteIdentifier(identifier: string): string {
+  return `"${identifier.replaceAll('"', '""')}"`;
+}
+
 function getFormatter(dialect: string): SqlCodeFormatter {
   dialect = dialect.toLowerCase();
   if (!isKnownDialect(dialect)) {
@@ -146,9 +153,9 @@ function getFormatter(dialect: string): SqlCodeFormatter {
       // Quote column and table names to avoid raising errors on weird characters
       return {
         formatTablePath: (tablePath: string[]) =>
-          tablePath.map((part) => `"${part}"`).join("."),
+          tablePath.map(quoteIdentifier).join("."),
         formatSelectClause: (columnName: string, tableName: string) =>
-          `SELECT ${columnName === "*" ? "*" : `"${columnName}"`} FROM ${tableName} LIMIT 100`,
+          `SELECT ${columnName === "*" ? "*" : quoteIdentifier(columnName)} FROM ${tableName} LIMIT 100`,
       };
     case "db2":
     case "db2i":
@@ -194,6 +201,7 @@ export function sqlCode({
       engine,
       schema,
       defaultSchema,
+      schemaPath,
       defaultDatabase,
       database,
       dialect,
@@ -207,12 +215,13 @@ export function sqlCode({
       }
     } else {
       // Include schema if it's not the default schema
-      if (schema !== defaultSchema) {
-        tablePath.unshift(schema);
+      const path = schemaPath?.length ? schemaPath : [schema];
+      if (path.length > 1 || path[0] !== defaultSchema) {
+        tablePath.unshift(...path);
       }
 
-      // Include database if it's not the default database
-      if (database !== defaultDatabase) {
+      // Nested schema names can also be attached catalog names.
+      if (path.length > 1 || database !== defaultDatabase) {
         tablePath.unshift(database);
       }
     }

package/src/components/ui/__tests__/range-slider.test.tsx

@@ -0,0 +1,165 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { RangeSlider } from "../range-slider";
+
+vi.mock("react-aria", () => ({
+  useLocale: () => ({ locale: "en-US" }),
+}));
+
+vi.mock("../tooltip", () => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  );
+  const Content = ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  );
+
+  return {
+    TooltipContent: Content,
+    TooltipPortal: Wrapper,
+    TooltipProvider: Wrapper,
+    TooltipRoot: Wrapper,
+    TooltipTrigger: Wrapper,
+  };
+});
+
+vi.mock("radix-ui", () => {
+  const Primitive = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+  >(({ children, ...props }, ref) => (
+    <div ref={ref} {...props}>
+      {children}
+    </div>
+  ));
+  Primitive.displayName = "Primitive";
+
+  return {
+    Slider: {
+      Root: Primitive,
+      Track: Primitive,
+      Range: Primitive,
+      Thumb: Primitive,
+    },
+  };
+});
+
+describe("RangeSlider", () => {
+  it("formats both tooltip values without floating-point artifacts", () => {
+    const { getAllByText, queryByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        step={0.01}
+        value={[1.2, 1.500000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("1.2")).toHaveLength(1);
+    expect(getAllByText("1.5")).toHaveLength(1);
+    expect(queryByText("1.500000000000001")).toBeNull();
+  });
+
+  it("keeps the legacy precision when no step is supplied", () => {
+    const { getAllByText, queryByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        value={[1.2, 1.500000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("1.2")).toHaveLength(1);
+    expect(getAllByText("1.5")).toHaveLength(1);
+    expect(queryByText("1.500000000000001")).toBeNull();
+  });
+
+  it("retains value precision when no step is supplied", () => {
+    const { getByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        value={[1.2345, 1.500000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getByText("1.2345")).toBeDefined();
+    expect(getByText("1.5")).toBeDefined();
+  });
+
+  it("preserves precision from finer-grained steps", () => {
+    const { getAllByText, queryByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        step={0.001}
+        value={[1.234, 1.235000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("1.234")).toHaveLength(1);
+    expect(getAllByText("1.235")).toHaveLength(1);
+    expect(queryByText("1.23")).toBeNull();
+  });
+
+  it("preserves precision for small tooltip values", () => {
+    const { getByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={0.01}
+        step={0.00001}
+        value={[0.00123, 0.0012400000000000002]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getByText("1.23e-3")).toBeDefined();
+    expect(getByText("1.24e-3")).toBeDefined();
+  });
+
+  it("infers precision from custom mapped steps", () => {
+    const steps = [1, 1.234, 2];
+    const { getAllByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={steps.length - 1}
+        step={1}
+        steps={steps}
+        value={[0, 1]}
+        valueMap={(value) => steps[value]}
+      />,
+    );
+
+    expect(getAllByText("1")).toHaveLength(1);
+    expect(getAllByText("1.234")).toHaveLength(1);
+  });
+
+  it("preserves decimals from the slider origin", () => {
+    const { getAllByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0.5}
+        max={10.5}
+        step={1}
+        value={[0.5, 1.5]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("0.5")).toHaveLength(1);
+    expect(getAllByText("1.5")).toHaveLength(1);
+  });
+});

package/src/components/ui/range-slider.tsx

@@ -4,7 +4,10 @@ import { Slider as SliderPrimitive } from "radix-ui";
 import * as React from "react";
 import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
-import { prettyScientificNumber } from "@/utils/numbers";
+import {
+  fractionDigitsForSlider,
+  prettyScientificNumber,
+} from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
 import {
   TooltipContent,
@@ -20,9 +23,15 @@ const RangeSlider = React.forwardRef<
     valueMap: (sliderValue: number) => number;
     steps?: number[];
   }
->(({ className, valueMap, ...props }, ref) => {
+>(({ className, steps, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
   const { locale } = useLocale();
+  const fractionDigits = fractionDigitsForSlider(
+    props.step,
+    steps,
+    props.min,
+    props.value?.map(valueMap),
+  );
 
   const isDraggingRange = React.useRef(false);
   const dragStartX = React.useRef(0);
@@ -94,11 +103,9 @@ const RangeSlider = React.forwardRef<
     const [origLeft, origRight] = dragStartValue.current;
     const rangeWidth = origRight - origLeft;
 
-    const steps = props.steps;
-    const step: number =
-      steps && steps.length > 1
-        ? Math.min(...steps.slice(1).map((s, i) => s - steps[i]))
-        : (props.step ?? 1);
+    // `steps` contains mapped display values, while pointer movement happens
+    // in the slider's index/value space. Use the Radix step for snapping.
+    const step = props.step ?? 1;
     const snappedDelta = Math.round(delta / step) * step;
 
     const clampedDelta = Math.max(
@@ -177,7 +184,10 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[0]}>
-                {prettyScientificNumber(valueMap(props.value[0]), { locale })}
+                {prettyScientificNumber(valueMap(props.value[0]), {
+                  maximumFractionDigits: fractionDigits,
+                  locale,
+                })}
               </TooltipContent>
             )}
           </TooltipPortal>
@@ -198,7 +208,10 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[1]}>
-                {prettyScientificNumber(valueMap(props.value[1]), { locale })}
+                {prettyScientificNumber(valueMap(props.value[1]), {
+                  maximumFractionDigits: fractionDigits,
+                  locale,
+                })}
               </TooltipContent>
             )}
           </TooltipPortal>

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -5,7 +5,10 @@ import { type JSX, useEffect, useId, useState } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
-import { prettyScientificNumber } from "@/utils/numbers";
+import {
+  fractionDigitsForSlider,
+  prettyScientificNumber,
+} from "@/utils/numbers";
 import { RangeSlider } from "../../components/ui/range-slider";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
@@ -74,6 +77,7 @@ const RangeSliderComponent = ({
   start,
   stop,
   step,
+  steps,
   debounce,
   orientation,
   showValue,
@@ -86,6 +90,12 @@ const RangeSliderComponent = ({
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
+  const fractionDigits = fractionDigitsForSlider(
+    step,
+    steps,
+    start,
+    internalValue.map(valueMap),
+  );
 
   // Update internal value on prop change
   useEffect(() => {
@@ -121,6 +131,7 @@ const RangeSliderComponent = ({
           min={start}
           max={stop}
           step={step}
+          steps={steps ?? undefined}
           orientation={orientation}
           disabled={disabled}
           // Triggered on all value changes
@@ -154,8 +165,12 @@ const RangeSliderComponent = ({
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
             {`${prettyScientificNumber(valueMap(internalValue[0]), {
+              maximumFractionDigits: fractionDigits,
+              locale,
+            })}, ${prettyScientificNumber(valueMap(internalValue[1]), {
+              maximumFractionDigits: fractionDigits,
               locale,
-            })}, ${prettyScientificNumber(valueMap(internalValue[1]), { locale })}`}
+            })}`}
           </div>
         )}
       </div>

package/src/plugins/impl/__tests__/RangeSliderPlugin.test.tsx

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { z } from "zod";
+import type { IPluginProps } from "../../types";
+import { RangeSliderPlugin } from "../RangeSliderPlugin";
+
+vi.mock("@/components/ui/range-slider", () => ({
+  RangeSlider: () => <div data-testid="range-slider" />,
+}));
+
+vi.mock("react-aria", () => ({
+  useLocale: () => ({ locale: "en-US" }),
+}));
+
+describe("RangeSliderPlugin", () => {
+  type PluginProps = IPluginProps<
+    number[],
+    z.infer<typeof RangeSliderPlugin.prototype.validator>
+  >;
+
+  const createProps = (
+    value: number[],
+    data: Partial<PluginProps["data"]> = {},
+  ): PluginProps => ({
+    host: document.createElement("div"),
+    value,
+    setValue: vi.fn(),
+    data: {
+      initialValue: value,
+      label: null,
+      start: 0,
+      stop: 10,
+      step: 0.01,
+      steps: null,
+      debounce: false,
+      orientation: "horizontal",
+      showValue: true,
+      fullWidth: true,
+      disabled: false,
+      ...data,
+    },
+    functions: {},
+  });
+
+  it("rounds floating-point artifacts in the displayed range", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([1.2, 1.500000000000001]);
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.2, 1.5")).toBeDefined();
+  });
+
+  it("preserves precision from finer-grained steps", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([1.234, 1.235000000000001], { step: 0.001 });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.234, 1.235")).toBeDefined();
+  });
+
+  it("retains value precision when no step is supplied", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([1.2345, 1.500000000000001], {
+      step: undefined,
+    });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.2345, 1.5")).toBeDefined();
+  });
+
+  it("preserves precision for small displayed values", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([0.00123, 0.0012400000000000002], {
+      stop: 0.01,
+      step: 0.00001,
+    });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.23e-3, 1.24e-3")).toBeDefined();
+  });
+
+  it("infers precision from custom steps", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([0, 1], {
+      stop: 2,
+      step: undefined,
+      steps: [1, 1.234, 2],
+    });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1, 1.234")).toBeDefined();
+  });
+
+  it("preserves decimals from the slider origin", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([0.5, 1.5], { start: 0.5, stop: 10, step: 1 });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("0.5, 1.5")).toBeDefined();
+  });
+});