@finos/legend-cube-builder 0.0.4 → 0.0.5

package/src/components/grid/CubeDrilldownBar.tsx

@@ -0,0 +1,219 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  TimesIcon,
+} from '@finos/legend-art';
+import {
+  type AggregationFunction,
+  foldColumnName,
+  getAggregationDisplayName,
+  getDefaultDrilldownAggregation,
+  getDrilldownAggregations,
+} from '@finos/legend-cube';
+import { observer } from 'mobx-react-lite';
+import { READ_ONLY_CUBE_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import { CubeButton } from '../CubeButton.js';
+
+/** The value of the setting that leaves a column empty on group rows */
+const NO_AGGREGATION = '';
+
+/**
+ * How a group row shows each column of the run that isn't a level (PLAN
+ * §11.10): a function its type offers, or nothing; the default (a number's
+ * Sum, nothing for any other column) is marked
+ */
+export const CubeDrilldownSettingsDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { grid } = editorState;
+    const { result } = editorState.execution;
+    const drilldown = grid.drilldown;
+    const darkMode =
+      !editorState.host.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
+    if (!result || !drilldown) {
+      return null;
+    }
+    const levels = new Set(drilldown.columns.map(foldColumnName));
+    const label = (fn: AggregationFunction | null, isDefault: boolean) =>
+      `${fn === null ? 'Nothing' : getAggregationDisplayName(fn)}${isDefault ? ' (default)' : ''}`;
+    return (
+      <Dialog open={grid.isSettingsShown} onClose={() => grid.closeSettings()}>
+        <Modal darkMode={darkMode} className="w-[520px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">Group rows</div>
+          </ModalHeader>
+          <ModalBody>
+            <p className="mb-2 text-base text-[var(--color-text-secondary)]">
+              {`What each group row shows in the columns the results don't drill down by.`}
+            </p>
+            <div
+              className="grid max-h-[50vh] grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1 overflow-auto"
+              data-testid={LEGEND_CUBE_TEST_ID.DRILLDOWN_SETTINGS}
+            >
+              {result.schema.columns
+                .filter(({ name }) => !levels.has(foldColumnName(name)))
+                .map(({ name, type }) => {
+                  const fallback = getDefaultDrilldownAggregation(type);
+                  const current = drilldown.aggregationOf(name);
+                  return [
+                    <label
+                      key={`${name}:label`}
+                      htmlFor={`cube-drilldown-${name}`}
+                      className="truncate text-base"
+                      title={`${name} (${type.displayName})`}
+                    >
+                      {name}
+                    </label>,
+                    <select
+                      key={`${name}:select`}
+                      id={`cube-drilldown-${name}`}
+                      aria-label={`Group rows' ${name}`}
+                      className="h-6 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)]"
+                      value={current ?? NO_AGGREGATION}
+                      disabled={editorState.readOnly}
+                      title={
+                        editorState.readOnly ? READ_ONLY_CUBE_TITLE : undefined
+                      }
+                      onChange={(event) =>
+                        grid.setAggregation(
+                          name,
+                          event.target.value === NO_AGGREGATION
+                            ? null
+                            : (event.target.value as AggregationFunction),
+                        )
+                      }
+                    >
+                      <option value={NO_AGGREGATION}>
+                        {label(null, fallback === null)}
+                      </option>
+                      {getDrilldownAggregations(type).map((fn) => (
+                        <option key={fn} value={fn}>
+                          {label(fn, fallback === fn)}
+                        </option>
+                      ))}
+                    </select>,
+                  ];
+                })}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Close"
+              onClick={() => grid.closeSettings()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);
+
+/**
+ * The drill-down above the grid in server-side mode (PLAN §11.10): its
+ * levels, outermost first, each removable; what it can't use, and why; the
+ * group rows' settings; and Clear. Shown while the cube has a drill-down.
+ */
+export const CubeDrilldownBar = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const { grid } = editorState;
+    const saved = editorState.document.meta.drilldown;
+    const drilldown = grid.drilldown;
+    if (
+      !saved ||
+      !drilldown ||
+      (!saved.columns.length && !drilldown.problems.length)
+    ) {
+      return null;
+    }
+    const { readOnly } = editorState;
+    return (
+      <div
+        className="flex min-h-8 shrink-0 flex-wrap items-center gap-2 border-b border-[var(--color-border-default)] px-2 py-1 text-base"
+        data-testid={LEGEND_CUBE_TEST_ID.DRILLDOWN_BAR}
+      >
+        <span className="text-[var(--color-text-secondary)]">
+          Drill down by
+        </span>
+        {drilldown.columns.map((column, index) => (
+          <span key={column} className="flex items-center gap-1">
+            {index > 0 && (
+              <span className="text-[var(--color-text-muted)]">›</span>
+            )}
+            <span className="flex items-center gap-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-elevated)] px-1">
+              {column}
+              <button
+                type="button"
+                className="text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:opacity-50"
+                aria-label={`Stop drilling down by ${column}`}
+                title={
+                  readOnly
+                    ? READ_ONLY_CUBE_TITLE
+                    : `Stop drilling down by ${column}`
+                }
+                disabled={readOnly}
+                onClick={() =>
+                  grid.removeLevel(
+                    saved.columns.findIndex(
+                      (level) =>
+                        foldColumnName(level) === foldColumnName(column),
+                    ),
+                  )
+                }
+              >
+                <TimesIcon />
+              </button>
+            </span>
+          </span>
+        ))}
+        {drilldown.problems.length > 0 && (
+          <span
+            className="text-[var(--color-status-warn)]"
+            role="status"
+            title={drilldown.problems.join('\n')}
+          >
+            {drilldown.problems.length === 1
+              ? drilldown.problems[0]
+              : `${drilldown.problems.length} drill-down settings can't be used here.`}
+          </span>
+        )}
+        <span className="flex-1" />
+        <CubeButton onClick={() => grid.openSettings()}>Group rows…</CubeButton>
+        <CubeButton
+          disabled={readOnly}
+          title={readOnly ? READ_ONLY_CUBE_TITLE : 'Stop drilling down'}
+          onClick={() => grid.clearDrilldown()}
+        >
+          Clear
+        </CubeButton>
+        <CubeDrilldownSettingsDialog editorState={editorState} />
+      </div>
+    );
+  },
+);

