@finos/legend-data-cube 0.1.11 → 0.1.13

package/src/components/view/editor/DataCubeEditorHorizontalPivotsPanel.tsx

@@ -18,9 +18,9 @@ import { DataCubeIcon } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 import {
-  DataCubeColumnSelectorSortDirectionDropdown,
-  DataCubeEditorColumnSelector,
-} from './DataCubeEditorColumnSelector.js';
+  DataCubeEditorColumnsSelectorSortDirectionDropdown,
+  DataCubeEditorColumnsSelector,
+} from './DataCubeEditorColumnsSelector.js';
 import { useEffect } from 'react';
 
 export const DataCubeEditorHorizontalPivotsPanel = observer(
@@ -41,10 +41,10 @@ export const DataCubeEditorHorizontalPivotsPanel = observer(
           </div>
         </div>
         <div className="flex h-[calc(100%_-_24px)] w-full">
-          <DataCubeEditorColumnSelector
+          <DataCubeEditorColumnsSelector
             selector={panel.selector}
             columnActionRenderer={(p) => (
-              <DataCubeColumnSelectorSortDirectionDropdown {...p} />
+              <DataCubeEditorColumnsSelectorSortDirectionDropdown {...p} />
             )}
           />
         </div>

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

@@ -17,20 +17,20 @@
 import { observer } from 'mobx-react-lite';
 import { DataCubeIcon } from '@finos/legend-art';
 import {
-  DataCubeColumnSelectorSortDirectionDropdown,
-  DataCubeEditorColumnSelector,
-} from './DataCubeEditorColumnSelector.js';
+  DataCubeEditorColumnsSelectorSortDirectionDropdown,
+  DataCubeEditorColumnsSelector,
+} from './DataCubeEditorColumnsSelector.js';
 import type {
-  DataCubeEditorColumnSelectorState,
-  DataCubeEditorSortColumnState,
-} from '../../../stores/view/editor/DataCubeEditorColumnSelectorState.js';
+  DataCubeEditorColumnsSelectorState,
+  DataCubeEditorColumnsSelectorSortColumnState,
+} from '../../../stores/view/editor/DataCubeEditorColumnsSelectorState.js';
 import { PIVOT_COLUMN_NAME_VALUE_SEPARATOR } from '../../../stores/core/DataCubeQueryEngine.js';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 
 const SortColumnLabel = observer(
   (props: {
-    selector: DataCubeEditorColumnSelectorState<DataCubeEditorSortColumnState>;
-    column: DataCubeEditorSortColumnState;
+    selector: DataCubeEditorColumnsSelectorState<DataCubeEditorColumnsSelectorSortColumnState>;
+    column: DataCubeEditorColumnsSelectorSortColumnState;
   }) => {
     const { column } = props;
 
@@ -58,11 +58,11 @@ export const DataCubeEditorSortsPanel = observer(
           </div>
         </div>
         <div className="flex h-[calc(100%_-_24px)] w-full">
-          <DataCubeEditorColumnSelector
+          <DataCubeEditorColumnsSelector
             selector={panel.selector}
             columnLabelRenderer={(p) => <SortColumnLabel {...p} />}
             columnActionRenderer={(p) => (
-              <DataCubeColumnSelectorSortDirectionDropdown {...p} />
+              <DataCubeEditorColumnsSelectorSortDirectionDropdown {...p} />
             )}
           />
         </div>

package/src/components/view/editor/DataCubeEditorVerticalPivotsPanel.tsx

@@ -16,7 +16,7 @@
 
 import { DataCubeIcon } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
-import { DataCubeEditorColumnSelector } from './DataCubeEditorColumnSelector.js';
+import { DataCubeEditorColumnsSelector } from './DataCubeEditorColumnsSelector.js';
 import type { DataCubeViewState } from '../../../stores/view/DataCubeViewState.js';
 
 export const DataCubeEditorVerticalPivotsPanel = observer(
@@ -35,7 +35,7 @@ export const DataCubeEditorVerticalPivotsPanel = observer(
           </div>
         </div>
         <div className="flex h-[calc(100%_-_24px)] w-full">
-          <DataCubeEditorColumnSelector selector={panel.selector} />
+          <DataCubeEditorColumnsSelector selector={panel.selector} />
         </div>
       </div>
     );

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

@@ -0,0 +1,175 @@
+/**
+ * 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 { cn } from '@finos/legend-art';
+import {
+  getBaseCodeEditorOptions,
+  CODE_EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
+  PURE_CODE_EDITOR_WORD_SEPARATORS,
+} from '@finos/legend-code-editor';
+import {
+  debounce,
+  guaranteeNonNullable,
+  isNonNullable,
+} from '@finos/legend-shared';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import {
+  MONACO_EDITOR_OVERFLOW_WIDGETS_ROOT_ID,
+  getCodeSuggestions,
+} from '../../core/DataCubePureCodeEditorUtils.js';
+import {
+  editor as monacoEditorAPI,
+  languages as monacoLanguagesAPI,
+  type IDisposable,
+} from 'monaco-editor';
+import type { DataCubeCodeEditorState } from './DataCubeCodeEditorState.js';
+import { runInAction } from 'mobx';
+
+export const DataCubeCodeEditor = observer(
+  (props: { state: DataCubeCodeEditorState }) => {
+    const { state } = props;
+
+    const editorRef = useRef<HTMLDivElement>(null);
+    const [editor, setEditor] = useState<
+      monacoEditorAPI.IStandaloneCodeEditor | undefined
+    >();
+
+    const suggestionsProvider = useRef<IDisposable | undefined>(undefined);
+
+    const debouncedCheckReturnType = useMemo(
+      () =>
+        debounce((): void => {
+          state.getReturnType().catch((error) => {
+            state.alertHandler(error);
+          });
+        }, 500),
+      [state],
+    );
+
+    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,
+                      state.engine,
+                      guaranteeNonNullable(state.model),
+                      state.queryLambda,
+                    ),
+                  );
+                }
+
+                return { suggestions };
+              },
+            },
+          );
+
+        newEditor.setModel(state.editorModel);
+        newEditor.onDidChangeModelContent(() => {
+          state.currentlyEditing = true;
+          const currentVal = newEditor.getValue();
+          if (currentVal !== state.code) {
+            runInAction(() => {
+              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]);
+
+    // 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={cn('relative h-full w-full border border-neutral-200', {
+          'border-red-500': state.hasErrors,
+        })}
+      >
+        <div className="absolute left-0 top-0 h-full w-full overflow-hidden" />
+        <div ref={editorRef} style={{ height: '100%', width: '100%' }} />
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,72 @@
+/**
+ * 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 type { EngineError, V1_Lambda } from '@finos/legend-graph';
+import { ActionState, uuid, type PlainObject } from '@finos/legend-shared';
+import { editor as monacoEditorAPI, Uri } from 'monaco-editor';
+import type { DataCubeEngine } from '../../../stores/core/DataCubeEngine.js';
+import type { DataCubeSource } from '../../../stores/core/model/DataCubeSource.js';
+import { clearMarkers, CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
+
+export abstract class DataCubeCodeEditorState {
+  protected readonly uuid = uuid();
+
+  editorModel: monacoEditorAPI.ITextModel;
+  editor?: monacoEditorAPI.IStandaloneCodeEditor | undefined;
+  editorModelUri: Uri;
+
+  code = '';
+  codePrefix: string;
+  returnType?: string | undefined;
+
+  finalizationState = ActionState.create();
+  codeError?: EngineError | undefined;
+  model: DataCubeSource | PlainObject | undefined;
+  engine: DataCubeEngine;
+
+  currentlyEditing?: boolean;
+
+  constructor(engine: DataCubeEngine) {
+    this.engine = engine;
+    this.codePrefix = '';
+    this.editorModelUri = Uri.file(`/${this.uuid}.pure`);
+    this.editorModel = monacoEditorAPI.createModel(
+      '',
+      CODE_EDITOR_LANGUAGE.PURE,
+      this.editorModelUri,
+    );
+  }
+
+  get hasErrors(): boolean {
+    return Boolean(this.codeError);
+  }
+
+  clearError() {
+    this.codeError = undefined;
+    clearMarkers(this.uuid);
+  }
+
+  setReturnType(value: string | undefined) {
+    this.returnType = value;
+  }
+
+  setEditor(editor: monacoEditorAPI.IStandaloneCodeEditor) {
+    this.editor = editor;
+  }
+
+  abstract alertHandler: (error: Error) => void;
+  abstract getReturnType(): Promise<string | boolean | undefined>;
+  abstract queryLambda: () => V1_Lambda;
+}

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>