@finos/legend-query-builder 3.2.0 → 3.2.2

package/lib/stores/entitlements/QueryBuilderCheckEntitlementsState.js

@@ -16,24 +16,38 @@
 import { hashArray } from '@finos/legend-shared';
 import { makeObservable, observable, action, computed } from 'mobx';
 import { QUERY_BUILDER_STATE_HASH_STRUCTURE } from '../QueryBuilderStateHashUtils.js';
+import { DataAccessState } from '../data-access/DataAccessState.js';
+import { RuntimePointer, InMemoryGraphData, } from '@finos/legend-graph';
 export class QueryBuilderCheckEntitlementsState {
     queryBuilderState;
-    isCheckingEntitlements = false;
+    dataAccessState;
+    showCheckEntitlementsViewer = false;
     constructor(queryBuilderState) {
         makeObservable(this, {
-            isCheckingEntitlements: observable,
-            setIsCheckingEntitlements: action,
+            showCheckEntitlementsViewer: observable,
+            dataAccessState: observable,
+            setShowCheckEntitlementsViewer: action,
             hashCode: computed,
         });
         this.queryBuilderState = queryBuilderState;
     }
-    setIsCheckingEntitlements(val) {
-        this.isCheckingEntitlements = val;
+    setShowCheckEntitlementsViewer(val) {
+        this.showCheckEntitlementsViewer = val;
+        this.dataAccessState = undefined;
+        if (this.queryBuilderState.mapping &&
+            this.queryBuilderState.runtimeValue instanceof RuntimePointer) {
+            const mappingPath = this.queryBuilderState.mapping.path;
+            const runtimePath = this.queryBuilderState.runtimeValue.packageableRuntime.value.path;
+            this.dataAccessState = new DataAccessState(this.queryBuilderState.applicationStore, this.queryBuilderState.graphManagerState, {
+                surveyDatasets: async () => this.queryBuilderState.graphManagerState.graphManager.surveyDatasets(mappingPath, runtimePath, this.queryBuilderState.buildQuery(), new InMemoryGraphData(this.queryBuilderState.graphManagerState.graph)),
+                checkDatasetEntitlements: async (datasets) => this.queryBuilderState.graphManagerState.graphManager.checkDatasetEntitlements(datasets, mappingPath, runtimePath, this.queryBuilderState.buildQuery(), new InMemoryGraphData(this.queryBuilderState.graphManagerState.graph)),
+            });
+        }
     }
     get hashCode() {
         return hashArray([
             QUERY_BUILDER_STATE_HASH_STRUCTURE.CHECK_ENTITLEMENTS_STATE,
-            this.isCheckingEntitlements,
+            this.showCheckEntitlementsViewer,
         ]);
     }
 }

package/lib/stores/entitlements/QueryBuilderCheckEntitlementsState.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilderCheckEntitlementsState.js","sourceRoot":"","sources":["../../../src/stores/entitlements/QueryBuilderCheckEntitlementsState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAiB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AACpE,OAAO,EAAE,kCAAkC,EAAE,MAAM,kCAAkC,CAAC;AAGtF,MAAM,OAAO,kCAAkC;IACpC,iBAAiB,CAAoB;IAC9C,sBAAsB,GAAG,KAAK,CAAC;IAE/B,YAAY,iBAAoC;QAC9C,cAAc,CAAC,IAAI,EAAE;YACnB,sBAAsB,EAAE,UAAU;YAClC,yBAAyB,EAAE,MAAM;YACjC,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC7C,CAAC;IAED,yBAAyB,CAAC,GAAY;QACpC,IAAI,CAAC,sBAAsB,GAAG,GAAG,CAAC;IACpC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,SAAS,CAAC;YACf,kCAAkC,CAAC,wBAAwB;YAC3D,IAAI,CAAC,sBAAsB;SAC5B,CAAC,CAAC;IACL,CAAC;CACF"}
+{"version":3,"file":"QueryBuilderCheckEntitlementsState.js","sourceRoot":"","sources":["../../../src/stores/entitlements/QueryBuilderCheckEntitlementsState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAiB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AACpE,OAAO,EAAE,kCAAkC,EAAE,MAAM,kCAAkC,CAAC;AAEtF,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EACL,cAAc,EAGd,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,OAAO,kCAAkC;IACpC,iBAAiB,CAAoB;IAE9C,eAAe,CAA+B;IAC9C,2BAA2B,GAAG,KAAK,CAAC;IAEpC,YAAY,iBAAoC;QAC9C,cAAc,CAAC,IAAI,EAAE;YACnB,2BAA2B,EAAE,UAAU;YACvC,eAAe,EAAE,UAAU;YAC3B,8BAA8B,EAAE,MAAM;YACtC,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC7C,CAAC;IAED,8BAA8B,CAAC,GAAY;QACzC,IAAI,CAAC,2BAA2B,GAAG,GAAG,CAAC;QAEvC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QACjC,IACE,IAAI,CAAC,iBAAiB,CAAC,OAAO;YAC9B,IAAI,CAAC,iBAAiB,CAAC,YAAY,YAAY,cAAc,EAC7D;YACA,MAAM,WAAW,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC;YACxD,MAAM,WAAW,GACf,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC;YACpE,IAAI,CAAC,eAAe,GAAG,IAAI,eAAe,CACxC,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,EACvC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,EACxC;gBACE,cAAc,EAAE,KAAK,IAAqC,EAAE,CAC1D,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,CAAC,cAAc,CAClE,WAAW,EACX,WAAW,EACX,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,EACnC,IAAI,iBAAiB,CACnB,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,KAAK,CAC/C,CACF;gBACH,wBAAwB,EAAE,KAAK,EAC7B,QAAgC,EACK,EAAE,CACvC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,YAAY,CAAC,wBAAwB,CAC5E,QAAQ,EACR,WAAW,EACX,WAAW,EACX,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,EACnC,IAAI,iBAAiB,CACnB,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,KAAK,CAC/C,CACF;aACJ,CACF,CAAC;SACH;IACH,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,SAAS,CAAC;YACf,kCAAkC,CAAC,wBAAwB;YAC3D,IAAI,CAAC,2BAA2B;SACjC,CAAC,CAAC;IACL,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-query-builder",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "description": "Legend query builder core",
   "keywords": [
     "legend",
@@ -42,28 +42,30 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "15.0.7",
-    "@finos/legend-art": "7.0.8",
-    "@finos/legend-graph": "28.1.4",
-    "@finos/legend-lego": "0.1.13",
-    "@finos/legend-server-depot": "6.0.4",
-    "@finos/legend-shared": "10.0.3",
-    "@finos/legend-storage": "3.0.53",
+    "@finos/legend-application": "15.0.9",
+    "@finos/legend-art": "7.0.10",
+    "@finos/legend-graph": "28.1.5",
+    "@finos/legend-lego": "1.0.1",
+    "@finos/legend-server-depot": "6.0.5",
+    "@finos/legend-shared": "10.0.4",
+    "@finos/legend-storage": "3.0.54",
     "@testing-library/react": "14.0.0",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.1",
+    "@types/react": "18.2.1",
+    "@types/react-dom": "18.2.2",
+    "chart.js": "4.3.0",
     "mathjs": "11.8.0",
     "mobx": "6.9.0",
     "mobx-react-lite": "3.4.3",
-    "monaco-editor": "0.37.1",
+    "monaco-editor": "0.38.0",
     "react": "18.2.0",
+    "react-chartjs-2": "5.2.0",
     "react-dnd": "16.0.1",
     "react-dom": "18.2.0",
     "serializr": "3.0.2",
     "sql-formatter": "12.2.0"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.57",
+    "@finos/legend-dev-utils": "2.0.59",
     "@jest/globals": "29.5.0",
     "cross-env": "7.0.3",
     "eslint": "8.39.0",

package/src/__lib__/QueryBuilderColorTheme.ts

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+export enum QUERY_BUILDER_COLOR_THEME_KEY {
+  DATA_ACCESS_OVERVIEW__CHART__ACCESS_GRANTED = 'data-access-overview.chart.access-granted',
+  DATA_ACCESS_OVERVIEW__CHART__ACCESS_APPROVED = 'data-access-overview.chart.access-approved',
+  DATA_ACCESS_OVERVIEW__CHART__ACCESS_REQUESTED = 'data-access-overview.chart.access-requested',
+  DATA_ACCESS_OVERVIEW__CHART__ACCESS_NOT_GRANTED = 'data-access-overview.chart.access-not-granted',
+  DATA_ACCESS_OVERVIEW__CHART__UNSUPPORTED_ACCESS = 'data-access-overview.chart.unsupported-access',
+}

package/src/components/QueryBuilder.tsx

@@ -40,7 +40,7 @@ import {
   ModalHeader,
   BlankPanelContent,
   ModalFooterButton,
-  CalendarIcon,
+  CalendarClockIcon,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from './filter/QueryBuilderFilterPanel.js';
 import { QueryBuilderExplorerPanel } from './explorer/QueryBuilderExplorerPanel.js';
@@ -69,9 +69,9 @@ import { QueryBuilderGraphFetchTreeState } from '../stores/fetch-structure/graph
 import { QueryBuilderPostTDSPanel } from './fetch-structure/QueryBuilderPostTDSPanel.js';
 import { QueryBuilderWatermarkEditor } from './watermark/QueryBuilderWatermark.js';
 import { QueryBuilderConstantExpressionPanel } from './QueryBuilderConstantExpressionPanel.js';
-import { QueryBuilder_LegendApplicationPlugin } from './QueryBuilder_LegendApplicationPlugin.js';
 import { QUERY_BUILDER_SETTING_KEY } from '../__lib__/QueryBuilderSetting.js';
 import { QUERY_BUILDER_COMPONENT_ELEMENT_ID } from './QueryBuilderComponentElement.js';
+import { DataAccessOverview } from './data-access/DataAccessOverview.js';
 
 const QueryBuilderStatusBar = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
@@ -199,49 +199,6 @@ const QueryBuilderPostGraphFetchPanel = observer(
   },
 );
 
-const renderCheckEntitlementsEditor = (
-  queryBuilderState: QueryBuilderState,
-  plugins: QueryBuilder_LegendApplicationPlugin[],
-): React.ReactNode => {
-  const checkEntitlementsEditorRenderers = plugins.flatMap(
-    (plugin) => plugin.getCheckEntitlementsEditorRender() ?? [],
-  );
-  for (const editorRenderer of checkEntitlementsEditorRenderers) {
-    const editor = editorRenderer(queryBuilderState);
-    if (editor) {
-      return editor;
-    }
-  }
-
-  const handleClose = (): void => {
-    queryBuilderState.checkEntitlementsState.setIsCheckingEntitlements(false);
-  };
-
-  return (
-    <Dialog
-      open={queryBuilderState.checkEntitlementsState.isCheckingEntitlements}
-      onClose={handleClose}
-      classes={{
-        root: 'editor-modal__root-container',
-        container: 'editor-modal__container',
-        paper: 'editor-modal__content',
-      }}
-    >
-      <Modal darkMode={true} className="editor-modal">
-        <ModalHeader title="Query Entitlements" />
-        <ModalBody>
-          <BlankPanelContent>
-            Check Entitlements is not supported yet
-          </BlankPanelContent>
-        </ModalBody>
-        <ModalFooter>
-          <ModalFooterButton text="Close" onClick={handleClose} />
-        </ModalFooter>
-      </Modal>
-    </Dialog>
-  );
-};
-
 export const QueryBuilder = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
@@ -249,7 +206,6 @@ export const QueryBuilder = observer(
     const fetchStructureState = queryBuilderState.fetchStructureState;
     const isTDSState =
       fetchStructureState.implementation instanceof QueryBuilderTDSState;
-    const applicationStore = queryBuilderState.applicationStore;
     const openLambdaEditor = (mode: QueryBuilderTextEditorMode): void =>
       queryBuilderState.textEditorState.openModal(mode);
     const toggleShowFunctionPanel = (): void => {
@@ -347,9 +303,15 @@ export const QueryBuilder = observer(
     };
 
     const openCheckEntitlmentsEditor = (): void => {
-      queryBuilderState.checkEntitlementsState.setIsCheckingEntitlements(true);
+      queryBuilderState.checkEntitlementsState.setShowCheckEntitlementsViewer(
+        true,
+      );
+    };
+    const handleClose = (): void => {
+      queryBuilderState.checkEntitlementsState.setShowCheckEntitlementsViewer(
+        false,
+      );
     };
-
     useCommands(queryBuilderState);
     const toggleShowOLAPGroupByPanel = (): void => {
       if (isTDSState) {
@@ -392,26 +354,25 @@ export const QueryBuilder = observer(
         />
         <div className="query-builder__body">
           <div className="query-builder__content">
-            <div className="query-builder__sub-header">
-              <div className="query-builder__sub-header__content__icons">
+            <div className="query-builder__header">
+              <div className="query-builder__header__statuses">
                 {queryBuilderState.watermarkState.value && (
-                  <>
-                    <button
-                      className="panel__header__action"
-                      onClick={openWatermark}
-                      tabIndex={-1}
-                      title="Show Watermark"
-                    >
-                      <WaterDropIcon />
-                    </button>
-                  </>
+                  <button
+                    className="query-builder__header__status query-builder__header__status--action"
+                    onClick={openWatermark}
+                    tabIndex={-1}
+                    title="Used watermark"
+                  >
+                    <WaterDropIcon />
+                  </button>
                 )}
                 {queryBuilderState.isCalendarEnabled && (
-                  <>
-                    <div className="query-builder__sub-header__content__icon">
-                      <CalendarIcon />
-                    </div>
-                  </>
+                  <div
+                    className="query-builder__header__status"
+                    title="Used calendar aggregation"
+                  >
+                    <CalendarClockIcon className="query-builder__header__status__icon--calendar" />
+                  </div>
                 )}
                 {queryBuilderState.watermarkState.isEditingWatermark && (
                   <QueryBuilderWatermarkEditor
@@ -419,9 +380,9 @@ export const QueryBuilder = observer(
                   />
                 )}
               </div>
-              <div className="query-builder__sub-header__content__actions">
+              <div className="query-builder__header__actions">
                 <DropdownMenu
-                  className="query-builder__sub-header__custom-action"
+                  className="query-builder__header__advanced-dropdown"
                   title="Show Advanced Menu..."
                   content={
                     <MenuContent>
@@ -434,7 +395,7 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemLabel>
                           Show Function(s)
                         </MenuContentItemLabel>
                       </MenuContentItem>
@@ -452,7 +413,7 @@ export const QueryBuilder = observer(
                               <CheckIcon />
                             ) : null}
                           </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          <MenuContentItemLabel>
                             Show Parameter(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
@@ -471,7 +432,7 @@ export const QueryBuilder = observer(
                               <CheckIcon />
                             ) : null}
                           </MenuContentItemIcon>
-                          <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                          <MenuContentItemLabel>
                             Show Constant(s)
                           </MenuContentItemLabel>
                         </MenuContentItem>
@@ -490,10 +451,9 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                          Show Filter
-                        </MenuContentItemLabel>
+                        <MenuContentItemLabel>Show Filter</MenuContentItemLabel>
                       </MenuContentItem>
+                      <MenuContentDivider />
                       <MenuContentItem
                         onClick={toggleShowOLAPGroupByPanel}
                         disabled={
@@ -516,8 +476,8 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
-                          Show Window Func(s)
+                        <MenuContentItemLabel>
+                          Show Window Function(s)
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem
@@ -541,13 +501,13 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemLabel>
                           Show Post-Filter
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem onClick={openWatermark}>
                         <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemLabel>
                           Show Watermark
                         </MenuContentItemLabel>
                       </MenuContentItem>
@@ -566,7 +526,7 @@ export const QueryBuilder = observer(
                             <CheckIcon />
                           ) : null}
                         </MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemLabel>
                           Enable Calendar
                         </MenuContentItemLabel>
                       </MenuContentItem>
@@ -581,20 +541,20 @@ export const QueryBuilder = observer(
                             .projectionColumns.length === 0
                         }
                       >
-                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemIcon />
+                        <MenuContentItemLabel>
                           Check Entitlements
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem onClick={editQueryInPure}>
-                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemIcon />
+                        <MenuContentItemLabel>
                           Edit Query in Pure
                         </MenuContentItemLabel>
                       </MenuContentItem>
                       <MenuContentItem onClick={showQueryProtocol}>
-                        <MenuContentItemIcon>{null}</MenuContentItemIcon>
-                        <MenuContentItemLabel className="query-builder__sub-header__menu-content">
+                        <MenuContentItemIcon />
+                        <MenuContentItemLabel>
                           Show Query Protocol
                         </MenuContentItemLabel>
                       </MenuContentItem>
@@ -606,10 +566,10 @@ export const QueryBuilder = observer(
                     elevation: 7,
                   }}
                 >
-                  <div className="query-builder__sub-header__custom-action__label">
+                  <div className="query-builder__header__advanced-dropdown__label">
                     Advanced
                   </div>
-                  <CaretDownIcon className="query-builder__sub-header__custom-action__icon" />
+                  <CaretDownIcon className="query-builder__header__advanced-dropdown__icon" />
                 </DropdownMenu>
               </div>
             </div>
@@ -709,16 +669,45 @@ export const QueryBuilder = observer(
           {queryBuilderState.textEditorState.mode && (
             <QueryBuilderTextEditor queryBuilderState={queryBuilderState} />
           )}
-          {queryBuilderState.checkEntitlementsState.isCheckingEntitlements &&
-            renderCheckEntitlementsEditor(
-              queryBuilderState,
-              applicationStore.pluginManager
-                .getApplicationPlugins()
-                .filter(
-                  (plugin) =>
-                    plugin instanceof QueryBuilder_LegendApplicationPlugin,
-                ) as QueryBuilder_LegendApplicationPlugin[],
-            )}
+          {queryBuilderState.checkEntitlementsState
+            .showCheckEntitlementsViewer && (
+            <Dialog
+              open={
+                queryBuilderState.checkEntitlementsState
+                  .showCheckEntitlementsViewer
+              }
+              onClose={handleClose}
+              classes={{
+                root: 'editor-modal__root-container',
+                container: 'editor-modal__container',
+                paper: 'editor-modal__content',
+              }}
+            >
+              <Modal darkMode={true} className="editor-modal">
+                <ModalHeader title="Query Entitlements" />
+                <ModalBody className="query-builder__data-access-overview">
+                  <div className="query-builder__data-access-overview__container">
+                    {queryBuilderState.checkEntitlementsState
+                      .dataAccessState ? (
+                      <DataAccessOverview
+                        dataAccessState={
+                          queryBuilderState.checkEntitlementsState
+                            .dataAccessState
+                        }
+                      />
+                    ) : (
+                      <BlankPanelContent>
+                        No data access information available
+                      </BlankPanelContent>
+                    )}
+                  </div>
+                </ModalBody>
+                <ModalFooter>
+                  <ModalFooterButton text="Close" onClick={handleClose} />
+                </ModalFooter>
+              </Modal>
+            </Dialog>
+          )}
         </div>
         <QueryBuilderStatusBar queryBuilderState={queryBuilderState} />
       </div>

package/src/components/QueryBuilder_LegendApplicationPlugin.ts

@@ -28,6 +28,7 @@ import { QUERY_BUILDER_SETTING_CONFIG } from '../__lib__/QueryBuilderSetting.js'
 import { QUERY_BUILDER_COMMAND_CONFIG } from '../stores/QueryBuilderCommand.js';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { configureDataGridComponent } from '@finos/legend-lego/data-grid';
+import { Chart as ChartJS, ArcElement, Tooltip } from 'chart.js';
 
 export type CheckEntitlementEditorRender = (
   queryBuilderState: QueryBuilderState,
@@ -50,6 +51,9 @@ export class QueryBuilder_LegendApplicationPlugin extends LegendApplicationPlugi
     return [
       async (applicationStore) => {
         configureDataGridComponent();
+
+        // configure chart component
+        ChartJS.register(ArcElement, Tooltip);
       },
     ];
   }
@@ -65,9 +69,4 @@ export class QueryBuilder_LegendApplicationPlugin extends LegendApplicationPlugi
       QUERY_BUILDER_SETTING_CONFIG,
     );
   }
-
-  // TODO: rework and move this to query builder plugin (to be created) or `QueryBuilder_LegendApplicationPlugin_Extension`
-  getCheckEntitlementsEditorRender(): CheckEntitlementEditorRender | undefined {
-    return undefined;
-  }
 }

package/src/components/QueryLoader.tsx

@@ -86,7 +86,6 @@ const QueryPreviewViewer = observer(
               }
               isReadOnly={true}
               language={CODE_EDITOR_LANGUAGE.PURE}
-              showMiniMap={true}
             />
           </ModalBody>
           <ModalFooter>
@@ -324,12 +323,16 @@ export const QueryLoader = observer(
                               onChange={changeQueryNameInputValue}
                               onKeyDown={(event) => {
                                 if (event.code === 'Enter') {
+                                  event.stopPropagation();
                                   renameQuery(query)();
                                 } else if (event.code === 'Escape') {
+                                  event.stopPropagation();
                                   hideEditQueryNameInput();
                                 }
                               }}
                               onBlur={() => hideEditQueryNameInput()}
+                              // avoid clicking on the input causing the call to load query
+                              onClick={(event) => event.stopPropagation()}
                             />
                           </div>
                         ) : (