More updates to reflect plugin changes

NASA-AMMOS · Jun 12, 2024 · 58ebbaa · 58ebbaa
1 parent 673dea7
commit 58ebbaa
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 29 deletions.
diff --git a/src/components/activity/ActivityDirectiveForm.svelte b/src/components/activity/ActivityDirectiveForm.svelte
@@ -376,7 +376,7 @@
   }
 
   function onUpdateStartTime() {
-    if ($startTimeField.valid && startTime !== $startTimeField.value) {
+    if ($startTimeField.valid /* && startTime !== $startTimeField.value */) {
       console.log('startTimeField.value :>> ', $startTimeField.value);
       const { id } = activityDirective;
       const planStartTimeDoy = getDoyTime(new Date(planStartTimeYmd));
@@ -611,6 +611,20 @@
           {/if}
         </Highlight>
 
+        <!--   <Input layout="inline">
+          <label use:tooltip={{ content: 'Start Time', placement: 'top' }} for="start-time">
+            Start Time ({$plugins.time?.secondary?.label ?? 'UTC'})
+          </label>
+          <input
+            disabled
+            autocomplete="off"
+            class="st-input w-100"
+            name="start-time"
+            value={}
+            on:keyup={onStartTimeKeyUp}
+          />
+        </Input> -->
+
         <ActivityAnchorForm
           {activityDirective}
           {activityDirectivesMap}

diff --git a/src/components/plan/PlanForm.svelte b/src/components/plan/PlanForm.svelte
@@ -129,6 +129,7 @@
           <input class="st-input w-100" disabled name="modelVersion" value={plan.model.version} />
         </Input>
         <Input layout="inline">
+          <!-- TODO use time plugin -->
           <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} />

diff --git a/src/components/timeline/Timeline.svelte b/src/components/timeline/Timeline.svelte
@@ -131,6 +131,7 @@
   $: rows = timeline?.rows || [];
   $: drawWidth = clientWidth > 0 ? clientWidth - (timeline?.marginLeft ?? 0) - (timeline?.marginRight ?? 0) : 0;
   $: estimatedLabelWidthPx = $plugins.time?.ticks?.tickLabelWidth ?? 130;
+  $: xAxisDrawHeight = 48 + 16 * ($plugins.time?.additional ? Math.max($plugins.time.additional.length, 1) : 1);
 
   // Compute number of ticks based off draw width
   $: if (drawWidth) {
@@ -179,11 +180,17 @@
         }
       }
 
-      let formattedSecondaryDate = '';
-      if ($plugins.time?.secondary?.format) {
-        formattedSecondaryDate = $plugins.time?.secondary?.format(date);
+      const additionalFormats: string[] = [];
+      let tick: XAxisTick = { additionalFormats: [], date, formattedPrimaryDate, hideLabel: false };
+
+      if ($plugins.time?.additional?.length) {
+        $plugins.time.additional.forEach(timeSystem => {
+          if (timeSystem.format) {
+            additionalFormats.push(timeSystem.format(date));
+          }
+        });
       } else {
-        formattedSecondaryDate = date.toLocaleString();
+        let formattedSecondaryDate = date.toLocaleString();
         if (xScaleViewDuration > durationYear * tickCount) {
           formattedSecondaryDate = date.getFullYear().toString();
           labelWidth = $plugins.time?.ticks?.tickLabelWidth ?? 28;
@@ -194,8 +201,12 @@
           formattedSecondaryDate = date.toLocaleDateString();
           labelWidth = $plugins.time?.ticks?.tickLabelWidth ?? 58;
         }
+        additionalFormats.push(formattedSecondaryDate);
       }
-      return { date, formattedPrimaryDate, formattedSecondaryDate, hideLabel: false };
+
+      tick.additionalFormats = additionalFormats;
+
+      return { additionalFormats, date, formattedPrimaryDate, hideLabel: false };
     });
 
     // Determine whether or not to hide the last tick label

