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
temporalio · Apr 16, 2024 · d6ee417 · d6ee417
1 parent 53de5c6
commit d6ee417
Show file tree

Hide file tree

Showing 11 changed files with 29 additions and 53 deletions.
diff --git 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
@@ -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<EventTypeCategory, IconName> = {
   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
@@ -56,7 +56,7 @@
   point={[x, eventY]}
   {width}
   height={1.25 * fontSizeRatio}
-  fill={active ? '#465977' : ''}
+  fill={active ? '#444CE7' : ''}
 />
 <Line
   startPoint={[x, eventY + 1.25 * fontSizeRatio]}
@@ -119,7 +119,7 @@
   />
 {/each}
 <Line
-  startPoint={[x - 1.5, eventY]}
+  startPoint={[x - 1, eventY]}
   endPoint={[x + width, eventY]}
   strokeWidth={2}
 />

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
@@ -40,7 +40,6 @@
     {#if group.pendingActivity}
       <PendingDetailRow
         event={group.pendingActivity}
-        {canvasWidth}
         {width}
         {x}
         {y}

diff --git a/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte b/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
-  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
+    : '';
 </script>
 
 <g
@@ -86,14 +84,6 @@
       {classification}
       active={isActive}
     />
-    <Icon
-      name={icon}
-      x={width - horizontalOffset - radius}
-      y={zoomY - radius}
-      width={radius * 2}
-      height={radius * 2}
-      class="text-black {!isActive && 'opacity-[.35]'}"
-    />
   {/if}
   {#if eventInViewBox && zoomNextDistance}
     <Line

diff --git a/src/lib/components/lines-and-dots/svg/history-graph-row.svelte b/src/lib/components/lines-and-dots/svg/history-graph-row.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
+  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];
 </script>
 
 <g
@@ -55,8 +60,16 @@
   >
     {event.id}
   </Text>
+  <Icon
+    name={icon}
+    x={visualWidth + 8 * radius}
+    y={y - 1.666 * radius}
+    width={radius * 3}
+    height={radius * 3}
+    class="text-white {!noActives && !isActiveEvent && 'opacity-[.35]'}"
+  />
   <Text
-    point={[visualWidth + 50, y]}
+    point={[visualWidth + 70, y]}
     category={event.category}
     active={noActives || isActiveEvent}
     config={HistoryConfig}

diff --git a/src/lib/components/lines-and-dots/svg/line.svelte b/src/lib/components/lines-and-dots/svg/line.svelte
@@ -32,7 +32,7 @@
     cursor: pointer;
     opacity: 0.15;
     outline: none;
-    stroke: #ebebeb;
+    stroke: #444ce7;
   }
 
   .active {
@@ -79,7 +79,7 @@
   }
 
   .child-workflow {
-    stroke: #b2f8d9;
+    stroke: #67e4f9;
   }
 
   .Completed {

diff --git a/src/lib/components/lines-and-dots/svg/pending-detail-row.svelte b/src/lib/components/lines-and-dots/svg/pending-detail-row.svelte
@@ -24,7 +24,6 @@
   export let event: PendingActivity;
   export let x = 0;
   export let y: number;
-  export let canvasWidth: number;
   export let width: number;
   export let active = false;
 

diff --git a/src/lib/components/lines-and-dots/svg/text.svelte b/src/lib/components/lines-and-dots/svg/text.svelte
@@ -104,7 +104,7 @@
   }
 
   text.child-workflow {
-    fill: #b2f8d9;
+    fill: #67e4f9;
   }
 
   text.workflow {

diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph.svelte b/src/lib/components/lines-and-dots/svg/timeline-graph.svelte
@@ -60,7 +60,6 @@
       startPoint={[canvasWidth - gutter, 0]}
       endPoint={[canvasWidth - gutter, timelineHeight]}
       strokeWidth={radius / 2}
-      status={workflow.status}
     />
     <TimelineAxis
       x1={gutter - radius / 4}

diff --git a/src/lib/holocene/icon/svg/terminal.svelte b/src/lib/holocene/icon/svg/terminal.svelte
@@ -5,6 +5,6 @@
 <Svg {...$$props}>
   <path
     d="M3.44687 6.50625L2.94062 5.95313L4.04687 4.94063L4.55312 5.49375L10.0531 11.4938L10.5187 12L10.0531 12.5063L4.55312 18.5063L4.04687 19.0594L2.94062 18.0469L3.44687 17.4938L8.48125 12L3.44687 6.50625ZM10.75 17.5H20.25H21V19H20.25H10.75H10V17.5H10.75Z"
-    fill="currentcolors"
+    fill="currentcolor"
   />
 </Svg>