@finos/legend-query-builder 4.6.0 → 4.7.0

package/src/components/QueryBuilderConstantExpressionPanel.tsx

@@ -21,6 +21,7 @@ import {
 } from '@finos/legend-lego/graph-editor';
 import {
   BlankPanelPlaceholder,
+  clsx,
   CustomSelectorInput,
   Dialog,
   InfoCircleIcon,
@@ -41,25 +42,30 @@ import {
   Multiplicity,
   isValidIdentifier,
 } from '@finos/legend-graph';
-import { generateEnumerableNameFromToken } from '@finos/legend-shared';
+import {
+  debounce,
+  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';
 import {
   type QueryBuilderConstantExpressionState,
   QueryBuilderSimpleConstantExpressionState,
+  QueryBuilderCalculatedConstantExpressionState,
 } from '../stores/QueryBuilderConstantsState.js';
 import { buildDefaultInstanceValue } from '../stores/shared/ValueSpecificationEditorHelper.js';
 import { BasicValueSpecificationEditor } from './shared/BasicValueSpecificationEditor.js';
-import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
 import { QUERY_BUILDER_TEST_ID } from '../__lib__/QueryBuilderTesting.js';
 import { QUERY_BUILDER_DOCUMENTATION_KEY } from '../__lib__/QueryBuilderDocumentation.js';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { variableExpression_setName } from '../stores/shared/ValueSpecificationModifierHelper.js';
+import { LambdaEditor_PopUp } from './shared/LambdaEditor.js';
+import { VariableViewer } from './shared/QueryBuilderVariableSelector.js';
 
 // NOTE: We currently only allow constant variables for primitive types of multiplicity ONE.
 // This is why we don't show multiplicity in the editor.
-const QueryBuilderConstantExpressionEditor = observer(
+const QueryBuilderSimpleConstantExpressionEditor = observer(
   (props: { constantState: QueryBuilderSimpleConstantExpressionState }) => {
     const { constantState } = props;
     const queryBuilderState = constantState.queryBuilderState;
@@ -208,6 +214,35 @@ const QueryBuilderConstantExpressionEditor = observer(
   },
 );
 
+const QuerryBuilderCalculatedConstantExpressionEditor = observer(
+  (props: { constantState: QueryBuilderCalculatedConstantExpressionState }) => {
+    const { constantState } = props;
+    const queryBuilderState = constantState.queryBuilderState;
+    const lambdaState = constantState.lambdaState;
+    const closePopUp = (): void =>
+      queryBuilderState.constantState.setSelectedConstant(undefined);
+    const debouncedTransformStringToLambda = useMemo(
+      () =>
+        debounce(() => lambdaState.convertLambdaGrammarStringToObject(), 1000),
+      [lambdaState],
+    );
+    const canDrop = true;
+    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}
+        />
+      </>
+    );
+  },
+);
+
 export const QueryBuilderConstantExpressionPanel = observer(
   (props: { queryBuilderState: QueryBuilderState }) => {
     const { queryBuilderState } = props;
@@ -248,10 +283,41 @@ export const QueryBuilderConstantExpressionPanel = observer(
       val: QueryBuilderConstantExpressionState,
     ): React.ReactNode => {
       if (val instanceof QueryBuilderSimpleConstantExpressionState) {
-        return <QueryBuilderConstantExpressionEditor constantState={val} />;
+        return (
+          <QueryBuilderSimpleConstantExpressionEditor constantState={val} />
+        );
+      } else if (val instanceof QueryBuilderCalculatedConstantExpressionState) {
+        return (
+          <QuerryBuilderCalculatedConstantExpressionEditor
+            constantState={val}
+          />
+        );
       }
       return null;
     };
+    const getExtraContextMenu = (
+      val: QueryBuilderConstantExpressionState,
+    ):
+      | {
+          key: string;
+          label: string;
+          handler: () => void;
+        }[]
+      | undefined => {
+      if (val instanceof QueryBuilderSimpleConstantExpressionState) {
+        return [
+          {
+            key: 'convert-to-derivation',
+            label: 'Convert To Derivation',
+            handler: () =>
+              constantState.queryBuilderState.constantState.convertToCalculated(
+                val,
+              ),
+          },
+        ];
+      }
+      return undefined;
+    };
 
     return (
       <div
@@ -290,13 +356,20 @@ export const QueryBuilderConstantExpressionPanel = observer(
                   key={constState.uuid}
                   queryBuilderState={queryBuilderState}
                   variable={constState.variable}
-                  constantValue={constState.value}
+                  value={{
+                    val:
+                      constState instanceof
+                      QueryBuilderSimpleConstantExpressionState
+                        ? constState.value
+                        : undefined,
+                  }}
                   actions={{
                     editVariable: () =>
                       constantState.setSelectedConstant(constState),
                     deleteVariable: () =>
                       constantState.removeConstant(constState),
                   }}
+                  extraContextMenuActions={getExtraContextMenu(constState)}
                   isReadOnly={isReadOnly}
                 />
               ))}

package/src/components/QueryBuilderParametersPanel.tsx

@@ -266,7 +266,6 @@ export const QueryBuilderParametersPanel = observer(
         parmaterState.mockParameterValue();
       }
     };
-
     return (
       <div
         data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_PARAMETERS}

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -871,12 +871,9 @@ const CollectionValueInstanceValueEditor = observer(
         onClick={enableEdit}
         title="Click to edit"
       >
-        <input
-          className="value-spec-editor__list-editor__preview"
-          spellCheck={false}
-          value={previewText}
-          disabled={true}
-        />
+        <div className="value-spec-editor__list-editor__preview">
+          {previewText}
+        </div>
         <button className="value-spec-editor__list-editor__edit-icon">
           <PencilIcon />
         </button>

package/src/components/shared/LambdaEditor.tsx

@@ -419,8 +419,9 @@ const LambdaEditor_Inner = observer(
   },
 );
 
-const LambdaEditor_PopUp = observer(
+export const LambdaEditor_PopUp = observer(
   (props: {
+    title?: string | undefined;
     className?: string | undefined;
     disabled: boolean;
     lambdaEditorState: LambdaEditorState;
@@ -432,6 +433,7 @@ const LambdaEditor_PopUp = observer(
       disabled,
       lambdaEditorState,
       transformStringToLambda,
+      title,
       onClose,
     } = props;
     const applicationStore = useApplicationStore();
@@ -607,7 +609,7 @@ const LambdaEditor_PopUp = observer(
           )}
         >
           <ModalHeader>
-            <ModalTitle title="Edit Lambda" />
+            <ModalTitle title={title ?? 'Edit Lambda'} />
             {lambdaEditorState.parserError && (
               <div className="modal__title__error-badge">
                 Failed to parse lambda

package/src/components/shared/QueryBuilderVariableSelector.tsx

@@ -15,19 +15,23 @@
  */
 
 import {
+  CalculatorIcon,
+  ContextMenu,
   DollarIcon,
   DragPreviewLayer,
   InfoCircleIcon,
+  MenuContent,
+  MenuContentItem,
   PanelFormListItems,
   PencilIcon,
   TimesIcon,
+  clsx,
   useDragPreviewLayer,
 } from '@finos/legend-art';
 import {
+  type VariableExpression,
   type ValueSpecification,
   SimpleFunctionExpression,
-  type VariableExpression,
-  INTERNAL__UnknownValueSpecification,
 } from '@finos/legend-graph';
 import { observer } from 'mobx-react-lite';
 import { useDrag } from 'react-dnd';
@@ -39,59 +43,121 @@ import {
   VariableInfoTooltip,
 } from './BasicValueSpecificationEditor.js';
 import { buildDatePickerOption } from './CustomDatePicker.js';
+import { QueryBuilderSimpleConstantExpressionState } from '../../stores/QueryBuilderConstantsState.js';
+import { forwardRef, useState } from 'react';
+
+const CALCULATED = '(calculated)';
+
+const getNameOfValue = (
+  value: ValueSpecification,
+  queryBuilderState: QueryBuilderState,
+): string | undefined => {
+  if (value instanceof SimpleFunctionExpression) {
+    const possibleDateLabel = buildDatePickerOption(
+      value,
+      queryBuilderState.applicationStore,
+    ).label;
+    if (possibleDateLabel) {
+      return possibleDateLabel;
+    }
+  }
+  return getValueSpecificationStringValue(value);
+};
 
+const QueryBuilderVariableContextMenu = observer(
+  forwardRef<
+    HTMLDivElement,
+    {
+      variable: VariableExpression;
+      variableInUse: boolean;
+      actions?:
+        | {
+            editVariable: () => void;
+            deleteVariable: () => void;
+          }
+        | undefined;
+      extraContextMenuActions?:
+        | {
+            key: string;
+            label: string;
+            handler: () => void;
+          }[]
+        | undefined;
+    }
+  >(function QueryBuilderVariableContextMenu(props, ref) {
+    const { actions, extraContextMenuActions, variableInUse } = props;
+    return (
+      <MenuContent ref={ref}>
+        {extraContextMenuActions?.map((action) => (
+          <MenuContentItem onClick={action.handler} key={action.key}>
+            {action.label}
+          </MenuContentItem>
+        ))}
+        {actions?.editVariable && (
+          <MenuContentItem onClick={actions.editVariable}>Edit</MenuContentItem>
+        )}
+        {actions?.deleteVariable && (
+          <MenuContentItem
+            disabled={variableInUse}
+            onClick={actions.deleteVariable}
+          >
+            Remove
+          </MenuContentItem>
+        )}
+      </MenuContent>
+    );
+  }),
+);
 export const VariableViewer = observer(
   (props: {
     variable: VariableExpression;
     queryBuilderState: QueryBuilderState;
     isReadOnly: boolean;
-    constantValue?: ValueSpecification | undefined;
+    value?: {
+      val: ValueSpecification | undefined;
+    };
     actions?: {
       editVariable: () => void;
       deleteVariable: () => void;
     };
+    extraContextMenuActions?:
+      | {
+          key: string;
+          label: string;
+          handler: () => void;
+        }[]
+      | undefined;
   }) => {
-    const { variable, constantValue, actions, isReadOnly, queryBuilderState } =
-      props;
-
-    const getNameOfValue = (value: ValueSpecification): string | undefined => {
-      if (value instanceof SimpleFunctionExpression) {
-        const possibleDateLabel = buildDatePickerOption(
-          value,
-          queryBuilderState.applicationStore,
-        ).label;
-        if (possibleDateLabel) {
-          return possibleDateLabel;
-        }
-      } else if (value instanceof INTERNAL__UnknownValueSpecification) {
-        return '(calculated)';
-      }
-      return getValueSpecificationStringValue(value);
-    };
-    const constantValueString = constantValue
-      ? getNameOfValue(constantValue)
+    const {
+      variable,
+      value,
+      actions,
+      isReadOnly,
+      queryBuilderState,
+      extraContextMenuActions,
+    } = props;
+    const isVariableUsed = queryBuilderState.isVariableUsed(variable);
+    const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
+      useState(false);
+    const onContextMenuOpen = (): void => setIsSelectedFromContextMenu(true);
+    const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
+    const isConstant = Boolean(value);
+    const constantValueString = value?.val
+      ? getNameOfValue(value.val, queryBuilderState)
       : undefined;
     const name = variable.name;
-    const variableType = variable.genericType?.value.rawType;
-    const typeName = variableType?.name;
-    const isVariableUsed = queryBuilderState.isVariableUsed(variable);
+    const variableTypeName =
+      variable.genericType?.value.rawType.name ??
+      (isConstant ? CALCULATED : undefined);
     const deleteDisabled = isReadOnly || isVariableUsed;
     const deleteTitle = isVariableUsed ? 'Used in query' : 'Remove';
-
-    const isEditDisabled =
-      isReadOnly ||
-      constantValue instanceof INTERNAL__UnknownValueSpecification;
-
-    const editMessage =
-      constantValue instanceof INTERNAL__UnknownValueSpecification
-        ? 'Calculated constants can only be edited via text mode'
-        : 'Edit';
     const editVariable = (): void => {
       actions?.editVariable();
     };
     const deleteVariable = (): void => {
       actions?.deleteVariable();
     };
+
     const [, dragConnector, dragPreviewConnector] = useDrag(
       () => ({
         type: QUERY_BUILDER_VARIABLE_DND_TYPE,
@@ -103,69 +169,96 @@ export const VariableViewer = observer(
 
     return (
       <div className="query-builder__variables__variable" ref={dragConnector}>
-        <DragPreviewLayer
-          labelGetter={(item: QueryBuilderVariableDragSource): string =>
-            item.variable.name === '' ? '(unknown)' : item.variable.name
+        <ContextMenu
+          content={
+            <QueryBuilderVariableContextMenu
+              variable={variable}
+              variableInUse={isVariableUsed}
+              actions={actions}
+              extraContextMenuActions={extraContextMenuActions}
+            />
           }
-          types={[QUERY_BUILDER_VARIABLE_DND_TYPE]}
-        />
-        <div
-          onClick={editVariable}
-          className="query-builder__variables__variable__content"
+          disabled={isReadOnly || !actions}
+          className={clsx('query-builder__variables__variable__context-menu', {
+            'query-builder__variables__variable--selected-from-context-menu':
+              isSelectedFromContextMenu,
+          })}
+          menuProps={{ elevation: 7 }}
+          onOpen={onContextMenuOpen}
+          onClose={onContextMenuClose}
         >
-          <div className="query-builder__variables__variable__icon">
-            <div className="query-builder__variables__variable-icon">
-              {constantValue ? (
-                <div className="icon query-builder__variables__variable-icon">
-                  C
+          <DragPreviewLayer
+            labelGetter={(item: QueryBuilderVariableDragSource): string =>
+              item.variable.name === '' ? '(unknown)' : item.variable.name
+            }
+            types={[QUERY_BUILDER_VARIABLE_DND_TYPE]}
+          />
+          <div
+            onClick={editVariable}
+            className="query-builder__variables__variable__content"
+          >
+            <div className="query-builder__variables__variable__icon">
+              <div className="query-builder__variables__variable-icon">
+                {isConstant ? (
+                  <div className="icon query-builder__variables__variable-icon">
+                    C
+                  </div>
+                ) : (
+                  <DollarIcon />
+                )}
+              </div>
+            </div>
+            <div className="query-builder__variables__variable__label">
+              {name}
+              {isConstant ? (
+                <div
+                  className={clsx('query-builder__constants__value', {
+                    'query-builder__constants__value--icon':
+                      !constantValueString,
+                  })}
+                >
+                  {constantValueString}
+                  {!constantValueString && (
+                    <CalculatorIcon title="Calculated Constant" />
+                  )}
                 </div>
               ) : (
-                <DollarIcon />
+                <div className="query-builder__variables__variable__type">
+                  <div className="query-builder__variables__variable__type__label">
+                    {variableTypeName ?? 'unknown'}
+                  </div>
+                </div>
               )}
             </div>
           </div>
-          <div className="query-builder__variables__variable__label">
-            {name}
-            {constantValueString ? (
-              <div className="query-builder__constants__value">
-                {constantValueString}
-              </div>
-            ) : (
-              <div className="query-builder__variables__variable__type">
-                <div className="query-builder__variables__variable__type__label">
-                  {typeName ?? 'unknown'}
+          {actions && (
+            <div className="query-builder__variables__variable__actions">
+              <button
+                className="query-builder__variables__variable__action"
+                tabIndex={-1}
+                disabled={isReadOnly}
+                onClick={editVariable}
+                title="Edit"
+              >
+                <PencilIcon />
+              </button>
+              <button
+                className="query-builder__variables__variable__action"
+                tabIndex={-1}
+                onClick={deleteVariable}
+                disabled={deleteDisabled}
+                title={deleteTitle}
+              >
+                <TimesIcon />
+              </button>
+              <VariableInfoTooltip variable={variable}>
+                <div className="query-builder__variables__variable__action value-spec-editor__variable__info">
+                  <InfoCircleIcon />
                 </div>
-              </div>
-            )}
-          </div>
-        </div>
-        {actions && (
-          <div className="query-builder__variables__variable__actions">
-            <button
-              className="query-builder__variables__variable__action"
-              tabIndex={-1}
-              disabled={isEditDisabled}
-              onClick={editVariable}
-              title={editMessage}
-            >
-              <PencilIcon />
-            </button>
-            <button
-              className="query-builder__variables__variable__action"
-              tabIndex={-1}
-              onClick={deleteVariable}
-              disabled={deleteDisabled}
-              title={deleteTitle}
-            >
-              <TimesIcon />
-            </button>
-            <VariableInfoTooltip variable={variable}>
-              <div className="query-builder__variables__variable__action value-spec-editor__variable__info">
-                <InfoCircleIcon />
-              </div>
-            </VariableInfoTooltip>
-          </div>
-        )}
+              </VariableInfoTooltip>
+            </div>
+          )}
+        </ContextMenu>
       </div>
     );
   },
@@ -177,7 +270,6 @@ export const VariableSelector = observer(
     filterBy?: (variableExpression: VariableExpression) => boolean;
   }) => {
     const { queryBuilderState, filterBy } = props;
-    const isReadOnly = !queryBuilderState.isQuerySupported;
     const filteredParameterStates =
       queryBuilderState.parametersState.parameterStates.filter((p) =>
         filterBy ? filterBy(p.parameter) : true,
@@ -197,7 +289,7 @@ export const VariableSelector = observer(
             <VariableViewer
               key={pState.uuid}
               variable={pState.parameter}
-              isReadOnly={isReadOnly}
+              isReadOnly={true}
               queryBuilderState={queryBuilderState}
             />
           ))}
@@ -208,9 +300,15 @@ export const VariableSelector = observer(
               <VariableViewer
                 key={constantState.uuid}
                 variable={constantState.variable}
-                constantValue={constantState.value}
+                value={{
+                  val:
+                    constantState instanceof
+                    QueryBuilderSimpleConstantExpressionState
+                      ? constantState.value
+                      : undefined,
+                }}
                 queryBuilderState={queryBuilderState}
-                isReadOnly={isReadOnly}
+                isReadOnly={true}
               />
             ))}
           </PanelFormListItems>

package/src/stores/QueryBuilderConfig.ts

@@ -17,6 +17,7 @@
 export enum QUERY_BUILDER_SOURCE_ID_LABEL {
   QUERY_BUILDER = 'query-builder',
   PROJECTION = 'projection',
+  CONSTANT = 'constant',
 }
 
 export const DEFAULT_LAMBDA_VARIABLE_NAME = 'x';