From ca3f23d66a5a8b9489a8ed3159e4f0b2860c0808 Mon Sep 17 00:00:00 2001
From: jheer <jeffrey.heer@gmail.com>
Date: Fri, 31 May 2024 16:09:27 -0700
Subject: [PATCH] fix: Fix SVG data lookup to support series.

---
 packages/plot/src/interactors/Highlight.js | 9 ++++++---
 packages/plot/src/interactors/Toggle.js    | 5 ++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/plot/src/interactors/Highlight.js b/packages/plot/src/interactors/Highlight.js
index eddca7c6..28fd57d3 100644
--- a/packages/plot/src/interactors/Highlight.js
+++ b/packages/plot/src/interactors/Highlight.js
@@ -69,7 +69,8 @@ export class Highlight {
     for (let i = 0; i < nodes.length; ++i) {
       const node = nodes[i];
       const base = values[i];
-      const t = test(node.__data__);
+      const data = node.__data__;
+      const t = test(Array.isArray(data) ? data[0] : data);
       // TODO? handle inherited values / remove attributes
       for (let j = 0; j < channels.length; ++j) {
         const [attr, value] = channels[j];
@@ -91,9 +92,11 @@ async function predicateFunction(mark, selection) {
 
   const s = { __: and(pred) };
   const q = mark.query(filter);
-  const p = q.groupby().length ? q.select(s) : q.$select(s);
+  (q.queries || [q]).forEach(q => {
+    q.groupby().length ? q.select(s) : q.$select(s);
+  });
 
-  const data = await mark.coordinator.query(p);
+  const data = await mark.coordinator.query(q);
   const v = data.getChild?.('__');
   return !(data.numRows || data.length) ? (() => false)
     : v ? (i => v.get(i))
diff --git a/packages/plot/src/interactors/Toggle.js b/packages/plot/src/interactors/Toggle.js
index ae191dcb..209e5390 100644
--- a/packages/plot/src/interactors/Toggle.js
+++ b/packages/plot/src/interactors/Toggle.js
@@ -44,7 +44,10 @@ export class Toggle {
   init(svg, selector, accessor) {
     const { mark, as, selection } = this;
     const { data: { columns = {} } = {} } = mark;
-    accessor ??= target => as.map(name => columns[name][target.__data__]);
+    accessor ??= target => as.map(name => {
+      const data = target.__data__;
+      return columns[name][Array.isArray(data) ? data[0] : data];
+    });
     selector ??= `[data-index="${mark.index}"]`;
     const groups = new Set(svg.querySelectorAll(selector));