From d6ee4171c69c0a1452675ce2faba6f05af301176 Mon Sep 17 00:00:00 2001 From: Alex Tideman Date: Tue, 16 Apr 2024 15:42:40 -0500 Subject: [PATCH] Color updates (#2010) * Update child-workflow colors, make line default ultraviolet, move icon back before text * Update test * Add icon opacity * Fix type error * Make active event header color ultraviolet --- .../lines-and-dots/constants.test.ts | 2 +- .../components/lines-and-dots/constants.ts | 28 ++----------------- .../svg/event-detail-row.svelte | 4 +-- .../svg/event-details-row.svelte | 1 - .../svg/history-graph-row-visual.svelte | 20 ++++--------- .../svg/history-graph-row.svelte | 17 +++++++++-- .../components/lines-and-dots/svg/line.svelte | 4 +-- .../svg/pending-detail-row.svelte | 1 - .../components/lines-and-dots/svg/text.svelte | 2 +- .../lines-and-dots/svg/timeline-graph.svelte | 1 - src/lib/holocene/icon/svg/terminal.svelte | 2 +- 11 files changed, 29 insertions(+), 53 deletions(-) diff --git a/src/lib/components/lines-and-dots/constants.test.ts b/src/lib/components/lines-and-dots/constants.test.ts index e07e188a8..ff3b71fbe 100644 --- a/src/lib/components/lines-and-dots/constants.test.ts +++ b/src/lib/components/lines-and-dots/constants.test.ts @@ -27,7 +27,7 @@ describe('timelineTextPosition', () => { test('should calculate the correct text position for History', () => { const { textPosition, textIndex, textAnchor, backdrop } = timelineTextPosition([17, 85], 100, 1000, false, HistoryConfig); - expect(textPosition).toEqual([96.997, 100]); + expect(textPosition).toEqual([94, 100]); expect(textIndex).toEqual(1); expect(textAnchor).toEqual('start'); expect(backdrop).toEqual(false); diff --git a/src/lib/components/lines-and-dots/constants.ts b/src/lib/components/lines-and-dots/constants.ts index 8725c7fe8..49803eb28 100644 --- a/src/lib/components/lines-and-dots/constants.ts +++ b/src/lib/components/lines-and-dots/constants.ts @@ -48,7 +48,7 @@ export const TimelineConfig: GraphConfig = { export const HistoryConfig: GraphConfig = { height: baseRadius * 5, gutter: baseRadius * 2, - radius: baseRadius * 1.333, + radius: baseRadius * 1, fontSizeRatio: baseRadius * 4, }; @@ -62,7 +62,7 @@ export const DetailsConfig: GraphConfig = { export const CategoryIcon: Record = { workflow: 'workflow', signal: 'signal', - command: 'sliders', + command: 'terminal', activity: 'activity', marker: 'marker', timer: 'retention', @@ -267,30 +267,6 @@ export const getNextDistanceAndOffset = ( return { nextDistance, offset }; }; -export const getEventCategoryColor = ( - category: EventTypeCategory | 'pending' | undefined, -): string => { - switch (category) { - case 'marker': - case 'command': - return '#ebebeb'; - case 'timer': - return '#fbbf24'; - case 'signal': - return '#ec4899'; - case 'activity': - return '#a78bfa'; - case 'pending': - return '#a78bfa'; - case 'child-workflow': - return '#b2f8d9'; - case 'workflow': - return '#059669'; - default: - return '#141414'; - } -}; - export const getStatusColor = ( status: WorkflowStatus | EventClassification | 'Pending' | 'Retrying', ): string => { diff --git a/src/lib/components/lines-and-dots/svg/event-detail-row.svelte b/src/lib/components/lines-and-dots/svg/event-detail-row.svelte index a2a7b58e2..67ee7c3e2 100644 --- a/src/lib/components/lines-and-dots/svg/event-detail-row.svelte +++ b/src/lib/components/lines-and-dots/svg/event-detail-row.svelte @@ -56,7 +56,7 @@ point={[x, eventY]} {width} height={1.25 * fontSizeRatio} - fill={active ? '#465977' : ''} + fill={active ? '#444CE7' : ''} /> {/each} diff --git a/src/lib/components/lines-and-dots/svg/event-details-row.svelte b/src/lib/components/lines-and-dots/svg/event-details-row.svelte index a54073f7b..d80da9d35 100644 --- a/src/lib/components/lines-and-dots/svg/event-details-row.svelte +++ b/src/lib/components/lines-and-dots/svg/event-details-row.svelte @@ -40,7 +40,6 @@ {#if group.pendingActivity} - import Icon from '$lib/holocene/icon/icon.svelte'; import type { EventGroup, EventGroups, } from '$lib/models/event-groups/event-groups'; import { setSingleActiveEvent } from '$lib/stores/active-events'; import type { WorkflowEvent, WorkflowEvents } from '$lib/types/events'; - import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type'; import { isPendingActivity } from '$lib/utilities/is-pending-activity'; import { - CategoryIcon, getNextDistanceAndOffset, HistoryConfig, isMiddleEvent, @@ -42,13 +39,9 @@ $: zoomY = y * zoomLevel; $: zoomNextDistance = offset > 0 && nextDistance * zoomLevel; - $: category = isPendingActivity(event) ? 'pending' : event?.category; $: classification = isPendingActivity(event) ? 'pending' : event?.classification; - $: icon = isLocalActivityMarkerEvent(event) - ? CategoryIcon['local-activity'] - : CategoryIcon[event.category]; const strokeWidth = radius / 2; @@ -64,6 +57,11 @@ isPendingActivity(event) || offset === 0 ? false : !isMiddleEvent(event, groups); + $: category = isPendingActivity(event) + ? 'pending' + : nextIsPending + ? event?.category + : ''; - {/if} {#if eventInViewBox && zoomNextDistance} + import Icon from '$lib/holocene/icon/icon.svelte'; import type { EventGroup } from '$lib/models/event-groups/event-groups'; import { setActiveEvent } from '$lib/stores/active-events'; import { relativeTime, timeFormat } from '$lib/stores/time-format'; import type { WorkflowEvent } from '$lib/types/events'; import { spaceBetweenCapitalLetters } from '$lib/utilities/format-camel-case'; import { formatDate } from '$lib/utilities/format-date'; + import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type'; - import { HistoryConfig } from '../constants'; + import { CategoryIcon, HistoryConfig } from '../constants'; import Box from './box.svelte'; import Text from './text.svelte'; @@ -32,6 +34,9 @@ : 'pending' : event.classification; $: detailsWidth = canvasWidth - visualWidth; + $: icon = isLocalActivityMarkerEvent(event) + ? CategoryIcon['local-activity'] + : CategoryIcon[event.category]; {event.id} +