@finos/legend-query-builder 0.6.22 → 0.6.24

package/src/components/QueryBuilderResultPanel.tsx

@@ -463,14 +463,16 @@ export const QueryBuilderResultPanel = observer(
     const isQueryValid =
       !queryBuilderState.isQuerySupported || !queryValidationIssues;
     const runQuery = (): void => {
+      resultState.pressedRunQuery.inProgress();
       if (queryParametersState.parameterStates.length) {
         queryParametersState.parameterValuesEditorState.open(
           (): Promise<void> =>
             flowResult(resultState.runQuery()).catch(
               applicationStore.alertUnhandledError,
             ),
-          PARAMETER_SUBMIT_ACTION.EXECUTE,
+          PARAMETER_SUBMIT_ACTION.RUN,
         );
+        resultState.pressedRunQuery.complete();
       } else {
         flowResult(resultState.runQuery()).catch(
           applicationStore.alertUnhandledError,
@@ -496,6 +498,11 @@ export const QueryBuilderResultPanel = observer(
     };
     const allowSettingPreviewLimit = queryBuilderState.isQuerySupported;
 
+    const isRunQueryDisabled =
+      !isQueryValid ||
+      resultState.isGeneratingPlan ||
+      resultState.pressedRunQuery.isInProgress;
+
     const getResultSetDescription = (
       _executionResult: ExecutionResult,
     ): string | undefined => {
@@ -526,6 +533,11 @@ export const QueryBuilderResultPanel = observer(
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">result</div>
+            {resultState.pressedRunQuery.isInProgress && (
+              <div className="panel__header__title__label__status">
+                Running Query...
+              </div>
+            )}
             <div className="query-builder__result__analytics">
               {resultDescription ?? ''}
             </div>
@@ -583,7 +595,7 @@ export const QueryBuilderResultPanel = observer(
                           .join('\n')}`
                       : undefined
                   }
-                  disabled={!isQueryValid}
+                  disabled={isRunQueryDisabled}
                 >
                   <PlayIcon className="query-builder__result__execute-btn__label__icon" />
                   <div className="query-builder__result__execute-btn__label__title">
@@ -592,18 +604,20 @@ export const QueryBuilderResultPanel = observer(
                 </button>
                 <DropdownMenu
                   className="query-builder__result__execute-btn__dropdown-btn"
-                  disabled={resultState.isGeneratingPlan || !isQueryValid}
+                  disabled={isRunQueryDisabled}
                   content={
                     <MenuContent>
                       <MenuContentItem
                         className="query-builder__result__execute-btn__option"
                         onClick={generatePlan}
+                        disabled={isRunQueryDisabled}
                       >
                         Generate Plan
                       </MenuContentItem>
                       <MenuContentItem
                         className="query-builder__result__execute-btn__option"
                         onClick={debugPlanGeneration}
+                        disabled={isRunQueryDisabled}
                       >
                         Debug
                       </MenuContentItem>

package/src/components/QueryBuilderSideBar.tsx

@@ -183,7 +183,7 @@ export const QueryBuilderClassSelector = observer(
               filterOption={elementFilterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({
                 darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
-                pureModel: queryBuilderState.graphManagerState.graph,
+                graph: queryBuilderState.graphManagerState.graph,
               })}
             />
             {queryBuilderState.isQuerySupported && (
@@ -341,7 +341,7 @@ const BasicQueryBuilderSetup = observer(
                 filterOption={mappingFilterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({
                   darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
-                  pureModel: queryBuilderState.graphManagerState.graph,
+                  graph: queryBuilderState.graphManagerState.graph,
                 })}
               />
             </div>

package/src/components/QueryBuilderTextEditor.tsx

@@ -19,12 +19,13 @@ import { observer } from 'mobx-react-lite';
 import {
   clsx,
   Dialog,
-  LoadingIcon,
   Modal,
   ModalBody,
   ModalFooter,
+  ModalFooterStatus,
   ModalHeader,
   PanelLoadingIndicator,
+  RefreshIcon,
 } from '@finos/legend-art';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import { QueryBuilderTextEditorMode } from '../stores/QueryBuilderTextEditorState.js';
@@ -115,6 +116,10 @@ export const QueryBuilderTextEditor = observer(
             </div>
           </ModalBody>
           <ModalFooter>
+            {queryBuilderState.textEditorState.closingQueryState
+              .isInProgress && (
+              <ModalFooterStatus>Closing Query...</ModalFooterStatus>
+            )}
             {mode === QueryBuilderTextEditorMode.TEXT && (
               <button
                 className="btn btn--dark btn--caution"
@@ -134,7 +139,10 @@ export const QueryBuilderTextEditor = observer(
               {queryBuilderState.textEditorState.closingQueryState
                 .isInProgress ? (
                 <>
-                  <LoadingIcon isLoading={true} /> Closing
+                  <div className="loading-icon__container--spinning">
+                    <RefreshIcon />
+                    Closing
+                  </div>
                 </>
               ) : (
                 <> Close </>

package/src/components/QueryBuilder_TestID.ts

@@ -23,7 +23,7 @@ export enum QUERY_BUILDER_TEST_ID {
   QUERY_BUILDER_GRAPH_FETCH = 'query__builder__graph__fetch',
   QUERY_BUILDER_FILTER = 'query__builder__filter',
   QUERY_BUILDER_POST_FILTER = 'query__builder__post-filter',
-  QUERY_BUILDER_OLAP_GROUPBY = 'query__builder__olap-groupby',
+  QUERY_BUILDER_WINDOW_GROUPBY = 'query__builder__window',
   QUERY_BUILDER_EXPLORER = 'query__builder__explorer',
   QUERY_BUILDER_PROPERTY_SEARCH_PANEL = 'query__builder__property__search__panel',
   QUERY_BUILDER_RESULT_PANEL = 'query__builder__result__panel',

package/src/components/explorer/QueryBuilderExplorerPanel.tsx

@@ -204,7 +204,10 @@ const QueryBuilderExplorerPreviewDataModal = observer(
 
     return (
       <Dialog
-        open={Boolean(previewDataState.previewData)}
+        open={
+          Boolean(previewDataState.previewData) ||
+          previewDataState.isGeneratingPreviewData
+        }
         onClose={close}
         classes={{
           root: 'editor-modal__root-container',
@@ -219,7 +222,15 @@ const QueryBuilderExplorerPreviewDataModal = observer(
           <ModalHeader
             title={prettyPropertyName(previewDataState.propertyName)}
           />
+          <PanelLoadingIndicator
+            isLoading={previewDataState.isGeneratingPreviewData}
+          />
           <ModalBody className="query-builder__explorer__preview-data-modal__body">
+            {previewDataState.isGeneratingPreviewData && (
+              <div className="query-builder__explorer__preview-data-modal__placeholder">
+                Loading preview data...
+              </div>
+            )}
             {previewDataState.previewData && (
               <table className="table">
                 <thead>

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

@@ -93,9 +93,9 @@ import {
   renderPropertyTypeIcon,
 } from './QueryBuilderTDSComponentHelper.js';
 import {
-  type QueryBuilderOLAPColumnDragSource,
-  QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
-} from '../../stores/fetch-structure/tds/olapGroupBy/QueryBuilderOLAPGroupByState.js';
+  type QueryBuilderWindowColumnDragSource,
+  QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
+} from '../../stores/fetch-structure/tds/window/QueryBuilderWindowState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 
 const QueryBuilderPostFilterConditionContextMenu = observer(
@@ -218,7 +218,7 @@ export const QueryBuilderColumnBadge = observer(
       () => ({
         accept: [
           QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-          QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
+          QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
         ],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
@@ -486,12 +486,12 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
       (item: QueryBuilderPostFilterDropTarget, type: string): void => {
         if (
           type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE ||
-          type === QUERY_BUILDER_OLAP_COLUMN_DND_TYPE
+          type === QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE
         ) {
           const columnState = (
             item as
               | QueryBuilderProjectionColumnDragSource
-              | QueryBuilderOLAPColumnDragSource
+              | QueryBuilderWindowColumnDragSource
           ).columnState as QueryBuilderTDSColumnState;
           let conditionState: PostFilterConditionState;
           try {
@@ -553,7 +553,7 @@ const QueryBuilderPostFilterTreeNodeContainer = observer(
         accept: [
           ...Object.values(QUERY_BUILDER_POST_FILTER_DND_TYPE),
           QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-          QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
+          QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
         ],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
@@ -865,7 +865,7 @@ const QueryBuilderPostFilterPanelContent = observer(
       () => ({
         accept: [
           QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-          QUERY_BUILDER_OLAP_COLUMN_DND_TYPE,
+          QUERY_BUILDER_WINDOW_COLUMN_DND_TYPE,
         ],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {

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

@@ -21,7 +21,7 @@ import {
   ResizablePanelSplitter,
 } from '@finos/legend-art';
 import { QueryBuilderFilterPanel } from '../filter/QueryBuilderFilterPanel.js';
-import { QueryBuilderOlapGroupByPanel } from './QueryBuilderOLAPGroupByPanel.js';
+import { QueryBuilderTDSWindowPanel } from './QueryBuilderTDSWindowPanel.js';
 import { QueryBuilderPostFilterPanel } from './QueryBuilderPostFilterPanel.js';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 
@@ -29,7 +29,7 @@ export const QueryBuilderPostTDSPanel = observer(
   (props: { tdsState: QueryBuilderTDSState }) => {
     const { tdsState } = props;
     const showFilterPanel = tdsState.queryBuilderState.filterState.showPanel;
-    const showOLAPGroupByPanel = tdsState.showOlapGroupByPanel;
+    const showWindowFuncPanel = tdsState.showWindowFuncPanel;
     const showPostFilterPanel = tdsState.showPostFilterPanel;
     if (!tdsState.TEMPORARY__showPostFetchStructurePanel) {
       return null;
@@ -43,17 +43,15 @@ export const QueryBuilderPostTDSPanel = observer(
             />
           </ResizablePanel>
         )}
-        {showFilterPanel && (showOLAPGroupByPanel || showPostFilterPanel) && (
+        {showFilterPanel && (showWindowFuncPanel || showPostFilterPanel) && (
           <ResizablePanelSplitter />
         )}
-        {showOLAPGroupByPanel && (
+        {showWindowFuncPanel && (
           <ResizablePanel minSize={40}>
-            <QueryBuilderOlapGroupByPanel
-              olapGroupByState={tdsState.olapGroupByState}
-            />
+            <QueryBuilderTDSWindowPanel tdsWindowState={tdsState.windowState} />
           </ResizablePanel>
         )}
-        {showOLAPGroupByPanel && showPostFilterPanel && (
+        {showWindowFuncPanel && showPostFilterPanel && (
           <ResizablePanelSplitter />
         )}
         {showPostFilterPanel && (