@finos/legend-cube-builder 0.0.5 → 0.0.6

package/src/components/CubeEditor.tsx

@@ -37,6 +37,7 @@ import {
   UNSAVED_CUBE_NAME,
 } from '../__lib__/LegendCubeLabels.js';
 import { LEGEND_CUBE_TEST_ID } from '../__lib__/LegendCubeTesting.js';
+import { CUBE_TOUR_ANCHOR, cubeTourAnchor } from '../__lib__/LegendCubeTour.js';
 import { CubeEditorState } from '../stores/CubeEditorState.js';
 import {
   type CubeEntrySource,
@@ -53,11 +54,14 @@ import { CubeGridRegion } from './grid/CubeGridRegion.js';
 import { CubePalette } from './palette/CubePalette.js';
 import { CubeDevSettingsDialog } from './dev-settings/CubeDevSettings.js';
 import { CubeShowPureDialog } from './show-pure/CubeShowPureDialog.js';
+import { CubeJsonViewerDialog } from './grid/CubeJsonViewerDialog.js';
+import { CubeJsonExplorerDialog } from './grid/CubeJsonExplorerDialog.js';
 import { CubeExamplesDialog } from './examples/CubeExamplesDialog.js';
 import { CubeFileMenu } from './CubeFileMenu.js';
 import { CubeSourcePicker } from './source-picker/CubeSourcePicker.js';
 import { CubeSpecTransferDialog } from './spec-transfer/CubeSpecTransferDialog.js';
 import { CubeImportPureDialog } from './spec-transfer/CubeImportPureDialog.js';
+import { CubeTour } from './tour/CubeTour.js';
 
 /** The graph never takes more of the window's height than this, so the results stay in view (spec §17.3) */
 const MAX_GRAPH_SHARE_OF_WINDOW = 0.6;
@@ -115,12 +119,14 @@ const CubeGraphHeader = observer(
           {isCubeSampleDataOffered(editorState.host) && (
             <CubeButton
               title="Open an example cube, or start one on sample data"
+              {...cubeTourAnchor(CUBE_TOUR_ANCHOR.EXAMPLES)}
               onClick={() => editorState.examples.open()}
             >
               Examples
             </CubeButton>
           )}
           <CubeButton
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.VIEW)}
             title={
               readOnly
                 ? READ_ONLY_CUBE_TITLE
@@ -132,6 +138,7 @@ const CubeGraphHeader = observer(
             Undo
           </CubeButton>
           <CubeButton
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.VIEW)}
             title={`Redo the last change undone (${REDO_SHORTCUT_LABEL})`}
             disabled={!editorState.canRedo}
             onClick={() => editorState.redoEdited()}
