@finos/legend-cube-builder 0.0.4 → 0.0.6

package/src/components/grid/CubeGridValues.ts

@@ -14,8 +14,16 @@
  * 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';
+import { formatCubeJsonLine } from '../../stores/variant/CubeJson.js';
 
 // How the grid shows and sorts values (PLAN §9, Settled before M1.8).
 // Integer and Decimal values arrive as their exact text and are never turned
@@ -146,9 +154,11 @@ export const groupThousands = (text: string): string => {
  * How the grid shows a value of a column of the family (PLAN §9, user,
  * 2026-10-10): Decimal and Number values keep every digit,
  * their thousands grouped; Float values are rounded to
- * `CUBE_GRID_FLOAT_DECIMAL_PLACES` places, grouped too; Integer values, and
- * everything else, show as they are, so ids and years get no commas. The
- * value itself is unchanged, so copying a cell copies its exact value.
+ * `CUBE_GRID_FLOAT_DECIMAL_PLACES` places, grouped too; a Variant's JSON on
+ * one line, `{name: ann, tier: gold}` (`formatCubeJsonLine`, PLAN §11.20);
+ * Integer values, and everything else, show as they are, so ids and years get
+ * no commas. The value itself is unchanged, so copying a cell copies its
+ * exact value.
  */
 export const formatCellValue = (
   value: Exclude<CubeResultValue, null>,
@@ -174,7 +184,147 @@ export const formatCellValue = (
         Number(rounded) === 0 ? rounded.replace(/^-/u, '') : rounded,
       );
     }
+    case TypeFamily.VARIANT:
+      return formatCubeJsonLine(text);
     default:
       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 };
+};

package/src/components/grid/CubeJsonExplorerDialog.tsx

