@finos/legend-query-builder 4.15.25 → 4.15.27

package/src/components/QueryBuilder.tsx

@@ -88,7 +88,7 @@ import { onChangeFetchStructureImplementation } from '../stores/fetch-structure/
 import type { QueryBuilder_LegendApplicationPlugin_Extension } from '../stores/QueryBuilder_LegendApplicationPlugin_Extension.js';
 import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
 import { QueryBuilderTelemetryHelper } from '../__lib__/QueryBuilderTelemetryHelper.js';
-import { QueryBuilderDataCubeDialog } from './data-cube/QueryBuilderDataCube.js';
+import { QueryDataCubeViewer } from './data-cube/QueryBuilderDataCube.js';
 
 const QueryBuilderPostGraphFetchPanel = observer(
   (props: { graphFetchState: QueryBuilderGraphFetchTreeState }) => {
@@ -1138,8 +1138,11 @@ export const QueryBuilder = observer(
               </Modal>
             </Dialog>
           )}
-          {queryBuilderState.isCubeEnabled && (
-            <QueryBuilderDataCubeDialog queryBuilderState={queryBuilderState} />
+          {queryBuilderState.dataCubeEngine && (
+            <QueryDataCubeViewer
+              engine={queryBuilderState.dataCubeEngine}
+              close={() => queryBuilderState.setDataCubeEngine(undefined)}
+            />
           )}
         </div>
         {queryBuilderState.workflowState.showStatusBar ? (

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

@@ -15,7 +15,6 @@
  */
 
 import { DataCube } from '@finos/legend-data-cube';
-import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import { observer } from 'mobx-react-lite';
 import {
   clsx,
@@ -25,56 +24,61 @@ import {
   ModalFooterButton,
   TimesIcon,
 } from '@finos/legend-art';
-import { createDataCubeEngineFromQueryBuilder } from '../../stores/data-cube/QueryBuilderDataCubeEngineHelper.js';
+import type { QueryBuilderDataCubeEngine } from '../../stores/data-cube/QueryBuilderDataCubeEngine.js';
 
-const QueryBuilderDataCube = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const engine = createDataCubeEngineFromQueryBuilder(queryBuilderState);
-
-    if (!engine) {
-      return null;
-    }
-    return <DataCube engine={engine} />;
-  },
-);
-
-export const QueryBuilderDataCubeDialog = observer(
-  (props: { queryBuilderState: QueryBuilderState }) => {
-    const { queryBuilderState } = props;
-    const closeModal = () => queryBuilderState.setIsCubeEnabled(false);
+export const QueryDataCubeViewer = observer(
+  (props: {
+    engine: QueryBuilderDataCubeEngine;
+    close: () => void;
+    options?: {
+      fullScreen: boolean;
+    };
+  }) => {
+    const { engine, close, options } = props;
     return (
       <Dialog
         open={true}
-        onClose={closeModal}
+        onClose={close}
         classes={{
           root: 'editor-modal__root-container',
           container: 'editor-modal__container',
-          paper: 'editor-modal__content',
+          paper: clsx('editor-modal__content', {
+            'query-builder-data-cube__dialog__container__content':
+              options?.fullScreen,
+          }),
         }}
       >
         <Modal
           darkMode={false}
-          className={clsx('editor-modal query-builder-data-cube__dialog')}
+          className={clsx('editor-modal query-builder-data-cube__dialog', {
+            'query-builder-data-cube__dialog--expanded': options?.fullScreen,
+          })}
         >
           <div className="query-builder-data-cube__dialog__header">
             <div className="query-builder-data-cube__dialog__header__actions">
               <button
                 className="query-builder-data-cube__dialog__header__action"
                 tabIndex={-1}
-                onClick={closeModal}
+                onClick={close}
                 title="Close"
               >
                 <TimesIcon />
               </button>
             </div>
           </div>
-          <div className="query-builder-data-cube__dialog__content">
-            <QueryBuilderDataCube queryBuilderState={queryBuilderState} />
+          <div
+            className={clsx('query-builder-data-cube__dialog__content', {
+              'query-builder-data-cube__dialog__content-full':
+                options?.fullScreen,
+            })}
+          >
+            <DataCube engine={engine} />
           </div>
-          <ModalFooter>
-            <ModalFooterButton onClick={closeModal}>Close</ModalFooterButton>
-          </ModalFooter>
+          {!options?.fullScreen && (
+            <ModalFooter>
+              <ModalFooterButton onClick={close}>Close</ModalFooterButton>
+            </ModalFooter>
+          )}
         </Modal>
       </Dialog>
     );

package/src/components/result/QueryBuilderResultPanel.tsx

@@ -421,13 +421,13 @@ export const QueryBuilderResultPanel = observer(
       ) {
         queryParametersState.parameterValuesEditorState.open(
           (): Promise<void> => {
-            queryBuilderState.setIsCubeEnabled(true);
+            queryBuilderState.openDataCubeEngine();
             return Promise.resolve();
           },
           PARAMETER_SUBMIT_ACTION.DATA_CUBE,
         );
       } else {
-        queryBuilderState.setIsCubeEnabled(true);
+        queryBuilderState.openDataCubeEngine();
       }
     };
     const cancelQuery = applicationStore.guardUnhandledError(() =>

package/src/index.ts

@@ -30,6 +30,7 @@ export {
   QueryBuilder_LegendApplicationPlugin,
 } from './components/QueryBuilder_LegendApplicationPlugin.js';
 export { QueryBuilderNavigationBlocker } from './components/QueryBuilderNavigationBlocker.js';
+export { QueryDataCubeViewer } from './components/data-cube/QueryBuilderDataCube.js';
 export { QueryBuilder } from './components/QueryBuilder.js';
 export { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './components/QueryBuilderComponentElement.js';
 export {

package/src/stores/QueryBuilderState.ts

@@ -110,6 +110,8 @@ import { QueryBuilderChangeHistoryState } from './QueryBuilderChangeHistoryState
 import { type QueryBuilderWorkflowState } from './query-workflow/QueryBuilderWorkFlowState.js';
 import { type QueryChatState } from './QueryChatState.js';
 import type { QueryBuilder_LegendApplicationPlugin_Extension } from './QueryBuilder_LegendApplicationPlugin_Extension.js';
+import type { QueryBuilderDataCubeEngine } from './data-cube/QueryBuilderDataCubeEngine.js';
+import { createDataCubeEngineFromQueryBuilder } from './data-cube/QueryBuilderDataCubeEngineHelper.js';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface QueryableSourceInfo {}
@@ -162,7 +164,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
   isCheckingEntitlments = false;
   isCalendarEnabled = false;
   isLocalModeEnabled = false;
-  isCubeEnabled = false;
+  dataCubeEngine: QueryBuilderDataCubeEngine | undefined;
   INTERNAL__enableInitializingDefaultSimpleExpressionValue = false;
 
   lambdaWriteMode = QUERY_BUILDER_LAMBDA_WRITER_MODE.STANDARD;
@@ -215,7 +217,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       queryChatState: observable,
       isQueryChatOpened: observable,
       isLocalModeEnabled: observable,
-      isCubeEnabled: observable,
+      dataCubeEngine: observable,
       getAllFunction: observable,
       lambdaWriteMode: observable,
       INTERNAL__enableInitializingDefaultSimpleExpressionValue: observable,
@@ -229,7 +231,8 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       setShowParametersPanel: action,
       setIsEditingWatermark: action,
       setIsCalendarEnabled: action,
-      setIsCubeEnabled: action,
+      setDataCubeEngine: action,
+      openDataCubeEngine: action,
       setIsCheckingEntitlments: action,
       setClass: action,
       setIsQueryChatOpened: action,
@@ -412,8 +415,8 @@ export abstract class QueryBuilderState implements CommandRegistrar {
     this.isLocalModeEnabled = val;
   }
 
-  setIsCubeEnabled(val: boolean): void {
-    this.isCubeEnabled = val;
+  setDataCubeEngine(val: QueryBuilderDataCubeEngine | undefined): void {
+    this.dataCubeEngine = val;
   }
 
   setInternalize(val: QueryBuilderInternalizeState | undefined): void {
@@ -466,6 +469,17 @@ export abstract class QueryBuilderState implements CommandRegistrar {
     return !this.unsupportedQueryState.rawLambda;
   }
 
+  openDataCubeEngine(): void {
+    try {
+      this.setDataCubeEngine(createDataCubeEngineFromQueryBuilder(this));
+    } catch (error) {
+      assertErrorThrown(error);
+      this.applicationStore.notificationService.notifyError(
+        `Unable to open data cube in query builder`,
+      );
+    }
+  }
+
   registerCommands(): void {
     this.applicationStore.commandService.registerCommand({
       key: QUERY_BUILDER_COMMAND_KEY.COMPILE,

package/src/stores/data-cube/QueryBuilderDataCubeEngine.ts

@@ -29,6 +29,7 @@ import {
   type PureModel,
   type V1_ValueSpecification,
   type ParameterValue,
+  LAMBDA_PIPE,
 } from '@finos/legend-graph';
 import {
   _elementPtr,
@@ -46,7 +47,7 @@ import { guaranteeType, isNonNullable, LogService } from '@finos/legend-shared';
 
 class QueryBuilderDataCubeSource extends DataCubeSource {
   mapping?: string | undefined;
-  runtime!: string;
+  runtime: string | undefined;
 }
 
 export class QueryBuilderDataCubeEngine extends DataCubeEngine {
@@ -55,14 +56,14 @@ export class QueryBuilderDataCubeEngine extends DataCubeEngine {
   readonly selectInitialQuery: RawLambda;
   readonly mappingPath: string | undefined;
   readonly parameterValues: ParameterValue[] | undefined;
-  readonly runtimePath: string;
+  readonly runtimePath: string | undefined;
   _parameters: object | undefined;
 
   constructor(
     selectQuery: RawLambda,
     parameterValues: ParameterValue[] | undefined,
     mappingPath: string | undefined,
-    runtimePath: string,
+    runtimePath: string | undefined,
     graphManagerState: GraphManagerState,
   ) {
     super();
@@ -146,8 +147,12 @@ export class QueryBuilderDataCubeEngine extends DataCubeEngine {
       await this.graphState.graphManager.lambdaToPureCode(lambda);
     const offset = queryString.length;
     const codeBlock = queryString + code;
+    const finalCode = codeBlock.substring(
+      codeBlock.indexOf(LAMBDA_PIPE) + LAMBDA_PIPE.length,
+      codeBlock.length,
+    );
     const result = await this.graphState.graphManager.getCodeComplete(
-      codeBlock,
+      finalCode,
       this.graph,
       offset,
     );
@@ -177,7 +182,7 @@ export class QueryBuilderDataCubeEngine extends DataCubeEngine {
     );
   }
 
-  private async getRelationalType(query: RawLambda): Promise<RelationType> {
+  async getRelationalType(query: RawLambda): Promise<RelationType> {
     const relationType =
       await this.graphState.graphManager.getLambdaRelationType(
         query,
@@ -200,7 +205,7 @@ export class QueryBuilderDataCubeEngine extends DataCubeEngine {
       await this.graphState.graphManager.valueSpecificationToPureCode(
         V1_serializeValueSpecification(baseQuery, []),
       );
-    const fullQuery = code + queryString;
+    const fullQuery = queryString + code;
     return this.getRelationalType(
       await this.graphState.graphManager.pureCodeToLambda(fullQuery),
     );
@@ -242,13 +247,16 @@ export class QueryBuilderDataCubeEngine extends DataCubeEngine {
     source: DataCubeSource,
   ): V1_AppliedFunction | undefined {
     if (source instanceof QueryBuilderDataCubeSource) {
-      return _function(
-        DataCubeFunction.FROM,
-        [
-          source.mapping ? _elementPtr(source.mapping) : undefined,
-          _elementPtr(source.runtime),
-        ].filter(isNonNullable),
-      );
+      const appendFromFunc = Boolean(source.mapping ?? source.runtime);
+      return appendFromFunc
+        ? _function(
+            DataCubeFunction.FROM,
+            [
+              source.mapping ? _elementPtr(source.mapping) : undefined,
+              source.runtime ? _elementPtr(source.runtime) : undefined,
+            ].filter(isNonNullable),
+          )
+        : undefined;
     }
     return undefined;
   }

package/src/stores/data-cube/QueryBuilderDataCubeEngineHelper.ts

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { type DataCubeEngine } from '@finos/legend-data-cube';
 import {
   QUERY_BUILDER_LAMBDA_WRITER_MODE,
   type QueryBuilderState,
@@ -25,7 +24,7 @@ import { buildExecutionParameterValues } from '../shared/LambdaParameterState.js
 
 export const createDataCubeEngineFromQueryBuilder = (
   queryBuilderState: QueryBuilderState,
-): DataCubeEngine | undefined => {
+): QueryBuilderDataCubeEngine | undefined => {
   const runtime =
     queryBuilderState.executionContextState.runtimeValue instanceof
     RuntimePointer