@finos/legend-query-builder 4.11.4 → 4.11.5

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

@@ -0,0 +1,80 @@
+/**
+ * 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 { 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 {
+  DataGrid,
+  type DataGridColumnDefinition,
+} from '@finos/legend-lego/data-grid';
+import {
+  getRowDataFromExecutionResult,
+  QueryResultCellRenderer,
+} from './QueryBuilderTDSResultShared.js';
+
+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"}