@finos/legend-application-query 5.0.1 → 5.2.1

package/src/components/QueryBuilderPropertySearchPanel.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { useRef, useState } from 'react';
 import {
   clsx,
   CheckSquareIcon,
@@ -28,6 +29,7 @@ import {
   SearchIcon,
   ChevronDownIcon,
   ChevronRightIcon,
+  useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
   Class,
@@ -37,9 +39,7 @@ import {
 } from '@finos/legend-graph';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
-import { useEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 import { QUERY_BUILDER_PROPERTY_SEARCH_TYPE } from '../QueryBuilder_Const.js';
 import {
   type QueryBuilderExplorerTreeNodeData,
@@ -116,7 +116,9 @@ const QueryBuilderTreeNodeViewer = observer(
       props;
     const [isExpandable, setIsExpandable] = useState(false);
     const propertySearchPanelState = explorerState.propertySearchPanelState;
-    const [, dragConnector, dragPreviewConnector] = useDrag(
+    const [, dragConnector, dragPreviewConnector] = useDrag<{
+      node?: QueryBuilderExplorerTreePropertyNodeData;
+    }>(
       () => ({
         type:
           node instanceof QueryBuilderExplorerTreePropertyNodeData
@@ -126,16 +128,17 @@ const QueryBuilderTreeNodeViewer = observer(
               ? QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY
               : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY
             : QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ROOT,
-        item: (): { node?: QueryBuilderExplorerTreePropertyNodeData } =>
+        item: () =>
           node instanceof QueryBuilderExplorerTreePropertyNodeData
             ? { node }
             : {},
-        collect: (monitor): { isDragging: boolean } => ({
+        collect: (monitor) => ({
           isDragging: monitor.isDragging(),
         }),
       }),
       [node],
     );
+    useDragPreviewLayer(dragPreviewConnector);
     const isMultiple =
       (node instanceof QueryBuilderExplorerTreePropertyNodeData &&
         (node.property.multiplicity.upperBound === undefined ||
@@ -169,6 +172,7 @@ const QueryBuilderTreeNodeViewer = observer(
               ),
             );
             if (
+              propertyTreeNodeData &&
               !(propertyTreeNodeData.type instanceof Class) &&
               propertyTreeNodeData.mappingData.mapped
             ) {
@@ -185,10 +189,6 @@ const QueryBuilderTreeNodeViewer = observer(
         node.parentId === pn.id,
     );
 
-    useEffect(() => {
-      dragPreviewConnector(getEmptyImage(), { captureDraggingState: true });
-    }, [dragPreviewConnector]);
-
     return (
       <div>
         <div

package/src/components/QueryBuilderResultModifierPanel.tsx

@@ -32,6 +32,7 @@ import {
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
 import type { QueryBuilderProjectionColumnState } from '../stores/QueryBuilderProjectionState.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
+import { useApplicationStore } from '@finos/legend-application';
 
 const ColumnSortEditor = observer(
   (props: {
@@ -39,6 +40,7 @@ const ColumnSortEditor = observer(
     columnSort: SortColumnState;
   }) => {
     const { queryBuilderState, columnSort } = props;
+    const applicationStore = useApplicationStore();
     const projectionState =
       queryBuilderState.fetchStructureState.projectionState;
     const sortColumns = queryBuilderState.resultSetModifierState.sortColumns;
@@ -81,7 +83,7 @@ const ColumnSortEditor = observer(
           disabled={projectionOptions.length <= 1}
           onChange={onChange}
           value={value}
-          darkMode={true}
+          darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
         />
         <button
           className="btn--dark btn--sm query-builder__projection__options__sort__type-btn"
@@ -95,7 +97,7 @@ const ColumnSortEditor = observer(
           )}
         </button>
         <button
-          className="query-builder__projection__options__sort__remove-btn"
+          className="query-builder__projection__options__sort__remove-btn btn--dark btn--caution"
           onClick={deleteColumnSort}
           tabIndex={-1}
           title={'Remove'}

package/src/components/QueryBuilderResultPanel.tsx

@@ -25,6 +25,7 @@ import {
   CaretDownIcon,
   ContextMenu,
   clsx,
+  PauseCircleIcon,
 } from '@finos/legend-art';
 import { observer } from 'mobx-react-lite';
 import { flowResult } from 'mobx';
@@ -287,6 +288,61 @@ const QueryBuilderResultContextMenu = observer(
   }),
 );
 
+const QueryBuilderGridResult = observer(
+  (props: {
+    executionResult: TdsExecutionResult;
+    queryBuilderState: QueryBuilderState;
+  }) => {
+    const { executionResult, queryBuilderState } = props;
+    const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
+      useState<CellMouseOverEvent | null>(null);
+    const columns = executionResult.result.columns;
+    const rowData = executionResult.result.rows.map((_row) => {
+      const row: Record<PropertyKey, unknown> = {};
+      const cols = executionResult.result.columns;
+      _row.values.forEach((value, idx) => {
+        // `ag-grid` shows `false` value as empty string so we have
+        // call `.toString()` to avoid this behavior.
+        // See https://github.com/finos/legend-studio/issues/1008
+        row[cols[idx] as string] = isBoolean(value) ? String(value) : value;
+      });
+      return row;
+    });
+
+    return (
+      <ContextMenu
+        content={
+          <QueryBuilderResultContextMenu
+            event={cellDoubleClickedEvent}
+            queryBuilderState={queryBuilderState}
+          />
+        }
+        menuProps={{ elevation: 7 }}
+        key={executionResult._UUID}
+        className={clsx('ag-theme-balham-dark query-builder__result__tds-grid')}
+      >
+        <AgGridReact
+          rowData={rowData}
+          onCellMouseOver={(event): void => {
+            setCellDoubleClickedEvent(event);
+          }}
+        >
+          {columns.map((colName) => (
+            <AgGridColumn
+              minWidth={50}
+              sortable={true}
+              resizable={true}
+              field={colName}
+              key={colName}
+              flex={1}
+            />
+          ))}
+        </AgGridReact>
+      </ContextMenu>
+    );
+  },
+);
+
 const QueryBuilderResultValues = observer(
   (props: {
     executionResult: ExecutionResult;
@@ -294,52 +350,11 @@ const QueryBuilderResultValues = observer(
   }) => {
     const { executionResult, queryBuilderState } = props;
     if (executionResult instanceof TdsExecutionResult) {
-      const [cellDoubleClickedEvent, setCellDoubleClickedEvent] =
-        useState<CellMouseOverEvent | null>(null);
-      const columns = executionResult.result.columns;
-      const rowData = executionResult.result.rows.map((_row) => {
-        const row: Record<PropertyKey, unknown> = {};
-        const cols = executionResult.result.columns;
-        _row.values.forEach((value, idx) => {
-          // `ag-grid` shows `false` value as empty string so we have
-          // call `.toString()` to avoid this behavior.
-          // See https://github.com/finos/legend-studio/issues/1008
-          row[cols[idx] as string] = isBoolean(value) ? String(value) : value;
-        });
-        return row;
-      });
       return (
-        <ContextMenu
-          content={
-            <QueryBuilderResultContextMenu
-              event={cellDoubleClickedEvent}
-              queryBuilderState={queryBuilderState}
-            />
-          }
-          menuProps={{ elevation: 7 }}
-          key={executionResult._UUID}
-          className={clsx(
-            'ag-theme-balham-dark query-builder__result__tds-grid',
-          )}
-        >
-          <AgGridReact
-            rowData={rowData}
-            onCellMouseOver={(event): void => {
-              setCellDoubleClickedEvent(event);
-            }}
-          >
-            {columns.map((colName) => (
-              <AgGridColumn
-                minWidth={50}
-                sortable={true}
-                resizable={true}
-                field={colName}
-                key={colName}
-                flex={1}
-              />
-            ))}
-          </AgGridReact>
-        </ContextMenu>
+        <QueryBuilderGridResult
+          queryBuilderState={queryBuilderState}
+          executionResult={executionResult}
+        />
       );
     } else if (executionResult instanceof RawExecutionResult) {
       return (
@@ -413,27 +428,35 @@ export const QueryBuilderResultPanel = observer(
         ],
       });
     };
-    const execute = (): void => {
+    const queryValidationIssues = queryBuilderState.validationIssues;
+    const isQueryValid =
+      !queryBuilderState.isQuerySupported() || !queryValidationIssues;
+    const runQuery = (): void => {
       if (queryParametersState.parameterStates.length) {
         queryParametersState.parameterValuesEditorState.open(
           (): Promise<void> =>
-            flowResult(resultState.execute()).catch(
+            flowResult(resultState.runQuery()).catch(
               applicationStore.alertUnhandledError,
             ),
           PARAMETER_SUBMIT_ACTION.EXECUTE,
         );
       } else {
-        flowResult(resultState.execute()).catch(
+        flowResult(resultState.runQuery()).catch(
           applicationStore.alertUnhandledError,
         );
       }
     };
+    const cancelQuery = (): void => {
+      resultState.setIsRunningQuery(false);
+      queryBuilderState.resultState.setQueryRunPromise(undefined);
+    };
     const generatePlan = applicationStore.guardUnhandledError(() =>
       flowResult(resultState.generatePlan(false)),
     );
     const debugPlanGeneration = applicationStore.guardUnhandledError(() =>
       flowResult(resultState.generatePlan(true)),
     );
+
     const changeLimit: React.ChangeEventHandler<HTMLInputElement> = (event) => {
       const val = event.target.value;
       queryBuilderState.resultState.setPreviewLimit(
@@ -469,52 +492,72 @@ export const QueryBuilderResultPanel = observer(
                   type="number"
                   value={resultState.previewLimit}
                   onChange={changeLimit}
+                  disabled={!isQueryValid}
                 />
               </div>
             )}
-            <button
-              className="query-builder__result__execute-btn"
-              onClick={execute}
-              disabled={
-                resultState.isExecutingQuery || resultState.isGeneratingPlan
-              }
-              tabIndex={-1}
-            >
-              <div className="query-builder__result__execute-btn__label">
-                <PlayIcon className="query-builder__result__execute-btn__label__icon" />
-                <div className="query-builder__result__execute-btn__label__title">
-                  Run Query
+            {resultState.isRunningQuery ? (
+              <button
+                className="query-builder__result__stop-btn"
+                onClick={cancelQuery}
+                tabIndex={-1}
+                disabled={!isQueryValid}
+              >
+                <div className="btn--dark btn--caution query-builder__result__stop-btn__label">
+                  <PauseCircleIcon className="query-builder__result__stop-btn__label__icon" />
+                  <div className="query-builder__result__stop-btn__label__title">
+                    Stop
+                  </div>
                 </div>
-              </div>
-              <DropdownMenu
-                className="query-builder__result__execute-btn__dropdown-btn"
-                disabled={
-                  resultState.isExecutingQuery || resultState.isGeneratingPlan
-                }
-                content={
-                  <MenuContent>
-                    <MenuContentItem
-                      className="query-builder__result__execute-btn__option"
-                      onClick={generatePlan}
-                    >
-                      Generate Plan
-                    </MenuContentItem>
-                    <MenuContentItem
-                      className="query-builder__result__execute-btn__option"
-                      onClick={debugPlanGeneration}
-                    >
-                      Debug
-                    </MenuContentItem>
-                  </MenuContent>
+              </button>
+            ) : (
+              <button
+                className="query-builder__result__execute-btn"
+                onClick={runQuery}
+                tabIndex={-1}
+                title={
+                  queryValidationIssues
+                    ? `Query is not valid:\n${queryValidationIssues
+                        .map((issue) => `\u2022 ${issue}`)
+                        .join('\n')}`
+                    : undefined
                 }
-                menuProps={{
-                  anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
-                  transformOrigin: { vertical: 'top', horizontal: 'right' },
-                }}
+                disabled={!isQueryValid}
               >
-                <CaretDownIcon />
-              </DropdownMenu>
-            </button>
+                <div className="query-builder__result__execute-btn__label">
+                  <PlayIcon className="query-builder__result__execute-btn__label__icon" />
+                  <div className="query-builder__result__execute-btn__label__title">
+                    Run Query
+                  </div>
+                </div>
+                <DropdownMenu
+                  className="query-builder__result__execute-btn__dropdown-btn"
+                  disabled={resultState.isGeneratingPlan}
+                  content={
+                    <MenuContent>
+                      <MenuContentItem
+                        className="query-builder__result__execute-btn__option"
+                        onClick={generatePlan}
+                      >
+                        Generate Plan
+                      </MenuContentItem>
+                      <MenuContentItem
+                        className="query-builder__result__execute-btn__option"
+                        onClick={debugPlanGeneration}
+                      >
+                        Debug
+                      </MenuContentItem>
+                    </MenuContent>
+                  }
+                  menuProps={{
+                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+                    transformOrigin: { vertical: 'top', horizontal: 'right' },
+                  }}
+                >
+                  <CaretDownIcon />
+                </DropdownMenu>
+              </button>
+            )}
             <DropdownMenu
               className="query-builder__result__export__dropdown"
               content={
@@ -542,19 +585,24 @@ export const QueryBuilderResultPanel = observer(
                 className="query-builder__result__export__dropdown__label"
                 tabIndex={-1}
                 title="Export"
+                disabled={!isQueryValid}
               >
                 Export
               </button>
-              <div className="query-builder__result__export__dropdown__trigger">
+              <button
+                className="query-builder__result__export__dropdown__trigger"
+                tabIndex={-1}
+                disabled={!isQueryValid}
+              >
                 <CaretDownIcon />
-              </div>
+              </button>
             </DropdownMenu>
           </div>
         </div>
         <div className="panel__content">
           <PanelLoadingIndicator
             isLoading={
-              resultState.isExecutingQuery ||
+              resultState.isRunningQuery ||
               resultState.isGeneratingPlan ||
               resultState.exportDataState.isInProgress
             }

package/src/components/QueryBuilderSetupPanel.tsx

@@ -21,7 +21,6 @@ import {
   PURE_ClassIcon,
   PURE_MappingIcon,
   PURE_RuntimeIcon,
-  EyeIcon,
   ClockIcon,
   clsx,
 } from '@finos/legend-art';
@@ -46,8 +45,9 @@ import {
 } from '@finos/legend-graph';
 import {
   type PackageableElementOption,
-  getPackageableElementOptionalFormatter,
+  getPackageableElementOptionFormatter,
   buildElementOption,
+  useApplicationStore,
 } from '@finos/legend-application';
 import { MilestoningParametersEditor } from './QueryBuilderMilestoneEditor.js';
 import { useState } from 'react';
@@ -124,8 +124,8 @@ const generateClassLabel = (
         >
           {val.name}
         </div>
-        <EyeIcon
-          className="query-builder__setup__config__item__class-label__btn"
+        <ClockIcon
+          className="query-builder__setup__config__item__class-label__milestoning"
           title={milestoningParameterValues}
         />
       </div>
@@ -151,6 +151,7 @@ const generateClassLabel = (
 export const QueryBuilderSetupPanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
+    const applicationStore = useApplicationStore();
     const querySetupState = queryBuilderState.querySetupState;
     const [isMilestoneEditorOpened, setIsMilestoneEditorOpened] =
       useState<boolean>(false);
@@ -266,15 +267,15 @@ export const QueryBuilderSetupPanel = observer(
               options={classOptions}
               onChange={changeClass}
               value={selectedClassOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               disabled={!isQuerySupported || querySetupState.classIsReadOnly}
               filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionalFormatter({
-                darkMode: true,
+              formatOptionLabel={getPackageableElementOptionFormatter({
+                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
               })}
             />
             <button
-              className="btn--dark btn__icon--dark"
+              className="btn--dark btn__icon--dark query-builder__setup__milestoning"
               tabIndex={-1}
               onClick={(): void => setIsMilestoneEditorOpened(true)}
               disabled={!isMilestonedQuery}
@@ -302,10 +303,10 @@ export const QueryBuilderSetupPanel = observer(
               options={mappingOptions}
               onChange={changeMapping}
               value={selectedMappingOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               filterOption={elementFilterOption}
-              formatOptionLabel={getPackageableElementOptionalFormatter({
-                darkMode: true,
+              formatOptionLabel={getPackageableElementOptionFormatter({
+                darkMode: !applicationStore.TEMPORARY__isLightThemeEnabled,
               })}
             />
           </div>
@@ -330,7 +331,7 @@ export const QueryBuilderSetupPanel = observer(
               options={runtimeOptions}
               onChange={changeRuntime}
               value={selectedRuntimeOption}
-              darkMode={true}
+              darkMode={!applicationStore.TEMPORARY__isLightThemeEnabled}
               filterOption={runtimeFilterOption}
             />
           </div>

package/src/components/QueryBuilderUnsupportedQueryEditor.tsx

@@ -48,7 +48,9 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
     const { queryBuilderState } = props;
     const queryUnsupportedState = queryBuilderState.queryUnsupportedState;
     const lambdaError = queryUnsupportedState.lambdaError;
-    const errorMessage = lambdaError ? `due to: ${lambdaError.message}` : '';
+    const errorMessage = lambdaError?.message
+      ? ` due to: ${lambdaError.message}`
+      : '';
     const openLambdaModal = (): void =>
       queryBuilderState.queryTextEditorState.openModal(
         QueryTextEditorMode.TEXT,
@@ -63,7 +65,7 @@ const QueryBuilderUnsupportedQueryEditPanel = observer(
         <div className="panel__content">
           <BlankPanelContent>
             <div className="query-builder__unsupported-view__main">
-              <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode ${errorMessage}`}</div>
+              <div className="query-builder__unsupported-view__summary">{`Can't display query in form mode${errorMessage}`}</div>
               <button
                 className="btn--dark query-builder__unsupported-view__to-text-mode__btn"
                 onClick={openLambdaModal}

package/src/components/QueryEditor.tsx

@@ -22,6 +22,9 @@ import {
   RobotIcon,
   SaveIcon,
   BlankPanelContent,
+  clsx,
+  EmptyLightBulbIcon,
+  LightBulbIcon,
 } from '@finos/legend-art';
 import { getQueryParameters } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -108,6 +111,8 @@ const QueryExportDialogContent = observer(
           )}
           <button
             className="btn modal__footer__close-btn btn--dark"
+            // TODO?: we should probably annotate here why,
+            // when we disable this action
             disabled={!allowCreate}
             onClick={create}
           >
@@ -199,6 +204,10 @@ const QueryEditorHeaderContent = observer(() => {
       ),
     );
   };
+  const toggleLightDarkTheme = (): void =>
+    applicationStore.TEMPORARY__setIsLightThemeEnabled(
+      !applicationStore.TEMPORARY__isLightThemeEnabled,
+    );
   const saveQuery = (): void => {
     editorStore.queryBuilderState
       .saveQuery(async (lambda: RawLambda) => {
@@ -227,6 +236,20 @@ const QueryEditorHeaderContent = observer(() => {
         >
           <ExternalLinkSquareIcon />
         </button>
+        {applicationStore.config.options.TEMPORARY__enableThemeSwitcher && (
+          <button
+            className="query-editor__header__action query-editor__header__action--simple btn--dark"
+            tabIndex={-1}
+            title="Toggle Light/Dark Theme"
+            onClick={toggleLightDarkTheme}
+          >
+            {applicationStore.TEMPORARY__isLightThemeEnabled ? (
+              <EmptyLightBulbIcon />
+            ) : (
+              <LightBulbIcon />
+            )}
+          </button>
+        )}
         <button
           className="query-editor__header__action btn--dark"
           tabIndex={-1}
@@ -256,9 +279,24 @@ export const QueryEditor = observer(() => {
     );
   }, [editorStore, applicationStore]);
 
+  useEffect(() => {
+    document.body.classList.toggle(
+      'light-theme',
+      applicationStore.TEMPORARY__isLightThemeEnabled,
+    );
+  }, [applicationStore.TEMPORARY__isLightThemeEnabled]);
+
   return (
     <DndProvider backend={HTML5Backend}>
-      <div className="query-editor">
+      <div
+        className={clsx([
+          'query-editor ',
+          {
+            'query-editor--light':
+              applicationStore.TEMPORARY__isLightThemeEnabled,
+          },
+        ])}
+      >
         <div className="query-editor__header">
           <button
             className="query-editor__header__back-btn btn--dark"

package/src/stores/QueryBuilderExplorerState.ts

@@ -50,6 +50,8 @@ import {
   EntityMappedProperty,
   Enumeration,
   DerivedProperty,
+  Property,
+  Association,
 } from '@finos/legend-graph';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 import {
@@ -342,7 +344,7 @@ export const getQueryBuilderPropertyNodeData = (
   property: AbstractProperty,
   parentNode: QueryBuilderExplorerTreeNodeData,
   modelCoverageAnalysisResult: MappingModelCoverageAnalysisResult,
-): QueryBuilderExplorerTreePropertyNodeData => {
+): QueryBuilderExplorerTreePropertyNodeData | undefined => {
   const mappingNodeData = generatePropertyNodeMappingData(
     property,
     parentNode.mappingData,
@@ -353,6 +355,21 @@ export const getQueryBuilderPropertyNodeData = (
     parentNode.isPartOfDerivedPropertyBranch ||
     (parentNode instanceof QueryBuilderExplorerTreePropertyNodeData &&
       parentNode.property instanceof DerivedProperty);
+  // NOTE: in case of association, to avoid infinite exploration path
+  // we will prune it, on the other hand, in circular composition case
+  // A has property of type B and B has property of type A
+  // we will allow users to explore as deeply as they wish
+  // See https://github.com/finos/legend-studio/issues/1172
+  if (
+    property instanceof Property &&
+    parentNode instanceof QueryBuilderExplorerTreePropertyNodeData &&
+    parentNode.property instanceof Property &&
+    property._OWNER instanceof Association &&
+    parentNode.property._OWNER instanceof Association &&
+    parentNode.property._OWNER === property._OWNER
+  ) {
+    return undefined;
+  }
   const propertyNode = new QueryBuilderExplorerTreePropertyNodeData(
     `${
       parentNode instanceof QueryBuilderExplorerTreeRootNodeData
@@ -455,8 +472,10 @@ const getQueryBuilderTreeData = (
         treeRootNode,
         modelCoverageAnalysisResult,
       );
-      addUniqueEntry(treeRootNode.childrenIds, propertyTreeNodeData.id);
-      nodes.set(propertyTreeNodeData.id, propertyTreeNodeData);
+      if (propertyTreeNodeData) {
+        addUniqueEntry(treeRootNode.childrenIds, propertyTreeNodeData.id);
+        nodes.set(propertyTreeNodeData.id, propertyTreeNodeData);
+      }
     });
   rootClass._subclasses.forEach((subclass) => {
     const subTypeTreeNodeData = getQueryBuilderSubTypeNodeData(