@finos/legend-cube-builder 0.0.4 → 0.0.6

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

@@ -0,0 +1,210 @@
+/**
+ * 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 { CompressIcon, ExpandIcon } from '@finos/legend-art';
+import type { Schema } from '@finos/legend-cube';
+import { CompilationError, SourceInformation } from '@finos/legend-graph';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import {
+  EXPRESSION_FILTER_EDITOR_NOTES,
+  getExactColumnTypeLabel,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeConditionProblem,
+  CubeExpressionFilterDraft,
+} from '../../stores/editors/CubeExpressionFilterDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnTypeIcon } from './CubeColumnPicker.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` */
+const PURE = 'pure';
+
+/** The error the code editor marks, from the condition's problem located in its code */
+const markerOf = (
+  problem: CubeConditionProblem | undefined,
+): CompilationError | undefined => {
+  const location = problem?.location;
+  if (!problem || !location) {
+    return undefined;
+  }
+  const error = new CompilationError(problem.message);
+  error.sourceInformation = new SourceInformation(
+    location.sourceId,
+    location.startLine,
+    location.startColumn,
+    location.endLine,
+    location.endColumn,
+  );
+  return error;
+};
+
+/**
+ * What the editor says under the code: its problem, but one Cube refused,
+ * which the panel's problems show; that it is checked, or that it waits
+ */
+const CubeConditionStatus = observer(
+  (props: { draft: CubeExpressionFilterDraft }) => {
+    const { draft } = props;
+    const { problem } = draft;
+    if (problem?.refused) {
+      return null;
+    }
+    if (problem) {
+      return (
+        <div className="text-sm text-[var(--color-status-error)]">
+          <div>{problem.message}</div>
+          {problem.hint && (
+            <div className="text-[var(--color-text-secondary)]">
+              {problem.hint}
+            </div>
+          )}
+        </div>
+      );
+    }
+    if (!draft.isValidated) {
+      return (
+        <div className="text-sm text-[var(--color-text-muted)]">
+          Not validated yet
+        </div>
+      );
+    }
+    return draft.isChecked ? (
+      <div className="text-sm text-[var(--color-text-secondary)]">
+        One Boolean of a row: the rows for which it is true are kept
+      </div>
+    ) : null;
+  },
+);
+
+/**
+ * The Filter by Expression editor (PLAN §11.11): the condition's code in a
+ * code editor, Validate (F10), which the engine does, and the input's
+ * columns, which a click writes at the end of the code.
+ */
+export const CubeExpressionFilterEditor = observer(
+  (props: CubeNodeEditorProps) => {
+    const { inputSchemas, readOnly } = props;
+    const draft = guaranteeType(props.draft, CubeExpressionFilterDraft);
+    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">
+          <span className="flex-1">Condition</span>
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)]"
+            aria-label="Expand the condition"
+            title={expanded ? 'Show fewer lines' : 'Show more lines'}
+            onClick={() => setExpanded(!expanded)}
+          >
+            {expanded ? <CompressIcon /> : <ExpandIcon />}
+          </button>
+        </div>
+        <div
+          aria-label="Condition"
+          className="overflow-hidden rounded-sm border border-[var(--color-border-default)]"
+          style={{ height: expanded ? 240 : 96 }}
+        >
+          <CodeEditor
+            inputValue={draft.code}
+            updateInput={(code) => draft.setCode(code)}
+            language={PURE}
+            isReadOnly={disabled}
+            hideMinimap={true}
+            hideGutter={true}
+            hideActionBar={true}
+            error={markerOf(draft.problem)}
+            extraEditorOptions={{
+              lineNumbers: 'off',
+              wordWrap: 'on',
+              scrollBeyondLastLine: false,
+            }}
+          />
+        </div>
+        <CubeConditionStatus draft={draft} />
+        <div className="flex items-center gap-2">
+          <CubeButton
+            primary={!draft.isValidated}
+            title={
+              readOnly
+                ? READ_ONLY_CUBE_TITLE
+                : "Check the condition with the engine, and plan it for this cube's database (F10)"
+            }
+            disabled={disabled}
+            onClick={() => {
+              flowResult(draft.validate()).catch(
+                props.editorState.host.applicationStore.alertUnhandledError,
+              );
+            }}
+          >
+            {draft.validating ? 'Validating…' : 'Validate'}
+          </CubeButton>
+        </div>
+        <span>Input columns</span>
+        <ul aria-label="Input columns" className="flex flex-wrap gap-1">
+          {schema.columns.map((column) => (
+            <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={() => 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>
+          ))}
+        </ul>
+      </div>
+    );
+  },
+);

package/src/components/editors/CubeExtendEditor.tsx

@@ -31,26 +31,26 @@ import { useState } from 'react';
 import {
   COLUMN_NAME_RULES_HINT,
   EXTEND_EDITOR_NOTES,
-  getColumnTypeLabel,
+  getExactColumnTypeLabel,
   READ_ONLY_CUBE_TITLE,
 } from '../../__lib__/LegendCubeLabels.js';
 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 */
-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 (${getColumnTypeLabel(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)}`,
-                  );
-                }
-              }}
+              title={`Write ${columnAccessOf(column.name)} at the end of the expression last used (${getExactColumnTypeLabel(column)})`}
+              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>

package/src/components/editors/CubeFilterEditor.tsx

@@ -21,6 +21,7 @@ import {
   CompositeFilterOperator,
   FILTER_OPERATOR_DESCRIPTIONS,
   type FilterRule,
+  findPatternWildcardOperator,
   getAvailableOperators,
   getFilterValueShape,
   isDateOrTimestampType,
@@ -31,8 +32,10 @@ import {
   NotFilter,
   type Schema,
 } from '@finos/legend-cube';
-import { guaranteeType } from '@finos/legend-shared';
+import { guaranteeType, noop } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
 import {
   DATE_OR_TIMESTAMP_WARNING,
   FILTER_FLOAT_COMPARISON_HINT,
@@ -297,8 +300,17 @@ const CubeFilterGroup = observer(
  * kept, marked, to be fixed. Blank conditions are not stored.
  */
 export const CubeFilterEditor = observer((props: CubeNodeEditorProps) => {
+  const { editorState } = props;
   const draft = guaranteeType(props.draft, CubeFilterDraft);
   const [schema] = props.inputSchemas as [Schema];
+  // a pattern given % or _ is refused on some databases, which the model's
+  // outline tells (PLAN §11.11)
+  const givesWildcard = findPatternWildcardOperator(draft.tree) !== undefined;
+  useEffect(() => {
+    if (givesWildcard) {
+      flowResult(editorState.loadModelOutline()).catch(noop());
+    }
+  }, [editorState, givesWildcard]);
   return (
     <div className="flex flex-col gap-2">
       <CubeFilterGroup