Best Approach to Filter Multiple Plots

[enlore]

Hey folks,

We are building a dashboard using Mosaic. One requirement is to link multiple plots on a page to a set of dropdown selectors. The user will make selections from these dropdowns and expect to see updated Plots.

I have experimented with using Menus to achieve this but I'm running into an issue.

The Selection object managed by the Menu encodes the target column from the Menu configuration in its predicate. This ends up causing a Binder Error in the Plot because our data sources for the Plots don't necessarily have the same column names as the table containing the dropdown options.

Some example code below. Please let me know if this makes sense.

/**
 * Page level code, DashPage.tsx
 */
const $selection = vg.Selection.single()

const pageLevelMenu = vg.menu({
  from: 'option_list_table',
  column: 'option_col',
  as: $selection
})

// each Plot on the page is encapsulated in a React component
<BarYPlot
  from="data_we_want_to_render_table"
  x="x_col"
  y="y_col"
  selection={$selection}
  filterCol="filter_col" 
  // we want a predicate like `filter_col = ${selection.value}` 
  // but we end up with `option_col = ${selection.value}` b/c of the menu config
  // which causes a Binder Error because `data_we_want_to_render_table` does not have option_col
/>

<LinePlot
  from="other_data_we_want_to_render_table"
  x="a_col"
  y="b_col"
  selection={$selection}
  filterCol="a_different_filter_col"
  // and here we are trying to render a different data set with its own column names
/>

/**
 * Down in the Plot component code, BarYPlot.tsx or LinePlot.tsx
 */
// within the Plot component we simply pass the Selection object to the vg.from function
vg.barY(vg.from(table, { filterBy: selection }), { /* etc */ })

To further complicate things we are trying to implement two levels of filtering:

/**
 * Page level code, DashPage.tsx
 */
// for example $selection would be a region of the US and $subSelection would be a US state
// e.g. the Western US and Washington
const $selection = vg.Selection.single()

const pageLevelMenu = vg.menu({
  from: 'option_list_table',
  column: 'option',
  as: $selection
})

const $subSelection = vg.Selection.single()

const pageLevelSubMenu = vg.menu({
  from: 'option_list_table',
  column: 'sub_option',
  as: $subSelection,
  filterBy: $selection // filtering the available options in the sub menu works great 👍 
})

// if the user selects a value from the pageLevelMenu, we use that as a filter
// if the user selects a value from the pageLevelSubMenu, we use that instead
// but I'm struggling to find the right strategy to wire up the Plots to the Selection objects in the first place

That all said, it feels like I may be going about this the wrong way. Maybe it's possible to use the lower level Selection objects directly and update their predicates based on props passed to the Plot components? This bit of the Menu source looks promising.

Let me know if you have any questions. Thank you in advance.

[domoritz]

Mosaic is going to shine when you have charts and widgets over a single table as it will optimize the queries to be very efficient. Comprehensive multi-table support is something we have planned for the future. See #398. As you notice, some things will work right now, others not quite.

[jheer]

Sounds like the main issue is being able to set the column used in the selection to something other than the column used to pull options from. This is not supported at the moment but is an easy change. I'll look into it for inclusion in the next release.

The plot interactors already support this, we just need to update the inputs to do the same.

[jheer]

This support (via a new input field option) was added in #410.