feat: example of a customized slider component to hide it when a parameter value is false

src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericDateInput.js

@@ -1,6 +1,7 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
 import React from 'react';
+import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { Grid } from '@mui/material';
@@ -16,6 +17,21 @@ export const GenericDateInput = ({ parameterData, context, parameterValue, setPa
   const { t } = useTranslation();
   const minDate = parameterData.minValue ? new Date(parameterData.minValue) : undefined;
   const maxDate = parameterData.maxValue ? new Date(parameterData.maxValue) : undefined;
+
+  // Example of customized component to behave differently based on the value of another parameter in the dataset
+  // creation dialog. Note that in the context of the dataset creation dialog, in React Hook Form data, the parameter
+  // ids are prefixed with the id of the datasource run template followed by a dot character (e.g.
+  // my_datasource_etl.my_parameter). If the id of the run template contains a dot, it is replaced by "__DOT__" to
+  // prevent accidental conflicts with parameter and run template ids
+  const watchedValue = useWatch({
+    name: '__DOT__////etl_sub_dataset_by_filter.etl_param_subdataset_filter_start_date',
+  });
+  // Id of the parameter with a custom behavior, without the custom prefix that is used only for RHF data
+  if (parameterData.id === 'etl_param_subdataset_filter_end_date') {
+    // Example of how to hide the end date component if the start date is after 2026-01-01
+    if (watchedValue >= new Date('2026-01-01')) return null;
+  }
+
   const dateProps = {
     disabled: !context.editMode,
     id: `date-input-${parameterData.id}`,

src/components/ScenarioParameters/components/ScenarioParametersInputs/GenericSliderInput.js

@@ -1,6 +1,7 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
 import React from 'react';
+import { useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { Grid } from '@mui/material';
@@ -17,6 +18,10 @@ export const GenericSliderInput = ({ parameterData, context, parameterValue, set
   const max = getMaxValue(parameterData);
   const { t } = useTranslation();
 
+  // Example of customized component to behave differently based on the value of another scenario parameter
+  const watchedValue = useWatch({ name: 'currency_used' }); // "currency_used" is the id of the parameter to watch
+  if (watchedValue === false) return null; // Do not render the slider component if the parameter value is false
+
   return (
     <Grid item xs={3}>
       <BasicSliderInput