Skip to content

Commit

Permalink
Timeline Improvements (#1658)
Browse files Browse the repository at this point in the history
* Add event filters, lock view from start to end

* Make it better with tooltips, collapse vertical, event filters, label improvements

* Don't follow mouse

* Add togglebuttons group, add displayName to group, cleanup

* Add Timeline to Accordion, use start/endOfMinute for min/max to provide a little zoomout ability to see all events

* Remove paginated-table changes

* Update snapshots and pass testid

* Fix float tests

* Remove event type filter in timeline

* Add types

* Fix strings to single quotes
  • Loading branch information
Alex-Tideman authored Oct 3, 2023
1 parent 5e14b40 commit 94b1b9b
Show file tree
Hide file tree
Showing 24 changed files with 412 additions and 140 deletions.
10 changes: 7 additions & 3 deletions src/lib/components/event/event-category-filter.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
MenuContainer,
MenuItem,
} from '$lib/holocene/menu';
import type { MenuButtonVariant } from '$lib/holocene/menu/menu-button.svelte';
import { translate } from '$lib/i18n/translate';
import {
allEventTypeOptions,
Expand All @@ -19,6 +20,7 @@
import { isVersionNewer } from '$lib/utilities/version-check';
export let compact = false;
export let variant: MenuButtonVariant = 'table-header';
$: label = compact
? translate('events', 'event-type')
Expand All @@ -27,8 +29,10 @@
let parameter = 'category';
let options = compact ? compactEventTypeOptions : allEventTypeOptions;
if (isVersionNewer('1.21', $temporalVersion)) {
options = options.filter(({ option }) => option !== 'update');
$: {
if (isVersionNewer('1.21', $temporalVersion)) {
options = options.filter(({ option }) => option !== 'update');
}
}
$: visibleOption = options.find(
Expand All @@ -48,7 +52,7 @@
<MenuContainer>
<MenuButton
active={!!$eventCategoryFilter}
variant="table-header"
{variant}
data-testid="event-category-filter"
controls="event-category-filter-menu"
>
Expand Down
126 changes: 126 additions & 0 deletions src/lib/components/event/event-history-timeline-helpers.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import { get } from 'svelte/store';

import { endOfMinute, startOfMinute } from 'date-fns';
import type { TimelineOptionsZoomKey } from 'vis-timeline';

import { relativeTime, timeFormat } from '$lib/stores/time-format';
import type { WorkflowExecution } from '$lib/types/workflows';
import { formatDate } from '$lib/utilities/format-date';
import { formatDistanceAbbreviated } from '$lib/utilities/format-time';

type TimelineOptionsTooltipOverflow = 'flip' | 'none' | 'cap';

export const getTimelineOptions = (workflow: WorkflowExecution) => ({
stackSubgroups: true,
maxHeight: 520,
min: startOfMinute(new Date(workflow.startTime)),
max: workflow?.endTime
? endOfMinute(new Date(workflow?.endTime))
: Date.now(),
horizontalScroll: true,
verticalScroll: true,
zoomKey: 'ctrlKey' as TimelineOptionsZoomKey,
orientation: {
axis: 'both',
item: 'center',
},
tooltip: {
delay: 0,
overflowMethod: 'flip' as TimelineOptionsTooltipOverflow,
followMouse: false,
template: tooltipTemplate,
},
rollingMode: {
follow: false,
},
format: {
majorLabels: {
millisecond: 'D MMMM HH:mm:ss',
second: 'D MMMM HH:mm',
minute: 'ddd D MMMM',
hour: 'ddd D MMMM',
weekday: 'MMMM YYYY',
day: 'MMMM YYYY',
week: 'MMMM YYYY',
month: 'YYYY',
year: '',
},
},
xss: {
disabled: true,
filterOptions: {
whiteList: {
div: ['class'],
},
},
},
});

export const tooltipTemplate = (item, _parsedItems): string => {
if (!item?.data?.eventList) return workflowExecutionTooltipTemplate(item);
if (item?.data.eventList.length === 1)
return singleEventTooltipTemplate(item);
return groupEventTooltipTemplate(item);
};

const workflowExecutionTooltipTemplate = (item): string => {
return `<div class="flex flex-col gap-1">
<div class="flex gap-2"><div class="font-bold w-16">Start</div>
<div>${formatDate(item.start, get(timeFormat), {
relative: get(relativeTime),
})}
</div>
</div>
<div class="flex gap-2">
<div class="font-bold w-16">End</div>
<div>${formatDate(item.end, get(timeFormat), {
relative: get(relativeTime),
})}</div>
</div>
<div class="flex gap-2"><div class="font-bold w-16">Duration</div><div>${formatDistanceAbbreviated(
{
start: item.start,
end: item.end,
includeMilliseconds: true,
},
)}</div>
</div>
</div>`;
};

const singleEventTooltipTemplate = (item): string => {
return `<div class="flex flex-col gap-1">
<div class="flex gap-2"><div class="font-bold w-16">Event Time</div>
<div>${formatDate(item.start, get(timeFormat), {
relative: get(relativeTime),
})}
</div>
</div>
</div>
</div>`;
};

const groupEventTooltipTemplate = (item): string => {
return `<div class="flex flex-col gap-1">
<div class="flex gap-2"><div class="font-bold w-16">Start</div>
<div>${formatDate(item.start, get(timeFormat), {
relative: get(relativeTime),
})}
</div>
</div>
<div class="flex gap-2">
<div class="font-bold w-16">End</div>
<div>${formatDate(item.end, get(timeFormat), {
relative: get(relativeTime),
})}</div>
</div>
<div class="flex gap-2"><div class="font-bold w-16">Duration</div><div>${formatDistanceAbbreviated(
{
start: item.start,
end: item.end,
includeMilliseconds: true,
},
)}</div>
</div>
</div>`;
};
Loading

1 comment on commit 94b1b9b

@vercel
Copy link

@vercel vercel bot commented on 94b1b9b Oct 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

holocene – ./

holocene.preview.thundergun.io
holocene-git-main.preview.thundergun.io

Please sign in to comment.