ui/src/lib/components/lines-and-dots/svg/history-graph-row-visual.svelte at 3eb0277f3f5791dc9a2d6c7aa4a45743195c8322 · temporalio/ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<script lang="ts">
  import type {
    EventGroup,
    EventGroups,
  } from '$lib/models/event-groups/event-groups';
  import { isEvent } from '$lib/models/event-history';
  import { eventFilterSort } from '$lib/stores/event-view';
  import type {
    EventTypeCategory,
    WorkflowEventWithPending,
  } from '$lib/types/events';
  import {
    isPendingActivity,
    isPendingNexusOperation,
  } from '$lib/utilities/is-pending-activity';

  import {
    getNextDistanceAndOffset,
    HistoryConfig,
    isMiddleEvent,
  } from '../constants';

  import Dot from './dot.svelte';
  import Line from './line.svelte';

  interface Props {
    event: WorkflowEventWithPending;
    group: EventGroup;
    history: WorkflowEventWithPending[];
    groups: EventGroups;
    index: number;
    canvasWidth: number;
  }

  let { event, group, history, groups, index, canvasWidth }: Props = $props();

  const { height, radius } = HistoryConfig;
  const strokeWidth = radius / 2;

  const y = $derived(index * height + height / 2);
  const distanceAndOffset = $derived(
    getNextDistanceAndOffset(history, event, groups, height, $eventFilterSort),
  );
  const nextDistance = $derived(distanceAndOffset.nextDistance);
  const offset = $derived(distanceAndOffset.offset);

  const zoomNextDistance = $derived(offset > 0 && nextDistance);

  const classification = $derived(
    isPendingActivity(event) || isPendingNexusOperation(event)
      ? 'pending'
      : event?.classification,
  );

  const horizontalOffset = $derived(offset * 1.75 * radius);
  const nextIsPending = $derived(
    isEvent(event) && group?.lastEvent.id === event?.id && group?.isPending,
  );
  const connectLine = $derived(
    isPendingActivity(event) || isPendingNexusOperation(event) || offset === 0
      ? false
      : !isMiddleEvent(event, groups),
  );
  const category = $derived(
    isPendingActivity(event) || isPendingNexusOperation(event)
      ? 'pending'
      : nextIsPending
        ? event?.category
        : (undefined as EventTypeCategory | 'pending' | undefined),
  );
  const reverseSort = $derived($eventFilterSort === 'descending');
</script>

<g role="button" tabindex="0" class="relative cursor-pointer">
  {#if connectLine}
    <Line
      startPoint={[canvasWidth, y]}
      endPoint={[canvasWidth - horizontalOffset - radius, y]}
    />
  {/if}
  {#if !reverseSort}
    <Dot
      point={[canvasWidth - horizontalOffset, y]}
      {classification}
      strokeWidth={1}
    />
  {/if}
  {#if zoomNextDistance}
    <Line
      startPoint={[
        canvasWidth - horizontalOffset - radius / 2 + strokeWidth,
        y + radius + strokeWidth / 2,
      ]}
      endPoint={[
        canvasWidth - horizontalOffset - radius / 2 + strokeWidth,
        y + zoomNextDistance + radius,
      ]}
      category={group?.pendingActivity
        ? Number(group.pendingActivity.attempt) > 1
          ? 'retry'
          : 'pending'
        : category}
      pending={nextIsPending}
    />
  {/if}
  {#if reverseSort}
    <Dot
      point={[canvasWidth - horizontalOffset, y]}
      {classification}
      strokeWidth={1}
    />
  {/if}
</g>