package/src/components/grid/CubeGridRegion.tsx

@@ -22,6 +22,7 @@ import { getCubeWarehouseErrorHint } from '../../__lib__/LegendCubeDataProductLa
 import {
   CUBE_PENDING_LABEL,
   formatDisabledReasons,
+  getLevelTruncationMessage,
   getRowLimitError,
   getTruncationMessage,
   ROW_LIMIT_WARNING_THRESHOLD,
@@ -31,9 +32,18 @@ import {
   CubeDataProductRunErrorKind,
   type CubeDataProductRuntimeState,
 } from '../../stores/CubeDataProductRuntimeState.js';
+import type { CubeEngineError } from '../../graph-manager/CubeEngine.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import type { CubeExecutionResult } from '../../stores/CubeExecutionState.js';
 import { CubeButton } from '../CubeButton.js';
+import { CubeGridMode } from '../../stores/CubeGridState.js';
+import { parseWholeNumberText } from '../../stores/editors/CubeIntegerText.js';
 import { CubeResultGrid } from './CubeResultGrid.js';
+import { CubeColumnFormatDialog } from './CubeColumnFormatDialog.js';
+import { CubeDrilldownBar } from './CubeDrilldownBar.js';
+import { CubeSqlDialog } from './CubeSqlDialog.js';
+import { CubeRunStatsPanel } from './CubeRunStatsPanel.js';
+import { CubeServerSideGrid } from './CubeServerSideGrid.js';
 import { formatDuration } from './CubeGridValues.js';
 
 /** The first line of an error is shown, at most this long; the rest is under Details */
@@ -45,10 +55,11 @@ const CubeRowLimitInput = observer(
     const [draft, setDraft] = useState(String(editorState.rowLimit));
     const [error, setError] = useState<string | undefined>();
     const commit = (): void => {
-      const problem = getRowLimitError(draft);
+      const value = parseWholeNumberText(draft);
+      const problem = getRowLimitError(value);
       setError(problem);
-      if (!problem) {
-        editorState.setRowLimit(Number(draft.trim()));
+      if (!problem && value !== undefined) {
+        editorState.setRowLimit(value);
       }
     };
     return (
@@ -88,13 +99,54 @@ const CubeRowLimitInput = observer(
   },
 );
 
+/** Server-side or local: how the grid shows the run (spec §12.1, PLAN §11.10) */
+const CubeGridModeToggle = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { grid } = props.editorState;
+    const option = (mode: CubeGridMode, label: string, title: string) => (
+      <button
+        type="button"
+        className={`h-6 px-2 text-base ${
+          grid.mode === mode
+            ? 'bg-[var(--color-bg-selected)] font-medium text-[var(--color-text-primary)]'
+            : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]'
+        }`}
+        aria-pressed={grid.mode === mode}
+        title={title}
+        onClick={() => grid.setMode(mode)}
+      >
+        {label}
+      </button>
+    );
+    return (
+      <div
+        className="flex overflow-hidden rounded-sm border border-[var(--color-border-default)]"
+        role="group"
+        aria-label="Grid mode"
+      >
+        {option(
+          CubeGridMode.SERVER_SIDE,
+          'Server-side',
+          'Each sort and drill-down level runs on the engine, over every row of the query',
+        )}
+        {option(
+          CubeGridMode.LOCAL,
+          'Local',
+          "The run's rows, grouped, pivoted and filtered in the browser",
+        )}
+      </div>
+    );
+  },
+);
+
 const CubeGridToolbar = observer(
   (props: {
     editorState: CubeEditorState;
-    showSql: boolean;
-    onToggleSql: () => void;
+    onShowSql: () => void;
+    showRuns: boolean;
+    onToggleRuns: () => void;
   }) => {
-    const { editorState, showSql, onToggleSql } = props;
+    const { editorState, onShowSql, showRuns, onToggleRuns } = props;
     const { execution } = editorState;
     const { result } = execution;
     const disabledReasons = execution.disabledReasons;
@@ -123,6 +175,7 @@ const CubeGridToolbar = observer(
           </CubeButton>
         )}
         <CubeRowLimitInput editorState={editorState} />
+        <CubeGridModeToggle editorState={editorState} />
         {execution.isRunning && (
           <span className="text-base text-[var(--color-text-secondary)]">
             {CUBE_PENDING_LABEL.EXECUTING_QUERY}
@@ -146,53 +199,50 @@ const CubeGridToolbar = observer(
                 {getTruncationMessage(result.rowLimit)}
               </span>
             )}
+            {editorState.grid.isServerSide &&
+              editorState.grid.hasLimitedLevel && (
+                <span className="text-base text-[var(--color-status-warn)]">
+                  {getLevelTruncationMessage(result.rowLimit)}
+                </span>
+              )}
+            {editorState.export.isExporting && (
+              <>
+                <span className="text-base text-[var(--color-text-secondary)]">
+                  {CUBE_PENDING_LABEL.EXPORTING_CSV}
+                </span>
+                <CubeButton
+                  title="Stop the export"
+                  onClick={() => editorState.export.stop()}
+                >
+                  Stop export
+                </CubeButton>
+              </>
+            )}
+            {editorState.grid.isServerSide && editorState.grid.fetching > 0 && (
+              <span className="text-base text-[var(--color-text-secondary)]">
+                {CUBE_PENDING_LABEL.FETCHING_ROWS}
+              </span>
+            )}
             {result.sql.length > 0 && (
-              <CubeButton aria-expanded={showSql} onClick={onToggleSql}>
-                {showSql ? 'Hide SQL' : 'Show SQL'}
+              <CubeButton aria-haspopup="dialog" onClick={onShowSql}>
+                Show SQL
               </CubeButton>
             )}
           </>
         )}
+        <span className="flex-1" />
+        <CubeButton
+          aria-expanded={showRuns}
+          title="The latest runs, fetches and exports, with their SQL"
+          onClick={onToggleRuns}
+        >
+          {`Runs (${editorState.runStats.entries.length})`}
+        </CubeButton>
       </div>
     );
   },
 );
 