@@ -0,0 +1,304 @@
+/**
+ * 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 {
+  clsx,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+} from '@finos/legend-art';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { CUBE_JSON_EXPLODE_OFFER_TITLE } from '../../__lib__/LegendCubeLabels.js';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import type { CubeJsonExplorerState } from '../../stores/variant/CubeJsonExplorerState.js';
+import {
+  type CubeJsonField,
+  filterCubeJsonFields,
+} from '../../stores/variant/CubeJsonOffers.js';
+import { CubeButton } from '../CubeButton.js';
+import { CUBE_PRIMARY_BUTTON_DARK_MODE } from '../CubeDialogTheme.js';
+
+const format = (count: number): string => count.toLocaleString('en-US');
+
+/** A share, 0 to 1, as a whole percentage */
+const percentOf = (share: number): number => Math.round(share * 100);
+
+/** A field's name: its last key, or the column's for the column itself */
+const nameOf = (
+  explorer: CubeJsonExplorerState,
+  field: CubeJsonField,
+): string => field.path.at(-1) ?? explorer.column?.name ?? '';
+
+/** What was read, on one line: the first values or every row, and why it stopped */
+const CubeJsonExplorerStatus = observer(
+  (props: { explorer: CubeJsonExplorerState }) => {
+    const { explorer } = props;
+    const { sample, column } = explorer;
+    let text: string;
+    if (explorer.isReading) {
+      text = `Reading ${column?.name ?? ''}…`;
+    } else if (!sample) {
+      text = '';
+    } else {
+      const values = sample.rows - sample.unreadable;
+      const unreadable = sample.unreadable
+        ? ` (${format(sample.unreadable)} not JSON)`
+        : '';
+      text = sample.complete
+        ? `All ${format(sample.rows)} values read${unreadable}: the fields, their types and shares cover the whole column.`
+        : `The first ${format(sample.rows)} values read${unreadable}: the types and shares are from this sample.`;
+      if (values === 0) {
+        text = `No JSON in the ${format(sample.rows)} values read.`;
+      }
+    }
+    return (
+      <div className="mb-2 flex min-h-6 items-center gap-2 text-sm text-[var(--color-text-secondary)]">
+        <span role="status">{text}</span>
+        {explorer.isReading ? (
+          <CubeButton onClick={() => explorer.stop()}>Stop</CubeButton>
+        ) : (
+          sample &&
+          !sample.complete && (
+            <CubeButton
+              title="Read every value of the column, for the shape of the whole column: listed in Runs, and it can be stopped"
+              onClick={() => {
+                // a failed read shows its message in the dialog
+                flowResult(explorer.read(true)).catch(() => undefined);
+              }}
+            >
+              Read every row
+            </CubeButton>
+          )
+        )}
+      </div>
+    );
+  },
+);
+
+/** A field of the tree, and its fields, indented */
+const CubeJsonFieldRow = observer(
+  (props: {
+    explorer: CubeJsonExplorerState;
+    field: CubeJsonField;
+    depth: number;
+  }) => {
+    const { explorer, field, depth } = props;
+    const selected =
+      JSON.stringify(field.path) === JSON.stringify(explorer.selectedPath);
+    const share = percentOf(field.presence);
+    return (
+      <>
+        <button
+          type="button"
+          className={clsx(
+            'flex w-full items-baseline gap-2 py-0.5 pr-2 text-left hover:bg-[var(--color-bg-hover)]',
+            { 'bg-[var(--color-bg-selected)]': selected },
+          )}
+          style={{ paddingLeft: `${8 + depth * 16}px` }}
+          aria-pressed={selected}
+          aria-label={`Field ${[explorer.column?.name ?? '', ...field.path].join('.')}`}
+          onClick={() => explorer.select(field.path)}
+        >
+          <span className="break-all font-mono text-sm text-[var(--color-text-primary)]">
+            {nameOf(explorer, field)}
+          </span>
+          <span className="text-xs text-[var(--color-text-secondary)]">
+            {field.description}
+          </span>
+          {share < 100 && (
+            <span
+              className="ml-auto text-xs text-[var(--color-text-muted)]"
+              title={
+                field.path.length
+                  ? `In ${share}% of the objects it could be in`
+                  : `In ${share}% of the rows read`
+              }
+            >
+              {share}%
+            </span>
+          )}
+        </button>
+        {field.children.map((child) => (
+          <CubeJsonFieldRow
+            key={JSON.stringify(child.path)}
+            explorer={explorer}
+            field={child}
+            depth={depth + 1}
+          />
+        ))}
+      </>
+    );
+  },
+);
+
+/** The selected field: where it is, what it held, and the columns it can become, to tick */
+const CubeJsonFieldOffers = observer(
+  (props: { explorer: CubeJsonExplorerState }) => {
+    const { explorer } = props;
+    const field = explorer.selectedField;
+    if (!field) {
+      return null;
+    }
+    const { offers } = field;
+    const share = percentOf(field.presence);
+    return (
+      <div className="flex flex-col gap-2 p-2">
+        <div className="break-all font-mono text-sm text-[var(--color-text-primary)]">
+          {[explorer.column?.name ?? '', ...field.path].join(' › ')}
+        </div>
+        <div className="text-sm text-[var(--color-text-secondary)]">
+          {field.description}
+          {share < 100
+            ? ` · in ${share}% of ${field.path.length ? 'the objects it could be in' : 'the rows read'}`
+            : ''}
+        </div>
+        {field.topValues.length > 0 && (
+          <div className="break-all text-xs text-[var(--color-text-secondary)]">
+            Values seen: {field.topValues.join(', ')}
+          </div>
+        )}
+        {offers.length ? (
+          <div role="group" aria-label="Columns it can become">
+            {offers.map((offer) => (
+              <label
+                key={offer.key}
+                className="flex cursor-pointer items-baseline gap-2 py-0.5 text-sm"
+                title={offer.code ?? CUBE_JSON_EXPLODE_OFFER_TITLE}
+              >
+                <input
+                  type="checkbox"
+                  checked={explorer.isTicked(field.path, offer)}
+                  onChange={() => explorer.toggle(field.path, offer)}
+                />
+                <span className="text-[var(--color-text-primary)]">
+                  {offer.label}
+                </span>
+                <span className="text-xs text-[var(--color-text-muted)]">
+                  {offer.explode ? 'Explode Array' : offer.type} · {offer.name}
+                </span>
+              </label>
+            ))}
+          </div>
+        ) : (
+          <div className="text-sm text-[var(--color-text-muted)]">
+            {field.children.length
+              ? 'Pick one of its fields.'
+              : 'Nothing to make of it.'}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+/**
+ * Explore JSON (PLAN §11.20): a Variant column's fields, read from its first
+ * values or every row, each with what it held and how often; the selected
+ * field's offers, ticked and added as one Extend after the node that ran
+ */
+export const CubeJsonExplorerDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const explorer = editorState.jsonExplorer;
+    const { applicationStore } = editorState.host;
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    const fields = explorer.fields
+      ? filterCubeJsonFields(explorer.fields, explorer.search)
+      : undefined;
+    const count = explorer.tickedOffers.length;
+    const add = (): void => {
+      flowResult(explorer.add()).catch(applicationStore.alertUnhandledError);
+    };
+    return (
+      <Dialog open={explorer.isOpen} onClose={() => explorer.close()}>
+        <Modal darkMode={darkMode} className="w-[960px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">{`Explore JSON: ${explorer.column?.name ?? ''}`}</div>
+          </ModalHeader>
+          <ModalBody>
+            <div data-testid={LEGEND_CUBE_TEST_ID.JSON_EXPLORER}>
+              <CubeJsonExplorerStatus explorer={explorer} />
+              {explorer.error && (
+                <div
+                  role="alert"
+                  className="mb-2 break-words text-sm text-[var(--color-status-error)]"
+                >
+                  {explorer.error}
+                </div>
+              )}
+              {explorer.fields && (
+                <div className="grid h-[50vh] grid-cols-2 gap-2">
+                  <div className="flex min-h-0 flex-col rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-panel)]">
+                    <input
+                      className="m-1 rounded-sm border border-[var(--color-border-default)] px-1 text-sm"
+                      placeholder="Find a field"
+                      aria-label="Find a field"
+                      value={explorer.search}
+                      onChange={(event) =>
+                        explorer.setSearch(event.target.value)
+                      }
+                    />
+                    <div
+                      className="min-h-0 flex-1 overflow-auto"
+                      aria-label="Fields"
+                    >
+                      {fields ? (
+                        <CubeJsonFieldRow
+                          explorer={explorer}
+                          field={fields}
+                          depth={0}
+                        />
+                      ) : (
+                        <div className="p-2 text-sm text-[var(--color-text-muted)]">
+                          No field matches.
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="min-h-0 overflow-auto rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-panel)]">
+                    <CubeJsonFieldOffers explorer={explorer} />
+                  </div>
+                </div>
+              )}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={CUBE_PRIMARY_BUTTON_DARK_MODE}
+              formatText={false}
+              text={count === 1 ? 'Add 1 column' : `Add ${count} columns`}
+              disabled={!count || explorer.isAdding || explorer.isReading}
+              onClick={add}
+            />
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Cancel"
+              onClick={() => explorer.close()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

package/src/components/grid/CubeJsonViewerDialog.tsx

@@ -0,0 +1,190 @@
+/**
+ * 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 {
+  CaretDownIcon,
+  CaretRightIcon,
+  Dialog,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+} from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import type { CubeEditorState } from '../../stores/CubeEditorState.js';
+import {
+  type CubeJsonNode,
+  formatCubeJsonPretty,
+} from '../../stores/variant/CubeJson.js';
+import { CUBE_PRIMARY_BUTTON_DARK_MODE } from '../CubeDialogTheme.js';
+
+/** Levels open when the dialog opens: the document and its first fields */
+const OPEN_DEPTH = 2;
+
+/** What a closed object or array holds, e.g. `{2 keys}`, `[3 items]` */
+const summarize = (node: CubeJsonNode): string =>
+  node.kind === 'object'
+    ? `{${node.entries.length} ${node.entries.length === 1 ? 'key' : 'keys'}}`
+    : node.kind === 'array'
+      ? `[${node.items.length} ${node.items.length === 1 ? 'item' : 'items'}]`
+      : '';
+
+/** A scalar, coloured by its kind: strings quoted, numbers as written */
+const CubeJsonScalar: React.FC<{ node: CubeJsonNode }> = ({ node }) =>
+  node.kind === 'string' ? (
+    <span className="break-all text-[var(--color-category-enumeration)]">
+      {JSON.stringify(node.value)}
+    </span>
+  ) : node.kind === 'number' ? (
+    <span className="text-[var(--color-category-primitive)]">{node.text}</span>
+  ) : node.kind === 'boolean' ? (
+    <span className="text-[var(--color-category-class)]">
+      {String(node.value)}
+    </span>
+  ) : (
+    <span className="text-[var(--color-text-muted)]">null</span>
+  );
+
+/** One entry of the tree: its key or index, and its value, open or closed */
+const CubeJsonTreeNode: React.FC<{
+  label: string | undefined;
+  node: CubeJsonNode;
+  depth: number;
+}> = ({ label, node, depth }) => {
+  const [open, setOpen] = useState(depth < OPEN_DEPTH);
+  const children =
+    node.kind === 'object'
+      ? node.entries.map(([key, value]) => [key, value] as const)
+      : node.kind === 'array'
+        ? node.items.map((item, index) => [`[${index}]`, item] as const)
+        : undefined;
+  const name =
+    label === undefined ? undefined : (
+      <span className="font-medium text-[var(--color-text-primary)]">
+        {label}:{' '}
+      </span>
+    );
+  if (!children) {
+    return (
+      <div className="py-px pl-5 font-mono text-sm">
+        {name}
+        <CubeJsonScalar node={node} />
+      </div>
+    );
+  }
+  return (
+    <div className="font-mono text-sm">
+      <button
+        type="button"
+        className="flex items-center gap-1 py-px text-left hover:bg-[var(--color-bg-hover)]"
+        aria-expanded={open}
+        aria-label={`${open ? 'Close' : 'Open'} ${label ?? 'the document'}`}
+        onClick={() => setOpen(!open)}
+      >
+        {open ? (
+          <CaretDownIcon aria-hidden={true} />
+        ) : (
+          <CaretRightIcon aria-hidden={true} />
+        )}
+        {name}
+        <span className="text-[var(--color-text-secondary)]">
+          {summarize(node)}
+        </span>
+      </button>
+      {open && (
+        <div className="ml-2 border-l border-[var(--color-border-subtle)] pl-2">
+          {children.map(([key, value]) => (
+            <CubeJsonTreeNode
+              key={key}
+              label={key}
+              node={value}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Open JSON (PLAN §11.20): a Variant cell's document as a tree, each object
+ * and array open to `OPEN_DEPTH` and opened or closed by a click, with Copy
+ * JSON (indented, numbers as written); text that isn't JSON is shown as it is
+ */
+export const CubeJsonViewerDialog = observer(
+  (props: { editorState: CubeEditorState }) => {
+    const { editorState } = props;
+    const viewer = editorState.jsonViewer;
+    const { applicationStore } = editorState.host;
+    const darkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    const document = viewer.document;
+    const copy = (): void => {
+      const text = document
+        ? formatCubeJsonPretty(document)
+        : (viewer.text ?? '');
+      applicationStore.clipboardService
+        .copyTextToClipboard(text)
+        .catch(applicationStore.alertUnhandledError);
+    };
+    return (
+      <Dialog open={viewer.isOpen} onClose={() => viewer.close()}>
+        <Modal darkMode={darkMode} className="w-[720px] max-w-full">
+          <ModalHeader>
+            <div className="modal__title">{`JSON of ${viewer.column ?? ''}`}</div>
+          </ModalHeader>
+          <ModalBody>
+            <div
+              className="max-h-[60vh] overflow-auto rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-panel)] p-2"
+              aria-label="JSON document"
+              data-testid={LEGEND_CUBE_TEST_ID.JSON_VIEWER}
+            >
+              {document ? (
+                <CubeJsonTreeNode
+                  key={viewer.text}
+                  label={undefined}
+                  node={document}
+                  depth={0}
+                />
+              ) : (
+                <div className="break-all font-mono text-sm">{viewer.text}</div>
+              )}
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <ModalFooterButton
+              darkMode={CUBE_PRIMARY_BUTTON_DARK_MODE}
+              formatText={false}
+              text="Copy JSON"
+              onClick={copy}
+            />
+            <ModalFooterButton
+              darkMode={darkMode}
+              formatText={false}
+              type="secondary"
+              text="Close"
+              onClick={() => viewer.close()}
+            />
+          </ModalFooter>
+        </Modal>
+      </Dialog>
+    );
+  },
+);