Improvements for legend item selection functions and video selection …

…functions. Important fix related to JSON load functionalities: an error on zoom initialization caused an issue with optimizer functions and map loading.
genpat-it · May 17, 2024 · 5dd45a6 · 5dd45a6
1 parent d06a5b7
commit 5dd45a6
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -277,7 +277,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-05-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/legend.js b/js/legend.js
@@ -315,7 +315,7 @@ gtiz_legend.toggleItemSelection = function(obj, tree) {
   if (selection_mode == 'qualitative') {
     gtiz_legend.nodeSelection(obj, tree);
   } else {
-    gtiz_legend.highlightSelection(obj, tree);
+    gtiz_legend.highlightSelection();
   }
 };
 
@@ -623,36 +623,48 @@ gtiz_legend.nodeSelection = function(obj, tree) {
   if (!tree) {
     tree = gtiz_tree.tree;
   }
-  let category = obj ? obj.category : tree.display_category;
   // Retrieve an array of all values in `tree.metadata`
   let metadata = Object.values(tree.metadata);
   let node_ids = {};
-  let items = document.querySelectorAll('.card-legend .list-row');
-  let selected = [];
-  tree.clearSelection();
-  items.forEach(item => {
+  if (obj) {
+    let category = obj.category ? obj.category : tree.display_category;
+    let item = obj.current_target;
+    let group = obj.real ? obj.real : item.getAttribute('data-real-group-izsam');
+    // Filter the metadata values based on the condition `d[category] === group`
+    let filtered = metadata.filter(function(d) {
+      return d[category] === group;
+    });
+    let codes = filtered.map(function(item) {
+      return item.__Node;
+    });
     if (item.classList.contains('selected')) {
-      selected.push(item);
+      gtiz_tree.tree.selectNodesByIds(codes);
+    } else {
+      gtiz_tree.tree.unselectNodesByIds(codes);
+    }
+  } else {
+    let category = tree.display_category;
+    let items = document.querySelectorAll('.card-legend .list-row');
+    items.forEach(item => {
       let group = item.getAttribute('data-real-group-izsam');
       // Filter the metadata values based on the condition `d[category] === group`
       let filtered = metadata.filter(function(d) {
         return d[category] === group;
       });
       // Iterate over the filtered metadata values and update `node_ids` object
       filtered.forEach(function(d) {
-        node_ids[d.__Node] = 1;
-      });
-      // Filter the `tree.force_nodes` array based on matching `id` property with `node_ids` keys
-      let filtered_force_nodes = tree.force_nodes.filter(function(n) {
-        return node_ids[n.id];
-      });
-      // Set the `selected` property of each matched node to `true`
-      filtered_force_nodes.forEach(function(n) {
-        n.selected = true;
+        node_ids[d.__Node] = item.classList.contains('selected');
       });
+    });
+    let unseleceted = Object.keys(node_ids).filter(function(d) {  return !node_ids[d]; });
+    let selected = Object.keys(node_ids).filter(function(d) {  return node_ids[d]; });
+    if (selected.length > 0) {
+      gtiz_tree.tree.selectNodesByIds(selected);
     }
-  });
-  tree._updateSelectionStatus();
+    if (unseleceted.length > 0) {
+      gtiz_tree.tree.unselectNodesByIds(unseleceted);
+    }
+  }
 }
 
 /**
@@ -661,15 +673,11 @@ gtiz_legend.nodeSelection = function(obj, tree) {
  * @param {Object} obj Object containing information about legend, category and item clicked
  * @param {Object} tree The tree object
  */
-gtiz_legend.highlightSelection = function (obj, tree) {
-  if (!tree) {
-    tree = gtiz_tree.tree;
-  }
+gtiz_legend.highlightSelection = function () {
   let groups = [];
   let colors = [];
   let values = [];
   let path_parents = [];
-  let current_category = obj ? obj.category : tree.display_category;
   let paths = document.querySelectorAll('#vis .node-paths');
   let links = document.querySelectorAll('#vis .link');
   let items = document.querySelectorAll('.card-legend .list-row');

diff --git a/js/video.js b/js/video.js
@@ -91,6 +91,7 @@ gtiz_video.setSliderDirection = function(current) {
 gtiz_video.legendSetSelection = function(index, direction) {
   let item_nodes = document.querySelectorAll('.card-legend .list-row');
   let items = Array.from(item_nodes);
+  let selection_mode = gtiz_legend.selection_mode;
   let sliced;
   if (direction == 'forward') {
     sliced = items.slice(0, index + 1);
@@ -99,26 +100,33 @@ gtiz_video.legendSetSelection = function(index, direction) {
   }
   if (sliced) {
     sliced.forEach((el, i) => {
-      let check = el.querySelector('.list-check');
-      let icon = check.querySelector('i');
       if (direction == 'forward') {
-        icon.setAttribute('class', 'iconic iconic-check-circle');
-        el.classList.add('selected');
+        if (!el.classList.contains('selected')) {
+          let obj = {
+            category: el.getAttribute('data-category-izsam'),
+            current_target: el,
+            real: el.getAttribute('data-real-group-izsam'),
+            colour: el.getAttribute('data-group-colour-izsam')
+          };
+          gtiz_legend.toggleItemSelection(obj);
+        }
       } else {
-        icon.setAttribute('class', 'iconic iconic-check-circle-empty');
-        el.classList.remove('selected');
+        if (el.classList.contains('selected')) {
+
+          let obj = {
+            category: el.getAttribute('data-category-izsam'),
+            current_target: el,
+            real: el.getAttribute('data-real-group-izsam'),
+            colour: el.getAttribute('data-group-colour-izsam')
+          };
+          gtiz_legend.toggleItemSelection(obj);
+        }
       }
       if ((direction === 'forward' && i === index) || (direction !== 'forward' && i === 0)) {
         let el_top = el.offsetTop;
         gtiz_video.scrollToPosition(el_top);
       }
     });
-    let selection_mode = gtiz_legend.selection_mode;
-    if (selection_mode == 'qualitative') {
-      gtiz_legend.nodeSelection();
-    } else {
-      gtiz_legend.highlightSelection();
-    }
   }
 }
 

diff --git a/js/zooms.js b/js/zooms.js
@@ -1217,10 +1217,12 @@ gtiz_zooms.init = function() {
   if ('zooms_prefix' in gtiz_file_handler.params) {
     gtiz_zooms.zooms_prefix = gtiz_file_handler.params.zooms_prefix;
   } else {
-    let name = gtiz_file_handler.params.tree.split('/').pop();
-    let prefix = name.split('.')[0];
-    if (prefix) {
-      gtiz_zooms.zooms_prefix = prefix;
+    if ('tree' in gtiz_file_handler.params) {
+      let name = gtiz_file_handler.params.tree.split('/').pop();
+      let prefix = name.split('.')[0];
+      if (prefix) {
+        gtiz_zooms.zooms_prefix = prefix;
+      }
     }
   }