@finos/legend-application-repl 0.0.21 → 0.0.23

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

@@ -0,0 +1,274 @@
+/**
+ * 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 {
+  PlusIcon,
+  SearchIcon,
+  TimesIcon,
+  clsx,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CustomSelectorInput,
+} from '@finos/legend-art';
+import type { REPLStore } from '../../../stores/dataCube/DataCubeStore.js';
+import { DATA_CUBE_COLUMN_SORT_DIRECTION } from '../../../stores/dataCube/DataCubeMetaModelConst.js';
+
+export const DataCubeEditorSortPanel = observer(
+  (props: { editorStore: REPLStore }) => {
+    const { editorStore } = props;
+    const sortState = editorStore.dataCubeState.editor.sort;
+    const onAvailabeColumnsSearchTextChange: React.ChangeEventHandler<
+      HTMLInputElement
+    > = (event) => {
+      sortState.setAvailableColumnsSearchText(event.target.value);
+    };
+    const onSelectedColumnsSearchTextChange: React.ChangeEventHandler<
+      HTMLInputElement
+    > = (event) => {
+      sortState.setSelectedColumnsSearchText(event.target.value);
+    };
+    const clearAvailableColumnsSearchText = (): void => {
+      sortState.setAvailableColumnsSearchText('');
+    };
+    const clearSelectedColumnsSearchText = (): void => {
+      sortState.setSelectedColumnsSearchText('');
+    };
+    const sortOptions = Array.from(
+      Object.values(DATA_CUBE_COLUMN_SORT_DIRECTION),
+    ).map((val) => ({
+      label: val,
+      value: val,
+    }));
+    const onAvailableColumnsSortOptionsChanged =
+      (columnName: string) =>
+      (option: {
+        label: string;
+        value: DATA_CUBE_COLUMN_SORT_DIRECTION;
+      }): void => {
+        const column = sortState.availableColumns.find(
+          (col) => col.column.name === columnName,
+        );
+        if (column) {
+          column.setDirection(option.value);
+        }
+      };
+
+    const onSelectedColumnsSortOptionsChanged =
+      (columnName: string) =>
+      (option: {
+        label: string;
+        value: DATA_CUBE_COLUMN_SORT_DIRECTION;
+      }): void => {
+        const column = sortState.selectedColumns.find(
+          (col) => col.column.name === columnName,
+        );
+        if (column) {
+          column.setDirection(option.value);
+        }
+      };
+
+    return (
+      <div className="repl__hpivot__sort__editor">
+        <div className="repl__hpivot__sort__column__editor">
+          <div className="repl__hpivot__sort__column__editor__header">
+            Sorts
+          </div>
+          <div className="repl__hpivot__sort__column__editor__content">
+            <div className="repl__hpivot__sort__column__editor__available__columns">
+              <div className="repl__hpivot__sort__column__editor__description">
+                Available sort columns:
+              </div>
+              <div className="repl__hpivot__sort__column__editor__container">
+                <div className="query-builder-property-search-panel__header">
+                  <div className="query-builder-property-search-panel__input__container">
+                    <input
+                      className={clsx(
+                        'query-builder-property-search-panel__input',
+                        {
+                          'query-builder-property-search-panel__input--searching':
+                            sortState.availableColumnsSearchText,
+                        },
+                      )}
+                      spellCheck={false}
+                      onChange={onAvailabeColumnsSearchTextChange}
+                      value={sortState.availableColumnsSearchText}
+                      placeholder="Search"
+                    />
+                    {!sortState.availableColumnsSearchText ? (
+                      <>
+                        <div className="query-builder-property-search-panel__input__search__icon">
+                          <SearchIcon />
+                        </div>
+                      </>
+                    ) : (
+                      <button
+                        className="query-builder-property-search-panel__input__clear-btn"
+                        tabIndex={-1}
+                        onClick={clearAvailableColumnsSearchText}
+                        title="Clear"
+                      >
+                        <TimesIcon />
+                      </button>
+                    )}
+                  </div>
+                </div>
+                <div className="repl__hpivot__sort__column__editor__available__columns__content">
+                  <div
+                    className="repl__hpivot__sort__column__editor__available__columns__root"
+                    onDoubleClick={(): void =>
+                      sortState.addAllAvailableColumns()
+                    }
+                  >
+                    <PlusIcon />
+                    <div className="repl__hpivot__sort__column__editor__available__columns__root__label">
+                      All
+                    </div>
+                  </div>
+                  {sortState.availableColumnsSearchResults.map((col) => (
+                    <div
+                      className="repl__hpivot__sort__column__editor__available__columns__children"
+                      key={col.column.name}
+                    >
+                      <div
+                        className="repl__hpivot__sort__column__editor__available__columns__children__name"
+                        onDoubleClick={(): void =>
+                          sortState.addAvailableColumn(col.column.name)
+                        }
+                      >
+                        {col.column.name}
+                      </div>
+                      <CustomSelectorInput
+                        className="repl__hpivot__sort__column__editor__available__columns__children__order"
+                        options={sortOptions}
+                        onChange={onAvailableColumnsSortOptionsChanged(
+                          col.column.name,
+                        )}
+                        value={{ label: col.direction, value: col.direction }}
+                        isClearable={false}
+                        darkMode={false}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div className="repl__hpivot__sort__column__editor__actions">
+              <div className="repl__hpivot__sort__column__editor__action">
+                <button
+                  tabIndex={-1}
+                  // onClick={clearSearch}
+                  title="Add"
+                >
+                  Add
+                  <ChevronRightIcon />
+                </button>
+              </div>
+              <div className="repl__hpivot__sort__column__editor__action">
+                <button
+                  tabIndex={-1}
+                  // onClick={clearSearch}
+                  title="Remove"
+                >
+                  <ChevronLeftIcon />
+                  Remove
+                </button>
+              </div>
+            </div>
+            <div className="repl__hpivot__sort__column__editor__selected__columns">
+              <div className="repl__hpivot__sort__column__editor__description">
+                Selected sort columns:
+              </div>
+              <div className="repl__hpivot__sort__column__editor__container">
+                <div className="query-builder-property-search-panel__header">
+                  <div className="query-builder-property-search-panel__input__container">
+                    <input
+                      className={clsx(
+                        'query-builder-property-search-panel__input',
+                        {
+                          'query-builder-property-search-panel__input--searching':
+                            sortState.selectedColumnsSearchText,
+                        },
+                      )}
+                      spellCheck={false}
+                      onChange={onSelectedColumnsSearchTextChange}
+                      value={sortState.selectedColumnsSearchText}
+                      placeholder="Search"
+                    />
+                    {!sortState.selectedColumnsSearchText ? (
+                      <>
+                        <div className="query-builder-property-search-panel__input__search__icon">
+                          <SearchIcon />
+                        </div>
+                      </>
+                    ) : (
+                      <button
+                        className="query-builder-property-search-panel__input__clear-btn"
+                        tabIndex={-1}
+                        onClick={clearSelectedColumnsSearchText}
+                        title="Clear"
+                      >
+                        <TimesIcon />
+                      </button>
+                    )}
+                  </div>
+                </div>
+                <div className="repl__hpivot__sort__column__editor__available__columns__content">
+                  <div
+                    className="repl__hpivot__sort__column__editor__available__columns__root"
+                    onDoubleClick={(): void =>
+                      sortState.addAllSelectedColumns()
+                    }
+                  >
+                    <PlusIcon />
+                    <div className="repl__hpivot__sort__column__editor__available__columns__root__label">
+                      All
+                    </div>
+                  </div>
+                  {sortState.selectedColumnsSearchResults.map((col) => (
+                    <div
+                      className="repl__hpivot__sort__column__editor__available__columns__children"
+                      key={col.column.name}
+                    >
+                      <div
+                        className="repl__hpivot__sort__column__editor__available__columns__children__name"
+                        onDoubleClick={(): void =>
+                          sortState.addSelectedColumn(col.column.name)
+                        }
+                      >
+                        {col.column.name}
+                      </div>
+                      <CustomSelectorInput
+                        className="repl__hpivot__sort__column__editor__available__columns__children__order"
+                        options={sortOptions}
+                        onChange={onSelectedColumnsSortOptionsChanged(
+                          col.column.name,
+                        )}
+                        value={{ label: col.direction, value: col.direction }}
+                        isClearable={false}
+                        darkMode={false}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/dataCube/grid/DataCubeGrid.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 { REPLStore } from '../../../stores/dataCube/DataCubeStore.js';
+import { LicenseManager } from '@ag-grid-enterprise/core';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { ServerSideRowModelModule } from '@ag-grid-enterprise/server-side-row-model';
+import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
+import { MenuModule } from '@ag-grid-enterprise/menu';
+import { AgGridReact } from '@ag-grid-community/react';
+import { useEffect } from 'react';
+
+// NOTE: This is a workaround to prevent ag-grid license key check from flooding the console screen
+// with its stack trace in Chrome.
+// We MUST NEVER completely surpress this warning, else it's a violation of the ag-grid license
+const __INTERNAL__original_console_error = console.error; // eslint-disable-line no-console
+// eslint-disable-next-line no-process-env
+if (process.env.NODE_ENV === 'development') {
+  // eslint-disable-next-line no-console
+  console.error = (message?: unknown, ...optionalParams: unknown[]): void => {
+    console.log(message); // eslint-disable-line no-console
+  };
+}
+
+export const DataCubeGrid = observer((props: { editorStore: REPLStore }) => {
+  const { editorStore } = props;
+  const dataCubeState = editorStore.dataCubeState;
+
+  useEffect(() => {
+    if (dataCubeState.grid.clientLicenseKey) {
+      LicenseManager.setLicenseKey(dataCubeState.grid.clientLicenseKey);
+    }
+  }, [dataCubeState.grid.clientLicenseKey]);
+
+  return (
+    <>
+      <AgGridReact
+        rowGroupPanelShow="always"
+        suppressBrowserResizeObserver={true}
+        suppressScrollOnNewData={true}
+        alwaysMultiSort={true}
+        rowModelType="serverSide"
+        serverSideDatasource={dataCubeState.grid.clientDataSource}
+        modules={[
+          // community
+          ClientSideRowModelModule,
+          // enterprise
+          ServerSideRowModelModule,
+          RowGroupingModule,
+          MenuModule,
+        ]}
+        onGridReady={(params): void => {
+          dataCubeState.grid.configureClient(params.api);
+          // eslint-disable-next-line no-process-env
+          if (process.env.NODE_ENV === 'development') {
+            console.error = __INTERNAL__original_console_error; // eslint-disable-line no-console
+          }
+        }}
+        className="ag-theme-balham"
+      />
+    </>
+  );
+});

package/src/index.tsx

@@ -14,24 +14,28 @@
  * limitations under the License.
  */
 
