@finos/legend-query-builder 4.14.34 → 4.14.36

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

@@ -32,10 +32,15 @@ import {
   MenuContentItem,
   ModalFooterButton,
   InputWithInlineValidation,
+  PanelDivider,
+  PanelDropZone,
+  PanelFormSection,
 } from '@finos/legend-art';
 import { SortColumnState } from '../../stores/fetch-structure/tds/QueryResultSetModifierState.js';
 import {
   addUniqueEntry,
+  clone,
+  deepClone,
   deleteEntry,
   guaranteeNonNullable,
 } from '@finos/legend-shared';
@@ -43,9 +48,23 @@ import { useApplicationStore } from '@finos/legend-application';
 import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 import type { QueryBuilderTDSColumnState } from '../../stores/fetch-structure/tds/QueryBuilderTDSColumnState.js';
 import { COLUMN_SORT_TYPE } from '../../graph/QueryBuilderMetaModelConst.js';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { QueryBuilderProjectionColumnState } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
+import { VariableSelector } from '../shared/QueryBuilderVariableSelector.js';
+import {
+  type ValueSpecification,
+  type VariableExpression,
+  PrimitiveType,
+  Multiplicity,
+  areMultiplicitiesEqual,
+} from '@finos/legend-graph';
+import {
+  BasicValueSpecificationEditor,
+  QUERY_BUILDER_VARIABLE_DND_TYPE,
+  type QueryBuilderVariableDragSource,
+} from '../shared/BasicValueSpecificationEditor.js';
+import { useDrop } from 'react-dnd';
 
 const ColumnSortEditor = observer(
   (props: {
@@ -246,6 +265,10 @@ export const QueryResultModifierModal = observer(
     const [slice, setSlice] = useState<
       [number | undefined, number | undefined]
     >(stateSlice ?? [undefined, undefined]);
+    const watermarkState = tdsState.queryBuilderState.watermarkState;
+    const [watermarkValue, setWatermarkValue] = useState(
+      deepClone(watermarkState.value),
+    );
 
     // Sync temp state with tdsState when modal is opened/closed
     useEffect(() => {
@@ -253,8 +276,10 @@ export const QueryResultModifierModal = observer(
       setDistinct(stateDistinct);
       setLimitResults(stateLimitResults);
       setSlice(stateSlice ?? [undefined, undefined]);
+      setWatermarkValue(deepClone(watermarkState.value));
     }, [
       resultSetModifierState.showModal,
+      watermarkState.value,
       stateSortColumns,
       stateDistinct,
       stateLimitResults,
@@ -273,6 +298,7 @@ export const QueryResultModifierModal = observer(
         resultSetModifierState.setSlice(undefined);
       }
       resultSetModifierState.setShowModal(false);
+      watermarkState.setValue(watermarkValue);
     };
 
     const handleLimitResultsChange: React.ChangeEventHandler<
@@ -321,6 +347,50 @@ export const QueryResultModifierModal = observer(
         slice[1] !== undefined &&
         slice[0] >= slice[1]);
 
+    // watermark
+    const isParamaterCompatibleWithWaterMark = (
+      parameter: VariableExpression,
+    ): boolean =>
+      PrimitiveType.STRING === parameter.genericType?.value.rawType &&
+      areMultiplicitiesEqual(parameter.multiplicity, Multiplicity.ONE);
+    const handleDrop = useCallback(
+      (item: QueryBuilderVariableDragSource): void => {
+        setWatermarkValue(item.variable);
+      },
+      [setWatermarkValue],
+    );
+    const toggleWatermark = (): void => {
+      if (watermarkValue) {
+        setWatermarkValue(undefined);
+      } else {
+        setWatermarkValue(watermarkState.getDefaultValue());
+      }
+    };
+    const [{ isParameterValueDragOver }, dropTargetConnector] = useDrop<
+      QueryBuilderVariableDragSource,
+      void,
+      { isParameterValueDragOver: boolean }
+    >(
+      () => ({
+        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)
+          ) {
+            handleDrop(item);
+          } // prevent drop event propagation to accomondate for nested DnD
+        },
+        collect: (monitor) => ({
+          isParameterValueDragOver: monitor.isOver({
+            shallow: true,
+          }),
+        }),
+      }),
+      [handleDrop],
+    );
+
     return (
       <Dialog
         open={Boolean(resultSetModifierState.showModal)}
@@ -428,6 +498,74 @@ export const QueryResultModifierModal = observer(
                   </div>
                 </div>
               </div>
+              <>
+                <PanelFormSection>
+                  <label className="panel__content__form__section__header__label">
+                    Watermark
+                  </label>
+                  <button
+                    className={clsx(
+                      'panel__content__form__section__toggler',
+                      'panel__content__form__section__toggler__btn',
+                      {
+                        'panel__content__form__section__toggler__btn--toggled':
+                          watermarkValue,
+                      },
+                    )}
+                    onClick={toggleWatermark}
+                    tabIndex={-1}
+                  >
+                    {watermarkValue ? <CheckSquareIcon /> : <SquareIcon />}
+                    <div className="panel__content__form__section__toggler__prompt">
+                      Enable Watermark
+                    </div>
+                  </button>
+                </PanelFormSection>
+                {watermarkValue && (
+                  <>
+                    <PanelFormSection>
+                      <div className="query-builder__variable-editor">
+                        <PanelDropZone
+                          isDragOver={isParameterValueDragOver}
+                          dropTargetConnector={dropTargetConnector}
+                        >
+                          <BasicValueSpecificationEditor
+                            valueSpecification={watermarkValue}
+                            setValueSpecification={(
+                              val: ValueSpecification,
+                            ): void => {
+                              setWatermarkValue(clone(val));
+                            }}
+                            graph={
+                              watermarkState.queryBuilderState.graphManagerState
+                                .graph
+                            }
+                            obseverContext={
+                              watermarkState.queryBuilderState.observerContext
+                            }
+                            typeCheckOption={{
+                              expectedType: PrimitiveType.STRING,
+                            }}
+                            resetValue={() =>
+                              setWatermarkValue(
+                                watermarkState.getDefaultValue(),
+                              )
+                            }
+                            isConstant={watermarkState.queryBuilderState.constantState.isValueSpecConstant(
+                              watermarkValue,
+                            )}
+                          />
+                        </PanelDropZone>
+                      </div>
+                    </PanelFormSection>
+                    <PanelDivider />
+                    <VariableSelector
+                      filterBy={isParamaterCompatibleWithWaterMark}
+                      queryBuilderState={tdsState.queryBuilderState}
+                    />
+                  </>
+                )}
+              </>
             </div>
           </ModalBody>
           <ModalFooter>

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

@@ -116,6 +116,7 @@ import {
   QueryBuilderDerivationInfoTooltip,
   QueryBuilderPropertyInfoTooltip,
 } from '../shared/QueryBuilderPropertyInfoTooltip.js';
+import { getNameOfValueSpecification } from '../shared/QueryBuilderVariableSelector.js';
 
 const QueryBuilderProjectionColumnContextMenu = observer(
   forwardRef<
@@ -784,8 +785,8 @@ const QueryBuilderProjectionColumnEditor = observer(
                       isDuplicatedColumnName
                         ? 'Duplicated column'
                         : projectionColumnState.columnName.length === 0
-                        ? 'Empty column name'
-                        : undefined
+                          ? 'Empty column name'
+                          : undefined
                     }
                   />
                 </div>
@@ -811,8 +812,8 @@ const QueryBuilderProjectionColumnEditor = observer(
                       isDuplicatedColumnName
                         ? 'Duplicated column'
                         : projectionColumnState.columnName.length === 0
-                        ? 'Empty column name'
-                        : undefined
+                          ? 'Empty column name'
+                          : undefined
                     }
                     title={projectionColumnState.columnName}
                     defaultColumnName="(derivation)"
@@ -1214,6 +1215,22 @@ export const QueryBuilderTDSPanel = observer(
                 </div>
               </div>
             )}
+            {tdsState.queryBuilderState.watermarkState.value && (
+              <div className="query-builder__projection__result-modifier-prompt__group">
+                <div className="query-builder__projection__result-modifier-prompt__group__label">
+                  Watermark
+                </div>
+                <div
+                  className="query-builder__projection__result-modifier-prompt__group__content"
+                  onClick={openResultSetModifierEditor}
+                >
+                  {getNameOfValueSpecification(
+                    tdsState.queryBuilderState.watermarkState.value,
+                    tdsState.queryBuilderState,
+                  )}
+                </div>
+              </div>
+            )}
           </div>
           <div className="query-builder__projection__toolbar__actions">
             <button

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

@@ -94,8 +94,8 @@ const createWindowColumnState = (
       ? `${operator.getLabel()} of ${columnState.columnName}`
       : columnState.columnName
     : nonColoperator.isColumnAggregator()
-    ? `${nonColoperator.getLabel()} of ${columnState.columnName}`
-    : columnState.columnName;
+      ? `${nonColoperator.getLabel()} of ${columnState.columnName}`
+      : columnState.columnName;
   if (operator) {
     const opState = new QueryBuilderTDS_WindowAggreationOperatorState(
       tdsState.windowState,
@@ -1189,8 +1189,8 @@ const QueryBuilderWindowColumnEditor = observer(
                 isDuplicatedColumnName
                   ? 'Duplicated column'
                   : isInvalidColumnName
-                  ? 'Invalid column order'
-                  : undefined
+                    ? 'Invalid column order'
+                    : undefined
               }
             />
           </div>

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -111,6 +111,7 @@ import { QueryBuilderTelemetryHelper } from '../../__lib__/QueryBuilderTelemetry
 import { getPropertyChainName } from '../../stores/QueryBuilderPropertyEditorState.js';
 import { QUERY_BUILDER_SUPPORTED_FUNCTIONS } from '../../graph/QueryBuilderMetaModelConst.js';
 import { buildPropertyExpressionChain } from '../../stores/QueryBuilderValueSpecificationBuilderHelper.js';
+import { QueryBuilderPanelIssueCountBadge } from '../shared/QueryBuilderPanelIssueCountBadge.js';
 
 const isCollectionProperty = (
   propertyExpression: AbstractPropertyExpression,
@@ -305,8 +306,8 @@ export const buildFilterTreeWithExists = (
             targetDropNode instanceof QueryBuilderFilterTreeConditionNodeData
               ? filterState.newGroupConditionFromNode(targetDropNode)
               : targetDropNode instanceof QueryBuilderFilterTreeGroupNodeData
-              ? targetDropNode
-              : filterState.getParentNode(targetDropNode);
+                ? targetDropNode
+                : filterState.getParentNode(targetDropNode);
           existsLambdaPropertyChains = existsLambdaPropertyChains.slice(
             parentPropertyChainIndex + 1,
           );
@@ -319,8 +320,8 @@ export const buildFilterTreeWithExists = (
           targetDropNode instanceof QueryBuilderFilterTreeConditionNodeData
             ? filterState.newGroupConditionFromNode(targetDropNode)
             : targetDropNode instanceof QueryBuilderFilterTreeGroupNodeData
-            ? targetDropNode
-            : filterState.getParentNode(targetDropNode);
+              ? targetDropNode
+              : filterState.getParentNode(targetDropNode);
       }
     }
   }
@@ -1092,8 +1093,8 @@ const QueryBuilderFilterTreeNodeContainer = observer(
             node instanceof QueryBuilderFilterTreeGroupNodeData
               ? QUERY_BUILDER_FILTER_DND_TYPE.GROUP_CONDITION
               : node instanceof QueryBuilderFilterTreeConditionNodeData
-              ? QUERY_BUILDER_FILTER_DND_TYPE.CONDITION
-              : QUERY_BUILDER_FILTER_DND_TYPE.BLANK_CONDITION,
+                ? QUERY_BUILDER_FILTER_DND_TYPE.CONDITION
+                : QUERY_BUILDER_FILTER_DND_TYPE.BLANK_CONDITION,
           item: () => ({ node }),
           end: (): void => filterState.setRearrangingConditions(false),
           canDrag: () =>
@@ -1479,6 +1480,11 @@ export const QueryBuilderFilterPanel = observer(
         <div className="panel__header">
           <div className="panel__header__title">
             <div className="panel__header__title__label">filter</div>
+            {filterState.allValidationIssues.length !== 0 && (
+              <QueryBuilderPanelIssueCountBadge
+                issues={filterState.allValidationIssues}
+              />
+            )}
           </div>
 
           <div className="panel__header__actions">

package/src/components/result/tds/QueryBuilderTDSResultShared.tsx

@@ -383,8 +383,8 @@ const filterByOrOutValue = (
     _cellData.value === null
       ? [postFilterEmptyOperator, postFilterNotEmptyOperator]
       : isFilterBy
-      ? [postFilterEqualOperator, postFilterInOperator]
-      : [postFilterNotEqualOperator, postFilterNotInOperator],
+        ? [postFilterEqualOperator, postFilterInOperator]
+        : [postFilterNotEqualOperator, postFilterNotInOperator],
     _cellData.columnName,
     tdsState.postFilterState,
     tdsColState,

package/src/components/result/tds/QueryBuilderTDSSimpleGridResult.tsx

@@ -277,7 +277,7 @@ const QueryResultCellRenderer = observer(
               ?.data as QueryBuilderTDSRowDataType,
           ).forEach((entry) => {
             if (entry[0] !== 'rowNumber') {
-              valueArr.push(entry[1] as QueryBuilderTDSResultCellDataType);
+              valueArr.push(entry[1]);
             }
           });
           return valueArr.join(',');

package/src/components/shared/BasicValueSpecificationEditor.tsx

@@ -33,6 +33,7 @@ import {
   BasePopover,
   PanelFormSection,
   CalculateIcon,
+  InputWithInlineValidation,
 } from '@finos/legend-art';
 import {
   type Enum,
@@ -67,6 +68,7 @@ import {
   parseCSVString,
   guaranteeIsNumber,
   csvStringify,
+  guaranteeType,
 } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { observer } from 'mobx-react-lite';
@@ -83,7 +85,10 @@ import {
 } from '../../stores/shared/ValueSpecificationModifierHelper.js';
 import { CustomDatePicker } from './CustomDatePicker.js';
 import { QUERY_BUILDER_SUPPORTED_FUNCTIONS } from '../../graph/QueryBuilderMetaModelConst.js';
-import { simplifyValueExpression } from '../../stores/QueryBuilderValueSpecificationHelper.js';
+import {
+  isValidInstanceValue,
+  simplifyValueExpression,
+} from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { evaluate } from 'mathjs';
 import { isUsedDateFunctionSupportedInFormMode } from '../../stores/QueryBuilderStateBuilder.js';
 
@@ -240,7 +245,7 @@ const StringPrimitiveInstanceValueEditor = observer(
     } = props;
     const useSelector = Boolean(selectorConfig);
     const applicationStore = useApplicationStore();
-    const value = valueSpecification.values[0] as string;
+    const value = valueSpecification.values[0] as string | null;
     const updateValueSpec = (val: string): void => {
       instanceValue_setValue(valueSpecification, val, 0, obseverContext);
       setValueSpecification(valueSpecification);
@@ -295,8 +300,8 @@ const StringPrimitiveInstanceValueEditor = observer(
             className="value-spec-editor__enum-selector"
             options={queryOptions}
             onChange={changeValue}
-            value={selectedValue}
-            inputValue={value}
+            value={selectedValue.label === '' ? '' : selectedValue}
+            inputValue={value ?? ''}
             onInputChange={handleInputChange}
             darkMode={
               !applicationStore.layoutService
@@ -308,15 +313,22 @@ const StringPrimitiveInstanceValueEditor = observer(
             components={{
               DropdownIndicator: null,
             }}
+            hasError={!isValidInstanceValue(valueSpecification)}
+            placeholder={value === '' ? '(empty)' : undefined}
           />
         ) : (
-          <input
+          <InputWithInlineValidation
             className="panel__content__form__section__input value-spec-editor__input"
             spellCheck={false}
-            value={value}
+            value={value ?? ''}
             placeholder={value === '' ? '(empty)' : undefined}
             onChange={changeInputValue}
             ref={ref}
+            error={
+              !isValidInstanceValue(valueSpecification)
+                ? 'Invalid String value'
+                : undefined
+            }
           />
         )}
         <button
@@ -397,26 +409,37 @@ const NumberPrimitiveInstanceValueEditor = observer(
       obseverContext,
     } = props;
     const [value, setValue] = useState(
-      (valueSpecification.values[0] as number).toString(),
+      valueSpecification.values[0] === null
+        ? ''
+        : (valueSpecification.values[0] as number).toString(),
     );
     const inputRef = useRef<HTMLInputElement>(null);
     useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
-    const numericValue = isInteger
-      ? Number.parseInt(Number(value).toString(), 10)
-      : Number(value);
+    const numericValue = value
+      ? isInteger
+        ? Number.parseInt(Number(value).toString(), 10)
+        : Number(value)
+      : null;
 
     const updateValueSpecIfValid = (val: string): void => {
-      const parsedValue = isInteger
-        ? Number.parseInt(Number(val).toString(), 10)
-        : Number(val);
-      if (!isNaN(parsedValue) && parsedValue !== valueSpecification.values[0]) {
-        instanceValue_setValue(
-          valueSpecification,
-          parsedValue,
-          0,
-          obseverContext,
-        );
-        setValueSpecification(valueSpecification);
+      if (val) {
+        const parsedValue = isInteger
+          ? Number.parseInt(Number(val).toString(), 10)
+          : Number(val);
+        if (
+          !isNaN(parsedValue) &&
+          parsedValue !== valueSpecification.values[0]
+        ) {
+          instanceValue_setValue(
+            valueSpecification,
+            parsedValue,
+            0,
+            obseverContext,
+          );
+          setValueSpecification(valueSpecification);
+        }
+      } else {
+        resetValue();
       }
     };
 
@@ -429,20 +452,29 @@ const NumberPrimitiveInstanceValueEditor = observer(
 
     // Support expression evaluation
     const calculateExpression = (): void => {
-      if (isNaN(numericValue)) {
+      if (numericValue !== null && isNaN(numericValue)) {
+        // If the value is not a number, try to evaluate it as an expression
         try {
           const calculatedValue = guaranteeIsNumber(evaluate(value));
           updateValueSpecIfValid(calculatedValue.toString());
           setValue(calculatedValue.toString());
         } catch {
-          updateValueSpecIfValid(
-            (valueSpecification.values[0] as number).toString(),
-          );
-          setValue((valueSpecification.values[0] as number).toString());
+          // If we fail to evaluate the expression, we just keep the previous value
+          const prevValue =
+            valueSpecification.values[0] !== null &&
+            valueSpecification.values[0] !== undefined
+              ? valueSpecification.values[0].toString()
+              : '';
+          updateValueSpecIfValid(prevValue);
+          setValue(prevValue);
         }
-      } else {
+      } else if (numericValue !== null) {
+        // If numericValue is a number, update the value spec
         updateValueSpecIfValid(numericValue.toString());
         setValue(numericValue.toString());
+      } else {
+        // If numericValue is null, reset the value spec
+        resetValue();
       }
     };
 
@@ -457,10 +489,15 @@ const NumberPrimitiveInstanceValueEditor = observer(
 
     useEffect(() => {
       if (
+        numericValue !== null &&
         !isNaN(numericValue) &&
         numericValue !== valueSpecification.values[0]
       ) {
-        setValue((valueSpecification.values[0] as number).toString());
+        const valueFromValueSpec =
+          valueSpecification.values[0] !== null
+            ? (valueSpecification.values[0] as number).toString()
+            : '';
+        setValue(valueFromValueSpec);
       }
     }, [numericValue, valueSpecification]);
 
@@ -469,7 +506,15 @@ const NumberPrimitiveInstanceValueEditor = observer(
         <div className="value-spec-editor__number__input-container">
           <input
             ref={inputRef}
-            className="panel__content__form__section__input value-spec-editor__input value-spec-editor__number__input"
+            className={clsx(
+              'panel__content__form__section__input',
+              'value-spec-editor__input',
+              'value-spec-editor__number__input',
+              {
+                'value-spec-editor__number__input--error':
+                  !isValidInstanceValue(valueSpecification),
+              },
+            )}
             spellCheck={false}
             type="text" // NOTE: we leave this as text so that we can support expression evaluation
             inputMode="numeric"
@@ -517,9 +562,15 @@ const EnumValueInstanceValueEditor = observer(
       obseverContext,
     } = props;
     const applicationStore = useApplicationStore();
-    const enumValueRef = guaranteeNonNullable(valueSpecification.values[0]);
-    const enumValue = enumValueRef.value;
-    const options = enumValue._OWNER.values.map((value) => ({
+    const enumType = guaranteeType(
+      valueSpecification.genericType?.value.rawType,
+      Enumeration,
+    );
+    const enumValue =
+      valueSpecification.values[0] === undefined
+        ? null
+        : valueSpecification.values[0].value;
+    const options = enumType.values.map((value) => ({
       label: value.name,
       value: value,
     }));
@@ -539,10 +590,12 @@ const EnumValueInstanceValueEditor = observer(
           className="value-spec-editor__enum-selector"
           options={options}
           onChange={changeValue}
-          value={{ value: enumValue, label: enumValue.name }}
+          value={enumValue ? { value: enumValue, label: enumValue.name } : null}
           darkMode={
             !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled
           }
+          hasError={!isValidInstanceValue(valueSpecification)}
+          placeholder="Select value"
         />
         <button
           className="value-spec-editor__reset-btn"
@@ -899,7 +952,12 @@ const CollectionValueInstanceValueEditor = observer(
         onClick={enableEdit}
         title="Click to edit"
       >
-        <div className="value-spec-editor__list-editor__preview">
+        <div
+          className={clsx('value-spec-editor__list-editor__preview', {
+            'value-spec-editor__list-editor__preview--error':
+              !isValidInstanceValue(valueSpecification),
+          })}
+        >
           {previewText}
         </div>
         <button className="value-spec-editor__list-editor__edit-icon">
@@ -941,6 +999,10 @@ const DateInstanceValueEditor = observer(
           observerContext={obseverContext}
           typeCheckOption={typeCheckOption}
           setValueSpecification={setValueSpecification}
+          hasError={
+            valueSpecification instanceof PrimitiveInstanceValue &&
+            !isValidInstanceValue(valueSpecification)
+          }
         />
         <button
           className="value-spec-editor__reset-btn"