@finos/legend-query-builder 4.18.1 → 4.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "4.18.1",
+  "version": "4.18.2",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -43,15 +43,15 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "16.0.104",
-    "@finos/legend-art": "7.1.146",
-    "@finos/legend-code-editor": "2.0.165",
-    "@finos/legend-data-cube": "0.3.82",
-    "@finos/legend-graph": "32.5.1",
-    "@finos/legend-lego": "2.0.184",
-    "@finos/legend-server-depot": "6.1.10",
-    "@finos/legend-shared": "11.0.23",
-    "@finos/legend-storage": "3.0.144",
+    "@finos/legend-application": "16.0.105",
+    "@finos/legend-art": "7.1.147",
+    "@finos/legend-code-editor": "2.0.166",
+    "@finos/legend-data-cube": "0.3.83",
+    "@finos/legend-graph": "32.5.2",
+    "@finos/legend-lego": "2.0.185",
+    "@finos/legend-server-depot": "6.1.11",
+    "@finos/legend-shared": "11.0.24",
+    "@finos/legend-storage": "3.0.145",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.2.0",
     "@types/react": "19.0.10",

package/src/components/QueryBuilderSideBar.tsx

@@ -367,7 +367,7 @@ export const QueryBuilderSidebar = observer(
   }) => {
     const { queryBuilderState, children } = props;
     const applicationStore = useApplicationStore();
-    const extraTemplateQueryPanelContentRenderer =
+    const extraTemplateQueryPanelContentRenderers =
       applicationStore.pluginManager
         .getApplicationPlugins()
         .flatMap(
@@ -376,12 +376,15 @@ export const QueryBuilderSidebar = observer(
               plugin as QueryBuilder_LegendApplicationPlugin_Extension
             ).getExtraTemplateQueryPanelContentRenderer?.() ?? [],
         );
-    const templateQueryPanelContentTab =
-      extraTemplateQueryPanelContentRenderer[0] ? (
-        extraTemplateQueryPanelContentRenderer[0](queryBuilderState)
-      ) : (
-        <></>
-      );
+    // Try each renderer until one returns a non-undefined result.
+    let templateQueryPanelContentTab: React.ReactNode = <></>;
+    for (const renderer of extraTemplateQueryPanelContentRenderers) {
+      const result = renderer(queryBuilderState);
+      if (result !== undefined) {
+        templateQueryPanelContentTab = result;
+        break;
+      }
+    }
 
     return (
       <div

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

@@ -280,7 +280,17 @@ export const QueryBuilderTDSCellSelectionStatsBar = observer(
           <span className="query-builder__result__tds-grid__stats-bar__item__label">
             Count:
           </span>
-          <span className="query-builder__result__tds-grid__stats-bar__item__value">
+          <span
+            className={clsx(
+              'query-builder__result__tds-grid__stats-bar__item__value',
+              {
+                'query-builder__result__tds-grid__stats-bar__item__value--with-chart':
+                  !loading &&
+                  stats.valueFrequencies !== undefined &&
+                  stats.valueFrequencies.length > 0,
+              },
+            )}
+          >
             {countReady ? cellCount : <StatsSpinner />}
           </span>
           {!loading &&
@@ -305,7 +315,17 @@ export const QueryBuilderTDSCellSelectionStatsBar = observer(
           <span className="query-builder__result__tds-grid__stats-bar__item__label">
             Unique Count:
           </span>
-          <span className="query-builder__result__tds-grid__stats-bar__item__value">
+          <span
+            className={clsx(
+              'query-builder__result__tds-grid__stats-bar__item__value',
+              {
+                'query-builder__result__tds-grid__stats-bar__item__value--with-chart':
+                  !loading &&
+                  stats.valueFrequencies !== undefined &&
+                  stats.valueFrequencies.length > 0,
+              },
+            )}
+          >
             {loading ? <StatsSpinner /> : stats.uniqueCount}
           </span>
           {!loading &&
@@ -330,7 +350,17 @@ export const QueryBuilderTDSCellSelectionStatsBar = observer(
           <span className="query-builder__result__tds-grid__stats-bar__item__label">
             Empty Count:
           </span>
-          <span className="query-builder__result__tds-grid__stats-bar__item__value">
+          <span
+            className={clsx(
+              'query-builder__result__tds-grid__stats-bar__item__value',
+              {
+                'query-builder__result__tds-grid__stats-bar__item__value--with-chart':
+                  !loading &&
+                  stats.valueFrequencies !== undefined &&
+                  stats.valueFrequencies.length > 0,
+              },
+            )}
+          >
             {loading ? <StatsSpinner /> : stats.nullCount}
           </span>
           {!loading &&

package/src/components/sql-playground/SQLPlaygroundPanel.tsx

@@ -26,6 +26,7 @@ import {
   SquareIcon,
 } from '@finos/legend-art';
 import { prettyDuration } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
 import {
   PlaygroundSQLCodeEditor,
   type SQLPlaygroundPanelProps,
@@ -51,6 +52,10 @@ export const SQLPlaygroundEditorResultPanel = observer(
       accessorExplorerState,
       showAccessorExplorer = false,
     } = props;
+    const applicationStore = useApplicationStore();
+    const isGlobalDarkMode =
+      !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
+    const effectiveDarkMode = enableDarkMode || isGlobalDarkMode;
 
     const executeRawSQL = (): void => {
       playgroundState.executeRawSQL();
@@ -91,14 +96,14 @@ export const SQLPlaygroundEditorResultPanel = observer(
                   playgroundState={playgroundState}
                   advancedMode={advancedMode}
                   disableDragDrop={disableDragDrop}
-                  enableDarkMode={enableDarkMode}
+                  enableDarkMode={effectiveDarkMode}
                 />
               </ResizablePanel>
               <ResizablePanelSplitter />
               <ResizablePanel size={300}>
                 <div
                   className={clsx('panel__header', {
-                    'panel__header--dark': enableDarkMode,
+                    'panel__header--dark': effectiveDarkMode,
                   })}
                 >
                   <div className="panel__header__title">
@@ -115,7 +120,7 @@ export const SQLPlaygroundEditorResultPanel = observer(
                         (resultDescription ?? '')}
                     </div>
                   </div>
-                  <div className={!enableDarkMode ? 'light-mode' : ''}>
+                  <div className={clsx({ 'light-mode': !effectiveDarkMode })}>
                     <div className="panel__header__actions query-builder__result__header__actions">
                       {advancedMode && (
                         <div className="query-builder__result__advanced__mode">
@@ -166,7 +171,7 @@ export const SQLPlaygroundEditorResultPanel = observer(
                     result={playgroundState.sqlExecutionResult.value}
                     useAdvancedGrid={advancedMode}
                     useLocalMode={playgroundState.isLocalModeEnabled}
-                    enableDarkMode={enableDarkMode}
+                    enableDarkMode={effectiveDarkMode}
                   />
                 )}
                 {playgroundState.sqlExecutionResult instanceof
@@ -177,7 +182,7 @@ export const SQLPlaygroundEditorResultPanel = observer(
                       result={playgroundState.sqlExecutionResult.result}
                       useAdvancedGrid={advancedMode}
                       useLocalMode={playgroundState.isLocalModeEnabled}
-                      enableDarkMode={enableDarkMode}
+                      enableDarkMode={effectiveDarkMode}
                     />
                   )}
               </ResizablePanel>

package/src/stores/workflows/dataProduct/DataProductQueryBuilderState.ts

@@ -32,6 +32,7 @@ import {
   SimpleFunctionExpression,
   InstanceValue,
   Multiplicity,
+  type MappingModelCoverageAnalysisResult,
   extractElementNameFromPath,
   SUPPORTED_FUNCTIONS,
   PackageableElementExplicitReference,
@@ -53,6 +54,8 @@ import {
   GenericTypeExplicitReference,
   findLakehouseAccessPointGroup,
   type PureModel,
+  DataProductAccessType,
+  LegendSDLC,
 } from '@finos/legend-graph';
 import { QueryBuilderState } from '../../QueryBuilderState.js';
 
@@ -74,6 +77,7 @@ import { action, computed, flow, makeObservable, observable } from 'mobx';
 import {
   DepotEntityWithOrigin,
   type QueryableSourceInfo,
+  type ProjectGAVCoordinates,
 } from '@finos/legend-storage';
 import { compareLabelFn } from '@finos/legend-art';
 import { QueryBuilderEmbeddedFromExecutionContextState } from '../../QueryBuilderExecutionContextState.js';
@@ -303,9 +307,6 @@ export class LakehouseDataProductExecutionState extends DataProductExecutionStat
 export class DataProductQueryBuilderState extends QueryBuilderState {
   readonly onClassChange?: ((val: Class) => void) | undefined;
   readonly onDataProductChange?: (val: DepotEntityWithOrigin) => Promise<void>;
-  readonly onExecutionContextChange?:
-    | ((val: NativeModelExecutionContext) => void)
-    | undefined;
 
   loadDataProductModelState = ActionState.create();
   dataProduct: DataProduct;
@@ -314,6 +315,10 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
     NativeModelExecutionContext | ModelAccessPointGroup | LakehouseAccessPoint
   >;
   entities: DepotEntityWithOrigin[] | undefined;
+  mappingToMappingCoverageResult?: Map<
+    string,
+    MappingModelCoverageAnalysisResult
+  >;
 
   prioritizeEntityFunc?: ((val: DepotEntityWithOrigin) => boolean) | undefined;
 
@@ -333,9 +338,6 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
       | LakehouseAccessPoint,
     prioritizeEntityFunc: ((val: DepotEntityWithOrigin) => boolean) | undefined,
     onDataProductChange: (val: DepotEntityWithOrigin) => Promise<void>,
-    onExecutionContextChange?:
-      | ((val: NativeModelExecutionContext) => void)
-      | undefined,
     onClassChange?: ((val: Class) => void) | undefined,
     config?: QueryBuilderConfig | undefined,
     sourceInfo?: QueryableSourceInfo | undefined,
@@ -357,6 +359,11 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
       showExecutionIdSelector: computed,
       executionIdOptions: computed,
       selectedExecutionIdOption: computed,
+      hasNativeModelAccess: computed,
+      hasBothAccessModes: computed,
+      showContextSelector: computed,
+      allContextOptions: computed,
+      selectedContextOption: computed,
       selectedExecOption: computed,
       selectedModelAccessPointGroupOption: computed,
       usableClasses: computed,
@@ -382,13 +389,33 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
           : new ModelAccessPointDataProductExecutionState(executionState, this);
     this.prioritizeEntityFunc = prioritizeEntityFunc;
     this.onDataProductChange = onDataProductChange;
-    this.onExecutionContextChange = onExecutionContextChange;
     this.onClassChange = onClassChange;
     // force from.
     this.executionContextState =
       new QueryBuilderEmbeddedFromExecutionContextState(this);
   }
 
+  async prepareAccessForExecution(): Promise<void> {
+    if (this.executionState instanceof NativeModelDataProductExecutionState) {
+      const runtime = this.executionState.exectionValue.runtime;
+      if (runtime) {
+        this.changeRuntime(new RuntimePointer(runtime));
+      }
+    } else if (
+      this.executionState instanceof
+        ModelAccessPointDataProductExecutionState &&
+      this.executionState.selectedRuntime
+    ) {
+      this.changeRuntime(
+        new RuntimePointer(
+          PackageableElementExplicitReference.create(
+            this.executionState.selectedRuntime,
+          ),
+        ),
+      );
+    }
+  }
+
   get isProductLinkable(): boolean {
     return false;
   }
@@ -417,19 +444,40 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
       this.modelAccessPointGroupOptions.length > 1
     );
   }
+  get hasNativeModelAccess(): boolean {
+    return this.dataProduct.nativeModelAccess !== undefined;
+  }
+
+  get hasBothAccessModes(): boolean {
+    return this.hasModelAccessPointGroups && this.hasNativeModelAccess;
+  }
+
+  // showContextSelector / allContextOptions / selectedContextOption are aliases
+  // over the upstream ExecutionIdOption API so existing UI code keeps working.
+  get showContextSelector(): boolean {
+    return this.showExecutionIdSelector;
+  }
+
+  get allContextOptions(): ExecutionIdOption[] {
+    return this.executionIdOptions;
+  }
+
+  get selectedContextOption(): ExecutionIdOption | undefined {
+    return this.selectedExecutionIdOption;
+  }
 
   get executionIdOptions(): ExecutionIdOption[] {
     const nativeOptions: ExecutionIdOption[] = (
       this.dataProduct.nativeModelAccess?.nativeModelExecutionContexts ?? []
     ).map((ctx) => ({
       label: ctx.key,
-      tag: 'Native',
+      tag: 'NATIVE',
       value: ctx,
     }));
     const modelOptions: ExecutionIdOption[] = this.modelAccessPointGroups.map(
       (group) => ({
         label: group.title ?? group.id,
-        tag: 'Model',
+        tag: 'MODEL',
         value: group,
       }),
     );
@@ -439,7 +487,7 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
         .filter(filterByType(LakehouseAccessPoint))
         .map((ap) => ({
           label: ap.title ?? ap.id,
-          tag: 'Lakehouse',
+          tag: 'LAKEHOUSE',
           value: ap,
         }));
     return [...modelOptions, ...lakehouseOptions, ...nativeOptions].sort(
@@ -452,19 +500,19 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
     if (state instanceof NativeModelDataProductExecutionState) {
       return {
         label: state.exectionValue.key,
-        tag: 'Native',
+        tag: 'NATIVE',
         value: state.exectionValue,
       };
     } else if (state instanceof ModelAccessPointDataProductExecutionState) {
       return {
         label: state.exectionValue.title ?? state.exectionValue.id,
-        tag: 'Model',
+        tag: 'MODEL',
         value: state.exectionValue,
       };
     } else if (state instanceof LakehouseDataProductExecutionState) {
       return {
         label: state.exectionValue.title ?? state.exectionValue.id,
-        tag: 'Lakehouse',
+        tag: 'LAKEHOUSE',
         value: state.exectionValue,
       };
     }
@@ -480,11 +528,20 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
     if (val === this.executionState.exectionValue) {
       return;
     }
+    const switchingToModel = val instanceof ModelAccessPointGroup;
+    const switchingToNative = val instanceof NativeModelExecutionContext;
+    const wasModeSwitch =
+      (switchingToModel && this.isNativeMode) ||
+      (switchingToNative && this.isModelAccessPointGroupMode);
+
+    if (wasModeSwitch) {
+      this.changeHistoryState.querySnapshotBuffer = [];
+      this.changeHistoryState.pointer = -1;
+      this.changeHistoryState.setCurrentQuery(undefined);
+    }
+
     await this.changeExecutionState(val);
     await this.propagateExecutionContextChange();
-    if (val instanceof NativeModelExecutionContext) {
-      this.onExecutionContextChange?.(val);
-    }
   }
 
   get selectedExecOption():
@@ -523,29 +580,6 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
       : [];
   }
 
-  changeNativeExecutionContext(val: NativeModelExecutionContext): void {
-    if (this.isNativeMode && val === this.executionState.exectionValue) {
-      return;
-    }
-    this.setExecutionState(val);
-    this.propagateExecutionContextChange()
-      .then(() => this.onExecutionContextChange?.(val))
-      .catch(this.applicationStore.alertUnhandledError);
-  }
-
-  changeModelAccessPointGroupValue(val: ModelAccessPointGroup): void {
-    if (
-      this.isModelAccessPointGroupMode &&
-      val === this.executionState.exectionValue
-    ) {
-      return;
-    }
-    this.setExecutionState(val);
-    this.propagateExecutionContextChange().catch(
-      this.applicationStore.alertUnhandledError,
-    );
-  }
-
   override buildQueryForPersistence(): RawLambda {
     if (!this.isQuerySupported) {
       return this.buildQuery();
@@ -632,12 +666,7 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
       const execValue =
         preResolvedState ?? resolveDataProductExecutionState(dataProduct);
       this.dataProduct = dataProduct;
-      this.executionState =
-        execValue instanceof NativeModelExecutionContext
-          ? new NativeModelDataProductExecutionState(execValue, this)
-          : execValue instanceof LakehouseAccessPoint
-            ? new LakehouseDataProductExecutionState(execValue, this)
-            : new ModelAccessPointDataProductExecutionState(execValue, this);
+      this.setExecutionState(execValue);
       const mapping = this.executionState.mapping;
       if (mapping) {
         this.changeMapping(mapping);
@@ -669,11 +698,18 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
         );
       }
       if (mapping) {
+        const coverageResult = this.mappingToMappingCoverageResult?.get(
+          mapping.path,
+        );
+        if (coverageResult) {
+          this.explorerState.mappingModelCoverageAnalysisResult =
+            coverageResult;
+        }
         const compatibleClasses = resolveUsableDataProductClasses(
           this.activeFeaturedElements,
           mapping,
           this.graphManagerState,
-          undefined,
+          coverageResult,
         );
         // if there is no chosen class or the chosen one is not compatible
         // with the mapping then pick a compatible class if possible
@@ -882,19 +918,87 @@ export class DataProductQueryBuilderState extends QueryBuilderState {
   ): Promise<void> {
     const currentMapping = this.executionContextState.mapping;
     const newMapping = this.activeMapping;
-    if (newMapping && newMapping !== currentMapping) {
-      this.changeMapping(newMapping, {
-        keepQueryContent: true,
-      });
-      const classes = resolveUsableDataProductClasses(
-        this.activeFeaturedElements,
-        newMapping,
-        this.graphManagerState,
-        undefined,
-      );
-      if (this.sourceClass && !classes.includes(this.sourceClass)) {
-        this.setSourceElement(classes[0]);
+    if (!newMapping || newMapping === currentMapping) {
+      return;
+    }
+
+    const coverageResult = this.mappingToMappingCoverageResult?.get(
+      newMapping.path,
+    );
+
+    if (coverageResult && this.dataProductArtifact) {
+      const origin = this.graphManagerState.graph.origin;
+      if (origin instanceof LegendSDLC) {
+        const newGraph = this.graphManagerState.createNewGraph();
+        const projectInfo: ProjectGAVCoordinates = {
+          groupId: origin.groupId,
+          artifactId: origin.artifactId,
+          versionId: origin.versionId,
+        };
+        let accessPointId: string;
+        let dataProductAccessType: DataProductAccessType;
+        if (
+          this.executionState instanceof NativeModelDataProductExecutionState
+        ) {
+          accessPointId = this.executionState.exectionValue.key;
+          dataProductAccessType = DataProductAccessType.NATIVE;
+        } else {
+          accessPointId = (
+            this.executionState as ModelAccessPointDataProductExecutionState
+          ).exectionValue.id;
+          dataProductAccessType = DataProductAccessType.MODEL;
+        }
+        const analysisResult =
+          await this.graphManagerState.graphManager.buildDataProductAnalysis(
+            this.dataProductArtifact,
+            this.dataProduct.path,
+            newGraph,
+            accessPointId,
+            dataProductAccessType,
+            projectInfo,
+          );
+        this.graphManagerState.graph = newGraph;
+
+        this.dataProduct = newGraph.getDataProduct(this.dataProduct.path);
+        this.setExecutionState(analysisResult.targetExecState);
+        if (analysisResult.dataProductAnalysis.mappingToMappingCoverageResult) {
+          this.mappingToMappingCoverageResult =
+            analysisResult.dataProductAnalysis.mappingToMappingCoverageResult;
+        }
+        const newCoverageResult = this.mappingToMappingCoverageResult?.get(
+          newMapping.path,
+        );
+        if (newCoverageResult) {
+          this.explorerState.mappingModelCoverageAnalysisResult =
+            newCoverageResult;
+        }
+      } else {
+        this.explorerState.mappingModelCoverageAnalysisResult = coverageResult;
+      }
+    } else if (coverageResult) {
+      this.explorerState.mappingModelCoverageAnalysisResult = coverageResult;
+    }
+
+    await this.prepareAccessForExecution();
+
+    this.changeMapping(newMapping, {
+      keepQueryContent: true,
+    });
+    const classes = resolveUsableDataProductClasses(
+      this.activeFeaturedElements,
+      newMapping,
+      this.graphManagerState,
+      this.explorerState.mappingModelCoverageAnalysisResult,
+    );
+    if (
+      !this.sourceClass ||
+      (!classes.includes(this.sourceClass) && classes.length)
+    ) {
+      const possibleNewClass = classes[0];
+      if (possibleNewClass) {
+        this.changeSourceElement(possibleNewClass);
       }
     }
+    this.explorerState.refreshTreeData();
   }
 }