Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
yochannah opened this issue May 30, 2018 · 8 comments

Comments

@yochannah
Copy link
Collaborator

commented May 30, 2018

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.

image

@yochannah

This comment has been minimized.

Copy link
Collaborator Author

commented May 30, 2018

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

@AdrianBZG

This comment has been minimized.

Copy link
Owner

commented May 30, 2018

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

This comment has been minimized.

Copy link
Collaborator Author

commented May 31, 2018

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

This comment has been minimized.

Copy link
Owner

commented May 31, 2018

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

imtableevent1

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

This comment has been minimized.

Copy link
Collaborator Author

commented Jun 1, 2018

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

This comment has been minimized.

Copy link
Owner

commented Jun 1, 2018

@yochannah Sounds perfect 👍

AdrianBZG added a commit that referenced this issue Jun 1, 2018
AdrianBZG added a commit that referenced this issue Jun 2, 2018
AdrianBZG added a commit that referenced this issue Jun 2, 2018
@AdrianBZG

This comment has been minimized.

Copy link
Owner

commented Jun 2, 2018

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!

image

@yochannah

This comment has been minimized.

Copy link
Collaborator Author

commented Jun 4, 2018

This looks good!

@yochannah yochannah closed this Jun 4, 2018

AdrianBZG pushed a commit that referenced this issue Feb 4, 2019
Merge pull request #24 from hollloh/adjust_navigation_reset_buttons
adjusted red buttons in left navigation to grey
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.