@mhkeller/vgplot-dot-gl 1.0.0

package/src/shared-gl.js

@@ -0,0 +1,202 @@
+import { VERTEX, FRAGMENT, UNIFORMS } from './shaders.js';
+
+/**
+ * One WebGL context for the whole page. Every dot mark draws its points here and
+ * then copies the picture into its own small canvas inside its plot. Sharing one
+ * context keeps a page full of plots well under the browser's limit on how many
+ * WebGL contexts can be alive at once.
+ *
+ * There are two ways to copy the picture out, and the choice is made once for the
+ * whole page by the first mark that asks:
+ * - 'drawImage': a plain canvas that isn't on the page; each plot's 2D canvas
+ *   draws from it. This is the default and the fast path on every engine today.
+ *   Chrome reuses the texture already on the graphics card, and Firefox 140 fixed
+ *   the readback this used to cost (bug 1938053).
+ * - 'bitmaprenderer': an OffscreenCanvas; each frame is handed over as an
+ *   ImageBitmap. In theory this hands over the pixels without copying, but both
+ *   Firefox (bug 1788206) and Safari (WebKit 234920) still read the whole image
+ *   back to the processor first, so it is the slower one on two engines out of
+ *   three. It is kept for measuring, not for use.
+ */
+
+// Two library copies on one page share this record, so bump the number when the shaders, the attribute layout or the state object's methods change.
+const KEY = Symbol.for('vgplot-dot-gl/shared-gl@1');
+
+/**
+ * The page-wide record, made the first time it is read. `generation` counts contexts and context
+ * losses over the life of the page, so data left over from an old context is never used as if it were still there.
+ */
+const page = () => (globalThis[KEY] ??= { shared: null, unsupported: false, generation: 0 });
+
+const CORNERS = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
+
+function compile(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`dotGL: shader failed to compile: ${log}`);
+  }
+  return shader;
+}
+
+function buildProgram(gl) {
+  const program = gl.createProgram();
+  gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERTEX));
+  gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, FRAGMENT));
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(`dotGL: program failed to link: ${gl.getProgramInfoLog(program)}`);
+  }
+  const uniforms = {};
+  for (const name of UNIFORMS) uniforms[name.slice(2)] = gl.getUniformLocation(program, name);
+  return { program, uniforms };
+}
+
+function setup(state) {
+  const { gl } = state;
+  Object.assign(state, buildProgram(gl));
+  state.quad = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.quad);
+  gl.bufferData(gl.ARRAY_BUFFER, CORNERS, gl.STATIC_DRAW);
+  state.palette = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, state.palette);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 256, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+  state.width = 0;
+  state.height = 0;
+}
+
+/**
+ * The shared context, made the first time someone asks. Returns null when the
+ * browser has no WebGL2, in which case the mark draws with plain canvas squares.
+ * @param {'drawImage'|'bitmaprenderer'} [blit]
+ */
+export function getSharedGL(blit = 'drawImage') {
+  const record = page();
+  if (record.shared) return record.shared;
+  if (record.unsupported || typeof document === 'undefined') return null;
+  const offscreen = blit === 'bitmaprenderer' && typeof OffscreenCanvas !== 'undefined';
+  const canvas = offscreen ? new OffscreenCanvas(1, 1) : document.createElement('canvas');
+  const gl = canvas.getContext('webgl2', {
+    alpha: true,
+    premultipliedAlpha: true,
+    antialias: false,
+    depth: false,
+    stencil: false,
+    preserveDrawingBuffer: false
+  });
+  if (!gl) {
+    record.unsupported = true;
+    return null;
+  }
+  const state = {
+    canvas,
+    gl,
+    blit: offscreen ? 'bitmaprenderer' : 'drawImage',
+    /** Marks that currently have data stored here. */
+    refs: new Set(),
+    /** Goes up when the context is lost, so we know the stored data is gone. */
+    generation: ++record.generation,
+    lost: false,
+    maxSize: gl.getParameter(gl.MAX_RENDERBUFFER_SIZE)
+  };
+  setup(state);
+
+  canvas.addEventListener('webglcontextlost', event => {
+    event.preventDefault();
+    state.lost = true;
+    state.generation = ++page().generation;
+  });
+  canvas.addEventListener('webglcontextrestored', () => {
+    setup(state);
+    state.lost = false;
+    for (const mark of state.refs) mark.plot?.update();
+  });
+
+  /** Make the drawing area big enough for a plot of this size (in device pixels). */
+  state.ensureSize = (pw, ph) => {
+    const w = Math.min(state.maxSize, offscreen ? pw : Math.max(state.width, pw));
+    const h = Math.min(state.maxSize, offscreen ? ph : Math.max(state.height, ph));
+    if (w !== state.width || h !== state.height || canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+      state.width = w;
+      state.height = h;
+    }
+  };
+
+  /** Clear a plot-sized area in the top-left corner and set up blending. */
+  state.beginPlot = (pw, ph) => {
+    state.ensureSize(pw, ph);
+    gl.viewport(0, state.height - ph, pw, ph);
+    gl.scissor(0, state.height - ph, pw, ph);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.disable(gl.DEPTH_TEST);
+    gl.useProgram(state.program);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, state.palette);
+    gl.uniform1i(state.uniforms.palette, 0);
+  };
+
+  /** Send up the first `rows` rows of the 256×256 palette (color i sits at column i % 256, row i / 256). */
+  state.setPalette = (rgba, rows) => {
+    gl.bindTexture(gl.TEXTURE_2D, state.palette);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 256, rows, gl.RGBA, gl.UNSIGNED_BYTE, rgba);
+  };
+
+  /** One number per dot, stored on the graphics card and wired to `location` in the current vertex array. */
+  state.attrib = (location, array, type = gl.FLOAT) => {
+    const buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(location);
+    gl.vertexAttribPointer(location, 1, type, false, 0, 0);
+    gl.vertexAttribDivisor(location, 1);
+    return buffer;
+  };
+
+  /** Wire the square's corners to slot 0 (one per vertex, not per dot). */
+  state.bindQuad = () => {
+    gl.bindBuffer(gl.ARRAY_BUFFER, state.quad);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribDivisor(0, 0);
+  };
+
+  /** Copy the plot-sized area into the mark's own canvas. */
+  state.blitTo = (target, pw, ph) => {
+    if (offscreen) {
+      const bitmap = canvas.transferToImageBitmap();
+      target.getContext('bitmaprenderer').transferFromImageBitmap(bitmap);
+      return;
+    }
+    const ctx = target.getContext('2d');
+    ctx.globalCompositeOperation = 'copy';
+    ctx.drawImage(canvas, 0, 0, pw, ph, 0, 0, pw, ph);
+  };
+
+  record.shared = state;
+  return state;
+}
+
+/** Let go of the shared context. For tests and page teardown; live marks send their data again on their next draw. */
+export function disposeSharedGL() {
+  const record = page();
+  const state = record.shared;
+  if (!state) return;
+  for (const mark of Array.from(state.refs)) mark.gpu = null;
+  state.refs.clear();
+  state.generation = ++record.generation;
+  state.gl.getExtension('WEBGL_lose_context')?.loseContext();
+  record.shared = null;
+}

