diff --git a/example/example.sh b/example/example.sh old mode 100644 new mode 100755 diff --git a/modules/oncoliner_ui/src/ui/harmonization_tab.py b/modules/oncoliner_ui/src/ui/harmonization_tab.py index 9081ecf..47938d4 100644 --- a/modules/oncoliner_ui/src/ui/harmonization_tab.py +++ b/modules/oncoliner_ui/src/ui/harmonization_tab.py @@ -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 @@ -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() + + diff --git a/modules/oncoliner_ui/src/ui/html_templates/harmonization_tab/harmonization_panel.html b/modules/oncoliner_ui/src/ui/html_templates/harmonization_tab/harmonization_panel.html index cd062df..1a3c855 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/harmonization_tab/harmonization_panel.html +++ b/modules/oncoliner_ui/src/ui/html_templates/harmonization_tab/harmonization_panel.html @@ -1,5 +1,22 @@
+
+ + +
+
+ + +
+
+
+ {% for value in ctrl.get_flatten_tree() %}
diff --git a/modules/oncoliner_ui/src/ui/html_templates/improvement_tab/improvement_panel.html b/modules/oncoliner_ui/src/ui/html_templates/improvement_tab/improvement_panel.html index 1edd42e..efdd80f 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/improvement_tab/improvement_panel.html +++ b/modules/oncoliner_ui/src/ui/html_templates/improvement_tab/improvement_panel.html @@ -3,6 +3,25 @@ class="sub-tab-content tab-content" id="improvements_panel_content_{{pipeline_name}}" > + +
+ + +
+
+ + +
+
+ +
+
-
- {{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')}} -
+
+
+ {{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')}} +
+
+
-
{% for value in ctrl.get_flatten_tree(pipeline_name) %}
diff --git a/modules/oncoliner_ui/src/ui/html_templates/improvement_tab/pipeline.html b/modules/oncoliner_ui/src/ui/html_templates/improvement_tab/pipeline.html index 24dd678..cdf1006 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/improvement_tab/pipeline.html +++ b/modules/oncoliner_ui/src/ui/html_templates/improvement_tab/pipeline.html @@ -1,10 +1,4 @@ -
-
- {{ ctrl.render_panel(pipeline_name) }} -
-
+ + {{ ctrl.render_panel(pipeline_name) }} diff --git a/modules/oncoliner_ui/src/ui/html_templates/index/css/app.css b/modules/oncoliner_ui/src/ui/html_templates/index/css/app.css index df1d94b..4af8cfb 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/index/css/app.css +++ b/modules/oncoliner_ui/src/ui/html_templates/index/css/app.css @@ -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; @@ -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; @@ -335,6 +365,11 @@ canvas { .accordion-body { /*background-color: #EEEEEE;*/ padding: 0; + margin-left: 20px; +} +.accordion-body-root { + /*background-color: #EEEEEE;*/ + padding: 0; } .accordion-body .nav-link { @@ -342,13 +377,18 @@ canvas { 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 { diff --git a/modules/oncoliner_ui/src/ui/html_templates/index/harmonization_tab.html b/modules/oncoliner_ui/src/ui/html_templates/index/harmonization_tab.html index 0cd6e91..15dc48f 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/index/harmonization_tab.html +++ b/modules/oncoliner_ui/src/ui/html_templates/index/harmonization_tab.html @@ -1,17 +1,7 @@ -
+
-
-
- Variant size & type -
-
- {{ ctrl.render_tree_branch(ctrl.get_tree(), 'harmonization', 'harmonizations_panel_content') }} -
- -
- -
-

Harmonization

+
+

Harmonization

{{ ctrl.render_panel() }}
diff --git a/modules/oncoliner_ui/src/ui/html_templates/index/improvement_tab.html b/modules/oncoliner_ui/src/ui/html_templates/index/improvement_tab.html index ae4b624..12cb873 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/index/improvement_tab.html +++ b/modules/oncoliner_ui/src/ui/html_templates/index/improvement_tab.html @@ -1,42 +1,23 @@ -
+
-
-
- Pipelines -
-
- {% for pp in ctrl.get_pipelines_names() %} - {{pp}} - {% endfor %} -
+
+

Improvement

- - -
- Variant size & type -
-
+ + +
{% for pp in ctrl.get_pipelines_names() %} -
- {{ ctrl.render_tree_branch(ctrl.get_tree(pp), 'improvement_' + pp, 'improvements_panel_content_' + pp) }} +
+ {{ ctrl.render_pipeline(pp) }}
{% endfor %}
-
- - -
-

Improvement

- {% for pp in ctrl.get_pipelines_names() %} {{ ctrl.render_pipeline(pp, loop.index == 1) }} {% endfor %}
\ No newline at end of file diff --git a/modules/oncoliner_ui/src/ui/html_templates/index/js/navigation.js b/modules/oncoliner_ui/src/ui/html_templates/index/js/navigation.js index 19751d0..35451da 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/index/js/navigation.js +++ b/modules/oncoliner_ui/src/ui/html_templates/index/js/navigation.js @@ -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); +} diff --git a/modules/oncoliner_ui/src/ui/html_templates/shared/dropdown_tree.html b/modules/oncoliner_ui/src/ui/html_templates/shared/dropdown_tree.html new file mode 100644 index 0000000..6a3f9e8 --- /dev/null +++ b/modules/oncoliner_ui/src/ui/html_templates/shared/dropdown_tree.html @@ -0,0 +1,13 @@ + +
+
+ +
+ {% for d in data %} + {{d['key']}} + {% endfor %} +
+
+
diff --git a/modules/oncoliner_ui/src/ui/html_templates/shared/tree/wrapper_template.html b/modules/oncoliner_ui/src/ui/html_templates/shared/tree/wrapper_template.html index ebad7a2..125a584 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/shared/tree/wrapper_template.html +++ b/modules/oncoliner_ui/src/ui/html_templates/shared/tree/wrapper_template.html @@ -15,7 +15,11 @@

aria-controls="{{data[key]._all_.id}}_" data-bs-target="#{{data[key]._all_.id}}_tab" href="#{{data[key]._all_.id}}_tab" - role="tab">{{key}} + role="tab" + {% if click_callback %} + onclick="{{ print_js_function(click_callback.function, ['this', key] + click_callback.params ) }}" + {% endif %} + >{{key}} {% if depth == 0 and loop.index0 == 0 %} {% endif %} @@ -25,14 +29,14 @@

- {{ 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) }}
{% endif %} {% endfor %}
-
+
{% for key in data %} {% if 'id' in data[key] and key != '_all_' %} aria-controls="{{data[key].id}}_" data-bs-target="#{{data[key].id}}_tab" href="#{{data[key].id}}_tab" - role="tab">{{key}} + role="tab" + {% if click_callback %} + onclick="{{ print_js_function(click_callback.function, ['this', key] + click_callback.params ) }}" + {% endif %} + >{{key}} {% endif %} {% endfor %}
diff --git a/modules/oncoliner_ui/src/ui/improvement_tab.py b/modules/oncoliner_ui/src/ui/improvement_tab.py index a360822..b027d8a 100644 --- a/modules/oncoliner_ui/src/ui/improvement_tab.py +++ b/modules/oncoliner_ui/src/ui/improvement_tab.py @@ -1,6 +1,6 @@ import os -from .utils import flatten_dict +from .utils import flatten_dict, flatten_dict_keys from .plots.improvement_plot import ImprovementPlot @@ -8,10 +8,11 @@ class ImprovementTab(): def __init__(self, env, dao): self._env = env self._improvement_dao = dao + self.default_id = {} - def render_pipeline(self, pipeline_name, is_first): + def render_pipeline(self, pipeline_name): template = self._env.get_template(os.path.join("improvement_tab", "pipeline.html")) - return template.render(ctrl=self, pipeline_name=pipeline_name, is_first=is_first) + return template.render(ctrl=self, pipeline_name=pipeline_name) def render(self): return self._env.get_template(os.path.join("index", "improvement_tab.html")).render(ctrl=self) @@ -38,6 +39,12 @@ def render_table(self, id_, pipeline_name, data): template = self._env.get_template(os.path.join("improvement_tab", "improvement_table.html")) return template.render(ctrl=self, id=f'table_{id_}', pipeline_name=pipeline_name, data=data) - def render_tree_branch(self, data, prefix_id, target_group, depth=0): + def render_dropdown_tree(self, pipeline_name, prefix_id, target_group): + template = self._env.get_template(os.path.join("shared", "dropdown_tree.html")) + data = flatten_dict_keys(self._improvement_dao.get_pipeline_improvement_tree(pipeline_name), 'id') + self.default_id[pipeline_name] = data[0]['id'] + return template.render(ctrl=self, data=data, prefix_id=prefix_id, target_group=target_group) + + 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) diff --git a/modules/oncoliner_ui/src/ui/utils.py b/modules/oncoliner_ui/src/ui/utils.py index 9220082..9e5cc77 100644 --- a/modules/oncoliner_ui/src/ui/utils.py +++ b/modules/oncoliner_ui/src/ui/utils.py @@ -18,21 +18,54 @@ def path_to_pipeline_name(path: str): return os.path.split(path)[-1] -def flatten_dict(dict_, key_limit=None): +def flatten_dict(dict_, key_limit=None, key=None, concat_key=""): items = [] + if not concat_key: + concat_key = key; + elif key: + concat_key = concat_key + " ; " + key + + # if concat_key and isinstance(dict_, MutableMapping) and '_all_' in dict_: + # dict_['concat_key'] = concat_key + if key_limit and key_limit in dict_: items.append(dict_) else: - for v in dict_.values(): + for k in dict_: + v = dict_[k] if isinstance(v, MutableMapping): - items.extend(flatten_dict(v, key_limit)) + items.extend(flatten_dict(v, key_limit, k, concat_key)) else: items.append(v) return items +def flatten_dict_keys(dict_, value_key, depth=0, key=None, concat_key=""): + items = [] + + if not concat_key: + concat_key = key; + elif key: + concat_key = concat_key + " ; " + key + + currDict = {'key': key, 'depth': depth, 'concat_key': concat_key} + + if value_key in dict_: + currDict[value_key] = dict_[value_key] + items.append(currDict) + else: + if '_all_' in dict_: + items.append({'key': key, 'depth': depth, 'concat_key': concat_key, value_key: dict_['_all_'][value_key]}) + for k in dict_: + v = dict_[k] + if isinstance(v, MutableMapping) and k != '_all_': + items.extend(flatten_dict_keys(v, value_key, depth + 1, k, concat_key)) + + return items + + def get_conf(): global config if not config: