@uwdata/vgplot 0.4.0 → 0.6.0

package/src/interactors/Highlight.js

@@ -1,101 +0,0 @@
-import { coordinator, throttle } from '@uwdata/mosaic-core';
-import { and } from '@uwdata/mosaic-sql';
-import { sanitizeStyles } from './util/sanitize-styles.js';
-
-function configureMark(mark) {
-  const { channels } = mark;
-  const dims = new Set;
-  let ordered = false;
-  let aggregate = false;
-
-  for (const c of channels) {
-    const { channel, field, as } = c;
-    if (channel === 'orderby') {
-      ordered = true;
-    } else if (field) {
-      if (field.aggregate) {
-        aggregate = true;
-      } else {
-        if (dims.has(as)) continue;
-        dims.add(as);
-      }
-    }
-  }
-
-  // if orderby is defined, we're ok: nothing to do
-  // or, if there is no groupby aggregation, we're ok: nothing to do
-  // grouping may result in optimizations that change result order
-  // so we orderby the grouping dimensions to ensure stable indices
-  if (!ordered && aggregate && dims.size) {
-    mark.channels.push(({ channel: 'orderby', value: Array.from(dims) }));
-  }
-
-  return mark;
-}
-
-export class Highlight {
-  constructor(mark, {
-    selection,
-    channels = {}
-  }) {
-    this.mark = configureMark(mark);
-    this.selection = selection;
-    const c = Object.entries(sanitizeStyles(channels));
-    this.channels = c.length ? c : [['opacity', 0.2]];
-    this.selection.addEventListener('value', throttle(() => this.update()));
-  }
-
-  init(svg) {
-    this.svg = svg;
-    const values = this.values = [];
-    const index = this.mark.index;
-    const nodes = this.nodes = svg.querySelectorAll(`[data-index="${index}"] > *`);
-
-    const { channels } = this;
-    for (let i = 0; i < nodes.length; ++i) {
-      const node = nodes[i];
-      values.push(channels.map(c => node.getAttribute(c[0])));
-    }
-
-    return this.update();
-  }
-
-  async update() {
-    const { svg, nodes, channels, values, mark, selection } = this;
-    if (!svg) return;
-
-    const test = await predicateFunction(mark, selection);
-
-    for (let i = 0; i < nodes.length; ++i) {
-      const node = nodes[i];
-      const base = values[i];
-      const t = test(node.__data__);
-      // TODO? handle inherited values / remove attributes
-      for (let j = 0; j < channels.length; ++j) {
-        const [attr, value] = channels[j];
-        node.setAttribute(attr, t ? base[j] : value);
-      }
-    }
-  }
-}
-
-async function predicateFunction(mark, selection) {
-  const pred = selection?.predicate(mark);
-
-  if (!pred || pred.length === 0) {
-    return () => true;
-  }
-
-  // set flag so we do not skip cross-filtered sources
-  const filter = mark.filterBy?.predicate(mark, true);
-
-  const s = { __: and(pred) };
-  const q = mark.query(filter);
-  const p = q.groupby().length ? q.select(s) : q.$select(s);
-
-  const data = await coordinator().query(p);
-  const v = data.getChild?.('__');
-  return !(data.numRows || data.length) ? (() => false)
-    : v ? (i => v.get(i))
-    : (i => data[i].__);
-}

package/src/interactors/Interval1D.js

