diff --git a/src/components/timeline/LayerActivity.svelte b/src/components/timeline/LayerActivity.svelte
index dfa19ba708..3b5444b2be 100644
--- a/src/components/timeline/LayerActivity.svelte
+++ b/src/components/timeline/LayerActivity.svelte
@@ -331,12 +331,15 @@
}
const showContextMenu = !!e && isRightClick(e);
if (showContextMenu) {
- dispatch('contextMenu', {
- e,
- layerId: id,
- selectedActivityDirectiveId,
- selectedSpanId,
- });
+ // delay the context menu a little bit to allow any selection events to occur first
+ setTimeout(() => {
+ dispatch('contextMenu', {
+ e,
+ layerId: id,
+ selectedActivityDirectiveId,
+ selectedSpanId,
+ });
+ }, 1);
}
}
diff --git a/src/components/timeline/TimelineContextMenu.svelte b/src/components/timeline/TimelineContextMenu.svelte
index caa7f58afa..2aafee3737 100644
--- a/src/components/timeline/TimelineContextMenu.svelte
+++ b/src/components/timeline/TimelineContextMenu.svelte
@@ -41,6 +41,7 @@
let contextMenuComponent: ContextMenu;
let activityDirective: ActivityDirective | null;
let activityDirectiveSpans: Span[] | null = [];
+ let activityDirectiveStartDate: Date | null = null;
let span: Span | null;
// TODO imports here could be better, should we handle the vertical guide creation in Timeline?
@@ -53,10 +54,10 @@
span = null;
activityDirectiveSpans = null;
- if (selectedActivityDirectiveId !== undefined) {
+ if (selectedActivityDirectiveId != null) {
activityDirective = activityDirectivesMap[selectedActivityDirectiveId];
activityDirectiveSpans = getAllSpansForActivityDirective(selectedActivityDirectiveId, spansMap, spanUtilityMaps);
- } else if (selectedSpanId !== undefined) {
+ } else if (selectedSpanId != null) {
span = spansMap[selectedSpanId];
}
} else {
@@ -113,6 +114,18 @@
return new Date(getUnixEpochTimeFromInterval(startYmd, span.start_offset) + duration);
}
+ function onFocus(duration: number) {
+ if (xScaleView && contextMenu && span) {
+ const start = getSpanDate(span);
+ const end = getSpanDate(span, true);
+ const newViewTimeRange: TimeRange = {
+ end: Math.min(end.getTime() + duration, maxTimeRange.end),
+ start: Math.max(start.getTime() - duration, maxTimeRange.start),
+ };
+ dispatch('viewTimeRangeChanged', newViewTimeRange);
+ }
+ }
+
function onZoom(duration: number) {
if (xScaleView && contextMenu) {
const time = activityDirectiveStartDate ? activityDirectiveStartDate : xScaleView.invert(contextMenu.e.offsetX);
@@ -285,25 +298,46 @@
{/if}
-
- onZoomHome()}>Reset Zoom
-
- onZoom(TIME_MS.MILLISECOND)}>Millisecond
- onZoom(TIME_MS.MILLISECOND * 10)}>10 Milliseconds
- onZoom(TIME_MS.MILLISECOND * 50)}>50 Milliseconds
- onZoom(TIME_MS.SECOND)}>Second
- onZoom(TIME_MS.SECOND * 30)}>30 Seconds
- onZoom(TIME_MS.MINUTE)}>Minute
- onZoom(TIME_MS.MINUTE * 30)}>30 Minutes
- onZoom(TIME_MS.HOUR)}>Hour
- onZoom(TIME_MS.HOUR * 12)}>12 Hours
- onZoom(TIME_MS.DAY)}>Day
- onZoom(TIME_MS.DAY * 3)}>3 Days
- onZoom(TIME_MS.DAY * 7)}>Week
- onZoom(TIME_MS.MONTH)}>Month
- onZoom(TIME_MS.YEAR)}>Year
-
+ {#if span}
+
+ onZoomHome()}>Reset Zoom
+
+ onFocus(TIME_MS.MILLISECOND)}>1 Millisecond Padding
+ onFocus(TIME_MS.MILLISECOND * 10)}>10 Millisecond Padding
+ onFocus(TIME_MS.MILLISECOND * 50)}>50 Millisecond Padding
+ onFocus(TIME_MS.SECOND)}>1 Second Padding
+ onFocus(TIME_MS.SECOND * 30)}>30 Second Padding
+ onFocus(TIME_MS.MINUTE)}>1 Minute Padding
+ onFocus(TIME_MS.MINUTE * 30)}>30 Minute Padding
+ onFocus(TIME_MS.HOUR)}>1 Hour Padding
+ onFocus(TIME_MS.HOUR * 12)}>12 Hour Padding
+ onFocus(TIME_MS.DAY)}>1 Day Padding
+ onFocus(TIME_MS.DAY * 3)}>3 Day Padding
+ onFocus(TIME_MS.DAY * 7)}>1 Week Padding
+ onFocus(TIME_MS.MONTH)}>1 Month Padding
+ onFocus(TIME_MS.YEAR)}>1 Year Padding
+
+ {:else}
+
+ onZoomHome()}>Reset Zoom
+
+ onZoom(TIME_MS.MILLISECOND)}>1 Millisecond
+ onZoom(TIME_MS.MILLISECOND * 10)}>10 Milliseconds
+ onZoom(TIME_MS.MILLISECOND * 50)}>50 Milliseconds
+ onZoom(TIME_MS.SECOND)}>1 Second
+ onZoom(TIME_MS.SECOND * 30)}>30 Seconds
+ onZoom(TIME_MS.MINUTE)}>1 Minute
+ onZoom(TIME_MS.MINUTE * 30)}>30 Minutes
+ onZoom(TIME_MS.HOUR)}>1 Hour
+ onZoom(TIME_MS.HOUR * 12)}>12 Hours
+ onZoom(TIME_MS.DAY)}>1 Day
+ onZoom(TIME_MS.DAY * 3)}>3 Days
+ onZoom(TIME_MS.DAY * 7)}>1 Week
+ onZoom(TIME_MS.MONTH)}>1 Month
+ onZoom(TIME_MS.YEAR)}>1 Year
+
+ {/if}