Examples on how to Reset a Cross-filter Selection

[Unemyr]

It would be really useful to have an example (or some quick advice) on how to reset one of the Clauses in a cross-filter selection associated with a specific Chart.

In the API it is mentioned that a Selection can be reset this way:
selection.remove(source)
Create a clone of this Selection with clauses corresponding to the provided source removed.

This API sounds exactly right - except that I cannot seem to find in the documentation anywhere where to actually extract the source variable from a vgplot that I create that use this particular selection filter? Maybe I am somehow missing something really rudimental/simple here?

Some generic and possibly common use cases related to this question:

1. A quick button in the UI that allows you to reset a selection for a specific chart view (or all the charts associated with the cross-filter).
2. The ability to add/remove/reload new charts in run-time - this would require the cross-filter Clause for the view that is removed/reloaded to be reset, before it is loaded again or other new views as loaded as it seems that chart's active filter selection will otherwise linger even after the DOM object has been removed.

[Unemyr]

Adding some notes here for future references to others who are looking to do the same thing. This is likely not the best-practice approach to achieve this, but it works.

In order to match the plot to remove the selection from programmatically, I was able to set a unique ID in the attributes setting, that I could match knowing this unique ID in a wrapper component (or some other type of stateful object which is used to generate the vgplot. I would match the unique ID with any source objects that match this ID in the Selection object's source arrays, [object]._value.active as well as all the index references [object]._value[x] (if any).

For discussion - the name() attribute is not listed in the attributes array in internal data structures (for example when reading out a Selection object through [object]._value[x].mark.plot.attributes.name), so using vg.name("my_unique_plot_id") can not be used in the approach above to identify the source associated with the plot to be cleared from a prior selection.
To work around this, I ended up setting a the style attribute for the plor with style: { id: "my_unique_id" } instead. The style attribute does list in internal data structures as an attribute.

Also, feel free to share the recommended best-practice approach for above, if any.

[will-moore]

Hi @Unemyr - I'm trying to address the same issue...
I'm seeing a slightly different structure of the underlying selection values, which I guess is not too surprising since this is internal and likely to change...

This is my clearSelection() functionality, which finds the plot, based on vg.style({"id": "plot"}) as you suggested, and removes it from the selection, to return a new selection without the filter.

let selection = Selection.intersect();

function clearSelection(plotId) {
  console.log("selection", selection);
  if (!selection._value) return;
  const values = selection._value.filter(s => {
    console.log(s.source.mark.plot.attributes.style);
    return s.source.mark.plot.attributes.style.id === plotId;
  })
  console.log('clearSelection source', values, values.length, values[0]);
  if (values.length > 0) {
    selection = selection.remove(values[0].source);
  }
}

I call this clearSelection() before I replace the plot with a new plot using the new selection.

This works fine when I have a single plot, but if I have multiple plots based on the same selection, I want to remove the plot and it's filtering from the selection that is being used by all the plots.

I have a tiny example at https://deploy-preview-58--parade-crossfilter.netlify.app/ (this doesn't include my clearSelection() yet).

When I filter by the chart on the left, then I change the axes for that chart, using select change in the UI, I want to remove that plot's filtering before I replace the plot with a new plot showing the chosen axes. At the same time, I'd like to maintain any filtering from the other plot!

Any ideas how I would do that?
Thanks

[Unemyr]

Hi @will-moore, it's been quite some time since I looked at this, but I had a quick look at my current codebase and I see that it looks quite close to what you are doing as well. The key difference I can see is that I do not only remove values[0], but all values[x] entries that matched the ID. I believe there may be separate records for each plot to reference the other plot's filtering selection. Hope this helps!

Other than that it is very much possible that the codebase has changed if you are on newer version - I am still running on 0.12.2 for the time being.

Cheers,

Erik

[will-moore]

Thanks for your response.
The selection.remove() is actually working OK for me. The issue I'm having is that it doesn't remove the plot from the existing selection. Instead it returns a COPY with the plot removed (which is what's expected from the docs).

This causes a problem in this scenario...

I have 2 plots: plotA and plotB, both of them displaying and filtering data from selection1.
Now I want to update plotA to use a different table column for the X axis. So, I want to remove plotA and replace it with a new plot.
I do const selection2 = selection1.remove(plotA), and then I create a new plot with selection2.
However, now the 2 plots (new plot and plotB are not using the same selection, since plotB is still linked to selection1, while the new plot is using selection2.

So, the only solution I can see is to also recreate plotB with selection2:

// replace plotA with new plot
const selection2 = selection1.remove(plotA);
createPlotA(selection2);
createPlotB(selection2);

But then I don't think that selection.remove() is any use to me? I could just create a completely new selection:

const selection2 = Selection.intersect();
createPlotA(selection2);
createPlotB(selection2);

[jheer]

@will-moore I agree that selection.remove() is not of great use here. It is useful for some internal management, and in hindsight should probably be renamed for better clarity (maybe something like cloneAndRemove).

What might be of use is the selection.reset(clauses) method, to which you can pass an array of current SelectionClause instances which will then be removed from the selection (while also calling reset() if defined on any of the clause sources). You just need a way to gather the clause(s) you want to remove, which may vary based on what Mosaic components you are using.

[will-moore]

@jheer Thanks for that - it's got me most of the way there!

I don't see selection.reset() in the docs at https://idl.uw.edu/mosaic/api/core/selection.html. Maybe they're out of date?

My commit to add this is at
will-moore/parade-crossfilter@94c0d2b
I haven't added the final step of removing the plot from the DOM yet.

The only issue remaining is this...

If I have e.g. 2 plots with clauses:

and I remove the clause from the one on the left. Initially console.log("remove panel selection.clauses", selection.clauses); shows that I have 2 clauses.
I'm filtering the selection.clauses by the style.id as above and this gives me clauses list with a single clause, shown by:
console.log("toRemove", toRemove);.

I pass this to selection.reset(toRemove);

However, that seems to remove BOTH the clauses. console.log("new selection", selection.clauses); now shows no clauses.

Console.log looks like this:

And the plots now show no filtering (although the selection rectangle is still visible on the other plot):

Any ideas what's going on here?

That change is currently deployed at https://deploy-preview-58--parade-crossfilter.netlify.app/ if you want to try it (just click the Plot button to add a plot).

Thanks for your help