@@ -1,90 +0,0 @@
-import { select, min, max } from 'd3';
-import { isBetween } from '@uwdata/mosaic-sql';
-import { brushX, brushY } from './util/brush.js';
-import { closeTo } from './util/close-to.js';
-import { getField } from './util/get-field.js';
-import { invert } from './util/invert.js';
-import { patchScreenCTM } from './util/patchScreenCTM.js';
-import { sanitizeStyles } from './util/sanitize-styles.js';
-
-export class Interval1D {
-  constructor(mark, {
-    channel,
-    selection,
-    field,
-    pixelSize = 1,
-    peers = true,
-    brush: style
-  }) {
-    this.mark = mark;
-    this.channel = channel;
-    this.pixelSize = pixelSize || 1;
-    this.selection = selection;
-    this.peers = peers;
-    this.field = field || getField(mark, [channel, channel+'1', channel+'2']);
-    this.style = style && sanitizeStyles(style);
-    this.brush = channel === 'y' ? brushY() : brushX();
-    this.brush.on('brush end', ({ selection }) => this.publish(selection));
-  }
-
-  reset() {
-    this.value = undefined;
-    if (this.g) this.brush.reset(this.g);
-  }
-
-  activate() {
-    this.selection.activate(this.clause(this.value || [0, 1]));
-  }
-
-  publish(extent) {
-    let range = undefined;
-    if (extent) {
-      range = extent
-        .map(v => invert(v, this.scale, this.pixelSize))
-        .sort((a, b) => a - b);
-    }
-    if (!closeTo(range, this.value)) {
-      this.value = range;
-      this.g.call(this.brush.moveSilent, extent);
-      this.selection.update(this.clause(range));
-    }
-  }
-
-  clause(value) {
-    const { mark, pixelSize, field, scale } = this;
-    return {
-      source: this,
-      schema: { type: 'interval', pixelSize, scales: [scale] },
-      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate: value ? isBetween(field, value) : null
-    };
-  }
-
-  init(svg) {
-    const { brush, channel, style } = this;
-    this.scale = svg.scale(channel);
-
-    const rx = svg.scale('x').range;
-    const ry = svg.scale('y').range;
-    brush.extent([[min(rx), min(ry)], [max(rx), max(ry)]]);
-
-    const facets = select(svg).selectAll('g[aria-label="facet"]');
-    const root = facets.size() ? facets : select(svg);
-    this.g = root
-      .append('g')
-      .attr('class', `interval-${channel}`)
-      .each(patchScreenCTM)
-      .call(brush)
-      .call(brush.moveSilent, this.value?.map(this.scale.apply));
-
-    if (style) {
-      const brushes = this.g.selectAll('rect.selection');
-      for (const name in style) {
-        brushes.attr(name, style[name]);
-      }
-    }
-
-    svg.addEventListener('pointerenter', () => this.activate());
-  }
-}

package/src/interactors/Interval2D.js

@@ -1,102 +0,0 @@
-import { select, min, max } from 'd3';
-import { and, isBetween } from '@uwdata/mosaic-sql';
-import { brush } from './util/brush.js';
-import { closeTo } from './util/close-to.js';
-import { getField } from './util/get-field.js';
-import { invert } from './util/invert.js';
-import { patchScreenCTM } from './util/patchScreenCTM.js';
-import { sanitizeStyles } from './util/sanitize-styles.js';
-
-const asc = (a, b) => a - b;
-
-export class Interval2D {
-  constructor(mark, {
-    selection,
-    xfield,
-    yfield,
-    pixelSize = 1,
-    peers = true,
-    brush: style
-  }) {
-    this.mark = mark;
-    this.pixelSize = pixelSize || 1;
-    this.selection = selection;
-    this.peers = peers;
-    this.xfield = xfield || getField(mark, ['x', 'x1', 'x2']);
-    this.yfield = yfield || getField(mark, ['y', 'y1', 'y2']);
-    this.style = style && sanitizeStyles(style);
-    this.brush = brush();
-    this.brush.on('brush end', ({ selection }) => this.publish(selection));
-  }
-
-  reset() {
-    this.value = undefined;
-    if (this.g) this.brush.reset(this.g);
-  }
-
-  activate() {
-    this.selection.activate(this.clause(this.value || [[0, 1], [0, 1]]));
-  }
-
-  publish(extent) {
-    const { value, pixelSize, xscale, yscale } = this;
-    let xr = undefined;
-    let yr = undefined;
-    if (extent) {
-      const [a, b] = extent;
-      xr = [a[0], b[0]].map(v => invert(v, xscale, pixelSize)).sort(asc);
-      yr = [a[1], b[1]].map(v => invert(v, yscale, pixelSize)).sort(asc);
-    }
-
-    if (!closeTo(xr, value?.[0]) || !closeTo(yr, value?.[1])) {
-      this.value = extent ? [xr, yr] : undefined;
-      this.g.call(this.brush.moveSilent, extent);
-      this.selection.update(this.clause(this.value));
-    }
-  }
-
-  clause(value) {
-    const { mark, pixelSize, xfield, yfield, xscale, yscale } = this;
-    return {
-      source: this,
-      schema: { type: 'interval', pixelSize, scales: [xscale, yscale] },
-      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate: value
-        ? and(isBetween(xfield, value[0]), isBetween(yfield, value[1]))
-        : null
-    };
-  }
-
-  init(svg) {
-    const { brush, style } = this;
-    const xscale = this.xscale = svg.scale('x');
-    const yscale = this.yscale = svg.scale('y');
-    const rx = xscale.range;
-    const ry = yscale.range;
-    brush.extent([[min(rx), min(ry)], [max(rx), max(ry)]]);
-
-    const facets = select(svg).selectAll('g[aria-label="facet"]');
-    const root = facets.size() ? facets : select(svg);
-    this.g = root
-      .append('g')
-      .attr('class', `interval-xy`)
-      .each(patchScreenCTM)
-      .call(brush);
-
-    if (style) {
-      const brushes = this.g.selectAll('rect.selection');
-      for (const name in style) {
-        brushes.attr(name, style[name]);
-      }
-    }
-
-    if (this.value) {
-      const [x1, x2] = this.value[0].map(xscale.apply).sort(asc);
-      const [y1, y2] = this.value[1].map(yscale.apply).sort(asc);
-      this.g.call(brush.moveSilent, [[x1, y1], [x2, y2]]);
-    }
-
-    svg.addEventListener('pointerenter', () => this.activate());
-  }
-}

