@finos/legend-data-cube 0.1.12 → 0.1.13

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

@@ -19,22 +19,6 @@ import {
   DataCubeExistingColumnEditorState,
   type DataCubeColumnBaseEditorState,
 } from '../../../stores/view/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_THEME,
-  PURE_CODE_EDITOR_WORD_SEPARATORS,
-  CODE_EDITOR_LANGUAGE,
-  getBaseCodeEditorOptions,
-} from '@finos/legend-code-editor';
-import {
-  getCodeSuggestions,
-  MONACO_EDITOR_OVERFLOW_WIDGETS_ROOT_ID,
-} from '../../core/DataCubePureCodeEditorUtils.js';
 import {
   FormButton,
   FormDocumentation,
@@ -43,14 +27,16 @@ import {
   FormDropdownMenuTrigger,
   FormTextInput,
 } from '../../core/DataCubeFormUtils.js';
-import { debounce, isNonNullable } from '@finos/legend-shared';
-import { cn, DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
+import { DataCubeIcon, useDropdownMenu } from '@finos/legend-art';
 import {
   DataCubeColumnDataType,
   DataCubeColumnKind,
 } from '../../../stores/core/DataCubeQueryEngine.js';
 import { DataCubeDocumentationKey } from '../../../__lib__/DataCubeDocumentation.js';
 import { useDataCube } from '../../DataCubeProvider.js';
+import { useMemo, useRef } from 'react';
+import { debounce } from '@finos/legend-shared';
+import { DataCubeCodeEditor } from './DataCubeCodeEditor.js';
 
 enum DataCubeExtendedColumnKind {
   LEAF_LEVEL_MEASURE = 'Leaf Level Measure',
@@ -84,11 +70,6 @@ export const DataCubeColumnCreator = observer(
       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 => {
@@ -99,103 +80,6 @@ export const DataCubeColumnCreator = observer(
       [state, dataCube],
     );
 
-    useEffect(() => {
-      if (!editor && editorRef.current) {
-        const element = editorRef.current;
-        const widgetRoot = document.getElementById(
-          MONACO_EDITOR_OVERFLOW_WIDGETS_ROOT_ID,
-        );
-        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,
-          ...(isNonNullable(widgetRoot)
-            ? { overflowWidgetsDomNode: widgetRoot }
-            : {}),
-        });
-
-        // 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,
-                      view.engine,
-                      view.source,
-                      () => 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, view]);
-
-    // 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="h-[calc(100%_-_40px)] w-full px-2 pt-2">
@@ -329,19 +213,7 @@ export const DataCubeColumnCreator = observer(
                 </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>
+                <DataCubeCodeEditor state={state} />
               </div>
             </div>
           </div>

package/src/index.tsx

@@ -45,8 +45,11 @@ export {
 export * from './stores/services/DataCubeTaskService.js';
 export * from './stores/services/DataCubeLogService.js';
 export * from './stores/services/DataCubeAlertService.js';
+export * from './components/view/extend/DataCubeCodeEditor.js';
+export * from './components/view/extend/DataCubeCodeEditorState.js';
 export * from './components/core/DataCubeAlert.js';
 export * from './components/core/DataCubeLayout.js';
+export { INTERNAL__MonacoEditorWidgetsRoot } from './components/core/DataCubePureCodeEditorUtils.js';
 
 export { useDataCube } from './components/DataCubeProvider.js';
 export { type DataCubeAPI } from './stores/DataCubeAPI.js';

package/src/stores/core/DataCubeEngine.tsx

@@ -253,7 +253,7 @@ export abstract class DataCubeEngine {
   abstract getQueryTypeahead(
     code: string,
     baseQuery: V1_Lambda,
-    source: DataCubeSource,
+    context: DataCubeSource | PlainObject,
   ): Promise<CompletionItem[]>;
 
   abstract getQueryRelationReturnType(

package/src/stores/core/model/AdhocQueryDataCubeSource.ts

@@ -25,6 +25,7 @@ import type { V1_PureModelContext } from '@finos/legend-graph';
 
 export class AdhocQueryDataCubeSource extends DataCubeSource {
   runtime!: string;
+  mapping?: string;
   model!: PlainObject<V1_PureModelContext>;
 }
 
@@ -40,6 +41,7 @@ export const ADHOC_FUNCTION_DATA_CUBE_SOURCE_TYPE = 'userDefinedFunction';
 export class RawAdhocQueryDataCubeSource {
   query!: string;
   runtime!: string;
+  mapping?: string;
   model!: PlainObject<V1_PureModelContext>;
 
   static readonly serialization = new SerializationFactory(
@@ -48,6 +50,7 @@ export class RawAdhocQueryDataCubeSource {
       model: raw(),
       query: primitive(),
       runtime: primitive(),
+      mapping: optional(primitive()),
     }),
   );
 }

package/src/stores/view/extend/DataCubeColumnEditorState.tsx

@@ -35,7 +35,6 @@ import {
   isPrimitiveType,
 } from '../../core/DataCubeQueryEngine.js';
 import {
-  clearMarkers,
   CODE_EDITOR_LANGUAGE,
   setErrorMarkers,
 } from '@finos/legend-code-editor';
@@ -49,9 +48,11 @@ import type { DataCubeColumnConfiguration } from '../../core/model/DataCubeConfi
 import type { DataCubeSnapshotExtendedColumn } from '../../core/DataCubeSnapshot.js';
 import { _lambda } from '../../core/DataCubeQueryBuilderUtils.js';
 import { _findCol } from '../../core/model/DataCubeColumn.js';
+import { DataCubeCodeEditorState } from '../../../components/view/extend/DataCubeCodeEditorState.js';
+import type { DataCubeSource } from '../../core/model/DataCubeSource.js';
 
-export abstract class DataCubeColumnBaseEditorState {
-  protected readonly uuid = uuid();
+export abstract class DataCubeColumnBaseEditorState extends DataCubeCodeEditorState {
+  protected override readonly uuid = uuid();
   protected readonly _manager: DataCubeExtendManagerState;
   readonly view: DataCubeViewState;
 
@@ -60,22 +61,16 @@ export abstract class DataCubeColumnBaseEditorState {
   private readonly _name = `col_${this.uuid.replaceAll('-', '_')}`;
   readonly display: DisplayState;
   readonly validationState = ActionState.create();
-  readonly finalizationState = ActionState.create();
 
   name: string;
   expectedType: string;
   isGroupLevel: boolean;
   columnKind?: DataCubeColumnKind | undefined;
 
-  code = '';
-  codePrefix: string;
   codeSuffix: string;
 
-  editor?: monacoEditorAPI.IStandaloneCodeEditor | undefined;
-  readonly editorModel: monacoEditorAPI.ITextModel;
-  readonly editorModelUri: Uri;
-  codeError?: EngineError | undefined;
-  returnType?: string | undefined;
+  override model: DataCubeSource;
+  queryLambda: () => V1_Lambda;
 
   constructor(
     manager: DataCubeExtendManagerState,
@@ -84,6 +79,7 @@ export abstract class DataCubeColumnBaseEditorState {
     isGroupLevel: boolean,
     columnKind: DataCubeColumnKind | undefined,
   ) {
+    super(manager.view.engine);
     makeObservable(this, {
       name: observable,
       setName: action,
@@ -110,6 +106,8 @@ export abstract class DataCubeColumnBaseEditorState {
 
     this._manager = manager;
     this.view = manager.view;
+    this.model = manager.view.source;
+    this.engine = this.view.engine;
     this.display = this.newDisplay(this);
 
     this.name = name;
@@ -126,8 +124,13 @@ export abstract class DataCubeColumnBaseEditorState {
       CODE_EDITOR_LANGUAGE.PURE,
       this.editorModelUri,
     );
+    this.queryLambda = this.buildExtendBaseQuery;
   }
 
+  alertHandler = (error: Error): void => {
+    this.view.dataCube.alertService.alertUnhandledError(error);
+  };
+
   abstract getInitialCode(): Promise<string>;
 
   async initialize() {
@@ -166,14 +169,6 @@ export abstract class DataCubeColumnBaseEditorState {
     this.columnKind = columnKind;
   }
 
-  setEditor(editor: monacoEditorAPI.IStandaloneCodeEditor) {
-    this.editor = editor;
-  }
-
-  setReturnType(value: string | undefined) {
-    this.returnType = value;
-  }
-
   showError(error: EngineError) {
     this.codeError = error;
     if (error.sourceInformation) {
@@ -193,12 +188,7 @@ export abstract class DataCubeColumnBaseEditorState {
     }
   }
 
-  clearError() {
-    this.codeError = undefined;
-    clearMarkers(this.uuid);
-  }
-
-  buildExtendBaseQuery() {
+  buildExtendBaseQuery = () => {
     const currentSnapshot = guaranteeNonNullable(
       this._manager.getLatestSnapshot(),
     );
@@ -221,7 +211,7 @@ export abstract class DataCubeColumnBaseEditorState {
         }),
       ],
     );
-  }
+  };
 
   async getReturnType() {
     this.validationState.inProgress();

package/tsconfig.json

@@ -121,6 +121,8 @@
     "./src/components/view/editor/DataCubeEditorHorizontalPivotsPanel.tsx",
     "./src/components/view/editor/DataCubeEditorSortsPanel.tsx",
     "./src/components/view/editor/DataCubeEditorVerticalPivotsPanel.tsx",
+    "./src/components/view/extend/DataCubeCodeEditor.tsx",
+    "./src/components/view/extend/DataCubeCodeEditorState.tsx",
     "./src/components/view/extend/DataCubeColumnEditor.tsx",
     "./src/components/view/filter/DataCubeFilterEditor.tsx",
     "./src/components/view/grid/DataCubeGrid.tsx",