@finos/legend-query-builder 4.7.4 → 4.9.0

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -25,6 +25,7 @@ import {
   CustomSelectorInput,
   Dialog,
   InfoCircleIcon,
+  InputWithInlineValidation,
   Modal,
   ModalBody,
   ModalFooter,
@@ -42,10 +43,7 @@ import {
   Multiplicity,
   isValidIdentifier,
 } from '@finos/legend-graph';
-import {
-  debounce,
-  generateEnumerableNameFromToken,
-} from '@finos/legend-shared';
+import { generateEnumerableNameFromToken } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
 import { DEFAULT_CONSTANT_VARIABLE_NAME } from '../stores/QueryBuilderConfig.js';
 import type { QueryBuilderState } from '../stores/QueryBuilderState.js';
@@ -58,10 +56,11 @@ import { buildDefaultInstanceValue } from '../stores/shared/ValueSpecificationEd
 import { BasicValueSpecificationEditor } from './shared/BasicValueSpecificationEditor.js';
 import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
 import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { variableExpression_setName } from '../stores/shared/ValueSpecificationModifierHelper.js';
-import { LambdaEditor_PopUp } from './shared/LambdaEditor.js';
+import { LambdaEditor } from './shared/LambdaEditor.js';
 import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
+import { flowResult } from 'mobx';
 
 // NOTE: We currently only allow constant variables for primitive types of multiplicity ONE.
 // This is why we don't show multiplicity in the editor.
@@ -219,26 +218,88 @@ const QuerryBuilderCalculatedConstantExpressionEditor = observer(
     const { constantState } = props;
     const queryBuilderState = constantState.queryBuilderState;
     const lambdaState = constantState.lambdaState;
-    const closePopUp = (): void =>
+    const close = (): void => {
       queryBuilderState.constantState.setSelectedConstant(undefined);
-    const debouncedTransformStringToLambda = useMemo(
-      () =>
-        debounce(() => lambdaState.convertLambdaGrammarStringToObject(), 1000),
-      [lambdaState],
-    );
-    const canDrop = true;
+      flowResult(constantState.updateVariableExpressionType()).catch(
+        queryBuilderState.applicationStore.alertUnhandledError,
+      );
+    };
+    const applicationStore = queryBuilderState.applicationStore;
+    const changeConstantName: React.ChangeEventHandler<HTMLInputElement> = (
+      event,
+    ) => {
+      variableExpression_setName(constantState.variable, event.target.value);
+    };
+    useEffect(() => {
+      flowResult(
+        lambdaState.convertLambdaObjectToGrammarString({
+          pretty: true,
+        }),
+      ).catch(applicationStore.alertUnhandledError);
+    }, [applicationStore, lambdaState]);
     return (
-      <>
-        <div className="lambda-editor" />
-        <LambdaEditor_PopUp
-          title={`Edit Constant ${constantState.variable.name}`}
-          className={clsx({ 'lambda-editor--dnd-match': canDrop })}
-          disabled={false}
-          lambdaEditorState={lambdaState}
-          transformStringToLambda={debouncedTransformStringToLambda}
-          onClose={closePopUp}
-        />
-      </>
+      <Dialog
+        open={true}
+        onClose={close}
+        classes={{
+          root: 'editor-modal__root-container',
+          container: 'editor-modal__container',
+          paper: 'editor-modal__content',
+        }}
+      >
+        <Modal
+          darkMode={true}
+          className={clsx('editor-modal query-builder__constants__modal', {
+            'query-builder__constants__modal--has-error': Boolean(
+              lambdaState.parserError,
+            ),
+          })}
+        >
+          <ModalHeader>
+            <div className="modal__title">Update Calculated Constants</div>
+            {lambdaState.parserError && (
+              <div className="modal__title__error-badge">
+                Failed to parse query
+              </div>
+            )}
+          </ModalHeader>
+          <ModalBody>
+            <div
+              className={clsx('query-builder__constants__modal__content', {
+                backdrop__element: Boolean(lambdaState.parserError),
+              })}
+            >
+              <div className="query-builder__constants__modal__name">
+                <InputWithInlineValidation
+                  className="query-builder__constants__modal__name__input input--dark"
+                  spellCheck={false}
+                  value={constantState.variable.name}
+                  onChange={changeConstantName}
+                  placeholder="Constant Name"
+                />
+              </div>
+              <LambdaEditor
+                className="query-builder__constants__lambda-editor"
+                disabled={
+                  lambdaState.convertingLambdaToStringState.isInProgress
+                }
+                lambdaEditorState={lambdaState}
+                forceBackdrop={false}
+                autoFocus={true}
+              />
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <button
+              className="btn btn--dark"
+              onClick={close}
+              disabled={Boolean(lambdaState.parserError)}
+            >
+              Close
+            </button>
+          </ModalFooter>
+        </Modal>
+      </Dialog>
     );
   },
 );

