@finos/legend-cube-builder 0.0.3 → 0.0.5

package/src/components/editors/CubeExpressionFilterEditor.tsx

@@ -0,0 +1,193 @@
+/**
+ * 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 { columnAccessOf } from './CubeExtendEditor.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;
+    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}>
+              <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)}`,
+                  );
+                }}
+              >
+                <CubeColumnTypeIcon type={column.type} />
+                {column.name}
+              </button>
+            </li>
+          ))}
+        </ul>
+        <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

@@ -0,0 +1,271 @@
+/**
+ * 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 {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ExpandIcon,
+  CompressIcon,
+  TimesIcon,
+} 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 {
+  COLUMN_NAME_RULES_HINT,
+  EXTEND_EDITOR_NOTES,
+  getExactColumnTypeLabel,
+  READ_ONLY_CUBE_TITLE,
+} from '../../__lib__/LegendCubeLabels.js';
+import {
+  type CubeExtendRow,
+  CubeExtendDraft,
+} from '../../stores/editors/CubeExtendDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeColumnTypeIcon } from './CubeColumnPicker.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;
+  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 a row says under its code: its problem, its type once validated, or that it waits */
+const CubeExtendRowStatus = observer((props: { row: CubeExtendRow }) => {
+  const { row } = props;
+  if (row.problem) {
+    return (
+      <div className="text-sm text-[var(--color-status-error)]">
+        <div>{row.problem.message}</div>
+        {row.problem.hint && (
+          <div className="text-[var(--color-text-secondary)]">
+            {row.problem.hint}
+          </div>
+        )}
+      </div>
+    );
+  }
+  if (row.checked?.code !== row.code) {
+    return (
+      <div className="text-sm text-[var(--color-text-muted)]">
+        Not validated yet
+      </div>
+    );
+  }
+  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`}
+    </div>
+  ) : null;
+});
+
+const CubeExtendRowEditor = observer(
+  (props: {
+    draft: CubeExtendDraft;
+    row: CubeExtendRow;
+    position: number;
+    count: number;
+    readOnly: boolean;
+    onFocus: () => void;
+  }) => {
+    const { draft, row, position, count, readOnly, onFocus } = props;
+    const [expanded, setExpanded] = useState(false);
+    const disabled = readOnly || draft.validating;
+    return (
+      <li className="flex flex-col gap-1 border-b border-[var(--color-border-subtle)] py-1">
+        <div className="flex items-center gap-1">
+          <input
+            className="h-6 min-w-0 flex-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base"
+            aria-label={`Column name ${position}`}
+            value={row.name}
+            disabled={disabled}
+            spellCheck={false}
+            onFocus={onFocus}
+            onChange={(event) => draft.setName(row.key, event.target.value)}
+          />
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Move column ${position} up`}
+            title="Move up: a column can use the ones above it"
+            disabled={disabled || position === 1}
+            onClick={() => draft.moveRow(row.key, -1)}
+          >
+            <ArrowUpIcon />
+          </button>
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Move column ${position} down`}
+            title="Move down"
+            disabled={disabled || position === count}
+            onClick={() => draft.moveRow(row.key, 1)}
+          >
+            <ArrowDownIcon />
+          </button>
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Expand expression ${position}`}
+            title={expanded ? 'Show fewer lines' : 'Show more lines'}
+            onClick={() => setExpanded(!expanded)}
+          >
+            {expanded ? <CompressIcon /> : <ExpandIcon />}
+          </button>
+          <button
+            className="flex h-6 w-6 items-center justify-center text-[var(--color-text-secondary)] disabled:text-[var(--color-text-disabled)]"
+            aria-label={`Remove column ${position}`}
+            title="Remove this column"
+            disabled={disabled}
+            onClick={() => draft.removeRow(row.key)}
+          >
+            <TimesIcon />
+          </button>
+        </div>
+        <div
+          aria-label={`Expression ${position}`}
+          className="overflow-hidden rounded-sm border border-[var(--color-border-default)]"
+          style={{ height: expanded ? 240 : 72 }}
+          onFocus={onFocus}
+        >
+          <CodeEditor
+            inputValue={row.code}
+            updateInput={(code) => draft.setCode(row.key, code)}
+            language={PURE}
+            isReadOnly={disabled}
+            hideMinimap={true}
+            hideGutter={true}
+            hideActionBar={true}
+            error={markerOf(row)}
+            extraEditorOptions={{
+              lineNumbers: 'off',
+              wordWrap: 'on',
+              scrollBeyondLastLine: false,
+            }}
+          />
+        </div>
+        <CubeExtendRowStatus row={row} />
+      </li>
+    );
+  },
+);
+
+/**
+ * The Extend editor (spec §17.6, PLAN §11.7): a row per new column, its name
+ * and its expression in a code editor, Validate (F10), which the engine does,
+ * and the input's columns, which a click writes into the row last used.
+ */
+export const CubeExtendEditor = observer((props: CubeNodeEditorProps) => {
+  const { inputSchemas, readOnly } = props;
+  const draft = guaranteeType(props.draft, CubeExtendDraft);
+  const [schema] = inputSchemas as [Schema];
+  const [focusedKey, setFocusedKey] = useState<number | undefined>();
+  const target =
+    draft.rows.find((row) => row.key === focusedKey) ?? draft.rows.at(-1);
+  return (
+    <div className="flex flex-col gap-2 text-base">
+      <span>New columns</span>
+      <ul aria-label="New columns">
+        {draft.rows.map((row, index) => (
+          <CubeExtendRowEditor
+            key={row.key}
+            draft={draft}
+            row={row}
+            position={index + 1}
+            count={draft.rows.length}
+            readOnly={readOnly}
+            onFocus={() => setFocusedKey(row.key)}
+          />
+        ))}
+      </ul>
+      <div className="flex items-center gap-2">
+        <CubeButton
+          title={readOnly ? READ_ONLY_CUBE_TITLE : 'Add a new column'}
+          disabled={readOnly || draft.validating}
+          onClick={() => draft.addRow()}
+        >
+          Add column
+        </CubeButton>
+        <CubeButton
+          primary={!draft.isValidated}
+          title="Check the expressions with the engine, type them, and plan them for this cube's database (F10)"
+          disabled={readOnly || draft.validating}
+          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}>
+            <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)}`,
+                  );
+                }
+              }}
+            >
+              <CubeColumnTypeIcon type={column.type} />
+              {column.name}
+            </button>
+          </li>
+        ))}
+      </ul>
+      <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>
+        ))}
+      </ul>
+    </div>
+  );
+});

package/src/components/editors/CubeFilterEditor.tsx

@@ -21,8 +21,10 @@ import {
   CompositeFilterOperator,
   FILTER_OPERATOR_DESCRIPTIONS,
   type FilterRule,
+  findPatternWildcardOperator,
   getAvailableOperators,
   getFilterValueShape,
+  isDateOrTimestampType,
   isExactFloatComparison,
   isFilterOperator,
   MESSAGE_FILTER_UNSUPPORTED,
@@ -30,9 +32,12 @@ 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,
   FILTER_NULL_NOTE,
 } from '../../__lib__/LegendCubeLabels.js';
@@ -149,6 +154,11 @@ const CubeFilterCondition = observer(
             {FILTER_FLOAT_COMPARISON_HINT}
           </div>
         )}
+        {type && shape !== 'none' && isDateOrTimestampType(type) && (
+          <div className="text-sm text-[var(--color-status-warn)]">
+            {DATE_OR_TIMESTAMP_WARNING}
+          </div>
+        )}
       </li>
     );
   },
@@ -290,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

package/src/components/editors/CubeFunctionSourceEditor.tsx

@@ -0,0 +1,140 @@
+/**
+ * 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 {
+  FunctionSource,
+  getFunctionParameterValueError,
+} from '@finos/legend-cube';
+import { PanelLoadingIndicator } from '@finos/legend-art';
+import { guaranteeType } from '@finos/legend-shared';
+import { flowResult } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { useId } from 'react';
+import { CUBE_PENDING_LABEL } from '../../__lib__/LegendCubeLabels.js';
+import { CubeFunctionDraft } from '../../stores/editors/CubeFunctionDraft.js';
+import { CubeButton } from '../CubeButton.js';
+import { CubeSchemaColumnsTable } from '../CubeSchemaColumnsTable.js';
+import type { CubeNodeEditorProps } from './CubeNodeEditorRegistry.js';
+
+const INPUT_CLASS =
+  'h-7 min-w-0 flex-1 rounded-sm border border-[var(--color-border-default)] bg-[var(--color-bg-input)] px-1 text-base text-[var(--color-text-primary)] disabled:text-[var(--color-text-secondary)]';
+
+const CubeFunctionValueInput = observer(
+  (props: { draft: CubeFunctionDraft; index: number; readOnly: boolean }) => {
+    const { draft, index, readOnly } = props;
+    const id = useId();
+    const parameter = draft.original.parameters[index];
+    if (!parameter) {
+      return null;
+    }
+    const error = getFunctionParameterValueError(
+      parameter,
+      draft.values[index],
+    );
+    return (
+      <div className="flex flex-col gap-0.5">
+        <div className="flex items-center gap-2">
+          <label
+            className="w-32 shrink-0 truncate text-base"
+            htmlFor={id}
+            title={parameter.name}
+          >
+            {parameter.name}
+          </label>
+          <input
+            id={id}
+            className={INPUT_CLASS}
+            placeholder={`${parameter.type.displayName}${parameter.optional ? ', optional' : ''}`}
+            disabled={readOnly}
+            aria-invalid={error !== undefined}
+            value={draft.valueTexts[index] ?? ''}
+            onChange={(event) => draft.setValueText(index, event.target.value)}
+          />
+        </div>
+        {error !== undefined && (
+          <span className="pl-[8.5rem] text-sm text-[var(--color-status-error)]">
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+/**
+ * A function source (PLAN §6.5): the function, the runtime the cube runs
+ * on, a value for each parameter, which Apply stores, its columns, and
+ * Refresh, which types it again
+ */
+export const CubeFunctionSourceEditor = observer(
+  (props: CubeNodeEditorProps) => {
+    const { editorState, readOnly } = props;
+    const draft = guaranteeType(props.draft, CubeFunctionDraft);
+    const source = guaranteeType(draft.original, FunctionSource);
+    const { resolution } = source;
+    const refreshing = editorState.isPendingSource(source);
+    return (
+      <div className="relative flex flex-col gap-2">
+        <dl className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-base">
+          <dt className="text-[var(--color-text-secondary)]">Function</dt>
+          <dd className="min-w-0 break-all" title={source.signature}>
+            {source.function}
+          </dd>
+          <dt className="text-[var(--color-text-secondary)]">Runtime</dt>
+          <dd className="min-w-0 break-all">
+            {editorState.document.context?.runtime ?? ''}
+          </dd>
+        </dl>
+        {source.parameters.map((parameter, index) => (
+          <CubeFunctionValueInput
+            key={parameter.name}
+            draft={draft}
+            index={index}
+            readOnly={readOnly}
+          />
+        ))}
+        <div className="flex items-center gap-2">
+          <CubeButton
+            title="Read the function's columns again"
+            disabled={refreshing}
+            onClick={() => {
+              flowResult(editorState.refreshSource(source.id)).catch(
+                editorState.host.applicationStore.alertUnhandledError,
+              );
+            }}
+          >
+            Refresh
+          </CubeButton>
+          {refreshing && (
+            <span className="text-base text-[var(--color-text-secondary)]">
+              {CUBE_PENDING_LABEL.REFRESHING_SOURCE}
+            </span>
+          )}
+        </div>
+        <PanelLoadingIndicator isLoading={refreshing} />
+        {resolution.kind === 'resolved' ? (
+          <CubeSchemaColumnsTable schema={resolution.schema} />
+        ) : (
+          <div className="whitespace-pre-wrap text-base text-[var(--color-text-secondary)]">
+            {resolution.kind === 'failed'
+              ? resolution.message
+              : 'The function has not been typed yet.'}
+          </div>
+        )}
+      </div>
+    );
+  },
+);