From 70664553c2ef80a1098b6be40c669b4275813396 Mon Sep 17 00:00:00 2001
From: Aaron Plave <aaron.plave@jpl.nasa.gov>
Date: Fri, 19 Jul 2024 15:26:20 -0700
Subject: [PATCH] Refactor invalid date handling

---
 .../ActivityDirectiveChangelog.svelte         | 12 +++++----
 .../activity/ActivityDirectiveForm.svelte     | 10 +++----
 .../ActivityDirectivesTablePanel.svelte       |  7 ++---
 .../activity/ActivitySpanForm.svelte          |  9 ++++---
 .../activity/ActivitySpansTablePanel.svelte   | 10 ++++---
 .../ConstraintViolationButton.svelte          | 12 ++++++---
 .../constraints/ConstraintsPanel.svelte       | 24 ++++++++---------
 src/components/plan/PlanForm.svelte           | 14 +++++-----
 .../simulation/SimulationEventsPanel.svelte   | 14 +++++-----
 .../SimulationHistoryDataset.svelte           | 15 ++++++-----
 .../simulation/SimulationPanel.svelte         | 26 +++++++------------
 src/components/timeline/Timeline.svelte       | 16 +++++++-----
 .../timeline/TimelineCursors.svelte           |  4 +--
 .../timeline/TimelineHistogram.svelte         |  9 +++++--
 src/components/timeline/Tooltip.svelte        | 15 +++++------
 src/constants/time.ts                         |  1 +
 src/routes/plans/+page.svelte                 | 21 ++++++++++-----
 src/utilities/time.ts                         | 11 ++++++++
 18 files changed, 128 insertions(+), 102 deletions(-)
 create mode 100644 src/constants/time.ts

diff --git a/src/components/activity/ActivityDirectiveChangelog.svelte b/src/components/activity/ActivityDirectiveChangelog.svelte
index 1e168dbc02..c4011255af 100644
--- a/src/components/activity/ActivityDirectiveChangelog.svelte
+++ b/src/components/activity/ActivityDirectiveChangelog.svelte
@@ -16,7 +16,7 @@
   import effects from '../../utilities/effects';
   import { permissionHandler } from '../../utilities/permissionHandler';
   import { featurePermissions } from '../../utilities/permissions';
