@finos/legend-query-builder 4.16.20 → 4.16.22

package/lib/components/shared/CustomDatePicker.js

@@ -15,394 +15,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * limitations under the License.
  */
 import { BasePopover, BaseRadioGroup, CustomSelectorInput, clsx, } from '@finos/legend-art';
-import { PRIMITIVE_TYPE, SimpleFunctionExpression, InstanceValue, GenericType, PrimitiveInstanceValue, GenericTypeExplicitReference, EnumValueExplicitReference, EnumValueInstanceValue, matchFunctionName, PrimitiveType, } from '@finos/legend-graph';
-import { assertErrorThrown, guaranteeNonNullable, parseNumber, returnUndefOnError, UnsupportedOperationError, } from '@finos/legend-shared';
+import { PRIMITIVE_TYPE } from '@finos/legend-graph';
+import { guaranteeNonNullable, parseNumber, returnUndefOnError, } from '@finos/legend-shared';
 import { useEffect, useRef, useState } from 'react';
-import { buildPrimitiveInstanceValue, createSupportedFunctionExpression, } from '../../stores/shared/ValueSpecificationEditorHelper.js';
-import { functionExpression_addParameterValue, instanceValue_setValue, instanceValue_setValues, valueSpecification_setGenericType, } from '../../stores/shared/ValueSpecificationModifierHelper.js';
-import { QUERY_BUILDER_PURE_PATH, QUERY_BUILDER_SUPPORTED_FUNCTIONS, } from '../../graph/QueryBuilderMetaModelConst.js';
-import { useApplicationStore, } from '@finos/legend-application';
-export var CUSTOM_DATE_PICKER_OPTION;
-(function (CUSTOM_DATE_PICKER_OPTION) {
-    CUSTOM_DATE_PICKER_OPTION["ABSOLUTE_DATE"] = "Absolute Date";
-    CUSTOM_DATE_PICKER_OPTION["ABSOLUTE_TIME"] = "Absolute Time";
-    CUSTOM_DATE_PICKER_OPTION["TODAY"] = "Today";
-    CUSTOM_DATE_PICKER_OPTION["NOW"] = "Now";
-    CUSTOM_DATE_PICKER_OPTION["YESTERDAY"] = "Yesterday";
-    CUSTOM_DATE_PICKER_OPTION["ONE_YEAR_AGO"] = "One Year Ago";
-    CUSTOM_DATE_PICKER_OPTION["ONE_MONTH_AGO"] = "One Month Ago";
-    CUSTOM_DATE_PICKER_OPTION["ONE_WEEK_AGO"] = "One Week Ago";
-    CUSTOM_DATE_PICKER_OPTION["CUSTOM_DATE"] = "Custom Date";
-    CUSTOM_DATE_PICKER_OPTION["PREVIOUS_DAY_OF_WEEK"] = "Previous ... of Week";
-    CUSTOM_DATE_PICKER_OPTION["FIRST_DAY_OF"] = "First day of...";
-    CUSTOM_DATE_PICKER_OPTION["LATEST_DATE"] = "Latest Date";
-})(CUSTOM_DATE_PICKER_OPTION || (CUSTOM_DATE_PICKER_OPTION = {}));
-var CUSTOM_DATE_OPTION_UNIT;
-(function (CUSTOM_DATE_OPTION_UNIT) {
-    CUSTOM_DATE_OPTION_UNIT["DAYS"] = "Day(s)";
-    CUSTOM_DATE_OPTION_UNIT["WEEKS"] = "Week(s)";
-    CUSTOM_DATE_OPTION_UNIT["MONTHS"] = "Month(s)";
-    CUSTOM_DATE_OPTION_UNIT["YEARS"] = "Year(s)";
-})(CUSTOM_DATE_OPTION_UNIT || (CUSTOM_DATE_OPTION_UNIT = {}));
-var CUSTOM_DATE_FIRST_DAY_OF_UNIT;
-(function (CUSTOM_DATE_FIRST_DAY_OF_UNIT) {
-    CUSTOM_DATE_FIRST_DAY_OF_UNIT["WEEK"] = "Week";
-    CUSTOM_DATE_FIRST_DAY_OF_UNIT["MONTH"] = "Month";
-    CUSTOM_DATE_FIRST_DAY_OF_UNIT["QUARTER"] = "Quarter";
-    CUSTOM_DATE_FIRST_DAY_OF_UNIT["YEAR"] = "Year";
-})(CUSTOM_DATE_FIRST_DAY_OF_UNIT || (CUSTOM_DATE_FIRST_DAY_OF_UNIT = {}));
-var CUSTOM_DATE_DAY_OF_WEEK;
-(function (CUSTOM_DATE_DAY_OF_WEEK) {
-    CUSTOM_DATE_DAY_OF_WEEK["MONDAY"] = "Monday";
-    CUSTOM_DATE_DAY_OF_WEEK["TUESDAY"] = "Tuesday";
-    CUSTOM_DATE_DAY_OF_WEEK["WENDNESDAY"] = "Wednesday";
-    CUSTOM_DATE_DAY_OF_WEEK["THURSDAY"] = "Thursday";
-    CUSTOM_DATE_DAY_OF_WEEK["FRIDAY"] = "Friday";
-    CUSTOM_DATE_DAY_OF_WEEK["SATURDAY"] = "Saturday";
-    CUSTOM_DATE_DAY_OF_WEEK["SUNDAY"] = "Sunday";
-})(CUSTOM_DATE_DAY_OF_WEEK || (CUSTOM_DATE_DAY_OF_WEEK = {}));
-var CUSTOM_DATE_OPTION_DIRECTION;
-(function (CUSTOM_DATE_OPTION_DIRECTION) {
-    CUSTOM_DATE_OPTION_DIRECTION["BEFORE"] = "Before";
-    CUSTOM_DATE_OPTION_DIRECTION["AFTER"] = "After";
-})(CUSTOM_DATE_OPTION_DIRECTION || (CUSTOM_DATE_OPTION_DIRECTION = {}));
-var CUSTOM_DATE_OPTION_REFERENCE_MOMENT;
-(function (CUSTOM_DATE_OPTION_REFERENCE_MOMENT) {
-    CUSTOM_DATE_OPTION_REFERENCE_MOMENT["TODAY"] = "Today";
-    CUSTOM_DATE_OPTION_REFERENCE_MOMENT["NOW"] = "Now";
-    CUSTOM_DATE_OPTION_REFERENCE_MOMENT["FIRST_DAY_OF_THIS_YEAR"] = "Start of Year";
-    CUSTOM_DATE_OPTION_REFERENCE_MOMENT["FIRST_DAY_OF_QUARTER"] = "Start of Quarter";
-    CUSTOM_DATE_OPTION_REFERENCE_MOMENT["FIRST_DAY_OF_MONTH"] = "Start of Month";
-    CUSTOM_DATE_OPTION_REFERENCE_MOMENT["FIRST_DAY_OF_WEEK"] = "Start of Week";
-    CUSTOM_DATE_OPTION_REFERENCE_MOMENT["PERVIOUS_DAY_OF_WEEK"] = "Previous Day of Week";
-})(CUSTOM_DATE_OPTION_REFERENCE_MOMENT || (CUSTOM_DATE_OPTION_REFERENCE_MOMENT = {}));
-/**
- * DatePickerOption is the base class being used to display and generate the corresponding pure date function.
- */
-class DatePickerOption {
-    /**
-     * label is the text that shows up in the valueSpecification box.
-     */
-    label;
-    /**
-     * value is the selected date option in date-dropdown.
-     */
-    value;
-    constructor(label, value) {
-        this.label = label;
-        this.value = value;
-    }
-}
-class CustomDateOption extends DatePickerOption {
-    /**
-     * duration is the amount of time span that will be adjusted.
-     */
-    duration;
-    /**
-     * unit represents the time duration unit, e.g. year, week, etc.
-     */
-    unit;
-    /**
-     * direction means the direction in which time adjustment will go to.
-     */
-    direction;
-    /**
-     * referenceMoment is the date which adjustment starts from.
-     */
-    referenceMoment;
-    constructor(label, value, duration, unit, direction, referenceMoment) {
-        super(label, value);
-        this.duration = duration;
-        this.unit = unit;
-        this.direction = direction;
-        this.referenceMoment = referenceMoment;
-    }
-    generateDisplayLabel() {
-        return [
-            this.duration,
-            this.unit,
-            this.direction,
-            this.referenceMoment,
-        ].join(' ');
-    }
-    updateLabel() {
-        this.label = this.generateDisplayLabel();
-    }
-}
-class CustomFirstDayOfOption extends DatePickerOption {
-    /**
-     * unit: time unit, e.g. Week, Month, etc.
-     */
-    unit;
-    constructor(label, unit) {
-        super(label, CUSTOM_DATE_PICKER_OPTION.FIRST_DAY_OF);
-        this.unit = unit;
-    }
-}
-class CustomPreviousDayOfWeekOption extends DatePickerOption {
-    /**
-     * day: which day in the week will be selected.
-     */
-    day;
-    constructor(label, day) {
-        super(label, CUSTOM_DATE_PICKER_OPTION.PREVIOUS_DAY_OF_WEEK);
-        this.day = day;
-    }
-}
-const reservedCustomDateOptions = [
-    new CustomDateOption('Yesterday', CUSTOM_DATE_PICKER_OPTION.YESTERDAY, 1, CUSTOM_DATE_OPTION_UNIT.DAYS, CUSTOM_DATE_OPTION_DIRECTION.BEFORE, CUSTOM_DATE_OPTION_REFERENCE_MOMENT.TODAY),
-    new CustomDateOption('One Week Ago', CUSTOM_DATE_PICKER_OPTION.ONE_WEEK_AGO, 1, CUSTOM_DATE_OPTION_UNIT.WEEKS, CUSTOM_DATE_OPTION_DIRECTION.BEFORE, CUSTOM_DATE_OPTION_REFERENCE_MOMENT.TODAY),
-    new CustomDateOption('One Month Ago', CUSTOM_DATE_PICKER_OPTION.ONE_MONTH_AGO, 1, CUSTOM_DATE_OPTION_UNIT.MONTHS, CUSTOM_DATE_OPTION_DIRECTION.BEFORE, CUSTOM_DATE_OPTION_REFERENCE_MOMENT.TODAY),
-    new CustomDateOption('One Year Ago', CUSTOM_DATE_PICKER_OPTION.ONE_YEAR_AGO, 1, CUSTOM_DATE_OPTION_UNIT.YEARS, CUSTOM_DATE_OPTION_DIRECTION.BEFORE, CUSTOM_DATE_OPTION_REFERENCE_MOMENT.TODAY),
-];
-const getSupportedDateFunctionFullPath = (functionName) => Object.values(QUERY_BUILDER_SUPPORTED_FUNCTIONS).find((_func) => matchFunctionName(functionName, _func));
-/**
- * Generate pure date functions based on the DatePickerOption.
- */
-const buildPureDateFunctionExpression = (datePickerOption, graph, observerContext) => {
-    if (datePickerOption instanceof CustomPreviousDayOfWeekOption) {
-        const previousFridaySFE = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.PREVIOUS_DAY_OF_WEEK);
-        valueSpecification_setGenericType(previousFridaySFE, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.DATE)));
-        const dayOfWeekEnumIntanceValue = new EnumValueInstanceValue(GenericTypeExplicitReference.create(new GenericType(graph.getType(QUERY_BUILDER_PURE_PATH.DAY_OF_WEEK))));
-        instanceValue_setValues(dayOfWeekEnumIntanceValue, [
-            ...dayOfWeekEnumIntanceValue.values,
-            EnumValueExplicitReference.create(guaranteeNonNullable(graph
-                .getEnumeration(QUERY_BUILDER_PURE_PATH.DAY_OF_WEEK)
-                .values.filter((e) => e.name === datePickerOption.day)[0])),
-        ], observerContext);
-        functionExpression_addParameterValue(previousFridaySFE, dayOfWeekEnumIntanceValue, observerContext);
-        return previousFridaySFE;
-    }
-    else if (datePickerOption instanceof CustomFirstDayOfOption) {
-        switch (datePickerOption.unit) {
-            case CUSTOM_DATE_FIRST_DAY_OF_UNIT.YEAR: {
-                const firstDayOfThisYearSFE = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_YEAR);
-                valueSpecification_setGenericType(firstDayOfThisYearSFE, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.DATE)));
-                return firstDayOfThisYearSFE;
-            }
-            case CUSTOM_DATE_FIRST_DAY_OF_UNIT.QUARTER: {
-                const firstDayOfQuarterSFE = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_QUARTER);
-                valueSpecification_setGenericType(firstDayOfQuarterSFE, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.STRICTDATE)));
-                return firstDayOfQuarterSFE;
-            }
-            case CUSTOM_DATE_FIRST_DAY_OF_UNIT.MONTH: {
-                const firstDayOfMonthSFE = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_MONTH);
-                valueSpecification_setGenericType(firstDayOfMonthSFE, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.DATE)));
-                return firstDayOfMonthSFE;
-            }
-            case CUSTOM_DATE_FIRST_DAY_OF_UNIT.WEEK: {
-                const firstDayOfWeekSFE = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_WEEK);
-                valueSpecification_setGenericType(firstDayOfWeekSFE, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.DATE)));
-                return firstDayOfWeekSFE;
-            }
-            default:
-                throw new UnsupportedOperationError(`Can't build expression for 'First Day Of ...' date picker option for unit '${datePickerOption.unit}'`);
-        }
-    }
-    else {
-        switch (datePickerOption.value) {
-            case CUSTOM_DATE_PICKER_OPTION.TODAY: {
-                return createSupportedFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.TODAY, PrimitiveType.STRICTDATE);
-            }
-            case CUSTOM_DATE_PICKER_OPTION.NOW: {
-                return createSupportedFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.NOW, PrimitiveType.DATETIME);
-            }
-            case CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_THIS_YEAR: {
-                const firstDayOfYearSFE = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_YEAR);
-                valueSpecification_setGenericType(firstDayOfYearSFE, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.DATE)));
-                return firstDayOfYearSFE;
-            }
-            case CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_QUARTER: {
-                const firstDayOfQuarterSFE = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_QUARTER);
-                valueSpecification_setGenericType(firstDayOfQuarterSFE, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.STRICTDATE)));
-                return firstDayOfQuarterSFE;
-            }
-            case CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_MONTH: {
-                const firstDayOfMonthSFE = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_MONTH);
-                valueSpecification_setGenericType(firstDayOfMonthSFE, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.DATE)));
-                return firstDayOfMonthSFE;
-            }
-            case CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_WEEK: {
-                const firstDayOfWeekSFE = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_WEEK);
-                valueSpecification_setGenericType(firstDayOfWeekSFE, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.DATE)));
-                return firstDayOfWeekSFE;
-            }
-            default:
-                throw new UnsupportedOperationError(`Can't build expression for date picker option '${datePickerOption.value}'`);
-        }
-    }
-};
-/**
- * Generate the enum value of type Pure Enum, DURATION_UNIT, based on the input string.
- */
-const buildPureDurationEnumValue = (unitString, graph) => {
-    const durationUnitEnum = graph.getEnumeration(QUERY_BUILDER_PURE_PATH.DURATION_UNIT);
-    const targetPureDurationEnumValue = durationUnitEnum.values.filter((e) => e.name ===
-        Object.keys(CUSTOM_DATE_OPTION_UNIT).filter((key) => CUSTOM_DATE_OPTION_UNIT[key] === unitString)[0])[0];
-    return (targetPureDurationEnumValue ??
-        guaranteeNonNullable(durationUnitEnum.values[0]));
-};
-/**
- * Generate the pure date adjust() function based on the CustomDateOption.
- */
-const buildPureAdjustDateFunction = (customDateOption, graph, observerContext) => {
-    const dateAdjustSimpleFunctionExpression = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.ADJUST);
-    functionExpression_addParameterValue(dateAdjustSimpleFunctionExpression, buildPureDateFunctionExpression(new DatePickerOption(guaranteeNonNullable(customDateOption.referenceMoment), guaranteeNonNullable(customDateOption.referenceMoment)), graph, observerContext), observerContext);
-    if (customDateOption.direction === CUSTOM_DATE_OPTION_DIRECTION.BEFORE) {
-        const minusFunc = new SimpleFunctionExpression(QUERY_BUILDER_SUPPORTED_FUNCTIONS.MINUS);
-        functionExpression_addParameterValue(minusFunc, buildPrimitiveInstanceValue(graph, PRIMITIVE_TYPE.INTEGER, customDateOption.duration, observerContext), observerContext);
-        functionExpression_addParameterValue(dateAdjustSimpleFunctionExpression, minusFunc, observerContext);
-    }
-    else {
-        functionExpression_addParameterValue(dateAdjustSimpleFunctionExpression, buildPrimitiveInstanceValue(graph, PRIMITIVE_TYPE.INTEGER, customDateOption.duration, observerContext), observerContext);
-    }
-    const durationUnitEnumIntanceValue = new EnumValueInstanceValue(GenericTypeExplicitReference.create(new GenericType(graph.getType(QUERY_BUILDER_PURE_PATH.DURATION_UNIT))));
-    instanceValue_setValues(durationUnitEnumIntanceValue, [
-        ...durationUnitEnumIntanceValue.values,
-        EnumValueExplicitReference.create(guaranteeNonNullable(buildPureDurationEnumValue(guaranteeNonNullable(customDateOption.unit), graph))),
-    ], observerContext);
-    functionExpression_addParameterValue(dateAdjustSimpleFunctionExpression, durationUnitEnumIntanceValue, observerContext);
-    valueSpecification_setGenericType(dateAdjustSimpleFunctionExpression, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.DATE)));
-    return dateAdjustSimpleFunctionExpression;
-};
-/**
- * Generate the value of CustomDateOption.duration from the pure date adjust() function.
- */
-const buildCustomDateOptionDurationValue = (pureDateAdjustFunction) => {
-    const durationParam = pureDateAdjustFunction.parametersValues[1];
-    return durationParam instanceof PrimitiveInstanceValue
-        ? durationParam.values[0]
-        : durationParam instanceof SimpleFunctionExpression &&
-            matchFunctionName(durationParam.functionName, QUERY_BUILDER_SUPPORTED_FUNCTIONS.MINUS)
-            ? durationParam.parametersValues[0] instanceof PrimitiveInstanceValue
-                ? durationParam.parametersValues[0].values[0]
-                : 0
-            : 0;
-};
-/**
- * Generate the value of CustomDateOption.direction from the pure date adjust() function.
- */
-const buildCustomDateOptionDirectionValue = (pureDateAdjustFunction) => pureDateAdjustFunction.parametersValues[1] instanceof
-    SimpleFunctionExpression &&
-    matchFunctionName(pureDateAdjustFunction.parametersValues[1].functionName, QUERY_BUILDER_SUPPORTED_FUNCTIONS.MINUS)
-    ? CUSTOM_DATE_OPTION_DIRECTION.BEFORE
-    : CUSTOM_DATE_OPTION_DIRECTION.AFTER;
-/**
- * Generate the value of CustomDateOption.unit from the pure date adjust() function.
- */
-const buildCustomDateOptionUnitValue = (valueSpecification) => guaranteeNonNullable(Object.keys(CUSTOM_DATE_OPTION_UNIT)
-    .filter((key) => key ===
-    valueSpecification.parametersValues[2]
-        .values[0]?.value.name)
-    .map((key) => CUSTOM_DATE_OPTION_UNIT[key])[0]);
-/**
- * Generate the value of CustomDateOption.moment from the pure date adjust() function.
- */
-const buildCustomDateOptionReferenceMomentValue = (pureDateAjustFunction) => {
-    const funcName = pureDateAjustFunction.parametersValues[0].functionName;
-    switch (getSupportedDateFunctionFullPath(funcName)) {
-        case QUERY_BUILDER_SUPPORTED_FUNCTIONS.TODAY:
-            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.TODAY;
-        case QUERY_BUILDER_SUPPORTED_FUNCTIONS.NOW:
-            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.NOW;
-        case QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_YEAR:
-            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_THIS_YEAR;
-        case QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_QUARTER:
-            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_QUARTER;
-        case QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_MONTH:
-            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_MONTH;
-        case QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_WEEK:
-            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_WEEK;
-        case QUERY_BUILDER_SUPPORTED_FUNCTIONS.PREVIOUS_DAY_OF_WEEK:
-            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.PERVIOUS_DAY_OF_WEEK;
-        default:
-            throw new UnsupportedOperationError(`Can't build custom date option reference moment '${funcName}'`);
-    }
-};
-/**
- * Build CustomDateOption based on the pure date adjust() function.
- * Transform CustomDateOption if it matches any preserved custom adjust date functions. e.g. One Month Ago..
- */
-const buildCustomDateOption = (valueSpecification, applicationStore) => {
-    if (valueSpecification instanceof SimpleFunctionExpression &&
-        matchFunctionName(valueSpecification.functionName, QUERY_BUILDER_SUPPORTED_FUNCTIONS.ADJUST)) {
-        try {
-            const customDateOption = new CustomDateOption('', CUSTOM_DATE_PICKER_OPTION.CUSTOM_DATE, buildCustomDateOptionDurationValue(valueSpecification), buildCustomDateOptionUnitValue(valueSpecification), buildCustomDateOptionDirectionValue(valueSpecification), buildCustomDateOptionReferenceMomentValue(valueSpecification));
-            const matchedPreservedCustomAdjustDates = reservedCustomDateOptions.filter((t) => t.generateDisplayLabel() ===
-                customDateOption.generateDisplayLabel());
-            if (matchedPreservedCustomAdjustDates.length > 0) {
-                customDateOption.label = guaranteeNonNullable(matchedPreservedCustomAdjustDates[0]?.label);
-                customDateOption.value = guaranteeNonNullable(matchedPreservedCustomAdjustDates[0]?.value);
-                return customDateOption;
-            }
-            customDateOption.updateLabel();
-            return customDateOption;
-        }
-        catch (error) {
-            assertErrorThrown(error);
-            applicationStore.notificationService.notifyError(error);
-        }
-    }
-    return new CustomDateOption('', '', 0, undefined, undefined, undefined);
-};
-/**
- * Build DatePickerOption from pure date functions or PrimitiveInstanceValue
- */
-export const buildDatePickerOption = (valueSpecification, applicationStore) => {
-    if (valueSpecification instanceof SimpleFunctionExpression) {
-        switch (getSupportedDateFunctionFullPath(valueSpecification.functionName)) {
-            case QUERY_BUILDER_SUPPORTED_FUNCTIONS.TODAY:
-                return new DatePickerOption(CUSTOM_DATE_PICKER_OPTION.TODAY, CUSTOM_DATE_PICKER_OPTION.TODAY);
-            case QUERY_BUILDER_SUPPORTED_FUNCTIONS.NOW:
-                return new DatePickerOption(CUSTOM_DATE_PICKER_OPTION.NOW, CUSTOM_DATE_PICKER_OPTION.NOW);
-            case QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_YEAR:
-                return new CustomFirstDayOfOption(CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_THIS_YEAR, CUSTOM_DATE_FIRST_DAY_OF_UNIT.YEAR);
-            case QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_QUARTER:
-                return new CustomFirstDayOfOption(CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_QUARTER, CUSTOM_DATE_FIRST_DAY_OF_UNIT.QUARTER);
-            case QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_THIS_MONTH:
-                return new CustomFirstDayOfOption(CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_MONTH, CUSTOM_DATE_FIRST_DAY_OF_UNIT.MONTH);
-            case QUERY_BUILDER_SUPPORTED_FUNCTIONS.FIRST_DAY_OF_WEEK:
-                return new CustomFirstDayOfOption(CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_WEEK, CUSTOM_DATE_FIRST_DAY_OF_UNIT.WEEK);
-            case QUERY_BUILDER_SUPPORTED_FUNCTIONS.PREVIOUS_DAY_OF_WEEK:
-                return new CustomPreviousDayOfWeekOption(`Previous ${valueSpecification.parametersValues[0]
-                    .values[0]?.value.name}`, valueSpecification.parametersValues[0]
-                    .values[0]?.value.name);
-            case QUERY_BUILDER_SUPPORTED_FUNCTIONS.ADJUST:
-                return buildCustomDateOption(valueSpecification, applicationStore);
-            default:
-                return new DatePickerOption('', '');
-        }
-    }
-    else {
-        return valueSpecification.genericType.value.rawType.path ===
-            PRIMITIVE_TYPE.LATESTDATE
-            ? new DatePickerOption(CUSTOM_DATE_PICKER_OPTION.LATEST_DATE, CUSTOM_DATE_PICKER_OPTION.LATEST_DATE)
-            : new DatePickerOption((valueSpecification.values[0] ?? ''), valueSpecification.values[0] === null
-                ? ''
-                : valueSpecification.genericType.value.rawType.path ===
-                    PRIMITIVE_TYPE.DATETIME
-                    ? CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME
-                    : CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE);
-    }
-};
+import { useApplicationStore } from '@finos/legend-application';
+import { buildCustomDateOption, buildDatePickerOption, CUSTOM_DATE_DAY_OF_WEEK, CUSTOM_DATE_FIRST_DAY_OF_UNIT, CUSTOM_DATE_OPTION_DIRECTION, CUSTOM_DATE_OPTION_REFERENCE_MOMENT, CUSTOM_DATE_OPTION_UNIT, CUSTOM_DATE_PICKER_OPTION, CustomDateOption, CustomFirstDayOfOption, CustomPreviousDayOfWeekOption, DatePickerOption, reservedCustomDateOptions, } from './CustomDatePickerHelper.js';
 const AbsoluteDateValueSpecificationEditor = (props) => {
-    const { valueSpecification, graph, setValueSpecification, setDatePickerOption, observerContext, } = props;
+    const { valueSpecification, valueSelector, updateValueSpecification, setDatePickerOption, } = props;
     const inputRef = useRef(null);
-    const absoluteDateValue = valueSpecification instanceof SimpleFunctionExpression
-        ? ''
-        : valueSpecification.values[0];
+    const absoluteDateValue = valueSelector(valueSpecification);
     const updateAbsoluteDateValue = (event) => {
-        if (valueSpecification instanceof SimpleFunctionExpression) {
-            setValueSpecification(buildPrimitiveInstanceValue(graph, PRIMITIVE_TYPE.STRICTDATE, event.target.value, observerContext));
-        }
-        else if (valueSpecification instanceof InstanceValue) {
-            instanceValue_setValue(valueSpecification, event.target.value, 0, observerContext);
-            if (valueSpecification.genericType.value.rawType.path !==
-                PRIMITIVE_TYPE.STRICTDATE) {
-                valueSpecification_setGenericType(valueSpecification, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.STRICTDATE)));
-            }
-            setValueSpecification(valueSpecification);
-        }
+        updateValueSpecification(valueSpecification, event.target.value, {
+            primitiveTypeEnum: PRIMITIVE_TYPE.STRICTDATE,
+        });
         setDatePickerOption(new DatePickerOption(event.target.value, CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE));
     };
     useEffect(() => {
@@ -411,27 +36,16 @@ const AbsoluteDateValueSpecificationEditor = (props) => {
     return (_jsx("div", { className: "value-spec-editor__date-picker__absolute-date", children: _jsx("input", { ref: inputRef, className: "panel__content__form__section__input value-spec-editor__date-picker__absolute-date__input input--dark", type: "date", spellCheck: false, value: absoluteDateValue ?? '', onChange: updateAbsoluteDateValue }) }));
 };
 const AbsoluteTimeValueSpecificationEditor = (props) => {
-    const { valueSpecification, graph, setValueSpecification, setDatePickerOption, observerContext, } = props;
+    const { valueSpecification, valueSelector, updateValueSpecification, setDatePickerOption, } = props;
     const inputRef = useRef(null);
-    const absoluteTimeValue = valueSpecification instanceof SimpleFunctionExpression
-        ? ''
-        : valueSpecification.values[0];
+    const absoluteTimeValue = valueSelector(valueSpecification);
     const updateAbsoluteTimeValue = (event) => {
-        //
         const value = new Date(event.target.value).getUTCSeconds()
             ? event.target.value
             : `${event.target.value}:00`;
-        if (valueSpecification instanceof SimpleFunctionExpression) {
-            setValueSpecification(buildPrimitiveInstanceValue(graph, PRIMITIVE_TYPE.DATETIME, value, observerContext));
-        }
-        else {
-            instanceValue_setValue(valueSpecification, value, 0, observerContext);
-            if (valueSpecification.genericType.value.rawType.path !==
-                PRIMITIVE_TYPE.DATETIME) {
-                valueSpecification_setGenericType(valueSpecification, GenericTypeExplicitReference.create(new GenericType(PrimitiveType.DATETIME)));
-            }
-            setValueSpecification(valueSpecification);
-        }
+        updateValueSpecification(valueSpecification, value, {
+            primitiveTypeEnum: PRIMITIVE_TYPE.DATETIME,
+        });
         setDatePickerOption(new DatePickerOption(event.target.value, CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME));
     };
     useEffect(() => {
@@ -446,7 +60,7 @@ const AbsoluteTimeValueSpecificationEditor = (props) => {
             step: "1", spellCheck: false, value: absoluteTimeValue ?? '', onChange: updateAbsoluteTimeValue }) }));
 };
 const CustomDateInstanceValueEditor = (props) => {
-    const { customDateOptionValue, graph, setValueSpecification, setDatePickerOption, observerContext, } = props;
+    const { customDateOptionValue, updateValueSpecification, setDatePickerOption, } = props;
     const applicationStore = useApplicationStore();
     const inputRef = useRef(null);
     const [durationValue, setDurationValue] = useState(customDateOptionValue.duration);
@@ -460,7 +74,7 @@ const CustomDateInstanceValueEditor = (props) => {
             latestDirectionValue !== '' &&
             latestReferenceMomentValue !== '') {
             const dateOption = new CustomDateOption(CUSTOM_DATE_PICKER_OPTION.CUSTOM_DATE, CUSTOM_DATE_PICKER_OPTION.CUSTOM_DATE, latestDurationValue, latestUnitValue, latestDirectionValue, latestReferenceMomentValue);
-            setValueSpecification(buildPureAdjustDateFunction(dateOption, graph, observerContext));
+            updateValueSpecification(undefined, dateOption);
             const matchedPreservedCustomAdjustDates = reservedCustomDateOptions.filter((t) => t.generateDisplayLabel() === dateOption.generateDisplayLabel());
             if (matchedPreservedCustomAdjustDates.length > 0) {
                 dateOption.label = guaranteeNonNullable(matchedPreservedCustomAdjustDates[0]?.label);
@@ -503,7 +117,7 @@ const CustomDateInstanceValueEditor = (props) => {
                     }, value: { value: referenceMomentValue, label: referenceMomentValue }, darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled }) })] }));
 };
 const CustomFirstDayOfValueSpecificationEditor = (props) => {
-    const { customDateAdjustOptionValue, graph, observerContext, setValueSpecification, setDatePickerOption, } = props;
+    const { customDateAdjustOptionValue, updateValueSpecification, setDatePickerOption, } = props;
     const applicationStore = useApplicationStore();
     const selectorRef = useRef(null);
     const [unitValue, setUnitValue] = useState(customDateAdjustOptionValue instanceof CustomFirstDayOfOption
@@ -515,7 +129,7 @@ const CustomFirstDayOfValueSpecificationEditor = (props) => {
             const startDayOfDateOption = targetUnitValue.length > 0
                 ? new CustomFirstDayOfOption(guaranteeNonNullable(targetUnitValue[0]?.toString()), latestUnitValue)
                 : new CustomFirstDayOfOption('', undefined);
-            setValueSpecification(buildPureDateFunctionExpression(startDayOfDateOption, graph, observerContext));
+            updateValueSpecification(undefined, startDayOfDateOption);
             setDatePickerOption(startDayOfDateOption);
         }
     };
@@ -533,7 +147,7 @@ const CustomFirstDayOfValueSpecificationEditor = (props) => {
                 }, value: unitValue ? { value: unitValue, label: unitValue } : null, darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled }) }) }));
 };
 const CustomPreviousDayOfWeekValueSpecificationEditor = (props) => {
-    const { customDateAdjustOptionValue, graph, observerContext, setValueSpecification, setDatePickerOption, } = props;
+    const { customDateAdjustOptionValue, updateValueSpecification, setDatePickerOption, } = props;
     const applicationStore = useApplicationStore();
     const selectorRef = useRef(null);
     const [dayOfWeekValue, setDayOfWeekValue] = useState(customDateAdjustOptionValue instanceof CustomPreviousDayOfWeekOption
@@ -542,7 +156,7 @@ const CustomPreviousDayOfWeekValueSpecificationEditor = (props) => {
     const changeValue = (latestDurationUnitValue) => {
         if (latestDurationUnitValue !== '') {
             const previousDayOfWeekDateOption = new CustomPreviousDayOfWeekOption(`Previous ${latestDurationUnitValue}`, latestDurationUnitValue);
-            setValueSpecification(buildPureDateFunctionExpression(previousDayOfWeekDateOption, graph, observerContext));
+            updateValueSpecification(undefined, previousDayOfWeekDateOption);
             setDatePickerOption(previousDayOfWeekDateOption);
         }
     };
@@ -562,7 +176,7 @@ const CustomPreviousDayOfWeekValueSpecificationEditor = (props) => {
                     : null, darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled }) }) }));
 };
 export const CustomDatePicker = (props) => {
-    const { valueSpecification, setValueSpecification, graph, observerContext, hasError, typeCheckOption, displayAsEditableValue, handleBlur, } = props;
+    const { valueSpecification, valueSelector, updateValueSpecification, hasError, typeCheckOption, displayAsEditableValue, handleBlur, readOnly, } = props;
     const applicationStore = useApplicationStore();
     // For some cases where types need to be matched strictly.
     // Some options need to be filtered out for DateTime.
@@ -588,7 +202,9 @@ export const CustomDatePicker = (props) => {
     const handleDatePickerOptionChange = (event) => {
         const chosenDatePickerOption = new DatePickerOption(event.target.value, event.target.value);
         if (CUSTOM_DATE_PICKER_OPTION.LATEST_DATE === chosenDatePickerOption.value) {
-            setValueSpecification(buildPrimitiveInstanceValue(graph, PRIMITIVE_TYPE.LATESTDATE, event.target.value, observerContext));
+            updateValueSpecification(undefined, event.target.value, {
+                primitiveTypeEnum: PRIMITIVE_TYPE.LATESTDATE,
+            });
         }
         else if (
         // Elements in this list will trigger children date components
@@ -601,10 +217,10 @@ export const CustomDatePicker = (props) => {
         ].includes(chosenDatePickerOption.value)) {
             const theReservedCustomDateOption = reservedCustomDateOptions.filter((d) => d.value === chosenDatePickerOption.value);
             if (theReservedCustomDateOption.length > 0) {
-                setValueSpecification(buildPureAdjustDateFunction(guaranteeNonNullable(theReservedCustomDateOption[0]), graph, observerContext));
+                updateValueSpecification(undefined, guaranteeNonNullable(theReservedCustomDateOption[0]));
             }
             else {
-                setValueSpecification(buildPureDateFunctionExpression(chosenDatePickerOption, graph, observerContext));
+                updateValueSpecification(undefined, chosenDatePickerOption);
             }
         }
         setDatePickerOption(chosenDatePickerOption);
@@ -612,15 +228,15 @@ export const CustomDatePicker = (props) => {
     const renderChildrenDateComponents = () => {
         switch (datePickerOption.value) {
             case CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE:
-                return (_jsx(AbsoluteDateValueSpecificationEditor, { graph: graph, valueSpecification: valueSpecification, setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption, observerContext: observerContext }));
+                return (_jsx(AbsoluteDateValueSpecificationEditor, { valueSpecification: valueSpecification, valueSelector: valueSelector, updateValueSpecification: updateValueSpecification, setDatePickerOption: setDatePickerOption }));
             case CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME:
-                return (_jsx(AbsoluteTimeValueSpecificationEditor, { graph: graph, valueSpecification: valueSpecification, setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption, observerContext: observerContext }));
+                return (_jsx(AbsoluteTimeValueSpecificationEditor, { valueSpecification: valueSpecification, valueSelector: valueSelector, updateValueSpecification: updateValueSpecification, setDatePickerOption: setDatePickerOption }));
             case CUSTOM_DATE_PICKER_OPTION.CUSTOM_DATE:
-                return (_jsx(CustomDateInstanceValueEditor, { graph: graph, observerContext: observerContext, customDateOptionValue: buildCustomDateOption(valueSpecification, applicationStore), setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption }));
+                return (_jsx(CustomDateInstanceValueEditor, { customDateOptionValue: buildCustomDateOption(valueSpecification, applicationStore), updateValueSpecification: updateValueSpecification, setDatePickerOption: setDatePickerOption }));
             case CUSTOM_DATE_PICKER_OPTION.FIRST_DAY_OF:
-                return (_jsx(CustomFirstDayOfValueSpecificationEditor, { graph: graph, observerContext: observerContext, customDateAdjustOptionValue: buildDatePickerOption(valueSpecification, applicationStore), setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption }));
+                return (_jsx(CustomFirstDayOfValueSpecificationEditor, { customDateAdjustOptionValue: buildDatePickerOption(valueSpecification, applicationStore), updateValueSpecification: updateValueSpecification, setDatePickerOption: setDatePickerOption }));
             case CUSTOM_DATE_PICKER_OPTION.PREVIOUS_DAY_OF_WEEK:
-                return (_jsx(CustomPreviousDayOfWeekValueSpecificationEditor, { graph: graph, observerContext: observerContext, customDateAdjustOptionValue: buildDatePickerOption(valueSpecification, applicationStore), setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption }));
+                return (_jsx(CustomPreviousDayOfWeekValueSpecificationEditor, { customDateAdjustOptionValue: buildDatePickerOption(valueSpecification, applicationStore), updateValueSpecification: updateValueSpecification, setDatePickerOption: setDatePickerOption }));
             default:
                 return null;
         }
@@ -631,9 +247,9 @@ export const CustomDatePicker = (props) => {
     }, [applicationStore, valueSpecification]);
     return (_jsxs(_Fragment, { children: [displayAsEditableValue ? (_jsx("span", { className: clsx('value-spec-editor__date-picker__editable__display--content editable-value', {
                     'value-spec-editor__date-picker__editable__display--content--error': hasError,
-                }), title: "Click to edit and pick from more date options", onClick: openCustomDatePickerPopover, children: datePickerOption.label ? (`"${datePickerOption.label}"`) : (_jsx(_Fragment, { children: "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0" })) })) : (_jsx("button", { className: clsx('value-spec-editor__date-picker__trigger', {
+                }), title: readOnly ? '' : 'Click to edit and pick from more date options', onClick: readOnly ? () => { } : openCustomDatePickerPopover, style: { cursor: readOnly ? 'not-allowed' : '' }, children: datePickerOption.label ? (`"${datePickerOption.label}"`) : (_jsx(_Fragment, { children: "\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0" })) })) : (_jsx("button", { className: clsx('value-spec-editor__date-picker__trigger', {
                     'value-spec-editor__date-picker__trigger--error': hasError,
-                }), title: "Click to edit and pick from more date options", onClick: openCustomDatePickerPopover, children: datePickerOption.label || 'Select value' })), _jsxs(BasePopover, { open: Boolean(anchorEl), TransitionProps: {
+                }), title: readOnly ? '' : 'Click to edit and pick from more date options', onClick: openCustomDatePickerPopover, disabled: readOnly, children: datePickerOption.label || 'Select value' })), _jsxs(BasePopover, { open: Boolean(anchorEl), TransitionProps: {
                     onEnter: handleEnter,
                 }, anchorEl: anchorEl, onClose: closeCustomDatePickerPopover, anchorOrigin: {
                     vertical: displayAsEditableValue ? 20 : 'bottom',