Added the ability to expand the metadata component. Made small fixes …

…for editing the metadata component's table, along with some improvements to the UI for its download.

css/dashboard.css

@@ -926,6 +926,21 @@
   }
 }
 
+.dashboard-grapetree.dashboard-grapetree-s-m-mt-l .metadata.metadata-expanded,
+.dashboard-grapetree.dashboard-grapetree-s-mt-l .metadata.metadata-expanded,
+.dashboard-grapetree.dashboard-grapetree-s-m-mt .metadata.metadata-expanded,
+.dashboard-grapetree.dashboard-grapetree-s-mt .metadata.metadata-expanded,
+.dashboard-grapetree.dashboard-grapetree-m-mt-l .metadata.metadata-expanded,
+.dashboard-grapetree.dashboard-grapetree-mt-l .metadata.metadata-expanded,
+.dashboard-grapetree.dashboard-grapetree-m-mt .metadata.metadata-expanded,
+.dashboard-grapetree.dashboard-grapetree-mt .metadata.metadata-expanded {
+  top: 0;
+  left: 0;
+  right: 0;
+  width: auto;
+  z-index: 9999;
+}
+
 .dashboard-grapetree .metadata-container {
   display: flex;
   overflow: hidden;
@@ -1242,14 +1257,6 @@
 
 .dashboard-grapetree .card-context-tools {
   top: 1.7rem;
-}
-
-.dashboard-grapetree.tree-not-defined .tree .card-context-tools,
-.dashboard-grapetree .tree-loading .tree .card-context-tools {
-  display: none;
-}
-
-.dashboard-grapetree .tree .card-context-tools {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -1258,6 +1265,11 @@
   align-items: center;
 }
 
+.dashboard-grapetree.tree-not-defined .tree .card-context-tools,
+.dashboard-grapetree .tree-loading .tree .card-context-tools {
+  display: none;
+}
+
 .dashboard-grapetree .card-expandable .card-context-tools {
   top: 4.2rem;
 }
@@ -1327,11 +1339,19 @@
   padding-left: 0.3rem;
 }
 
+.dashboard-grapetree .card a.card-action.card-action-accent {
+  color: var(--accent);
+}
+
 .dashboard-grapetree .card a.card-action i {
   display: inline-block;
   margin-right: 0.3rem;
 }
 
+.dashboard-grapetree .card a.card-action.card-action-accent i {
+  color: var(--accent);
+}
+
 .dashboard-grapetree .select-box,
 .dashboard-grapetree .input-box,
 .dashboard-grapetree .search-box,
@@ -1384,6 +1404,23 @@
   font-size: 1.3rem;
 }
 