package/src/components/QueryBuilderResultPanel.tsx

@@ -68,6 +68,8 @@ import {
   prettyDuration,
   filterByType,
   isValidURL,
+  isString,
+  isNumber,
 } from '@finos/legend-shared';
 import { forwardRef, useRef, useState } from 'react';
 import {
@@ -482,15 +484,18 @@ const QueryResultCellRenderer = observer(
     const tdsExecutionResult = params.tdsExecutionResult;
     const fetchStructureImplementation =
       resultState.queryBuilderState.fetchStructureState.implementation;
-
-    const cellValue = params.value as string;
-    const formattedCellValue = !isNaN(Number(cellValue))
-      ? Intl.NumberFormat(DEFAULT_LOCALE, { maximumFractionDigits: 4 }).format(
-          Number(cellValue),
-        )
-      : cellValue;
+    const cellValue = params.value as string | null | number | undefined;
+    const formattedCellValue = (): string | null | number | undefined => {
+      if (isNumber(cellValue)) {
+        return Intl.NumberFormat(DEFAULT_LOCALE, {
+          maximumFractionDigits: 4,
+        }).format(Number(cellValue));
+      }
+      return cellValue;
+    };
+    const cellValueUrlLink =
+      isString(cellValue) && isValidURL(cellValue) ? cellValue : undefined;
     const columnName = params.column?.getColId() ?? '';
-
     const findCoordinatesFromResultValue = (
       colId: string,
       rowNumber: number,
@@ -498,7 +503,6 @@ const QueryResultCellRenderer = observer(
       const colIndex = tdsExecutionResult.result.columns.findIndex(
         (col) => col === colId,
       );
-
       return { rowIndex: rowNumber, colIndex: colIndex };
     };
 
@@ -710,12 +714,12 @@ const QueryResultCellRenderer = observer(
           onMouseUp={(event) => mouseUp(event)}
           onMouseOver={(event) => mouseOver(event)}
         >
-          {isValidURL(cellValue) ? (
-            <a href={cellValue} target="_blank" rel="noreferrer">
-              {cellValue}
+          {cellValueUrlLink ? (
+            <a href={cellValueUrlLink} target="_blank" rel="noreferrer">
+              {cellValueUrlLink}
             </a>
           ) : (
-            <span>{formattedCellValue}</span>
+            <span>{formattedCellValue()}</span>
           )}
         </div>
       </ContextMenu>

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

@@ -46,6 +46,7 @@ import {
   MoreVerticalIcon,
   MenuContentItemIcon,
   MenuContentItemLabel,
+  PanelLoadingIndicator,
 } from '@finos/legend-art';
 import {
   type ValueSpecification,
@@ -883,7 +884,11 @@ const QueryBuilderPostFilterPanelContent = observer(
             !aggregateColumnState &&
             columnState instanceof QueryBuilderDerivationProjectionColumnState
           ) {
-            await flowResult(columnState.fetchDerivationLambdaReturnType());
+            await flowResult(
+              columnState.fetchDerivationLambdaReturnType({
+                isBeingDropped: true,
+              }),
+            );
           }
           postFilterConditionState = new PostFilterConditionState(
             postFilterState,
@@ -1034,6 +1039,11 @@ const QueryBuilderPostFilterPanelContent = observer(
             isDroppable={isDroppable && postFilterState.isEmpty}
             dropTargetConnector={dropTargetConnector}
           >
+            {
+              <PanelLoadingIndicator
+                isLoading={Boolean(postFilterState.derivedColumnBeingDropped)}
+              />
+            }
             {postFilterState.isEmpty && (
               <BlankPanelPlaceholder
                 text="Add a post-filter condition"

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

@@ -174,7 +174,17 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
   }) => {
     const { projectionColumnState } = props;
     const hasParserError = projectionColumnState.tdsState.hasParserError;
-
+    const onEditorBlur = (): void => {
+      flowResult(
+        projectionColumnState.fetchDerivationLambdaReturnType({
+          forceConversionStringToLambda: true,
+          forceRefresh: true,
+        }),
+      ).catch(
+        projectionColumnState.tdsState.queryBuilderState.applicationStore
+          .alertUnhandledError,
+      );
+    };
     const handleDrop = useCallback(
       (
         item:
@@ -247,6 +257,7 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
           }
           lambdaEditorState={projectionColumnState.derivationLambdaEditorState}
           forceBackdrop={hasParserError}
+          onEditorBlur={onEditorBlur}
         />
       </div>
     );

package/src/components/shared/LambdaEditor.tsx

@@ -99,6 +99,7 @@ const LambdaEditor_Inner = observer(
     autoFocus?: boolean | undefined;
     openInPopUp?: (() => void) | undefined;
     onEditorFocus?: (() => void) | undefined;
+    onEditorBlur?: (() => void) | undefined;
     disableExpansion?: boolean | undefined;
     forceExpansion?: boolean | undefined;
   }) => {
@@ -119,6 +120,7 @@ const LambdaEditor_Inner = observer(
       autoFocus,
       openInPopUp,
       onEditorFocus,
+      onEditorBlur,
     } = props;
     const applicationStore = useApplicationStore();
     const onDidChangeModelContentEventDisposer = useRef<
@@ -127,6 +129,9 @@ const LambdaEditor_Inner = observer(
     const onDidFocusEditorWidgetDisposer = useRef<IDisposable | undefined>(
       undefined,
     );
+    const onDidBlurEditorTextDisposer = useRef<IDisposable | undefined>(
+      undefined,
+    );
     const value = normalizeLineEnding(lambdaEditorState.lambdaString);
     const parserError = lambdaEditorState.parserError;
     const compilationError = lambdaEditorState.compilationError;
@@ -285,7 +290,12 @@ const LambdaEditor_Inner = observer(
           onEditorFocus?.();
         },
       );
-
+      if (onEditorBlur) {
+        onDidBlurEditorTextDisposer.current = editor.onDidBlurEditorText(() => {
+          transformStringToLambda?.cancel();
+          onEditorBlur();
+        });
+      }
       // Set the text value
       const currentValue = getCodeEditorValue(editor);
       const editorModel = editor.getModel();
@@ -419,7 +429,7 @@ const LambdaEditor_Inner = observer(
   },
 );
 
-export const LambdaEditor_PopUp = observer(
+const LambdaEditor_PopUp = observer(
   (props: {
     title?: string | undefined;
     className?: string | undefined;
@@ -668,6 +678,7 @@ type LambdaEditorBaseProps = {
   forceBackdrop: boolean;
   autoFocus?: boolean | undefined;
   onEditorFocus?: (() => void) | undefined;
+  onEditorBlur?: (() => void) | undefined;
 };
 
 export const InlineLambdaEditor = observer(
@@ -716,6 +727,7 @@ export const InlineLambdaEditor = observer(
       hideErrorBar,
       autoFocus,
       onEditorFocus,
+      onEditorBlur,
     } = props;
     const [showPopUp, setShowPopUp] = useState(false);
     const openInPopUp = (): void => setShowPopUp(true);
@@ -786,6 +798,7 @@ export const InlineLambdaEditor = observer(
         autoFocus={autoFocus}
         openInPopUp={openInPopUp}
         onEditorFocus={onEditorFocus}
+        onEditorBlur={onEditorBlur}
         hideErrorBar={hideErrorBar}
         forceExpansion={
           disableExpansion !== undefined

package/src/stores/QueryBuilderConstantsState.ts

@@ -24,6 +24,10 @@ import {
   buildSourceInformationSourceId,
   ParserError,
   GRAPH_MANAGER_EVENT,
+  RawLambda,
+  PureModel,
+  CoreModel,
+  SystemModel,
 } from '@finos/legend-graph';
 import {
   type Hashable,
@@ -38,8 +42,9 @@ import {
   LogEvent,
   changeEntry,
   assertTrue,
+  ActionState,
 } from '@finos/legend-shared';
-import { action, makeObservable, observable } from 'mobx';
+import { action, flow, flowResult, makeObservable, observable } from 'mobx';
 import { QUERY_BUILDER_STATE_HASH_STRUCTURE } from './QueryBuilderStateHashUtils.js';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 import {
@@ -152,10 +157,13 @@ export class QueryBuilderSimpleConstantExpressionState
 export class QueryBuilderConstantLambdaEditorState extends LambdaEditorState {
   readonly queryBuilderState: QueryBuilderState;
   calculatedState: QueryBuilderCalculatedConstantExpressionState;
+  convertingLambdaToStringState = ActionState.create();
+
   constructor(calculatedState: QueryBuilderCalculatedConstantExpressionState) {
     super('', '');
     makeObservable(this, {
       calculatedState: observable,
+      convertingLambdaToStringState: observable,
       buildEmptyValueSpec: observable,
     });
     this.calculatedState = calculatedState;
@@ -184,6 +192,7 @@ export class QueryBuilderConstantLambdaEditorState extends LambdaEditorState {
   override *convertLambdaGrammarStringToObject(): GeneratorFn<void> {
     if (this.lambdaString) {
       try {
+        this.convertingLambdaToStringState.inProgress();
         const valSpec =
           (yield this.queryBuilderState.graphManagerState.graphManager.pureCodeToValueSpecification(
             this.fullLambdaString,
@@ -199,10 +208,13 @@ export class QueryBuilderConstantLambdaEditorState extends LambdaEditorState {
           LogEvent.create(GRAPH_MANAGER_EVENT.PARSING_FAILURE),
           error,
         );
+      } finally {
+        this.convertingLambdaToStringState.complete();
       }
     } else {
       this.clearErrors();
       this.calculatedState.setValue(this.buildEmptyValueSpec());
+      this.convertingLambdaToStringState.complete();
     }
   }
   override *convertLambdaObjectToGrammarString(
@@ -252,14 +264,45 @@ export class QueryBuilderCalculatedConstantExpressionState
       lambdaState: observable,
       value: observable,
       setValue: action,
+      updateVariableExpressionType: flow,
     });
     this.value = value;
     this.lambdaState = new QueryBuilderConstantLambdaEditorState(this);
+    observe_ValueSpecification(
+      variable,
+      this.queryBuilderState.observerContext,
+    );
   }
 
   setValue(val: PlainObject): void {
     this.value = val;
   }
+
+  *updateVariableExpressionType(): GeneratorFn<void> {
+    try {
+      if (this.lambdaState.lambdaString) {
+        yield flowResult(this.lambdaState.convertLambdaGrammarStringToObject());
+      }
+      const rawLambda = new RawLambda([], [this.value]);
+      const type =
+        (yield this.queryBuilderState.graphManagerState.graphManager.getLambdaReturnType(
+          rawLambda,
+          new PureModel(new CoreModel([]), new SystemModel([]), []),
+        )) as string;
+      const resolvedType =
+        this.queryBuilderState.graphManagerState.graph.getType(type);
+      valueSpecification_setGenericType(
+        this.variable,
+        GenericTypeExplicitReference.create(new GenericType(resolvedType)),
+      );
+    } catch (error) {
+      assertErrorThrown(error);
+      this.queryBuilderState.applicationStore.logService.error(
+        LogEvent.create(GRAPH_MANAGER_EVENT.COMPILATION_FAILURE),
+        error,
+      );
+    }
+  }
 }
 
 export class QueryBuilderConstantsState implements Hashable {

package/src/stores/QueryBuilderState.ts

@@ -552,6 +552,7 @@ export abstract class QueryBuilderState implements CommandRegistrar {
       if (this.parametersState.parameterStates.length > 0) {
         this.setShowParametersPanel(true);
       }
+      this.fetchStructureState.initializeWithQuery();
     } catch (error) {
       assertErrorThrown(error);
       this.resetQueryResult({ preserveResult: options?.preserveResult });