Select the time range filter value based on the date range sent via dashboard url parameter

[ambarishp]

Hi All
I m using 4.0.2. I have requirement to set the dashboard filter time range values based on the date range sent via dashboard url as a query parameter. Is there any way to set the date range based on the query parameter

[dosubot[bot]]

Yes, in version 4.0.2, you can set the dashboard filter time range values based on the date range sent via the dashboard URL as a query parameter. The function getFormDataWithDashboardContext processes the exploreFormData and dashboardContextFormData objects, which include the time_range parameter. This function merges filter configurations from the dashboard context into the explore form data, allowing the time range to be set via the dashboard URL.

Here is the relevant part of the code:

const mergeFilterBoxToFormData = (
  exploreFormData: QueryFormData,
  dashboardFormData: JsonObject,
) => {
  const dateColumns = {
    __time_range: 'time_range',
    __time_col: 'granularity_sqla',
    __time_grain: 'time_grain_sqla',
    __granularity: 'granularity',
  };
  const appliedTimeExtras = {};
  const filterBoxData: JsonObject = {};
  ensureIsArray(dashboardFormData.extra_filters).forEach(filter => {
    if (dateColumns[filter.col]) {
      if (filter.val !== NO_TIME_RANGE) {
        filterBoxData[dateColumns[filter.col]] = filter.val;
        appliedTimeExtras[filter.col] = filter.val;
      }
    } else {
      const adhocFilter = simpleFilterToAdhoc({
        ...(filter as QueryObjectFilterClause),
        isExtra: true,
      });
      filterBoxData.adhoc_filters = [
        ...ensureIsArray(filterBoxData.adhoc_filters),
        adhocFilter,
      ];
    }
  });
  filterBoxData.applied_time_extras = appliedTimeExtras;
  return filterBoxData;
};

const mergeNativeFiltersToFormData = (
  exploreFormData: QueryFormData,
  dashboardFormData: JsonObject,
) => {
  const nativeFiltersData: JsonObject = {};
  const extraFormData = dashboardFormData.extra_form_data || {};
  Object.entries(EXTRA_FORM_DATA_OVERRIDE_REGULAR_MAPPINGS).forEach(
    ([srcKey, targetKey]) => {
      const val = extraFormData[srcKey];
      if (isDefined(val)) {
        nativeFiltersData[targetKey] = val;
      }
    },
  );

  if ('time_grain_sqla' in extraFormData) {
    nativeFiltersData.time_grain_sqla = extraFormData.time_grain_sqla;
  }
  if ('granularity_sqla' in extraFormData) {
    nativeFiltersData.granularity_sqla = extraFormData.granularity_sqla;
  }

  const extras = dashboardFormData.extras || {};
  EXTRA_FORM_DATA_OVERRIDE_EXTRA_KEYS.forEach(key => {
    const val = extraFormData[key];
    if (isDefined(val)) {
      extras[key] = val;
    }
  });
  if (Object.keys(extras).length) {
    nativeFiltersData.extras = extras;
  }

  nativeFiltersData.adhoc_filters = ensureIsArray(
    extraFormData.adhoc_filters,
  ).map(filter => ({
    ...filter,
    isExtra: true,
  }));
  const appendFilters = ensureIsArray(extraFormData.filters).map(extraFilter =>
    simpleFilterToAdhoc({ ...extraFilter, isExtra: true }),
  );
  Object.keys(exploreFormData).forEach(key => {
    if (key.match(/adhoc_filter.*/)) {
      nativeFiltersData[key] = [
        ...ensureIsArray(nativeFiltersData[key]),
        ...appendFilters,
      ];
    }
  });
  return nativeFiltersData;
};

export const getFormDataWithDashboardContext = (
  exploreFormData: QueryFormData,
  dashboardContextFormData: JsonObject,
) => {
  const filterBoxData = mergeFilterBoxToFormData(
    exploreFormData,
    dashboardContextFormData,
  );
  const nativeFiltersData = mergeNativeFiltersToFormData(
    exploreFormData,
    dashboardContextFormData,
  );
  const adhocFilters = [
    ...Object.keys(exploreFormData),
    ...Object.keys(filterBoxData),
    ...Object.keys(nativeFiltersData),
  ]
    .filter(key => key.match(/adhoc_filter.*/))
    .reduce(
      (acc, key) => ({
        ...acc,
        [key]: removeExtraFieldForNewCharts(
          applyTimeRangeFilters(
            dashboardContextFormData,
            removeAdhocFilterDuplicates([
              ...ensureIsArray(exploreFormData[key]),
              ...ensureIsArray(filterBoxData[key]),
              ...ensureIsArray(nativeFiltersData[key]),
            ]),
          ),
          exploreFormData.slice_id === 0,
        ),
      }),
      {},
    );
  return {
    ...exploreFormData,
    ...dashboardContextFormData,
    ...filterBoxData,
    ...nativeFiltersData,
    ...adhocFilters,
  };
};

This code snippet shows that the time_range from dashboardContextFormData is used to update the filter configurations, allowing the time range to be set via the dashboard URL as a query parameter ^[1].

To continue talking to Dosu, mention @dosu.

[ambarishp]

@dosu so do we have to send the data range like this in parameter
https:///superset/dashboard/22/?__time_range=2024-01-01%2C2024-12-31

[dosubot[bot]]

Yes, you can send the date range in the URL parameter like this:

https://<domain-name>/superset/dashboard/22/?__time_range=2024-01-01%2C2024-12-31

This will set the time_range filter on the dashboard to the specified date range.

To continue talking to Dosu, mention @dosu.

[ambarishp]

i am able to get the __time_range value in dataset using url_param('__time_range'). but in UI Date filter not setting that value. it shows default value only.

[dosubot[bot]]

To ensure that the UI Date filter reflects the __time_range value from the URL parameter, you need to make sure that the filterState.value is set to the __time_range value from the URL. The useEffect hook in the TimeFilterPlugin component handles updating the filter when filterState.value changes.

Here is the relevant part of the code:

useEffect(() => {
  handleTimeRangeChange(filterState.value);
}, [filterState.value]);

This useEffect hook calls handleTimeRangeChange whenever filterState.value changes, ensuring that the UI Date filter is updated accordingly. The handleTimeRangeChange function updates the extraFormData and filterState with the new time range.

To ensure the filterState.value is set from the URL parameter, you need to initialize filterState.value with the __time_range value from the URL when the component mounts. This part of the code is not shown in the provided context, so you need to ensure that the initialization logic is correctly implemented elsewhere in your application.

Additionally, the useSimpleTabFilterProps function in superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx shows how the time range is handled in the form data:

const onDatePickerChange = (columnName: string, timeRange: string) => {
  props.onChange(
    props.adhocFilter.duplicateWith({
      subject: columnName,
      operator: Operators.TemporalRange,
      comparator: timeRange,
      expressionType: ExpressionTypes.Simple,
    }),
  );
};

This function ensures that the time range and other time-related configurations are correctly set in the form data, which can then be used to initialize the filterState.value with the __time_range value from the URL ^[1][2].

To continue talking to Dosu, mention @dosu.