@finos/legend-query-builder 0.4.3 → 0.5.0

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -70,10 +70,6 @@ import {
 } from '@finos/legend-shared';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 import { useApplicationStore } from '@finos/legend-application';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../../stores/QueryBuilderParametersState.js';
 import type { ValueSpecification } from '@finos/legend-graph';
 import {
   type QueryBuilderProjectionColumnDragSource,
@@ -83,7 +79,11 @@ import {
 import type { QueryBuilderFilterOperator } from '../../stores/filter/QueryBuilderFilterOperator.js';
 import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
-import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
+import {
+  BasicValueSpecificationEditor,
+  type QueryBuilderVariableDragSource,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+} from '../shared/BasicValueSpecificationEditor.js';
 
 const QueryBuilderFilterGroupConditionEditor = observer(
   (props: {
@@ -139,6 +139,7 @@ const QueryBuilderFilterConditionEditor = observer(
     const { node, isDragOver } = props;
     const graph =
       node.condition.filterState.queryBuilderState.graphManagerState.graph;
+    const queryBuilderState = node.condition.filterState.queryBuilderState;
     const applicationStore = useApplicationStore();
     const changeOperator = (val: QueryBuilderFilterOperator) => (): void =>
       node.condition.changeOperator(val);
@@ -148,19 +149,18 @@ const QueryBuilderFilterConditionEditor = observer(
       node.condition.changeProperty(
         buildPropertyExpressionFromExplorerTreeNodeData(
           propertyNode,
-          node.condition.filterState.queryBuilderState.explorerState,
+          queryBuilderState.explorerState,
         ),
       );
     // Drag and Drop on filter condition value
     const handleDrop = useCallback(
-      (item: QueryBuilderParameterDragSource): void => {
-        const parameterType =
-          item.variable.parameter.genericType?.value.rawType;
+      (item: QueryBuilderVariableDragSource): void => {
+        const parameterType = item.variable.genericType?.value.rawType;
         const conditionValueType =
           node.condition.propertyExpressionState.propertyExpression.func.value
             .genericType.value.rawType;
         if (isTypeCompatibleForAssignment(parameterType, conditionValueType)) {
-          node.condition.setValue(item.variable.parameter);
+          node.condition.setValue(item.variable);
         } else {
           applicationStore.notifyWarning(
             `Incompatible parameter type ${parameterType?.name}. ${parameterType?.name} is not compatible with type ${conditionValueType.name}.`,
@@ -170,12 +170,12 @@ const QueryBuilderFilterConditionEditor = observer(
       [applicationStore, node.condition],
     );
     const [{ isFilterValueDragOver }, dropConnector] = useDrop<
-      QueryBuilderParameterDragSource,
+      QueryBuilderVariableDragSource,
       void,
       { isFilterValueDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
         drop: (item, monitor): void => {
           if (!monitor.didDrop()) {
             handleDrop(item);
@@ -212,7 +212,6 @@ const QueryBuilderFilterConditionEditor = observer(
       reloadValues: debouncedTypeaheadSearch,
       cleanUpReloadValues,
     };
-
     return (
       <div className="query-builder-filter-tree__node__label__content">
         <PanelEntryDropZonePlaceholder
@@ -270,10 +269,7 @@ const QueryBuilderFilterConditionEditor = observer(
                     valueSpecification={node.condition.value}
                     setValueSpecification={changeValueSpecification}
                     graph={graph}
-                    obseverContext={
-                      node.condition.filterState.queryBuilderState
-                        .observableContext
-                    }
+                    obseverContext={queryBuilderState.observableContext}
                     typeCheckOption={{
                       expectedType:
                         node.condition.propertyExpressionState
@@ -282,6 +278,9 @@ const QueryBuilderFilterConditionEditor = observer(
                     }}
                     resetValue={resetNode}
                     selectorConfig={selectorConfig}
+                    isConstant={queryBuilderState.constantState.isValueSpecConstant(
+                      node.condition.value,
+                    )}
                   />
                 </PanelEntryDropZonePlaceholder>
               </div>

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -28,6 +28,7 @@ import {
   CustomSelectorInput,
   SaveIcon,
   PencilIcon,
+  DragPreviewLayer,
 } from '@finos/legend-art';
 import {
   type Enum,
@@ -80,7 +81,7 @@ type TypeCheckOption = {
   match?: boolean;
 };
 
-const ParameterInfoTooltip: React.FC<{
+export const VariableInfoTooltip: React.FC<{
   variable: VariableExpression;
   children: React.ReactElement;
   placement?: TooltipPlacement | undefined;
@@ -136,35 +137,55 @@ const ParameterInfoTooltip: React.FC<{
   );
 };
 
+export const QUERY_BUILDER_VARIABLE_DND_TYPE = 'VARIABLE';
+
+export interface QueryBuilderVariableDragSource {
+  variable: VariableExpression;
+}
+
 const VariableExpressionParameterEditor = observer(
   (props: {
     valueSpecification: VariableExpression;
-    className?: string | undefined;
     resetValue: () => void;
+    className?: string | undefined;
+    isConstant?: boolean;
   }) => {
-    const { valueSpecification, className, resetValue } = props;
+    const { valueSpecification, resetValue, isConstant, className } = props;
     const varName = valueSpecification.name;
     return (
-      <div className={clsx('value-spec-editor__parameter', className)}>
-        <div className="value-spec-editor__parameter__icon">
-          <DollarIcon />
-        </div>
-        <div className="value-spec-editor__parameter__label">
-          <div className="value-spec-editor__parameter__text">{varName}</div>
-          <ParameterInfoTooltip variable={valueSpecification}>
-            <div className="value-spec-editor__parameter__info">
-              <InfoCircleIcon />
-            </div>
-          </ParameterInfoTooltip>
-          <button
-            className="value-spec-editor__parameter__reset-btn"
-            title="Reset"
-            onClick={resetValue}
-          >
-            <RefreshIcon />
-          </button>
+      <>
+        <DragPreviewLayer
+          labelGetter={(item: QueryBuilderVariableDragSource): string =>
+            item.variable.name
+          }
+          types={[QUERY_BUILDER_VARIABLE_DND_TYPE]}
+        />
+        <div
+          className={clsx('value-spec-editor__variable', className, {
+            'value-spec-editor__variable__constant': isConstant,
+          })}
+        >
+          <div className="value-spec-editor__variable__icon">
+            {isConstant ? <div className="icon">C</div> : <DollarIcon />}
+          </div>
+          <div className="value-spec-editor__variable__label">
+            <div className="value-spec-editor__variable__text">{varName}</div>
+            <VariableInfoTooltip variable={valueSpecification}>
+              <div className="value-spec-editor__variable__info">
+                <InfoCircleIcon />
+              </div>
+            </VariableInfoTooltip>
+
+            <button
+              className="value-spec-editor__variable__reset-btn"
+              title="Reset"
+              onClick={resetValue}
+            >
+              <RefreshIcon />
+            </button>
+          </div>
         </div>
-      </div>
+      </>
     );
   },
 );
@@ -682,6 +703,7 @@ export const BasicValueSpecificationEditor: React.FC<{
   className?: string | undefined;
   setValueSpecification: (val: ValueSpecification) => void;
   resetValue: () => void;
+  isConstant?: boolean;
   selectorConfig?:
     | {
         values: string[] | undefined;
@@ -702,6 +724,7 @@ export const BasicValueSpecificationEditor: React.FC<{
     setValueSpecification,
     resetValue,
     selectorConfig,
+    isConstant,
   } = props;
   if (valueSpecification instanceof PrimitiveInstanceValue) {
     const _type = valueSpecification.genericType.value.rawType;
@@ -728,6 +751,7 @@ export const BasicValueSpecificationEditor: React.FC<{
       case PRIMITIVE_TYPE.NUMBER:
       case PRIMITIVE_TYPE.FLOAT:
       case PRIMITIVE_TYPE.DECIMAL:
+      case PRIMITIVE_TYPE.BINARY:
       case PRIMITIVE_TYPE.INTEGER:
         return (
           <NumberPrimitiveInstanceValueEditor
@@ -790,6 +814,7 @@ export const BasicValueSpecificationEditor: React.FC<{
         valueSpecification={valueSpecification}
         className={className}
         resetValue={resetValue}
+        isConstant={Boolean(isConstant)}
       />
     );
   } else if (valueSpecification instanceof INTERNAL__PropagatedValue) {

package/src/components/shared/LambdaEditor.tsx

@@ -46,7 +46,6 @@ import {
 import { flowResult } from 'mobx';
 import { ParserError, type EngineError, type Type } from '@finos/legend-graph';
 import {
-  createPassThroughOnKeyHandler,
   EDITOR_LANGUAGE,
   EDITOR_THEME,
   TAB_SIZE,
@@ -191,13 +190,6 @@ const LambdaEditorInline = observer(
             : EDITOR_THEME.LEGEND,
           ...lambdaEditorOptions,
         });
-        // NOTE: if we ever set any hotkey explicitly, we would like to use the disposer partern instead
-        // else, we could risk triggering these hotkeys command multiple times
-        // e.g.
-        // const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
-        // onKeyDownEventDisposer.current?.dispose();
-        // onKeyDownEventDisposer.current = editor.onKeyDown(() => ...)
-        _editor.onKeyDown(() => createPassThroughOnKeyHandler());
         setEditor(_editor);
       }
     }, [editor, applicationStore, useBaseTextEditorSettings]);
@@ -472,13 +464,6 @@ const LambdaEditorPopUp = observer(
           language: EDITOR_LANGUAGE.PURE,
           theme: EDITOR_THEME.LEGEND,
         });
-        // NOTE: if we ever set any hotkey explicitly, we would like to use the disposer partern instead
-        // else, we could risk triggering these hotkeys command multiple times
-        // e.g.
-        // const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
-        // onKeyDownEventDisposer.current?.dispose();
-        // onKeyDownEventDisposer.current = editor.onKeyDown(() => ...)
-        _editor.onKeyDown(() => createPassThroughOnKeyHandler());
         setEditor(_editor);
       }
     };

package/src/components/shared/QueryBuilderVariableSelector.tsx

@@ -0,0 +1,186 @@
+/**
+ * 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.
+ */
+
+import {
+  DollarIcon,
+  DragPreviewLayer,
+  InfoCircleIcon,
+  PanelFormListItems,
+  PencilIcon,
+  TimesIcon,
+  useDragPreviewLayer,
+} from '@finos/legend-art';
+import type {
+  ValueSpecification,
+  VariableExpression,
+} from '@finos/legend-graph';
+import { observer } from 'mobx-react-lite';
+import { useDrag } from 'react-dnd';
+import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
+import { getValueSpecificationStringValue } from '../../stores/shared/ValueSpecificationEditorHelper.js';
+import {
+  type QueryBuilderVariableDragSource,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+  VariableInfoTooltip,
+} from './BasicValueSpecificationEditor.js';
+
+export const VariableViewer = observer(
+  (props: {
+    variable: VariableExpression;
+    isReadOnly: boolean;
+    constantValue?: ValueSpecification | undefined;
+    actions?: {
+      editVariable: () => void;
+      deleteVariable: () => void;
+    };
+  }) => {
+    const { variable, constantValue, actions, isReadOnly } = props;
+    const valueString = constantValue
+      ? getValueSpecificationStringValue(constantValue)
+      : undefined;
+    const name = variable.name;
+    const variableType = variable.genericType?.value.rawType;
+    const typeName = variableType?.name;
+    const editVariable = (): void => {
+      actions?.editVariable();
+    };
+    const deleteVariable = (): void => {
+      actions?.deleteVariable();
+    };
+    const [, dragConnector, dragPreviewConnector] = useDrag(
+      () => ({
+        type: QUERY_BUILDER_VARIABLE_DND_TYPE,
+        item: { variable: variable },
+      }),
+      [variable],
+    );
+    useDragPreviewLayer(dragPreviewConnector);
+
+    return (
+      <div className="query-builder__variables__variable" ref={dragConnector}>
+        <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">
+              {constantValue ? (
+                <div className="icon query-builder__variables__variable-icon">
+                  C
+                </div>
+              ) : (
+                <DollarIcon />
+              )}
+            </div>
+          </div>
+          <div className="query-builder__variables__variable__label">
+            {name}
+            {valueString ? (
+              <div className="query-builder__constants__value">
+                {valueString}
+              </div>
+            ) : (
+              <div className="query-builder__variables__variable__type">
+                <div className="query-builder__variables__variable__type__label">
+                  {typeName}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        {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={isReadOnly}
+              title="Remove"
+            >
+              <TimesIcon />
+            </button>
+            <VariableInfoTooltip variable={variable}>
+              <div className="value-spec-editor__variable__info">
+                <InfoCircleIcon />
+              </div>
+            </VariableInfoTooltip>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+export const VariableSelector = observer(
+  (props: {
+    queryBuilderState: QueryBuilderState;
+    filterBy?: (variableExpression: VariableExpression) => boolean;
+  }) => {
+    const { queryBuilderState, filterBy } = props;
+    const isReadOnly = !queryBuilderState.isQuerySupported;
+    const filteredParameterStates =
+      queryBuilderState.parametersState.parameterStates.filter((p) =>
+        filterBy ? filterBy(p.parameter) : true,
+      );
+    const filteredConstantState =
+      queryBuilderState.constantState.constants.filter((c) =>
+        filterBy ? filterBy(c.variable) : true,
+      );
+    return (
+      <>
+        <PanelFormListItems title="Available parameters">
+          {filteredParameterStates.length === 0 && (
+            <> No available parameters </>
+          )}
+          {filteredParameterStates.map((pState) => (
+            <VariableViewer
+              key={pState.uuid}
+              variable={pState.parameter}
+              isReadOnly={isReadOnly}
+            />
+          ))}
+        </PanelFormListItems>
+        {Boolean(filteredConstantState.length) && (
+          <PanelFormListItems title="Available constants">
+            {filteredConstantState.map((constantState) => (
+              <VariableViewer
+                key={constantState.uuid}
+                variable={constantState.variable}
+                constantValue={constantState.value}
+                isReadOnly={isReadOnly}
+              />
+            ))}
+          </PanelFormListItems>
+        )}
+      </>
+    );
+  },
+);

package/src/components/watermark/QueryBuilderWatermark.tsx

@@ -24,7 +24,6 @@ import {
   ModalBody,
   ModalFooter,
   ModalHeader,
-  PanelFormListItems,
   PanelFormSection,
 } from '@finos/legend-art';
 import {
@@ -37,14 +36,14 @@ import {
 import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 import { useDrop } from 'react-dnd';
-import {
-  type QueryBuilderParameterDragSource,
-  QUERY_BUILDER_PARAMETER_DND_TYPE,
-} from '../../stores/QueryBuilderParametersState.js';
 import type { QueryBuilderState } from '../../stores/QueryBuilderState.js';
 import type { QueryBuilderWatermarkState } from '../../stores/watermark/QueryBuilderWatermarkState.js';
-import { VariableExpressionViewer } from '../QueryBuilderParametersPanel.js';
-import { BasicValueSpecificationEditor } from '../shared/BasicValueSpecificationEditor.js';
+import {
+  BasicValueSpecificationEditor,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+  type QueryBuilderVariableDragSource,
+} from '../shared/BasicValueSpecificationEditor.js';
+import { VariableSelector } from '../shared/QueryBuilderVariableSelector.js';
 
 const isParamaterCompatibleWithWaterMark = (
   parameter: VariableExpression,
@@ -62,24 +61,24 @@ const WatermarkValueEditor = observer(
     const graph = watermarkState.queryBuilderState.graphManagerState.graph;
 
     const handleDrop = useCallback(
-      (item: QueryBuilderParameterDragSource): void => {
-        watermarkState.setValue(item.variable.parameter);
+      (item: QueryBuilderVariableDragSource): void => {
+        watermarkState.setValue(item.variable);
       },
       [watermarkState],
     );
 
     const [{ isParameterValueDragOver }, dropTargetConnector] = useDrop<
-      QueryBuilderParameterDragSource,
+      QueryBuilderVariableDragSource,
       void,
       { isParameterValueDragOver: boolean }
     >(
       () => ({
-        accept: [QUERY_BUILDER_PARAMETER_DND_TYPE],
+        accept: [QUERY_BUILDER_VARIABLE_DND_TYPE],
         drop: (item, monitor): void => {
           if (
             !monitor.didDrop() &&
             // Only allows parameters with muliplicity 1 and type string
-            isParamaterCompatibleWithWaterMark(item.variable.parameter)
+            isParamaterCompatibleWithWaterMark(item.variable)
           ) {
             handleDrop(item);
           } // prevent drop event propagation to accomondate for nested DnD
@@ -95,7 +94,7 @@ const WatermarkValueEditor = observer(
 
     return (
       <PanelFormSection>
-        <div className="query-builder__parameter-editor">
+        <div className="query-builder__variable-editor">
           <PanelDropZone
             isDragOver={isParameterValueDragOver}
             dropTargetConnector={dropTargetConnector}
@@ -115,6 +114,9 @@ const WatermarkValueEditor = observer(
               resetValue={(): void => {
                 watermarkState.resetValue();
               }}
+              isConstant={watermarkState.queryBuilderState.constantState.isValueSpecConstant(
+                watermarkValue,
+              )}
             />
           </PanelDropZone>
         </div>
@@ -130,10 +132,6 @@ export const QueryBuilderWatermarkEditor = observer(
     const handleClose = (): void => {
       watermarkState.setIsEditingWatermark(false);
     };
-    const compatibleParameters =
-      queryBuilderState.parametersState.parameterStates.filter((p) =>
-        isParamaterCompatibleWithWaterMark(p.parameter),
-      );
 
     return (
       <Dialog
@@ -162,20 +160,10 @@ export const QueryBuilderWatermarkEditor = observer(
                     watermarkValue={watermarkState.value}
                   />
                   <PanelDivider />
-                  <PanelFormListItems title="List of available parameters">
-                    {compatibleParameters.length === 0 && (
-                      <> No available parameters </>
-                    )}
-                    {compatibleParameters.map((parameter) => (
-                      <VariableExpressionViewer
-                        key={parameter.uuid}
-                        queryBuilderState={queryBuilderState}
-                        variableExpressionState={parameter}
-                        isReadOnly={true}
-                        hideActions={true}
-                      />
-                    ))}
-                  </PanelFormListItems>
+                  <VariableSelector
+                    filterBy={isParamaterCompatibleWithWaterMark}
+                    queryBuilderState={queryBuilderState}
+                  />
                 </>
               )}
             </PanelForm>

package/src/graphManager/QueryBuilderHashUtils.ts

@@ -17,6 +17,8 @@
 export enum QUERY_BUILDER_HASH_STRUCTURE {
   // parameters state
   PARAMETERS_STATE = 'PARAMETERS_STATE',
+  CONSTANT_STATE = 'CONSTANT_STATE',
+  CONSTANT_EXPRESSION_STATE = 'CONSTANT_EXPRESSION_STATE',
 
   // projection state
   AGGREGATE_OPERATOR_AVERAGE = 'AGGREGATE_OPERATOR_AVERAGE',

package/src/stores/QueryBuilderConfig.ts

@@ -21,6 +21,7 @@ export enum QUERY_BUILDER_SOURCE_ID_LABEL {
 
 export const DEFAULT_LAMBDA_VARIABLE_NAME = 'x';
 export const DEFAULT_VARIABLE_NAME = 'var';
+export const DEFAULT_CONSTANT_VARIABLE_NAME = 'c_var';
 export const DEFAULT_POST_FILTER_LAMBDA_VARIABLE_NAME = 'row';
 
 export const QUERY_BUILDER_PROPERTY_SEARCH_MAX_DEPTH = 5;