@finos/legend-query-builder 4.16.20 → 4.16.22

package/src/components/shared/CustomDatePicker.tsx

@@ -21,781 +21,62 @@ import {
   CustomSelectorInput,
   clsx,
 } from '@finos/legend-art';
+import { PRIMITIVE_TYPE } from '@finos/legend-graph';
 import {
-  type PureModel,
-  type Enum,
-  type Type,
-  type ValueSpecification,
-  PRIMITIVE_TYPE,
-  SimpleFunctionExpression,
-  InstanceValue,
-  GenericType,
-  PrimitiveInstanceValue,
-  GenericTypeExplicitReference,
-  EnumValueExplicitReference,
-  EnumValueInstanceValue,
-  matchFunctionName,
-  type ObserverContext,
-  PrimitiveType,
-} from '@finos/legend-graph';
-import {
-  assertErrorThrown,
   guaranteeNonNullable,
   parseNumber,
   returnUndefOnError,
-  UnsupportedOperationError,
 } from '@finos/legend-shared';
 import { useEffect, useRef, useState } from 'react';
+import { useApplicationStore } from '@finos/legend-application';
+import type {
+  PrimitiveInstanceValueEditorProps,
+  TypeCheckOption,
+} from './BasicValueSpecificationEditor.js';
 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,
