Add legend to lineage DAG (#418)

## Summary


https://github.com/user-attachments/assets/c0e2ddc7-1ebb-40c1-a541-281153c8f1a9


## Checklist
- [ ] Added Unit Tests
- [ ] Covered by existing CI
- [ ] Integration tested
- [ ] Documentation update
---
- To see the specific tasks where the Asana app for GitHub is being
used, see below:
  - https://app.asana.com/0/0/1209437960912821
  - https://app.asana.com/0/0/1209445122069294
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a dedicated chart legend displaying distinct "Streaming" and
"Batch" items for improved clarity.
  
- **Refactor**
- Updated the main chart layout to utilize a grid structure for better
organization of elements.
  - Streamlined tooltip rendering to enhance visual consistency.

- **Chores**
- Updated the `layerchart` dependency to version `^0.99.4` for potential
improvements and new features.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- av pr metadata
This information is embedded by the av CLI when creating PRs to track
the status of stacks when using Aviator. Please do not delete or edit
this section of the PR.
```
{"parent":"main","parentHead":"","trunk":"main"}
```
-->

---------

Co-authored-by: Sean Lynch <[email protected]>

Author: sean-zlai

frontend/package-lock.json

@@ -67,7 +67,7 @@
 		"clsx": "^2.1.1",
 		"d3": "^7.9.0",
 		"dotenv": "^16.4.7",
-		"layerchart": "^0.99.2",
+		"layerchart": "^0.99.4",
 		"lodash": "^4.17.21",
 		"svelte-inspect-value": "0.2.0",
 		"tailwind-merge": "^2.6.0",

frontend/package.json

@@ -6,8 +6,11 @@
 		Dagre,
 		Group,
 		Html,
+		Line,
+		Rect,
 		Spline,
 		Svg,
+		Text,
 		Tooltip,
 		ancestors,
 		descendants
@@ -156,7 +159,7 @@
 <Separator fullWidthExtend={true} wide={true} />
 
 <div class="flex-1 flex py-4">
-	<div class="flex-1 border rounded">
+	<div class="flex-1 border rounded grid grid-stack">
 		<Chart
 			data={chartData}
 			transform={{
@@ -166,6 +169,8 @@
 			}}
 			padding={{ top: 60, bottom: 20, left: 20, right: 20 }}
 			let:tooltip
+			let:width
+			let:height
 		>
 			<TransformControls />
 
@@ -308,6 +313,62 @@
 				</Dagre>
 			</div>
 
+			<!-- Put legend in separate SVG layer to not be affected by transform (pan/zoom) -->
+			<Svg ignoreTransform>
+				{@const legendWidth = 200}
+				{@const legendHeight = 90}
+				{@const legendPadding = 20}
+				{@const legendLabelWidth = 72}
+				{@const legendItems = [
+					{
+						label: 'Batch',
+						class:
+							'stroke-purple-500 stroke-[2] [stroke-dasharray:30_100] [stroke-dashoffset:130] animate-dashoffset-0.5x'
+					},
+					{
+						label: 'Streaming',
+						class:
+							'stroke-blue-500 stroke-[2] [stroke-dasharray:10_10] [stroke-dashoffset:20] animate-dashoffset-2x'
+					}
+				]}
+
+				<Group x={width - legendWidth} y={height - legendHeight}>
+					<Rect
+						x={0}
+						y={0}
+						width={legendWidth}
+						height={legendHeight}
+						class="fill-neutral-100 stroke-border"
+						rx={8}
+					/>
+					<Text
+						value="Legend"
+						x={legendPadding}
+						y={24}
+						width={legendWidth}
+						textAnchor="start"
+						class="text-sm fill-surface-content font-bold"
+					/>
+					<Group y={24}>
+						{#each legendItems as item, i (item.label)}
+							<Text
+								value={item.label}
+								x={legendPadding}
+								y={24 + i * 24}
+								class="text-xs fill-surface-content/50"
+							/>
+							<Line
+								x1={legendPadding + legendLabelWidth}
+								y1={20 + i * 24}
+								x2={legendWidth - legendPadding}
+								y2={20 + i * 24}
+								class={item.class}
+							/>
+						{/each}
+					</Group>
+				</Group>
+			</Svg>
+
 			{#if !hideTooltip}
 				<Tooltip.Root {...tooltipProps.root} contained="window" xOffset={0} yOffset={30} let:data>
 					<Tooltip.List {...tooltipProps.list}>
@@ -338,7 +399,6 @@
 						{/if}
 
 						<!-- EntitySource -->
-
 						{#each ['table', 'snapshotTable', 'mutationTable', 'mutationTopic'] as prop}
 							{#if data.value.conf[prop] !== undefined}
 								<Tooltip.Item