How to reactively execute query when selections change and display results?

[willeppy]

This is kind of two questions in one:

1. Is it possible to get the size of the currently filtered data out from mosaic?
2. In the general case, is it possible to execute any query against the currently filtered data in a selection?

Example

In my current example, I have a bar chart with a selection. When I click on one of the bars, it executes my getCount() function because of the event listener, however I am currently getting the count of the overall table, not the filtered data. Is this possible?

JS code:

import * as vg from "@uwdata/vgplot";

const datasetName = "athletes";
await vg.coordinator().exec(vg.loadCSV(datasetName, "data/athletes.csv"));

const $query = vg.Selection.crossfilter();
const $selectNationality = vg.Selection.single();

// HELP: how to re-execute this query when cross filter updates and display?
async function getCount() {
  let q = vg.Query.from(datasetName).select({ count: vg.count() });
  let r = await vg.coordinator().query(q, { type: "json" });
  let datasetSize = r[0]?.["count"];

  console.log("dataset size is: ", datasetSize);

  return datasetSize;
}

$query.addEventListener("value", getCount);

export default vg.plot(
  vg.barX(vg.from(datasetName, { filterBy: $query }), {
    x: vg.count(),
    y: "nationality",
    order: "nationality",
    sort: { y: "-x", limit: 10 },
  }),
  vg.highlight({ by: $selectNationality }),
  vg.toggleY({ as: $selectNationality }),
  vg.toggleY({ as: $query, width: 600, height: 400 }),
  vg.marginLeft(80)
);

Currently always prints out the overall dataset count after the selection changes:

Final bonus question: is the way I'm executing the count query in getCount() the best way to do this or is there a better method to call?

[jheer]

One complication here is that a selection does not correspond to a single "filtered set" of data. It corresponds to one or more filter predicate sets. For example, in the case of cross-filtering, each client might use a different filtered data subset. So the first question is to figure out which filtered set you want. You can generate the filter conditions by calling selection.predicate(client), which will return a set of WHERE clause predicates specific to the provided client. If no client is provided, you should get all filter predicates from all clients registered with that selection. You could then use the result of selection.predicate() to filter your query in getCount().

For example:

const q = vg.Query.from(datasetName)
  .select({ count: vg.count() })
  .where($query.predicate())

As for how to execute getCount(), registering a selection value event listener is a good way.

[willeppy]

Ah super cool, I figured there was an easy way to do this. Thanks much!