-import { type AbstractPlugin, type AbstractPreset } from '@finos/legend-shared';
-import { LegendREPLGridClient } from './application/LegendREPLGridClient.js';
-import { Core_LegendREPLGridClientApplicationPlugin } from './components/Core_LegendREPLGridClientApplicationPlugin.js';
+import {
+  WebConsole,
+  type AbstractPlugin,
+  type AbstractPreset,
+} from '@finos/legend-shared';
+import { LegendREPL } from './application/LegendREPL.js';
+import { Core_LegendREPLApplicationPlugin } from './components/Core_LegendREPLApplicationPlugin.js';
 
-export class LegendREPLGridClientWebApplication {
+export class LegendREPLWebApplication {
   static getPresetCollection(): AbstractPreset[] {
     return [];
   }
 
   static getPluginCollection(): AbstractPlugin[] {
-    return [new Core_LegendREPLGridClientApplicationPlugin()];
+    return [new Core_LegendREPLApplicationPlugin(), new WebConsole()];
   }
 
   static run(baseUrl: string): void {
-    LegendREPLGridClient.create()
+    LegendREPL.create()
       .setup({ baseAddress: baseUrl })
-      .withPresets(LegendREPLGridClientWebApplication.getPresetCollection())
-      .withPlugins(LegendREPLGridClientWebApplication.getPluginCollection())
+      .withPresets(LegendREPLWebApplication.getPresetCollection())
+      .withPlugins(LegendREPLWebApplication.getPluginCollection())
       .start()
       .catch((e: unknown) => {
         throw e;

package/src/server/REPLServerClient.ts

@@ -19,10 +19,18 @@ import {
   type NetworkClient,
   type PlainObject,
 } from '@finos/legend-shared';
-import type { REPLGridServerResult } from '../components/grid/REPLGridServerResult.js';
-import type { V1_Lambda } from '@finos/legend-graph';
-import type { CompletionItem } from '../stores/CompletionResult.js';
-import type { TDSQuery } from '../components/grid/TDSQuery.js';
+import type {
+  CompletionItem,
+  DataCubeGetQueryCodeInput,
+  DataCubeGetQueryRelationReturnTypeInput,
+  DataCubeParseQueryInput,
+  DataCubeQueryTypeaheadInput,
+  RelationType,
+  DataCubeExecutionInput,
+  DataCubeExecutionResult,
+} from './models/DataCubeEngineModels.js';
+import type { V1_ValueSpecification } from '@finos/legend-graph';
+import type { DataCubeQuery } from './models/DataCubeQuery.js';
 
 export class REPLServerClient {
   private readonly networkClient: NetworkClient;
@@ -34,88 +42,52 @@ export class REPLServerClient {
   get baseUrl(): string {
     return guaranteeNonNullable(
       this.networkClient.baseUrl,
-      `REPL client has not been configured properly`,
+      `REPL server client has not been configured properly`,
     );
   }
 
-  getREPLGridServerResult = (
-    request: PlainObject<V1_Lambda>,
-  ): Promise<PlainObject<REPLGridServerResult>> =>
-    this.networkClient.post(
-      `${this.baseUrl}/gridResult`,
-      request,
-      undefined,
-      undefined,
-    );
-
-  getIntialQueryLambda = (): Promise<PlainObject<V1_Lambda>> =>
-    this.networkClient.get(
-      `${this.baseUrl}/initialLambda`,
-      undefined,
-      undefined,
-      undefined,
-    );
-
-  executeLambda = (
-    lambda: string,
-    isPaginationEnabled: boolean,
-  ): Promise<PlainObject<REPLGridServerResult>> =>
-    this.networkClient.post(
-      `${this.baseUrl}/executeLambda`,
-      lambda,
-      undefined,
-      undefined,
-      {
-        isPaginationEnabled,
-      },
-    );
+  private get dataCube(): string {
+    return `${this.baseUrl}/api/dataCube`;
+  }
 
-  getTypeaheadResults = (
-    lambda: string,
-  ): Promise<PlainObject<CompletionItem>[]> =>
-    this.networkClient.post(
-      `${this.baseUrl}/typeahead`,
-      lambda,
-      undefined,
-      undefined,
-    );
+  async getGridClientLicenseKey(): Promise<string> {
+    return this.networkClient.get(`${this.dataCube}/gridLicenseKey`);
+  }
 
-  parseQuery = (lambda: string): Promise<void> =>
-    this.networkClient.post(
-      `${this.baseUrl}/parseQuery`,
-      lambda,
-      undefined,
-      undefined,
-    );
+  async getQueryTypeahead(
+    input: DataCubeQueryTypeaheadInput,
+  ): Promise<PlainObject<CompletionItem>[]> {
+    return this.networkClient.post(`${this.dataCube}/typeahead`, input);
+  }
 
-  getInitialREPLGridServerResult = (
-    isPaginationEnabled: boolean,
-  ): Promise<PlainObject<REPLGridServerResult>> =>
-    this.networkClient.get(`${this.baseUrl}/gridResult`, undefined, undefined, {
-      isPaginationEnabled,
-    });
+  // TODO: @akphi - we might need to support batch, source information offset, etc.
+  async parseQuery(
+    input: DataCubeParseQueryInput,
+  ): Promise<PlainObject<V1_ValueSpecification>> {
+    return this.networkClient.post(`${this.dataCube}/parseQuery`, input);
+  }
+  async getQueryCode(
+    input: DataCubeGetQueryCodeInput,
+  ): Promise<PlainObject<string>> {
+    return this.networkClient.post(`${this.dataCube}/getQueryCode`, input);
+  }
 
-  getLicenseKey = (): Promise<string> =>
-    this.networkClient.get(
-      `${this.baseUrl}/licenseKey`,
-      undefined,
-      undefined,
-      undefined,
-    );
+  async getBaseQuery(): Promise<PlainObject<DataCubeQuery>> {
+    return this.networkClient.get(`${this.dataCube}/getBaseQuery`);
+  }
 
-  getREPLQuery = (queryId: string): Promise<PlainObject<TDSQuery>> =>
-    this.networkClient.get(
-      `${this.baseUrl}/query/${queryId}`,
-      undefined,
-      undefined,
-      undefined,
+  async getRelationReturnType(
+    input: DataCubeGetQueryRelationReturnTypeInput,
+  ): Promise<RelationType> {
+    return this.networkClient.post(
+      `${this.dataCube}/getRelationReturnType`,
+      input,
     );
+  }
 
-  saveQuery = (tdsQuery: PlainObject<TDSQuery>): Promise<string> =>
-    this.networkClient.post(
-      `${this.baseUrl}/saveQuery`,
-      tdsQuery,
-      undefined,
-      undefined,
-    );
+  async executeQuery(
+    input: PlainObject<DataCubeExecutionInput>,
+  ): Promise<DataCubeExecutionResult> {
+    return this.networkClient.post(`${this.dataCube}/executeQuery`, input);
+  }
 }

package/src/server/models/DataCubeEngineModels.ts

@@ -0,0 +1,84 @@
+/**
+ * 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 { createModelSchema, custom, optional, primitive } from 'serializr';
+import { SerializationFactory, usingModelSchema } from '@finos/legend-shared';
+import {
+  type V1_ValueSpecification,
+  type V1_Lambda,
+  V1_deserializeValueSpecification,
+  V1_serializeValueSpecification,
+  V1_lambdaModelSchema,
+} from '@finos/legend-graph';
+import type { DataCubeQueryColumn } from './DataCubeQuery.js';
+
+export class DataCubeGetQueryCodeInput {
+  query!: V1_ValueSpecification; // TODO: @akphi - consider if we should update this to use Lambda instead
+  pretty?: boolean;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(DataCubeGetQueryCodeInput, {
+      pretty: optional(primitive()),
+      query: custom(
+        (val) => V1_serializeValueSpecification(val, []),
+        (val) => V1_deserializeValueSpecification(val, []),
+      ),
+    }),
+  );
+}
+
+export type DataCubeParseQueryInput = {
+  code: string;
+  returnSourceInformation?: boolean | undefined;
+};
+
+export type CompletionItem = {
+  completion: string;
+  display: string;
+};
+
+export type DataCubeQueryTypeaheadInput = {
+  code: string;
+  isPartial?: boolean | undefined;
+};
+
+export class DataCubeGetQueryRelationReturnTypeInput {
+  query!: V1_Lambda;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(DataCubeGetQueryRelationReturnTypeInput, {
+      query: usingModelSchema(V1_lambdaModelSchema([])),
+    }),
+  );
+}
+
+export class DataCubeExecutionInput {
+  query!: V1_Lambda;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(DataCubeExecutionInput, {
+      query: usingModelSchema(V1_lambdaModelSchema([])),
+    }),
+  );
+}
+
+export type DataCubeExecutionResult = {
+  result: string;
+};
+
+export type RelationType = {
+  columns: DataCubeQueryColumn[];
+};