Usability improvements and bug fixes: Modified the help function sele…

…ctors to make them less dependent on the context; Adjusted the settings behavior so that expandable cards now open one at a time; Disabled search functions if the tree is not loaded; Added a 'not-draggable' class for interactive elements in the settings cards; The legend title has been changed to a select box for category switching.
genpat-it · Nov 20, 2024 · de81eac · de81eac
1 parent 850646a
commit de81eac
Show file tree

Hide file tree

Showing 15 changed files with 235 additions and 105 deletions.
diff --git a/css/dashboard.css b/css/dashboard.css
@@ -1153,6 +1153,14 @@
   }
 }
 
+.dashboard-grapetree .legend .card-title {
+  width: calc(100% - 29px);
+  margin-top: 0;
+  padding-top: 0;
+  -webkit-transform: translateY(-8px);
+  transform: translateY(-8px);
+}
+
 .dashboard-grapetree .legend .card-player {
   display: none;
 }
@@ -2096,20 +2104,28 @@
   margin-bottom: 0;
 }
 
-.dashboard-grapetree .search-results  a.search-action {
+.dashboard-grapetree .search-results a.search-action {
   color: var(--main);
   font-size: 1.3rem;
   cursor: pointer;
   text-decoration: none;
   padding-left: 0.3rem;
 }
 
+.dashboard-grapetree .search-results .search-message-box {
+  padding-right: 2.1rem;
+}
+
 /* DRAGGABLE */
 
 .dashboard-grapetree .draggable {
   cursor: grab;
 }
 
+.dashboard-grapetree .not-draggable {
+  cursor: auto;
+}
+
 .dashboard-grapetree .draggable .reset-draggable {
   display: none;
 }

diff --git a/index.html b/index.html
@@ -75,13 +75,13 @@
             <i class="iconic iconic-picture-in-picture"></i>
           </div>
         </div>
-        <div class="card card-expandable card-settings card-node-style draggable" data-type="node-style">
+        <div class="card card-expandable card-settings card-node-style draggable help" data-type="node-style">
           <div class="card-expand-trigger">
             <i class="iconic iconic-plus-circle not-draggable"></i>
             <i class="iconic iconic-minus-circle not-draggable"></i>
           </div>
           <div class="card-context-tools">
-            <div class="card-info-trigger">
+            <div class="help-trigger">
               <i class="iconic iconic-help-circle not-draggable"></i>
             </div>
             <div class="card-close-trigger reset-draggable">
@@ -93,13 +93,13 @@ <h3 class="card-title"><span data-i18n-key="node_style">Node style</span></h3>
           <div class="card-message"></div>
         </div><!-- card -->
 
-        <div class="card card-expandable card-settings card-node-size draggable" data-type="node-size">
+        <div class="card card-expandable card-settings card-node-size draggable help" data-type="node-size">
           <div class="card-expand-trigger">
             <i class="iconic iconic-plus-circle not-draggable"></i>
             <i class="iconic iconic-minus-circle not-draggable"></i>
           </div>
           <div class="card-context-tools">
-            <div class="card-info-trigger">
+            <div class="help-trigger">
               <i class="iconic iconic-help-circle not-draggable"></i>
             </div>
             <div class="card-close-trigger reset-draggable">
@@ -111,13 +111,13 @@ <h3 class="card-title"><span data-i18n-key="node_size">Node size</span></h3>
           <div class="card-message"></div>
         </div><!-- card -->
 
-        <div class="card card-expandable card-settings card-branch-style draggable" data-type="branch-style">
+        <div class="card card-expandable card-settings card-branch-style draggable help" data-type="branch-style">
           <div class="card-expand-trigger">
             <i class="iconic iconic-plus-circle not-draggable"></i>
             <i class="iconic iconic-minus-circle not-draggable"></i>
           </div>
           <div class="card-context-tools">
-            <div class="card-info-trigger">
+            <div class="help-trigger">
               <i class="iconic iconic-help-circle not-draggable"></i>
             </div>
             <div class="card-close-trigger reset-draggable">
@@ -129,13 +129,13 @@ <h3 class="card-title"><span data-i18n-key="branch_style">Branch style</span></h
           <div class="card-message"></div>
         </div><!-- card -->
 
-        <div class="card card-expandable card-settings card-branch-cutoffs draggable" data-type="branch-cutoffs">
+        <div class="card card-expandable card-settings card-branch-cutoffs draggable help" data-type="branch-cutoffs">
           <div class="card-expand-trigger">
             <i class="iconic iconic-plus-circle not-draggable"></i>
             <i class="iconic iconic-minus-circle not-draggable"></i>
           </div>
           <div class="card-context-tools">
-            <div class="card-info-trigger">
+            <div class="help-trigger">
               <i class="iconic iconic-help-circle not-draggable"></i>
             </div>
             <div class="card-close-trigger reset-draggable">
@@ -147,13 +147,13 @@ <h3 class="card-title"><span data-i18n-key="branch_cutoffs">Branch cutoffs</span
           <div class="card-message"></div>
         </div><!-- card -->
 
-        <div class="card card-expandable card-settings card-rendering draggable" data-type="rendering">
+        <div class="card card-expandable card-settings card-rendering draggable help" data-type="rendering">
           <div class="card-expand-trigger">
             <i class="iconic iconic-plus-circle not-draggable"></i>
             <i class="iconic iconic-minus-circle not-draggable"></i>
           </div>
           <div class="card-context-tools">
-            <div class="card-info-trigger">
+            <div class="help-trigger">
               <i class="iconic iconic-help-circle not-draggable"></i>
             </div>
             <div class="card-close-trigger reset-draggable">
@@ -244,7 +244,11 @@ <h4>
               <i class="iconic iconic-dots-vertical"></i>
             </div>
           </div>
-          <h3 class="card-title" data-i18n-key="legend">Legend</h3>
+          <div class="card-title">
+            <div class="select-box">
+              <select id="legend-title-menu-color-by"></select>
+            </div>
+          </div>
           <div class="card-form"></div>
           <div class="card-message">No category to display</div>
         </div>
@@ -302,7 +306,7 @@ <h3 class="card-title" data-i18n-key="legend">Legend</h3>
         <div class="footer-info">
           <div class="info">
             <p><span data-i18n-key="cookies_notice">Questa applicazione non utilizza cookies.</span></p>
-            <p><span data-i18n-key="last_updated_on">Last updated on</span> <span class="last-update-date">2024-11-15</span></p>
+            <p><span data-i18n-key="last_updated_on">Last updated on</span> <span class="last-update-date">__LAST_UPDATE__</span></p>
             <p class="copyright">&copy; <span class="copyright-year"></span> IZSAM 'G. Caporale'</p>
           </div>
         </div>

diff --git a/js/context.js b/js/context.js
@@ -398,7 +398,7 @@ gtiz_context.buildMenuUi = function(type, relation) {
   if (type == 'map') {
     title.innerHTML = gtiz_locales.current.map_tools;
     let help = document.createElement('div');
-    help.setAttribute('class', 'card-info-trigger');
+    help.setAttribute('class', 'help-trigger');
     help.innerHTML = '<i class="iconic iconic-help-circle"></i>';
     help.addEventListener('click', (e) => {
       gtiz_help.getHelp(type);

diff --git a/js/drag.js b/js/drag.js
@@ -120,7 +120,7 @@ gtiz_drag.draggables.forEach(draggable => {
     document.removeEventListener('mouseup', onMouseUp);
   };
   draggable.onmousedown = function(event) {
-    if (event.target.classList.contains('not-draggable')) {
+    if (event.target.classList.contains('not-draggable') || event.target.parentElement.classList.contains('not-draggable')) {
       return;
     }
     // get marign left and right of the element

diff --git a/js/file-handler.js b/js/file-handler.js
@@ -725,6 +725,7 @@ gtiz_file_handler.loadTreeText = function(tree, json) {
 	let metadata_select;
 	let node_label_text;
 	let metadata_map_select;
+	let legend_select;
 
 	if (gtiz_utils.medatadata_select_nodes && gtiz_utils.medatadata_select_nodes.length > 0) {
 		gtiz_utils.medatadata_select_nodes.forEach((node) => {
@@ -740,6 +741,9 @@ gtiz_file_handler.loadTreeText = function(tree, json) {
 				if (select.id == 'metadata-map-select') {
 					metadata_map_select = select;
 				}
+				if (select.id == 'legend-title-menu-color-by') {
+					legend_select = select;
+				}
 			}
 		});
 	}
@@ -786,6 +790,12 @@ gtiz_file_handler.loadTreeText = function(tree, json) {
 						option.innerHTML = cat;
 						metadata_map_select.append(option);
 					}
+					if (legend_select) {
+						let option = document.createElement('option');
+						option.setAttribute('value', cat);
+						option.innerHTML = cat;
+						legend_select.append(option);
+					}
 				}
 			}
 			let l_action = 'remove';

diff --git a/js/help.js b/js/help.js
@@ -1,6 +1,6 @@
 let gtiz_help = {};
 
-gtiz_help.info_triggers = document.querySelectorAll('.card-info-trigger');
+gtiz_help.info_triggers = document.querySelectorAll('.help-trigger');
 
 gtiz_help.settings = [{
   card: 'tree-layout',
@@ -98,8 +98,8 @@ gtiz_help.getHelp = function(type) {
 gtiz_help.info_triggers.forEach(trigger => {
   trigger.addEventListener('click', function(e) {
     let target = e.currentTarget;
-    let card = trigger.closest('.card');
-    let type = card.getAttribute('data-type');
+    let help = trigger.closest('.help');
+    let type = help.getAttribute('data-type');
     gtiz_help.getHelp(type);
   })
 });
diff --git a/js/i18n/en.js b/js/i18n/en.js
@@ -154,6 +154,7 @@ gtiz_languages.en = {
   "missing_net_tsv_alert": "It seems there is a problem with the metadata file indicated in the url.",
   "missing_net_zooms_alert": "It seems there is a problem with the zooms file indicated in the url.",
   "missing_tree_alert": "A tree should be loaded first.",
+  "missing_tree_alert_search_engine": "Oops! It is necessary to upload a file to build the tree before using the search function.",
   "move_to_first_position" : "Move to first position",
   "no_additional_metadata_available" : "No additional metadata is available.",
   "no_category": "No category",

diff --git a/js/i18n/it.js b/js/i18n/it.js
@@ -154,6 +154,7 @@ gtiz_languages.it = {
   "missing_net_tsv_alert": "Sembra esserci un problema con il file dei metadati indicato nella url.",
   "missing_net_zooms_alert": "Sembra esserci un problema con il file degli zoom indicato nella url.",
   "missing_tree_alert": "&Egrave; necessario caricare prima un file per la costruzione del Tree.",
+  "missing_tree_alert_search_engine": "Ops! &Egrave; necessario caricare un file per la costruzione del Tree prima di poter utilizzare la funzione di ricerca.",
   "move_to_first_position" : "Sposta in prima posizione",
   "no_additional_metadata_available" : "Nessun altro metadato disponibile.",
   "no_category": "Nessuna categoria",

diff --git a/js/languages.js b/js/languages.js
@@ -140,6 +140,8 @@ gtiz_languages.en = {
   "load_spread": "Load SPREAD",
   "load_tree": "Load tree",
   "log_scale" : "Log scale",
+  "lon_lat_comma_alert": "Some latitude and/or longitude values provided in the metadata contain a comma instead of a dot and have been corrected.",
+  "lon_lat_comma_alert_feedback": "This change may cause issues with map display.",
   "m_upload_file_label": "Upload .json, .nwk or .tsv file...",
   "malformed_metadata_file_msg": "It seems metatada file is malformed.",
   "map": "Map",
@@ -157,6 +159,7 @@ gtiz_languages.en = {
   "missing_net_tsv_alert": "It seems there is a problem with the metadata file indicated in the url.",
   "missing_net_zooms_alert": "It seems there is a problem with the zooms file indicated in the url.",
   "missing_tree_alert": "A tree should be loaded first.",
+  "missing_tree_alert_search_engine": "Oops! It is necessary to upload a file to build the tree before using the search function.",
   "move_to_first_position" : "Move to first position",
   "no_additional_metadata_available" : "No additional metadata is available.",
   "no_category": "No category",
@@ -178,6 +181,7 @@ gtiz_languages.en = {
   "oops_forbidden_http": "Oops! Permission denied.",
   "original_tree": "Original tree",
   "pie_chart_mode": "Pie Chart mode",
+  "please_note": "Please note",
   "possible_performance_issues_message" : "Possible performance issues, I suggest to set link distances value to <strong>{0}</strong>.",
   "publications": "Publications",
   "quick_gradient": "Quick gradient",
@@ -407,6 +411,8 @@ gtiz_languages.it = {
   "load_spread": "Carica SPREAD",
   "load_tree": "Carica albero",
   "log_scale" : "Scala logaritmica",
+  "lon_lat_comma_alert": "Alcuni valori di latitudine e/o longitudine forniti con i metadati contengono una virgola anziché un punto e sono stati corretti.",
+  "lon_lat_comma_alert_feedback": "Questa modifica potrebbe causare problemi nella visualizzazione della mappa.",
   "m_upload_file_label": "Carica un file .json, .nwk o .tsv..",
   "malformed_metadata_file_msg": "Sembra che il file dei metadati non sia ben formato.",
   "map": "Mappa",
@@ -424,6 +430,7 @@ gtiz_languages.it = {
   "missing_net_tsv_alert": "Sembra esserci un problema con il file dei metadati indicato nella url.",
   "missing_net_zooms_alert": "Sembra esserci un problema con il file degli zoom indicato nella url.",
   "missing_tree_alert": "&Egrave; necessario caricare prima un file per la costruzione del Tree.",
+  "missing_tree_alert_search_engine": "Ops! &Egrave; necessario caricare un file per la costruzione del Tree prima di poter utilizzare la funzione di ricerca.",
   "move_to_first_position" : "Sposta in prima posizione",
   "no_additional_metadata_available" : "Nessun altro metadato disponibile.",
   "no_category": "Nessuna categoria",
@@ -445,6 +452,7 @@ gtiz_languages.it = {
   "oops_forbidden_http": "Ops! Permesso negato.",
   "original_tree": "Tree iniziale",
   "pie_chart_mode": "Modalità diagramma",
+  "please_note": "Nota bene",
   "possible_performance_issues_message" : "Potresti avere problemi di performance visualizzando il tree esteso. Suggerisco di impostare la distanza dei collegamenti su <strong>{0}</strong>.",
   "publications": "Pubblicazioni",
   "quick_gradient": "Gradiente veloce",

diff --git a/js/legend.js b/js/legend.js
@@ -883,6 +883,10 @@ gtiz_legend.toggleSelectionMode = function(value) {
   }
 }
 
+/**
+ * Set selection mode
+ * 
+ */
 gtiz_legend.setSelection = function() {
   if (gtiz_legend.selection_map) {
     let selection_mode = gtiz_legend.selection_mode;
@@ -904,6 +908,10 @@ gtiz_legend.setSelection = function() {
   }
 }
 
+/**
+ * Get selection map
+ * 
+ */
 gtiz_legend.getSelectionMap = function() {
   let selection = [];
   let items = document.querySelectorAll('.card-legend .list-row');
@@ -917,11 +925,41 @@ gtiz_legend.getSelectionMap = function() {
   return selection;
 }
 
+/**
+ * Set legend title
+ * 
+ * Here we add an event listener to the select input in order to change the category color. When metadata are not loaded, the select input is empty and we populate it with the available categories.
+ * 
+ * **Please Note:** when metadata are loaded, we use the `gtiz_tree.addMetadataOptions` event to populate the select input with the available categories.
+ * 
+ */
+gtiz_legend.setTitle = function() {
+  let title = document.querySelector('#legend-title-menu-color-by');
+  if (title) {
+    title.addEventListener('change', function(e) {
+			let value = e.target.value;
+			gtiz_legend.changeCategoryColor(value);
+		});
+    if (title.options.length === 0) {
+      let values = gtiz_legend.getColorByOptions();
+      values.forEach(value => {
+        let option = document.createElement('option');
+        option.value = value.value;
+        option.text = value.label;
+        title.add(option);
+      });
+      let default_value = gtiz_legend.getColorByDefaultValue();
+      title.value = default_value;
+    }
+  }
+}
+
 gtiz_legend.init = function() {
   gtiz_legend.toggleViewMode(gtiz_legend.view_mode);
   gtiz_legend.setVisualSelectionToggle(gtiz_legend.selection_mode);
   let order = gtiz_legend.group_order.type + '-' + gtiz_legend.group_order.sort;
   let category = gtiz_tree.tree.display_category;
   gtiz_legend.changeGroupOrder(order, category, false);
   gtiz_legend.setSelection();
+  gtiz_legend.setTitle();
 }
diff --git a/js/scrolly/scrolly.js b/js/scrolly/scrolly.js
@@ -51,8 +51,16 @@
       let parentPaddings = parentPaddingTop + parentPaddingBottom;
       let parentMargins = parentMarginTop + parentMarginBottom;
 
+      let nodePaddingTop = parseInt(window.getComputedStyle(node).getPropertyValue('padding-top'));
+      let nodePaddingBottom = parseInt(window.getComputedStyle(node).getPropertyValue('padding-bottom'));
+      let nodeMarginTop = parseInt(window.getComputedStyle(node).getPropertyValue('margin-top'));
+      let nodeMarginBottom = parseInt(window.getComputedStyle(node).getPropertyValue('margin-bottom'));
+
+      let nodePaddings = nodePaddingTop + nodePaddingBottom;
+      let nodeMargins = nodeMarginTop + nodeMarginBottom;
+
       node.classList.add('scrolly');
-      node.style.maxHeight = (parentHeight - parentPaddings + parentMargins) + 'px';
+      node.style.maxHeight = ((parentHeight - parentPaddings + parentMargins) - (nodePaddings + nodeMargins)) + 'px';
 
       let container = document.createElement('div');
       let containerHeight = (parentHeight - parentPaddings + parentMargins);
@@ -112,7 +120,15 @@
         let parentPaddings = parentPaddingTop + parentPaddingBottom;
         let parentMargins = parentMarginTop + parentMarginBottom;
 
-        node.style.maxHeight = (parentHeight - parentPaddings + parentMargins) + 'px';
+        let nodePaddingTop = parseInt(window.getComputedStyle(node).getPropertyValue('padding-top'));
+        let nodePaddingBottom = parseInt(window.getComputedStyle(node).getPropertyValue('padding-bottom'));
+        let nodeMarginTop = parseInt(window.getComputedStyle(node).getPropertyValue('margin-top'));
+        let nodeMarginBottom = parseInt(window.getComputedStyle(node).getPropertyValue('margin-bottom'));
+
+        let nodePaddings = nodePaddingTop + nodePaddingBottom;
+        let nodeMargins = nodeMarginTop + nodeMarginBottom;
+
+        node.style.maxHeight = ((parentHeight - parentPaddings + parentMargins) - (nodePaddings + nodeMargins)) + 'px';
 
         let container = parent.querySelector('.scrolly-container');
         let containerHeight = (parentHeight - parentPaddings + parentMargins);