@finos/legend-application-repl 0.0.53 → 0.0.54

package/src/components/dataCube/editor/DataCubeEditorColumnsPanel.tsx

@@ -14,13 +14,64 @@
  * limitations under the License.
  */
 
-import { DataCubeIcon } from '@finos/legend-art';
+import { cn, DataCubeIcon } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { DataCubeEditorColumnsSelector } from './DataCubeEditorColumnsSelector.js';
-import { FormCheckbox } from '../../repl/Form.js';
-import { DataCubeEditorColumnsSelectorHiddenColumnsVisibility } from '../../../stores/dataCube/editor/DataCubeEditorColumnsSelectorState.js';
 import { useEffect } from 'react';
 import type { DataCubeState } from '../../../stores/dataCube/DataCubeState.js';
+import { FormCheckbox } from '../../repl/Form.js';
+import type {
+  DataCubeEditorColumnsSelectorColumnState,
+  DataCubeEditorColumnsSelectorState,
+} from '../../../stores/dataCube/editor/DataCubeEditorColumnsSelectorState.js';
+
+const ColumnsSelectorLabelRenderer = observer(
+  (props: {
+    selector: DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorColumnState>;
+    column: DataCubeEditorColumnsSelectorColumnState;
+  }) => {
+    const { selector, column } = props;
+    const showHiddenIndicator =
+      !selector.editor.columns.groupExtendColumns.find(
+        (col) => col.name === column.name,
+      ) &&
+      selector.editor.columnProperties.getColumnConfiguration(column.name)
+        ?.hideFromView;
+
+    return (
+      <>
+        <div
+          className={cn(
+            'items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-2',
+            {
+              'text-neutral-400': showHiddenIndicator,
+            },
+          )}
+        >
+          {column.name}
+        </div>
+        {Boolean(
+          selector.editor.columns.leafExtendColumns.find(
+            (col) => col.name === column.name,
+          ),
+        ) && (
+          <div className="ml-1.5 mr-0.5 flex h-3.5 flex-shrink-0 items-center rounded-sm border border-neutral-300 bg-neutral-100 px-1 text-xs font-medium uppercase text-neutral-600">
+            {`Extended (Leaf Level)`}
+          </div>
+        )}
+        {Boolean(
+          selector.editor.columns.groupExtendColumns.find(
+            (col) => col.name === column.name,
+          ),
+        ) && (
+          <div className="ml-1.5 mr-0.5 flex h-3.5 flex-shrink-0 items-center rounded-sm border border-neutral-300 bg-neutral-100 px-1 text-xs font-medium uppercase text-neutral-600">
+            {`Extended (Group Level)`}
+          </div>
+        )}
+      </>
+    );
+  },
+);
 
 export const DataCubeEditorColumnsPanel = observer(
   (props: { dataCube: DataCubeState }) => {
@@ -43,16 +94,10 @@ export const DataCubeEditorColumnsPanel = observer(
           <div className="flex h-full items-center pr-2">
             <FormCheckbox
               label="Show hidden columns?"
-              checked={
-                panel.selector.hiddenColumnsVisibility !==
-                DataCubeEditorColumnsSelectorHiddenColumnsVisibility.HIDDEN
-              }
+              checked={panel.selector.showHiddenColumns}
               onChange={() =>
-                panel.selector.setHiddenColumnsVisibility(
-                  panel.selector.hiddenColumnsVisibility !==
-                    DataCubeEditorColumnsSelectorHiddenColumnsVisibility.HIDDEN
-                    ? DataCubeEditorColumnsSelectorHiddenColumnsVisibility.HIDDEN
-                    : DataCubeEditorColumnsSelectorHiddenColumnsVisibility.VISIBLE_WITH_WARNING,
+                panel.selector.setShowHiddenColumns(
+                  !panel.selector.showHiddenColumns,
                 )
               }
             />
@@ -69,6 +114,7 @@ export const DataCubeEditorColumnsPanel = observer(
                 No columns selected
               </div>
             )}
+            columnLabelRenderer={(p) => <ColumnsSelectorLabelRenderer {...p} />}
           />
         </div>
       </div>

package/src/components/dataCube/editor/DataCubeEditorColumnsSelector.tsx

@@ -15,7 +15,7 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { cn, DataCubeIcon } from '@finos/legend-art';
+import { DataCubeIcon } from '@finos/legend-art';
 import type {
   ColDef,
   ColDefField,
@@ -33,7 +33,6 @@ import {
 } from '@ag-grid-community/react';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import {
-  DataCubeEditorColumnsSelectorHiddenColumnsVisibility,
   type DataCubeEditorColumnsSelectorColumnState,
   type DataCubeEditorColumnsSelectorState,
 } from '../../../stores/dataCube/editor/DataCubeEditorColumnsSelectorState.js';
@@ -148,15 +147,26 @@ export const DataCubeEditorColumnsSelector = observer(
     T extends DataCubeEditorColumnsSelectorColumnState,
   >(props: {
     selector: DataCubeEditorColumnsSelectorState<T>;
-    extraColumnComponent?:
-      | React.FC<{
+    columnLabelRenderer?:
+      | ((p: {
           selector: DataCubeEditorColumnsSelectorState<T>;
           column: T;
-        }>
+        }) => React.ReactNode)
+      | undefined;
+    columnActionRenderer?:
+      | ((p: {
+          selector: DataCubeEditorColumnsSelectorState<T>;
+          column: T;
+        }) => React.ReactNode)
       | undefined;
     noColumnsSelectedRenderer?: (() => React.ReactNode) | undefined;
   }) {
-    const { selector, extraColumnComponent, noColumnsSelectedRenderer } = props;
+    const {
+      selector,
+      columnLabelRenderer,
+      columnActionRenderer,
+      noColumnsSelectedRenderer,
+    } = props;
     const [selectedAvailableColumns, setSelectedAvailableColumns] = useState<
       T[]
     >([]);
@@ -342,19 +352,11 @@ export const DataCubeEditorColumnsSelector = observer(
                       if (!data) {
                         return null;
                       }
-                      const showHiddenIndicator =
-                        selector.hiddenColumnsVisibility ===
-                          DataCubeEditorColumnsSelectorHiddenColumnsVisibility.VISIBLE_WITH_WARNING &&
-                        selector.editor.columnProperties.columns.find(
-                          (col) => col.name === data.name,
-                        )?.hideFromView;
 
                       return (
                         <div
-                          className={cn('flex h-full w-full cursor-pointer', {
-                            'text-neutral-400': showHiddenIndicator,
-                          })}
-                          title={`[${data.name}]${showHiddenIndicator ? ' - Hidden' : ''}\nDouble-click to add column`}
+                          className="flex h-full w-full cursor-pointer items-center"
+                          title={`[${data.name}]\nDouble-click to add column`}
                           onDoubleClick={() => {
                             selector.setSelectedColumns([
                               ...selector.selectedColumns,
@@ -363,11 +365,16 @@ export const DataCubeEditorColumnsSelector = observer(
                             params.api.clearFocusedCell();
                           }}
                         >
-                          <div className="h-full flex-1 items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-2">
-                            {data.name}
-                          </div>
+                          {columnLabelRenderer?.({
+                            selector,
+                            column: data,
+                          }) ?? (
+                            <div className="h-full flex-1 items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-2">
+                              {data.name}
+                            </div>
+                          )}
                           <div className="flex h-full">
-                            {extraColumnComponent?.({
+                            {columnActionRenderer?.({
                               selector,
                               column: data,
                             }) ?? null}
@@ -536,19 +543,11 @@ export const DataCubeEditorColumnsSelector = observer(
                       if (!data) {
                         return null;
                       }
-                      const showHiddenIndicator =
-                        selector.hiddenColumnsVisibility ===
-                          DataCubeEditorColumnsSelectorHiddenColumnsVisibility.VISIBLE_WITH_WARNING &&
-                        selector.editor.columnProperties.columns.find(
-                          (col) => col.name === data.name,
-                        )?.hideFromView;
 
                       return (
                         <div
-                          className={cn('flex h-full w-full cursor-pointer', {
-                            'text-neutral-400': showHiddenIndicator,
-                          })}
-                          title={`[${data.name}]${showHiddenIndicator ? ' - Hidden' : ''}\nDouble-click to remove column`}
+                          className="flex h-full w-full cursor-pointer items-center"
+                          title={`[${data.name}]\nDouble-click to add column`}
                           onDoubleClick={() => {
                             selector.setSelectedColumns(
                               selector.selectedColumns.filter(
@@ -558,11 +557,16 @@ export const DataCubeEditorColumnsSelector = observer(
                             params.api.clearFocusedCell();
                           }}
                         >
-                          <div className="h-full flex-1 items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-2">
-                            {data.name}
-                          </div>
+                          {columnLabelRenderer?.({
+                            selector,
+                            column: data,
+                          }) ?? (
+                            <div className="h-full flex-1 items-center overflow-hidden overflow-ellipsis whitespace-nowrap pl-2">
+                              {data.name}
+                            </div>
+                          )}
                           <div className="flex h-full">
-                            {extraColumnComponent?.({
+                            {columnActionRenderer?.({
                               selector,
                               column: data,
                             }) ?? null}

package/src/components/dataCube/editor/DataCubeEditorSortsPanel.tsx

@@ -138,7 +138,7 @@ export const DataCubeEditorSortsPanel = observer(
         <div className="flex h-[calc(100%_-_24px)] w-full">
           <DataCubeEditorColumnsSelector
             selector={panel.selector}
-            extraColumnComponent={(p) => <SortDirectionDropdown {...p} />}
+            columnActionRenderer={(p) => <SortDirectionDropdown {...p} />}
           />
         </div>
       </div>

package/src/components/dataCube/extend/DataCubeColumnEditor.tsx

@@ -0,0 +1,362 @@
+/**
+ * Copyright (c) 2020-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 { observer } from 'mobx-react-lite';
+import { type DataCubeNewColumnState } from '../../../stores/dataCube/extend/DataCubeColumnEditorState.js';
+import {
+  editor as monacoEditorAPI,
+  languages as monacoLanguagesAPI,
+  type IDisposable,
+} from 'monaco-editor';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
+  getBaseCodeEditorOptions,
+  PURE_CODE_EDITOR_WORD_SEPARATORS,
+} from '@finos/legend-lego/code-editor';
+import {
+  getCodeSuggestions,
+  MONACO_EDITOR_OVERFLOW_WIDGETS_ROOT_ID,
+} from '../../repl/PureCodeEditor.js';
+import {
+  FormDocumentation,
+  FormDropdownMenu,
+  FormDropdownMenuItem,
+  FormDropdownMenuTrigger,
+  FormTextInput,
+} from '../../repl/Form.js';
+import { debounce } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
+import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
+import {
+  DataCubeColumnDataType,
+  DataCubeColumnKind,
+} from '../../../stores/dataCube/core/DataCubeQueryEngine.js';
+import { DocumentationKey } from '../../../application/LegendREPLDocumentation.js';
+
+enum DataCubeExtendedColumnKind {
+  LEAF_LEVEL_MEASURE = 'Leaf Level Measure',
+  LEAF_LEVEL_DIMENSION = 'Leaf Level Dimension',
+  GROUP_LEVEL = 'Group Level',
+}
+
+export const DataCubeColumnCreator = observer(
+  (props: { state: DataCubeNewColumnState }) => {
+    const { state } = props;
+    const dataCube = state.dataCube;
+    const application = useApplicationStore();
+
+    const nameInputRef = useRef<HTMLInputElement>(null);
+    const currentColumnKind = state.isGroupLevel
+      ? DataCubeExtendedColumnKind.GROUP_LEVEL
+      : state.columnKind === DataCubeColumnKind.MEASURE
+        ? DataCubeExtendedColumnKind.LEAF_LEVEL_MEASURE
+        : DataCubeExtendedColumnKind.LEAF_LEVEL_DIMENSION;
+    const [
+      openKindDropdown,
+      closeKindDropdown,
+      kindDropdownProps,
+      kindDropPropsOpen,
+    ] = useDropdownMenu();
+    const [
+      openTypeDropdown,
+      closeTypeDropdown,
+      typeDropdownProps,
+      typeDropPropsOpen,
+    ] = useDropdownMenu();
+
+    const suggestionsProvider = useRef<IDisposable | undefined>(undefined);
+    const editorRef = useRef<HTMLDivElement>(null);
+    const [editor, setEditor] = useState<
+      monacoEditorAPI.IStandaloneCodeEditor | undefined
+    >();
+    const debouncedCheckReturnType = useMemo(
+      () =>
+        debounce((): void => {
+          state.getReturnType().catch(application.alertUnhandledError);
+        }, 500),
+      [state, application],
+    );
+
+    useEffect(() => {
+      if (!editor && editorRef.current) {
+        const element = editorRef.current;
+        const newEditor = monacoEditorAPI.create(element, {
+          ...getBaseCodeEditorOptions(),
+          fontSize: 12,
+          language: CODE_EDITOR_LANGUAGE.PURE,
+          theme: CODE_EDITOR_THEME.GITHUB_LIGHT,
+          wordSeparators: PURE_CODE_EDITOR_WORD_SEPARATORS,
+          // Make sure the widgets (tooltips, menus) are not clipped by the container bounds
+          // and fix the problem where widgets are rendered with position=fixed not working well with parent
+          // containers (i.e. the draggable window) which has been transformed
+          // See https://dev.to/salilnaik/the-uncanny-relationship-between-position-fixed-and-transform-property-32f6
+          // See https://github.com/microsoft/monaco-editor/issues/2793#issuecomment-999337740
+          fixedOverflowWidgets: true,
+          overflowWidgetsDomNode: document.getElementById(
+            MONACO_EDITOR_OVERFLOW_WIDGETS_ROOT_ID,
+          )!,
+        });
+
+        // NOTE: since engine suggestions are computed based on the current text content
+        // we put it in this block to simplify the flow and really to "bend" monaco-editor
+        // suggestion provider to our needs. But we also need to make sure this suggestion
+        // provider is scoped to the current editor only by checking the editor model
+        suggestionsProvider.current?.dispose();
+        suggestionsProvider.current =
+          monacoLanguagesAPI.registerCompletionItemProvider(
+            CODE_EDITOR_LANGUAGE.PURE,
+            {
+              // NOTE: this is a hack to fetch suggestions from engine for every keystroke
+              triggerCharacters: [...PURE_CODE_EDITOR_WORD_SEPARATORS, '$'],
+              provideCompletionItems: async (model, position, context) => {
+                let suggestions: monacoLanguagesAPI.CompletionItem[] = [];
+
+                if (model.uri === state.editorModelUri) {
+                  suggestions = suggestions.concat(
+                    await getCodeSuggestions(
+                      position,
+                      model,
+                      state.codePrefix,
+                      dataCube,
+                      () => state.buildExtendBaseQuery(),
+                    ),
+                  );
+                }
+
+                return { suggestions };
+              },
+            },
+          );
+
+        newEditor.setModel(state.editorModel);
+        newEditor.onDidChangeModelContent(() => {
+          const currentVal = newEditor.getValue();
+          if (currentVal !== state.code) {
+            state.code = currentVal;
+            // clear error on content change/typing
+            state.clearError();
+            state.setReturnType(undefined);
+            debouncedCheckReturnType.cancel();
+            debouncedCheckReturnType();
+          }
+        });
+        // focus on the editor initially and set the cursor to the end
+        // since we're trying to create a new column
+        newEditor.focus();
+        newEditor.setPosition({
+          lineNumber: 1,
+          column: state.code.length + 1,
+        });
+        state.setEditor(newEditor);
+        setEditor(newEditor);
+      }
+    }, [state, editor, debouncedCheckReturnType, dataCube]);
+
+    // clean up
+    useEffect(
+      () => (): void => {
+        if (editor) {
+          editor.dispose();
+
+          suggestionsProvider.current?.dispose();
+        }
+      },
+      [editor],
+    );
+
+    useEffect(() => {
+      state.editor?.updateOptions({
+        readOnly: state.finalizationState.isInProgress,
+      });
+    }, [state, state.finalizationState.isInProgress]);
+
+    return (
+      <>
+        <div className="relative h-[calc(100%_-_40px)] w-full px-2 pt-2">
+          <div className="h-full w-full overflow-auto border border-neutral-300 bg-white">
+            <div className="h-full w-full select-none p-0">
+              <div className="h-24 w-full p-2">
+                <div className="mt-1 flex h-5 w-full items-center">
+                  <div className="flex h-full w-24 flex-shrink-0 items-center text-sm">
+                    Column Name:
+                  </div>
+                  <FormTextInput
+                    className="w-32"
+                    ref={nameInputRef}
+                    disabled={state.finalizationState.isInProgress}
+                    value={state.name}
+                    onChange={(event) => {
+                      state.setName(event.target.value.trim());
+                    }}
+                  />
+                  <div className="ml-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center text-lg">
+                    {state.isNameValid ? (
+                      <DataCubeIcon.CircleChecked className="text-green-500" />
+                    ) : (
+                      <DataCubeIcon.CircledFailed className="text-red-500" />
+                    )}
+                  </div>
+                </div>
+                <div className="mt-2 flex h-5 w-full items-center">
+                  <div className="flex h-full w-24 flex-shrink-0 items-center text-sm">
+                    Column Kind:
+                    <FormDocumentation
+                      className="ml-1"
+                      documentationKey={
+                        DocumentationKey.DATA_CUBE_EXTENDED_COLUMN_LEVELS
+                      }
+                    />
+                  </div>
+                  <FormDropdownMenuTrigger
+                    className="w-32"
+                    onClick={openKindDropdown}
+                    open={kindDropPropsOpen}
+                    disabled={state.finalizationState.isInProgress}
+                  >
+                    {currentColumnKind}
+                  </FormDropdownMenuTrigger>
+                  <FormDropdownMenu className="w-32" {...kindDropdownProps}>
+                    {[
+                      DataCubeExtendedColumnKind.LEAF_LEVEL_MEASURE,
+                      DataCubeExtendedColumnKind.LEAF_LEVEL_DIMENSION,
+                      DataCubeExtendedColumnKind.GROUP_LEVEL,
+                    ].map((columnKind) => (
+                      <FormDropdownMenuItem
+                        key={columnKind}
+                        onClick={() => {
+                          switch (columnKind) {
+                            case DataCubeExtendedColumnKind.LEAF_LEVEL_MEASURE: {
+                              state.setColumnKind(
+                                false,
+                                DataCubeColumnKind.MEASURE,
+                              );
+                              break;
+                            }
+                            case DataCubeExtendedColumnKind.LEAF_LEVEL_DIMENSION: {
+                              state.setColumnKind(
+                                false,
+                                DataCubeColumnKind.DIMENSION,
+                              );
+                              break;
+                            }
+                            case DataCubeExtendedColumnKind.GROUP_LEVEL: {
+                              state.setColumnKind(true, undefined);
+                              break;
+                            }
+                            default:
+                              return;
+                          }
+                          state.clearError();
+                          state.setReturnType(undefined);
+                          debouncedCheckReturnType.cancel();
+                          debouncedCheckReturnType();
+                          closeKindDropdown();
+                        }}
+                        autoFocus={columnKind === currentColumnKind}
+                      >
+                        {columnKind}
+                      </FormDropdownMenuItem>
+                    ))}
+                  </FormDropdownMenu>
+                </div>
+                <div className="mt-2 flex h-5 w-full items-center">
+                  <div className="flex h-full w-24 flex-shrink-0 items-center text-sm">
+                    Value Type:
+                  </div>
+                  <FormDropdownMenuTrigger
+                    className="w-32"
+                    onClick={openTypeDropdown}
+                    open={typeDropPropsOpen}
+                    disabled={state.finalizationState.isInProgress}
+                  >
+                    {state.expectedType}
+                  </FormDropdownMenuTrigger>
+                  <div className="ml-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center text-lg">
+                    {state.validationState.isInProgress ? (
+                      <DataCubeIcon.Loader className="animate-spin stroke-2 text-neutral-400" />
+                    ) : state.returnType ? (
+                      state.isTypeValid ? (
+                        <DataCubeIcon.CircleChecked className="text-green-500" />
+                      ) : (
+                        <DataCubeIcon.CircledFailed className="text-red-500" />
+                      )
+                    ) : null}
+                  </div>
+                  <FormDropdownMenu className="w-32" {...typeDropdownProps}>
+                    {[
+                      DataCubeColumnDataType.TEXT,
+                      DataCubeColumnDataType.NUMBER,
+                      DataCubeColumnDataType.DATE,
+                    ].map((dataType) => (
+                      <FormDropdownMenuItem
+                        key={dataType}
+                        onClick={() => {
+                          state.setExpectedType(dataType);
+                          closeTypeDropdown();
+                        }}
+                        autoFocus={dataType === state.expectedType}
+                      >
+                        {dataType}
+                      </FormDropdownMenuItem>
+                    ))}
+                  </FormDropdownMenu>
+                </div>
+              </div>
+              <div className="h-[calc(100%_-_96px)] w-full p-2 pt-1">
+                <div
+                  className={cn(
+                    'relative h-full w-full border border-neutral-200',
+                    {
+                      'border-red-500': Boolean(state.codeError),
+                    },
+                  )}
+                >
+                  <div
+                    className="absolute left-0 top-0 h-full w-full overflow-hidden"
+                    ref={editorRef}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex h-10 items-center justify-end px-2">
+          <button
+            className="h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95 disabled:cursor-not-allowed disabled:border-neutral-300 disabled:text-neutral-400 disabled:hover:brightness-100"
+            disabled={
+              !state.isNameValid ||
+              !state.isTypeValid ||
+              !state.validationState.hasCompleted
+            }
+            onClick={() => {
+              state.applyChanges().catch(application.alertUnhandledError);
+            }}
+          >
+            OK
+          </button>
+          <button
+            className="ml-2 h-6 w-20 border border-neutral-400 bg-neutral-300 px-2 hover:brightness-95"
+            onClick={() => state.close()}
+          >
+            Cancel
+          </button>
+        </div>
+      </>
+    );
+  },
+);