From c4976f726de218f451b4b66ef12f07a9aba2a68a Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 28 Apr 2026 22:58:39 +0200
Subject: [PATCH 1/5] chore: bump vue-data-ui from 3.18.0 to 3.18.2

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 575287b1a8..27ed81df86 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.1.16",
     "vue": "3.5.33",
-    "vue-data-ui": "3.18.0",
+    "vue-data-ui": "3.18.2",
     "vue-router": "5.0.4"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c784735fe7..ce31753f13 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -249,8 +249,8 @@ importers:
         specifier: 3.5.33
         version: 3.5.33(typescript@6.0.2)
       vue-data-ui:
-        specifier: 3.18.0
-        version: 3.18.0(vue@3.5.33)
+        specifier: 3.18.2
+        version: 3.18.2(vue@3.5.33)
       vue-router:
         specifier: 5.0.4
         version: 5.0.4(@vue/compiler-sfc@3.5.33)(vue@3.5.33)
@@ -11129,8 +11129,8 @@ packages:
   vue-component-type-helpers@3.2.7:
     resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
 
-  vue-data-ui@3.18.0:
-    resolution: {integrity: sha512-sPCYLVEMC4sVe7kf3qEf5VkIkkflCg95/jsMdveR8r3C6d6fga/50lRPd3wK14wFI1Mkt3cd4X3r3x3wgONLww==}
+  vue-data-ui@3.18.2:
+    resolution: {integrity: sha512-BJP+YMrJeAdVnT2rmBsZBe+rHksReCHrzFM8MYXAgndgAdPJlzsLigylwflLhm9sndQeAt6ihCslX0VIU+nyUQ==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -23836,7 +23836,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.7: {}
 
-  vue-data-ui@3.18.0(vue@3.5.33):
+  vue-data-ui@3.18.2(vue@3.5.33):
     dependencies:
       vue: 3.5.33(typescript@6.0.2)
 

From e21dcb567a0ff22d7b98d0a852717249ffb2d06f Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Tue, 28 Apr 2026 22:59:20 +0200
Subject: [PATCH 2/5] feat: highlight scatter datapoints from its legend

---
 app/components/Compare/FacetScatterChart.vue | 43 ++++++++++++++++----
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 9167a33060..928ba8c706 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -395,19 +395,27 @@ onMounted(async () => {
                       :aria-label="datapoint.name"
                       type="button"
                       class="flex gap-1.5 place-items-center"
-                      @click="datapoint.segregate()"
+                      :class="{
+                        'hover:underline': !datapoint.isSegregated,
+                        'line-through': datapoint.isSegregated,
+                      }"
+                      @click="
+                        () => {
+                          datapoint.segregate()
+                          datapoint.onEnter()
+                        }
+                      "
+                      @mouseenter="datapoint.onEnter()"
+                      @mouseleave="datapoint.onLeave()"
+                      @focus="datapoint.onEnter()"
+                      @blur="datapoint.onLeave()"
                     >
                       <div class="h-3 w-3" aria-hidden="true">
                         <svg viewBox="0 0 2 2" class="w-full">
                           <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
                         </svg>
                       </div>
-                      <span
-                        class="text-fg"
-                        :style="{
-                          textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
-                        }"
-                      >
+                      <span class="text-fg">
                         {{ datapoint.name }}
                       </span>
                     </button>
@@ -559,14 +567,35 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+:deep(.vue-data-ui-component) {
+  --super-ease-out: cubic-bezier(0.15, 0.75, 0.35, 1);
+}
+
 :deep(.vue-data-ui-component svg:focus-visible) {
   outline: 1px solid var(--accent) !important;
   border-radius: 0.1rem;
   outline-offset: 0;
 }
+
 :deep(.vue-ui-user-options-button:focus-visible),
 :deep(.vue-ui-user-options :first-child:focus-visible) {
   outline: 0.1rem solid var(--accent) !important;
   border-radius: 0.25rem;
 }
+
+:deep(.vue-ui-scatter-scale-group),
+:deep(.vue-ui-scatter-datapoint text),
+:deep(.vue-ui-scatter-datapoint circle),
+:deep(.vue-ui-scatter-datapoint-label) {
+  transition: all 0.5s var(--super-ease-out) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :deep(.vue-ui-scatter-scale-group),
+  :deep(.vue-ui-scatter-datapoint text),
+  :deep(.vue-ui-scatter-datapoint circle),
+  :deep(.vue-ui-scatter-datapoint-label) {
+    transition: none !important;
+  }
+}
 </style>

From 15498c86cc14e05fca0bf052b64bfff9064e3436 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 29 Apr 2026 11:25:01 +0200
Subject: [PATCH 3/5] fix: refactor

---
 app/components/Compare/FacetScatterChart.vue | 36 +++++++++-----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 928ba8c706..63cca9f3ba 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -5,6 +5,7 @@ import {
   VueUiScatter,
   type VueUiScatterConfig,
   type VueUiScatterDatasetItem,
+  type VueUiScatterSeries,
 } from 'vue-data-ui/vue-ui-scatter'
 import { buildCompareScatterChartDataset } from '~/utils/compare-scatter-chart'
 import { loadFile, copyAltTextForCompareScatterChart } from '~/utils/charts'
@@ -285,6 +286,11 @@ function toggleAxisHighlight(state: AxisHighlight) {
   highlightedAxis.value = state
 }
 
+function toggleLegendItem(legendItem: VueUiScatterSeries) {
+  legendItem.segregate()
+  legendItem.onEnter()
+}
+
 const readyTeleport = shallowRef(false)
 
 onMounted(async () => {
@@ -389,34 +395,26 @@ onMounted(async () => {
                       : 'text-sm leading-6'
                   "
                 >
-                  <li v-for="datapoint in legend" :key="datapoint.name">
+                  <li v-for="legendItem in legend" :key="legendItem.name">
                     <button
-                      :aria-pressed="datapoint.isSegregated"
-                      :aria-label="datapoint.name"
+                      :aria-pressed="legendItem.isSegregated"
+                      :aria-label="legendItem.name"
                       type="button"
                       class="flex gap-1.5 place-items-center"
-                      :class="{
-                        'hover:underline': !datapoint.isSegregated,
-                        'line-through': datapoint.isSegregated,
-                      }"
-                      @click="
-                        () => {
-                          datapoint.segregate()
-                          datapoint.onEnter()
-                        }
-                      "
-                      @mouseenter="datapoint.onEnter()"
-                      @mouseleave="datapoint.onLeave()"
-                      @focus="datapoint.onEnter()"
-                      @blur="datapoint.onLeave()"
+                      :class="legendItem.isSegregated ? 'line-through' : 'hover:underline'"
+                      @click="() => toggleLegendItem(legendItem)"
+                      @mouseenter="legendItem.onEnter()"
+                      @mouseleave="legendItem.onLeave()"
+                      @focus="legendItem.onEnter()"
+                      @blur="legendItem.onLeave()"
                     >
                       <div class="h-3 w-3" aria-hidden="true">
                         <svg viewBox="0 0 2 2" class="w-full">
-                          <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
+                          <circle cx="1" cy="1" r="1" :fill="legendItem.color" />
                         </svg>
                       </div>
                       <span class="text-fg">
-                        {{ datapoint.name }}
+                        {{ legendItem.name }}
                       </span>
                     </button>
                   </li>

From e7a03c10550d5610410698aabbfeb5c2f4d61901 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 29 Apr 2026 11:30:52 +0200
Subject: [PATCH 4/5] fix: refactor

---
 app/components/Compare/FacetScatterChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 63cca9f3ba..f3eda12ab4 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -402,7 +402,7 @@ onMounted(async () => {
                       type="button"
                       class="flex gap-1.5 place-items-center"
                       :class="legendItem.isSegregated ? 'line-through' : 'hover:underline'"
-                      @click="() => toggleLegendItem(legendItem)"
+                      @click="toggleLegendItem(legendItem)"
                       @mouseenter="legendItem.onEnter()"
                       @mouseleave="legendItem.onLeave()"
                       @focus="legendItem.onEnter()"

From 96d992b3c19afaf466a1106b5e19def5210df4a6 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 29 Apr 2026 11:36:18 +0200
Subject: [PATCH 5/5] fix: use id as key

---
 app/components/Compare/FacetScatterChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index f3eda12ab4..9f3cdc332b 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -395,7 +395,7 @@ onMounted(async () => {
                       : 'text-sm leading-6'
                   "
                 >
-                  <li v-for="legendItem in legend" :key="legendItem.name">
+                  <li v-for="legendItem in legend" :key="legendItem.id">
                     <button
                       :aria-pressed="legendItem.isSegregated"
                       :aria-label="legendItem.name"