ccmbioinfo / osmp

One-Sided Matching Portal
5 stars 1 forks source link

React: create phenotype viewer component #128

Closed cklamann closed 2 years ago

cklamann commented 2 years ago

API payloads may contain many phenotype entries. We should have a component in the table that allows users a quick view of this data, since it will probably be too large to view in a single table cell. One idea is to display only the count of reported phenotypes in the cell and then show the details in a popover. Ease of use could also be improved by adding a multiselect filter to the phenotypes field so that users can get a quick overview of the set of phenotypes returned.

hannahle commented 2 years ago

API payloads may contain many phenotype entries. We should have a component in the table that allows users a quick view of this data, since it will probably be too large to view in a single table cell. One idea is to display only the count of reported phenotypes in the cell and then show the details in a popover. Ease of use could also be improved by adding a multiselect filter to the phenotypes field so that users can get a quick overview of the set of phenotypes returned.

Another idea I have is we can group rows in a similar way as we group column. Currently, each of our rows can have a number of phenotypes. User can click a toggle to expand the rows, and see that list of phenotypes in a table format. See here for a simple implementation of that by react-table. We can also consider having columns for important fields in the phenotypicFeature object. That way, user can clearly sees the different individual cases and phenotypes. We can also have collapse for these extra columns. What are your thoughts?