@@ -139,6 +146,7 @@ const CubeGraphHeader = observer(
             Redo
           </CubeButton>
           <CubeButton
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.VIEW)}
             title={
               editorState.execution.canExecute
                 ? 'Show the Pure query that Execute runs'
@@ -158,6 +166,7 @@ const CubeGraphHeader = observer(
             Show Pure
           </CubeButton>
           <CubeButton
+            {...cubeTourAnchor(CUBE_TOUR_ANCHOR.VIEW)}
             title={
               showGraph
                 ? 'Hide the graph, leaving more room for the results'
@@ -206,6 +215,8 @@ const CubeGraphHeader = observer(
         <CubeSpecTransferDialog editorState={editorState} />
         <CubeImportPureDialog editorState={editorState} />
         <CubeShowPureDialog editorState={editorState} />
+        <CubeJsonViewerDialog editorState={editorState} />
+        <CubeJsonExplorerDialog editorState={editorState} />
         <CubeDevSettingsDialog editorState={editorState} />
       </div>
     );
@@ -260,9 +271,12 @@ export const CubeEditor = observer(
     // hiding the graph collapses its panel: the header and the results stay
     // where they are, so the grid keeps its state
     const graphPanel = getCollapsiblePanelGroupProps(!showGraph);
+    // the page, whose controls the tour points at
+    const [page, setPage] = useState<HTMLDivElement | null>(null);
 
     return (
       <div
+        ref={setPage}
         className="legend-cube flex bg-[var(--color-bg-app)] text-[var(--color-text-primary)]"
         data-testid={LEGEND_CUBE_TEST_ID.EDITOR}
       >
@@ -288,6 +302,7 @@ export const CubeEditor = observer(
             </ResizablePanel>
           </ResizablePanelGroup>
         </div>
+        <CubeTour editorState={editorState} root={page} />
       </div>
     );
   },

package/src/components/CubeFileMenu.tsx

@@ -23,6 +23,7 @@ import {
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { READ_ONLY_CUBE_TITLE } from '../__lib__/LegendCubeLabels.js';
+import { CUBE_TOUR_ANCHOR, cubeTourAnchor } from '../__lib__/LegendCubeTour.js';
 import type { CubeEditorState } from '../stores/CubeEditorState.js';
 
 interface CubeFileMenuItem {
@@ -83,6 +84,7 @@ export const CubeFileMenu = observer(
           type="button"
           className="flex h-6 shrink-0 items-center gap-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-elevated)] px-2 text-base text-[var(--color-text-primary)] enabled:cursor-pointer enabled:hover:bg-[var(--color-bg-hover)]"
           title="New, Import, Import Pure and Export"
+          {...cubeTourAnchor(CUBE_TOUR_ANCHOR.CUBE_MENU)}
           aria-haspopup="menu"
           aria-expanded={isOpen}
           onClick={openMenu}

package/src/components/CubeNodeIcon.tsx

@@ -19,6 +19,7 @@ import {
   AlignMiddleIcon,
   AlignTopIcon,
   ArrowsJoinIcon,
+  ArrowsSplitIcon,
   CalculatorIcon,
   CodeIcon,
   CompareIcon,
@@ -53,6 +54,7 @@ const NODE_ICONS: Readonly<
   concat: LayerGroupIcon,
   difference: CompareIcon,
   extend: CalculatorIcon,
+  explode: ArrowsSplitIcon,
   limit: AlignTopIcon,
   drop: AlignBottomIcon,
   slice: AlignMiddleIcon,

package/src/components/canvas/CubeCanvas.tsx

@@ -36,6 +36,11 @@ import { observer } from 'mobx-react-lite';
 import { useEffect, useMemo, useRef } from 'react';
 import { useDrop } from 'react-dnd';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import {
+  CUBE_TOUR_ANCHOR,
+  CUBE_TOUR_LABEL,
+  cubeTourAnchor,
+} from '../../__lib__/LegendCubeTour.js';
 import { canAddCubeNode } from '../../stores/CubeAddPlacement.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import { isCubeSampleDataOffered } from '../../stores/CubeHost.js';
@@ -284,6 +289,7 @@ export const CubeCanvas = observer(
         ref={ref}
         className="relative h-full w-full"
         data-testid={LEGEND_CUBE_TEST_ID.CANVAS}
+        {...cubeTourAnchor(CUBE_TOUR_ANCHOR.CANVAS)}
       >
         <ContextMenu
           className="h-full w-full"
@@ -293,7 +299,7 @@ export const CubeCanvas = observer(
           menuProps={{ elevation: 7 }}
         >
           {editorState.document.query.isEmpty ? (
-            <div className="flex h-full items-center justify-center p-4 text-base text-[var(--color-text-secondary)]">
+            <div className="flex h-full flex-col items-center justify-center gap-2 p-4 text-base text-[var(--color-text-secondary)]">
               <span>
                 <button
                   className="text-[var(--color-accent)] underline disabled:text-[var(--color-text-disabled)] disabled:no-underline"
@@ -321,6 +327,16 @@ export const CubeCanvas = observer(
                   ' to start a new one.'
                 )}
               </span>
+              <span>
+                {CUBE_TOUR_LABEL.OFFER}{' '}
+                <button
+                  className="text-[var(--color-accent)] underline"
+                  onClick={() => editorState.tour.start()}
+                >
+                  {CUBE_TOUR_LABEL.START}
+                </button>
+                .
+              </span>
             </div>
           ) : (
             <CubeCanvasContext.Provider value={editorState}>

package/src/components/canvas/CubeCanvasNode.tsx

@@ -21,6 +21,10 @@ import { useRef } from 'react';
 import { RUNNING_NODE_LABEL } from '../../__lib__/LegendCubeHelpText.js';
 import { useDrag, useDrop } from 'react-dnd';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import {
+  CUBE_TOUR_ANCHOR,
+  cubeTourAnchor,
+} from '../../__lib__/LegendCubeTour.js';
 import { CubeNodeIcon } from '../CubeNodeIcon.js';
 import {
   CUBE_OUTPUT_HANDLE_ID,
@@ -144,6 +148,9 @@ export const CubeCanvasNode = observer(
             aria-description={status.tooltip}
             aria-current={status.isCapture}
             data-testid={LEGEND_CUBE_TEST_ID.CANVAS_NODE}
+            {...(status.isCapture
+              ? cubeTourAnchor(CUBE_TOUR_ANCHOR.RUNNING_STEP)
+              : {})}
           >
             <CubeNodeIcon
               icon={editorState.registry.get(node.type)?.icon}

package/src/components/dev-settings/CubeDevSettings.tsx

@@ -30,6 +30,11 @@ import {
   useDropdownMenu,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
+import {
+  CUBE_TOUR_ANCHOR,
+  CUBE_TOUR_LABEL,
+  cubeTourAnchor,
+} from '../../__lib__/LegendCubeTour.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 
 /** Why Dev Settings can't change anything */
@@ -37,8 +42,8 @@ const DEV_SETTINGS_UNAVAILABLE =
   "This Legend deployment doesn't let Legend Cube's engine clients be changed.";
 
 /**
- * The page's menu, at the top left, as Legend Query's editor has one: Dev
- * Settings (PLAN §11.16)
+ * The page's menu, at the top left, as Legend Query's editor has one: the
+ * tour (PLAN §11.21) and Dev Settings (PLAN §11.16)
  */
 export const CubePageMenu = observer(
   (props: { editorState: CubeEditorState }) => {
@@ -50,6 +55,7 @@ export const CubePageMenu = observer(
           type="button"
           className="flex h-6 w-6 shrink-0 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]"
           title="Menu"
+          {...cubeTourAnchor(CUBE_TOUR_ANCHOR.PAGE_MENU)}
           aria-haspopup="menu"
           aria-expanded={isOpen}
           onClick={openMenu}
@@ -65,6 +71,15 @@ export const CubePageMenu = observer(
             },
           }}
         >
+          <DropdownMenuItem
+            className="px-2 text-base"
+            onClick={() => {
+              closeMenu();
+              editorState.tour.start();
+            }}
+          >
+            {CUBE_TOUR_LABEL.START}
+          </DropdownMenuItem>
           <DropdownMenuItem
             className="px-2 text-base"
             onClick={() => {

package/src/components/editors/CubeColumnPicker.tsx

@@ -20,6 +20,7 @@ import {
   HashtagIcon,
   ListIcon,
   QuestionIcon,
+  SitemapIcon,
   StringTypeIcon,
   ToggleIcon,
 } from '@finos/legend-art';
@@ -47,6 +48,8 @@ const FAMILY_ICONS: Readonly<
   [TypeFamily.DATETIME]: CalendarIcon,
   [TypeFamily.DATE]: CalendarIcon,
   [TypeFamily.ENUM]: ListIcon,
+  // a JSON document: its fields as a tree (PLAN §11.20)
+  [TypeFamily.VARIANT]: SitemapIcon,
 };
 
 /** The icon of a column type's family: text, number, date, ...; a question mark for the rest */

package/src/components/editors/CubeExplodeEditor.tsx

@@ -0,0 +1,207 @@
+/**
+ * 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, TimesIcon } from '@finos/legend-art';
+import { type Schema, TypeFamily } from '@finos/legend-cube';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import {
+  COLUMN_NAME_RULES_HINT,
+  EXPLODE_COLUMN_DISABLED_REASON,
+  EXPLODE_EDITOR_NOTES,
+  EXPLODE_NO_ARRAYS_NOTICE,
+} from '../../__lib__/LegendCubeLabels.js';
+import { CubeExplodeDraft } from '../../stores/editors/CubeExplodeDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnPicker } from './CubeColumnPicker.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const FIELD =
+  'h-6 min-w-0 flex-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base';
+
+/**
+ * The Explode Array editor (PLAN §11.20): the Variant column; the keys to its
+ * array, typed or picked from the arrays a sample of the column holds; and
+ * the new column's name, which follows the keys until typed. The node's
+ * problems show under it, as for any node.
+ */
+export const CubeExplodeEditor = observer((props: CubeNodeEditorProps) => {
+  const { readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeExplodeDraft);
+  const [schema] = props.inputSchemas as [Schema];
+  const { arrays } = draft;
+  const findArrays = (): void => {
+    flowResult(draft.readSample()).catch(
+      draft.editorState.host.applicationStore.alertUnhandledError,
+    );
+  };
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <div className="flex items-center gap-2">
+        <span className="w-16 shrink-0">Column</span>
+        <CubeColumnPicker
+          label="Explode column"
+          schema={schema}
+          value={draft.column}
+          disabled={readOnly}
+          onChange={(name) => draft.setColumn(name)}
+          isColumnDisabled={(column) =>
+            column.type.family === TypeFamily.VARIANT
+              ? undefined
+              : EXPLODE_COLUMN_DISABLED_REASON.NOT_JSON
+          }
+        />
+      </div>
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <span className="w-16 shrink-0">Array</span>
+          <span className="min-w-0 flex-1 break-all font-mono text-sm text-[var(--color-text-secondary)]">
+            {[draft.column || '…', ...draft.path].join(' › ')}
+          </span>
+          <CubeButton
+            title={
+              draft.sampleProblem ??
+              "Read the column's first values, and list the arrays they hold"
+            }
+            disabled={
+              readOnly ||
+              !draft.column ||
+              draft.isSampling ||
+              draft.sampleProblem !== undefined
+            }
+            onClick={findArrays}
+          >
+            {draft.isSampling ? 'Reading…' : 'Find arrays'}
+          </CubeButton>
+        </div>
+        {draft.sampleError && (
+          <div className="break-words text-sm text-[var(--color-status-error)]">
+            {draft.sampleError}
+          </div>
+        )}
+        {arrays && arrays.length === 0 && (
+          <div className="text-sm text-[var(--color-text-secondary)]">
+            {EXPLODE_NO_ARRAYS_NOTICE}
+          </div>
+        )}
+        {arrays && arrays.length > 0 && (
+          <ul
+            aria-label="Arrays found"
+            className="rounded-sm border border-[var(--color-border-subtle)]"
+          >
+            {arrays.map((array) => {
+              const picked =
+                array.path.length === draft.path.length &&
+                array.path.every((key, index) => key === draft.path[index]);
+              const label = [draft.column, ...array.path].join(' › ');
+              const share = Math.round(array.presence * 100);
+              return (
+                <li key={JSON.stringify(array.path)}>
+                  <button
+                    type="button"
+                    aria-label={`Array ${label}`}
+                    aria-pressed={picked}
+                    disabled={readOnly}
+                    className={clsx(
+                      'flex w-full items-baseline gap-2 px-2 py-0.5 text-left enabled:hover:bg-[var(--color-bg-hover)]',
+                      picked && 'bg-[var(--color-bg-selected)]',
+                    )}
+                    onClick={() => draft.pickArray(array.path)}
+                  >
+                    <span className="min-w-0 break-all font-mono text-sm">
+                      {label}
+                    </span>
+                    <span className="shrink-0 text-xs text-[var(--color-text-muted)]">
+                      {array.description}
+                      {share < 100 ? ` · ${share}%` : ''}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+        <ul aria-label="Path keys" className="flex flex-col gap-1">
+          {draft.path.map((key, index) => {
+            const position = index + 1;
+            return (
+              // keys are edited in place: their position is their identity
+              // eslint-disable-next-line react/no-array-index-key
+              <li key={index} className="flex items-center gap-1">
+                <span className="w-16 shrink-0 text-sm text-[var(--color-text-secondary)]">
+                  {`Key ${position}`}
+                </span>
+                <input
+                  aria-label={`Path key ${position}`}
+                  aria-invalid={key === ''}
+                  className={clsx(
+                    FIELD,
+                    key === '' && 'border-[var(--color-status-error)]',
+                  )}
+                  type="text"
+                  spellCheck={false}
+                  value={key}
+                  disabled={readOnly}
+                  onChange={(event) => draft.setKey(index, event.target.value)}
+                />
+                <button
+                  type="button"
+                  className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] disabled:text-[var(--color-text-disabled)]"
+                  aria-label={`Remove path key ${position}`}
+                  title="Remove this key"
+                  disabled={readOnly}
+                  onClick={() => draft.removeKey(index)}
+                >
+                  <TimesIcon />
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+        <div>
+          <CubeButton
+            title="Add a key: the field of the object the keys before it reach"
+            disabled={readOnly || !draft.column}
+            onClick={() => draft.addKey()}
+          >
+            Add key
+          </CubeButton>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="w-16 shrink-0">Into</span>
+        <input
+          aria-label="New column name"
+          className={FIELD}
+          type="text"
+          spellCheck={false}
+          value={draft.name}
+          disabled={readOnly}
+          onChange={(event) => draft.setName(event.target.value)}
+        />
+      </div>
+      <div className="text-sm text-[var(--color-text-secondary)]">
+        {COLUMN_NAME_RULES_HINT}
+      </div>
+      <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
+        {EXPLODE_EDITOR_NOTES.map((note) => (
+          <li key={note}>{note}</li>
+        ))}
+      </ul>
+    </div>
+  );
+});

package/src/components/editors/CubeExpressionFilterEditor.tsx

@@ -33,7 +33,12 @@ import {
 } from '../../stores/editors/CubeExpressionFilterDraft.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
-import { columnAccessOf } from './CubeExtendEditor.js';
+import {
+  CubeJsonFieldsToggle,
+  CubeJsonFieldsTree,
+  isCubeJsonColumn,
+} from './CubeJsonFieldsTree.js';
+import { columnAccessOf } from '../../stores/CubePureText.js';
 import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
 
 /** The code editor's language: legend-code-editor's `CODE_EDITOR_LANGUAGE.PURE` */
@@ -108,6 +113,11 @@ export const CubeExpressionFilterEditor = observer(
     const [schema] = inputSchemas as [Schema];
     const [expanded, setExpanded] = useState(false);
     const disabled = readOnly || draft.validating;
+    /** Writes text at the end of the condition, as the chips do */
+    const write = (text: string): void => {
+      const separator = /\s$/u.test(draft.code) ? '' : ' ';
+      draft.setCode(`${draft.code}${separator}${text}`);
+    };
     return (
       <div className="flex flex-col gap-2 text-base">
         <div className="flex items-center gap-1">
@@ -164,24 +174,31 @@ export const CubeExpressionFilterEditor = observer(
         <span>Input columns</span>
         <ul aria-label="Input columns" className="flex flex-wrap gap-1">
           {schema.columns.map((column) => (
-            <li key={column.name}>
+            <li key={column.name} className="flex items-stretch gap-0.5">
               <button
                 className="flex items-center gap-1 rounded-sm border border-[var(--color-border-subtle)] px-1 text-sm hover:bg-[var(--color-bg-hover)] disabled:text-[var(--color-text-disabled)]"
                 title={`Write ${columnAccessOf(column.name)} at the end of the condition (${getExactColumnTypeLabel(column)})`}
                 disabled={disabled}
-                onClick={() => {
-                  const separator = /\s$/u.test(draft.code) ? '' : ' ';
-                  draft.setCode(
-                    `${draft.code}${separator}${columnAccessOf(column.name)}`,
-                  );
-                }}
+                onClick={() => write(columnAccessOf(column.name))}
               >
                 <CubeColumnTypeIcon type={column.type} />
                 {column.name}
               </button>
+              {isCubeJsonColumn(column) && (
+                <CubeJsonFieldsToggle
+                  fields={draft.jsonFields}
+                  column={column}
+                  disabled={readOnly}
+                />
+              )}
             </li>
           ))}
         </ul>
+        <CubeJsonFieldsTree
+          fields={draft.jsonFields}
+          disabled={disabled}
+          onInsert={write}
+        />
         <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
           {EXPRESSION_FILTER_EDITOR_NOTES.map((note) => (
             <li key={note}>{note}</li>

package/src/components/editors/CubeExtendEditor.tsx

@@ -38,19 +38,19 @@ import {
   type CubeExtendRow,
   CubeExtendDraft,
 } from '../../stores/editors/CubeExtendDraft.js';
+import { columnAccessOf } from '../../stores/CubePureText.js';
 import { CubeButton } from '../CubeButton.js';
 import { CubeColumnTypeIcon } from './CubeColumnPicker.js';
+import {
+  CubeJsonFieldsToggle,
+  CubeJsonFieldsTree,
+  isCubeJsonColumn,
+} from './CubeJsonFieldsTree.js';
 import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
 
 /** The code editor's language: legend-code-editor's `CODE_EDITOR_LANGUAGE.PURE` */
 const PURE = 'pure';
 
-/** How an expression reads a column: `$x.NAME`, or `$x.'a name'` for one that isn't an identifier */
-export const columnAccessOf = (name: string): string =>
-  /^[A-Za-z_][A-Za-z0-9_]*$/u.test(name)
-    ? `$x.${name}`
-    : `$x.'${name.replace(/\\/gu, '\\\\').replace(/'/gu, "\\'")}'`;
-
 /** The error the code editor marks, from a row's problem located in its code */
 const markerOf = (row: CubeExtendRow): CompilationError | undefined => {
   const { problem } = row;
@@ -94,8 +94,8 @@ const CubeExtendRowStatus = observer((props: { row: CubeExtendRow }) => {
   return row.type ? (
     <div className="flex items-center gap-1 text-sm text-[var(--color-text-secondary)]">
       <CubeColumnTypeIcon type={row.type} />
-      {/* every new column can be empty (PLAN §11.7) */}
-      {`${row.type.displayName}, can be empty`}
+      {/* every new column is optional (PLAN §11.7) */}
+      {`${row.type.displayName}, optional`}
     </div>
   ) : null;
 });
@@ -200,6 +200,14 @@ export const CubeExtendEditor = observer((props: CubeNodeEditorProps) => {
   const [focusedKey, setFocusedKey] = useState<number | undefined>();
   const target =
     draft.rows.find((row) => row.key === focusedKey) ?? draft.rows.at(-1);
+  const chipsDisabled = readOnly || draft.validating || !target;
+  /** Writes text at the end of the expression last used, as the chips do */
+  const write = (text: string): void => {
+    if (target) {
+      const separator = /\s$/u.test(target.code) ? '' : ' ';
+      draft.setCode(target.key, `${target.code}${separator}${text}`);
+    }
+  };
   return (
     <div className="flex flex-col gap-2 text-base">
       <span>New columns</span>
@@ -240,27 +248,32 @@ export const CubeExtendEditor = observer((props: CubeNodeEditorProps) => {
       <span>Input columns</span>
       <ul aria-label="Input columns" className="flex flex-wrap gap-1">
         {schema.columns.map((column) => (
-          <li key={column.name}>
+          <li key={column.name} className="flex items-stretch gap-0.5">
             <button
               className="flex items-center gap-1 rounded-sm border border-[var(--color-border-subtle)] px-1 text-sm hover:bg-[var(--color-bg-hover)] disabled:text-[var(--color-text-disabled)]"
               title={`Write ${columnAccessOf(column.name)} at the end of the expression last used (${getExactColumnTypeLabel(column)})`}
-              disabled={readOnly || draft.validating || !target}
-              onClick={() => {
-                if (target) {
-                  const separator = /\s$/u.test(target.code) ? '' : ' ';
-                  draft.setCode(
-                    target.key,
-                    `${target.code}${separator}${columnAccessOf(column.name)}`,
-                  );
-                }
-              }}
+              disabled={chipsDisabled}
+              onClick={() => write(columnAccessOf(column.name))}
             >
               <CubeColumnTypeIcon type={column.type} />
               {column.name}
             </button>
+            {isCubeJsonColumn(column) && (
+              <CubeJsonFieldsToggle
+                fields={draft.jsonFields}
+                column={column}
+                disabled={readOnly}
+              />
+            )}
           </li>
         ))}
       </ul>
+      <CubeJsonFieldsTree
+        fields={draft.jsonFields}
+        disabled={chipsDisabled}
+        onInsert={write}
+        onAddColumn={(name, code) => draft.addColumn(name, code)}
+      />
       <ul className="flex list-disc flex-col gap-1 pl-4 text-sm text-[var(--color-text-secondary)]">
         {[...EXTEND_EDITOR_NOTES, COLUMN_NAME_RULES_HINT].map((note) => (
           <li key={note}>{note}</li>