+.dashboard-grapetree .button-box select {
+  display: inline-block;
+  font-size: 1.2rem;
+  text-align: center;
+  line-height: 1.2;
+  padding: 0;
+  padding-right: 0.2rem;
+  padding-bottom: 0.2rem;
+  height: 2.6rem;
+  width: 3.9rem;
+  text-align: center;
+  background-color: var(--white);
+  margin-left: 0.5rem;
+  -webkit-transform: translateY(-0.15rem);
+  transform: translateY(-0.15rem);
+}
+
 .slider {
   position: relative;
   margin-left: 0.3rem;

index.html

@@ -160,37 +160,7 @@ <h3 class="card-title"><span data-i18n-key="rendering">Rendering</span></h3>
                 <div class="card-form"></div>
                 <div class="card-message"></div>
               </div><!-- card -->
-
-              <!-- <div class="card card-expandable card-settings card-map" data-type="map">
-                <div class="card-expand-trigger">
-                  <i class="iconic iconic-plus-circle"></i>
-                  <i class="iconic iconic-minus-circle"></i>
-                </div>
-                <div class="card-context-tools">
-                  <div class="card-info-trigger">
-                    <i class="iconic iconic-help-circle"></i>
-                  </div>
-                </div>
-                <h3 class="card-title"><span data-i18n-key="map">Map</span></h3>
-                <div class="card-form"></div>
-                <div class="card-message"></div>
-              </div> --> <!-- card -->
-
-              <!-- <div class="card card-expandable card-settings card-input-output">
-                <div class="card-expand-trigger">
-                  <i class="iconic iconic-plus-circle"></i>
-                  <i class="iconic iconic-minus-circle"></i>
-                </div>
-                <div class="card-context-tools">
-                  <div class="card-info-trigger">
-                    <i class="iconic iconic-help-circle"></i>
-                  </div>
-                </div>
-                <h3 class="card-title"><span data-i18n-key="input_output">Input/Output</span></h3>
-                <div class="card-form"></div>
-                <div class="card-message"></div>
-              </div> --><!-- card -->
-
+
             </div><!-- columns -->
           </div>
         </div>
@@ -247,6 +217,9 @@ <h4>
       <div class="metadata">
         <div class="metadata-container card card-component card-metadata">
           <div class="card-context-tools">
+            <div class="card-context-trigger card-context-expand-trigger" data-component="metadata">
+              <i class="iconic iconic-maximize"></i>
+            </div>
             <div class="card-context-trigger card-context-menu-trigger" data-menu-component="metadata" data-menu-type="metadata">
               <i class="iconic iconic-dots-vertical"></i>
             </div>
@@ -304,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-10</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>

js/context.js

@@ -136,6 +136,59 @@ gtiz_context.getMenu = function(type) {
       box.append(a);
       form.append(box);
     }
+    if (item.type == 'button_optioned') {
+      let box = document.createElement('div'); 
+      box.setAttribute('class', 'button-box button-box-optioned');
+      if (item.id) {
+        box.setAttribute('id', item.id);
+      }
+      let a = document.createElement('a');
+      a.setAttribute('class', 'card-action');
+      let icon = item.icon != '' ? '<i class="iconic ' + item.icon + '"></i> ' : '';
+      if (typeof item.label === 'string') {
+        a.innerHTML = icon + item.label;
+      } else {
+        if (typeof item.label === 'function') {
+          let label_text = item.label();
+          a.innerHTML = icon + label_text;
+        }
+      }
+      a.addEventListener('click', (e) => {
+        item.function(e);
+      });
+      box.append(a);
+
+      let select = document.createElement('select');
+      if (Array.isArray(item.options)) {
+        let options = item.options;
+        options.forEach(el => {
+          let option = document.createElement('option');
+          option.setAttribute('value', el.value);
+          if (typeof el.label === 'string') {
+            option.innerHTML = el.label;
+          } else {
+            if (typeof el.label === 'function') {
+              let label_text = el.label();
+              option.innerHTML = label_text;
+            }
+          }
+          select.append(option);
+        });
+      } else {
+        if (typeof item.options === 'function') {
+          let options = item.options();
+          options.forEach(el => {
+            let option = document.createElement('option');
+            option.setAttribute('value', el.value);
+            option.innerHTML = el.label;
+            select.append(option);
+          });
+        }
+      }
+      box.append(select);
+
+      form.append(box);
+    }
     if (item.type == 'select') {
       let box = document.createElement('div'); 
       box.setAttribute('class', 'select-box');
@@ -275,9 +328,7 @@ gtiz_context.closeContextMenu = function(type, card) {
       container.style.removeProperty('width');
     }
     if (type == 'metadata') {
-      container.style.removeProperty('transform');
-      container.style.removeProperty('z-index');
-      container.style.removeProperty('width');
+      container.style.cssText = '';
     }
     if (type == 'map') {
       container.style.removeProperty('transform');
@@ -350,6 +401,8 @@ gtiz_context.showMenu = function(type, component, trigger) {
   // let gtiz_context_node = document.querySelector('.context-menu');
   // if (!gtiz_context_node) {
     let card = trigger.closest('.card-component');
+    let parent = card.parentNode;
+    let parent_cls = parent.getAttribute('class');
     gtiz_context.closeContextMenu(type, card);
 
     let cls_controller = gtiz_context.body.getAttribute('class');
@@ -379,15 +432,21 @@ gtiz_context.showMenu = function(type, component, trigger) {
       }
     }
     if (type == 'metadata') {
-      if (!cls_controller.includes('-l')) {
+      if (!parent_cls.includes('expanded')) {
+        if (!cls_controller.includes('-l')) {
+          width = 320;
+          translate_value = 0;
+          left = x + card.offsetWidth + margin - width;
+        } else {
+          let legend_width = document.querySelector('.card-legend').offsetWidth;
+          width = legend_width;
+          translate_value = 0;
+          left = x + card.offsetWidth + margin;
+        }
+      } else {
         width = 320;
-        translate_value = 0;
+        translate_value = width;
         left = x + card.offsetWidth + margin - width;
-      } else {
-        let legend_width = document.querySelector('.card-legend').offsetWidth;
-        width = legend_width;
-        translate_value = 0;
-        left = x + card.offsetWidth + margin;
       }
     }
     if (type == 'map') {
@@ -432,15 +491,19 @@ gtiz_context.showMenu = function(type, component, trigger) {
       tree_container.style.zIndex = 9999;
       if (!cls_controller.includes('-l') && !gtiz_context.body.classList.contains('dashboard-grapetree-m') && !gtiz_context.body.classList.contains('dashboard-grapetree-mt') && !gtiz_context.body.classList.contains('dashboard-grapetree-m-mt')) {
         // card.style.width = (card.offsetWidth - width)/10 + 'rem';
-        tree_container.style.width = (card.offsetWidth + (2 * margin) - width)/10 + 'rem';
+        tree_container.style.width = 'auto';
+        tree_container.style.right = (margin/2 + width)/10 + 'rem';
       }
     }
     if (component == 'metadata') {
-      let metadata_container = document.querySelector('.metadata');
-      metadata_container.style.zIndex = 9999;
-      if (!cls_controller.includes('-l')) {
-        // card.style.width = (card.offsetWidth - width)/10 + 'rem';
-        metadata_container.style.transform = 'translateX(-' + (width/10) + 'rem)';
+      parent.style.zIndex = 9999;
+      if (parent_cls.includes('expanded')) {
+        parent.style.right = (margin/2 + width)/10 + 'rem';
+      } else {
+        if (!cls_controller.includes('-l')) {
+          // card.style.width = (card.offsetWidth - width)/10 + 'rem';
+          metadata_container.style.transform = 'translateX(-' + (width/10) + 'rem)';
+        }
       }
     }
     if (component == 'map') {
@@ -488,11 +551,14 @@ gtiz_context.updateContextPosition = function(menu, type) {
 
   let body_cls = gtiz_context.body.getAttribute('class');
   let component = document.querySelector('.card-' + type);
+  let parent = component.parentNode;
+  let parent_cls = parent.getAttribute('class');
   let card_context = menu.querySelector('.card-context-menu');
   let card_form = card_context.querySelector('.card-form');
   let card_form_top = card_form.offsetTop;
   let component_style = getComputedStyle(component);
   let menu_h = menu.offsetHeight;
+  let menu_w = menu.offsetWidth;
   let card_context_h = card_context.offsetHeight;
   let margin_r = parseInt(component_style.marginRight.replace(/\D/g, ""));
   let width = component.offsetWidth;
@@ -508,12 +574,12 @@ gtiz_context.updateContextPosition = function(menu, type) {
     let translate = -(width + margin_r)/10 + 'rem';
     component.style.transform = `translateX(${translate})`;
   }
-  if (!body_cls.includes('-l')) {
-    width = 320;
-  } else {
+  if (!parent_cls.includes('expanded') && body_cls.includes('-l')) {
     let legend_width = document.querySelector('.main > .legend').offsetWidth;
-    menu.style.width = legend_width/10 + 'rem';
+    menu_w = legend_width;
   }
+  menu.style.width = menu_w/10 + 'rem';
+
   if (card_context_h > menu_h) {
     let height = menu_h - 
       parseInt(getComputedStyle(card_context).paddingTop) -

js/file-handler.js

@@ -787,11 +787,11 @@ gtiz_file_handler.distributeFile = function(text, filename) {
 		header_tag.innerHTML = filename;
 	}
 	if (extension === 'tsv') {
-		gtiz_tree.current_metadata_file = text;
 		if (gtiz_tree.tree) {
 			let l_action = 'add';
 			let l_components = ['tree', 'map', 'legend'];
 			gtiz_layout.uiLoadingManager(l_components, l_action);
+			gtiz_tree.current_metadata_file = text;
 			gtiz_file_handler.loadMetadataText(text);
 			gtiz_map.init();
 		} else {

js/i18n/it.js

@@ -30,7 +30,7 @@ gtiz_languages.it = {
   "display": "Mostra",
   "do_not_use_current_settings": "Non usare impostazioni correnti",
   "download": "Download",
-  "download_table": "Esporta tabella",
+  "download_table": "Download tabella",
   "download_svg": "Download Svg",
   "drop_info": "Puoi anche trascinare o caricare un file .nwk seguito da un file .tsv per i metadata da associare al tree. Opzionalmente puoi trascinare o caricare un file .geojson contenente informazioni geospaziali. Puoi trovare una guida completa sul nostro <a href=\"https://github.com/genpat-it/spread/wiki\" target=\"_blank\">wiki</a>.",
   "drop_message": "Trascina in quest'area un file .json valido oppure caricalo dal tuo computer per iniziare con SPREAD.",

js/languages.js

@@ -272,7 +272,7 @@ gtiz_languages.it = {
   "display": "Mostra",
   "do_not_use_current_settings": "Non usare impostazioni correnti",
   "download": "Download",
-  "download_table": "Esporta tabella",
+  "download_table": "Download tabella",
   "download_svg": "Download Svg",
   "drop_info": "Puoi anche trascinare o caricare un file .nwk seguito da un file .tsv per i metadata da associare al tree. Opzionalmente puoi trascinare o caricare un file .geojson contenente informazioni geospaziali. Puoi trovare una guida completa sul nostro <a href=\"https://github.com/genpat-it/spread/wiki\" target=\"_blank\">wiki</a>.",
   "drop_message": "Trascina in quest'area un file .json valido oppure caricalo dal tuo computer per iniziare con SPREAD.",