feat(tracing): display more info in the lifecycle view

packages/core/tracing/src/components/lifecycle/LifecycleEdgeSeamlessSmoothstep.vue

@@ -0,0 +1,75 @@
+<template>
+  <BaseEdge
+    v-bind="props"
+    :path="path[0]"
+  />
+</template>
+
+<script lang="ts" setup>
+import { BaseEdge, getSmoothStepPath, Position, type EdgeProps, type SmoothStepEdgeProps } from '@vue-flow/core'
+import { computed, defineComponent } from 'vue'
+import type { LifecycleEdgeData } from '../../types'
+
+defineComponent({
+  inheritAttrs: false,
+})
+
+// We are extending the "smoothstep"-typed edge
+const props = defineProps<SmoothStepEdgeProps & Pick<EdgeProps<LifecycleEdgeData>, 'data'>>()
+
+// Hardcoded from VueFlow's source
+const HANDLE_SIZE = 4
+const HANDLE_RADIUS = HANDLE_SIZE / 2
+
+/**
+ * This is to move the source/target X/Y nearer to the node to reduce the gap between edge start/end and the node
+ */
+const path = computed(() => {
+  let {
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  } = props
+
+  switch (sourcePosition) {
+    case Position.Top:
+      sourceY += HANDLE_RADIUS
+      break
+    case Position.Bottom:
+      sourceY -= HANDLE_RADIUS
+      break
+    case Position.Left:
+      sourceX += HANDLE_RADIUS
+      break
+    case Position.Right:
+      sourceX -= HANDLE_RADIUS
+      break
+  }
+
+  switch (targetPosition) {
+    case Position.Top:
+      targetY += HANDLE_RADIUS
+      break
+    case Position.Bottom:
+      targetY -= HANDLE_RADIUS
+      break
+    case Position.Left:
+      targetX += HANDLE_RADIUS
+      break
+    case Position.Right:
+      targetX -= HANDLE_RADIUS
+      break
+  }
+
+  return getSmoothStepPath({
+    ...props,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  })
+})
+</script>

packages/core/tracing/src/components/lifecycle/LifecycleLegend.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="legend">
+    <!-- Hide total latency for now -->
+    <div class="latency">
+      <span>{{ t('lifecycle.total') }}: </span>
+      <span>{{ fmt(props.rootSpan.durationNano) }}</span>
+    </div>
+
+    <div
+      v-for="color in colors"
+      :key="color.color"
+      class="color"
+    >
+      <div
+        class="preview"
+        :style="{ backgroundColor: color.color }"
+      />
+
+      <div class="label">
+        {{ color.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import composables from '../../composables'
+import { NODE_STRIPE_COLOR_MAPPING, NODE_STRIPE_COLOR_MAPPING_START_EXP } from '../../constants'
+import type { SpanNode } from '../../types'
+import { getDurationFormatter } from '../../utils'
+
+const props = defineProps<{
+  rootSpan: SpanNode
+}>()
+
+const fmt = getDurationFormatter()
+const { i18n: { t } } = composables.useI18n()
+
+// No need to be reactive
+const colors = NODE_STRIPE_COLOR_MAPPING.toReversed().map((color, i) => {
+  const ri = (NODE_STRIPE_COLOR_MAPPING.length - 1 - i)
+  return {
+    label: `${
+      fmt(10 ** (NODE_STRIPE_COLOR_MAPPING_START_EXP + ri))
+    } - ${
+      fmt(10 ** (NODE_STRIPE_COLOR_MAPPING_START_EXP + ri + (i === 0 ? 2 : 1)))
+    }${
+      i === 0 ? '+' : ''
+    }`,
+    color,
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.legend {
+  background-color: $kui-color-background;
+  bottom: 0;
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08); // Align with VueFlow built-in Control
+  font-size: $kui-font-size-20;
+  margin: $kui-space-60;
+  padding: $kui-space-20 $kui-space-40;
+  position: absolute;
+  right: 0;
+  z-index: 1000;
+
+  .color {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $kui-space-20;
+    justify-content: flex-start;
+
+    .preview {
+      border-radius: $kui-border-radius-10;
+      height: 10px;
+      width: 10px;
+    }
+
+    .label {
+      font-size: $kui-font-size-20;
+    }
+  }
+}
+</style>