highlight series based on tooltip

Author: ken-zlai

frontend/src/lib/components/charts/FeaturesLineChart.svelte

@@ -81,7 +81,14 @@
 		{/if}
 	</svelte:fragment>
 
-	<svelte:fragment slot="tooltip" let:x let:y let:height let:visibleSeries>
+	<svelte:fragment
+		slot="tooltip"
+		let:x
+		let:y
+		let:height
+		let:visibleSeries
+		let:setHighlightSeriesKey
+	>
 		<Tooltip.Root {...tooltipProps.root} x="data" y={height + 24} pointerEvents let:data>
 			<Tooltip.Header {...tooltipProps.header}>
 				{formatDate(x(data))}
@@ -96,6 +103,8 @@
 					<button
 						class="col-span-full grid grid-cols-[1fr,auto] gap-6 hover:bg-neutral-400 py-2 px-3 rounded"
 						onclick={() => onitemclick?.({ series: s, data: seriesTooltipData, value })}
+						onmouseenter={() => setHighlightSeriesKey(s.key)}
+						onmouseleave={() => setHighlightSeriesKey(null)}
 					>
 						<Tooltip.Item
 							label={s.label ?? (s.key !== 'default' ? s.key : 'value')}