@finos/legend-query-builder 4.7.1 → 4.7.3

package/src/components/QueryBuilderResultPanel.tsx

@@ -39,7 +39,6 @@ import {
   PanelDivider,
 } from '@finos/legend-art';
 import { format as formatSQL } from 'sql-formatter';
-
 import { observer } from 'mobx-react-lite';
 import { flowResult } from 'mobx';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
@@ -99,6 +98,7 @@ import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
 import {
   DataGrid,
   type DataGridCellRendererParams,
+  type DataGridColumnDefinition,
 } from '@finos/legend-lego/data-grid';
 import {
   CODE_EDITOR_LANGUAGE,
@@ -115,6 +115,7 @@ import {
   QueryBuilderPostFilterOperator_IsNotEmpty,
 } from '../stores/fetch-structure/tds/post-filter/operators/QueryBuilderPostFilterOperator_IsEmpty.js';
 import { QueryUsageViewer } from './QueryUsageViewer.js';
+import { DEFAULT_LOCALE } from '../graph-manager/QueryBuilderConst.js';
 
 export const tryToFormatSql = (sql: string): string => {
   try {
@@ -479,8 +480,15 @@ const QueryResultCellRenderer = observer(
   (params: IQueryRendererParamsWithGridType) => {
     const resultState = params.resultState;
     const tdsExecutionResult = params.tdsExecutionResult;
+    const fetchStructureImplementation =
+      resultState.queryBuilderState.fetchStructureState.implementation;
 
     const cellValue = params.value as string;
+    const formattedCellValue = !isNaN(Number(cellValue))
+      ? Intl.NumberFormat(DEFAULT_LOCALE, { maximumFractionDigits: 4 }).format(
+          Number(cellValue),
+        )
+      : cellValue;
     const columnName = params.column?.getColId() ?? '';
 
     const findCoordinatesFromResultValue = (
@@ -498,7 +506,6 @@ const QueryResultCellRenderer = observer(
       columnName,
       params.rowIndex,
     );
-
     const cellInFilteredResults = resultState.selectedCells.some(
       (result) =>
         result.coordinates.colIndex === currentCellCoordinates.colIndex &&
@@ -564,7 +571,7 @@ const QueryResultCellRenderer = observer(
           coordinates.rowIndex,
           coordinates.colIndex,
         ]);
-        resultState.addCellData({
+        resultState.addSelectedCell({
           value: actualValue,
           columnName: columnName,
           coordinates: coordinates,
@@ -583,9 +590,6 @@ const QueryResultCellRenderer = observer(
           coordinates.rowIndex,
           coordinates.colIndex,
         ]);
-
-        const rowNode = params.api.getRowNode(params.rowIndex.toString());
-
         resultState.setSelectedCells([
           {
             value: actualValue,
@@ -593,15 +597,6 @@ const QueryResultCellRenderer = observer(
             coordinates: coordinates,
           },
         ]);
-
-        if (rowNode) {
-          params.api.refreshCells({
-            force: true,
-            columns: [columnName],
-            rowNodes: [rowNode],
-          });
-        }
-
         resultState.setMouseOverCell(resultState.selectedCells[0] ?? null);
       }
 
@@ -616,7 +611,6 @@ const QueryResultCellRenderer = observer(
             coordinates.rowIndex,
             coordinates.colIndex,
           ]);
-
           resultState.setSelectedCells([
             {
               value: actualValue,
@@ -624,19 +618,11 @@ const QueryResultCellRenderer = observer(
               coordinates: coordinates,
             },
           ]);
-          const rowNode = params.api.getRowNode(params.rowIndex.toString());
-
-          if (rowNode) {
-            params.api.refreshCells({
-              force: true,
-              columns: [columnName],
-              rowNodes: [rowNode],
-            });
-          }
           resultState.setMouseOverCell(resultState.selectedCells[0] ?? null);
         }
       }
     };
+
     const mouseUp: React.MouseEventHandler = (event) => {
       resultState.setIsSelectingCells(false);
     };
@@ -684,7 +670,7 @@ const QueryResultCellRenderer = observer(
                   result.coordinates.rowIndex === x,
               )
             ) {
-              resultState.addCellData(valueAndColumnId);
+              resultState.addSelectedCell(valueAndColumnId);
             }
           }
         }
@@ -693,9 +679,6 @@ const QueryResultCellRenderer = observer(
       resultState.setMouseOverCell(resultState.selectedCells[0] ?? null);
     };
 
-    const fetchStructureImplementation =
-      resultState.queryBuilderState.fetchStructureState.implementation;
-
     return (
       <ContextMenu
         content={
@@ -716,7 +699,6 @@ const QueryResultCellRenderer = observer(
           !resultState.mousedOverCell
         }
         menuProps={{ elevation: 7 }}
-        key={params.value as string}
         className={clsx('ag-theme-balham-dark query-builder__result__tds-grid')}
       >
         <div
@@ -733,7 +715,7 @@ const QueryResultCellRenderer = observer(
               {cellValue}
             </a>
           ) : (
-            <span>{cellValue}</span>
+            <span>{formattedCellValue}</span>
           )}
         </div>
       </ContextMenu>
@@ -775,23 +757,29 @@ const QueryBuilderGridResult = observer(
             rowData={rowData}
             gridOptions={{
               suppressScrollOnNewData: true,
-              getRowId: function (data) {
-                return data.data.rowNumber as string;
-              },
+              getRowId: (data) => data.data.rowNumber,
+            }}
+            // 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}
-            columnDefs={executionResult.result.columns.map((colName) => ({
-              minWidth: 50,
-              sortable: true,
-              resizable: true,
-              field: colName,
-              flex: 1,
-              cellRenderer: QueryResultCellRenderer,
-              cellRendererParams: {
-                resultState: resultState,
-                tdsExecutionResult: executionResult,
-              },
-            }))}
+            columnDefs={executionResult.result.columns.map(
+              (colName) =>
+                ({
+                  minWidth: 50,
+                  sortable: true,
+                  resizable: true,
+                  field: colName,
+                  flex: 1,
+                  cellRenderer: QueryResultCellRenderer,
+                  cellRendererParams: {
+                    resultState: resultState,
+                    tdsExecutionResult: executionResult,
+                  },
+                }) as DataGridColumnDefinition,
+            )}
           />
         </div>
       </div>

package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx

@@ -30,7 +30,6 @@ import {
   PanelDropZone,
   DragPreviewLayer,
   useDragPreviewLayer,
-  OptionsIcon,
   PlusIcon,
   PanelContent,
   TrashIcon,
@@ -41,6 +40,7 @@ import {
   CustomSelectorInput,
   PanelEntryDropZonePlaceholder,
   FunctionIcon,
+  CogIcon,
 } from '@finos/legend-art';
 import {
   type QueryBuilderExplorerTreeDragSource,
@@ -952,6 +952,7 @@ export const QueryBuilderTDSPanel = observer(
     const clearAllProjectionColumns = (): void => {
       tdsState.checkBeforeClearingColumns(() => {
         tdsState.removeAllColumns();
+        tdsState.resultSetModifierState.reset();
       });
     };
 
@@ -1061,35 +1062,92 @@ export const QueryBuilderTDSPanel = observer(
     return (
       <PanelContent>
         <div className="query-builder__projection__toolbar">
-          <button
-            className="panel__header__action"
-            onClick={openResultSetModifierEditor}
-            tabIndex={-1}
-            title="Configure result set modifiers..."
-          >
-            <OptionsIcon className="query-builder__icon query-builder__icon__query-option" />
-          </button>
-          <button
-            className="panel__header__action"
-            disabled={isEmpty}
-            onClick={clearAllProjectionColumns}
-            tabIndex={-1}
-            title={
-              isEmpty
-                ? 'No projection columns to clear'
-                : 'Clear all projection columns'
+          <div
+            className="query-builder__projection__result-modifier-prompt"
+            data-testid={
+              QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS_RESULT_MODIFIER_PROMPT
             }
           >
-            <TrashIcon className="query-builder__icon query-builder__icon__query-option--small" />
-          </button>
-          <button
-            className="panel__header__action"
-            onClick={addNewBlankDerivation}
-            tabIndex={-1}
-            title="Add a new derivation"
-          >
-            <PlusIcon />
-          </button>
+            <div className="query-builder__projection__result-modifier-prompt__header">
+              <button
+                className="query-builder__projection__result-modifier-prompt__header__label"
+                onClick={openResultSetModifierEditor}
+                title="Configure result set modifiers..."
+              >
+                <CogIcon className="query-builder__projection__result-modifier-prompt__header__label__icon" />
+                <div className="query-builder__projection__result-modifier-prompt__header__label__title">
+                  Query Options
+                </div>
+              </button>
+            </div>
+            {tdsState.resultSetModifierState.limit && (
+              <div className="query-builder__projection__result-modifier-prompt__group">
+                <div className="query-builder__projection__result-modifier-prompt__group__label">
+                  Max Rows
+                </div>
+                <div
+                  className="query-builder__projection__result-modifier-prompt__group__content"
+                  onClick={openResultSetModifierEditor}
+                >
+                  {tdsState.resultSetModifierState.limit}
+                </div>
+              </div>
+            )}
+            {tdsState.resultSetModifierState.distinct && (
+              <div className="query-builder__projection__result-modifier-prompt__group">
+                <div className="query-builder__projection__result-modifier-prompt__group__label">
+                  Eliminate Duplicate Rows
+                </div>
+                <div
+                  className="query-builder__projection__result-modifier-prompt__group__content"
+                  onClick={openResultSetModifierEditor}
+                >
+                  Yes
+                </div>
+              </div>
+            )}
+            {tdsState.resultSetModifierState.sortColumns.length > 0 && (
+              <div className="query-builder__projection__result-modifier-prompt__group">
+                <div className="query-builder__projection__result-modifier-prompt__group__label">
+                  Sort
+                </div>
+                {tdsState.resultSetModifierState.sortColumns.map(
+                  (columnState) => (
+                    <div
+                      className="query-builder__projection__result-modifier-prompt__group__content"
+                      key={columnState.columnState.uuid}
+                      onClick={openResultSetModifierEditor}
+                    >
+                      {`${columnState.columnState.columnName} ${columnState.sortType}`}
+                    </div>
+                  ),
+                )}
+              </div>
+            )}
+          </div>
+          <div className="query-builder__projection__toolbar__actions">
+            <button
+              className="panel__header__action"
+              disabled={isEmpty}
+              onClick={clearAllProjectionColumns}
+              tabIndex={-1}
+              title={
+                isEmpty
+                  ? 'No projection columns to clear'
+                  : 'Clear all projection columns'
+              }
+            >
+              <TrashIcon className="query-builder__icon query-builder__icon__query-option--small" />
+            </button>
+            <button
+              className="panel__header__action"
+              onClick={addNewBlankDerivation}
+              tabIndex={-1}
+              title="Add a new derivation"
+            >
+              <PlusIcon />
+            </button>
+          </div>
         </div>
         <div className="query-builder__projection__content">
           <PanelDropZone

package/src/graph-manager/QueryBuilderConst.ts

@@ -18,3 +18,5 @@ export enum QUERY_BUILDER_CALENDAR_TYPE {
   NY = 'NY',
   LDN = 'LDN',
 }
+
+export const DEFAULT_LOCALE = 'en-US';

package/src/stores/QueryBuilderResultState.ts

@@ -98,13 +98,13 @@ export class QueryBuilderResultState {
       mousedOverCell: observable,
       isRunningQuery: observable,
       isSelectingCells: observable,
-      setIsSelectingCells: action,
       isQueryUsageViewerOpened: observable,
+      setIsSelectingCells: action,
       setIsRunningQuery: action,
       setExecutionResult: action,
       setExecutionDuration: action,
       setPreviewLimit: action,
-      addCellData: action,
+      addSelectedCell: action,
       setSelectedCells: action,
       setMouseOverCell: action,
       setQueryRunPromise: action,
@@ -124,43 +124,41 @@ export class QueryBuilderResultState {
     );
   }
 
-  setIsSelectingCells = (val: boolean): void => {
+  setIsSelectingCells(val: boolean): void {
     this.isSelectingCells = val;
-  };
+  }
 
-  setIsRunningQuery = (val: boolean): void => {
+  setIsRunningQuery(val: boolean): void {
     this.isRunningQuery = val;
-  };
+  }
 
-  setExecutionResult = (val: ExecutionResult | undefined): void => {
+  setExecutionResult(val: ExecutionResult | undefined): void {
     this.executionResult = val;
-  };
+  }
 
-  setExecutionDuration = (val: number | undefined): void => {
+  setExecutionDuration(val: number | undefined): void {
     this.executionDuration = val;
-  };
+  }
 
-  setPreviewLimit = (val: number): void => {
+  setPreviewLimit(val: number): void {
     this.previewLimit = Math.max(1, val);
-  };
+  }
 
-  addCellData = (val: QueryBuilderTDSResultCellData): void => {
+  addSelectedCell(val: QueryBuilderTDSResultCellData): void {
     this.selectedCells.push(val);
-  };
+  }
 
-  setSelectedCells = (val: QueryBuilderTDSResultCellData[]): void => {
+  setSelectedCells(val: QueryBuilderTDSResultCellData[]): void {
     this.selectedCells = val;
-  };
+  }
 
-  setMouseOverCell = (val: QueryBuilderTDSResultCellData | null): void => {
+  setMouseOverCell(val: QueryBuilderTDSResultCellData | null): void {
     this.mousedOverCell = val;
-  };
+  }
 
-  setQueryRunPromise = (
-    promise: Promise<ExecutionResult> | undefined,
-  ): void => {
+  setQueryRunPromise(promise: Promise<ExecutionResult> | undefined): void {
     this.queryRunPromise = promise;
-  };
+  }
 
   setIsQueryUsageViewerOpened(val: boolean): void {
     this.isQueryUsageViewerOpened = val;

package/src/stores/fetch-structure/tds/QueryResultSetModifierState.ts

@@ -82,6 +82,7 @@ export class QueryResultSetModifierState implements Hashable {
       deleteSortColumn: action,
       addSortColumn: action,
       updateSortColumns: action,
+      reset: action,
       hashCode: computed,
     });
 
@@ -114,6 +115,12 @@ export class QueryResultSetModifierState implements Hashable {
     );
   }
 
+  reset(): void {
+    this.sortColumns = [];
+    this.distinct = false;
+    this.limit = undefined;
+  }
+
   get hashCode(): string {
     return hashArray([
       QUERY_BUILDER_STATE_HASH_STRUCTURE.RESULT_SET_MODIFIER_STATE,

package/src/stores/milestoning/QueryBuilderBitemporalMilestoningImplementation.ts

@@ -62,6 +62,8 @@ export class QueryBuilderBitemporalMilestoningImplementation extends QueryBuilde
         ),
       );
     }
+    // Show the parameter panel because we populate paramaters state with milestoning parameters
+    this.milestoningState.queryBuilderState.setShowParametersPanel(true);
   }
 
   processGetAllParamaters(parameterValues: ValueSpecification[]): void {

package/src/stores/milestoning/QueryBuilderBusinessTemporalMilestoningImplementation.ts

@@ -43,6 +43,8 @@ export class QueryBuilderBusinessTemporalMilestoningImplementation extends Query
         ),
       );
     }
+    // Show the parameter panel because we populate paramaters state with milestoning parameters
+    this.milestoningState.queryBuilderState.setShowParametersPanel(true);
   }
 
   processGetAllParamaters(parameterValues: ValueSpecification[]): void {

package/src/stores/milestoning/QueryBuilderMilestoningState.ts

@@ -140,8 +140,6 @@ export class QueryBuilderMilestoningState implements Hashable {
       this.setProcessingDate(undefined);
       if (stereotype) {
         this.initializeQueryMilestoningParameters(stereotype);
-        // Show the parameter panel because we populate paramaters state with milestoning parameters
-        this.queryBuilderState.setShowParametersPanel(true);
       }
     }
   }

package/src/stores/milestoning/QueryBuilderProcessingTemporalMilestoningImplementation.ts

@@ -42,6 +42,8 @@ export class QueryBuilderProcessingTemporalMilestoningImplementation extends Que
         ),
       );
     }
+    // Show the parameter panel because we populate paramaters state with milestoning parameters
+    this.milestoningState.queryBuilderState.setShowParametersPanel(true);
   }
 
   processGetAllParamaters(parameterValues: ValueSpecification[]): void {