pie chart, imtables filters, and left bar filters should all be linked

[yochannah]

There are two places filters can be enabled on the page:

• left filter bar
• imtables

and a third place where we probably should filter things when we click - the segments and labels of the pie chart.

Clicking on any of them ought to affect each of the other two places - e.g. if I click on the left bar filter, the pie chart ought to update, and vice versa. It would also be good to update the pie chart and left bar filter if an im-tables filter is applied (is this possible? if it's not straightforward let me know and I'll see if we can access the query from inside imtables somehow).

example screen - here imtables and the left filter bar show that H. sapiens is filtered, but the pie chart suggests that there are other organisms apart from H. sapiens.

[yochannah]

todo for @yochannah - figure out if imtables does emit events when it filters things

[AdrianBZG]

Note: when no filters are selected, the pie chart should show all the organisms (like now), and when the selected set of organisms is not empty, the pie chart should only show the ones in such set.

[yochannah]

ok, I think I've figured out how to attached to events in im-tables. I've added a jsbin here: http://jsbin.com/giyedun/edit?html,console,output but the main part of the code is as follows

var imtable = imtables.loadTable(
  selector, // Can also be an element, or a jQuery object.
  {"start":0,"size":25}, // May be null
  {service: service, query: query} // May be an imjs.Query
).then(
  function (table) { 
   //this .on listener will do something when someone interacts with the table. 
   table.on("all", function(changeDetail) {
      //put your actions when filters change here, e.g. 
       console.log(changeDetail, 
                   "currentQuery", 
                   table.history.currentQuery);
    });
  },
  function (error) { console.error('Could not load table', error); }
);

I'd recommend opening your browser console rather than bothering with the jsbin built-in console if you want to inspect the objects and methods associated with the table and events. Let me know if it makes sense to you!

[AdrianBZG]

@yochannah Looks like I should be able to parse the constraints from the last event generated:

Right?

PD: Please remind me if, apart from connecting the following events: click pie chart segment, modify im-table constraints, click sidebar, I should also connect the event of clicking the pie chart legend items (maybe this one is not necessary and could remain as just that, a legend...)

[yochannah]

Yep, the constraints look good!

I'm happy to leave the legend as-is (no click interactivity), so long as the pie segments are interactive - sound good to you?

[AdrianBZG]

@yochannah Sounds perfect 👍

[AdrianBZG]

Hi @yochannah , the three elements are connected now, and they should be working nicely 😄 , and also added a "Clear filters" button, can you please take a look and give me an opinion? Thanks!

[yochannah]

This looks good!