Highlight bars with crossfilter selection and menu

[spren9er]

I have the following small dashboard example, which should illustrate the issue I'm facing:

data:
  penguins: { file: data/penguins.csv }
params:
  query: { select: crossfilter }
vconcat:
- hconcat:
  - input: menu
    label: Species
    as: $query
    from: penguins
    column: species
- vspace: 20
- name: total
  plot:
  - mark: barX
    data: { from: penguins, filterBy: $query }
    x: { count: '' }
  xLabel: Total →
  xDomain: Fixed
- vspace: 20
- name: sex
  plot:
  - mark: barY
    data: { from: penguins, filterBy: $query }
    x: sex
    y: { count: '' }
  - select: toggleX
    as: $query
  xLabel: ''
  yLabel: Total
  xDomain: Fixed
  yDomain: Fixed

Here, I use a crossfilter selection. When I click on a bar in sex chart, the upper bar — which shows the number of all penguins — will be filtered (minor side note: This works for FEMALE and MALE, but does not seem to work for null values, the right bar). Additionally, I have a filter for species as menu on top.

My goal is to highlight the sex bar (or unhighlighting other bars) when clicked.

1. First try: I added the following to sex chart

   - select: highlight
     by: $query

   This does not work! Also, an error is raised when I select a species on top:

   Uncaught (in promise) Error: Binder Error: column "species" must appear in the GROUP BY clause or must be part of an aggregate function.
   Either add it to the GROUP BY list, or use "ANY_VALUE(species)" if the exact value of "species" is not important.

2. Second try: I added a new single selection for highlighting only. Full code:

   data:
     penguins: { file: data/penguins.csv }
   params:
     query: { select: crossfilter }
     click: { select: single }
   vconcat:
   - hconcat:
     - input: menu
       label: Species
       as: $query
       from: penguins
       column: species
   - vspace: 20
   - name: total
     plot:
     - mark: barX
       data: { from: penguins, filterBy: $query }
       x: { count: '' }
     xLabel: Total →
     xDomain: Fixed
   - vspace: 20
   - name: sex
     plot:
     - mark: barY
       data: { from: penguins, filterBy: $query }
       x: sex
       y: { count: '' }
     - select: toggleX
       as: $query
     - select: toggleX
       as: $click
     - select: highlight
       by: $click
     xLabel: ''
     yLabel: Total
     xDomain: Fixed
     yDomain: Fixed

   Not sure, if it is officially supported, that one can have more than one selection for a single interactor.
   However, this worked at first (filtering + highlighting), but when I select randomly species, at a certain time highlighting gets out of sync.

• What is the correct way of describing highlighting in above scenario?
• Could it be that highlighting is currently not supported when using a crossfilter selection, which is shared by multiple clients (e.g. one or more menus)? I face this issue everytime, when I have more complex dashboards.

[jheer]

Thanks for sharing. First, the issue with the NULL is a bug, due to the toggle interactors generating equality (=) comparisons rather than IS NOT DISTINCT FROM (which is null safe). I've made a note to fix this, but feel free to file a bug issue about that.

For the highlighting, it makes sense that the first setup described doesn't work. After filtering by species, the highlighting interactor tries to highlight by a species-specific predicate, yet the sex chart has no species data after aggregation and so the highlighting query fails. (Though certainly more informative error messages / feedback could be helpful here...)

The second setup should work in theory. However, I too notice an issue with the highlighting becoming incorrect. After some experimentation it looks like the issue arises only when both toggle interactors are applied. I will have to take a deeper look to fully diagnose the issue.

[jheer]

For now, the two-toggle approach is working for me if I include an explicit order attribute in the barY mark in the bottom chart, like so:

- mark: barY
  data: { from: penguins, filterBy: $query }
  x: sex
  y: { count: '' }
  order: sex

This suggests that the problem stems from the ordering of elements in the selection bit vector that the highlight interactor queries from the database.

[spren9er]

Thanks!

I filed an issue w.r.t. NULL bug (#145).

Yes, including an explicit order solves the issue in above example.
In more complex dashboards (with sorted bar charts by total) I was not able to solve it with an additional order attribute.
It seems that as soon as there is another non-trivial selection performed (e.g. through menu or another toggle interactor in another bar chart), highlighting does not work properly. When reverting all other selections, highlighting works again.

[spren9er]

I think the reason why it fails is that predicateFunction in Highlight.js uses wrong query.

After I select Chinstrap in species menu, clicking on a bar (FEMALE or MALE) will use a query with missing WHERE clause, which leads to wrong predicate function and unexpected results (wrong highlighting).

Why?

Argument of mark.query of following line

mosaic/packages/vgplot/src/interactors/Highlight.js

Line 59 in 6d1299a

const q = mark.query(mark.filterBy?.predicate(mark));

is undefined, because skipping is performed in SelectionResolver#predicate.

The resolution strategy determines a trivial predicate when

1. selection is a cross-filter
2. client is currently active

Both conditions apply here: Mark barY is part of clients of active toggle.

Issue can be solved by removing active clause via remove(null):

async function predicateFunction(mark, selection) {
  const pred = selection?.predicate(mark);

  if (!pred || pred.length === 0) {
    return () => true;
  }

  // create a selection with the active source removed
  const sel = mark.filterBy?.remove(null);

  const s = { __: and(pred) };
  const q = mark.query(sel?.predicate(mark));
  const p = q.groupby().length ? q.select(s) : q.$select(s);

  const data = await coordinator().query(p);
  const v = data.getChild?.('__');
  return v ? (i) => v.get(i) : (i) => data[i].__;
}

I'm not sure about possible side effects of this.
However, with above modification, highlighting works in multiple bar charts in more complex dashboards with cross-filter selection + several menus and toggles.

[jheer]

Thanks! I incorporated fixes for both the null selection and highlight interactor issues in #147. The changes were released with version 0.3.3.