-  import { convertUsToDurationString, getUnixEpochTimeFromInterval } from '../../utilities/time';
+  import { convertUsToDurationString, formatDate, getUnixEpochTimeFromInterval } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
 
   const dispatch = createEventDispatcher<{
@@ -49,7 +49,7 @@
   let effectiveRevisionArguments: (ArgumentsMap | undefined)[];
   $: effectiveRevisionArguments = [];
 
-  function formatDate(dateString: string) {
+  function formatRevisionDate(dateString: string) {
     return new Date(dateString).toLocaleString(undefined, {
       day: 'numeric',
       hour: 'numeric',
@@ -113,11 +113,13 @@
     // Manually check remaining fields that could have changed and require extra formatting
 
     if (current.start_offset !== previous.start_offset) {
-      const currentStartTime = $plugins.time.primary.format(
+      const currentStartTime = formatDate(
         new Date(getUnixEpochTimeFromInterval(planStartTimeYmd, current.start_offset)),
+        $plugins.time.primary.format,
       );
-      const previousStartTime = $plugins.time.primary.format(
+      const previousStartTime = formatDate(
         new Date(getUnixEpochTimeFromInterval(planStartTimeYmd, previous.start_offset)),
+        $plugins.time.primary.format,
       );
 
       differences[`Start Time (${$plugins.time.primary.label})`] = {
@@ -245,7 +247,7 @@
     {#if activityRevisionChangeMap.length}
       {#each activityRevisions as revision, i}
         <div class="activity-revision">
-          <div class="date st-typography-medium">{formatDate(revision.changed_at)}</div>
+          <div class="date st-typography-medium">{formatRevisionDate(revision.changed_at)}</div>
           <div
             class="change-summary st-typography-body"
             use:tooltip={{ content: activityRevisionChangeMap[i].name, placement: 'top' }}
diff --git a/src/components/activity/ActivityDirectiveForm.svelte b/src/components/activity/ActivityDirectiveForm.svelte
index 8aee467ac0..0a2ed44e1d 100644
--- a/src/components/activity/ActivityDirectiveForm.svelte
+++ b/src/components/activity/ActivityDirectiveForm.svelte
@@ -38,7 +38,7 @@
   import { permissionHandler } from '../../utilities/permissionHandler';
   import { featurePermissions } from '../../utilities/permissions';
   import { pluralize } from '../../utilities/text';
-  import { getDoyTime, getIntervalFromDoyRange, getUnixEpochTimeFromInterval } from '../../utilities/time';
+  import { formatDate, getDoyTime, getIntervalFromDoyRange, getUnixEpochTimeFromInterval } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import { required } from '../../utilities/validators';
   import Collapse from '../Collapse.svelte';
@@ -84,7 +84,7 @@
   let numOfUserChanges: number = 0;
   let parameterErrorMap: Record<string, string[]> = {};
   let parametersWithErrorsCount: number = 0;
-  let startTime: string | null;
+  let startTime: string;
   let startTimeField: FieldStore<string>;
 
   $: if (user !== null && $plan !== null) {
@@ -102,12 +102,12 @@
       planStartTimeYmd,
       revision ? revision.start_offset : activityDirective.start_offset,
     );
-    startTime = $plugins.time.primary.format(new Date(startTimeMs));
+    startTime = formatDate(new Date(startTimeMs), $plugins.time.primary.format);
   }
 
-  $: startTimeField = field<string>(startTime ?? 'Invalid Date', [required, $plugins.time.primary.validate]);
+  $: startTimeField = field<string>(startTime, [required, $plugins.time.primary.validate]);
   $: activityNameField = field<string>(activityDirective.name);
-  $: startTimeField.validateAndSet(startTime ?? 'Invalid Date');
+  $: startTimeField.validateAndSet(startTime);
   $: activityNameField.validateAndSet(activityDirective.name);
 
   $: if (activityType && activityDirective.arguments) {
diff --git a/src/components/activity/ActivityDirectivesTablePanel.svelte b/src/components/activity/ActivityDirectivesTablePanel.svelte
index d489da32a4..9dfc2087a3 100644
--- a/src/components/activity/ActivityDirectivesTablePanel.svelte
+++ b/src/components/activity/ActivityDirectivesTablePanel.svelte
@@ -11,6 +11,7 @@
     ValueGetterParams,
   } from 'ag-grid-community';
   import { debounce } from 'lodash-es';
+  import { InvalidDate } from '../../constants/time';
   import { activityDirectivesMap, selectActivity, selectedActivityDirectiveId } from '../../stores/activities';
   import { activityErrorRollupsMap } from '../../stores/errors';
   import { plan, planReadOnly } from '../../stores/plan';
@@ -20,7 +21,7 @@
   import type { User } from '../../types/app';
   import type { AutoSizeColumns, ViewGridSection, ViewTable } from '../../types/view';
   import { filterEmpty } from '../../utilities/generic';
-  import { getUnixEpochTimeFromInterval } from '../../utilities/time';
+  import { formatDate, getUnixEpochTimeFromInterval } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import GridMenu from '../menus/GridMenu.svelte';
   import DataGrid from '../ui/DataGrid/DataGrid.svelte';
@@ -180,12 +181,12 @@
       sortable: true,
       valueGetter: (params: ValueGetterParams<ActivityDirective>) => {
         if ($plan && params && params.data && typeof params.data.start_time_ms === 'number') {
-          return $plugins.time.primary.format(new Date(params.data.start_time_ms)) ?? 'Invalid Date';
+          return formatDate(new Date(params.data.start_time_ms), $plugins.time.primary.format);
         }
         return '';
       },
       cellRenderer: (params: ICellRendererParams<ActivityDirective>) => {
-        if (params.value !== 'Invalid Date') {
+        if (params.value !== InvalidDate) {
           return params.value;
         }
         const div = document.createElement('div');
diff --git a/src/components/activity/ActivitySpanForm.svelte b/src/components/activity/ActivitySpanForm.svelte
index 49211d7dda..23cc37d016 100644
--- a/src/components/activity/ActivitySpanForm.svelte
+++ b/src/components/activity/ActivitySpanForm.svelte
@@ -11,6 +11,7 @@
   import { getSpanRootParent } from '../../utilities/activities';
   import effects from '../../utilities/effects';
   import { getFormParameters } from '../../utilities/parameters';
+  import { formatDate } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import Collapse from '../Collapse.svelte';
   import Input from '../form/Input.svelte';
@@ -36,16 +37,16 @@
   let rootSpan: Span | null;
   let rootSpanHasChildren: boolean;
   let seqId: string | null;
-  let startTime: string | null;
+  let startTime: string;
 
   $: activityType = (activityTypes ?? []).find(({ name: activityTypeName }) => span.type === activityTypeName) ?? null;
   $: rootSpan = getSpanRootParent(spansMap, span.id);
   $: rootSpanHasChildren = (rootSpan && spanUtilityMaps.spanIdToChildIdsMap[rootSpan.id]?.length > 0) ?? false;
 
-  $: startTime = $plugins.time.primary.format(new Date(span.startMs));
+  $: startTime = formatDate(new Date(span.startMs), $plugins.time.primary.format);
 
   $: if (span.duration) {
-    endTime = $plugins.time.primary.format(new Date(span.endMs));
+    endTime = formatDate(new Date(span.endMs), $plugins.time.primary.format);
   } else {
     endTime = null;
   }
@@ -170,7 +171,7 @@
         <label use:tooltip={{ content: 'Start Time', placement: 'top' }} for="startTime">
           Start Time ({$plugins.time.primary.label})
         </label>
-        <input class="st-input w-100" disabled name="startTime" value={startTime ?? 'Invalid Date'} />
+        <input class="st-input w-100" disabled name="startTime" value={startTime} />
       </Input>
 
       <Input layout="inline">
diff --git a/src/components/activity/ActivitySpansTablePanel.svelte b/src/components/activity/ActivitySpansTablePanel.svelte
index d81ed81318..86bef722d4 100644
--- a/src/components/activity/ActivitySpansTablePanel.svelte
+++ b/src/components/activity/ActivitySpansTablePanel.svelte
@@ -5,6 +5,7 @@
   import TableFitIcon from '@nasa-jpl/stellar/icons/table_fit.svg?component';
   import type { ColDef, ColumnResizedEvent, ColumnState, ICellRendererParams } from 'ag-grid-community';
   import { debounce } from 'lodash-es';
+  import { InvalidDate } from '../../constants/time';
   import { selectActivity } from '../../stores/activities';
   import { plugins } from '../../stores/plugins';
   import { selectedSpanId, spans } from '../../stores/simulation';
@@ -12,6 +13,7 @@
   import type { Span } from '../../types/simulation';
   import type { AutoSizeColumns, ViewGridSection, ViewTable } from '../../types/view';
   import { filterEmpty } from '../../utilities/generic';
+  import { formatDate } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import GridMenu from '../menus/GridMenu.svelte';
   import type DataGrid from '../ui/DataGrid/DataGrid.svelte';
@@ -91,12 +93,12 @@
       valueGetter: params => {
         if (params && params.data && typeof params.data.startMs === 'number') {
           /* TODO could use short format here to skip ms but do we need short(er) format somewhere else? */
-          return $plugins.time.primary.format(new Date(params.data.startMs)) ?? 'Invalid Date';
+          return formatDate(new Date(params.data.startMs), $plugins.time.primary.format);
         }
         return '';
       },
       cellRenderer: (params: ICellRendererParams<Span>) => {
-        if (params.value !== 'Invalid Date') {
+        if (params.value !== InvalidDate) {
           return params.value;
         }
         const div = document.createElement('div');
@@ -119,12 +121,12 @@
       sortable: true,
       valueGetter: params => {
         if (params && params.data && typeof params.data.endMs === 'number') {
-          return $plugins.time.primary.format(new Date(params.data.endMs)) ?? 'Invalid Date';
+          return formatDate(new Date(params.data.endMs), $plugins.time.primary.format);
         }
         return '';
       },
       cellRenderer: (params: ICellRendererParams<Span>) => {
-        if (params.value !== 'Invalid Date') {
+        if (params.value !== InvalidDate) {
           return params.value;
         }
         const div = document.createElement('div');
diff --git a/src/components/constraints/ConstraintViolationButton.svelte b/src/components/constraints/ConstraintViolationButton.svelte
index 7db7282ee6..940a46118e 100644
--- a/src/components/constraints/ConstraintViolationButton.svelte
+++ b/src/components/constraints/ConstraintViolationButton.svelte
@@ -5,13 +5,17 @@
   import { viewTimeRange } from '../../stores/plan';
   import { plugins } from '../../stores/plugins';
   import type { TimeRange } from '../../types/timeline';
-  import { getDoyTimeComponents, validateTime } from '../../utilities/time';
+  import { formatDate, getDoyTimeComponents, validateTime } from '../../utilities/time';
 
   export let window: TimeRange;
 
   let isDoyPattern = false;
+  let startDateString: string = '';
+  let endDateString: string = '';
 
-  $: isDoyPattern = validateTime($plugins.time.primary.format(new Date(window.start)) ?? '', TimeTypes.ABSOLUTE);
+  $: startDateString = formatDate(new Date(window.start), $plugins.time.primary.format);
+  $: endDateString = formatDate(new Date(window.end), $plugins.time.primary.format);
+  $: isDoyPattern = validateTime(startDateString, TimeTypes.ABSOLUTE);
 
   function zoomToViolation(window: TimeRange): void {
     $viewTimeRange = window;
@@ -32,7 +36,7 @@
       {startYear}-<span class="st-typography-bold">{startDoy}</span> T {startHours}:{startMins}:{startSecs}.{startMsecs}
       {$plugins.time.primary.label}
     {:else}
-      {$plugins.time.primary.format(new Date(window.start)) ?? 'Invalid Date'}
+      {startDateString}
     {/if}
   </div>
   <div class="separator">–</div>
@@ -49,7 +53,7 @@
       {endYear}-<span class="st-typography-bold">{endDoy}</span> T {endHours}:{endMins}:{endSecs}.{endMsecs}
       {$plugins.time.primary.label}
     {:else}
-      {$plugins.time.primary.format(new Date(window.start)) ?? 'Invalid Date'}
+      {endDateString}
     {/if}
   </div>
 </button>
diff --git a/src/components/constraints/ConstraintsPanel.svelte b/src/components/constraints/ConstraintsPanel.svelte
index 3d875ccf8e..d89988d375 100644
--- a/src/components/constraints/ConstraintsPanel.svelte
+++ b/src/components/constraints/ConstraintsPanel.svelte
@@ -37,7 +37,7 @@
   import effects from '../../utilities/effects';
   import { permissionHandler } from '../../utilities/permissionHandler';
   import { featurePermissions } from '../../utilities/permissions';
-  import { convertDoyToYmd } from '../../utilities/time';
+  import { convertDoyToYmd, formatDate } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import { required } from '../../utilities/validators';
   import CollapsibleListControls from '../CollapsibleListControls.svelte';
@@ -55,27 +55,27 @@
   let showAll: boolean = true;
   let filterText: string = '';
   let filteredConstraints: ConstraintPlanSpec[] = [];
-  let endTime: string | null;
+  let endTime: string;
   let endTimeField: FieldStore<string>;
   let numOfPrivateConstraints: number = 0;
-  let startTime: string | null;
+  let startTime: string;
   let startTimeField: FieldStore<string>;
   let showFilters: boolean = false;
   let showConstraintsWithNoViolations: boolean = true;
   let constraintToConstraintResponseMap: Record<ConstraintDefinition['constraint_id'], ConstraintResponse> = {};
 
   $: if ($plan) {
-    startTime = $plugins.time.primary.format(new Date($plan.start_time));
+    startTime = formatDate(new Date($plan.start_time), $plugins.time.primary.format);
     const endTimeYmd = convertDoyToYmd($plan.end_time_doy);
     if (endTimeYmd) {
-      endTime = $plugins.time.primary.format(new Date(endTimeYmd));
+      endTime = formatDate(new Date(endTimeYmd), $plugins.time.primary.format);
     } else {
       endTime = '';
     }
   }
 
-  $: startTimeField = field<string>(startTime ?? 'Invalid Date', [required, $plugins.time.primary.validate]);
-  $: endTimeField = field<string>(endTime ?? 'Invalid Date', [required, $plugins.time.primary.validate]);
+  $: startTimeField = field<string>(startTime, [required, $plugins.time.primary.validate]);
+  $: endTimeField = field<string>(endTime, [required, $plugins.time.primary.validate]);
   $: startTimeMs = typeof startTime === 'string' ? $plugins.time.primary.parse(startTime)?.getTime() : null;
   $: endTimeMs = typeof endTime === 'string' ? $plugins.time.primary.parse(endTime)?.getTime() : null;
   $: if ($allowedConstraintSpecs && $constraintResponseMap && startTimeMs && endTimeMs) {
@@ -168,15 +168,15 @@
   }
 
   async function setTimeBoundsToView() {
-    await startTimeField.validateAndSet($plugins.time.primary.format(new Date($viewTimeRange.start)) ?? 'Invalid Date');
-    await endTimeField.validateAndSet($plugins.time.primary.format(new Date($viewTimeRange.end)) ?? 'Invalid Date');
+    await startTimeField.validateAndSet(formatDate(new Date($viewTimeRange.start), $plugins.time.primary.format));
+    await endTimeField.validateAndSet(formatDate(new Date($viewTimeRange.end), $plugins.time.primary.format));
     onUpdateStartTime();
     onUpdateEndTime();
   }
 
   async function onPlanStartTimeClick() {
     if ($plan) {
-      await startTimeField.validateAndSet($plugins.time.primary.format(new Date($plan.start_time)) ?? 'Invalid Date');
+      await startTimeField.validateAndSet(formatDate(new Date($plan.start_time), $plugins.time.primary.format));
       onUpdateStartTime();
     }
   }
@@ -185,8 +185,8 @@
     if ($plan) {
       const endTimeYmd = convertDoyToYmd($plan.end_time_doy);
       if (endTimeYmd) {
-        endTime = $plugins.time.primary.format(new Date(endTimeYmd));
-        await endTimeField.validateAndSet(endTime ?? 'Invalid Date');
+        endTime = formatDate(new Date(endTimeYmd), $plugins.time.primary.format);
+        await endTimeField.validateAndSet(endTime);
         onUpdateEndTime();
       }
     }
diff --git a/src/components/plan/PlanForm.svelte b/src/components/plan/PlanForm.svelte
index 795c7ff5b4..af576be102 100644
--- a/src/components/plan/PlanForm.svelte
+++ b/src/components/plan/PlanForm.svelte
@@ -22,7 +22,7 @@
   import { permissionHandler } from '../../utilities/permissionHandler';
   import { featurePermissions } from '../../utilities/permissions';
   import { getPlanForTransfer } from '../../utilities/plan';
-  import { convertDoyToYmd, getShortISOForDate } from '../../utilities/time';
+  import { convertDoyToYmd, formatDate, getShortISOForDate } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import { required, unique } from '../../utilities/validators';
   import Collapse from '../Collapse.svelte';
@@ -57,16 +57,16 @@
     ),
   ]);
   let planExportProgress: number | null = null;
-  let planStartTime: string | null = '';
-  let planEndTime: string | null = '';
+  let planStartTime: string = '';
+  let planEndTime: string = '';
 
   $: permissionError = $planReadOnly ? PlanStatusMessages.READ_ONLY : 'You do not have permission to edit this plan.';
   $: if (plan) {
     hasCreateSnapshotPermission = featurePermissions.planSnapshot.canCreate(user, plan, plan.model) && !$planReadOnly;
-    planStartTime = $plugins.time.primary.format(new Date(plan.start_time));
+    planStartTime = formatDate(new Date(plan.start_time), $plugins.time.primary.format);
     const endTime = convertDoyToYmd(plan.end_time_doy);
     if (endTime) {
-      planEndTime = $plugins.time.primary.format(new Date(endTime));
+      planEndTime = formatDate(new Date(endTime), $plugins.time.primary.format);
     } else {
       planEndTime = '';
     }
@@ -278,13 +278,13 @@
           >
             Start Time ({$plugins.time.primary.label})
           </label>
-          <input class="st-input w-100" disabled name="startTime" value={planStartTime ?? 'Invalid Date'} />
+          <input class="st-input w-100" disabled name="startTime" value={planStartTime} />
         </Input>
         <Input layout="inline">
           <label use:tooltip={{ content: `End Time (${$plugins.time.primary.label})`, placement: 'top' }} for="endTime">
             End Time ({$plugins.time.primary.label})
           </label>
-          <input class="st-input w-100" disabled name="endTime" value={planEndTime ?? 'Invalid Date'} />
+          <input class="st-input w-100" disabled name="endTime" value={planEndTime} />
         </Input>
         <Input layout="inline">
           <label use:tooltip={{ content: 'Owner', placement: 'top' }} for="owner">Owner</label>
diff --git a/src/components/simulation/SimulationEventsPanel.svelte b/src/components/simulation/SimulationEventsPanel.svelte
index ca6e2f807f..22402cce7a 100644
--- a/src/components/simulation/SimulationEventsPanel.svelte
+++ b/src/components/simulation/SimulationEventsPanel.svelte
@@ -5,13 +5,14 @@
   import TableFitIcon from '@nasa-jpl/stellar/icons/table_fit.svg?component';
   import type { ColDef, ColumnResizedEvent, ColumnState, ICellRendererParams } from 'ag-grid-community';
   import { debounce } from 'lodash-es';
+  import { InvalidDate } from '../../constants/time';
   import { plugins } from '../../stores/plugins';
   import { simulationDataset, simulationEvents } from '../../stores/simulation';
   import { view, viewUpdateSimulationEventsTable } from '../../stores/views';
   import type { SimulationEvent } from '../../types/simulation';
   import type { AutoSizeColumns, ViewGridSection, ViewTable } from '../../types/view';
   import { filterEmpty } from '../../utilities/generic';
-  import { getUnixEpochTimeFromInterval } from '../../utilities/time';
+  import { formatDate, getUnixEpochTimeFromInterval } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import ActivityTableMenu from '../activity/ActivityTableMenu.svelte';
   import GridMenu from '../menus/GridMenu.svelte';
@@ -47,18 +48,15 @@
       sortable: true,
       valueGetter: params => {
         if ($simulationDataset && $simulationDataset.simulation_start_time && params.data) {
-          return (
-            $plugins.time.primary.format(
-              new Date(
-                getUnixEpochTimeFromInterval($simulationDataset?.simulation_start_time, params.data.start_offset),
-              ),
-            ) ?? 'Invalid Date'
+          return formatDate(
+            new Date(getUnixEpochTimeFromInterval($simulationDataset?.simulation_start_time, params.data.start_offset)),
+            $plugins.time.primary.format,
           );
         }
         return '';
       },
       cellRenderer: (params: ICellRendererParams<SimulationEvent>) => {
-        if (params.value !== 'Invalid Date') {
+        if (params.value !== InvalidDate) {
           return params.value;
         }
         const div = document.createElement('div');
diff --git a/src/components/simulation/SimulationHistoryDataset.svelte b/src/components/simulation/SimulationHistoryDataset.svelte
index b4165e47cc..6b05d13a75 100644
--- a/src/components/simulation/SimulationHistoryDataset.svelte
+++ b/src/components/simulation/SimulationHistoryDataset.svelte
@@ -3,6 +3,7 @@
 <script lang="ts">
   import CancelIcon from '@nasa-jpl/stellar/icons/prohibited.svg?component';
   import { createEventDispatcher } from 'svelte';
+  import { InvalidDate } from '../../constants/time';
   import { Status } from '../../enums/status';
   import { planReadOnly } from '../../stores/plan';
   import { plugins } from '../../stores/plugins';
@@ -17,7 +18,7 @@
     getSimulationStatus,
     getSimulationTimestamp,
   } from '../../utilities/simulation';
-  import { getUnixEpochTimeFromInterval, removeDateStringMilliseconds } from '../../utilities/time';
+  import { formatDate, getUnixEpochTimeFromInterval, removeDateStringMilliseconds } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
   import Card from '../ui/Card.svelte';
   import StatusBadge from '../ui/StatusBadge.svelte';
@@ -37,8 +38,8 @@
   let simulationBoundsVizRangeLeft = 0;
   let simulationBoundsVizRangeWidth = 0;
   let simulationExtentVizRangeWidth = 0;
-  let startTimeText: string | null = '';
-  let endTimeText: string | null = '';
+  let startTimeText: string = '';
+  let endTimeText: string = '';
   let progress = 0;
   let extent: string | null = '';
   let status: Status | null = null;
@@ -62,9 +63,9 @@
       if (simulationStartTimeMS === planStartTimeMs) {
         startTimeText = 'Plan Start';
       } else {
-        startTimeText = $plugins.time.primary.format(new Date(simulationDataset.simulation_start_time));
+        startTimeText = formatDate(new Date(simulationDataset.simulation_start_time), $plugins.time.primary.format);
 
-        if (typeof startTimeText === 'string') {
+        if (startTimeText !== InvalidDate) {
           startTimeText = removeDateStringMilliseconds(startTimeText);
         }
       }
@@ -88,10 +89,10 @@
         if (simulationEndTimeMS === planEndTimeMs) {
           endTimeText = 'Plan End';
         } else {
-          endTimeText = $plugins.time.primary.format(new Date(simulationDataset.simulation_end_time));
+          endTimeText = formatDate(new Date(simulationDataset.simulation_end_time), $plugins.time.primary.format);
 
           // Remove milliseconds if DOY-like time
-          if (typeof endTimeText === 'string') {
+          if (endTimeText !== InvalidDate) {
             endTimeText = removeDateStringMilliseconds(endTimeText);
           }
         }
diff --git a/src/components/simulation/SimulationPanel.svelte b/src/components/simulation/SimulationPanel.svelte
index b3a80a2014..e4951af3cf 100644
--- a/src/components/simulation/SimulationPanel.svelte
+++ b/src/components/simulation/SimulationPanel.svelte
@@ -36,7 +36,7 @@
   import { permissionHandler } from '../../utilities/permissionHandler';
   import { featurePermissions } from '../../utilities/permissions';
   import { getSimulationQueuePosition } from '../../utilities/simulation';
-  import { getDoyTime } from '../../utilities/time';
+  import { formatDate, getDoyTime } from '../../utilities/time';
   import { required, validateStartTime } from '../../utilities/validators';
   import Collapse from '../Collapse.svelte';
   import DatePickerField from '../form/DatePickerField.svelte';
@@ -57,14 +57,14 @@
 
   let simulateButtonTooltip: string = '';
   let reSimulateButtonTooltip: string = '';
-  let endTime: string | null;
+  let endTime: string;
   let endTimeField: FieldStore<string>;
   let formParameters: FormParameter[] = [];
   let hasRunPermission: boolean = false;
   let hasUpdatePermission: boolean = false;
   let isFilteredBySnapshot: boolean = false;
   let numOfUserChanges: number = 0;
-  let startTime: string | null;
+  let startTime: string;
   let startTimeField: FieldStore<string>;
   let modelParametersMap: ParametersMap = {};
   let filteredSimulationDatasets: SimulationDataset[] = [];
@@ -100,25 +100,17 @@
     if ($simulation && $simulation.simulation_start_time) {
       startTimeDate = new Date($simulation.simulation_start_time);
     }
-    startTime = $plugins.time.primary.format(startTimeDate);
+    startTime = formatDate(startTimeDate, $plugins.time.primary.format);
 
     let endTimeDate = new Date($planEndTimeMs);
     if ($simulation && $simulation.simulation_end_time) {
       endTimeDate = new Date($simulation.simulation_end_time);
     }
-    endTime = $plugins.time.primary.format(endTimeDate);
+    endTime = formatDate(endTimeDate, $plugins.time.primary.format);
   }
 
-  $: startTimeField = field<string>(startTime ?? 'Invalid Date', [
-    required,
-    $plugins.time.primary.validate,
-    validateStartTimeField,
-  ]);
-  $: endTimeField = field<string>(endTime ?? 'Invalid Date', [
-    required,
-    $plugins.time.primary.validate,
-    validateEndTimeField,
-  ]);
+  $: startTimeField = field<string>(startTime, [required, $plugins.time.primary.validate, validateStartTimeField]);
+  $: endTimeField = field<string>(endTime, [required, $plugins.time.primary.validate, validateEndTimeField]);
   $: numOfUserChanges = formParameters.reduce((previousHasChanges: number, formParameter) => {
     return /user/.test(formParameter.valueSource) ? previousHasChanges + 1 : previousHasChanges;
   }, 0);
@@ -315,14 +307,14 @@
 
   async function onPlanStartTimeClick() {
     if ($plan) {
-      await startTimeField.validateAndSet($plugins.time.primary.format(new Date($planStartTimeMs)) ?? 'Invalid Date');
+      await startTimeField.validateAndSet(formatDate(new Date($planStartTimeMs), $plugins.time.primary.format));
       updateStartEndTimes({ startString: $startTimeField.value });
     }
   }
 
   async function onPlanEndTimeClick() {
     if ($plan) {
-      await endTimeField.validateAndSet($plugins.time.primary.format(new Date($planEndTimeMs)) ?? 'Invalid Date');
+      await endTimeField.validateAndSet(formatDate(new Date($planEndTimeMs), $plugins.time.primary.format));
       updateStartEndTimes({ endString: $endTimeField.value });
     }
   }
diff --git a/src/components/timeline/Timeline.svelte b/src/components/timeline/Timeline.svelte
index 8b256c660a..1ac644e730 100644
--- a/src/components/timeline/Timeline.svelte
+++ b/src/components/timeline/Timeline.svelte
@@ -6,6 +6,7 @@
   import { throttle } from 'lodash-es';
   import { afterUpdate, createEventDispatcher, onDestroy, onMount, tick } from 'svelte';
   import { SOURCES, TRIGGERS, dndzone } from 'svelte-dnd-action';
+  import { InvalidDate } from '../../constants/time';
   import { plugins } from '../../stores/plugins';
   import { viewUpdateTimeline } from '../../stores/views';
   import type { ActivityDirectiveId, ActivityDirectivesMap } from '../../types/activity';
@@ -31,6 +32,7 @@
     XAxisTick,
   } from '../../types/timeline';
   import { clamp } from '../../utilities/generic';
+  import { formatDate } from '../../utilities/time';
   import { MAX_CANVAS_SIZE, TimelineInteractionMode, TimelineLockStatus, getXScale } from '../../utilities/timeline';
   import TimelineRow from './Row.svelte';
   import RowHeaderDragHandleWidth from './RowHeaderDragHandleWidth.svelte';
@@ -139,16 +141,16 @@
   $: xScaleMax = getXScale(xDomainMax, drawWidth);
   $: xScaleView = getXScale(xDomainView, drawWidth);
   $: xScaleViewDuration = viewTimeRange.end - viewTimeRange.start;
-  $: formattedPlanStartTime = $plugins.time.primary.format(xDomainMax[0]);
-  $: formattedPlanEndTime = $plugins.time.primary.format(xDomainMax[1]);
+  $: formattedPlanStartTime = formatDate(xDomainMax[0], $plugins.time.primary.format);
+  $: formattedPlanEndTime = formatDate(xDomainMax[1], $plugins.time.primary.format);
 
   $: if (viewTimeRangeStartDate && viewTimeRangeEndDate && tickCount) {
     xTicksView = $plugins.time.ticks.getTicks(viewTimeRangeStartDate, viewTimeRangeEndDate, tickCount).map(date => {
-      const label = $plugins.time.primary.formatTick(date, xScaleViewDuration, tickCount) ?? 'Invalid Date';
+      const label = $plugins.time.primary.formatTick(date, xScaleViewDuration, tickCount) ?? InvalidDate;
       const additionalLabels = $plugins.time.additional.map(timeSystem => {
         return timeSystem.formatTick
-          ? timeSystem.formatTick(date, xScaleViewDuration, tickCount) ?? 'Invalid Date'
-          : timeSystem.format(date) ?? 'Invalid Date';
+          ? timeSystem.formatTick(date, xScaleViewDuration, tickCount) ?? InvalidDate
+          : timeSystem.format(date) ?? InvalidDate;
       });
       return { additionalLabels, date, label };
     });
@@ -374,8 +376,8 @@
   <div bind:this={timelineHistogramDiv} class="timeline-time-row">
     {#if plan}
       <TimelineTimeDisplay
-        planStartTime={formattedPlanStartTime ?? 'Invalid Date'}
-        planEndTime={formattedPlanEndTime ?? 'Invalid Date'}
+        planStartTime={formattedPlanStartTime}
+        planEndTime={formattedPlanEndTime}
         timeLabel={$plugins.time.primary.label}
         width={timeline?.marginLeft}
       />
diff --git a/src/components/timeline/TimelineCursors.svelte b/src/components/timeline/TimelineCursors.svelte
index 6a13843aa9..795e541222 100644
--- a/src/components/timeline/TimelineCursors.svelte
+++ b/src/components/timeline/TimelineCursors.svelte
@@ -6,7 +6,7 @@
   import { plugins } from '../../stores/plugins';
   import { view } from '../../stores/views';
   import type { Label, MouseOver, Timeline, VerticalGuide } from '../../types/timeline';
-  import { getDoyTime, getUnixEpochTime } from '../../utilities/time';
+  import { formatDate, getDoyTime, getUnixEpochTime } from '../../utilities/time';
   import { createVerticalGuide } from '../../utilities/timeline';
   import TimelineCursor from './TimelineCursor.svelte';
 
@@ -155,7 +155,7 @@
           cursorX = offsetX;
         }
         date = new Date(unixEpochTime);
-        cursorTimeLabel = $plugins.time.primary.format(date) ?? 'Invalid Date';
+        cursorTimeLabel = formatDate(date, $plugins.time.primary.format);
         cursorTimeLabel += ' ' + $plugins.time.primary.label;
       }
       cursorMaxWidth = drawWidth - cursorX;
diff --git a/src/components/timeline/TimelineHistogram.svelte b/src/components/timeline/TimelineHistogram.svelte
index b60a0e8384..10c0d867b2 100644
--- a/src/components/timeline/TimelineHistogram.svelte
+++ b/src/components/timeline/TimelineHistogram.svelte
@@ -13,7 +13,12 @@
   import type { SimulationDataset, Span } from '../../types/simulation';
   import type { MouseOver, TimeRange } from '../../types/timeline';
   import { clamp } from '../../utilities/generic';
-  import { getIntervalInMs, getUnixEpochTimeFromInterval, removeDateStringMilliseconds } from '../../utilities/time';
+  import {
+    formatDate,
+    getIntervalInMs,
+    getUnixEpochTimeFromInterval,
+    removeDateStringMilliseconds,
+  } from '../../utilities/time';
   import { tooltip } from '../../utilities/tooltip';
 
   export let activityDirectives: ActivityDirective[] = [];
@@ -314,7 +319,7 @@
       timelineHovering = true;
       cursorLeft = clamp(x - histRect.left, 0, histRect.width); // Ensure cursor is within range
       const cursorTime = xScaleMax.invert(cursorLeft);
-      cursorTooltip = $plugins.time.primary.format(cursorTime) ?? 'Invalid Date';
+      cursorTooltip = formatDate(cursorTime, $plugins.time.primary.format);
 
       // Remove milliseconds if DOY-like time
       cursorTooltip = removeDateStringMilliseconds(cursorTooltip);
diff --git a/src/components/timeline/Tooltip.svelte b/src/components/timeline/Tooltip.svelte
index 85eb8e8e8b..2b0a73d77f 100644
--- a/src/components/timeline/Tooltip.svelte
+++ b/src/components/timeline/Tooltip.svelte
@@ -12,6 +12,7 @@
   import type { ResourceType, Span } from '../../types/simulation';
   import type { LineLayer, LinePoint, MouseOver, Point, Row, XRangePoint } from '../../types/timeline';
   import { addPageFocusListener } from '../../utilities/generic';
+  import { formatDate } from '../../utilities/time';
   import { filterResourcesByLayer } from '../../utilities/timeline';
 
   export let interpolateHoverValue: boolean = false;
@@ -271,9 +272,7 @@
   function textForActivityDirective(activityDirective: ActivityDirective): string {
     const { anchor_id, id, name, start_time_ms, type } = activityDirective;
     const directiveStartTime =
-      typeof start_time_ms === 'number'
-        ? $plugins.time.primary.format(new Date(start_time_ms)) ?? 'Invalid Date'
-        : 'Unknown';
+      typeof start_time_ms === 'number' ? formatDate(new Date(start_time_ms), $plugins.time.primary.format) : 'Unknown';
     return `
       <div class='tooltip-row-container'>
         <div class='st-typography-bold' style='color: var(--st-gray-10); display: flex; gap: 4px;'>${DirectiveIcon} Activity Directive</div>
@@ -349,7 +348,7 @@
       color = (layer as LineLayer).lineColor;
     }
 
-    const pointTime = $plugins.time.primary.format(new Date(x)) ?? 'Invalid Date';
+    const pointTime = formatDate(new Date(x), $plugins.time.primary.format);
 
     return `
       <div class='tooltip-row-container'>
@@ -374,7 +373,7 @@
                     `<div class='tooltip-row'>
                       <span>Time (${f.label}):</span>
                       <span class='tooltip-value-highlight st-typography-medium'>
-                        ${f.format(new Date(x)) ?? 'Invalid Date'}
+                        ${formatDate(new Date(x), f.format)}
                       </span>
                   </div>`,
                 )
@@ -393,8 +392,8 @@
 
   function textForSpan(span: Span): string {
     const { id, duration, startMs, endMs, type } = span;
-    const spanStartTime = $plugins.time.primary.format(new Date(startMs)) ?? 'Invalid Date';
-    const spanEndTime = $plugins.time.primary.format(new Date(endMs)) ?? 'Invalid Date';
+    const spanStartTime = formatDate(new Date(startMs), $plugins.time.primary.format);
+    const spanEndTime = formatDate(new Date(endMs), $plugins.time.primary.format);
     return `
       <div class='tooltip-row-container'>
         <div class='st-typography-bold' style='color: var(--st-gray-10); display: flex; gap: 4px;'>${SpanIcon} Simulated Activity (Span)</div>
@@ -462,7 +461,7 @@
       name = layer.name ? layer.name : point.name;
       color = (layer as LineLayer).lineColor;
     }
-    const pointTime = $plugins.time.primary.format(new Date(x));
+    const pointTime = formatDate(new Date(x), $plugins.time.primary.format);
 
     return `
       <div class='tooltip-row-container'>
diff --git a/src/constants/time.ts b/src/constants/time.ts
new file mode 100644
index 0000000000..659eefadf7
--- /dev/null
+++ b/src/constants/time.ts
@@ -0,0 +1 @@
+export const InvalidDate = 'Invalid Date';
diff --git a/src/routes/plans/+page.svelte b/src/routes/plans/+page.svelte
index 90bd66c8c3..f626be1a45 100644
--- a/src/routes/plans/+page.svelte
+++ b/src/routes/plans/+page.svelte
@@ -22,6 +22,7 @@
   import Panel from '../../components/ui/Panel.svelte';
   import SectionTitle from '../../components/ui/SectionTitle.svelte';
   import TagsInput from '../../components/ui/Tags/TagsInput.svelte';
+  import { InvalidDate } from '../../constants/time';
   import { SearchParameters } from '../../enums/searchParameters';
   import { field } from '../../stores/form';
   import { models } from '../../stores/model';
@@ -39,7 +40,13 @@
   import { removeQueryParam } from '../../utilities/generic';
   import { permissionHandler } from '../../utilities/permissionHandler';
   import { featurePermissions } from '../../utilities/permissions';
-  import { convertDoyToYmd, convertUsToDurationString, getDoyTime, getShortISOForDate } from '../../utilities/time';
+  import {
+    convertDoyToYmd,
+    convertUsToDurationString,
+    formatDate,
+    getDoyTime,
+    getShortISOForDate,
+  } from '../../utilities/time';
   import { min, required, unique } from '../../utilities/validators';
   import type { PageData } from './$types';
 
@@ -107,11 +114,11 @@
       sortable: true,
       valueGetter: (params: ValueGetterParams<Plan>) => {
         if (params.data) {
-          return $plugins.time.primary.formatShort(new Date(params.data.start_time)) ?? 'Invalid Date';
+          return formatDate(new Date(params.data.start_time), $plugins.time.primary.formatShort);
         }
       },
       cellRenderer: (params: ICellRendererParams<Plan>) => {
-        if (params.value !== 'Invalid Date') {
+        if (params.value !== InvalidDate) {
           return params.value;
         }
         const div = document.createElement('div');
@@ -135,12 +142,12 @@
         if (params.data) {
           const endTime = convertDoyToYmd(params.data.end_time_doy);
           if (endTime) {
-            return $plugins.time.primary.formatShort(new Date(endTime)) ?? 'Invalid Date';
+            return formatDate(new Date(endTime), $plugins.time.primary.formatShort);
           }
         }
       },
       cellRenderer: (params: ICellRendererParams<Plan>) => {
-        if (params.value !== 'Invalid Date') {
+        if (params.value !== InvalidDate) {
           return params.value;
         }
         const div = document.createElement('div');
@@ -383,8 +390,8 @@
       if (startTimeDate) {
         const defaultDate = $plugins.time.getDefaultPlanEndDate(startTimeDate);
         if (defaultDate) {
-          let newEndTime = $plugins.time.primary.format(defaultDate);
-          if (typeof newEndTime === 'string') {
+          let newEndTime = formatDate(defaultDate, $plugins.time.primary.format);
+          if (newEndTime !== InvalidDate) {
             await endTimeField.validateAndSet(newEndTime);
           }
         }
diff --git a/src/utilities/time.ts b/src/utilities/time.ts
index 1e33072fdd..d40b073224 100644
--- a/src/utilities/time.ts
+++ b/src/utilities/time.ts
@@ -1,7 +1,9 @@
 import { padStart } from 'lodash-es';
 import parseInterval from 'postgres-interval';
+import { InvalidDate } from '../constants/time';
 import { TimeTypes } from '../enums/time';
 import type { ActivityDirectiveId, ActivityDirectivesMap } from '../types/activity';
+import type { PluginTime } from '../types/plugin';
 import type { SpanUtilityMaps, SpansMap } from '../types/simulation';
 import type { DurationTimeComponents, ParsedDoyString, ParsedDurationString, ParsedYmdString } from '../types/time';
 
@@ -900,3 +902,12 @@ export function removeDateStringMilliseconds(dateString: string): string {
   }
   return dateString;
 }
+
+/**
+ * Format a Date using a date formatter.
+ * Returns "Invalid Date" if null.
+ * @todo move this to an intermediate layer between plugin and eventual store
+ */
+export function formatDate(date: Date, formatter: PluginTime['format']): string {
+  return formatter(date) ?? InvalidDate;
+}