From c67d1c76647795baf1696d8b8731678b6e8eb326 Mon Sep 17 00:00:00 2001 From: Rapsssito Date: Wed, 29 Nov 2023 16:56:28 +0100 Subject: [PATCH] feat(UI): Add harmonization text and style --- .../oncoliner_ui/src/ui/harmonization_tab.py | 8 ++- .../assesment_tab/metrics_panel.html | 12 +--- .../assesment_tab/metrics_plot.html | 9 +-- .../harmonization_panel.html | 58 +++++++++++------- .../improvement_tab/pipeline.html | 2 +- .../src/ui/html_templates/index/css/app.css | 20 +++---- .../index/harmonization_tab.html | 1 - .../index/js/charts/harmonizationChart.js | 60 ++++++++++++++----- .../model/harmonization/harmonization_dao.py | 13 +++- 9 files changed, 118 insertions(+), 65 deletions(-) diff --git a/modules/oncoliner_ui/src/ui/harmonization_tab.py b/modules/oncoliner_ui/src/ui/harmonization_tab.py index a210560..77e5e69 100644 --- a/modules/oncoliner_ui/src/ui/harmonization_tab.py +++ b/modules/oncoliner_ui/src/ui/harmonization_tab.py @@ -3,9 +3,10 @@ from .utils import flatten_dict, flatten_dict_keys from .plots.harmonization_plot import HarmonizationPlot +from .model.harmonization.harmonization_dao import HarmonizationDAO class HarmonizationTab(): - def __init__(self, env, dao): + def __init__(self, env, dao: HarmonizationDAO): self._env = env self._harmonization_dao = dao self._harmonization_tree_dict = self._harmonization_dao.get_tree() @@ -21,11 +22,14 @@ def render_panel(self): def render_table(self, id_, data): template = self._env.get_template(os.path.join("harmonization_tab", "harmonization_table.html")) # Build the default order of the columns - columns_order = [[data.columns.get_loc('h_score'), 'asc'], [data.columns.get_loc('gdr'), 'asc'], [data.columns.get_loc('f1_score_avg'), 'desc'], [data.columns.get_loc('added_callers_sum'), 'asc']] + columns_order = list(map(lambda x: [data.columns.get_loc(x[0]), x[1]], self._harmonization_dao.get_default_order())) # Get the index of the row with all names 'baseline' pipelines_names = self._harmonization_dao.get_pipelines_names() baseline_index = data[data[pipelines_names].apply(lambda x: all(x == 'baseline'), axis=1)].index[0] return template.render(ctrl=self, id=f'table_{id_}', data=data, fixed_index=baseline_index, default_order=columns_order) + + def get_best_harmonization_names(self, variant_type: str): + return self._harmonization_dao.get_best_harmonization_names(variant_type) def get_flatten_tree(self): return flatten_dict(self._harmonization_tree_dict, 'id') diff --git a/modules/oncoliner_ui/src/ui/html_templates/assesment_tab/metrics_panel.html b/modules/oncoliner_ui/src/ui/html_templates/assesment_tab/metrics_panel.html index ee1360f..26414ac 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/assesment_tab/metrics_panel.html +++ b/modules/oncoliner_ui/src/ui/html_templates/assesment_tab/metrics_panel.html @@ -45,9 +45,7 @@ id="metricspaneltab_snv_indel_sv_{{id}}_" aria-labelledby="metricspaneltab_snv_indel_sv_{{id}}" > -
- {{ ctrl.render_metrics_plot(metrics_table, id, 'snv_indel_sv') }} -
+ {{ ctrl.render_metrics_plot(metrics_table, id, 'snv_indel_sv') }} {{ ctrl.render_metrics_table(metrics_table, id, 'snv_indel_sv', sample) }}
-
- {{ ctrl.render_metrics_plot(metrics_table, id, 'sv_subtypes') }} -
+ {{ ctrl.render_metrics_plot(metrics_table, id, 'sv_subtypes') }} {{ ctrl.render_metrics_table(metrics_table, id, 'sv_subtypes', sample) }}
-
- {{ ctrl.render_metrics_plot(metrics_table, id, 'sv_subtypes_sizes') }} -
+ {{ ctrl.render_metrics_plot(metrics_table, id, 'sv_subtypes_sizes') }} {{ ctrl.render_metrics_table(metrics_table, id, 'sv_subtypes_sizes', sample) }}
diff --git a/modules/oncoliner_ui/src/ui/html_templates/assesment_tab/metrics_plot.html b/modules/oncoliner_ui/src/ui/html_templates/assesment_tab/metrics_plot.html index 49f40c6..b44d10d 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/assesment_tab/metrics_plot.html +++ b/modules/oncoliner_ui/src/ui/html_templates/assesment_tab/metrics_plot.html @@ -1,9 +1,10 @@