package/src/interactors/Nearest.js

@@ -1,66 +0,0 @@
-import { isSelection } from '@uwdata/mosaic-core';
-import { eq, literal } from '@uwdata/mosaic-sql';
-import { select, pointer } from 'd3';
-import { getField } from './util/get-field.js';
-
-export class Nearest {
-  constructor(mark, {
-    selection,
-    channel,
-    field
-  }) {
-    this.mark = mark;
-    this.selection = selection;
-    this.clients = new Set().add(mark);
-    this.channel = channel;
-    this.field = field || getField(mark, [channel]);
-  }
-
-  clause(value) {
-    const { clients, field } = this;
-    const predicate = value ? eq(field, literal(value)) : null;
-    return {
-      source: this,
-      schema: { type: 'point' },
-      clients,
-      value,
-      predicate
-    };
-  }
-
-  init(svg) {
-    const that = this;
-    const { mark, channel, selection } = this;
-    const { data } = mark;
-    const key = mark.channelField(channel).as;
-
-    const facets = select(svg).selectAll('g[aria-label="facet"]');
-    const root = facets.size() ? facets : select(svg);
-    const scale = svg.scale(channel);
-    const param = !isSelection(selection);
-
-    root.on('pointerdown pointermove', function(evt) {
-      const [x, y] = pointer(evt, this);
-      const z = findNearest(data, key, scale.invert(channel === 'x' ? x : y));
-      selection.update(param ? z : that.clause(z));
-    });
-
-    if (param) return;
-    svg.addEventListener('pointerenter', () => {
-      this.selection.activate(this.clause(0));
-    });
-  }
-}
-
-function findNearest(data, key, value) {
-  let dist = Infinity;
-  let v;
-  data.forEach(d => {
-    const delta = Math.abs(d[key] - value);
-    if (delta < dist) {
-      dist = delta;
-      v = d[key];
-    }
-  });
-  return v;
-}

package/src/interactors/PanZoom.js

