Pointer herding

[mootari]

Thought I'd share a few helper functions that I had created to wrangle multiple pointer transforms in https://observablehq.com/@mootari/github-user-activity. The notebook lets users hover and select rows, all while clicking on links and showing tooltips for events.

Example

Each of the helpers receives the pointer transform as argument, e.g.

Plot.rect(rows, blockPointerDown(
  Plot.pointerY({ /* ... */ }),
  // Don't sticky when links are clicked
  e => [e.target, e.target.parentElement].some(n => n.localName === "a"))
),

Plot.tip(values, ignoreStickyState(
  blockDispatch(
    blockPointerDown(
      Plot.pointer({ /* ... */ })
    )
  )
)),

Helpers

Prevent stickying

Selectively block pointerdown events.

function blockPointerDown(transform, shouldBlock = function(e) { return true }) {
  return {
    ...transform,
    render(index, scales, values, dims, context, next) {
      context.ownerSVGElement.addEventListener("pointerdown", function(e) {
        if(shouldBlock.call(this, e)) e.stopImmediatePropagation();
      });
      return transform.render.call(this, index, scales, values, dims, context, next);
    }
  };  
}

Be aware that this blocks the event for all pointer transforms that follow, so it may be more intuitive to use a mark instead:

function pointerDownBlockingMark(shouldBlock = function(e) { return true }) {
  return Object.assign(new Plot.Mark(), {
    facet: "super",
    render(_index, _scales, _values, _dims, {ownerSVGElement: svg}) {
      svg.addEventListener("pointerdown", function(e) {
        if(shouldBlock.call(this, e)) e.stopImmediatePropagation();
      });
    }
  });
}

An alternative approach that I haven't tried yet would be to wrap the event handler itself upon registration.

Ignore stickied marks

Allows tooltips to continue to work while another mark is stickied. Passes a proxy object instead of the root SVG element so that the transform receives a different shared pointer state. Note that using Proxy instead would cause illegal invocations.

function ignoreStickyState(transform) {
  return {
    ...transform,
    render(index, scales, values, dims, context, next) {
      const svg = context.ownerSVGElement;
      const proxy = {addEventListener: (...args) => svg.addEventListener(...args)};
      const _context = {...context, ownerSVGElement: proxy};
      return transform.render.call(this, index, scales, values, dims, _context, next);
    }
  };  
}

Block value changes

Prevents a pointer transform from changing the Plot's value, e.g. when you have multiple pointers but only one is supposed to drive plot.value. Works by passing passing a no-op function as dispatchValue to the transform.

function blockDispatch(transform) {
  return {
    ...transform,
    render(index, scales, values, dims, context, next) {
      const _context = {...context, dispatchValue() {}};
      return transform.render.call(this, index, scales, values, dims, _context, next);
    }
  };
}