@finos/legend-query-builder 4.11.5 → 4.11.6

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

@@ -14,18 +14,325 @@
  * limitations under the License.
  */
 
-import { clsx } from '@finos/legend-art';
+import { ContextMenu, clsx } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import type { QueryBuilderState } from '../../../stores/QueryBuilderState.js';
-import type { TDSExecutionResult } from '@finos/legend-graph';
+import {
+  getTDSRowRankByColumnInAsc,
+  TDSExecutionResult,
+} from '@finos/legend-graph';
 import {
   DataGrid,
   type DataGridColumnDefinition,
 } from '@finos/legend-lego/data-grid';
 import {
   getRowDataFromExecutionResult,
-  QueryResultCellRenderer,
+  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: {