@finos/legend-query-builder 0.1.2 → 0.2.0

package/lib/components/shared/CustomDatePicker.js

@@ -0,0 +1,622 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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 { BasePopover, BaseRadioGroup, CustomSelectorInput, } from '@finos/legend-art';
+import { PRIMITIVE_TYPE, SimpleFunctionExpression, InstanceValue, GenericType, PrimitiveInstanceValue, GenericTypeExplicitReference, EnumValueExplicitReference, EnumValueInstanceValue, matchFunctionName, TYPICAL_MULTIPLICITY_TYPE, SUPPORTED_FUNCTIONS, DAY_OF_WEEK, DURATION_UNIT, } from '@finos/legend-graph';
+import { guaranteeNonNullable, parseNumber, returnUndefOnError, UnsupportedOperationError, } from '@finos/legend-shared';
+import { useEffect, useRef, useState } from 'react';
+import { buildPrimitiveInstanceValue } from '../../stores/shared/ValueSpecificationEditorHelper.js';
+import { functionExpression_addParameterValue, instanceValue_setValue, instanceValue_setValues, valueSpecification_setGenericType, } from '../../stores/shared/ValueSpecificationModifierHelper.js';
+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_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 || (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),
+];
+/**
+ * Generate pure date functions based on the DatePickerOption.
+ */
+const buildPureDateFunctionExpression = (datePickerOption, graph, observerContext) => {
+    const multiplicityOne = graph.getTypicalMultiplicity(TYPICAL_MULTIPLICITY_TYPE.ONE);
+    const strictDate = graph.getPrimitiveType(PRIMITIVE_TYPE.STRICTDATE);
+    const date = graph.getPrimitiveType(PRIMITIVE_TYPE.DATE);
+    const dateTime = graph.getPrimitiveType(PRIMITIVE_TYPE.DATETIME);
+    if (datePickerOption instanceof CustomPreviousDayOfWeekOption) {
+        const previousFridaySFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.PREVIOUS_DAY_OF_WEEK, multiplicityOne);
+        valueSpecification_setGenericType(previousFridaySFE, GenericTypeExplicitReference.create(new GenericType(date)));
+        const dayOfWeekEnumIntanceValue = new EnumValueInstanceValue(GenericTypeExplicitReference.create(new GenericType(graph.getType(DAY_OF_WEEK))), multiplicityOne);
+        instanceValue_setValues(dayOfWeekEnumIntanceValue, [
+            ...dayOfWeekEnumIntanceValue.values,
+            EnumValueExplicitReference.create(guaranteeNonNullable(graph
+                .getEnumeration(DAY_OF_WEEK)
+                .values.filter((e) => e.name === datePickerOption.day)[0])),
+        ]);
+        functionExpression_addParameterValue(previousFridaySFE, dayOfWeekEnumIntanceValue, observerContext);
+        return previousFridaySFE;
+    }
+    else if (datePickerOption instanceof CustomFirstDayOfOption) {
+        switch (datePickerOption.unit) {
+            case CUSTOM_DATE_FIRST_DAY_OF_UNIT.YEAR: {
+                const firstDayOfYearSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.FIRST_DAY_OF_YEAR, multiplicityOne);
+                valueSpecification_setGenericType(firstDayOfYearSFE, GenericTypeExplicitReference.create(new GenericType(date)));
+                return firstDayOfYearSFE;
+            }
+            case CUSTOM_DATE_FIRST_DAY_OF_UNIT.QUARTER: {
+                const firstDayOfQuarterSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.FIRST_DAY_OF_QUARTER, multiplicityOne);
+                valueSpecification_setGenericType(firstDayOfQuarterSFE, GenericTypeExplicitReference.create(new GenericType(strictDate)));
+                return firstDayOfQuarterSFE;
+            }
+            case CUSTOM_DATE_FIRST_DAY_OF_UNIT.MONTH: {
+                const firstDayOfMonthSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.FIRST_DAY_OF_MONTH, multiplicityOne);
+                valueSpecification_setGenericType(firstDayOfMonthSFE, GenericTypeExplicitReference.create(new GenericType(date)));
+                return firstDayOfMonthSFE;
+            }
+            case CUSTOM_DATE_FIRST_DAY_OF_UNIT.WEEK: {
+                const firstDayOfWeekSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.FIRST_DAY_OF_WEEK, multiplicityOne);
+                valueSpecification_setGenericType(firstDayOfWeekSFE, GenericTypeExplicitReference.create(new GenericType(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: {
+                const todaySFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.TODAY, multiplicityOne);
+                valueSpecification_setGenericType(todaySFE, GenericTypeExplicitReference.create(new GenericType(strictDate)));
+                return todaySFE;
+            }
+            case CUSTOM_DATE_PICKER_OPTION.NOW: {
+                const nowSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.NOW, multiplicityOne);
+                valueSpecification_setGenericType(nowSFE, GenericTypeExplicitReference.create(new GenericType(dateTime)));
+                return nowSFE;
+            }
+            case CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_YEAR: {
+                const firstDayOfYearSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.FIRST_DAY_OF_YEAR, multiplicityOne);
+                valueSpecification_setGenericType(firstDayOfYearSFE, GenericTypeExplicitReference.create(new GenericType(date)));
+                return firstDayOfYearSFE;
+            }
+            case CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_QUARTER: {
+                const firstDayOfQuarterSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.FIRST_DAY_OF_QUARTER, multiplicityOne);
+                valueSpecification_setGenericType(firstDayOfQuarterSFE, GenericTypeExplicitReference.create(new GenericType(strictDate)));
+                return firstDayOfQuarterSFE;
+            }
+            case CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_MONTH: {
+                const firstDayOfMonthSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.FIRST_DAY_OF_MONTH, multiplicityOne);
+                valueSpecification_setGenericType(firstDayOfMonthSFE, GenericTypeExplicitReference.create(new GenericType(date)));
+                return firstDayOfMonthSFE;
+            }
+            case CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_WEEK: {
+                const firstDayOfWeekSFE = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.FIRST_DAY_OF_WEEK, multiplicityOne);
+                valueSpecification_setGenericType(firstDayOfWeekSFE, GenericTypeExplicitReference.create(new GenericType(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(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 ajust() function based on the CustomDateOption.
+ */
+const buildPureAdjustDateFunction = (customDateOption, graph, observerContext) => {
+    const multiplicityOne = graph.getTypicalMultiplicity(TYPICAL_MULTIPLICITY_TYPE.ONE);
+    const dateAdjustSimpleFunctionExpression = new SimpleFunctionExpression(SUPPORTED_FUNCTIONS.ADJUST, multiplicityOne);
+    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(SUPPORTED_FUNCTIONS.MINUS, multiplicityOne);
+        functionExpression_addParameterValue(minusFunc, buildPrimitiveInstanceValue(graph, PRIMITIVE_TYPE.INTEGER, customDateOption.duration), observerContext);
+        functionExpression_addParameterValue(dateAdjustSimpleFunctionExpression, minusFunc, observerContext);
+    }
+    else {
+        const adjustmentInstanceValue = buildPrimitiveInstanceValue(graph, PRIMITIVE_TYPE.INTEGER, customDateOption.duration);
+        functionExpression_addParameterValue(dateAdjustSimpleFunctionExpression, adjustmentInstanceValue, observerContext);
+    }
+    const durationUnitEnumIntanceValue = new EnumValueInstanceValue(GenericTypeExplicitReference.create(new GenericType(graph.getType(DURATION_UNIT))), multiplicityOne);
+    instanceValue_setValues(durationUnitEnumIntanceValue, [
+        ...durationUnitEnumIntanceValue.values,
+        EnumValueExplicitReference.create(guaranteeNonNullable(buildPureDurationEnumValue(guaranteeNonNullable(customDateOption.unit), graph))),
+    ]);
+    functionExpression_addParameterValue(dateAdjustSimpleFunctionExpression, durationUnitEnumIntanceValue, observerContext);
+    valueSpecification_setGenericType(dateAdjustSimpleFunctionExpression, GenericTypeExplicitReference.create(new GenericType(graph.getPrimitiveType(PRIMITIVE_TYPE.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, 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, 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 (funcName) {
+        case SUPPORTED_FUNCTIONS.TODAY:
+            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.TODAY;
+        case SUPPORTED_FUNCTIONS.NOW:
+            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.NOW;
+        case SUPPORTED_FUNCTIONS.FIRST_DAY_OF_YEAR:
+            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_YEAR;
+        case SUPPORTED_FUNCTIONS.FIRST_DAY_OF_QUARTER:
+            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_QUARTER;
+        case SUPPORTED_FUNCTIONS.FIRST_DAY_OF_MONTH:
+            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_MONTH;
+        case SUPPORTED_FUNCTIONS.FIRST_DAY_OF_WEEK:
+            return CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_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) => {
+    if (valueSpecification instanceof SimpleFunctionExpression &&
+        matchFunctionName(valueSpecification.functionName, SUPPORTED_FUNCTIONS.ADJUST)) {
+        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;
+    }
+    return new CustomDateOption('', '', 0, undefined, undefined, undefined);
+};
+/**
+ * Build DatePickerOption from pure date functions or PrimitiveInstanceValue
+ */
+const buildDatePickerOption = (valueSpecification) => {
+    if (valueSpecification instanceof SimpleFunctionExpression) {
+        switch (valueSpecification.functionName) {
+            case SUPPORTED_FUNCTIONS.TODAY:
+                return new DatePickerOption(CUSTOM_DATE_PICKER_OPTION.TODAY, CUSTOM_DATE_PICKER_OPTION.TODAY);
+            case SUPPORTED_FUNCTIONS.NOW:
+                return new DatePickerOption(CUSTOM_DATE_PICKER_OPTION.NOW, CUSTOM_DATE_PICKER_OPTION.NOW);
+            case SUPPORTED_FUNCTIONS.FIRST_DAY_OF_YEAR:
+                return new CustomFirstDayOfOption(CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_YEAR, CUSTOM_DATE_FIRST_DAY_OF_UNIT.YEAR);
+            case 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 SUPPORTED_FUNCTIONS.FIRST_DAY_OF_MONTH:
+                return new CustomFirstDayOfOption(CUSTOM_DATE_OPTION_REFERENCE_MOMENT.FIRST_DAY_OF_MONTH, CUSTOM_DATE_FIRST_DAY_OF_UNIT.MONTH);
+            case 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 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 SUPPORTED_FUNCTIONS.ADJUST:
+                return buildCustomDateOption(valueSpecification);
+            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.genericType.value.rawType.path ===
+                PRIMITIVE_TYPE.DATETIME
+                ? CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME
+                : CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE);
+    }
+};
+const AbsoluteDateValueSpecificationEditor = (props) => {
+    const { valueSpecification, graph, setValueSpecification, setDatePickerOption, } = props;
+    const inputRef = useRef(null);
+    const absoluteDateValue = valueSpecification instanceof SimpleFunctionExpression
+        ? ''
+        : valueSpecification.values[0];
+    const updateAbsoluteDateValue = (event) => {
+        if (valueSpecification instanceof SimpleFunctionExpression) {
+            setValueSpecification(buildPrimitiveInstanceValue(graph, PRIMITIVE_TYPE.STRICTDATE, event.target.value));
+        }
+        else if (valueSpecification instanceof InstanceValue) {
+            instanceValue_setValue(valueSpecification, event.target.value, 0);
+            if (valueSpecification.genericType.value.rawType.path !==
+                PRIMITIVE_TYPE.STRICTDATE) {
+                valueSpecification_setGenericType(valueSpecification, GenericTypeExplicitReference.create(new GenericType(graph.getPrimitiveType(PRIMITIVE_TYPE.STRICTDATE))));
+            }
+            setValueSpecification(valueSpecification);
+        }
+        setDatePickerOption(new DatePickerOption(event.target.value, CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE));
+    };
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    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, } = props;
+    const inputRef = useRef(null);
+    const absoluteTimeValue = valueSpecification instanceof SimpleFunctionExpression
+        ? ''
+        : valueSpecification.values[0];
+    const updateAbsoluteTimeValue = (event) => {
+        if (valueSpecification instanceof SimpleFunctionExpression) {
+            setValueSpecification(buildPrimitiveInstanceValue(graph, PRIMITIVE_TYPE.DATETIME, event.target.value));
+        }
+        else {
+            instanceValue_setValue(valueSpecification, event.target.value, 0);
+            if (valueSpecification.genericType.value.rawType.path !==
+                PRIMITIVE_TYPE.DATETIME) {
+                valueSpecification_setGenericType(valueSpecification, GenericTypeExplicitReference.create(new GenericType(graph.getPrimitiveType(PRIMITIVE_TYPE.DATETIME))));
+            }
+            setValueSpecification(valueSpecification);
+        }
+        setDatePickerOption(new DatePickerOption(event.target.value, CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME));
+    };
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    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", 
+            // Despite its name this would actually allow us to register time in UTC
+            // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#setting_timezones
+            type: "datetime-local", spellCheck: false, value: absoluteTimeValue, onChange: updateAbsoluteTimeValue }) }));
+};
+const CustomDateInstanceValueEditor = (props) => {
+    const { customDateOptionValue, graph, setValueSpecification, setDatePickerOption, observerContext, } = props;
+    const inputRef = useRef(null);
+    const [durationValue, setDurationValue] = useState(customDateOptionValue.duration);
+    const [unitValue, setUnitValue] = useState(customDateOptionValue.unit ?? CUSTOM_DATE_OPTION_UNIT.DAYS);
+    const [directionValue, setDirectionValue] = useState(customDateOptionValue.direction ?? CUSTOM_DATE_OPTION_DIRECTION.BEFORE);
+    const [referenceMomentValue, setReferenceMomentValueValue] = useState(customDateOptionValue.referenceMoment ??
+        CUSTOM_DATE_OPTION_REFERENCE_MOMENT.TODAY);
+    const changeValue = (latestDurationValue, latestUnitValue, latestDirectionValue, latestReferenceMomentValue) => {
+        if (latestDurationValue !== 0 &&
+            latestUnitValue !== '' &&
+            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));
+            const matchedPreservedCustomAdjustDates = reservedCustomDateOptions.filter((t) => t.generateDisplayLabel() === dateOption.generateDisplayLabel());
+            if (matchedPreservedCustomAdjustDates.length > 0) {
+                dateOption.label = guaranteeNonNullable(matchedPreservedCustomAdjustDates[0]?.label);
+                dateOption.value = guaranteeNonNullable(matchedPreservedCustomAdjustDates[0]?.value);
+            }
+            else {
+                dateOption.updateLabel();
+            }
+            setDatePickerOption(dateOption);
+        }
+    };
+    const changeDurationValue = (event) => {
+        const duration = event.target.value !== ''
+            ? returnUndefOnError(() => parseNumber(event.target.value)) ?? 0
+            : 0;
+        setDurationValue(duration);
+        changeValue(duration, unitValue, directionValue, referenceMomentValue);
+    };
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    return (_jsxs("div", { className: "value-spec-editor__date-picker__custom-date", children: [_jsx("div", { className: "value-spec-editor__date-picker__custom-date__input", children: _jsx("input", { ref: inputRef, className: "value-spec-editor__date-picker__custom-date__input-text-editor input--dark", spellCheck: false, value: durationValue, type: "number", onChange: changeDurationValue }) }), _jsx("div", { className: "value-spec-editor__date-picker__custom-date__input", children: _jsx(CustomSelectorInput, { placeholder: "Unit", className: "value-spec-editor__date-picker__custom-date__input-dropdown", options: Object.values(CUSTOM_DATE_OPTION_UNIT).map((t) => ({
+                        value: t.toString(),
+                        label: t.toString(),
+                    })), onChange: (val) => {
+                        setUnitValue(val.value);
+                        changeValue(durationValue, val.value, directionValue, referenceMomentValue);
+                    }, value: { value: unitValue, label: unitValue }, darkMode: true }) }), _jsx("div", { className: "value-spec-editor__date-picker__custom-date__input", children: _jsx(CustomSelectorInput, { className: "value-spec-editor__date-picker__custom-date__input-dropdown", options: Object.values(CUSTOM_DATE_OPTION_DIRECTION).map((t) => ({
+                        value: t.toString(),
+                        label: t.toString(),
+                    })), onChange: (val) => {
+                        setDirectionValue(val.value);
+                        changeValue(durationValue, unitValue, val.value, referenceMomentValue);
+                    }, value: { value: directionValue, label: directionValue }, darkMode: true }) }), _jsx("div", { className: "value-spec-editor__date-picker__custom-date__input", children: _jsx(CustomSelectorInput, { className: "value-spec-editor__date-picker__custom-date__input-dropdown", options: Object.values(CUSTOM_DATE_OPTION_REFERENCE_MOMENT).map((t) => ({
+                        value: t.toString(),
+                        label: t.toString(),
+                    })), onChange: (val) => {
+                        setReferenceMomentValueValue(val.value);
+                        changeValue(durationValue, unitValue, directionValue, val.value);
+                    }, value: { value: referenceMomentValue, label: referenceMomentValue }, darkMode: true }) })] }));
+};
+const CustomFirstDayOfValueSpecificationEditor = (props) => {
+    const { customDateAdjustOptionValue, graph, observerContext, setValueSpecification, setDatePickerOption, } = props;
+    const selectorRef = useRef(null);
+    const [unitValue, setUnitValue] = useState(customDateAdjustOptionValue instanceof CustomFirstDayOfOption
+        ? customDateAdjustOptionValue.unit
+        : null);
+    const changeValue = (latestUnitValue) => {
+        if (latestUnitValue !== '') {
+            const targetUnitValue = Object.values(CUSTOM_DATE_OPTION_REFERENCE_MOMENT).filter((moment) => moment.toString().includes(latestUnitValue));
+            const startDayOfDateOption = targetUnitValue.length > 0
+                ? new CustomFirstDayOfOption(guaranteeNonNullable(targetUnitValue[0]?.toString()), latestUnitValue)
+                : new CustomFirstDayOfOption('', undefined);
+            setValueSpecification(buildPureDateFunctionExpression(startDayOfDateOption, graph, observerContext));
+            setDatePickerOption(startDayOfDateOption);
+        }
+    };
+    useEffect(() => {
+        selectorRef.current?.focus();
+    }, []);
+    return (_jsx("div", { className: "value-spec-editor__date-picker__custom-date", children: _jsx("div", { className: "value-spec-editor__date-picker__custom-date__input", children: _jsx(CustomSelectorInput, { ref: selectorRef, placeholder: "Choose a unit...", className: "value-spec-editor__date-picker__custom-date__input-dropdown value-spec-editor__date-picker__custom-date__input-dropdown--full", options: Object.values(CUSTOM_DATE_FIRST_DAY_OF_UNIT).map((t) => ({
+                    value: t.toString(),
+                    label: t.toString(),
+                })), onChange: (val) => {
+                    if (val) {
+                        setUnitValue(val.value);
+                        changeValue(val.value);
+                    }
+                }, value: unitValue ? { value: unitValue, label: unitValue } : null, darkMode: true }) }) }));
+};
+const CustomPreviousDayOfWeekValueSpecificationEditor = (props) => {
+    const { customDateAdjustOptionValue, graph, observerContext, setValueSpecification, setDatePickerOption, } = props;
+    const selectorRef = useRef(null);
+    const [dayOfWeekValue, setDayOfWeekValue] = useState(customDateAdjustOptionValue instanceof CustomPreviousDayOfWeekOption
+        ? customDateAdjustOptionValue.day
+        : null);
+    const changeValue = (latestDurationUnitValue) => {
+        if (latestDurationUnitValue !== '') {
+            const previousDayOfWeekDateOption = new CustomPreviousDayOfWeekOption(`Previous ${latestDurationUnitValue}`, latestDurationUnitValue);
+            setValueSpecification(buildPureDateFunctionExpression(previousDayOfWeekDateOption, graph, observerContext));
+            setDatePickerOption(previousDayOfWeekDateOption);
+        }
+    };
+    useEffect(() => {
+        selectorRef.current?.focus();
+    }, []);
+    return (_jsx("div", { className: "value-spec-editor__date-picker__custom-date", children: _jsx("div", { className: "value-spec-editor__date-picker__custom-date__input", children: _jsx(CustomSelectorInput, { ref: selectorRef, placeholder: "Choose a day...", className: "value-spec-editor__date-picker__custom-date__input-dropdown value-spec-editor__date-picker__custom-date__input-dropdown--full", options: Object.values(CUSTOM_DATE_DAY_OF_WEEK).map((t) => ({
+                    value: t.toString(),
+                    label: t.toString(),
+                })), onChange: (val) => {
+                    if (val) {
+                        setDayOfWeekValue(val.value);
+                        changeValue(val.value);
+                    }
+                }, value: dayOfWeekValue
+                    ? { value: dayOfWeekValue, label: dayOfWeekValue }
+                    : null, darkMode: true }) }) }));
+};
+export const CustomDatePicker = (props) => {
+    const { valueSpecification, setValueSpecification, graph, observerContext, typeCheckOption, } = props;
+    // For some cases where types need to be matched strictly.
+    // Some options need to be filtered out for DateTime.
+    const targetDateOptionsEnum = typeCheckOption.match
+        ? Object.values([
+            CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME,
+            CUSTOM_DATE_PICKER_OPTION.NOW,
+        ])
+        : Object.values(CUSTOM_DATE_PICKER_OPTION);
+    const [datePickerOption, setDatePickerOption] = useState(buildDatePickerOption(valueSpecification));
+    const [anchorEl, setAnchorEl] = useState(null);
+    const openCustomDatePickerPopover = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleEnter = () => {
+        setDatePickerOption(buildDatePickerOption(valueSpecification));
+    };
+    const closeCustomDatePickerPopover = () => {
+        setDatePickerOption(buildDatePickerOption(valueSpecification));
+        setAnchorEl(null);
+    };
+    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));
+        }
+        else if (
+        // Elements in this list will trigger children date components
+        ![
+            CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE,
+            CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME,
+            CUSTOM_DATE_PICKER_OPTION.CUSTOM_DATE,
+            CUSTOM_DATE_PICKER_OPTION.FIRST_DAY_OF,
+            CUSTOM_DATE_PICKER_OPTION.PREVIOUS_DAY_OF_WEEK,
+        ].includes(chosenDatePickerOption.value)) {
+            const theReservedCustomDateOption = reservedCustomDateOptions.filter((d) => d.value === chosenDatePickerOption.value);
+            theReservedCustomDateOption.length > 0
+                ? setValueSpecification(buildPureAdjustDateFunction(guaranteeNonNullable(theReservedCustomDateOption[0]), graph, observerContext))
+                : setValueSpecification(buildPureDateFunctionExpression(chosenDatePickerOption, graph, observerContext));
+        }
+        setDatePickerOption(chosenDatePickerOption);
+    };
+    const renderChildrenDateComponents = () => {
+        switch (datePickerOption.value) {
+            case CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE:
+                return (_jsx(AbsoluteDateValueSpecificationEditor, { graph: graph, valueSpecification: valueSpecification, setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption }));
+            case CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME:
+                return (_jsx(AbsoluteTimeValueSpecificationEditor, { graph: graph, valueSpecification: valueSpecification, setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption }));
+            case CUSTOM_DATE_PICKER_OPTION.CUSTOM_DATE:
+                return (_jsx(CustomDateInstanceValueEditor, { graph: graph, observerContext: observerContext, customDateOptionValue: buildCustomDateOption(valueSpecification), setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption }));
+            case CUSTOM_DATE_PICKER_OPTION.FIRST_DAY_OF:
+                return (_jsx(CustomFirstDayOfValueSpecificationEditor, { graph: graph, observerContext: observerContext, customDateAdjustOptionValue: buildDatePickerOption(valueSpecification), setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption }));
+            case CUSTOM_DATE_PICKER_OPTION.PREVIOUS_DAY_OF_WEEK:
+                return (_jsx(CustomPreviousDayOfWeekValueSpecificationEditor, { graph: graph, observerContext: observerContext, customDateAdjustOptionValue: buildDatePickerOption(valueSpecification), setValueSpecification: setValueSpecification, setDatePickerOption: setDatePickerOption }));
+            default:
+                return null;
+        }
+    };
+    // make sure the date picker label is updated when the value is reset or changed somehow
+    useEffect(() => {
+        setDatePickerOption(buildDatePickerOption(valueSpecification));
+    }, [valueSpecification]);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { className: "value-spec-editor__date-picker__trigger", title: "Click to edit and pick from more date options", onClick: openCustomDatePickerPopover, children: datePickerOption.label }), _jsxs(BasePopover, { open: Boolean(anchorEl), TransitionProps: {
+                    onEnter: handleEnter,
+                }, anchorEl: anchorEl, onClose: closeCustomDatePickerPopover, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'center',
+                }, children: [_jsx(BaseRadioGroup, { className: "value-spec-editor__date-picker__options", value: datePickerOption.value, onChange: handleDatePickerOptionChange, row: true, options: targetDateOptionsEnum, size: 2 }), renderChildrenDateComponents()] })] }));
+};
+//# sourceMappingURL=CustomDatePicker.js.map