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.

Sign up for GitHub

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

fix(UI): Remove lateral panels in improvement and harmonization #2

Merged
merged 2 commits into from
Nov 16, 2023
Merged

fix(UI): Remove lateral panels in improvement and harmonization #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef94fb2
removed left panel for improvement and harmonization views, changed i…
Oct 27, 2023
ff23632
replaced variant type and size dropdown menu from list to accordion tree
Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file modified example/example.sh
100644 → 100755
View file
Open in desktop
Empty file.
14 changes: 11 additions & 3 deletions modules/oncoliner_ui/src/ui/harmonization_tab.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import os

from .utils import flatten_dict
from .utils import flatten_dict, flatten_dict_keys
from .plots.harmonization_plot import HarmonizationPlot


Expand Down Expand Up @@ -31,13 +31,21 @@ def get_flatten_tree(self):
# def get_harmonization_keys_ids(self):
# return self._harmonization_keys_ids

def render_dropdown_tree(self, prefix_id, target_group):
template = self._env.get_template(os.path.join("shared", "dropdown_tree.html"))
data = flatten_dict_keys(self.get_tree(), 'id')
self.default_id = data[0]['id']
return template.render(ctrl=self, data=data, prefix_id=prefix_id, target_group=target_group)

def get_tree(self):
return self._harmonization_tree_dict

def render_tree_branch(self, data, prefix_id, target_group, depth=0):
def render_tree_branch(self, data, prefix_id, target_group, depth=0, click_callback=None):
template = self._env.get_template(os.path.join("shared", "tree", "wrapper_template.html"))
return template.render(ctrl=self, data=data, prefix_id=prefix_id, target_group=target_group, depth=depth)
return template.render(ctrl=self, data=data, prefix_id=prefix_id, target_group=target_group, depth=depth, click_callback=click_callback)

def get_harmonization_plot_data(self):
harmonization_plot = HarmonizationPlot(self._harmonization_dao.get_operations_metrics())
return harmonization_plot.get_plot_data()


19 changes: 18 additions & 1 deletion modules/oncoliner_ui/src/ui/html_templates/harmonization_tab/harmonization_panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
<div>
<div class="sub-tab-content tab-content" id="harmonizations_panel_content">
<div class="viz-width-limited">
<label>Select variant type and size</label>

<div id="ddat_harmonization" style="margin:20px;">
<div class="dropdown viz-dropdown-tree">
<button class="form-select" type="button" id="ddat_dropdownMenuButton_harmonization" aria-expanded="false" style="text-align: left" data-bs-toggle="dropdown" data-bs-auto-close="outside">
{{ctrl.get_tree().keys() | first}}
</button>
<div class="dropdown-menu scrollbar" aria-labelledby="ddat_dropdownMenuButton_harmonization" id="ddat_dropdownMenuButton_harmonization_menu">
<div class="tab-pane" role="tablist" aria-orientation="vertical" id="harmonization_size_type">
{{ ctrl.render_tree_branch(ctrl.get_tree(), 'harmonization', 'harmonizations_panel_content', click_callback={'function':'hideMenuAndUpdateSelected', 'params':['ddat_dropdownMenuButton_harmonization_menu', 'ddat_dropdownMenuButton_harmonization']}) }}
</div>
</div>
</div>
</div>
</div>

<div class="nav nav-tabs" id="nav-tab" role="tablist">
<div style="width: 100px"></div>
<button class="nav-link" role="tab" data-bs-toggle="tab" type="button" onclick="setHarmonizationLabelsVisible('snv_indel_sv')">{{conf.names.snv_indel_sv}}</button>
Expand All @@ -15,7 +32,7 @@
</div>
{% for value in ctrl.get_flatten_tree() %}
<div
class="tab-pane fade"
class="tab-pane fade {{'active show' if ctrl.default_id == value.id}}"
id="{{value.id}}_tab"
aria-labelledby="{{value.id}}_tab"
>
Expand Down
45 changes: 33 additions & 12 deletions modules/oncoliner_ui/src/ui/html_templates/improvement_tab/improvement_panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,25 @@
class="sub-tab-content tab-content"
id="improvements_panel_content_{{pipeline_name}}"
>

