UTC Time Labeling (#1113)

* Add UTC label to every UTC time display in the plan page except for subset simulation times * add UTC to creation time label in Activity Directive panel * fix code formatting --------- Co-authored-by: Dan Delany <daniel.t.delany@jpl.nasa.gov>
NASA-AMMOS · Feb 17, 2024 · cdab7e4 · cdab7e4
1 parent efbac36
commit cdab7e4
Show file tree

Hide file tree

Showing 15 changed files with 39 additions and 35 deletions.
diff --git a/src/components/activity/ActivityDirectiveChangelog.svelte b/src/components/activity/ActivityDirectiveChangelog.svelte
@@ -112,7 +112,7 @@
       const currentStartTimeDoy = getDoyTimeFromInterval(planStartTimeYmd, current.start_offset);
       const previousStartTimeDoy = getDoyTimeFromInterval(planStartTimeYmd, previous.start_offset);
 
-      differences['Start Time'] = {
+      differences['Start Time (UTC)'] = {
         currentValue: currentStartTimeDoy,
         previousValue: previousStartTimeDoy,
       };

diff --git a/src/components/activity/ActivityDirectiveForm.svelte b/src/components/activity/ActivityDirectiveForm.svelte
@@ -545,7 +545,7 @@
           <DatePickerField
             disabled={!editable || activityDirective.anchor_id !== null}
             field={startTimeDoyField}
-            label="Start Time - YYYY-DDDThh:mm:ss"
+            label="Start Time (UTC) - YYYY-DDDThh:mm:ss"
             layout="inline"
             name="start-time"
             use={[
@@ -579,15 +579,17 @@
 
         <Highlight highlight={highlightKeysMap.created_at}>
           <Input layout="inline">
-            <label use:tooltip={{ content: 'Creation Time', placement: 'top' }} for="creationTime">Creation Time</label>
+            <label use:tooltip={{ content: 'Creation Time (UTC)', placement: 'top' }} for="creationTime">
+              Creation Time (UTC)
+            </label>
             <input class="st-input w-100" disabled name="creationTime" value={activityDirective.created_at} />
           </Input>
         </Highlight>
 
         <Highlight highlight={highlightKeysMap.last_modified_at}>
           <Input layout="inline">
-            <label use:tooltip={{ content: 'Last Modified Time', placement: 'top' }} for="lastModifiedTime">
-              Last Modified Time
+            <label use:tooltip={{ content: 'Last Modified Time (UTC)', placement: 'top' }} for="lastModifiedTime">
+              Last Modified Time (UTC)
             </label>
             <input class="st-input w-100" disabled name="lastModifiedTime" value={activityDirective.last_modified_at} />
           </Input>

diff --git a/src/components/activity/ActivityDirectivesTablePanel.svelte b/src/components/activity/ActivityDirectivesTablePanel.svelte
@@ -105,7 +105,7 @@
     derived_start_time: {
       field: 'derived_start_time',
       filter: 'text',
-      headerName: 'Absolute Start Time',
+      headerName: 'Absolute Start Time (UTC)',
       hide: true,
       resizable: true,
       sortable: true,
@@ -140,15 +140,15 @@
     last_modified_at: {
       field: 'last_modified_at',
       filter: 'text',
-      headerName: 'Last Modified At',
+      headerName: 'Last Modified At (UTC)',
       hide: true,
       resizable: true,
       sortable: true,
     },
     last_modified_by: {
       field: 'last_modified_by',
       filter: 'text',
-      headerName: 'Last Modified By',
+      headerName: 'Last Modified By (UTC)',
       hide: true,
       resizable: true,
       sortable: true,

diff --git a/src/components/activity/ActivitySpanForm.svelte b/src/components/activity/ActivitySpanForm.svelte
@@ -168,12 +168,12 @@
       </Input>
 
       <Input layout="inline">
-        <label use:tooltip={{ content: 'Start Time', placement: 'top' }} for="startTime">Start Time</label>
+        <label use:tooltip={{ content: 'Start Time (UTC)', placement: 'top' }} for="startTime">Start Time (UTC)</label>
         <input class="st-input w-100" disabled name="startTime" value={startTimeDoy} />
       </Input>
 
       <Input layout="inline">
-        <label use:tooltip={{ content: 'End Time', placement: 'top' }} for="endTime">End Time</label>
+        <label use:tooltip={{ content: 'End Time (UTC)', placement: 'top' }} for="endTime">End Time (UTC)</label>
         <input class="st-input w-100" disabled name="endTime" value={endTimeDoy ?? 'None'} />
       </Input>
     </Collapse>

diff --git a/src/components/activity/ActivitySpansTablePanel.svelte b/src/components/activity/ActivitySpansTablePanel.svelte
@@ -50,7 +50,7 @@
     derived_start_time: {
       field: 'derived_start_time',
       filter: 'text',
-      headerName: 'Absolute Start Time',
+      headerName: 'Absolute Start Time (UTC)',
       hide: true,
       resizable: true,
       sortable: true,
@@ -64,7 +64,7 @@
     derived_end_time: {
       field: 'derived_end_time',
       filter: 'text',
-      headerName: 'Absolute End Time',
+      headerName: 'Absolute End Time (UTC)',
       hide: true,
       resizable: true,
       sortable: true,

diff --git a/src/components/constraints/ConstraintViolationButton.svelte b/src/components/constraints/ConstraintViolationButton.svelte
@@ -32,11 +32,12 @@
 
 <button class="st-button tertiary violation-button" on:click={() => zoomToViolation(window)}>
   <div>
-    {startYear}-<span class="st-typography-bold">{startDoy}</span> T {startHours}:{startMins}:{startSecs}.{startMsecs}
+    {startYear}-<span class="st-typography-bold">{startDoy}</span> T {startHours}:{startMins}:{startSecs}.{startMsecs} UTC
   </div>
+
   <div class="separator">–</div>
   <div>
-    {endYear}-<span class="st-typography-bold">{endDoy}</span> T {endHours}:{endMins}:{endSecs}.{endMsecs}
+    {endYear}-<span class="st-typography-bold">{endDoy}</span> T {endHours}:{endMins}:{endSecs}.{endMsecs} UTC
   </div>
 </button>
 

diff --git a/src/components/constraints/ConstraintsPanel.svelte b/src/components/constraints/ConstraintsPanel.svelte
@@ -238,7 +238,7 @@
         <div>
           <DatePickerField
             field={startTimeDoyField}
-            label="Violation Start Time"
+            label="Violation Start Time (UTC)"
             layout="inline"
             name="start-time"
             on:change={onUpdateStartTime}
@@ -250,7 +250,7 @@
           </DatePickerField>
           <DatePickerField
             field={endTimeDoyField}
-            label="Violation End Time"
+            label="Violation End Time (UTC)"
             layout="inline"
             name="end-time"
             on:change={onUpdateEndTime}

diff --git a/src/components/plan/PlanForm.svelte b/src/components/plan/PlanForm.svelte
@@ -107,11 +107,12 @@
           <input class="st-input w-100" disabled name="modelVersion" value={plan.model.version} />
         </Input>
         <Input layout="inline">
-          <label use:tooltip={{ content: 'Start Time', placement: 'top' }} for="startTime">Start Time</label>
+          <label use:tooltip={{ content: 'Start Time (UTC)', placement: 'top' }} for="startTime">Start Time (UTC)</label
+          >
           <input class="st-input w-100" disabled name="startTime" value={plan.start_time_doy} />
         </Input>
         <Input layout="inline">
-          <label use:tooltip={{ content: 'End Time', placement: 'top' }} for="endTime">End Time</label>
+          <label use:tooltip={{ content: 'End Time (UTC)', placement: 'top' }} for="endTime">End Time (UTC)</label>
           <input class="st-input w-100" disabled name="endTime" value={plan.end_time_doy} />
         </Input>
         <Input layout="inline">

diff --git a/src/components/simulation/SimulationPanel.svelte b/src/components/simulation/SimulationPanel.svelte
@@ -318,7 +318,7 @@
       <Collapse title="General">
         <DatePickerField
           field={startTimeDoyField}
-          label="Start Time"
+          label="Start Time (UTC)"
           layout="inline"
           name="start-time"
           use={[
@@ -339,7 +339,7 @@
         </DatePickerField>
         <DatePickerField
           field={endTimeDoyField}
-          label="End Time"
+          label="End Time (UTC)"
           layout="inline"
           name="end-time"
           use={[

diff --git a/src/components/timeline/TimelineCursors.svelte b/src/components/timeline/TimelineCursors.svelte
@@ -177,7 +177,7 @@
   {#if cursorEnabled && cursorWithinView}
     <TimelineCursor
       x={cursorX}
-      label={cursorDOY}
+      label={`${cursorDOY} UTC`}
       maxWidth={cursorMaxWidth}
       on:click={() => addVerticalGuide(cursorDOY)}
       activeCursor

diff --git a/src/components/timeline/TimelineTimeDisplay.svelte b/src/components/timeline/TimelineTimeDisplay.svelte
@@ -7,12 +7,12 @@
 </script>
 
 <div style:width={`${width ?? 10}px`} class="timeline-time-display">
-  <div use:tooltip={{ content: 'Plan Start Time' }} class="timeline-time-display--date st-typography-medium">
-    {planStartTimeDoy}
+  <div use:tooltip={{ content: 'Plan Start Time (UTC)' }} class="timeline-time-display--date st-typography-medium">
+    {planStartTimeDoy} UTC
   </div>
 
-  <div use:tooltip={{ content: 'Plan End Time' }} class="timeline-time-display--date st-typography-medium">
-    {planEndTimeDoy}
+  <div use:tooltip={{ content: 'Plan End Time (UTC)' }} class="timeline-time-display--date st-typography-medium">
+    {planEndTimeDoy} UTC
   </div>
 </div>
 

diff --git a/src/components/timeline/Tooltip.svelte b/src/components/timeline/Tooltip.svelte
@@ -254,7 +254,7 @@
         <div class='tooltip-row'>
           <span>Time:</span>
           <span class='tooltip-value-highlight st-typography-medium'>
-            ${getDoyTime(new Date(x))}
+            ${getDoyTime(new Date(x))} UTC
           </span>
         </div>
         <div class='tooltip-row'>
@@ -320,7 +320,7 @@
         <div class='tooltip-row'>
           <span>Start:</span>
           <span class='tooltip-value-highlight st-typography-medium'>
-            ${getDoyTime(new Date(x))}
+            ${getDoyTime(new Date(x))} UTC
           </span>
         </div>
         <div class='tooltip-row'>

diff --git a/src/components/timeline/form/TimelineEditorPanel.svelte b/src/components/timeline/form/TimelineEditorPanel.svelte
@@ -531,7 +531,7 @@
             <div class="editor-section-labeled-grid-container">
               <CssGrid columns="1fr 168px 24px 24px" gap="8px" class="editor-section-grid">
                 <div>Label</div>
-                <div>Date</div>
+                <div>Date (UTC)</div>
               </CssGrid>
               <div class="guides timeline-elements">
                 {#each verticalGuides as verticalGuide (verticalGuide.id)}
@@ -558,7 +558,6 @@
                         />
                       </Input>
                       <Input layout="stacked" class="editor-input">
-                        <label for="timestamp">Time</label>
                         <DatePicker
                           name="timestamp"
                           minDate={new Date($maxTimeRange.start)}

diff --git a/src/enums/view.ts b/src/enums/view.ts
@@ -1,4 +1,4 @@
 export enum ViewConstants {
   MIN_ROW_HEIGHT = 80,
-  MIN_MARGIN_LEFT = 160,
+  MIN_MARGIN_LEFT = 190,
 }
diff --git a/src/utilities/view.ts b/src/utilities/view.ts
@@ -1,4 +1,5 @@
 import Ajv from 'ajv';
+import { ViewConstants } from '../enums/view';
 import jsonSchema from '../schemas/ui-view-schema.json';
 import type { ActivityType } from '../types/activity';
 import type { ResourceType } from '../types/simulation';
@@ -20,7 +21,7 @@ export function generateDefaultView(activityTypes: ActivityType[] = [], resource
   const now = new Date().toISOString();
   const types: string[] = activityTypes.map(({ name }) => name);
 
-  const timeline = createTimeline([], { marginLeft: 160, marginRight: 30 });
+  const timeline = createTimeline([], { marginLeft: ViewConstants.MIN_MARGIN_LEFT, marginRight: 30 });
   const timelines = [timeline];
 
   const activityLayer = createTimelineActivityLayer(timelines, {
@@ -217,7 +218,7 @@ export function generateDefaultView(activityTypes: ActivityType[] = [], resource
             {
               field: 'derived_start_time',
               filter: 'text',
-              headerName: 'Absolute Start Time',
+              headerName: 'Absolute Start Time (UTC)',
               resizable: true,
               sortable: true,
               width: 200,
@@ -237,7 +238,7 @@ export function generateDefaultView(activityTypes: ActivityType[] = [], resource
             {
               field: 'created_at',
               filter: 'text',
-              headerName: 'Created At',
+              headerName: 'Created At (UTC)',
               hide: true,
               resizable: true,
               sortable: true,
@@ -287,15 +288,15 @@ export function generateDefaultView(activityTypes: ActivityType[] = [], resource
             {
               field: 'derived_start_time',
               filter: 'text',
-              headerName: 'Absolute Start Time',
+              headerName: 'Absolute Start Time (UTC)',
               hide: false,
               resizable: true,
               sortable: true,
             },
             {
               field: 'derived_end_time',
               filter: 'text',
-              headerName: 'Absolute End Time',
+              headerName: 'Absolute End Time (UTC)',
               hide: false,
               resizable: true,
               sortable: true,