Add tree-like visualization of the AudioSet Ontology #22
Conversation
datasets/models.py
Outdated
| @@ -56,6 +56,30 @@ def paths(node_id, cur=list()): | |||
|
|
|||
| return hierarchy_paths | |||
|
|
|||
| def get_dict_tree(self): | |||
There was a problem hiding this comment.
Add a docstring here describing what the function does.
I also suggest to change the name to get_taxonomy_as_tree.
datasets/views.py
Outdated
| @@ -32,6 +33,7 @@ def dataset(request, short_name): | |||
| dataset = get_object_or_404(Dataset, short_name=short_name) | |||
| user_is_maintainer = dataset.user_is_maintainer(request.user) | |||
| form_errors = False | |||
| ontology = dataset.taxonomy.get_dict_tree() | |||
There was a problem hiding this comment.
I'd use taxonomy_tree as variable name instead of ontology.
templates/dataset.html
Outdated
| <div id="dataset_taxonomy_table_placeholder"> | ||
| <!-- MENU --> | ||
| <div class="ui inverted menu"> | ||
| <a class="item" onclick="openTab(event, 'dataset_taxonomy_table_placeholder')"> |
There was a problem hiding this comment.
Add class active so is active by default.
templates/dataset.html
Outdated
| <!-- MENU --> | ||
| <div class="ui inverted menu"> | ||
| <a class="item" onclick="openTab(event, 'dataset_taxonomy_table_placeholder')"> | ||
| <i class="list layout icon"></i> Content |
There was a problem hiding this comment.
Here I'd put "Table" instead of "Content". "Content" would apply to both visualisations in my opinion.
templates/ontology_tree.html
Outdated
| @@ -0,0 +1,169 @@ | |||
| {% block content %} | |||
|
|
|||
| <style> | |||
There was a problem hiding this comment.
All this css should be in /static/css/main.css.
templates/ontology_tree.html
Outdated
| } | ||
| </style> | ||
|
|
||
| <div id="dataset_taxonomy_tree_placeholder" class="tabcontent" style="display: none;"> |
There was a problem hiding this comment.
These instructions are ugly hehe ;)
At least you should change the font-face so it's not different than the rest of the website. Probably by wrapping everything in a <p>. Have a look at semantic ui docs and maybe find something to put the instructions in like a message box.
Also I don't like the text on the left/on the right to differentiate. I'd put all titles on the left, and then maybe add a plus [+] symbol next to titles that can be expanded. This is just a suggestion. Also make all font-sizes and circles bigger.
|
Changes done. A sort of adaptive height of the tree container would be the best, but it is not currently implemented. |
|
Just saw another small problem: color restrictions do not correspond to ours. |
|
Ready |
Tree-like visualization of the AudioSet Ontology added in the dataset page #4 :