package/src/tip.js

@@ -0,0 +1,438 @@
+import { Query, column, eq, literal } from '@uwdata/mosaic-sql';
+import { buildPickIndex, pickDot } from './pick.js';
+
+/** The name the key column comes back under in the mark's data. */
+export const KEY_AS = '__dotgl_key';
+
+/** How far outside the dot the ring around it sits. */
+const RING_PAD = 0;
+
+/** Clear space between that ring and the tooltip, so the two don't crowd the pointer. */
+const TIP_GAP = 45;
+
+/** A paint this new doesn't get a pick index yet, so moving the pointer during a wheel zoom builds none. */
+const QUIET_MS = 150;
+
+/** How long the pointer rests on a dot before its extra fields are looked up. */
+const REST_MS = 100;
+
+const SVG = 'http://www.w3.org/2000/svg';
+const NUMBER = new Intl.NumberFormat('en-US');
+const NO_FIELDS = [];
+
+/** Default looks. `:where()` gives them no specificity, so any page CSS wins. */
+const STYLE = `
+:where(.dotgl-tip) { z-index: 10; pointer-events: none; background: #fff; color: #222; border: 1px solid #ccc; border-radius: 3px; padding: 4px 6px; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
+:where(.dotgl-tip th) { color: #555; font-weight: normal; text-align: left; padding: 0 8px 0 0; }
+:where(.dotgl-tip td) { padding: 0; }
+:where(.dotgl-swatch) { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
+`;
+
+/**
+ * Arrow's type number for a time of day, from the Arrow format itself, and what to
+ * multiply each of its units by to get milliseconds. A time has no JavaScript
+ * equivalent, so it arrives as a plain integer counting whatever unit the column
+ * uses, unlike a date or a timestamp which arrive as Date objects.
+ */
+const ARROW_TIME = 9;
+const TO_MS = [1e3, 1, 1e-3, 1e-6];
+
+/** The SQL types that carry a time zone, so their values really are instants in UTC. */
+const ZONED = new Set(['TIMESTAMPTZ', 'TIMESTAMP WITH TIME ZONE']);
+
+/** The time of day of an epoch time, with a trailing zero seconds or milliseconds left off. */
+function timeOfDay(ms) {
+  return new Date(ms)
+    .toISOString()
+    .slice(11, 23)
+    .replace(/\.000$/, '')
+    .replace(/:00$/, '');
+}
+
+/**
+ * An epoch time as ISO, with a trailing zero seconds or milliseconds left off. A
+ * timestamp column keeps its time even at midnight, so every row of one column reads the
+ * same way; a bare Date, whose column type isn't known, drops it the way Plot does.
+ * `zone` is 'Z' only for a type that carries one: a plain DuckDB TIMESTAMP says nothing
+ * about where it is from.
+ */
+function isoStamp(ms, zone, keepTime) {
+  const iso = new Date(ms).toISOString();
+  const time = timeOfDay(ms);
+  return !keepTime && time === '00:00'
+    ? iso.slice(0, 10)
+    : `${iso.slice(0, 10)}T${time}${zone}`;
+}
+
+/**
+ * A value as tooltip text.
+ *
+ * `kind` says how to read it: the column's SQL type when the column holds epoch
+ * milliseconds that stand for a date, or true for a Date object whose type isn't known.
+ * `fmt` is a tick format the page set for this scale, which wins when there is one, so
+ * the tooltip and the axis read the same.
+ */
+function format(value, kind, fmt) {
+  const stamp = kind && typeof value === 'number';
+  const isDate = value instanceof Date || stamp;
+  if (isDate && !Number.isFinite(+value)) return '';
+  if (typeof value === 'number' && Number.isNaN(value)) return '';
+  // The axis hands a time scale's format a Date, so this does too.
+  if (fmt && value != null)
+    return String(fmt(stamp ? new Date(+value) : value));
+  if (isDate) {
+    const ms = +value;
+    if (kind === 'DATE') return new Date(ms).toISOString().slice(0, 10);
+    if (kind === 'TIME') return timeOfDay(ms);
+    return isoStamp(ms, ZONED.has(kind) ? 'Z' : '', typeof kind === 'string');
+  }
+  if (typeof value === 'number') return NUMBER.format(value);
+  return value == null ? '' : String(value);
+}
+
+/**
+ * The tooltip of a DotGLMark, added to its plot as a Mosaic interactor. It finds the
+ * dot under the pointer in what the mark last painted, rings it, and shows its group
+ * columns, x, y, fill and r next to it. Extra fields are looked up by key, one row at a time, once
+ * the pointer rests, and kept in `mark.tipRows`.
+ */
+export class DotGLTip {
+  constructor(mark, { fields = null, maxRadius = 40 } = {}) {
+    this.mark = mark;
+    this.fields = fields;
+    this.maxRadius = maxRadius;
+    /** Columns the tip shows from the mark's own data. Extra fields with these names are left out. */
+    this.names = ['x', 'y', 'fill', 'r']
+      .map(name => mark.channelField(name, { exact: true })?.as)
+      .filter(Boolean);
+    this.svg = null;
+    this.index = null;
+    this.ring = null;
+    this.tip = null;
+    /** The pick on screen, and its key when it has extra fields. */
+    this.shown = null;
+    this.shownId = null;
+    /** The key whose extra fields are looked up next. */
+    this.wanted = null;
+    /** The field list `mark.tipRows` was filled for, and the fields in it the tip looks up. */
+    this.fieldsFor = null;
+    /** The kind of each extra field whose values need one to read right, filled in as rows arrive. */
+    this.extraKinds = {};
+    this.extras = NO_FIELDS;
+    this.clientX = 0;
+    this.clientY = 0;
+    /** Whether the pointer is over the plot with no button held. */
+    this.over = false;
+    this.raf = 0;
+    /** What the first tip does when the pointer leaves the plot. */
+    this.leave = null;
+    this.quietTimer = null;
+    this.restTimer = null;
+    this.busy = false;
+    this.warned = false;
+  }
+
+  /**
+   * Mosaic calls this on every interactor with each new SVG, before it replaces the old one. The plot's
+   * first DotGLTip listens to the pointer and picks for all of them, so the plot shows one tip at a time.
+   */
+  init(svg) {
+    this.hide();
+    this.svg = svg;
+    const tips = this.mark.plot.interactors.filter(i => i instanceof DotGLTip);
+    if (tips[0] !== this) return;
+    const el = this.mark.plot.element;
+    // A redraw comes with no pointer event, so a pointer still over the plot is picked again from the new paint.
+    // A plot taken out of the page and put back hears no leave, so `:hover` confirms the pointer is still there.
+    if (this.over && el.matches(':hover'))
+      this.raf ||= requestAnimationFrame(() => this.update(tips));
+    svg.addEventListener('pointermove', e => {
+      this.over = !e.buttons;
+      if (e.buttons) return this.stop(tips);
+      this.clientX = e.clientX;
+      this.clientY = e.clientY;
+      this.raf ||= requestAnimationFrame(() => this.update(tips));
+    });
+    // A pointer that leaves right after a redraw gets no leave event from the new SVG, which it never entered, so the plot element that holds every SVG listens too.
+    if (!this.leave) {
+      this.leave = () => {
+        this.over = false;
+        this.stop(tips);
+        for (const tip of tips) tip.index = null;
+      };
+      el.addEventListener('pointerleave', this.leave);
+    }
+    svg.addEventListener('pointerleave', this.leave);
+  }
+
+  /** Hides every tip on the plot and drops the pick waiting to run. */
+  stop(tips) {
+    for (const tip of tips) tip.hide();
+    cancelAnimationFrame(this.raf);
+    clearTimeout(this.quietTimer);
+    this.raf = 0;
+  }
+
+  /** Picks the dot under the last pointer position in each tip's mark and shows the closest. On a tie the later mark, drawn on top, wins. */
+  update(tips) {
+    this.raf = 0;
+    const at = new DOMPoint(this.clientX, this.clientY).matrixTransform(
+      this.svg.getScreenCTM().inverse(),
+    );
+    let best = null;
+    let owner = null;
+    for (const tip of tips) {
+      const { mark } = tip;
+      const paint = mark.lastPaint;
+      if (mark.destroyed || !paint || paint.prep !== mark.prep) continue;
+      if (tip.index?.paint !== paint) {
+        const wait = QUIET_MS - (performance.now() - paint.at);
+        if (wait > 0) {
+          clearTimeout(this.quietTimer);
+          this.quietTimer = setTimeout(() => this.update(tips), wait);
+          return;
+        }
+        tip.index = buildPickIndex(mark, paint);
+      }
+      const hit = pickDot(
+        tip.index,
+        at.x - paint.frame.fx,
+        at.y - paint.frame.fy,
+        tip.maxRadius,
+      );
+      if (hit && (!best || hit.key <= best.key)) {
+        best = hit;
+        owner = tip;
+      }
+    }
+    for (const tip of tips) if (tip !== owner) tip.hide();
+    if (owner && best.j !== owner.shown?.j) owner.show(best);
+  }
+
+  /** Rings the picked dot, shows its tip, and starts the rest timer for its extra fields when they aren't known yet. */
+  show(hit) {
+    const { mark, svg } = this;
+    const { frame } = this.index.paint;
+    const doc = svg.ownerDocument;
+    this.hide();
+    this.shown = hit;
+
+    if (!this.ring) {
+      this.ring = doc.createElementNS(SVG, 'circle');
+      this.ring.setAttribute('class', 'dotgl-ring');
+      this.ring.setAttribute('pointer-events', 'none');
+      this.ring.setAttribute('fill', 'none');
+      this.ring.setAttribute('stroke', 'currentColor');
+      this.tip = doc.createElement('div');
+      this.tip.className = 'dotgl-tip';
+      this.tip.setAttribute('aria-hidden', 'true');
+      if (!doc.head.querySelector('style[data-dotgl-tip]')) {
+        const style = doc.head.appendChild(doc.createElement('style'));
+        style.dataset.dotglTip = '';
+        style.textContent = STYLE;
+      }
+    }
+    this.ring.setAttribute('cx', hit.px + frame.fx);
+    this.ring.setAttribute('cy', hit.py + frame.fy);
+    this.ring.setAttribute('r', hit.r + RING_PAD);
+    svg.appendChild(this.ring);
+
+    // Fields are read now, so the page can change a Param holding them without rebuilding the plot.
+    const list = Array.isArray(this.fields)
+      ? this.fields
+      : (this.fields?.value ?? NO_FIELDS);
+    if (list !== this.fieldsFor) {
+      mark.tipRows = new Map();
+      this.fieldsFor = list;
+      this.extraKinds = {};
+      this.extras = list.filter(name => !this.names.includes(name));
+    }
+    if (this.extras.length) {
+      const id = mark.data.columns[KEY_AS][hit.j];
+      this.shownId = id;
+      // The row becomes wanted only once the pointer rests, so a lookup that finishes mid-sweep doesn't
+      // start one for the row the pointer is passing. A row without a key is never looked up.
+      if (!mark.tipRows.has(id)) {
+        this.restTimer = setTimeout(() => {
+          this.wanted = id;
+          this.fetch();
+        }, REST_MS);
+      }
+    }
+    this.draw();
+  }
+
+  /** Fills the tip with the shown dot's values and places it next to the dot. Extra fields not looked up yet show '…'. */
+  draw() {
+    const {
+      mark,
+      svg,
+      tip,
+      shown: { j, px, py, r },
+    } = this;
+    const { frame, prep, style, labels, formats = {} } = this.index.paint;
+    const doc = tip.ownerDocument;
+    const table = doc.createElement('table');
+    // Values are user data, so they only ever go in as text.
+    const row = (label, text, color) => {
+      const tr = table.appendChild(doc.createElement('tr'));
+      tr.appendChild(doc.createElement('th')).textContent = label;
+      const td = tr.appendChild(doc.createElement('td'));
+      if (color) {
+        const swatch = td.appendChild(doc.createElement('span'));
+        swatch.className = 'dotgl-swatch';
+        swatch.style.background = color;
+      }
+      td.append(text);
+    };
+    const channel = name => mark.channelField(name, { exact: true });
+    const value = name => mark.data.columns[channel(name).as][j];
+    const fill = channel('fill');
+    const code = prep.codes[j];
+    const p = style.palette;
+    const color =
+      fill &&
+      `rgba(${p[code * 4]}, ${p[code * 4 + 1]}, ${p[code * 4 + 2]}, ${p[code * 4 + 3] / 255})`;
+    // A group column that is also the fill column shows once, as that group's row with the swatch.
+    const fillGroup =
+      fill && mark.groups.find(g => g.name === fill.field.column);
+    // The group columns come first: they say which group the dot is.
+    for (const group of mark.groups)
+      row(
+        group.name,
+        format(mark.data.columns[group.as][j]),
+        group === fillGroup && color,
+      );
+    for (const name of ['x', 'y']) {
+      const cats = prep[`${name}Cats`];
+      row(
+        labels[name] ?? channel(name).as,
+        format(
+          cats ? cats[value(name)] : value(name),
+          prep.dates[name],
+          formats[name],
+        ),
+      );
+    }
+    if (fill && !fillGroup) {
+      row(
+        fill.as,
+        prep.continuous
+          ? format(value('fill'), prep.dates.fill, formats.fill)
+          : format(prep.cats[code], false, formats.fill),
+        color,
+      );
+    }
+    if (channel('r')) row(channel('r').as, format(value('r'), prep.dates.r));
+    const pending = this.shownId != null && !mark.tipRows.has(this.shownId);
+    const extra = mark.tipRows.get(this.shownId);
+    for (const name of this.extras)
+      row(name, pending ? '…' : format(extra?.[name], this.extraKinds[name]));
+    tip.replaceChildren(table);
+
+    // Right of the dot, or left of it when there is no room; kept inside the plot element vertically.
+    const el = mark.plot.element;
+    if (getComputedStyle(el).position === 'static')
+      el.style.position = 'relative';
+    tip.style.cssText = 'position:absolute;left:0;top:0';
+    el.appendChild(tip);
+    const ctm = svg.getScreenCTM();
+    const box = el.getBoundingClientRect();
+    const gap = r + RING_PAD + TIP_GAP;
+    const rightOf = new DOMPoint(
+      px + frame.fx + gap,
+      py + frame.fy,
+    ).matrixTransform(ctm);
+    let left = rightOf.x - box.left;
+    if (left + tip.offsetWidth > el.clientWidth) {
+      left =
+        new DOMPoint(px + frame.fx - gap, 0).matrixTransform(ctm).x -
+        box.left -
+        tip.offsetWidth;
+    }
+    const top = Math.max(
+      0,
+      Math.min(
+        rightOf.y - box.top - tip.offsetHeight / 2,
+        el.clientHeight - tip.offsetHeight,
+      ),
+    );
+    tip.style.left = `${left}px`;
+    tip.style.top = `${top}px`;
+  }
+
+  hide() {
+    this.ring?.remove();
+    this.tip?.remove();
+    this.shown = null;
+    this.shownId = null;
+    this.wanted = null;
+    clearTimeout(this.restTimer);
+  }
+
+  /** Looks up the extra fields of the wanted row, one query at a time, until the wanted row is known. */
+  async fetch() {
+    if (this.busy) return;
+    this.busy = true;
+    const { mark } = this;
+    try {
+      while (
+        this.wanted != null &&
+        mark.coordinator &&
+        !mark.tipRows.has(this.wanted)
+      ) {
+        const id = this.wanted;
+        const rows = mark.tipRows;
+        const fields = this.fieldsFor;
+        const select = Object.fromEntries(
+          fields.map(name => [name, column(name)]),
+        );
+        const query = Query.from({ source: mark.sourceTable() })
+          .select(select)
+          .where(eq(mark.key, literal(id)))
+          .limit(1);
+        const table = await mark.coordinator.query(query, { cache: false });
+        // Columns are read in select order: DuckDB names a column the way the table spells it, which can differ in case from the field.
+        // Each value is read on its own, so one that can't be read (a 64-bit integer past 2^53) leaves only its own cell empty.
+        // A time column is turned into milliseconds since midnight and remembered as a time, so it
+        // shows as one; the result carries its own Arrow type, so this costs no extra query.
+        const read = (k, name) => {
+          const child = table.getChildAt(k);
+          try {
+            const value = child.at(0);
+            if (child.type?.typeId !== ARROW_TIME) return value;
+            this.extraKinds[name] = 'TIME';
+            return typeof value === 'number'
+              ? value * (TO_MS[child.type.unit] ?? 1)
+              : value;
+          } catch {
+            return null;
+          }
+        };
+        rows.set(
+          id,
+          table.numRows
+            ? Object.fromEntries(
+                Object.keys(select).map((name, k) => [name, read(k, name)]),
+              )
+            : null,
+        );
+        // Skip the redraw when the table, the fields or the painted dots changed while the query ran.
+        if (
+          rows === mark.tipRows &&
+          this.shownId === id &&
+          mark.lastPaint === this.index?.paint
+        )
+          this.draw();
+      }
+    } catch (err) {
+      if (!this.warned)
+        console.warn(
+          `dotGL: tooltip fields lookup failed: ${err?.message ?? err}`,
+        );
+      this.warned = true;
+    } finally {
+      this.busy = false;
+    }
+  }
+}