Add "Scroll to Activity" to activity directive table context menu (#1433

)

src/components/activity/ActivityDirectivesTable.svelte

@@ -14,6 +14,9 @@
   import BulkActionDataGrid from '../ui/DataGrid/BulkActionDataGrid.svelte';
   import type DataGrid from '../ui/DataGrid/DataGrid.svelte';
   import DataGridActions from '../ui/DataGrid/DataGridActions.svelte';
+  import ContextMenuItem from '../context-menu/ContextMenuItem.svelte';
+  import ContextMenuSeparator from '../context-menu/ContextMenuSeparator.svelte';
+  import { createEventDispatcher } from 'svelte';
 
   export let activityDirectives: ActivityDirective[] = [];
   export let activityDirectiveErrorRollupsMap: Record<ActivityDirectiveId, ActivityErrorRollup> | undefined = undefined;
@@ -26,6 +29,10 @@
   export let user: User | null;
   export let filterExpression: string = '';
 
+  const dispatch = createEventDispatcher<{
+    scrollToTime: number;
+  }>();
+
   type ActivityDirectiveWithErrorCounts = ActivityDirective & { errorCounts?: ActivityErrorCounts };
   type CellRendererParams = {
     deleteActivityDirective: (activity: ActivityDirective) => void;
@@ -129,6 +136,13 @@
   function getRowId(activityDirective: ActivityDirective): ActivityDirectiveId {
     return activityDirective.id;
   }
+
+  function scrollToActivityInTimeline() {
+    const directive = activityDirectives.find(item => item.id === selectedActivityDirectiveId) ?? null;
+    if (directive?.start_time_ms) {
+      dispatch('scrollToTime', directive.start_time_ms);
+    }
+  }
 </script>
 
 <BulkActionDataGrid
@@ -155,4 +169,9 @@
   on:gridSizeChanged
   on:selectionChanged
   on:rowDoubleClicked
-/>
+>
+  <svelte:fragment slot="single-selection-context-menu">
+    <ContextMenuItem on:click={scrollToActivityInTimeline}>Scroll to Activity</ContextMenuItem>
+    <ContextMenuSeparator></ContextMenuSeparator>
+  </svelte:fragment>
+</BulkActionDataGrid>

src/components/activity/ActivityDirectivesTablePanel.svelte

@@ -14,7 +14,7 @@
   import { InvalidDate } from '../../constants/time';
   import { activityDirectivesMap, selectActivity, selectedActivityDirectiveId } from '../../stores/activities';
   import { activityErrorRollupsMap } from '../../stores/errors';
-  import { plan, planReadOnly } from '../../stores/plan';
+  import { plan, planReadOnly, setViewTimeRangeAroundTime, viewTimeRange } from '../../stores/plan';
   import { plugins } from '../../stores/plugins';
   import { view, viewTogglePanel, viewUpdateActivityDirectivesTable } from '../../stores/views';
   import type { ActivityDirective } from '../../types/activity';
@@ -364,6 +364,10 @@
       viewUpdateActivityDirectivesTable({ autoSizeColumns: 'off' });
     }
   }
+
+  function scrollToTime({ detail }: CustomEvent<number>) {
+    setViewTimeRangeAroundTime(detail);
+  }
 </script>
 
 <Panel padBody={false}>
@@ -417,6 +421,7 @@
       on:gridSizeChanged={onGridSizeChangedDebounced}
       on:rowDoubleClicked={onRowDoubleClicked}
       on:selectionChanged={onSelectionChanged}
+      on:scrollToTime={scrollToTime}
     />
   </svelte:fragment>
 </Panel>

src/components/timeline/TimelineViewControls.svelte

@@ -17,7 +17,7 @@
   import { createEventDispatcher } from 'svelte';
   import { SearchParameters } from '../../enums/searchParameters';
   import { activityDirectivesMap, selectedActivityDirective } from '../../stores/activities';
-  import { plan, planReadOnly } from '../../stores/plan';
+  import { plan, planReadOnly, setViewTimeRangeAroundTime } from '../../stores/plan';
   import {
     selectedSpan,
     simulationDataset,
@@ -216,15 +216,7 @@
 
   function scrollToSelection() {
     const time = getSelectionTime();
-    if (!isNaN(time) && (time < viewTimeRange.start || time > viewTimeRange.end)) {
-      const midSpan = time + getIntervalInMs($selectedSpan?.duration) / 2;
-      const start = Math.max(maxTimeRange.start, midSpan - viewDuration / 2);
-      const end = Math.min(maxTimeRange.end, midSpan + viewDuration / 2);
-      dispatch('viewTimeRangeChanged', {
-        end,
-        start,
-      });
-    }
+    setViewTimeRangeAroundTime(time);
   }
 
   function openDoc(event: MouseEvent, url: string) {

src/components/ui/DataGrid/BulkActionDataGrid.svelte

@@ -171,6 +171,9 @@
   on:selectionChanged
 >
   <svelte:fragment slot="context-menu">
+    {#if selectedItemIds.length === 1}
+      <slot name="single-selection-context-menu" />
+    {/if}
     {#if showContextMenu}
       <ContextMenuHeader>Bulk Actions</ContextMenuHeader>
       <ContextMenuItem on:click={selectAllItems}>

src/stores/plan.ts

@@ -1,11 +1,12 @@
-import { derived, writable, type Readable, type Writable } from 'svelte/store';
+import { derived, writable, type Readable, type Writable, get } from 'svelte/store';
 import type { ActivityType } from '../types/activity';
 import type { Plan, PlanMergeRequest, PlanMergeRequestSchema, PlanMetadata } from '../types/plan';
 import type { PlanDataset } from '../types/simulation';
 import type { Tag } from '../types/tags';
 import type { TimeRange } from '../types/timeline';
 import gql from '../utilities/gql';
 import { gqlSubscribable } from './subscribable';
+import { getIntervalInMs } from '../utilities/time';
 
 /* Writeable. */
 
@@ -114,3 +115,15 @@ export function resetPlanStores() {
 export function setActivityEditingLocked(locked: boolean) {
   activityEditingLocked.set(locked);
 }
+
+export function setViewTimeRangeAroundTime(timeInMs: number) {
+  const currentViewTimeRange = get(viewTimeRange);
+  if (!isNaN(timeInMs) && (timeInMs < currentViewTimeRange.start || timeInMs > currentViewTimeRange.end)) {
+    const padding = (currentViewTimeRange.end - currentViewTimeRange.start) / 2;
+    const maxRange = get(maxTimeRange);
+    viewTimeRange.set({
+      end: Math.min(maxRange.end, timeInMs + padding),
+      start: Math.max(maxRange.start, timeInMs - padding),
+    });
+  }
+}