From ffd2e2d77e91a295f110aabbdb85d690e21ac5ad Mon Sep 17 00:00:00 2001
From: Yann Amsellem <yann@agnostic.engineering>
Date: Fri, 6 Jun 2025 11:58:56 +0200
Subject: [PATCH] feat(datasets): scroll and highlight on editor click

---
 src-tauri/Cargo.lock                    |  2 +-
 src/lib/components/Datasets/Tree.svelte | 26 +++++++++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 7d45903..a18b807 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -19,7 +19,7 @@ checksum = "512761e0bb2578dd7380c6baaa0f4ce03e84f95e960231d1dec8bf4d7d6e2627"
 
 [[package]]
 name = "agx"
-version = "0.3.0"
+version = "0.3.1"
 dependencies = [
  "bindgen",
  "serde_json",
diff --git a/src/lib/components/Datasets/Tree.svelte b/src/lib/components/Datasets/Tree.svelte
index ba24d80..81c2c3f 100644
--- a/src/lib/components/Datasets/Tree.svelte
+++ b/src/lib/components/Datasets/Tree.svelte
@@ -2,6 +2,7 @@
 	import Folder from '$lib/icons/Folder.svelte';
 	import FolderOpen from '$lib/icons/FolderOpen.svelte';
 	import Table from '$lib/icons/Table.svelte';
+	import { tick } from 'svelte';
 	import Columns from './Columns.svelte';
 	import { onExpand } from './emitter';
 	import Tree from './Tree.svelte';
@@ -26,11 +27,22 @@
 	}
 
 	$effect(() =>
-		onExpand((value) => {
-			if (node.type === 'dataset' && node.value === value) expanded = true;
-			else if (node.type === 'group' && findNodeInTree(node.children, value)) expanded = true;
+		onExpand(async (value) => {
+			if (node.type === 'dataset' && node.value === value) {
+				expanded = true;
+				await tick();
+				animateExpand(value);
+			} else if (node.type === 'group' && findNodeInTree(node.children, value)) expanded = true;
 		})
 	);
+
+	function animateExpand(id: string) {
+		const element = document.getElementById(id);
+		if (element) {
+			element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+			element.style.backgroundColor = 'yellow';
+		}
+	}
 </script>
 
 <div class="node" style:opacity={expanded ? 1 : 0.7 + level}>
@@ -53,7 +65,11 @@
 		{/if}
 
 		{#if node.type == 'dataset'}
-			<span class="name">
+			<span
+				class="name"
+				id={node.value}
+				ontransitionend={(e) => (e.currentTarget.style.backgroundColor = '')}
+			>
 				<Table size={10} />
 				<span>{node.name}</span>
 			</span>
@@ -94,6 +110,8 @@
 		display: flex;
 		align-items: center;
 		margin-top: 3px;
+
+		transition: background-color linear 0.25s;
 	}
 
 	.name span {