@finos/legend-query-builder 4.11.4 → 4.11.6

package/src/components/result/tds/QueryBuilderTDSSimpleGridResult.tsx

@@ -0,0 +1,387 @@
+/**
+ * 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 { ContextMenu, clsx } from '@finos/legend-art';
+import { observer } from 'mobx-react-lite';
+import type { QueryBuilderState } from '../../../stores/QueryBuilderState.js';
+import {
+  getTDSRowRankByColumnInAsc,
+  TDSExecutionResult,
+} from '@finos/legend-graph';
+import {
+  DataGrid,
+  type DataGridColumnDefinition,
+} from '@finos/legend-lego/data-grid';
+import {
+  getRowDataFromExecutionResult,
+  QueryBuilderGridResultContextMenu,
+  type IQueryRendererParamsWithGridType,
+} from './QueryBuilderTDSResultShared.js';
+import { QueryBuilderTDSState } from '../../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
+import { DEFAULT_LOCALE } from '../../../graph-manager/QueryBuilderConst.js';
+import { isNumber, isString, isValidURL } from '@finos/legend-shared';
+import type {
+  QueryBuilderTDSResultCellCoordinate,
+  QueryBuilderTDSResultCellData,
+  QueryBuilderTDSResultCellDataType,
+  QueryBuilderTDSRowDataType,
+} from '../../../stores/QueryBuilderResultState.js';
+
+const QueryResultCellRenderer = observer(
+  (params: IQueryRendererParamsWithGridType) => {
+    const resultState = params.resultState;
+    const tdsExecutionResult = params.tdsExecutionResult;
+    const fetchStructureImplementation =
+      resultState.queryBuilderState.fetchStructureState.implementation;
+    const applicationStore = resultState.queryBuilderState.applicationStore;
+    const cellValue = params.value as QueryBuilderTDSResultCellDataType;
+    const formattedCellValue = (): QueryBuilderTDSResultCellDataType => {
+      if (isNumber(cellValue)) {
+        return Intl.NumberFormat(DEFAULT_LOCALE, {
+          maximumFractionDigits: 4,
+        }).format(Number(cellValue));
+      }
+      return cellValue;
+    };
+    const cellValueUrlLink =
+      isString(cellValue) && isValidURL(cellValue) ? cellValue : undefined;
+    const columnName = params.column?.getColId() ?? '';
+    const findCoordinatesFromResultValue = (
+      colId: string,
+      rowNumber: number,
+    ): QueryBuilderTDSResultCellCoordinate => {
+      const colIndex = tdsExecutionResult.result.columns.findIndex(
+        (col) => col === colId,
+      );
+      return { rowIndex: rowNumber, colIndex: colIndex };
+    };
+
+    const currentCellCoordinates = findCoordinatesFromResultValue(
+      columnName,
+      params.rowIndex,
+    );
+    const cellInFilteredResults = resultState.selectedCells.some(
+      (result) =>
+        result.coordinates.colIndex === currentCellCoordinates.colIndex &&
+        result.coordinates.rowIndex === currentCellCoordinates.rowIndex,
+    );
+
+    const findColumnFromCoordinates = (
+      colIndex: number,
+    ): QueryBuilderTDSResultCellDataType => {
+      if (
+        !resultState.executionResult ||
+        !(resultState.executionResult instanceof TDSExecutionResult)
+      ) {
+        return undefined;
+      }
+      return resultState.executionResult.result.columns[colIndex];
+    };
+
+    const findResultValueFromCoordinates = (
+      resultCoordinate: [number, number],
+    ): QueryBuilderTDSResultCellDataType => {
+      const rowIndex = resultCoordinate[0];
+      const colIndex = resultCoordinate[1];
+
+      if (
+        !resultState.executionResult ||
+        !(resultState.executionResult instanceof TDSExecutionResult)
+      ) {
+        return undefined;
+      }
+      if (params.columnApi.getColumnState()[colIndex]?.sort === 'asc') {
+        resultState.executionResult.result.rows.sort((a, b) =>
+          getTDSRowRankByColumnInAsc(a, b, colIndex),
+        );
+      } else if (params.columnApi.getColumnState()[colIndex]?.sort === 'desc') {
+        resultState.executionResult.result.rows.sort((a, b) =>
+          getTDSRowRankByColumnInAsc(b, a, colIndex),
+        );
+      }
+      return resultState.executionResult.result.rows[rowIndex]?.values[
+        colIndex
+      ];
+    };
+
+    const isCoordinatesSelected = (
+      resultCoordinate: QueryBuilderTDSResultCellCoordinate,
+    ): boolean =>
+      resultState.selectedCells.some(
+        (cell) =>
+          cell.coordinates.rowIndex === resultCoordinate.rowIndex &&
+          cell.coordinates.colIndex === resultCoordinate.colIndex,
+      );
+
+    const mouseDown: React.MouseEventHandler = (event) => {
+      event.preventDefault();
+
+      if (event.shiftKey) {
+        const coordinates = findCoordinatesFromResultValue(
+          columnName,
+          params.rowIndex,
+        );
+        const actualValue = findResultValueFromCoordinates([
+          coordinates.rowIndex,
+          coordinates.colIndex,
+        ]);
+        resultState.addSelectedCell({
+          value: actualValue,
+          columnName: columnName,
+          coordinates: coordinates,
+        });
+        return;
+      }
+
+      if (event.button === 0) {
+        resultState.setIsSelectingCells(true);
+        resultState.setSelectedCells([]);
+        const coordinates = findCoordinatesFromResultValue(
+          columnName,
+          params.rowIndex,
+        );
+        const actualValue = findResultValueFromCoordinates([
+          coordinates.rowIndex,
+          coordinates.colIndex,
+        ]);
+        resultState.setSelectedCells([
+          {
+            value: actualValue,
+            columnName: columnName,
+            coordinates: coordinates,
+          },
+        ]);
+        resultState.setMouseOverCell(resultState.selectedCells[0] ?? null);
+      }
+
+      if (event.button === 2) {
+        const coordinates = findCoordinatesFromResultValue(
+          columnName,
+          params.rowIndex,
+        );
+        const isInSelected = isCoordinatesSelected(coordinates);
+        if (!isInSelected) {
+          const actualValue = findResultValueFromCoordinates([
+            coordinates.rowIndex,
+            coordinates.colIndex,
+          ]);
+          resultState.setSelectedCells([
+            {
+              value: actualValue,
+              columnName: columnName,
+              coordinates: coordinates,
+            },
+          ]);
+          resultState.setMouseOverCell(resultState.selectedCells[0] ?? null);
+        }
+      }
+    };
+
+    const mouseUp: React.MouseEventHandler = (event) => {
+      resultState.setIsSelectingCells(false);
+    };
+
+    const mouseOver: React.MouseEventHandler = (event) => {
+      if (resultState.isSelectingCells) {
+        if (resultState.selectedCells.length < 1) {
+          return;
+        }
+        const results = resultState.selectedCells[0];
+        if (!results) {
+          return;
+        }
+
+        const firstCorner = results.coordinates;
+        const secondCorner = findCoordinatesFromResultValue(
+          columnName,
+          params.rowIndex,
+        );
+
+        resultState.setSelectedCells([results]);
+
+        const minRow = Math.min(firstCorner.rowIndex, secondCorner.rowIndex);
+        const minCol = Math.min(firstCorner.colIndex, secondCorner.colIndex);
+        const maxRow = Math.max(firstCorner.rowIndex, secondCorner.rowIndex);
+        const maxCol = Math.max(firstCorner.colIndex, secondCorner.colIndex);
+
+        for (let x = minRow; x <= maxRow; x++) {
+          for (let y = minCol; y <= maxCol; y++) {
+            const actualValue = findResultValueFromCoordinates([x, y]);
+
+            const valueAndColumnId = {
+              value: actualValue,
+              columnName: findColumnFromCoordinates(y),
+              coordinates: {
+                rowIndex: x,
+                colIndex: y,
+              },
+            } as QueryBuilderTDSResultCellData;
+
+            if (
+              !resultState.selectedCells.find(
+                (result) =>
+                  result.coordinates.colIndex === y &&
+                  result.coordinates.rowIndex === x,
+              )
+            ) {
+              resultState.addSelectedCell(valueAndColumnId);
+            }
+          }
+        }
+      }
+
+      resultState.setMouseOverCell(resultState.selectedCells[0] ?? null);
+    };
+    const getContextMenuRenderer = (): React.ReactNode => {
+      if (fetchStructureImplementation instanceof QueryBuilderTDSState) {
+        const copyCellValue = applicationStore.guardUnhandledError(() =>
+          applicationStore.clipboardService.copyTextToClipboard(
+            fetchStructureImplementation.queryBuilderState.resultState.selectedCells
+              .map((cellData) => cellData.value)
+              .join(','),
+          ),
+        );
+        const findRowFromRowIndex = (rowIndex: number): string => {
+          if (
+            !fetchStructureImplementation.queryBuilderState.resultState
+              .executionResult ||
+            !(
+              fetchStructureImplementation.queryBuilderState.resultState
+                .executionResult instanceof TDSExecutionResult
+            )
+          ) {
+            return '';
+          }
+          // try to get the entire row value separated by comma
+          // rowData is in format of {columnName: value, columnName1: value, ...., rowNumber:value}
+          const valueArr: QueryBuilderTDSResultCellDataType[] = [];
+          Object.entries(
+            params.api.getRenderedNodes().find((n) => n.rowIndex === rowIndex)
+              ?.data as QueryBuilderTDSRowDataType,
+          ).forEach((entry) => {
+            if (entry[0] !== 'rowNumber') {
+              valueArr.push(entry[1] as QueryBuilderTDSResultCellDataType);
+            }
+          });
+          return valueArr.join(',');
+        };
+        const copyRowValue = applicationStore.guardUnhandledError(() =>
+          applicationStore.clipboardService.copyTextToClipboard(
+            findRowFromRowIndex(
+              fetchStructureImplementation.queryBuilderState.resultState
+                .selectedCells[0]?.coordinates.rowIndex ?? 0,
+            ),
+          ),
+        );
+        return (
+          <QueryBuilderGridResultContextMenu
+            data={resultState.mousedOverCell}
+            tdsState={fetchStructureImplementation}
+            copyCellValueFunc={copyCellValue}
+            copyCellRowValueFunc={copyRowValue}
+          />
+        );
+      }
+      return null;
+    };
+
+    return (
+      <ContextMenu
+        content={getContextMenuRenderer()}
+        disabled={
+          !(
+            resultState.queryBuilderState.fetchStructureState
+              .implementation instanceof QueryBuilderTDSState
+          ) ||
+          !resultState.queryBuilderState.isQuerySupported ||
+          !resultState.mousedOverCell
+        }
+        menuProps={{ elevation: 7 }}
+        className={clsx('ag-theme-balham-dark query-builder__result__tds-grid')}
+      >
+        <div
+          className={clsx('query-builder__result__values__table__cell', {
+            'query-builder__result__values__table__cell--active':
+              cellInFilteredResults,
+          })}
+          onMouseDown={(event) => mouseDown(event)}
+          onMouseUp={(event) => mouseUp(event)}
+          onMouseOver={(event) => mouseOver(event)}
+        >
+          {cellValueUrlLink ? (
+            <a href={cellValueUrlLink} target="_blank" rel="noreferrer">
+              {cellValueUrlLink}
+            </a>
+          ) : (
+            <span>{formattedCellValue()}</span>
+          )}
+        </div>
+      </ContextMenu>
+    );
+  },
+);
+
+export const QueryBuilderTDSSimpleGridResult = observer(
+  (props: {
+    executionResult: TDSExecutionResult;
+    queryBuilderState: QueryBuilderState;
+  }) => {
+    const { executionResult, queryBuilderState } = props;
+    const resultState = queryBuilderState.resultState;
+    const colDefs = executionResult.result.columns.map(
+      (colName) =>
+        ({
+          minWidth: 50,
+          sortable: true,
+          resizable: true,
+          field: colName,
+          flex: 1,
+          cellRenderer: QueryResultCellRenderer,
+          cellRendererParams: {
+            resultState: resultState,
+            tdsExecutionResult: executionResult,
+          },
+        }) as DataGridColumnDefinition,
+    );
+
+    return (
+      <div className="query-builder__result__values__table">
+        <div
+          className={clsx(
+            'ag-theme-balham-dark query-builder__result__tds-grid',
+          )}
+        >
+          <DataGrid
+            rowData={getRowDataFromExecutionResult(executionResult)}
+            gridOptions={{
+              suppressScrollOnNewData: true,
+              getRowId: (data) => data.data.rowNumber,
+              rowSelection: 'multiple',
+            }}
+            // NOTE: when column definition changed, we need to force refresh the cell to make sure the cell renderer is updated
+            // See https://stackoverflow.com/questions/56341073/how-to-refresh-an-ag-grid-when-a-change-occurs-inside-a-custom-cell-renderer-com
+            onRowDataUpdated={(params) => {
+              params.api.refreshCells({ force: true });
+            }}
+            suppressFieldDotNotation={true}
+            suppressContextMenu={false}
+            columnDefs={colDefs}
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/src/stores/QueryBuilderResultState.ts

@@ -52,13 +52,24 @@ import type { DataGridColumnState } from '@finos/legend-lego/data-grid';
 
 export const DEFAULT_LIMIT = 1000;
 
+export type QueryBuilderTDSResultCellDataType =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined;
+
+export interface QueryBuilderTDSRowDataType {
+  [key: string]: QueryBuilderTDSResultCellDataType;
+}
+
 export interface ExportDataInfo {
   contentType: ContentType;
   serializationFormat?: EXECUTION_SERIALIZATION_FORMAT | undefined;
 }
 
 export interface QueryBuilderTDSResultCellData {
-  value: string | number | boolean | null | undefined;
+  value: QueryBuilderTDSResultCellDataType;
   columnName: string;
   coordinates: QueryBuilderTDSResultCellCoordinate;
 }

package/tsconfig.json

@@ -217,7 +217,6 @@
     "./src/components/QueryBuilderNavigationBlocker.tsx",
     "./src/components/QueryBuilderParametersPanel.tsx",
     "./src/components/QueryBuilderPropertyExpressionEditor.tsx",
-    "./src/components/QueryBuilderResultPanel.tsx",
     "./src/components/QueryBuilderSideBar.tsx",
     "./src/components/QueryBuilderTextEditor.tsx",
     "./src/components/QueryBuilderUnsupportedQueryEditor.tsx",
@@ -257,6 +256,10 @@
     "./src/components/fetch-structure/QueryBuilderTDSPanel.tsx",
     "./src/components/fetch-structure/QueryBuilderTDSWindowPanel.tsx",
     "./src/components/filter/QueryBuilderFilterPanel.tsx",
+    "./src/components/result/QueryBuilderResultPanel.tsx",
+    "./src/components/result/tds/QueryBuilderTDSGridResult.tsx",
+    "./src/components/result/tds/QueryBuilderTDSResultShared.tsx",
+    "./src/components/result/tds/QueryBuilderTDSSimpleGridResult.tsx",
     "./src/components/shared/BasicValueSpecificationEditor.tsx",
     "./src/components/shared/CustomDatePicker.tsx",
     "./src/components/shared/LambdaEditor.tsx",

package/lib/components/QueryBuilderResultPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"QueryBuilderResultPanel.d.ts","sourceRoot":"","sources":["../../src/components/QueryBuilderResultPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AA+BH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAmFxE,eAAO,MAAM,cAAc,QAAS,MAAM,KAAG,MAY5C,CAAC;AAmzBF,eAAO,MAAM,uBAAuB,WAC1B;IAAE,iBAAiB,EAAE,iBAAiB,CAAA;CAAE;;CAmcjD,CAAC"}