@finos/legend-application-repl 0.0.21 → 0.0.23

package/src/components/{Core_LegendREPLGridClientApplicationPlugin.tsx → Core_LegendREPLApplicationPlugin.tsx}

@@ -16,24 +16,29 @@
 
 import type { LegendApplicationSetup } from '@finos/legend-application';
 import packageJson from '../../package.json' assert { type: 'json' };
-import { LegendREPLGridClientApplicationPlugin } from '../stores/LegendREPLGridClientApplicationPlugin.js';
-import { configureAgGridComponent } from './AgGrid.js';
+import { LegendREPLApplicationPlugin } from '../stores/LegendREPLApplicationPlugin.js';
 import {
   configureCodeEditorComponent,
   setupPureLanguageService,
 } from '@finos/legend-lego/code-editor';
+import { ModuleRegistry } from '@ag-grid-community/core';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
 
-export class Core_LegendREPLGridClientApplicationPlugin extends LegendREPLGridClientApplicationPlugin {
-  static NAME = packageJson.extensions.applicationREPLGridClientPlugin;
+export class Core_LegendREPLApplicationPlugin extends LegendREPLApplicationPlugin {
+  static NAME = packageJson.extensions.applicationREPLPlugin;
 
   constructor() {
-    super(Core_LegendREPLGridClientApplicationPlugin.NAME, packageJson.version);
+    super(Core_LegendREPLApplicationPlugin.NAME, packageJson.version);
   }
 
   override getExtraApplicationSetups(): LegendApplicationSetup[] {
     return [
       async (applicationStore) => {
-        configureAgGridComponent();
+        ModuleRegistry.registerModules([
+          ClientSideRowModelModule,
+          RowGroupingModule,
+        ]);
         await configureCodeEditorComponent(applicationStore);
         setupPureLanguageService();
       },

package/src/components/{LegendREPLGridClientApplication.tsx → LegendREPLApplication.tsx}

@@ -20,42 +20,25 @@ import {
   Switch,
   type TEMPORARY__ReactRouterComponentType,
 } from '@finos/legend-application/browser';
-import { Editor, REPLQueryEditor } from './REPLGridClient.js';
-import { LegendREPLGridClientFrameworkProvider } from './LegendREPLGridClientFrameworkProvider.js';
+import { DataCube } from './dataCube/DataCube.js';
+import { LegendREPLFrameworkProvider } from './LegendREPLFrameworkProvider.js';
 import { observer } from 'mobx-react-lite';
-import { withEditorStore } from './REPLGridClientStoreProvider.js';
-
-export enum LEGEND_REPL_GRID_CLIENT_PATTERN_TOKEN {
-  QUERY_ID = 'queryId',
-}
+import { withREPLStore } from './REPLStoreProvider.js';
 
 export const LEGEND_REPL_GRID_CLIENT_ROUTE_PATTERN = Object.freeze({
-  GRID: `/grid`,
-  SAVED_QUERY: `/query/:${LEGEND_REPL_GRID_CLIENT_PATTERN_TOKEN.QUERY_ID}`,
+  DATA_CUBE: `/dataCube`,
 });
 
-export type REPLQueryEditorPathParams = {
-  [LEGEND_REPL_GRID_CLIENT_PATTERN_TOKEN.QUERY_ID]: string;
-};
-
-export const LegendREPLGridClientRouter = withEditorStore(
+export const LegendREPLRouter = withREPLStore(
   observer(() => (
     <div className="app">
       <Switch>
         <Route
           exact={true}
-          path={[LEGEND_REPL_GRID_CLIENT_ROUTE_PATTERN.GRID]}
-          component={
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            Editor as TEMPORARY__ReactRouterComponentType
-          }
-        />
-        <Route
-          exact={true}
-          path={[LEGEND_REPL_GRID_CLIENT_ROUTE_PATTERN.SAVED_QUERY]}
+          path={[LEGEND_REPL_GRID_CLIENT_ROUTE_PATTERN.DATA_CUBE]}
           component={
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            REPLQueryEditor as TEMPORARY__ReactRouterComponentType
+            DataCube as TEMPORARY__ReactRouterComponentType
           }
         />
       </Switch>
@@ -63,16 +46,16 @@ export const LegendREPLGridClientRouter = withEditorStore(
   )),
 );
 
-export const LegendREPLGridClientWebApplication: React.FC<{
+export const LegendREPLWebApplication: React.FC<{
   baseUrl: string;
 }> = (props) => {
   const { baseUrl } = props;
 
   return (
     <BrowserEnvironmentProvider baseUrl={baseUrl}>
-      <LegendREPLGridClientFrameworkProvider>
-        <LegendREPLGridClientRouter />
-      </LegendREPLGridClientFrameworkProvider>
+      <LegendREPLFrameworkProvider>
+        <LegendREPLRouter />
+      </LegendREPLFrameworkProvider>
     </BrowserEnvironmentProvider>
   );
 };

package/src/components/LegendREPLFrameworkProvider.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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 { createContext } from 'react';
+import { useLocalObservable } from 'mobx-react-lite';
+import {
+  ApplicationFrameworkProvider,
+  useApplicationStore,
+} from '@finos/legend-application';
+import type { LegendREPLPluginManager } from '../application/LegendREPLPluginManager.js';
+import type { LegendREPLApplicationConfig } from '../application/LegendREPLApplicationConfig.js';
+import {
+  type LegendREPLApplicationStore,
+  LegendREPLBaseStore,
+} from '../stores/LegendREPLBaseStore.js';
+
+export const useLegendREPLApplicationStore = (): LegendREPLApplicationStore =>
+  useApplicationStore<LegendREPLApplicationConfig, LegendREPLPluginManager>();
+
+const LegendREPLBaseStoreContext = createContext<
+  LegendREPLBaseStore | undefined
+>(undefined);
+
+const LegendREPLBaseStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const applicationStore = useLegendREPLApplicationStore();
+  const store = useLocalObservable(
+    () => new LegendREPLBaseStore(applicationStore),
+  );
+  return (
+    <LegendREPLBaseStoreContext.Provider value={store}>
+      {children}
+    </LegendREPLBaseStoreContext.Provider>
+  );
+};
+
+export const LegendREPLFrameworkProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => (
+  <ApplicationFrameworkProvider>
+    <LegendREPLBaseStoreProvider>{children}</LegendREPLBaseStoreProvider>
+  </ApplicationFrameworkProvider>
+);

package/src/components/{REPLGridClientStoreProvider.tsx → REPLStoreProvider.tsx}

@@ -16,46 +16,42 @@
 
 import { createContext, useContext } from 'react';
 import { useLocalObservable } from 'mobx-react-lite';
-import { REPLGridClientStore } from '../stores/REPLGridClientStore.js';
+import { REPLStore } from '../stores/dataCube/DataCubeStore.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useApplicationStore } from '@finos/legend-application';
-import type { LegendREPLGridClientApplicationConfig } from '../application/LegendREPLGridClientApplicationConfig.js';
-import type { LegendREPLGridClientPluginManager } from '../application/LegendREPLGridClientPluginManager.js';
+import type { LegendREPLApplicationConfig } from '../application/LegendREPLApplicationConfig.js';
+import type { LegendREPLPluginManager } from '../application/LegendREPLPluginManager.js';
 
-const EditorStoreContext = createContext<REPLGridClientStore | undefined>(
-  undefined,
-);
+const REPLStoreContext = createContext<REPLStore | undefined>(undefined);
 
-export const REPLGridClientStoreProvider = ({
+export const REPLStoreProvider = ({
   children,
 }: {
   children: React.ReactNode;
 }): React.ReactElement => {
   const applicationStore = useApplicationStore<
-    LegendREPLGridClientApplicationConfig,
-    LegendREPLGridClientPluginManager
+    LegendREPLApplicationConfig,
+    LegendREPLPluginManager
   >();
-  const store = useLocalObservable(
-    () => new REPLGridClientStore(applicationStore),
-  );
+  const store = useLocalObservable(() => new REPLStore(applicationStore));
   return (
-    <EditorStoreContext.Provider value={store}>
+    <REPLStoreContext.Provider value={store}>
       {children}
-    </EditorStoreContext.Provider>
+    </REPLStoreContext.Provider>
   );
 };
 
-export const useREPLGridClientStore = (): REPLGridClientStore =>
+export const useREPLStore = (): REPLStore =>
   guaranteeNonNullable(
-    useContext(EditorStoreContext),
-    `Can't find editor store in context`,
+    useContext(REPLStoreContext),
+    `Can't find REPL store in context`,
   );
 
-export const withEditorStore = (WrappedComponent: React.FC): React.FC =>
-  function WithEditorStore() {
+export const withREPLStore = (WrappedComponent: React.FC): React.FC =>
+  function WithREPLStore() {
     return (
-      <REPLGridClientStoreProvider>
+      <REPLStoreProvider>
         <WrappedComponent />
-      </REPLGridClientStoreProvider>
+      </REPLStoreProvider>
     );
   };

package/src/components/dataCube/DataCube.tsx

@@ -0,0 +1,63 @@
+/**
+ * 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 { useREPLStore } from '../REPLStoreProvider.js';
+import { useEffect, useRef } from 'react';
+import { DataCubeGrid } from './grid/DataCubeGrid.js';
+import { PivotPanelEditor } from './editor/DataCubeEditor.js';
+import { useApplicationStore } from '@finos/legend-application';
+
+export const DataCube = observer(() => {
+  const dataCubeStore = useREPLStore();
+  const applicationStore = useApplicationStore();
+  const dataCubeState = dataCubeStore.dataCubeState;
+  const pivotPanelButtonRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    dataCubeState.initialize().catch(applicationStore.alertUnhandledError);
+  }, [dataCubeState, applicationStore]);
+
+  return (
+    <div className="repl">
+      <div className="repl__header">
+        <div className="repl__header__content">
+          <div className="repl__header__content__title">Legend DataCube</div>
+          <div className="repl__header__actions"></div>
+        </div>
+      </div>
+      <div className="repl__content">
+        <DataCubeGrid editorStore={dataCubeStore} />
+      </div>
+      <div className="repl__footer">
+        <div
+          className="repl__footer__pivot"
+          ref={pivotPanelButtonRef}
+          onClick={(): void => dataCubeState.editor.openPanel()}
+        >
+          Pivot
+        </div>
+        <div className="repl__footer__filter">Filter</div>
+        {dataCubeState.editor.isPanelOpen && (
+          <PivotPanelEditor
+            editorStore={dataCubeStore}
+            triggerElement={pivotPanelButtonRef.current}
+          />
+        )}
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,127 @@
+/**
+ * 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 {
+  TimesIcon,
+  clsx,
+  BasePopover,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalFooterButton,
+  ModalHeader,
+  ModalHeaderActions,
+  ModalTitle,
+} from '@finos/legend-art';
+import type { REPLStore } from '../../../stores/dataCube/DataCubeStore.js';
+import { DATA_CUBE_EDITOR_TAB } from '../../../stores/dataCube/editor/DataCubeEditorState.js';
+import { DataCubeEditorSortPanel } from './DataCubeEditorSortPanel.js';
+
+export const PivotPanelEditor = observer(
+  (props: { triggerElement: HTMLElement | null; editorStore: REPLStore }) => {
+    const { triggerElement, editorStore } = props;
+    const dataCubeState = editorStore.dataCubeState;
+    const applicationStore = editorStore.applicationStore;
+    const closeEditor = (): void => {
+      dataCubeState.editor.closePanel();
+    };
+    const selectedTab = dataCubeState.editor.currentTab;
+    const tabOptions = [
+      // DATA_CUBE_EDITOR_TAB.COLUMNS,
+      DATA_CUBE_EDITOR_TAB.SORTS,
+      // DATA_CUBE_EDITOR_TAB.HORIZONTAL_PIVOTS,
+      // DATA_CUBE_EDITOR_TAB.VERTICAL_PIVOTS,
+      // DATA_CUBE_EDITOR_TAB.GENERAL_PROPERTIES,
+      // DATA_CUBE_EDITOR_TAB.COLUMN_PROPERTIES,
+    ];
+    const setSelectedTab = (tab: DATA_CUBE_EDITOR_TAB): void => {
+      dataCubeState.editor.setCurrentTab(tab);
+    };
+    const onClickOk = (): void => {
+      dataCubeState.editor.applyChanges();
+      dataCubeState.editor.closePanel();
+    };
+
+    return (
+      <BasePopover
+        open={dataCubeState.editor.isPanelOpen}
+        onClose={closeEditor}
+        anchorEl={triggerElement}
+        anchorOrigin={{
+          vertical: 'center',
+          horizontal: 'center',
+        }}
+        transformOrigin={{
+          vertical: 'center',
+          horizontal: 'center',
+        }}
+      >
+        <Modal
+          darkMode={
+            !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
+          }
+          className="editor-modal embedded-runtime-editor"
+        >
+          <ModalHeader>
+            <ModalTitle title="cube properties" />
+            <ModalHeaderActions>
+              <button
+                className="modal__header__action"
+                tabIndex={-1}
+                onClick={closeEditor}
+              >
+                <TimesIcon />
+              </button>
+            </ModalHeaderActions>
+          </ModalHeader>
+          <ModalBody>
+            <div style={{ height: '100%', width: '100%' }}>
+              <div className="panel__header uml-element-editor__tabs__header ">
+                <div className="uml-element-editor__tabs">
+                  {tabOptions.map((tab) => (
+                    <div
+                      key={tab}
+                      onClick={(): void => setSelectedTab(tab)}
+                      className={clsx('uml-element-editor__tab', {
+                        'uml-element-editor__tab--active': tab === selectedTab,
+                      })}
+                    >
+                      {tab}
+                    </div>
+                  ))}
+                </div>
+              </div>
+              {selectedTab === DATA_CUBE_EDITOR_TAB.SORTS && (
+                <DataCubeEditorSortPanel editorStore={editorStore} />
+              )}
+            </div>
+          </ModalBody>
+          <ModalFooter className="repl__modal__footer">
+            <div className="search-modal__actions">
+              <ModalFooterButton text="Ok" onClick={onClickOk} />
+              <ModalFooterButton text="Close" onClick={closeEditor} />
+              <ModalFooterButton
+                text="Apply"
+                onClick={(): void => dataCubeState.editor.applyChanges()}
+              />
+            </div>
+          </ModalFooter>
+        </Modal>
+      </BasePopover>
+    );
+  },
+);

package/src/components/dataCube/{DataCubeQueryTextEditor.tsx → editor/DataCubeEditorCodePanel.tsx}

@@ -27,23 +27,22 @@ import {
   CODE_EDITOR_LANGUAGE,
   CODE_EDITOR_THEME,
   disposeCodeEditor,
-  CodeEditor,
 } from '@finos/legend-lego/code-editor';
 import { debounce } from '@finos/legend-shared';
 import { DEFAULT_TAB_SIZE } from '@finos/legend-application';
-import { useREPLGridClientStore } from '../REPLGridClientStoreProvider.js';
+import { useREPLStore } from '../../REPLStoreProvider.js';
 import {
   editor as monacoEditorAPI,
   type IDisposable,
   languages as monacoLanguagesAPI,
 } from 'monaco-editor';
-import type { REPLGridClientStore } from '../../stores/REPLGridClientStore.js';
 
-const QueryEditor = observer(() => {
-  const editorStore = useREPLGridClientStore();
-  const applicationStore = editorStore.applicationStore;
-  const dataCubeState = editorStore.dataCubeState;
-  const queryEditorState = dataCubeState.queryTextEditorState.queryEditorState;
+const DataCubeCodeEditor = observer(() => {
+  const replStore = useREPLStore();
+  const applicationStore = replStore.applicationStore;
+  const dataCubeState = replStore.dataCubeState;
+  const queryEditorState =
+    dataCubeState.editor.codeEditorState.queryEditorState;
   const onDidChangeModelContentEventDisposer = useRef<IDisposable | undefined>(
     undefined,
   );
@@ -60,11 +59,11 @@ const QueryEditor = observer(() => {
   const debouncedParseQuery = useMemo(
     () =>
       debounce((): void => {
-        flowResult(dataCubeState.parseQuery()).catch(
-          editorStore.applicationStore.alertUnhandledError,
+        flowResult(dataCubeState.editor.codeEditorState.parseQuery()).catch(
+          replStore.applicationStore.alertUnhandledError,
         );
       }, 1000),
-    [dataCubeState, editorStore.applicationStore.alertUnhandledError],
+    [dataCubeState, replStore.applicationStore.alertUnhandledError],
   );
 
   if (editor) {
@@ -95,8 +94,10 @@ const QueryEditor = observer(() => {
         {
           triggerCharacters: ['>', '.', '$', '~'],
           provideCompletionItems: async (model, position, context) => {
-            const suggestions: monacoLanguagesAPI.CompletionItem[] =
-              await dataCubeState.getTypeaheadResults(position, model);
+            // TODO: @akphi - do this later when we support typeahead for extended columns, etc.
+            // const suggestions: monacoLanguagesAPI.CompletionItem[] =
+            //   await dataCubeState.getTypeaheadResults(position, model);
+            const suggestions: monacoLanguagesAPI.CompletionItem[] = [];
             return { suggestions };
           },
         },
@@ -159,76 +160,68 @@ const QueryEditor = observer(() => {
   );
 });
 
-export const DataCubeQueryTextEditor = observer(
-  (props: { editorStore: REPLGridClientStore }) => {
-    const { editorStore } = props;
-    const dataCubeState = editorStore.dataCubeState;
+export const DataCubeQueryCodeEditor = observer(() => {
+  const executeLambda = (): void => {
+    // TODO: @akphi
+    // flowResult(dataCubeState.executeLambda()).catch(
+    //   editorStore.applicationStore.alertUnhandledError,
+    // );
+  };
 
-    const executeLambda = (): void => {
-      flowResult(dataCubeState.executeLambda()).catch(
-        editorStore.applicationStore.alertUnhandledError,
-      );
-    };
-
-    const isLightTheme =
-      editorStore.applicationStore.layoutService
-        .TEMPORARY__isLightColorThemeEnabled;
-
-    return (
-      <div className="repl__content__query">
+  return (
+    <div className="repl__content__query">
+      <div className="repl__query">
+        <div className="repl__query__editor">
+          <div className="repl__query__header">
+            <div className="repl__query__label">Curent Query</div>
+            <div className="repl__query__execute-btn btn__dropdown-combo btn__dropdown-combo--primary">
+              <button
+                className="btn__dropdown-combo__label"
+                onClick={executeLambda}
+                tabIndex={-1}
+              >
+                <PlayIcon className="btn__dropdown-combo__label__icon" />
+                <div className="btn__dropdown-combo__label__title">
+                  Run Query
+                </div>
+              </button>
+            </div>
+          </div>
+          <div className="repl__query__content">
+            <DataCubeCodeEditor />
+          </div>
+        </div>
+      </div>
+      {/* {dataCubeState.editor.codeEditorState.currentSubQuery !== undefined && (
         <div className="repl__query">
           <div className="repl__query__editor">
             <div className="repl__query__header">
-              <div className="repl__query__label">Curent Query</div>
-              <div className="repl__query__execute-btn btn__dropdown-combo btn__dropdown-combo--primary">
-                <button
-                  className="btn__dropdown-combo__label"
-                  onClick={executeLambda}
-                  tabIndex={-1}
-                >
-                  <PlayIcon className="btn__dropdown-combo__label__icon" />
-                  <div className="btn__dropdown-combo__label__title">
-                    Run Query
-                  </div>
-                </button>
+              <div className="repl__query__label__sub__query">
+                Current Row Group Sub Query
+              </div>
+              <div className="repl__query__label__sub__query__read--only">
+                Read Only
               </div>
             </div>
             <div className="repl__query__content">
-              <QueryEditor />
+              <CodeEditor
+                lightTheme={
+                  isLightTheme
+                    ? CODE_EDITOR_THEME.BUILT_IN__VSCODE_HC_LIGHT
+                    : CODE_EDITOR_THEME.BUILT_IN__VSCODE_HC_BLACK
+                }
+                language={CODE_EDITOR_LANGUAGE.PURE}
+                isReadOnly={true}
+                inputValue={
+                  dataCubeState.editor.codeEditorState.currentSubQuery
+                }
+                hideActionBar={true}
+                hidePadding={true}
+              />
             </div>
           </div>
         </div>
-        {dataCubeState.queryTextEditorState.currentSubQuery !== undefined && (
-          <div className="repl__query">
-            <div className="repl__query__editor">
-              <div className="repl__query__header">
-                <div className="repl__query__label__sub__query">
-                  Current Row Group Sub Query
-                </div>
-                <div className="repl__query__label__sub__query__read--only">
-                  Read Only
-                </div>
-              </div>
-              <div className="repl__query__content">
-                <CodeEditor
-                  lightTheme={
-                    isLightTheme
-                      ? CODE_EDITOR_THEME.BUILT_IN__VSCODE_HC_LIGHT
-                      : CODE_EDITOR_THEME.BUILT_IN__VSCODE_HC_BLACK
-                  }
-                  language={CODE_EDITOR_LANGUAGE.PURE}
-                  isReadOnly={true}
-                  inputValue={
-                    dataCubeState.queryTextEditorState.currentSubQuery
-                  }
-                  hideActionBar={true}
-                  hidePadding={true}
-                />
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  },
-);
+      )} */}
+    </div>
+  );
+});