-  type ApplicationStore,
-  type LegendApplicationConfig,
-  type LegendApplicationPlugin,
-  type LegendApplicationPluginManager,
-} from '@finos/legend-application';
-
-export enum CUSTOM_DATE_PICKER_OPTION {
-  ABSOLUTE_DATE = 'Absolute Date',
-  ABSOLUTE_TIME = 'Absolute Time',
-  TODAY = 'Today',
-  NOW = 'Now',
-  YESTERDAY = 'Yesterday',
-  ONE_YEAR_AGO = 'One Year Ago',
-  ONE_MONTH_AGO = 'One Month Ago',
-  ONE_WEEK_AGO = 'One Week Ago',
-  CUSTOM_DATE = 'Custom Date',
-  PREVIOUS_DAY_OF_WEEK = 'Previous ... of Week',
-  FIRST_DAY_OF = 'First day of...',
-  LATEST_DATE = 'Latest Date',
-}
-
-enum CUSTOM_DATE_OPTION_UNIT {
-  DAYS = 'Day(s)',
-  WEEKS = 'Week(s)',
-  MONTHS = 'Month(s)',
-  YEARS = 'Year(s)',
-}
-
-enum CUSTOM_DATE_FIRST_DAY_OF_UNIT {
-  WEEK = 'Week',
-  MONTH = 'Month',
-  QUARTER = 'Quarter',
-  YEAR = 'Year',
-}
-
-enum CUSTOM_DATE_DAY_OF_WEEK {
-  MONDAY = 'Monday',
-  TUESDAY = 'Tuesday',
-  WENDNESDAY = 'Wednesday',
-  THURSDAY = 'Thursday',
-  FRIDAY = 'Friday',
-  SATURDAY = 'Saturday',
-  SUNDAY = 'Sunday',
-}
-
-enum CUSTOM_DATE_OPTION_DIRECTION {
-  BEFORE = 'Before',
-  AFTER = 'After',
-}
-
-enum CUSTOM_DATE_OPTION_REFERENCE_MOMENT {
-  TODAY = 'Today',
-  NOW = 'Now',
-  FIRST_DAY_OF_THIS_YEAR = 'Start of Year',
-  FIRST_DAY_OF_QUARTER = 'Start of Quarter',
-  FIRST_DAY_OF_MONTH = 'Start of Month',
-  FIRST_DAY_OF_WEEK = 'Start of Week',
-  PERVIOUS_DAY_OF_WEEK = 'Previous Day of Week',
-}
-
-/**
- * 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: string;
-  /**
-   * value is the selected date option in date-dropdown.
-   */
-  value: string;
-
-  constructor(label: string, value: string) {
-    this.label = label;
-    this.value = value;
-  }
-}
-
-class CustomDateOption extends DatePickerOption {
-  /**
-   * duration is the amount of time span that will be adjusted.
-   */
-  duration: number;
-  /**
-   * unit represents the time duration unit, e.g. year, week, etc.
-   */
-  unit: CUSTOM_DATE_OPTION_UNIT | undefined;
-  /**
-   * direction means the direction in which time adjustment will go to.
-   */
-  direction: CUSTOM_DATE_OPTION_DIRECTION | undefined;
-  /**
-   * referenceMoment is the date which adjustment starts from.
-   */
-  referenceMoment: CUSTOM_DATE_OPTION_REFERENCE_MOMENT | undefined;
-
-  constructor(
-    label: string,
-    value: string,
-    duration: number,
-    unit: CUSTOM_DATE_OPTION_UNIT | undefined,
-    direction: CUSTOM_DATE_OPTION_DIRECTION | undefined,
-    referenceMoment: CUSTOM_DATE_OPTION_REFERENCE_MOMENT | undefined,
-  ) {
-    super(label, value);
-    this.duration = duration;
-    this.unit = unit;
-    this.direction = direction;
-    this.referenceMoment = referenceMoment;
-  }
-
-  generateDisplayLabel(): string {
-    return [
-      this.duration,
-      this.unit,
-      this.direction,
-      this.referenceMoment,
-    ].join(' ');
-  }
-
-  updateLabel(): void {
-    this.label = this.generateDisplayLabel();
-  }
-}
-
-class CustomFirstDayOfOption extends DatePickerOption {
-  /**
-   * unit: time unit, e.g. Week, Month, etc.
-   */
-  unit: CUSTOM_DATE_FIRST_DAY_OF_UNIT | undefined;
-
-  constructor(label: string, unit: CUSTOM_DATE_FIRST_DAY_OF_UNIT | undefined) {
-    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: CUSTOM_DATE_DAY_OF_WEEK;
-
-  constructor(label: string, day: CUSTOM_DATE_DAY_OF_WEEK) {
-    super(label, CUSTOM_DATE_PICKER_OPTION.PREVIOUS_DAY_OF_WEEK);
-    this.day = day;
-  }
+  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,
+  type CustomDatePickerUpdateValueSpecification,
+  type CustomDatePickerValueSpecification,
+} from './CustomDatePickerHelper.js';
+import type { V1_TypeCheckOption } from './V1_BasicValueSpecificationEditor.js';
+
+interface AbsoluteDateValueSpecificationEditorProps<
+  T extends CustomDatePickerValueSpecification | undefined,
+> extends Omit<CustomDatePickerProps<T>, 'typeCheckOption'> {
+  setDatePickerOption: (datePickerOption: DatePickerOption) => void;
 }
 
-const reservedCustomDateOptions: CustomDateOption[] = [
-  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: string,
-): string | undefined =>
-  Object.values(QUERY_BUILDER_SUPPORTED_FUNCTIONS).find((_func) =>
-    matchFunctionName(functionName, _func),
-  );
-
-/**
- * Generate pure date functions based on the DatePickerOption.
- */
-const buildPureDateFunctionExpression = (
-  datePickerOption: DatePickerOption,
-  graph: PureModel,
-  observerContext: ObserverContext,
-): SimpleFunctionExpression => {
-  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: string,
-  graph: PureModel,
-): Enum => {
-  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 as keyof typeof CUSTOM_DATE_OPTION_UNIT
-          ] === unitString,
-      )[0],
-  )[0];
-  return (
-    targetPureDurationEnumValue ??
-    guaranteeNonNullable(durationUnitEnum.values[0])
-  );
-};
-
-/**
- * Generate the pure date adjust() function based on the CustomDateOption.
- */
-const buildPureAdjustDateFunction = (
-  customDateOption: CustomDateOption,
-  graph: PureModel,
-  observerContext: ObserverContext,
-): SimpleFunctionExpression => {
-  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: SimpleFunctionExpression,
-): number => {
-  const durationParam = pureDateAdjustFunction.parametersValues[1];
-  return durationParam instanceof PrimitiveInstanceValue
-    ? (durationParam.values[0] as number)
-    : durationParam instanceof SimpleFunctionExpression &&
-        matchFunctionName(
-          durationParam.functionName,
-          QUERY_BUILDER_SUPPORTED_FUNCTIONS.MINUS,
-        )
-      ? durationParam.parametersValues[0] instanceof PrimitiveInstanceValue
-        ? (durationParam.parametersValues[0].values[0] as number)
-        : 0
-      : 0;
-};
-
-/**
- * Generate the value of CustomDateOption.direction from the pure date adjust() function.
- */
-const buildCustomDateOptionDirectionValue = (
-  pureDateAdjustFunction: SimpleFunctionExpression,
-): CUSTOM_DATE_OPTION_DIRECTION =>
-  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: SimpleFunctionExpression,
-): CUSTOM_DATE_OPTION_UNIT =>
-  guaranteeNonNullable(
-    Object.keys(CUSTOM_DATE_OPTION_UNIT)
-      .filter(
-        (key) =>
-          key ===
-          (valueSpecification.parametersValues[2] as EnumValueInstanceValue)
-            .values[0]?.value.name,
-      )
-      .map(
-        (key) =>
-          CUSTOM_DATE_OPTION_UNIT[key as keyof typeof CUSTOM_DATE_OPTION_UNIT],
-      )[0],
-  );
-
-/**
- * Generate the value of CustomDateOption.moment from the pure date adjust() function.
- */
-const buildCustomDateOptionReferenceMomentValue = (
-  pureDateAjustFunction: SimpleFunctionExpression,
-): CUSTOM_DATE_OPTION_REFERENCE_MOMENT => {
-  const funcName = (
-    pureDateAjustFunction.parametersValues[0] as SimpleFunctionExpression
-  ).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: SimpleFunctionExpression | PrimitiveInstanceValue,
-  applicationStore: ApplicationStore<
-    LegendApplicationConfig,
-    LegendApplicationPluginManager<LegendApplicationPlugin>
-  >,
-): CustomDateOption => {
-  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: SimpleFunctionExpression | PrimitiveInstanceValue,
-  applicationStore: ApplicationStore<
-    LegendApplicationConfig,
-    LegendApplicationPluginManager<LegendApplicationPlugin>
-  >,
-): DatePickerOption => {
-  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] as EnumValueInstanceValue)
-              .values[0]?.value.name
-          }`,
-          (valueSpecification.parametersValues[0] as EnumValueInstanceValue)
-            .values[0]?.value.name as CUSTOM_DATE_DAY_OF_WEEK,
-        );
-      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] ?? '') as string,
-          valueSpecification.values[0] === null
-            ? ''
-            : valueSpecification.genericType.value.rawType.path ===
-                PRIMITIVE_TYPE.DATETIME
-              ? CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME
-              : CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE,
-        );
-  }
-};
-
-const AbsoluteDateValueSpecificationEditor: React.FC<{
-  valueSpecification: SimpleFunctionExpression | PrimitiveInstanceValue;
-  graph: PureModel;
-  setValueSpecification: (val: ValueSpecification) => void;
-  setDatePickerOption: (datePickerOption: DatePickerOption) => void;
-  observerContext: ObserverContext;
-}> = (props) => {
+const AbsoluteDateValueSpecificationEditor = <
+  T extends CustomDatePickerValueSpecification | undefined,
+>(
+  props: AbsoluteDateValueSpecificationEditorProps<T>,
+) => {
   const {
     valueSpecification,
-    graph,
-    setValueSpecification,
+    valueSelector,
+    updateValueSpecification,
     setDatePickerOption,
-    observerContext,
   } = props;
   const inputRef = useRef<HTMLInputElement>(null);
-  const absoluteDateValue =
-    valueSpecification instanceof SimpleFunctionExpression
-      ? ''
-      : (valueSpecification.values[0] as string | null);
+  const absoluteDateValue = valueSelector(valueSpecification);
   const updateAbsoluteDateValue: React.ChangeEventHandler<HTMLInputElement> = (
     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,
@@ -822,56 +103,34 @@ const AbsoluteDateValueSpecificationEditor: React.FC<{
   );
 };
 
-const AbsoluteTimeValueSpecificationEditor: React.FC<{
-  valueSpecification: SimpleFunctionExpression | PrimitiveInstanceValue;
-  graph: PureModel;
-  setValueSpecification: (val: ValueSpecification) => void;
+interface AbsoluteTimeValueSpecificationEditorProps<
+  T extends CustomDatePickerValueSpecification | undefined,
+> extends Omit<CustomDatePickerProps<T>, 'typeCheckOption'> {
   setDatePickerOption: (datePickerOption: DatePickerOption) => void;
-  observerContext: ObserverContext;
-}> = (props) => {
+}
+
+const AbsoluteTimeValueSpecificationEditor = <
+  T extends CustomDatePickerValueSpecification | undefined,
+>(
+  props: AbsoluteTimeValueSpecificationEditorProps<T>,
+) => {
   const {
     valueSpecification,
-    graph,
-    setValueSpecification,
+    valueSelector,
+    updateValueSpecification,
     setDatePickerOption,
-    observerContext,
   } = props;
   const inputRef = useRef<HTMLInputElement>(null);
-  const absoluteTimeValue =
-    valueSpecification instanceof SimpleFunctionExpression
-      ? ''
-      : (valueSpecification.values[0] as string | null);
+  const absoluteTimeValue = valueSelector(valueSpecification);
   const updateAbsoluteTimeValue: React.ChangeEventHandler<HTMLInputElement> = (
     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,
@@ -903,19 +162,25 @@ const AbsoluteTimeValueSpecificationEditor: React.FC<{
   );
 };
 
-const CustomDateInstanceValueEditor: React.FC<{
+interface CustomDateInstanceValueEditorProps<
+  T extends CustomDatePickerValueSpecification | undefined,
+> extends Omit<
+    CustomDatePickerProps<T>,
+    'typeCheckOption' | 'valueSpecification' | 'valueSelector'
+  > {
   customDateOptionValue: CustomDateOption;
-  graph: PureModel;
-  observerContext: ObserverContext;
-  setValueSpecification: (val: ValueSpecification) => void;
   setDatePickerOption: (datePickerOption: DatePickerOption) => void;
-}> = (props) => {
+}
+
+const CustomDateInstanceValueEditor = <
+  T extends CustomDatePickerValueSpecification | undefined,
+>(
+  props: CustomDateInstanceValueEditorProps<T>,
+) => {
   const {
     customDateOptionValue,
-    graph,
-    setValueSpecification,
+    updateValueSpecification,
     setDatePickerOption,
-    observerContext,
   } = props;
   const applicationStore = useApplicationStore();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -952,9 +217,7 @@ const CustomDateInstanceValueEditor: React.FC<{
         latestDirectionValue as CUSTOM_DATE_OPTION_DIRECTION,
         latestReferenceMomentValue as CUSTOM_DATE_OPTION_REFERENCE_MOMENT,
       );
-      setValueSpecification(
-        buildPureAdjustDateFunction(dateOption, graph, observerContext),
-      );
+      updateValueSpecification(undefined, dateOption);
       const matchedPreservedCustomAdjustDates =
         reservedCustomDateOptions.filter(
           (t) => t.generateDisplayLabel() === dateOption.generateDisplayLabel(),
@@ -1069,18 +332,24 @@ const CustomDateInstanceValueEditor: React.FC<{
   );
 };
 
-const CustomFirstDayOfValueSpecificationEditor: React.FC<{
+interface CustomFirstDayOfValueSpecificationEditorProps<
+  T extends CustomDatePickerValueSpecification | undefined,
+> extends Omit<
+    CustomDatePickerProps<T>,
+    'typeCheckOption' | 'valueSpecification' | 'valueSelector'
+  > {
   customDateAdjustOptionValue: DatePickerOption;
-  graph: PureModel;
-  observerContext: ObserverContext;
-  setValueSpecification: (val: ValueSpecification) => void;
   setDatePickerOption: (datePickerOption: DatePickerOption) => void;
-}> = (props) => {
+}
+
+const CustomFirstDayOfValueSpecificationEditor = <
+  T extends CustomDatePickerValueSpecification | undefined,
+>(
+  props: CustomFirstDayOfValueSpecificationEditorProps<T>,
+) => {
   const {
     customDateAdjustOptionValue,
-    graph,
-    observerContext,
-    setValueSpecification,
+    updateValueSpecification,
     setDatePickerOption,
   } = props;
   const applicationStore = useApplicationStore();
@@ -1102,13 +371,7 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
               latestUnitValue as CUSTOM_DATE_FIRST_DAY_OF_UNIT,
             )
           : new CustomFirstDayOfOption('', undefined);
-      setValueSpecification(
-        buildPureDateFunctionExpression(
-          startDayOfDateOption,
-          graph,
-          observerContext,
-        ),
-      );
+      updateValueSpecification(undefined, startDayOfDateOption);
       setDatePickerOption(startDayOfDateOption);
     }
   };
@@ -1144,18 +407,24 @@ const CustomFirstDayOfValueSpecificationEditor: React.FC<{
   );
 };
 
-const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
+interface CustomPreviousDayOfWeekValueSpecificationEditorProps<
+  T extends CustomDatePickerValueSpecification | undefined,
+> extends Omit<
+    CustomDatePickerProps<T>,
+    'typeCheckOption' | 'valueSpecification' | 'valueSelector'
+  > {
   customDateAdjustOptionValue: DatePickerOption;
-  graph: PureModel;
-  observerContext: ObserverContext;
-  setValueSpecification: (val: ValueSpecification) => void;
   setDatePickerOption: (datePickerOption: DatePickerOption) => void;
-}> = (props) => {
+}
+
+const CustomPreviousDayOfWeekValueSpecificationEditor = <
+  T extends CustomDatePickerValueSpecification | undefined,
+>(
+  props: CustomPreviousDayOfWeekValueSpecificationEditorProps<T>,
+) => {
   const {
     customDateAdjustOptionValue,
-    graph,
-    observerContext,
-    setValueSpecification,
+    updateValueSpecification,
     setDatePickerOption,
   } = props;
   const applicationStore = useApplicationStore();
@@ -1171,13 +440,7 @@ const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
         `Previous ${latestDurationUnitValue}`,
         latestDurationUnitValue as CUSTOM_DATE_DAY_OF_WEEK,
       );
-      setValueSpecification(
-        buildPureDateFunctionExpression(
-          previousDayOfWeekDateOption,
-          graph,
-          observerContext,
-        ),
-      );
+      updateValueSpecification(undefined, previousDayOfWeekDateOption);
       setDatePickerOption(previousDayOfWeekDateOption);
     }
   };
@@ -1217,39 +480,33 @@ const CustomPreviousDayOfWeekValueSpecificationEditor: React.FC<{
   );
 };
 
-export const CustomDatePicker: React.FC<{
-  valueSpecification: PrimitiveInstanceValue | SimpleFunctionExpression;
-  graph: PureModel;
-  observerContext: ObserverContext;
+interface CustomDatePickerProps<
+  T extends CustomDatePickerValueSpecification | undefined,
+> extends Omit<
+    PrimitiveInstanceValueEditorProps<T, string | null>,
+    'updateValueSpecification' | 'resetValue'
+  > {
+  updateValueSpecification: CustomDatePickerUpdateValueSpecification<T>;
   hasError?: boolean;
-  typeCheckOption: {
-    expectedType: Type;
-    /**
-     * Indicates if a strict type-matching will happen.
-     * Sometimes, auto-boxing allow some rooms to wiggle,
-     * for example we can assign a Float to an Integer, a
-     * Date to a DateTime. With this flag set to `true`
-     * we will not allow this.
-     *
-     * For example, if `match=true`, it means that options in the
-     * date-capability-dropdown which are not returning type DateTime
-     * will be filtered out.
-     */
-    match?: boolean;
-  };
+  typeCheckOption: TypeCheckOption | V1_TypeCheckOption;
   displayAsEditableValue?: boolean | undefined;
-  setValueSpecification: (val: ValueSpecification) => void;
   handleBlur?: (() => void) | undefined;
-}> = (props) => {
+}
+
+export const CustomDatePicker = <
+  T extends CustomDatePickerValueSpecification | undefined,
+>(
+  props: CustomDatePickerProps<T>,
+) => {
   const {
     valueSpecification,
-    setValueSpecification,
-    graph,
-    observerContext,
+    valueSelector,
+    updateValueSpecification,
     hasError,
     typeCheckOption,
     displayAsEditableValue,
     handleBlur,
+    readOnly,
   } = props;
   const applicationStore = useApplicationStore();
   // For some cases where types need to be matched strictly.
@@ -1292,14 +549,9 @@ export const CustomDatePicker: React.FC<{
     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
       ![
@@ -1314,21 +566,12 @@ export const CustomDatePicker: React.FC<{
         (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);
@@ -1337,60 +580,52 @@ export const CustomDatePicker: React.FC<{
     switch (datePickerOption.value) {
       case CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_DATE:
         return (
-          <AbsoluteDateValueSpecificationEditor
-            graph={graph}
+          <AbsoluteDateValueSpecificationEditor<T>
             valueSpecification={valueSpecification}
-            setValueSpecification={setValueSpecification}
+            valueSelector={valueSelector}
+            updateValueSpecification={updateValueSpecification}
             setDatePickerOption={setDatePickerOption}
-            observerContext={observerContext}
           />
         );
       case CUSTOM_DATE_PICKER_OPTION.ABSOLUTE_TIME:
         return (
-          <AbsoluteTimeValueSpecificationEditor
-            graph={graph}
+          <AbsoluteTimeValueSpecificationEditor<T>
             valueSpecification={valueSpecification}
-            setValueSpecification={setValueSpecification}
+            valueSelector={valueSelector}
+            updateValueSpecification={updateValueSpecification}
             setDatePickerOption={setDatePickerOption}
-            observerContext={observerContext}
           />
         );
       case CUSTOM_DATE_PICKER_OPTION.CUSTOM_DATE:
         return (
-          <CustomDateInstanceValueEditor
-            graph={graph}
-            observerContext={observerContext}
+          <CustomDateInstanceValueEditor<T>
             customDateOptionValue={buildCustomDateOption(
               valueSpecification,
               applicationStore,
             )}
-            setValueSpecification={setValueSpecification}
+            updateValueSpecification={updateValueSpecification}
             setDatePickerOption={setDatePickerOption}
           />
         );
       case CUSTOM_DATE_PICKER_OPTION.FIRST_DAY_OF:
         return (
-          <CustomFirstDayOfValueSpecificationEditor
-            graph={graph}
-            observerContext={observerContext}
+          <CustomFirstDayOfValueSpecificationEditor<T>
             customDateAdjustOptionValue={buildDatePickerOption(
               valueSpecification,
               applicationStore,
             )}
-            setValueSpecification={setValueSpecification}
+            updateValueSpecification={updateValueSpecification}
             setDatePickerOption={setDatePickerOption}
           />
         );
       case CUSTOM_DATE_PICKER_OPTION.PREVIOUS_DAY_OF_WEEK:
         return (
-          <CustomPreviousDayOfWeekValueSpecificationEditor
-            graph={graph}
-            observerContext={observerContext}
+          <CustomPreviousDayOfWeekValueSpecificationEditor<T>
             customDateAdjustOptionValue={buildDatePickerOption(
               valueSpecification,
               applicationStore,
             )}
-            setValueSpecification={setValueSpecification}
+            updateValueSpecification={updateValueSpecification}
             setDatePickerOption={setDatePickerOption}
           />
         );
@@ -1417,8 +652,11 @@ export const CustomDatePicker: React.FC<{
                 hasError,
             },
           )}
-          title="Click to edit and pick from more date options"
-          onClick={openCustomDatePickerPopover}
+          title={
+            readOnly ? '' : 'Click to edit and pick from more date options'
+          }
+          onClick={readOnly ? () => {} : openCustomDatePickerPopover}
+          style={{ cursor: readOnly ? 'not-allowed' : '' }}
         >
           {datePickerOption.label ? (
             `"${datePickerOption.label}"`
@@ -1431,8 +669,11 @@ export const CustomDatePicker: React.FC<{
           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"
+          title={
+            readOnly ? '' : 'Click to edit and pick from more date options'
+          }
           onClick={openCustomDatePickerPopover}
+          disabled={readOnly}
         >
           {datePickerOption.label || 'Select value'}
         </button>