<div class="viz-width-limited">
<label>Select variant type and size</label>

<div id="ddat_improvement" style="margin:20px;">
<div class="dropdown viz-dropdown-tree">
<button class="form-select" type="button" id="ddat_dropdownMenuButton_improvement_{{pipeline_name}}" aria-expanded="false" style="text-align: left" data-bs-toggle="dropdown" data-bs-auto-close="outside">
{{ctrl.get_tree(pipeline_name).keys() | first}}
</button>
<div class="dropdown-menu scrollbar" aria-labelledby="ddat_dropdownMenuButton_improvement_{{pipeline_name}}" id="ddat_dropdownMenuButton_improvement_menu_{{pipeline_name}}">
<div class="tab-pane" role="tablist" aria-orientation="vertical" id="improvement_size_type">
{{ ctrl.render_tree_branch(ctrl.get_tree(pipeline_name), 'improvement', 'improvements_panel_content_' + pipeline_name, click_callback={'function':'hideMenuAndUpdateSelected', 'params':['ddat_dropdownMenuButton_improvement_menu_' + pipeline_name, 'ddat_dropdownMenuButton_improvement_' + pipeline_name]}) }}
</div>
</div>
</div>
</div>

</div>

<div class="nav nav-tabs" id="nav-tab" role="tablist">
<div style="width: 100px"></div>
<button
Expand Down Expand Up @@ -34,22 +53,24 @@
</button>
</div>
<div class="viz-bordered-tab-container">
<div class="radar-chart-container">
{{include_cooked('shared/export_chart.html',
chart_js_var_name=pipeline_name+'ImprovementPlot',
filenames=pipeline_name+'ImprovementPlotData[\'titles\'].map((a)
=> `'+pipeline_name+'_improvement_plot_${a}`)',
filename=pipeline_name+'ImprovementPlot')}}
<div id="{{pipeline_name}}_chart_container_improvement"></div>
<div class="viz-width-limited">
<div class="radar-chart-container">
{{include_cooked('shared/export_chart.html',
chart_js_var_name=pipeline_name+'ImprovementPlot',
filenames=pipeline_name+'ImprovementPlotData[\'titles\'].map((a)
=> `'+pipeline_name+'_improvement_plot_${a}`)',
filename=pipeline_name+'ImprovementPlot')}}
<div id="{{pipeline_name}}_chart_container_improvement"></div>
</div>
<div
id="improvementPlotInfo{{pipeline_name}}"
class="viz-plot-info"
></div>
</div>
<div
id="improvementPlotInfo{{pipeline_name}}"
class="viz-plot-info"
></div>
</div>
{% for value in ctrl.get_flatten_tree(pipeline_name) %}
<div
class="tab-pane fade"
class="tab-pane fade {{'active show' if ctrl.default_id[pipeline_name] == value.id}}"
id="{{value.id}}_tab"
aria-labelledby="{{value.id}}_tab"
>
Expand Down
10 changes: 2 additions & 8 deletions modules/oncoliner_ui/src/ui/html_templates/improvement_tab/pipeline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
<div class="main-tab-content tab-content">
<div
class="tab-pane fade {{ 'show active' if is_first }}"
id="{{pipeline_name}}_pp_improvement"
aria-labelledby="{{pipeline_name}}_pp_improvement_">
{{ ctrl.render_panel(pipeline_name) }}
</div>
</div>

{{ ctrl.render_panel(pipeline_name) }}


42 changes: 41 additions & 1 deletion modules/oncoliner_ui/src/ui/html_templates/index/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ h1, h2, h3, h4, h5, h6 {
margin-top: 30px;
}

.viz-dropdown-tree .dropdown-menu {
width: 100%;
max-height: 400px;
}

.viz-content {
flex-grow: 1;
padding: 20px;
Expand Down Expand Up @@ -225,6 +230,31 @@ a[class^="icon-"].active {
cursor: pointer;
}

.scrollbar {
overflow: auto;
}

.scrollbar::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
}

#scrollbar::-webkit-scrollbar:vertical {
width: 11px;
}

#scrollbar::-webkit-scrollbar:horizontal {
height: 11px;
}

