@finos/legend-query-builder 4.14.96 → 4.15.1

package/src/components/data-cube/QueryBuilderDataCube.tsx

@@ -0,0 +1,116 @@
+/**
+ * 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 { DataCube, DataCubeProvider } from '@finos/legend-data-cube';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
+import { observer } from 'mobx-react-lite';
+import { QueryBuilderDataCubeApplicationEngine } from '../../stores/data-cube/QueryBuilderDataCubeApplicationEngine.js';
+import {
+  clsx,
+  Dialog,
+  EmptyWindowRestoreIcon,
+  Modal,
+  TimesIcon,
+  WindowMaximizeIcon,
+} from '@finos/legend-art';
+import { useState } from 'react';
+import { RuntimePointer } from '@finos/legend-graph';
+import { QueryBuilderDataCubeEngine } from '../../stores/data-cube/QueryBuilderDataCubeEngine.js';
+
+const QueryBuilderDataCube = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const applicationStore = new QueryBuilderDataCubeApplicationEngine(
+      queryBuilderState.applicationStore,
+    );
+    const runtime =
+      queryBuilderState.executionContextState.runtimeValue instanceof
+      RuntimePointer
+        ? queryBuilderState.executionContextState.runtimeValue
+            .packageableRuntime.value.path
+        : undefined;
+    if (!runtime) {
+      // TODO: add better message
+      return null;
+    }
+    const queryBuilderEngine = new QueryBuilderDataCubeEngine(
+      queryBuilderState.buildQuery(),
+      queryBuilderState.executionContextState.mapping?.path,
+      runtime,
+      queryBuilderState.graphManagerState,
+    );
+
+    return (
+      <DataCubeProvider
+        application={applicationStore}
+        engine={queryBuilderEngine}
+      >
+        <DataCube />
+      </DataCubeProvider>
+    );
+  },
+);
+
+export const QueryBuilderDataCubeDialog = observer(
+  (props: { queryBuilderState: QueryBuilderState }) => {
+    const { queryBuilderState } = props;
+    const [isMaximized, setIsMaximized] = useState(false);
+    const toggleMaximize = (): void => setIsMaximized(!isMaximized);
+    const closeModal = () => queryBuilderState.setIsCubeEnabled(false);
+    return (
+      <Dialog
+        open={true}
+        onClose={closeModal}
+        classes={{ container: 'dataspace-info-modal__container' }}
+      >
+        <Modal
+          darkMode={false}
+          className={clsx('editor-modal query-builder__dialog', {
+            'query-builder__dialog--expanded': isMaximized,
+          })}
+        >
+          <div className="query-builder__dialog__header">
+            <div className="query-builder__dialog__header__actions">
+              <button
+                className="query-builder__dialog__header__action"
+                tabIndex={-1}
+                onClick={toggleMaximize}
+                title={isMaximized ? 'Minimize' : 'Maximize'}
+              >
+                {isMaximized ? (
+                  <EmptyWindowRestoreIcon />
+                ) : (
+                  <WindowMaximizeIcon />
+                )}
+              </button>
+              <button
+                className="query-builder__dialog__header__action"
+                tabIndex={-1}
+                onClick={closeModal}
+                title="Close"
+              >
+                <TimesIcon />
+              </button>
+            </div>
+          </div>
+          <div className="query-builder__dialog__content">
+            <QueryBuilderDataCube queryBuilderState={queryBuilderState} />
+          </div>
+        </Modal>
+      </Dialog>
+    );
+  },
+);

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

@@ -105,7 +105,7 @@ const ColumnSortEditor = observer(
       }));
     const value = {
       label: sortState.columnState.columnName,
-      value: sortState,
+      value: sortState.columnState,
     };
     const sortType = sortState.sortType;
 

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -1110,7 +1110,7 @@ const QueryBuilderFilterConditionEditor = observer(
                       className="query-builder-filter-tree__condition-node__operator__dropdown__option"
                       onClick={changeOperator(op)}
                     >
-                      {op.getLabel()}
+                      {op.getLabel(node.condition)}
                     </MenuContentItem>
                   ))}
                 </MenuContent>
@@ -1122,7 +1122,7 @@ const QueryBuilderFilterConditionEditor = observer(
               }}
             >
               <div className="query-builder-filter-tree__condition-node__operator__label">
-                {node.condition.operator.getLabel()}
+                {node.condition.operator.getLabel(node.condition)}
               </div>
               <div className="query-builder-filter-tree__condition-node__operator__dropdown__trigger">
                 <CaretDownIcon />

package/src/components/result/QueryBuilderResultPanel.tsx

@@ -46,6 +46,7 @@ import {
   CubesLoadingIndicator,
   InfoCircleIcon,
   ShareBoxIcon,
+  CubeIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { flowResult } from 'mobx';
@@ -56,6 +57,7 @@ import {
   TDSExecutionResult,
   RawExecutionResult,
   ExecutionError,
+  RuntimePointer,
 } from '@finos/legend-graph';
 import {
   ActionAlertActionType,
@@ -837,6 +839,28 @@ export const QueryBuilderResultPanel = observer(
                     </MenuContentItemIcon>
                     <MenuContentItemLabel>Others...</MenuContentItemLabel>
                   </MenuContentItem>
+                  {queryBuilderState.config?.TEMPORARY__enableExportToCube && (
+                    <MenuContentItem
+                      onClick={(): void =>
+                        queryBuilderState.setIsCubeEnabled(true)
+                      }
+                      disabled={
+                        !queryBuilderState.fetchStructureState.implementation
+                          .canBeExportedToCube ||
+                        !(
+                          queryBuilderState.executionContextState
+                            .runtimeValue instanceof RuntimePointer
+                        )
+                      }
+                    >
+                      <MenuContentItemIcon>
+                        <CubeIcon />
+                      </MenuContentItemIcon>
+                      <MenuContentItemLabel>
+                        Data Cube (BETA)
+                      </MenuContentItemLabel>
+                    </MenuContentItem>
+                  )}
                   {extraExportMenuContentItems}
                 </MenuContent>
               }

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

@@ -44,6 +44,7 @@ import { QueryBuilderTDSState } from '../../../stores/fetch-structure/tds/QueryB
 import { DEFAULT_LOCALE } from '../../../graph-manager/QueryBuilderConst.js';
 import {
   assertErrorThrown,
+  guaranteeNonNullable,
   isBoolean,
   isNumber,
   isString,
@@ -346,7 +347,7 @@ export const QueryBuilderTDSGridResult = observer(
                   resultState.mousedOverCell,
                   true,
                   fetchStructureImplementation,
-                ).catch(queryBuilderState.applicationStore.alertUnhandledError);
+                );
               },
             },
             {
@@ -357,7 +358,7 @@ export const QueryBuilderTDSGridResult = observer(
                   resultState.mousedOverCell,
                   false,
                   fetchStructureImplementation,
-                ).catch(queryBuilderState.applicationStore.alertUnhandledError);
+                );
               },
             },
             'copy',
@@ -376,7 +377,6 @@ export const QueryBuilderTDSGridResult = observer(
         applicationStore,
         resultState.mousedOverCell,
         resultState.queryBuilderState.fetchStructureState.implementation,
-        queryBuilderState.applicationStore.alertUnhandledError,
       ],
     );
 
@@ -394,18 +394,22 @@ export const QueryBuilderTDSGridResult = observer(
         aggFuncParams.colDef.field,
       )
         ? {
-            label: resultState.wavgAggregationState.weightedColumnIdPairs.get(
-              aggFuncParams.colDef.field,
+            label: guaranteeNonNullable(
+              resultState.wavgAggregationState.weightedColumnIdPairs.get(
+                aggFuncParams.colDef.field,
+              ),
             ),
-            value: resultState.wavgAggregationState.weightedColumnIdPairs.get(
-              aggFuncParams.colDef.field,
+            value: guaranteeNonNullable(
+              resultState.wavgAggregationState.weightedColumnIdPairs.get(
+                aggFuncParams.colDef.field,
+              ),
             ),
           }
         : null;
 
-    const onWeightedColumnOptionChange = async (
+    const onWeightedColumnOptionChange = (
       option: { label: string; value: string } | null,
-    ): Promise<void> => {
+    ) => {
       if (aggFuncParams?.colDef.field && option?.value) {
         resultState.wavgAggregationState?.addWeightedColumnIdPair(
           aggFuncParams.colDef.field,