Applying saved Selection to charts on initialization

[ilyabo]

Hello wonderful Mosaic team!

I am trying to use Mosaic in a kind of a dashboard with charts rendered in panels which can be toggled on and off. I noticed that when displaying a filterable vgplot chart again after it had been hidden, it would not pick up the previous selection correctly. Instead, it represents the filtered data as if it was the whole unfiltered dataset and the brush selection is empty.

Is there a way to initialize the chart so that the selection is represented correctly?

And a related question: is there a way to serialize and deserialize Selection so that the filter state can be saved in the dashboard and displayed correctly on reload?

Thanks in advance!

Kapture.2024-03-28.at.09.15.39.mp4

The chart specs I use look like below, where filterSelection = Selection.crossfilter():

{
  type: 'vgplot',
  title: 'x distribution',
  spec: {
    plot: [
      {
        mark: 'rectY',
        data: {
          from: nodesTable,
          filterBy: filterSelection,
        },
        x: {
          bin: 'x',
        },
        y: {
          count: null,
        },
        fill: '#bbc3ce',
        inset: 0.5,
      },
      {
        select: 'intervalX',
        as: filterSelection,
      },
    ],
    xDomain: 'Fixed',
    xScale: 'linear',
    marginLeft: 75,
    style: {
      background: '#000',
    },
  },

And the wrapper React component I am using to render the charts:

import {parseSpec} from '@uwdata/vgplot';

const VgPlotChart: FC<Props> = ({chart}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    (async () => {
      if (containerRef.current) {
        containerRef.current?.replaceChildren(
          await parseSpec(chart.spec),
        );
      }
    })();
  }, [chart.spec, containerRef]);

  return (
    <div ref={containerRef} />
  );
};

[jheer]

Currently Mosaic hasn't had careful design attention for charts that enter, leave, and re-enter a display. The simplest setup from Mosaic's perspective would be to preserve the original chart instances by hiding them rather than removing and reinstantiating them. Then the state should persist without issues.

I think the current problem is that the prior selections persist within Mosaic's state, and they are then used to filter the newly instantiated versions. One needs to deregister clients. If you aren't doing so already, you can call coordinator.disconnect(client) for each client removed. For a plot you would currently need to do something like plot.marks.forEach(mark => coordinator.disconnect(mark)). As future work, we could consider more convenient ways to detach client marks within a plot.

Still, our current disconnect mechanisms won't "clear" any associated selection state. Even if the client is detached, currently any clauses it has added to the shared selection will persist if you don't clear them yourself (e.g., using an interactor's reset() method). It's not clear what is generally "best" here, as you may want your larger plot to retain its filtered state when you hide the side plots.

There is also a separate issue of serializing selections for reuse. Interactors maintain a value property (e.g., containing the interval range in data space for interval interactors), which you could use to pre-set a selection state. However, generated selection clauses also include a source property that is used to identify the source of the clause; currently we use the this value of the interactor itself, which means that if you create new interactor instances they won't correspond with or replace any prior selection clauses. One solution could be reuse the same interactors. Another might be for vgplot to provide a way to set source values that you can manage yourself.

I realize the above may be hard to follow if you don't know Mosaic internals. Sorry! Again, if possible, I think the easiest solution for now would to simply toggle the visibility of side charts without actually dropping charts and then adding completely new ones.

[ilyabo]

Happy holidays, Jeff! Thanks for your great work on Mosaic and for the detailed answer back then. I just stumbled upon the same issue again while working on the SQLRooms Deck.gl + Mosaic example, and wanted to ask, whether there's now a proper way of doing this in Mosaic. It seems that the filters are being correctly set and the charts are rendered correctly after hiding the filter panel and showing it again, but the brush rectangle isn't rendered and so the filter charts aren't interactive, although I am passing the same brush selection instance to the VgPlot charts.

[derekperkins]

We're trying to make this work too.
cc @SeanCassiere @ChristianCasazza

[domoritz]

VgPlot does not automatically sync the state of a selection to the UI. At the moment, we recommend to keep state in the UI components and syncing it to Mosaic selections.

[ilyabo]

Thanks @domoritz! Could you point us to an example if there's one?

[domoritz]

We save/restore selections in embedding atlas (which uses mosaic but not vgplot).