From c319223983642e707e7ab5e556b49ba243044b14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michal=20Mal=C3=BD?= <malym@ibt.cas.cz>
Date: Tue, 21 Dec 2021 15:18:46 +0100
Subject: [PATCH] Use viewer initialization callback
---
index.html | 212 +++++++++++++++++++++++++++--------------------------
molstar | 2 +-
2 files changed, 110 insertions(+), 104 deletions(-)
diff --git a/index.html b/index.html
index c4c6fb8..ac4923e 100644
--- a/index.html
+++ b/index.html
@@ -843,7 +843,7 @@ function init_all() {
set_scroll_listeners('abz_tab');
watna_init(
- 'wva-app-browse',
+ 'wva-app-abz',
{
nonNucleicStructurePartsName: 'Non-nucleic structure parts',
hydrationSitesName: 'Hydration sites',
@@ -855,10 +855,83 @@ function init_all() {
disableStepWaters: true,
pathPrefix: WATNA_SRV_PATH,
representationControlsStyle: 'on-off',
+ onViewerInitialized: () => {
+ // Activate the HOME button upon site (re)load
+ document.getElementById("abz_button").click();
+
+ let ctr = 0;
+ let percentLoaded = 0;
+ const viewerElem = document.getElementById('wva-app-abz-viewer');
+ const loadingElem = document.createElement('div');
+ viewerElem.appendChild(loadingElem);
+ loadingElem.style.position = 'relative';
+ loadingElem.style.top = '50%';
+ loadingElem.style.width = '100%';
+ loadingElem.style.textAlign = 'center';
+
+ if (WATNA_PRELOAD_ABZ) {
+ const anim = setInterval(() => {
+ let txt = `Viewer is initializing ${Math.floor(percentLoaded + 0.5)} % <img src="imgs/progress_${ctr}.svg" />`;
+
+ ctr = ++ctr % 3;
+ loadingElem.innerHTML = txt;
+ }, 150);
+
+ watna_preload_fragments(
+ 'wva-app-abz',
+ PRIMARY_NTCS,
+ (loaded, total) => percentLoaded = 100 * loaded / total
+ ).then(() => {
+ watna_set_on_removed_callback('wva-app-abz', fragId => {
+ const elem = document.getElementById(fragment_cell_id(fragId, 'abz'));
+ if (elem) {
+ elem.style.removeProperty('background-color');
+ elem.style.removeProperty('color');
+ }
+ redraw_molstar();
+ });
+ watna_set_on_colors_changed_callback('wva-app-abz', fragId => {
+ const elem = document.getElementById(fragment_cell_id(fragId, 'abz'));
+ if (elem) {
+ watna_set_elem_color(elem, 'wva-app-abz', fragId);
+ }
+ });
+
+ clearInterval(anim);
+ viewerElem.removeChild(loadingElem);
+
+ show_initial_fragment('BB00', 'C_G');
+ }).catch(e => {
+ clearInterval(anim);
+ if (viewerElem.contains(loadingElem)) {
+ viewerElem.removeChild(loadingElem);
+ }
+ throw e;
+ });
+ } else {
+ watna_set_on_removed_callback('wva-app-abz', fragId => {
+ const elem = document.getElementById(fragment_cell_id(fragId, 'abz'));
+ if (elem) {
+ elem.style.removeProperty('background-color');
+ elem.style.removeProperty('color');
+ }
+ redraw_molstar();
+ });
+ watna_set_on_colors_changed_callback('wva-app-abz', fragId => {
+ const elem = document.getElementById(fragment_cell_id(fragId, 'abz'));
+ if (elem) {
+ watna_set_elem_color(elem, 'wva-app-abz', fragId);
+ }
+ });
+
+ show_initial_fragment('BB00', 'C_G');
+ }
+ }
}
);
+
watna_init(
- 'wva-app-abz',
+ 'wva-app-browse',
{
nonNucleicStructurePartsName: 'Non-nucleic structure parts',
hydrationSitesName: 'Hydration sites',
@@ -870,8 +943,26 @@ function init_all() {
disableStepWaters: true,
pathPrefix: WATNA_SRV_PATH,
representationControlsStyle: 'on-off',
+ onViewerInitialized: () => {
+ watna_set_on_removed_callback("wva-app-browse", fragId => {
+ const elem = document.getElementById(fragment_cell_id(fragId, 'browse'));
+ if (elem) {
+ elem.style.removeProperty("background-color");
+ elem.style.removeProperty("color");
+ }
+ redraw_molstar();
+ });
+
+ watna_set_on_colors_changed_callback('wva-app-browse', fragId => {
+ const elem = document.getElementById(fragment_cell_id(fragId, 'browse'));
+ if (elem) {
+ watna_set_elem_color(elem, 'wva-app-browse', fragId);
+ }
+ });
+ }
}
);
+
watna_init(
'wva-app-predictions',
{
@@ -885,6 +976,22 @@ function init_all() {
disableStepWaters: true,
pathPrefix: WATNA_SRV_PATH,
representationControlsStyle: 'options',
+ onViewerInitialized: () => {
+ watna_set_on_removed_callback("wva-app-predictions", fragId => {
+ const elem = document.getElementById(fragment_cell_id(fragId, 'predictions'));
+ if (elem) {
+ elem.style.removeProperty("background-color");
+ elem.style.removeProperty("color");
+ }
+ redraw_molstar();
+ });
+ watna_set_on_colors_changed_callback('wva-app-predictions', fragId => {
+ const elem = document.getElementById(fragment_cell_id(fragId, 'predictions'));
+ if (elem) {
+ watna_set_elem_color(elem, 'wva-app-predictions', fragId);
+ }
+ });
+ }
}
);
@@ -895,107 +1002,6 @@ function init_all() {
sh.handler();
}
});
-
- // Activate the HOME button uppon site (re)load
- document.getElementById("abz_button").click();
-
- let ctr = 0;
- let percentLoaded = 0;
- const viewerElem = document.getElementById('wva-app-abz-viewer');
- const loadingElem = document.createElement('div');
- viewerElem.appendChild(loadingElem);
- loadingElem.style.position = 'relative';
- loadingElem.style.top = '50%';
- loadingElem.style.width = '100%';
- loadingElem.style.textAlign = 'center';
-
- if (WATNA_PRELOAD_ABZ) {
- const anim = setInterval(() => {
- let txt = `Viewer is initializing ${Math.floor(percentLoaded + 0.5)} % <img src="imgs/progress_${ctr}.svg" />`;
-
- ctr = ++ctr % 3;
- loadingElem.innerHTML = txt;
- }, 150);
-
- watna_preload_fragments(
- "wva-app-abz",
- PRIMARY_NTCS,
- (loaded, total) => percentLoaded = 100 * loaded / total
- ).then(() => {
- watna_set_on_removed_callback("wva-app-abz", fragId => {
- const elem = document.getElementById(fragment_cell_id(fragId, 'abz'));
- if (elem) {
- elem.style.removeProperty("background-color");
- elem.style.removeProperty("color");
- }
- redraw_molstar();
- });
- watna_set_on_colors_changed_callback('wva-app-abz', fragId => {
- const elem = document.getElementById(fragment_cell_id(fragId, 'abz'));
- if (elem) {
- watna_set_elem_color(elem, 'wva-app-abz', fragId);
- }
- });
-
- clearInterval(anim);
- viewerElem.removeChild(loadingElem);
-
- show_initial_fragment('BB00', 'C_G');
- }).catch(e => {
- clearInterval(anim);
- if (viewerElem.contains(loadingElem)) {
- viewerElem.removeChild(loadingElem);
- }
- throw e;
- });
- } else {
- watna_set_on_removed_callback("wva-app-abz", fragId => {
- const elem = document.getElementById(fragment_cell_id(fragId, 'abz'));
- if (elem) {
- elem.style.removeProperty("background-color");
- elem.style.removeProperty("color");
- }
- redraw_molstar();
- });
- watna_set_on_colors_changed_callback('wva-app-abz', fragId => {
- const elem = document.getElementById(fragment_cell_id(fragId, 'abz'));
- if (elem) {
- watna_set_elem_color(elem, 'wva-app-abz', fragId);
- }
- });
-
- show_initial_fragment('BB00', 'C_G');
- }
-
- watna_set_on_removed_callback("wva-app-browse", fragId => {
- const elem = document.getElementById(fragment_cell_id(fragId, 'browse'));
- if (elem) {
- elem.style.removeProperty("background-color");
- elem.style.removeProperty("color");
- }
- redraw_molstar();
- });
- watna_set_on_colors_changed_callback('wva-app-browse', fragId => {
- const elem = document.getElementById(fragment_cell_id(fragId, 'browse'));
- if (elem) {
- watna_set_elem_color(elem, 'wva-app-browse', fragId);
- }
- });
-
- watna_set_on_removed_callback("wva-app-predictions", fragId => {
- const elem = document.getElementById(fragment_cell_id(fragId, 'predictions'));
- if (elem) {
- elem.style.removeProperty("background-color");
- elem.style.removeProperty("color");
- }
- redraw_molstar();
- });
- watna_set_on_colors_changed_callback('wva-app-predictions', fragId => {
- const elem = document.getElementById(fragment_cell_id(fragId, 'predictions'));
- if (elem) {
- watna_set_elem_color(elem, 'wva-app-predictions', fragId);
- }
- });
}).catch(e => {
document.getElementById('abz-layout-first').style.width = '100%';
document.getElementById('wva-abz-status').innerHTML = `<span class="error">Failed to initialize viewer: ${e.toString()}</span>`;
diff --git a/molstar b/molstar
index ccdd13d..f757dfc 160000
--- a/molstar
+++ b/molstar
@@ -1 +1 @@
-Subproject commit ccdd13d92c8ba2e2efca17262aac7ee9dea7bcb6
+Subproject commit f757dfc87d3d7eaaf029d78ff1c848563d523184
--
GitLab