.scrollbar::-webkit-scrollbar-thumb {
border: 2px solid white;
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.4);
padding: 1px;
}


.viz-nav-block {
height: 40vh;
overflow: auto;
Expand Down Expand Up @@ -335,20 +365,30 @@ canvas {
.accordion-body {
/*background-color: #EEEEEE;*/
padding: 0;
margin-left: 20px;
}
.accordion-body-root {
/*background-color: #EEEEEE;*/
padding: 0;
}

.accordion-body .nav-link {
margin: 10px 20px 10px;
padding-left: 5px;
}

.accordion-body-root .nav-link {
margin: 10px 20px 10px;
padding-left: 5px;
}

.accordion .accordion {
margin-left: 20px;
}

.accordion-button .nav-link {
padding: 2px 5px;
width: 80%;
width: 90%;
}

.accordion-button.no-expand::after {
Expand Down
16 changes: 3 additions & 13 deletions modules/oncoliner_ui/src/ui/html_templates/index/harmonization_tab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,7 @@
<div class="wrapper main-tab-content">
<div class="wrapper">

<div class="sidebar-sticky pt-3 app-sidebar">
<div class="navbar-brand viz-clickable">
Variant size & type
</div>
<div class="tab-pane flex-column viz-nav-block" role="tablist" aria-orientation="vertical" id="harmonization_size_type">
{{ ctrl.render_tree_branch(ctrl.get_tree(), 'harmonization', 'harmonizations_panel_content') }}
</div>

</div>

<main class="viz-content sidebar-spacer">
<h1>Harmonization</h1>
<main class="viz-content">
<h1 class="viz-width-limited">Harmonization</h1>

{{ ctrl.render_panel() }}
</main>
Expand Down
47 changes: 14 additions & 33 deletions modules/oncoliner_ui/src/ui/html_templates/index/improvement_tab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,23 @@
<div class="wrapper main-tab-content">
<div class="wrapper">

<div class="sidebar-sticky pt-3 app-sidebar">
<div class="navbar-brand viz-clickable">
Pipelines
</div>
<div class="nav flex-column nav-pills viz-nav-block" role="tablist" aria-orientation="vertical" >
{% for pp in ctrl.get_pipelines_names() %}
<a class="nav-link {{'active' if loop.index == 1}}"
aria-selected="{{'true' if loop.index == 1 else 'false'}}"
id="{{pp}}_pp_improvement_"
data-bs-toggle="pill"
aria-controls="{{pp}}_pp_improvement_"
data-bs-target="#{{pp}}_pp_improvement"
href="#{{pp}}_pp_improvement"
role="tab"
onclick="toggleTabFromGroup('{{pp}}_improvement_size_type', 'improvement_size_type_filters')"
>{{pp}}</a>
{% endfor %}
</div>
<main class="viz-content">
<h1 class="viz-width-limited">Improvement</h1>

<!-- FILTERS -->

<div class="navbar-brand viz-clickable">
Variant size & type
</div>
<div class="tab-content" id="improvement_size_type_filters">
<nav class="nav nav-tabs">
<div class="nav viz-nav-tabs-container viz-width-limited" id="improvement_pipelines-nav-tab" role="tablist">
{% for pp in ctrl.get_pipelines_names() %}
<button class="nav-link {{'active' if loop.index == 1}}" aria-selected="{{'true' if loop.index == 1 else 'false'}}" id="{{pp}}_pp_improvement_" data-bs-toggle="tab" data-bs-target="#{{pp}}_pp_improvement_content" type="button" role="tab" aria-controls="{{pp}}_pp_improvement_content">{{pp}}</button>
{% endfor %}
</div>
</nav>

<div class="tab-content " id="improvement_pipelines-nav-tab-content">
{% for pp in ctrl.get_pipelines_names() %}
<div class="tab-pane flex-column viz-nav-block {{'active show' if loop.index == 1 else ''}}" role="tablist" aria-orientation="vertical" id="{{pp}}_improvement_size_type">
{{ ctrl.render_tree_branch(ctrl.get_tree(pp), 'improvement_' + pp, 'improvements_panel_content_' + pp) }}
<div class="tab-pane fade {{'show active' if loop.index == 1}} viz-bordered-tab-container viz-content" id="{{pp}}_pp_improvement_content" role="tabpanel" aria-labelledby="{{pp}}_pp_improvement_">
{{ ctrl.render_pipeline(pp) }}
</div>
{% endfor %}
</div>
</div>


<main class="viz-content sidebar-spacer">
<h1>Improvement</h1>

{% for pp in ctrl.get_pipelines_names() %} {{ ctrl.render_pipeline(pp, loop.index == 1) }} {% endfor %}
</main>
</div>
11 changes: 11 additions & 0 deletions modules/oncoliner_ui/src/ui/html_templates/index/js/navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,3 +71,14 @@ function formatTemplateFromMatrix(template, matrix) {
return output;
}

function changeAttributeValue(id, attributeName, attributeValue) {
var element = document.querySelector('#' + id);
if (element) {
element[attributeName] = attributeValue;
}
}

function hideMenuAndUpdateSelected(element, dataContext, menuId, selectedId) {
hideTab(document.querySelector('#' + menuId));
changeAttributeValue(selectedId, 'innerText', dataContext);
}
13 changes: 13 additions & 0 deletions modules/oncoliner_ui/src/ui/html_templates/shared/dropdown_tree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@

<div id="ddt_{{prefix_id}}" style="margin:20px;">
<div class="dropdown viz-dropdown-tree">
<button class="form-select" type="button" id="dropdownMenuButton_{{prefix_id}}" data-bs-toggle="dropdown" aria-expanded="false" style="text-align: left">
{{data[0]['concat_key']}}
</button>
<div class="dropdown-menu scrollbar" aria-labelledby="dropdownMenuButton_{{prefix_id}}">
{% for d in data %}
<a class="dropdown-item" href="#" style="padding-left:{{20*d.depth}}px" onclick="toggleTabFromGroup('{{d.id}}_tab', '{{target_group}}'); changeAttributeValue('dropdownMenuButton_{{prefix_id}}', 'innerText', '{{d.concat_key}}')">{{d['key']}}</a>
{% endfor %}
</div>
</div>
</div>
16 changes: 12 additions & 4 deletions modules/oncoliner_ui/src/ui/html_templates/shared/tree/wrapper_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ <h2 class="accordion-header">
aria-controls="{{data[key]._all_.id}}_"
data-bs-target="#{{data[key]._all_.id}}_tab"
href="#{{data[key]._all_.id}}_tab"
role="tab">{{key}}</a>
role="tab"
{% if click_callback %}
onclick="{{ print_js_function(click_callback.function, ['this', key] + click_callback.params ) }}"
{% endif %}
>{{key}}</a>
{% if depth == 0 and loop.index0 == 0 %}
<script>window.addEventListener('load', function() { {{print_js_function('toggleTabFromGroup', [data[key]._all_.id + '_tab', target_group])}}});</script>
{% endif %}
Expand All @@ -25,14 +29,14 @@ <h2 class="accordion-header">
</div>
</h2>
<div id="{{prefix_id}}_{{loop.index}}" class="accordion-collapse collapse" data-bs-parent="#acc_{{prefix_id}}">
{{ ctrl.render_tree_branch(data[key], prefix_id + '_' + key, target_group, depth + 1) }}
{{ ctrl.render_tree_branch(data[key], prefix_id + '_' + key, target_group, depth + 1, click_callback) }}
</div>
</div>
{% endif %}
{% endfor %}
</div>

<div class="accordion-body nav-pills">
<div class="{{ 'accordion-body' if depth > 0 else 'accordion-body-root' }} nav-pills">
{% for key in data %}
{% if 'id' in data[key] and key != '_all_' %}
<a class="nav-link"
Expand All @@ -41,7 +45,11 @@ <h2 class="accordion-header">
aria-controls="{{data[key].id}}_"
data-bs-target="#{{data[key].id}}_tab"
href="#{{data[key].id}}_tab"
role="tab">{{key}}</a>
role="tab"
{% if click_callback %}
onclick="{{ print_js_function(click_callback.function, ['this', key] + click_callback.params ) }}"
{% endif %}
>{{key}}</a>
{% endif %}
{% endfor %}
</div>
Loading