Deep link to a specific time window on the timeline (#907)

* Deep link to a specific time window on the timeline * fixed prettier changes to quotes * PR feedback and fixed issue with activity selection * Include more info in tooltip --------- Co-authored-by: Chet Joswig <[email protected]>
NASA-AMMOS · Oct 11, 2023 · 3243c13 · 3243c13
1 parent e4e4842
commit 3243c13
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 5 deletions.
diff --git a/src/components/timeline/TimelineViewControls.svelte b/src/components/timeline/TimelineViewControls.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
   import ArrowLeftIcon from '@nasa-jpl/stellar/icons/arrow_left.svg?component';
   import ArrowRightIcon from '@nasa-jpl/stellar/icons/arrow_right.svg?component';
+  import LinkIcon from '@nasa-jpl/stellar/icons/link.svg?component';
   import MinusIcon from '@nasa-jpl/stellar/icons/minus.svg?component';
   import PlusIcon from '@nasa-jpl/stellar/icons/plus.svg?component';
   import RotateCounterClockwiseIcon from '@nasa-jpl/stellar/icons/rotate_counter_clockwise.svg?component';
   import { createEventDispatcher } from 'svelte';
+  import { SearchParameters } from '../../enums/searchParameters';
+  import { selectedActivityDirective } from '../../stores/activities';
+  import { selectedSpan, simulationDatasetId } from '../../stores/simulation';
+  import { viewIsModified } from '../../stores/views';
   import type { DirectiveVisibilityToggleMap, TimeRange } from '../../types/timeline';
+  import { showFailureToast, showSuccessToast } from '../../utilities/toast';
   import { tooltip } from '../../utilities/tooltip';
   import TimelineViewDirectiveControls from './TimelineViewDirectiveControls.svelte';
 
@@ -106,6 +112,28 @@
   function onToggleDirectiveVisibility() {
     dispatch('toggleDirectiveVisibility', !allDirectivesVisible);
   }
+
+  async function onCopyViewportURL() {
+    const targetUrl = new URL(window.location.href);
+    targetUrl.searchParams.set(SearchParameters.START_TIME, new Date(viewTimeRange.start).toISOString());
+    targetUrl.searchParams.set(SearchParameters.END_TIME, new Date(viewTimeRange.end).toISOString());
+    if ($selectedActivityDirective) {
+      targetUrl.searchParams.set(SearchParameters.ACTIVITY_ID, $selectedActivityDirective.id.toFixed());
+    }
+    if ($selectedSpan) {
+      targetUrl.searchParams.set(SearchParameters.SPAN_ID, $selectedSpan.id.toFixed());
+    }
+    if ($simulationDatasetId) {
+      targetUrl.searchParams.set(SearchParameters.SIMULATION_DATASET_ID, $simulationDatasetId.toFixed());
+    }
+
+    try {
+      await navigator.clipboard.writeText(targetUrl.href);
+      showSuccessToast('URL of plan and view copied to clipboard');
+    } catch {
+      showFailureToast('Error copying URL to clipboard');
+    }
+  }
 </script>
 
 <svelte:window on:keydown={onKeydown} />
@@ -160,6 +188,19 @@
   />
 {/if}
 
+<button
+  class="st-button icon"
+  on:click={onCopyViewportURL}
+  use:tooltip={{
+    content: `Copy URL including plan, visible time window, selection, and simulation dataset to clipboard.${
+      $viewIsModified ? ' View has unsaved changes.' : ''
+    }`,
+    placement: 'bottom',
+  }}
+>
+  <LinkIcon />
+</button>
+
 <style>
   .st-button {
     border: 1px solid var(--st-gray-30);

diff --git a/src/enums/searchParameters.ts b/src/enums/searchParameters.ts
@@ -4,6 +4,9 @@ export enum SearchParameters {
   REASON = 'reason',
   SIMULATION_DATASET_ID = 'simulationDatasetId',
   SNAPSHOT_ID = 'snapshotId',
+  SPAN_ID = 'spanId',
   SPEC_ID = 'specId',
   VIEW_ID = 'viewId',
+  START_TIME = 'startTime',
+  END_TIME = 'endTime',
 }
diff --git a/src/routes/plans/[id]/+page.svelte b/src/routes/plans/[id]/+page.svelte
@@ -70,7 +70,6 @@
     resetSimulationStores,
     resourceTypes,
     resources,
-    selectedSpanId,
     simulationDataset,
     simulationDatasetId,
     simulationDatasetLatest,
@@ -151,13 +150,33 @@
       $simulationDatasetId = data.initialPlan.simulations[0]?.simulation_datasets[0]?.id ?? -1;
     }
 
-    const queryActivityId = $page.url.searchParams.get(SearchParameters.ACTIVITY_ID);
-    if (queryActivityId) {
-      $selectedSpanId = parseInt(queryActivityId);
+    const queryActivityId = getSearchParameterNumber(SearchParameters.ACTIVITY_ID, $page.url.searchParams);
+    const querySpanId = getSearchParameterNumber(SearchParameters.SPAN_ID, $page.url.searchParams);
+    if (queryActivityId !== null || querySpanId !== null) {
+      setTimeout(() => selectActivity(queryActivityId, querySpanId));
       removeQueryParam(SearchParameters.ACTIVITY_ID);
+      removeQueryParam(SearchParameters.SPAN_ID);
     }
 
-    $viewTimeRange = $maxTimeRange;
+    let start = NaN;
+    const startTimeStr = $page.url.searchParams.get(SearchParameters.START_TIME);
+    if (startTimeStr) {
+      start = new Date(startTimeStr).getTime();
+      removeQueryParam(SearchParameters.START_TIME);
+    }
+
+    let end = NaN;
+    const endTimeStr = $page.url.searchParams.get(SearchParameters.END_TIME);
+    if (endTimeStr) {
+      end = new Date(endTimeStr).getTime();
+      removeQueryParam(SearchParameters.END_TIME);
+    }
+
+    viewTimeRange.set({
+      end: !isNaN(end) ? end : $maxTimeRange.end,
+      start: !isNaN(start) ? start : $maxTimeRange.start,
+    });
+
     activityTypes.updateValue(() => data.initialActivityTypes);
     planTags.updateValue(() => data.initialPlanTags);