@finos/legend-application-repl 0.0.2

package/src/components/REPLGridClient.tsx

@@ -0,0 +1,157 @@
+/**
+ * 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 {
+  useREPLGridClientStore,
+  withEditorStore,
+} from './REPLGridClientStoreProvider.js';
+import { AgGridComponent } from './AgGrid.js';
+import { useEffect } from 'react';
+import { flowResult } from 'mobx';
+import { getTDSRowData } from '../components/grid/GridUtils.js';
+import { ServerSideDataSource } from '../components/grid/ServerSideDataSource.js';
+import { LEGEND_APPLICATION_COLOR_THEME } from '@finos/legend-application';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
+  CodeDiffView,
+  CodeEditor,
+} from '@finos/legend-lego/code-editor';
+
+export const Editor = withEditorStore(
+  observer(() => {
+    const editorStore = useREPLGridClientStore();
+    const selectDarkTheme = (): void => {
+      editorStore.applicationStore.layoutService.setColorTheme(
+        LEGEND_APPLICATION_COLOR_THEME.DEFAULT_DARK,
+        { persist: true },
+      );
+    };
+    const title = `Current Query <-> Current Row Group Sub Query`;
+    const selectLightTheme = (): void => {
+      editorStore.applicationStore.layoutService.setColorTheme(
+        LEGEND_APPLICATION_COLOR_THEME.LEGACY_LIGHT,
+        { persist: true },
+      );
+    };
+    const isLightTheme =
+      editorStore.applicationStore.layoutService
+        .TEMPORARY__isLightColorThemeEnabled;
+
+    useEffect(() => {
+      flowResult(editorStore.getInitialREPLGridServerResult()).catch(
+        editorStore.applicationStore.alertUnhandledError,
+      );
+    }, [editorStore]);
+
+    return (
+      <div className="repl">
+        <div className="repl__header">
+          <div className="repl__header__content">
+            <div className="repl__header__content__title">REPL Grid</div>
+            <div className="repl__header__actions">
+              <button
+                className={
+                  isLightTheme
+                    ? 'repl__header__action'
+                    : 'repl__header__action repl__header__action--toggled'
+                }
+                onClick={selectDarkTheme}
+              >
+                Dark
+              </button>
+              <button
+                className={
+                  isLightTheme
+                    ? 'repl__header__action repl__header__action--toggled'
+                    : 'repl__header__action'
+                }
+                onClick={selectLightTheme}
+              >
+                Light
+              </button>
+            </div>
+          </div>
+        </div>
+        {editorStore.replGridState.initialResult &&
+          editorStore.replGridState.columns && (
+            <div className="repl__content">
+              {editorStore.replGridState.currentSubQuery !== undefined && (
+                <>
+                  <div className="repl__query__label">{title}</div>
+                  <div className="repl__query__content">
+                    <CodeDiffView
+                      language={CODE_EDITOR_LANGUAGE.PURE}
+                      from={editorStore.replGridState.currentQuery}
+                      to={editorStore.replGridState.currentSubQuery}
+                    />
+                  </div>
+                </>
+              )}
+              {editorStore.replGridState.currentSubQuery === undefined && (
+                <div className="repl__query">
+                  <div className="repl__query__editor">
+                    <div className="repl__query__label">Curent Query</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}
+                        inputValue={
+                          editorStore.replGridState.currentQuery ?? ''
+                        }
+                        hideActionBar={true}
+                        isReadOnly={true}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+              <div className="repl__query__label">Result</div>
+              <AgGridComponent
+                className={
+                  editorStore.applicationStore.layoutService
+                    .TEMPORARY__isLightColorThemeEnabled
+                    ? 'ag-theme-balham'
+                    : 'ag-theme-balham-dark'
+                }
+                gridOptions={
+                  editorStore.replGridState.licenseKey
+                    ? {
+                        serverSideDatasource: new ServerSideDataSource(
+                          getTDSRowData(
+                            editorStore.replGridState.initialResult.result,
+                          ),
+                          editorStore.replGridState.initialResult.builder.columns,
+                          editorStore,
+                        ),
+                      }
+                    : {}
+                }
+                licenseKey={editorStore.replGridState.licenseKey ?? ''}
+                rowData={editorStore.replGridState.rowData}
+                columnDefs={editorStore.replGridState.columnDefs}
+              />
+            </div>
+          )}
+      </div>
+    );
+  }),
+);

package/src/components/REPLGridClientStoreProvider.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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, useContext } from 'react';
+import { useLocalObservable } from 'mobx-react-lite';
+import { REPLGridClientStore } from '../stores/REPLGridClientStore.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';
+
+const EditorStoreContext = createContext<REPLGridClientStore | undefined>(
+  undefined,
+);
+
+export const REPLGridClientStoreProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement => {
+  const applicationStore = useApplicationStore<
+    LegendREPLGridClientApplicationConfig,
+    LegendREPLGridClientPluginManager
+  >();
+  const store = useLocalObservable(
+    () => new REPLGridClientStore(applicationStore),
+  );
+  return (
+    <EditorStoreContext.Provider value={store}>
+      {children}
+    </EditorStoreContext.Provider>
+  );
+};
+
+export const useREPLGridClientStore = (): REPLGridClientStore =>
+  guaranteeNonNullable(
+    useContext(EditorStoreContext),
+    `Can't find editor store in context`,
+  );
+
+export const withEditorStore = (WrappedComponent: React.FC): React.FC =>
+  function WithEditorStore() {
+    return (
+      <REPLGridClientStoreProvider>
+        <WrappedComponent />
+      </REPLGridClientStoreProvider>
+    );
+  };

package/src/components/grid/GridUtils.ts

@@ -0,0 +1,190 @@
+/**
+ * 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 {
+  TDS_AGGREGATION_FUNCTION,
+  TDS_FILTER_OPERATION,
+  TDS_SORT_ORDER,
+} from './TDSRequest.js';
+import {
+  type TDSExecutionResult,
+  type TabularDataSet,
+  PRIMITIVE_TYPE,
+} from '@finos/legend-graph';
+import { isBoolean } from '@finos/legend-shared';
+
+export type TDSResultCellDataType =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined;
+
+export interface TDSRowDataType {
+  [key: string]: TDSResultCellDataType;
+}
+
+export const getTDSSortOrder = (sortOrder: string): TDS_SORT_ORDER => {
+  switch (sortOrder) {
+    case 'asc':
+      return TDS_SORT_ORDER.ASCENDING;
+    case 'desc':
+      return TDS_SORT_ORDER.DESCENDING;
+    default:
+      throw new Error(`Unsupported tds sort order ${sortOrder}`);
+  }
+};
+
+export const getAggregationFunction = (
+  aggFunc: string,
+): TDS_AGGREGATION_FUNCTION => {
+  switch (aggFunc) {
+    case 'sum':
+      return TDS_AGGREGATION_FUNCTION.SUM;
+    case 'min':
+      return TDS_AGGREGATION_FUNCTION.MIN;
+    case 'max':
+      return TDS_AGGREGATION_FUNCTION.MAX;
+    case 'count':
+      return TDS_AGGREGATION_FUNCTION.COUNT;
+    default:
+      throw new Error(`Unsupported aggregation function ${aggFunc}`);
+  }
+};
+
+export const getTDSFilterOperation = (
+  filterOperation: string,
+): TDS_FILTER_OPERATION => {
+  switch (filterOperation) {
+    case 'equals':
+      return TDS_FILTER_OPERATION.EQUALS;
+    case 'notEqual':
+      return TDS_FILTER_OPERATION.NOT_EQUAL;
+    case 'greaterThan':
+      return TDS_FILTER_OPERATION.GREATER_THAN;
+    case 'greaterThanOrEqual':
+      return TDS_FILTER_OPERATION.GREATER_THAN_OR_EQUAL;
+    case 'lessThan':
+      return TDS_FILTER_OPERATION.LESS_THAN;
+    case 'lessThanOrEqual':
+      return TDS_FILTER_OPERATION.LESS_THAN_OR_EQUAL;
+    case 'blank':
+      return TDS_FILTER_OPERATION.BLANK;
+    case 'notBlank':
+      return TDS_FILTER_OPERATION.NOT_BLANK;
+    case 'contains':
+      return TDS_FILTER_OPERATION.CONTAINS;
+    case 'notContains':
+      return TDS_FILTER_OPERATION.NOT_CONTAINS;
+    case 'startsWith':
+      return TDS_FILTER_OPERATION.STARTS_WITH;
+    case 'endsWith':
+      return TDS_FILTER_OPERATION.ENDS_WITH;
+    default:
+      throw new Error(`Unsupported filter operation ${filterOperation}`);
+  }
+};
+
+export const getFilterColumnType = (type: string): PRIMITIVE_TYPE => {
+  switch (type) {
+    case 'text':
+      return PRIMITIVE_TYPE.STRING;
+    case 'number':
+      return PRIMITIVE_TYPE.NUMBER;
+    case 'boolean':
+      return PRIMITIVE_TYPE.BOOLEAN;
+    case 'date':
+      return PRIMITIVE_TYPE.DATE;
+    default:
+      throw new Error(`Unsupported filter type ${type}`);
+  }
+};
+
+export const getAggregationTDSColumnCustomizations = (
+  isAgGridLicenseEnabled: boolean,
+  result: TDSExecutionResult,
+  columnName: string,
+): object => {
+  if (!isAgGridLicenseEnabled) {
+    return {};
+  }
+  const columnType = result.builder.columns.find(
+    (col) => col.name === columnName,
+  )?.type;
+  switch (columnType) {
+    case PRIMITIVE_TYPE.STRING:
+      return {
+        filter: 'agTextColumnFilter',
+        allowedAggFuncs: ['count'],
+      };
+    case PRIMITIVE_TYPE.DATE:
+    case PRIMITIVE_TYPE.DATETIME:
+    case PRIMITIVE_TYPE.STRICTDATE:
+      return {
+        filter: 'agDateColumnFilter',
+        allowedAggFuncs: ['count'],
+      };
+    case PRIMITIVE_TYPE.DECIMAL:
+    case PRIMITIVE_TYPE.INTEGER:
+    case PRIMITIVE_TYPE.FLOAT:
+      return {
+        filter: 'agNumberColumnFilter',
+        allowedAggFuncs: ['count', 'sum', 'max', 'min', 'avg'],
+      };
+    default:
+      return {
+        allowedAggFuncs: ['count'],
+      };
+  }
+};
+
+export const getDefaultColumnDefintions = (
+  isAgGridLicenseEnabled: boolean,
+): object => {
+  if (isAgGridLicenseEnabled) {
+    return {
+      minWidth: 50,
+      sortable: true,
+      flex: 1,
+      resizable: true,
+      enableRowGroup: true,
+      allowedAggFuncs: ['count', 'sum', 'max', 'min', 'avg'],
+      enableValue: true,
+      menuTabs: ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab'],
+    };
+  } else {
+    return {
+      minWidth: 50,
+      sortable: true,
+      flex: 1,
+      resizable: true,
+      menuTabs: ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab'],
+    };
+  }
+};
+
+export const getTDSRowData = (tds: TabularDataSet): TDSRowDataType[] =>
+  tds.rows.map((_row, rowIdx) => {
+    const row: TDSRowDataType = {};
+    const cols = tds.columns;
+    _row.values.forEach((value, colIdx) => {
+      // `ag-grid` shows `false` value as empty string so we have
+      // call `.toString()` to avoid this behavior.
+      row[cols[colIdx] as string] = isBoolean(value) ? String(value) : value;
+    });
+    row.rowNumber = rowIdx;
+    return row;
+  });

package/src/components/grid/REPLGridServerResult.ts

@@ -0,0 +1,30 @@
+/**
+ * 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, primitive } from 'serializr';
+import { SerializationFactory } from '@finos/legend-shared';
+
+export class REPLGridServerResult {
+  currentQuery!: string;
+  result!: string;
+
+  static readonly serialization = new SerializationFactory(
+    createModelSchema(REPLGridServerResult, {
+      currentQuery: primitive(),
+      result: primitive(),
+    }),
+  );
+}

package/src/components/grid/ServerSideDataSource.ts

@@ -0,0 +1,184 @@
+/**
+ * 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 {
+  IServerSideDatasource,
+  IServerSideGetRowsParams,
+} from '@ag-grid-community/core';
+import {
+  TDSGroupby,
+  TDSAggregation,
+  TDSFilter,
+  TDSRequest,
+  TDSSort,
+  TDSFilterCondition,
+  TDS_FILTER_GROUP,
+} from './TDSRequest.js';
+import {
+  guaranteeNonNullable,
+  type GeneratorFn,
+  assertErrorThrown,
+  LogEvent,
+} from '@finos/legend-shared';
+import { LEGEND_REPL_EVENT } from '../../Const.js';
+import {
+  type TDSRowDataType,
+  getTDSRowData,
+  getTDSSortOrder,
+  getTDSFilterOperation,
+  getAggregationFunction,
+  getFilterColumnType,
+} from './GridUtils.js';
+import type { REPLGridClientStore } from '../../stores/REPLGridClientStore.js';
+import { flow, flowResult, makeObservable } from 'mobx';
+import type { INTERNAL__TDSColumn, PRIMITIVE_TYPE } from '@finos/legend-graph';
+
+export class ServerSideDataSource implements IServerSideDatasource {
+  executions = 0;
+  rowData: TDSRowDataType[] = [];
+  columns: INTERNAL__TDSColumn[] = [];
+  editorStore?: REPLGridClientStore | undefined;
+
+  constructor(
+    rowData?: TDSRowDataType[] | undefined,
+    columns?: INTERNAL__TDSColumn[] | undefined,
+    editorStore?: REPLGridClientStore | undefined,
+  ) {
+    makeObservable(this, {
+      fetchRows: flow,
+    });
+    this.rowData = rowData ?? [];
+    this.columns = columns ?? [];
+    this.editorStore = editorStore;
+  }
+
+  *fetchRows(
+    params: IServerSideGetRowsParams<unknown, unknown>,
+  ): GeneratorFn<void> {
+    try {
+      if (this.executions > 0) {
+        if (this.editorStore) {
+          const request = this.extractRequest(params);
+          if (request) {
+            yield flowResult(this.editorStore.getREPLGridServerResult(request));
+            const result = this.editorStore.replGridState.currentResult;
+            const rowData = getTDSRowData(guaranteeNonNullable(result).result);
+            params.success({ rowData: rowData });
+          } else {
+            params.fail();
+          }
+        }
+      } else {
+        params.success({ rowData: this.rowData });
+      }
+      this.executions++;
+    } catch (error) {
+      assertErrorThrown(error);
+      this.editorStore?.applicationStore.notificationService.notifyError(error);
+      this.editorStore?.applicationStore.logService.error(
+        LogEvent.create(LEGEND_REPL_EVENT.FETCH_TDS_FAILURE),
+        error,
+      );
+    }
+  }
+
+  getRows(params: IServerSideGetRowsParams<unknown, unknown>): void {
+    this.fetchRows(params);
+  }
+
+  extractRequest(
+    params: IServerSideGetRowsParams<unknown, unknown>,
+  ): TDSRequest | undefined {
+    try {
+      const request = params.request;
+      const startRow = request.startRow;
+      const endRow = request.endRow;
+      const columns = params.columnApi.getColumns()?.map((c) => c.getColId());
+      const sort = request.sortModel.map(
+        (i) => new TDSSort(i.colId, getTDSSortOrder(i.sort)),
+      );
+      const aggregations = request.valueCols.map((v) => {
+        const colType = this.columns.find((c) => c.name === v.field)?.type;
+        return new TDSAggregation(
+          guaranteeNonNullable(v.field),
+          colType as PRIMITIVE_TYPE,
+          getAggregationFunction(guaranteeNonNullable(v.aggFunc)),
+        );
+      });
+      const groupBy = new TDSGroupby(
+        request.rowGroupCols.map((r) => r.id),
+        request.groupKeys,
+        aggregations,
+      );
+      const filter: TDSFilter[] = [];
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const filterModel = request.filterModel;
+      if (filterModel) {
+        Object.keys(filterModel).forEach((key) => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const item = filterModel[key];
+          const conditions: TDSFilterCondition[] = [];
+          const colType = getFilterColumnType(item.filterType);
+          if (item.filter === undefined && item.conditions) {
+            item.conditions.forEach(
+              (condition: { type: string; filter: unknown }) =>
+                conditions.push(
+                  new TDSFilterCondition(
+                    getTDSFilterOperation(condition.type),
+                    condition.filter,
+                  ),
+                ),
+            );
+          } else {
+            conditions.push(
+              new TDSFilterCondition(
+                getTDSFilterOperation(item.type),
+                item.filter,
+              ),
+            );
+          }
+          filter.push(
+            new TDSFilter(
+              key,
+              colType as PRIMITIVE_TYPE,
+              conditions,
+              item.operator === 'OR'
+                ? TDS_FILTER_GROUP.OR
+                : TDS_FILTER_GROUP.AND,
+            ),
+          );
+        });
+      }
+      const tdsRequest = new TDSRequest(
+        columns ?? [],
+        filter,
+        sort,
+        groupBy,
+        startRow,
+        endRow,
+      );
+      return tdsRequest;
+    } catch (error) {
+      assertErrorThrown(error);
+      this.editorStore?.applicationStore.notificationService.notifyError(error);
+      this.editorStore?.applicationStore.logService.error(
+        LogEvent.create(LEGEND_REPL_EVENT.BUILD_TDS_EQUEST_FAILURE),
+        error,
+      );
+      return undefined;
+    }
+  }
+}