-/** The SQL the run's database ran, with Copy */
-const CubeSqlPanel = observer((props: { editorState: CubeEditorState }) => {
-  const { editorState } = props;
-  const { applicationStore } = editorState.host;
-  const sql = editorState.execution.result?.sql ?? [];
-  if (!sql.length) {
-    return null;
-  }
-  const copySql = (): void => {
-    applicationStore.clipboardService
-      .copyTextToClipboard(sql.join('\n\n'))
-      .catch(applicationStore.alertUnhandledError);
-  };
-  return (
-    <div
-      className="flex max-h-40 shrink-0 gap-2 overflow-auto border-b border-[var(--color-border-default)] p-2"
-      data-testid={LEGEND_CUBE_TEST_ID.SQL_PANEL}
-    >
-      <div className="min-w-0 flex-1">
-        {sql.map((statement, index) => (
-          <pre
-            // statements hold no state, and the same one may run twice
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            className="whitespace-pre-wrap font-mono text-sm"
-          >
-            {statement}
-          </pre>
-        ))}
-      </div>
-      <CubeButton onClick={copySql}>Copy SQL</CubeButton>
-    </div>
-  );
-});
-
 /**
  * On a data product cube, what to do about a run refused for its warehouse,
  * or for lack of access to the data: links to ask for it in the marketplace
@@ -230,11 +280,8 @@ const CubeDataProductRunErrorHelp = observer(
 );
 
 const CubeExecutionError = observer(
-  (props: { editorState: CubeEditorState }) => {
-    const error = props.editorState.execution.error;
-    if (!error) {
-      return null;
-    }
+  (props: { editorState: CubeEditorState; error: CubeEngineError }) => {
+    const { error } = props;
     const isCut = error.firstLine.length > MAX_ERROR_LINE_LENGTH;
     const firstLine = isCut
       ? `${error.firstLine.slice(0, MAX_ERROR_LINE_LENGTH)}…`
@@ -269,12 +316,73 @@ const CubeExecutionError = observer(
   },
 );
 
+/**
+ * The run's rows as the grid's mode shows them: in server-side mode built
+ * anew for each run and each drill-down, with a fetch's error above it
+ */
+const CubeRunGrid = observer(
+  (props: {
+    editorState: CubeEditorState;
+    result: CubeExecutionResult;
+    darkMode: boolean;
+  }) => {
+    const { editorState, result, darkMode } = props;
+    const { grid } = editorState;
+    const exportError = editorState.export.error && (
+      <CubeExecutionError
+        editorState={editorState}
+        error={editorState.export.error}
+      />
+    );
+    if (!grid.isServerSide) {
+      return (
+        <div className="flex h-full flex-col">
+          {exportError}
+          <div className="min-h-0 flex-1">
+            <CubeResultGrid
+              key={result.id}
+              editorState={editorState}
+              result={result}
+              presentation={editorState.document.meta.presentation}
+              darkMode={darkMode}
+            />
+          </div>
+        </div>
+      );
+    }
+    const drilldown = editorState.document.meta.drilldown;
+    return (
+      <div className="flex h-full flex-col">
+        <CubeDrilldownBar editorState={editorState} />
+        {exportError}
+        {grid.fetchError && (
+          <CubeExecutionError
+            editorState={editorState}
+            error={grid.fetchError}
+          />
+        )}
+        <div className="min-h-0 flex-1">
+          <CubeServerSideGrid
+            key={`${result.id}:${JSON.stringify(drilldown ?? null)}`}
+            editorState={editorState}
+            result={result}
+            levels={grid.drilldown?.columns ?? []}
+            presentation={editorState.document.meta.presentation}
+            darkMode={darkMode}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
 /** The results: Execute, the row limit and the run's stats above the grid (PLAN §9) */
 export const CubeGridRegion = observer(
   (props: { editorState: CubeEditorState }) => {
     const { editorState } = props;
     const { execution, host } = editorState;
     const [showSql, setShowSql] = useState(false);
+    const [showRuns, setShowRuns] = useState(false);
     const darkMode =
       !host.applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
     return (
@@ -285,18 +393,26 @@ export const CubeGridRegion = observer(
         <PanelLoadingIndicator isLoading={execution.isRunning} />
         <CubeGridToolbar
           editorState={editorState}
-          showSql={showSql}
-          onToggleSql={() => setShowSql(!showSql)}
+          onShowSql={() => setShowSql(true)}
+          showRuns={showRuns}
+          onToggleRuns={() => setShowRuns(!showRuns)}
         />
+        {showRuns && <CubeRunStatsPanel editorState={editorState} />}
+        <CubeColumnFormatDialog editorState={editorState} />
         {showSql && !execution.isRunning && (
-          <CubeSqlPanel editorState={editorState} />
+          <CubeSqlDialog
+            editorState={editorState}
+            onClose={() => setShowSql(false)}
+          />
         )}
         <div className="min-h-0 flex-1">
           {execution.error ? (
-            <CubeExecutionError editorState={editorState} />
+            <CubeExecutionError
+              editorState={editorState}
+              error={execution.error}
+            />
           ) : execution.result ? (
-            <CubeResultGrid
-              key={execution.result.id}
+            <CubeRunGrid
               editorState={editorState}
               result={execution.result}
               darkMode={darkMode}

package/src/components/grid/CubeGridValues.ts

@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import { TypeFamily } from '@finos/legend-cube';
+import {
+  type ColumnFormat,
+  ColumnFormatStyle,
+  type CubeType,
+  isColumnFormatStyle,
+  PrimitiveType,
+  TypeFamily,
+} from '@finos/legend-cube';
 import type { CubeResultValue } from '../../graph-manager/CubeEngine.js';
 
 // How the grid shows and sorts values (PLAN §9, Settled before M1.8).
@@ -178,3 +185,141 @@ export const formatCellValue = (
       return text;
   }
 };
+
+/**
+ * The digits after the point a decimal column keeps, e.g. 4 for
+ * `Numeric(14,4)`; none for another type, whose group rows round to
+ * `CUBE_GRID_FLOAT_DECIMAL_PLACES` (an Average of integers keeps 2 places)
+ */
+export const getTypeScale = (type: CubeType): number | undefined =>
+  type instanceof PrimitiveType &&
+  type.family === TypeFamily.DECIMAL &&
+  type.params.length >= 2
+    ? type.params[1]
+    : undefined;
+
+/**
+ * How a group row shows a number it aggregates (the review of the demo,
+ * 2026-10-13): its thousands grouped, an integer's too, since a sum or a
+ * count is a quantity, not an id; a fraction rounded to the column's scale,
+ * or to `CUBE_GRID_FLOAT_DECIMAL_PLACES` places for a column without one,
+ * so an Average doesn't show every digit. A value that isn't a number, or a
+ * column that isn't numeric, shows as it is. Copying keeps the exact value.
+ */
+export const formatGroupRowValue = (
+  value: Exclude<CubeResultValue, null>,
+  family: TypeFamily,
+  scale?: number | undefined,
+): string => {
+  const text = String(value);
+  if (!isNumericFamily(family) || typeof value === 'boolean') {
+    return text;
+  }
+  const parts = PLAIN_NUMBER_TEXT.exec(text.trim())?.groups;
+  if (!parts) {
+    return text;
+  }
+  const places = scale ?? CUBE_GRID_FLOAT_DECIMAL_PLACES;
+  // the fraction's digits, the point left out
+  const fraction = (parts.fraction ?? '').slice(1);
+  if (fraction.length <= places) {
+    return groupThousands(text.trim());
+  }
+  const rounded = Number(text).toFixed(places);
+  // a value that rounds to zero shows no sign
+  return groupThousands(
+    Number(rounded) === 0 ? rounded.replace(/^-/u, '') : rounded,
+  );
+};
+
+/** The ISO 4217 codes the browser formats (PLAN §11.10: codes, not symbols, §21) */
+export const getCubeCurrencyCodes = (): readonly string[] => {
+  const supportedValuesOf = (
+    Intl as unknown as {
+      supportedValuesOf?: (key: string) => string[];
+    }
+  ).supportedValuesOf;
+  return supportedValuesOf?.('currency') ?? ['EUR', 'GBP', 'JPY', 'USD'];
+};
+
+/** Why a format can't be used, if it can't: a style or a currency this browser doesn't know */
+export const getColumnFormatProblem = (
+  format: ColumnFormat,
+): string | undefined => {
+  if (!isColumnFormatStyle(format.style)) {
+    return `The format "${format.style}" is unknown, so the column shows its values as they are.`;
+  }
+  if (
+    format.style === ColumnFormatStyle.CURRENCY &&
+    !getCubeCurrencyCodes().includes(format.currency ?? '')
+  ) {
+    return `The currency "${format.currency ?? ''}" is unknown, so the column shows its values as they are.`;
+  }
+  return undefined;
+};
+
+/**
+ * A number formatted as the column's format says (spec §13.1, PLAN §11.10),
+ * from its exact text, so no digit is lost (`Intl.NumberFormat` reads a
+ * decimal string exactly); `undefined` for a value that isn't a number or a
+ * format that can't be used (`getColumnFormatProblem`), which shows as if
+ * none were set
+ */
+export const formatColumnValue = (
+  value: Exclude<CubeResultValue, null>,
+  format: ColumnFormat,
+): { readonly text: string; readonly negative: boolean } | undefined => {
+  const text = String(value).trim();
+  const parsed = typeof value === 'boolean' ? undefined : parseNumberText(text);
+  if (!parsed || getColumnFormatProblem(format) !== undefined) {
+    return undefined;
+  }
+  // with no places set, the value's own: '20.20' keeps its zero (a
+  // currency at least its usual cents), as the grid shows it unformatted
+  const ownPlaces = Math.min(
+    20,
+    /e/iu.test(text)
+      ? Math.max(0, parsed.digits.length - parsed.point)
+      : (text.split('.')[1]?.length ?? 0),
+  );
+  const places = format.decimalPlaces;
+  const formatter = new Intl.NumberFormat('en-US', {
+    style:
+      format.style === ColumnFormatStyle.CURRENCY
+        ? 'currency'
+        : format.style === ColumnFormatStyle.PERCENT
+          ? 'percent'
+          : 'decimal',
+    ...(format.style === ColumnFormatStyle.CURRENCY
+      ? { currency: format.currency }
+      : {}),
+    useGrouping: format.grouping,
+    // a negative that rounds to zero shows as zero, with no sign
+    signDisplay: 'negative',
+    ...(places !== undefined
+      ? { minimumFractionDigits: places, maximumFractionDigits: places }
+      : format.style === ColumnFormatStyle.PERCENT
+        ? { minimumFractionDigits: 0, maximumFractionDigits: 20 }
+        : {
+            minimumFractionDigits: Math.max(
+              ownPlaces,
+              format.style === ColumnFormatStyle.CURRENCY
+                ? (new Intl.NumberFormat('en-US', {
+                    style: 'currency',
+                    currency: format.currency,
+                  }).resolvedOptions().minimumFractionDigits ?? 0)
+                : 0,
+            ),
+            maximumFractionDigits: 20,
+          }),
+  });
+  // a decimal string keeps every digit, where a JS number would round
+  const shown = (number: string): string =>
+    formatter.format(number as unknown as number);
+  const signed = shown(text);
+  // negative as shown: one that rounds to zero isn't
+  const negative = parsed.negative && signed.includes('-');
+  return format.parenthesesIfNegative && negative
+    ? { text: `(${shown(text.replace(/^-/u, ''))})`, negative }
+    : { text: signed, negative };
+};