diff --git a/src/components/timeline/XAxis.svelte b/src/components/timeline/XAxis.svelte
@@ -33,7 +33,6 @@
   let zoom: ZoomBehavior<SVGElement, unknown>;
 
   $: primaryTimeLabel = $plugins.time?.primary?.label ?? 'UTC';
-  $: secondaryTimeLabel = $plugins.time?.secondary?.label ?? getTimeZoneName();
   $: svgSelection = select(svg) as Selection<SVGElement, unknown, any, any>;
 
   /* TODO could this be a custom svelte use action? */
@@ -77,9 +76,17 @@
 >
   <div class="x-axis-time-formats" style={`width:${marginLeft}px`}>
     <div class="x-axis-time-format st-typography-medium">{primaryTimeLabel}</div>
-    <div class="x-axis-time-format x-axis-time-format-secondary st-typography-medium">
-      {secondaryTimeLabel}
-    </div>
+    {#if $plugins.time?.additional && $plugins.time?.additional?.length > 0}
+      {#each $plugins.time?.additional as timeSystem}
+        <div class="x-axis-time-format x-axis-time-format-secondary st-typography-medium">
+          {timeSystem.label}
+        </div>
+      {/each}
+    {:else}
+      <div class="x-axis-time-format x-axis-time-format-secondary st-typography-medium">
+        {getTimeZoneName()}
+      </div>
+    {/if}
   </div>
   <svg style="height: {drawHeight}px; width: {drawWidth}px;" bind:this={svg}>
     <g>
@@ -94,12 +101,14 @@
                 <g class="tick st-typography-medium" transform="translate({xScaleView?.(tick.date)}, 0)">
                   <text fill="currentColor" dy="0.5em">{tick.formattedPrimaryDate}</text>
                 </g>
-                <g
-                  class="tick st-typography-medium tick-secondary"
-                  transform="translate({xScaleView?.(tick.date)}, 16)"
-                >
-                  <text fill="currentColor" dy="0.5em">{tick.formattedSecondaryDate}</text>
-                </g>
+                {#each tick.additionalFormats as label, i}
+                  <g
+                    class="tick st-typography-medium tick-secondary"
+                    transform="translate({xScaleView?.(tick.date)}, {(i + 1) * 16})"
+                  >
+                    <text fill="currentColor" dy="0.5em">{label}</text>
+                  </g>
+                {/each}
               {/if}
             {/each}
           {/if}

diff --git a/src/types/plugin.ts b/src/types/plugin.ts
@@ -4,21 +4,19 @@ export type PluginCode = {
   getPlugin: () => Promise<Plugins>;
 };
 
+export type PluginTime = {
+  format?: (date: Date) => string;
+  formatString?: string;
+  label?: string;
+  parse?: (string: string) => Date;
+  validate?: (string: string) => Promise<ValidationResult>;
+};
+
 export type Plugins = {
   sequencing?: null;
   time?: {
-    primary?: {
-      format?: (date: Date) => string;
-      formatString?: string;
-      label?: string;
-      parse?: (string: string) => Date;
-      validate?: (string: string) => Promise<ValidationResult>;
-    };
-    secondary?: {
-      format?: (date: Date) => string;
-      label?: string;
-      parse?: (string: string) => Date;
-    };
+    additional?: PluginTime[]; // TODO bikeshed
+    primary?: PluginTime;
     ticks?: {
       getTicks?: (start: Date, stop: Date, count: number) => Date[];
       tickLabelWidth?: number;

diff --git a/src/types/timeline.ts b/src/types/timeline.ts
@@ -220,9 +220,9 @@ export type VerticalGuideSelection = {
 };
 
 export type XAxisTick = {
+  additionalFormats: string[];
   date: Date;
   formattedPrimaryDate: string;
-  formattedSecondaryDate: string;
   hideLabel: boolean;
 };