handle errors better

disable simulate button when times are invalid
NASA-AMMOS · Jan 17, 2024 · fcb817d · fcb817d
1 parent 0b34362
commit fcb817d
Showing 1 changed file with 39 additions and 28 deletions.
diff --git a/src/components/simulation/SimulationPanel.svelte b/src/components/simulation/SimulationPanel.svelte
@@ -53,6 +53,7 @@
 
   const updatePermissionError = 'You do not have permission to update this simulation';
 
+  let buttonTooltip: string = '';
   let endTimeDoy: string;
   let endTimeDoyField: FieldStore<string>;
   let formParameters: FormParameter[] = [];
@@ -65,6 +66,13 @@
   let modelParametersMap: ParametersMap = {};
   let filteredSimulationDatasets: SimulationDataset[] = [];
 
+  function validateStartTimeField(startTime: string) {
+    return validateStartTime(startTime, $endTimeDoyField.value, 'Simulation');
+  }
+  function validateEndTimeField(endTime: string) {
+    return validateEndTime($startTimeDoyField.value, endTime, 'Simulation');
+  }
+
   $: if (user !== null && $plan !== null) {
     hasRunPermission = featurePermissions.simulation.canRun(user, $plan, $plan.model) && !$planReadOnly;
     hasUpdatePermission = featurePermissions.simulation.canUpdate(user, $plan) && !$planReadOnly;
@@ -75,22 +83,14 @@
         ? getDoyTime(new Date($simulation.simulation_start_time))
         : $plan.start_time_doy;
   }
-  $: startTimeDoyField = field<string>(startTimeDoy, [
-    required,
-    timestamp,
-    (startTime: string) => validateStartTime(startTime, endTimeDoy, 'Simulation'),
-  ]);
+  $: startTimeDoyField = field<string>(startTimeDoy, [required, timestamp, validateStartTimeField]);
   $: if ($plan) {
     endTimeDoy =
       $simulation && $simulation.simulation_end_time
         ? getDoyTime(new Date($simulation.simulation_end_time))
         : $plan.end_time_doy;
   }
-  $: endTimeDoyField = field<string>(endTimeDoy, [
-    required,
-    timestamp,
-    (endTime: string) => validateEndTime(startTimeDoy, endTime, 'Simulation'),
-  ]);
+  $: endTimeDoyField = field<string>(endTimeDoy, [required, timestamp, validateEndTimeField]);
   $: numOfUserChanges = formParameters.reduce((previousHasChanges: number, formParameter) => {
     return /user/.test(formParameter.valueSource) ? previousHasChanges + 1 : previousHasChanges;
   }, 0);
@@ -118,6 +118,13 @@
       }
     });
   }
+  $: if ($startTimeDoyField.invalid || $endTimeDoyField.invalid) {
+    buttonTooltip = 'Simulation start and end times are not correct';
+  } else if ($simulationStatus === Status.Complete || $simulationStatus === Status.Failed) {
+    buttonTooltip = 'Simulation up-to-date';
+  } else {
+    buttonTooltip = '';
+  }
 
   $: isFilteredBySnapshot = $planSnapshot !== null;
 
@@ -230,43 +237,49 @@
     isFilteredBySnapshot = !isFilteredBySnapshot;
   }
 
-  function updateStartTime(doyString: string) {
+  function updateStartEndTimes({ endDoyString, startDoyString }: { endDoyString?: string; startDoyString?: string }) {
     if ($simulation !== null && $plan !== null) {
-      const newSimulation: Simulation = { ...$simulation, simulation_start_time: doyString };
-      effects.updateSimulation($plan, newSimulation, user);
-    }
-  }
+      const newSimulation: Simulation = {
+        ...$simulation,
+        ...(startDoyString ? { simulation_start_time: startDoyString } : {}),
+        ...(endDoyString ? { simulation_end_time: endDoyString } : {}),
+      };
 
-  function updateEndTime(doyString: string) {
-    if ($simulation !== null && $plan !== null) {
-      const newSimulation: Simulation = { ...$simulation, simulation_end_time: doyString };
       effects.updateSimulation($plan, newSimulation, user);
     }
   }
 
-  function onUpdateStartTime() {
+  async function onUpdateStartTime() {
     if ($startTimeDoyField.valid && startTimeDoy !== $startTimeDoyField.value) {
-      updateStartTime($startTimeDoyField.value);
+      await endTimeDoyField.validateAndSet($endTimeDoyField.value);
+      updateStartEndTimes({
+        ...($endTimeDoyField.valid ? { endDoyString: $endTimeDoyField.value } : {}),
+        startDoyString: $startTimeDoyField.value,
+      });
     }
   }
 
-  function onUpdateEndTime() {
+  async function onUpdateEndTime() {
     if ($endTimeDoyField.valid && endTimeDoy !== $endTimeDoyField.value) {
-      updateEndTime($endTimeDoyField.value);
+      await startTimeDoyField.validateAndSet($startTimeDoyField.value);
+      updateStartEndTimes({
+        endDoyString: $endTimeDoyField.value,
+        ...($startTimeDoyField.valid ? { startDoyString: $startTimeDoyField.value } : {}),
+      });
     }
   }
 
   async function onPlanStartTimeClick() {
     if ($plan) {
       await startTimeDoyField.validateAndSet($plan.start_time_doy);
-      updateStartTime($startTimeDoyField.value);
+      updateStartEndTimes({ startDoyString: $startTimeDoyField.value });
     }
   }
 
   async function onPlanEndTimeClick() {
     if ($plan) {
       await endTimeDoyField.validateAndSet($plan.end_time_doy);
-      updateEndTime($endTimeDoyField.value);
+      updateStartEndTimes({ endDoyString: $endTimeDoyField.value });
     }
   }
 
@@ -280,10 +293,8 @@
     <GridMenu {gridSection} title="Simulation" />
     <PanelHeaderActions>
       <PanelHeaderActionButton
-        disabled={!$enableSimulation}
-        tooltipContent={$simulationStatus === Status.Complete || $simulationStatus === Status.Failed
-          ? 'Simulation up-to-date'
-          : ''}
+        disabled={!$enableSimulation || $startTimeDoyField.invalid || $endTimeDoyField.invalid}
+        tooltipContent={buttonTooltip}
         title="Simulate"
         showLabel
         use={[