Performance metrics ({{conf.names[plot_type]}})

-
- {{include_cooked('shared/export_chart.html', chart_js_var_name=id+'MetricsChart', filenames=[id+'_metrics_plot'], filename=id+'_metrics_plot')}} - +
+
+ {{include_cooked('shared/export_chart.html', chart_js_var_name=id+'MetricsChart', filenames=[id+'_metrics_plot'], filename=id+'_metrics_plot')}} + +
- {% block javascript %} {% endblock %} 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 4b880d1..32c808e 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 @@ -73,7 +73,7 @@

Performance metrics (baseline vs

Explore the improvement possibilities of {{pipeline_name}} by selecting a variant caller or combination of variant callers from the table below. baseline represents the {{pipeline_name}} without any combination with other callers. Use the dropdown below to check the improvements possibilities for specific variant types and sizes. The selected improvement will be displayed in the plot above.

-
+
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 85c064a..239c423 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 @@ -29,6 +29,12 @@ h1, h2, h3, h4, h5, h6 { margin-top: 30px; } +.viz-dropdown-tree { + max-width: 300px; + margin-left: auto; + margin-right: auto; +} + .viz-dropdown-tree .dropdown-menu { width: 100%; max-height: 400px; @@ -298,10 +304,6 @@ a[class^="icon-"].active { background: transparent !important; } -.viz-inline-plots { - height: 60vh; -} - .viz-fixed-row { font-weight: bold; } @@ -344,18 +346,12 @@ a[class^="icon-"].active { align-items: center; } -.radar-chart-container { - width: 100%; +.radar-chart-container, .metrics-chart-container { + width: 100%; height: 500px; position: relative; } -.metrics-chart-container { - position: relative; - margin-left: auto; - margin-right: auto; -} - canvas { width: 100% !important; } 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 1c029bd..5aaefca 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,7 +1,6 @@

Harmonization

-

Listing of the harmonization possibilities based on the improvements possibilities of the pipelines: {{ ctrl.get_pipelines_names()|join(', ') }}.

{{ ctrl.render_panel() }}
\ No newline at end of file diff --git a/modules/oncoliner_ui/src/ui/html_templates/index/js/charts/harmonizationChart.js b/modules/oncoliner_ui/src/ui/html_templates/index/js/charts/harmonizationChart.js index 4c8a86f..d306ba1 100644 --- a/modules/oncoliner_ui/src/ui/html_templates/index/js/charts/harmonizationChart.js +++ b/modules/oncoliner_ui/src/ui/html_templates/index/js/charts/harmonizationChart.js @@ -53,9 +53,19 @@ function createHarmonizationPlot(htmlContainerId, datasetNames, titles, labels, } } + /** + * @param {string[]} names + */ + function setHarmonizationLegendNames(names) { + for (const chart of charts) { + chart.setHarmonizationLegendNames(names); + } + } + return { setLabelsVisible, setHarmonizationData, + setHarmonizationLegendNames, getBase64Images : () => charts.map(chart => chart.getBase64Image()), getCanvas: () => concatCanvases(charts.map((chart) => chart.getCanvas())) }; @@ -71,8 +81,6 @@ function createHarmonizationPlot(htmlContainerId, datasetNames, titles, labels, */ function _buildHarmonizationChart(ctx, index, datasetNames, titles, labels, baseValues) { const COLORS = ["#228833", "#bc629f", "#4477AA", "#E3B505", "#95190C"]; - const HARMONIZATION_SUFFIX = " (harmonization)"; - const BASELINE_SUFFIX = " (baseline)"; // Create a dataset for the chartBaseData /** @type {ChartDataset[]} */ const datasets = []; @@ -81,7 +89,8 @@ function _buildHarmonizationChart(ctx, index, datasetNames, titles, labels, base const datasetName = datasetNames[i]; const harmonizationValues = baseValues[i][index]; datasets.push({ - label: `${datasetName}${BASELINE_SUFFIX}`, + customType: 'baseline', + label: `${datasetName}`, data: harmonizationValues, backgroundColor: `${COLORS[i % COLORS.length]}50`, borderWidth: 0, @@ -92,7 +101,8 @@ function _buildHarmonizationChart(ctx, index, datasetNames, titles, labels, base }, }); datasets.push({ - label: `${datasetName}${HARMONIZATION_SUFFIX}`, + customType: 'harmonization', + label: `${datasetName} (baseline)`, data: harmonizationValues, borderColor: COLORS[i % COLORS.length], pointBackgroundColor: COLORS[i % COLORS.length], @@ -113,27 +123,31 @@ function _buildHarmonizationChart(ctx, index, datasetNames, titles, labels, base /** * @param {string} datasetName + * @param {string} datasetType * @param {number[]} values */ - function applyValuesToDataset(datasetName, values) { + function applyValuesToDataset(datasetName, datasetType, values) { const dataset = chart.data.datasets.find( - (dataset) => dataset.label === datasetName + (dataset) => dataset.label.split(' (')[0] === datasetName && dataset.customType === datasetType ); - if (!dataset) return; + if (!dataset) { + throw new Error( + `Could not find dataset with label ${datasetName} and type ${datasetType}` + ); + } dataset.data = values; } /** * @param {number[][]} newValues * @param {number[]} indexes - * @param {string} suffix + * @param {string} datasetType */ - function updateDatasetValues(newValues, indexes, suffix) { + function updateDatasetValues(newValues, indexes, datasetType) { for (let i = 0; i < newValues.length; i++) { - const datasetName = `${datasetNames[i]}${suffix}`; const newValue = newValues[i]; const values = indexes.map((index) => newValue[index]); - applyValuesToDataset(datasetName, values); + applyValuesToDataset(datasetNames[i], datasetType, values); } } @@ -151,7 +165,7 @@ function _buildHarmonizationChart(ctx, index, datasetNames, titles, labels, base indexes.push(index); } // Get the values of the labels that are in the chart - updateDatasetValues(harmonizationValues, indexes, HARMONIZATION_SUFFIX); + updateDatasetValues(harmonizationValues, indexes, 'harmonization'); chart.update(); } @@ -170,14 +184,32 @@ function _buildHarmonizationChart(ctx, index, datasetNames, titles, labels, base indexes.sort((a, b) => a - b); // Get the values of the labels that are in the chart chart.data.labels = indexes.map((index) => originalLabels[index]); - updateDatasetValues(harmonizationValues, indexes, HARMONIZATION_SUFFIX); - updateDatasetValues(originalValues, indexes, BASELINE_SUFFIX); + updateDatasetValues(harmonizationValues, indexes, 'harmonization'); + updateDatasetValues(originalValues, indexes, 'baseline'); + chart.update(); + } + + /** + * @param {string[]} operationNames + */ + function setHarmonizationLegendNames(operationNames) { + // Get all the datasets that are harmonization + const harmonizationDatasets = chart.data.datasets.filter( + (dataset) => dataset.customType === 'harmonization' + ); + // Change the text of the label between brackets + for (let i = 0; i < harmonizationDatasets.length; i++) { + const harmonizationDataset = harmonizationDatasets[i]; + const pipelineName = harmonizationDataset.label.split(' (')[0]; + harmonizationDataset.label = `${pipelineName} (${operationNames[i]})`; + } chart.update(); } return { setHarmonizationData, setLabelsVisible, + setHarmonizationLegendNames, getBase64Image: () => getBase64Image(chart), getCanvas: () => {return chart} }; diff --git a/modules/oncoliner_ui/src/ui/model/harmonization/harmonization_dao.py b/modules/oncoliner_ui/src/ui/model/harmonization/harmonization_dao.py index 1336b18..6885ca1 100644 --- a/modules/oncoliner_ui/src/ui/model/harmonization/harmonization_dao.py +++ b/modules/oncoliner_ui/src/ui/model/harmonization/harmonization_dao.py @@ -1,6 +1,7 @@ -from typing import List, Dict +from typing import List, Dict, Tuple import os +from collections import OrderedDict from ..shared.table_from_list_dao import TableFromListDAO from ..shared.metrics_table import MetricsTable from ...utils import path_to_pipeline_name @@ -28,6 +29,16 @@ def __init__(self, harmonization_folder: str, pipelines_improvements_folder: Lis # Sort the pipelines names self._pipelines_names.sort() + def get_default_order(self) -> List[Tuple[str, str]]: + return [('h_score', 'asc'), ('gdr', 'asc'), ('f1_score_avg', 'desc'), ('added_callers_sum', 'asc')] + + def get_best_harmonization_names(self, variant_type: str) -> Dict[str, str]: + first_row = self._table.get_first_from_ordered(variant_type, self.get_default_order()) + result = OrderedDict() + for pipeline_name in self._pipelines_names: + result[pipeline_name] = first_row[pipeline_name] + return result + def get_pipelines_names(self): return self._pipelines_names