@@ -1,121 +0,0 @@
-import { select, zoom, ZoomTransform } from 'd3';
-import { Selection } from '@uwdata/mosaic-core';
-import { isBetween } from '@uwdata/mosaic-sql';
-import { getField } from './util/get-field.js';
-
-const asc = (a, b) => a - b;
-
-export class PanZoom {
-  constructor(mark, {
-    x = new Selection(),
-    y = new Selection(),
-    xfield,
-    yfield,
-    zoom = true,
-    panx = true,
-    pany = true
-  }) {
-    this.mark = mark;
-    this.xsel = x;
-    this.ysel = y;
-    this.xfield = xfield || getField(mark, ['x', 'x1', 'x2']);
-    this.yfield = yfield || getField(mark, ['y', 'y1', 'y2']);
-    this.zoom = extent(zoom, [0, Infinity], [1, 1]);
-    this.panx = this.xsel && panx;
-    this.pany = this.ysel && pany;
-
-    const { plot } = mark;
-    if (panx) {
-      this.xsel.addEventListener('value', value => {
-        if (plot.setAttribute('xDomain', value)) plot.update();
-      });
-    }
-    if (pany) {
-      this.ysel.addEventListener('value', value => {
-        if (plot.setAttribute('yDomain', value)) plot.update();
-      });
-    }
-  }
-
-  publish(transform) {
-    if (this.panx) {
-      const xdom = rescaleX(transform, this.xscale);
-      this.xsel.update(this.clause(xdom, this.xfield, this.xscale));
-    }
-    if (this.pany) {
-      const ydom = rescaleY(transform, this.yscale);
-      this.ysel.update(this.clause(ydom, this.yfield, this.yscale));
-    }
-  }
-
-  clause(value, field, scale) {
-    return {
-      source: this,
-      schema: { type: 'interval', scales: [scale] },
-      clients: this.mark.plot.markSet,
-      value,
-      predicate: value ? isBetween(field, value) : null
-    };
-  }
-
-  init(svg) {
-    this.svg = svg;
-    if (this.initialized) return; else this.initialized = true;
-
-    const { panx, pany, mark: { plot: { element } }, xsel, ysel } = this;
-
-    this.xscale = svg.scale('x');
-    this.yscale = svg.scale('y');
-    const rx = this.xscale.range.slice().sort(asc);
-    const ry = this.yscale.range.slice().sort(asc);
-    const tx = extent(panx, [-Infinity, Infinity], rx);
-    const ty = extent(pany, [-Infinity, Infinity], ry);
-
-    const z = zoom()
-      .extent([[rx[0], ry[0]], [rx[1], ry[1]]])
-      .scaleExtent(this.zoom)
-      .translateExtent([[tx[0], ty[0]], [tx[1], ty[1]]])
-      .on('start', () => {
-        this.xscale = this.svg.scale('x');
-        this.yscale = this.svg.scale('y');
-      })
-      .on('end', () => element.__zoom = new ZoomTransform(1, 0, 0))
-      .on('zoom', ({ transform }) => this.publish(transform));
-
-    select(element).call(z);
-
-    if (panx || pany) {
-      let enter = false;
-      element.addEventListener('mouseenter', () => {
-        if (enter) return; else enter = true;
-        if (panx) {
-          const { xscale, xfield } = this;
-          xsel.activate(this.clause(xscale.domain, xfield, xscale));
-        }
-        if (pany) {
-          const { yscale, yfield } = this;
-          ysel.activate(this.clause(yscale.domain, yfield, yscale));
-        }
-      });
-      element.addEventListener('mouseleave', () => enter = false);
-    }
-  }
-}
-
-function extent(ext, defaultTrue, defaultFalse) {
-  return ext
-    ? (Array.isArray(ext) ? ext : defaultTrue)
-    : defaultFalse;
-}
-
-function rescaleX(transform, scale) {
-  return scale.range
-    .map(transform.invertX, transform)
-    .map(scale.invert, scale);
-}
-
-function rescaleY(transform, scale) {
-  return scale.range
-    .map(transform.invertY, transform)
-    .map(scale.invert, scale);
-}

package/src/interactors/Toggle.js

@@ -1,111 +0,0 @@
-import { and, or, isNotDistinct, literal } from '@uwdata/mosaic-sql';
-
-export class Toggle {
-  constructor(mark, {
-    selection,
-    channels,
-    peers = true
-  }) {
-    this.value = null;
-    this.mark = mark;
-    this.selection = selection;
-    this.peers = peers;
-    this.channels = channels.map(c => {
-      const q = c === 'color' ? ['fill', 'stroke']
-        : c === 'x' ? ['x', 'x1', 'x2']
-        : c === 'y' ? ['y', 'y1', 'y2']
-        : [c];
-      for (let i = 0; i < q.length; ++i) {
-        const f = mark.channelField(q[i]);
-        if (f) return {
-          field: f.field?.basis || f.field,
-          as: f.as
-        };
-      }
-      throw new Error(`Missing channel: ${c}`);
-    });
-  }
-
-  clause(value) {
-    const { channels, mark } = this;
-    let predicate = null;
-
-    if (value) {
-      const clauses = value.map(vals => {
-        const list = vals.map((v, i) => {
-          return isNotDistinct(channels[i].field, literal(v));
-        });
-        return list.length > 1 ? and(list) : list[0];
-      });
-      predicate = clauses.length > 1 ? or(clauses) : clauses[0];
-    }
-
-    return {
-      source: this,
-      schema: { type: 'point' },
-      clients: this.peers ? mark.plot.markSet : new Set().add(mark),
-      value,
-      predicate
-    };
-  }
-
-  init(svg, selector, accessor) {
-    const { mark, channels, selection } = this;
-    const { data } = mark;
-    accessor = accessor || (target => {
-      const datum = data[target.__data__];
-      return channels.map(c => datum[c.as]);
-    });
-
-    selector = selector || `[data-index="${mark.index}"]`;
-    const groups = new Set(svg.querySelectorAll(selector));
-
-    svg.addEventListener('pointerdown', evt => {
-      const state = selection.single ? selection.value : this.value;
-      const target = evt.target;
-      let value = null;
-
-      if (isTargetElement(groups, target)) {
-        const point = accessor(target);
-        if (evt.shiftKey && state?.length) {
-          value = state.filter(s => neq(s, point));
-          if (value.length === state.length) value.push(point);
-        } else if (state?.length === 1 && !neq(state[0], point)) {
-          value = null;
-        } else {
-          value = [point];
-        }
-      }
-
-      this.value = value;
-      if (neqSome(state, value)) {
-        selection.update(this.clause(value));
-      }
-    });
-
-    svg.addEventListener('pointerenter', () => {
-      this.selection.activate(this.clause([this.channels.map(() => 0)]));
-    });
-  }
-}
-
-function isTargetElement(groups, node) {
-  return groups.has(node)
-    || groups.has(node.parentNode)
-    || groups.has(node.parentNode?.parentNode);
-}
-
-function neqSome(a, b) {
-  return (a == null || b == null)
-    ? (a != null || b != null)
-    : (a.length !== b.length || a.some((x, i) => neq(x, b[i])));
-}
-
-function neq(a, b) {
-  const n = a.length;
-  if (b.length !== n) return true;
-  for (let i = 0; i < n; ++i) {
-    if (a[i] !== b[i]) return true;
-  }
-  return false;
-}

