Taxonomy UI design ideas and examples

[datadavev]

This issue is for capturing notes, screenshots, and so forth for designing the UI components for taxonomy navigation.

The basic requirements of the UI component include:

• Will operate in the web browser as a part of the iSample Web UI
• Taxonomy terms will be provided as a JSON structure
• The user should be able to easily navigate to different terms, e.g. to a broader term, to a narrower term, between siblings of a term.
• Actions will need to be triggered based on selection of a term (e.g. to update the list of records that match the term)

Add examples, including links, brief description and observation, and screen shots by responding to this issue below.

[hyunssong]

The UI seems to be similar to us, and it also supports hierarchical display by the expanding the arrows. The maximum depth is not that deep to compared to ours, and instead of instantly showing the result of display there is an "apply" button to use after finalizing the search conditions. https://member-frost-com.ezproxy3.library.arizona.edu/landing/home

[hyunssong]

This taxonomy database uses a tree to display the hierarchical structure of the terms. It first shows the whole tree. When you click the specific label it shows the tree expands and shows the subcategories. When you click the number of samples, it means you selected that term. It updates the term as selected and shows only the subtree of selection.

https://www.gbif.org/occurrence/search

[hyunssong]

In the case we have a deep level of hierarchy, I think it might be helpful to also allow the user to select the rank level that they want to view. This allows this by the "expand ranks to show" and "hide ranks above" option.

https://talk.ictvonline.org/taxonomy/

[hyunssong]

This is kind of similar to the second example. It uses a tree to display the hierarchical relationship. I find it more easier to navigate as you can expand / collapse using the (+/-). When you are in the deepest level this icon disappears.

http://www.worldfloraonline.org/classification

[hyunssong]

This allows the user to select the category and based on that it updates the drop down list options. The UI would be more simple, but if the hierarchy is not that deep than we would be unused components.

https://www.nhm.ac.uk/our-science/data/lepindex/search/

[qgan7125]

@hyunssong How many levels do you think we will have? We might adjust the pane width because of the deeper levels and term names.

[hyunssong]

@qgan7125 Yes, it seems that we might need to adjust the width. I checked SESAR and OPENCONTEXT, and it seems that the maximum depth is 5.

[hyunssong]

This is another way, where it just shows the subcategories under the selected category as a list. You can navigate to the parent category by clicking the hierarchy link that is located at the top of the page, which will refresh the page and show the new list of categories.

http://sweetgum.nybg.org/science/vh/type-specimen-index/type-family-checklist/?AltClassificationSystem=Fungi&AltPhylum=Basidiomycota

[qgan7125]

https://github.com/isamplesorg/solr-faceted-search-react/blob/develop/src/components/list-facet/index.js This is the file that we might overwrite to add the hierarchical structure.

[qgan7125]

https://reactjsexample.com/a-simple-and-configurable-tree-view-control-for-react/ Do you think this library is good? This is a very simple react library.

[qgan7125]

https://mui.com/material-ui/react-tree-view/ Material UI provides more features.

[datadavev]

a-simple-and-configurable-tree-view-control-for-react is a bit too simple.

react-tree-view is much nicer for user experience. I find the keyboard support to be very useful.