package/src/interactors/util/brush.js

@@ -1,45 +0,0 @@
-import {
-  brush as d3_brush, brushX as d3_brushX, brushY as d3_brushY
-} from 'd3';
-
-function wrap(brush) {
-  const brushOn = brush.on;
-  let enabled = true;
-
-  function silence(callback) {
-    enabled = false;
-    callback();
-    enabled = true;
-  }
-
-  brush.reset = (...args) => {
-    silence(() => brush.clear(...args));
-  };
-
-  brush.moveSilent = (...args) => {
-    silence(() => brush.move(...args));
-  };
-
-  brush.on = (...args) => {
-    if (args.length > 1 && args[1]) {
-      // wrap callback to respect enabled flag
-      const callback = args[1];
-      args[1] = (...event) => enabled && callback(...event);
-    }
-    return brushOn(...args);
-  };
-
-  return brush;
-}
-
-export function brush() {
-  return wrap(d3_brush());
-}
-
-export function brushX() {
-  return wrap(d3_brushX());
-}
-
-export function brushY() {
-  return wrap(d3_brushY());
-}

package/src/interactors/util/close-to.js

@@ -1,9 +0,0 @@
-const EPS = 1e-12;
-
-export function closeTo(a, b) {
-  return a === b || (
-    a && b &&
-    Math.abs(a[0] - b[0]) < EPS &&
-    Math.abs(a[1] - b[1]) < EPS
-  ) || false;
-}

package/src/interactors/util/get-field.js

@@ -1,4 +0,0 @@
-export function getField(mark, channels) {
-  const field = mark.channelField(channels)?.field;
-  return field?.basis || field;
-}

package/src/interactors/util/invert.js

@@ -1,3 +0,0 @@
-export function invert(value, scale, pixelSize = 1) {
-  return scale.invert(pixelSize * Math.floor(value / pixelSize));
-}

package/src/interactors/util/patchScreenCTM.js

@@ -1,13 +0,0 @@
-/**
- * Patch the getScreenCTM method to memoize the last non-null
- * result seen. This will let the method continue to function
- * even after the node is removed from the DOM.
- */
-export function patchScreenCTM() {
-  const node = this;
-  const getScreenCTM = node.getScreenCTM;
-  let memo;
-  node.getScreenCTM = () => {
-    return node.isConnected ? (memo = getScreenCTM.call(node)) : memo;
-  };
-}

package/src/interactors/util/sanitize-styles.js

@@ -1,9 +0,0 @@
-import { toKebabCase } from './to-kebab-case.js';
-
-export function sanitizeStyles(styles) {
-  const s = {};
-  for (const name in styles) {
-    s[toKebabCase(name)] = styles[name];
-  }
-  return s;
-}

package/src/interactors/util/to-kebab-case.js

@@ -1,9 +0,0 @@
-export function toKebabCase(cc) {
-  const lc = cc.toLowerCase();
-  const n = cc.length;
-  let kc = '';
-  for (let i = 0; i < n; ++i) {
-    kc += (cc[i] !== lc[i] ? '-' : '') + lc[i];
-  }
-  return kc;
-}

package/src/layout/index.js

@@ -1,2 +0,0 @@
-export { hconcat, vconcat } from './concat.js';
-export { hspace, vspace } from './space.js';