Added features and bug fixes: Implemented macros component; Added sea…

…rch highlight functionality for search and macros components; Fixed button bug by ensuring is called after metadata load; Added tooltips on mouseover for truncated legend items; Added ESC key listener for search and footer components.
genpat-it · Nov 27, 2024 · 3deb3b3 · 3deb3b3
1 parent aedc872
commit 3deb3b3
Show file tree

Hide file tree

Showing 15 changed files with 808 additions and 75 deletions.
diff --git a/css/base.css b/css/base.css
@@ -801,10 +801,23 @@ button i {
   width: 100%;
 }
 
-.highlight {
+.highlight,
+.highlight-keyword {
   color: var(--accent);
 }
 
+.highlight-word {
+  padding-left: 0.8rem;
+  padding-right: 0.8rem;
+  padding-bottom: 0.1rem;
+  background-color: var(--accent-light);
+  border-radius: 1.2rem;
+}
+
+.highlight-word .highlight-keyword {
+  color: var(--white);
+}
+
 .message {
   display: inline-block;
   margin-right: 0.8rem;

diff --git a/css/dashboard.css b/css/dashboard.css
@@ -1936,7 +1936,7 @@
 .dashboard-grapetree .search-highlight {
   position: relative;
   padding-left: 1.2rem !important;
-  color: var(--red) !important;
+  color: var(--accent) !important;
 }
 .dashboard-grapetree .search-highlight::before {
   content: '';
@@ -1945,7 +1945,7 @@
   width: 0.8rem;
   height: 0.8rem;
   border-radius: 50%;
-  background-color: var(--red);
+  background-color: var(--accent);
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
   top: 0.6rem;
@@ -1983,7 +1983,8 @@
   }
 }
 
-.dashboard-grapetree .search-engine::before {
+.dashboard-grapetree .search-engine::before,
+.dashboard-grapetree .macros::before {
   content: "";
   position: fixed;
   top: 0;
@@ -1998,13 +1999,15 @@
   transition: opacity 0.3s ease;
 }
 
-.dashboard-grapetree.show-search-engine .search-engine::before {
+.dashboard-grapetree.show-search-engine .search-engine::before,
+.dashboard-grapetree.show-macros .macros::before {
   opacity: 1;
   z-index: 1000;
   visibility: visible;
 }
 
-.dashboard-grapetree .search-engine::after {
+.dashboard-grapetree .search-engine::after,
+.dashboard-grapetree .macros::after {
   content: "";
   position: fixed;
   top: 0;
@@ -2019,13 +2022,15 @@
   transition: opacity 0.3s ease;
 }
 
-.dashboard-grapetree.show-search-engine .search-engine::after {
+.dashboard-grapetree.show-search-engine .search-engine::after,
+.dashboard-grapetree.show-macros .macros::after {
   opacity: 0.8;
   z-index: 1001;
   visibility: visible;
 }
 
-.dashboard-grapetree .search-engine {
+.dashboard-grapetree .search-engine,
+.dashboard-grapetree .macros {
   position: fixed;
   z-index: -1;
   visibility: hidden;
@@ -2035,12 +2040,14 @@
   bottom: 0;
 }
 
-.dashboard-grapetree.show-search-engine .search-engine {
+.dashboard-grapetree.show-search-engine .search-engine,
+.dashboard-grapetree.show-macros .macros {
   z-index: 9997;
   visibility: visible;
 }
 
-.dashboard-grapetree .search-engine-contents {
+.dashboard-grapetree .search-engine-contents,
+.dashboard-grapetree .macros-contents {
   position: absolute;
   z-index: 9998;
   width: 32rem;
@@ -2059,15 +2066,17 @@
   transition: all 0s ease 0s;
 }
 
-.dashboard-grapetree.show-search-engine .search-engine-contents {
+.dashboard-grapetree.show-search-engine .search-engine-contents,
+.dashboard-grapetree.show-macros .macros-contents {
   opacity: 1;
   -webkit-transform: translateX(0);
   transform: translateX(0);
   -webkit-transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
   transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
 }
 
-.dashboard-grapetree .search-engine-close {
+.dashboard-grapetree .search-engine-close,
+.dashboard-grapetree .macros-close {
   /*PLEASE NOTE: modal close container should include the iconic <i> tag in html*/
   position: fixed;
   opacity: 0;
@@ -2080,7 +2089,8 @@
   transition: opacity 0s ease;
 }
 
-.dashboard-grapetree.show-search-engine .search-engine-close {
+.dashboard-grapetree.show-search-engine .search-engine-close,
+.dashboard-grapetree.show-macros .macros-close {
   opacity: 1;
   -webkit-transition: opacity 0.3s ease 0.6s;
   transition: opacity 0.3s ease 0.6s;
@@ -2092,12 +2102,26 @@
 
 .dashboard-grapetree  .search-result-title {
   font-size: 1.4rem;
+  position: relative;
+  padding-left: 1.3rem;
   line-height: 1.4rem;
   margin-bottom: 0.5rem;
   padding-bottom: 1.3rem;
   border-bottom: 0.1rem solid var(--secondary-light);
 }
 
+.dashboard-grapetree  .search-result-title::before {
+  content: '';
+  width: 0.8rem;
+  height: 0.8rem;
+  background-color: var(--main);
+  display: block;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  top: 0.4rem;
+}
+
 .dashboard-grapetree .search-results .select-box, .dashboard-grapetree .search-results .input-box, .dashboard-grapetree .search-results .search-box, .search-results .dashboard-grapetree .tip-box, .dashboard-grapetree .search-results .list-box, .dashboard-grapetree .search-results .button-box, .dashboard-grapetree .search-results .slider-box, .dashboard-grapetree .search-results .tools {
   padding-top: 0.8rem;
   margin-top: 0;
@@ -2116,6 +2140,63 @@
   padding-right: 2.1rem;
 }
 
+.dashboard-grapetree .macros-result {
+  background-color: var(--secondary-ultra-light);
+  border-radius: 1.3rem;
+  padding: 1.3rem;
+  margin-top: 1.8rem;
+}
+
+.dashboard-grapetree .macros-tag {
+  font-size: 1.3rem;
+  color: var(--main);
+  margin-bottom: 1.6rem;
+  padding-left: 1.3rem;
+  position: relative;
+  cursor: pointer;
+}
+
+.dashboard-grapetree .macros-tag::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  background-color: var(--main);
+  top: 0.7rem;
+}
+
+.dashboard-grapetree .macros-result-title {
+  font-size: 1.5rem;
+  margin-bottom: 0.8rem;
+  color: var(--text);
+  font-weight: 600;
+}
+
+.dashboard-grapetree .macros-result-description {
+  margin-bottom: 1.8rem;
+  font-size: 1.4rem;
+  color: var(--secondary-darker);
+}
+
+.dashboard-grapetree .button.macros-action {
+  transform: translateX(-0.2rem);
+}
+
+/* .dashboard-grapetree .macros-action {
+  color: var(--main);
+  font-size: 1.5rem;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.dashboard-grapetree .macros-action:hover,
+.dashboard-grapetree .macros-action:focus,
+.dashboard-grapetree .macros-action:active {
+  color: var(--accent);
+} */
+
 /* DRAGGABLE */
 
 .dashboard-grapetree .draggable {

diff --git a/index.html b/index.html
@@ -44,6 +44,11 @@
             <i class="iconic iconic-search"></i>
           </div>
         </div>
+        <div class="tool tool-macros">
+          <div class="tool-trigger">
+            <i class="iconic iconic-fast-forward"></i>
+          </div>
+        </div>
         <div class="tool tool-lang">
           <div class="tool-label"></div>
           <div class="tool-trigger">
@@ -287,15 +292,30 @@ <h4>
       <div class="search-engine-form">
         <div class="search-engine-header">
           <div class="search-box">
-            <div class="form-label">Search a function</div>
-            <input id="search-functions" type="search" placeholder="Keyword..." autocomplete="off">
+            <div class="form-label" data-i18n-key="search_a_function">Search a function</div>
+            <input id="search-functions" type="search" data-i18n-key="keywords" placeholder="Keywords..." autocomplete="off">
           </div>
         </div>
         <div class="search-engine-body"></div>
       </div>
     </div>
   </section>
 
+  <section class="macros">
+    <div class="macros-close"><i class="iconic iconic-close-circle"></i></div>
+    <div class="macros-contents">
+      <div class="macros-form">
+        <div class="macros-header">
+          <div class="search-box">
+            <div class="form-label" data-i18n-key="search_a_macro">Search a macro</div>
+            <input id="search-macros" type="search" data-i18n-key="keywords" placeholder="Keywords..." autocomplete="off">
+          </div>
+        </div>
+        <div class="macros-body"></div>
+      </div>
+    </div>
+  </section>
+
   <footer>
     <div class="footer-contents">
       <div class="footer-close" onclick="gtiz_footer.showFooter()"><i class="iconic iconic-close-circle"></i></div>
@@ -306,7 +326,7 @@ <h4>
         <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-20</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>
@@ -349,6 +369,7 @@ <h4>
   <script src="js/map.js"></script>
   <script src="js/drag.js"></script>
   <script src="js/zooms.js"></script>
+  <script src="js/macros.js"></script>
   <script src="js/search.js"></script>
   <script src="js/footer.js"></script>
   <script src="js/app.js"></script>

diff --git a/js/file-handler.js b/js/file-handler.js
@@ -468,6 +468,7 @@ gtiz_file_handler.parseMetadata = function(msg, lines, header_index) {
 	}
 	// to use original tree button we need gtiz_tree.tree_raw populated with an object containing also metadata, so we added the following line. Please find more in the README.md file under Dev notes paragraph
 	gtiz_tree.tree_raw = gtiz_tree.tree.getTreeAsObject();
+	gtiz_tree.saveOriginalTree(true);
 	gtiz_metadata.init();
 };
 

diff --git a/js/footer.js b/js/footer.js
@@ -36,4 +36,13 @@ window.addEventListener("resize", function() {
       gtiz_footer.scrolly.updateNode(node);
     }
   }, 300);
+});
+
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') {
+    let footer = document.querySelector('footer');
+    if (footer.classList.contains('show')) {
+      gtiz_footer.showFooter();
+    }
+  }
 });
diff --git a/js/i18n/en.js b/js/i18n/en.js
@@ -119,6 +119,7 @@ gtiz_languages.en = {
   "invert_selection": "Invert selection",
   "join_by_coordinates": "Join by coordinates",
   "join_by_metadata": "Join by metadata",
+  "keywords": "Keywords...",
   "kurtosis": "Kurtosis (%)",
   "labels": "Labels",
   "label_asc": "Label ascendant",
@@ -138,6 +139,7 @@ gtiz_languages.en = {
   "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...",
+  "macros" : "Macros",
   "malformed_metadata_file_msg": "It seems metatada file is malformed.",
   "map": "Map",
   "map_tools": "Map tools",
@@ -154,6 +156,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_macros": "Oops! It is necessary to upload a file to build the tree before using macros.",
   "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.",
@@ -188,6 +191,7 @@ gtiz_languages.en = {
   "reset_default": "Reset default",
   "reset_to_initial_values": "Reset to initial values",
   "resize_columns" : "Resize columns",
+  "run" : "Run",
   "samples_by_mst_and_cluster_not_found": "Samples by thresholds and clusters were not found in metadata.",
   "save_as_complete_json" : "Save as complete json",
   "save_as_newick" : "Save as newick",
@@ -199,6 +203,8 @@ gtiz_languages.en = {
   "save_spread": "Save SPREAD",
   "save_tree": "Save tree",
   "scaling": "Scaling (%)",
+  "search_a_function": "Search a function",
+  "search_a_macro": "Search a macro",
   "see_available_clusters": "See available clusters",
   "see_available_zooms" : "See available zooms",
   "see_clusters_zooms": "See clusters zooms",

diff --git a/js/i18n/it.js b/js/i18n/it.js
@@ -119,6 +119,7 @@ gtiz_languages.it = {
   "invert_selection": "Inverti selezione",
   "join_by_coordinates": "Aggrega per coordinate",
   "join_by_metadata": "Aggrega per metadati",
+  "keywords": "Parole chiave...",
   "kurtosis": "Kurtosis (%)",
   "labels": "Etichette",
   "label_asc": "Nome ascendente",
@@ -138,6 +139,7 @@ gtiz_languages.it = {
   "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..",
+  "macros" : "Macro",
   "malformed_metadata_file_msg": "Sembra che il file dei metadati non sia ben formato.",
   "map": "Mappa",
   "map_tools": "Strumenti mappa",
@@ -154,6 +156,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_macros": "Ops! &Egrave; necessario caricare un file per la costruzione del Tree prima di poter utilizzare le macro.",
   "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.",
@@ -188,6 +191,7 @@ gtiz_languages.it = {
   "reset_default": "Reset default",
   "reset_to_initial_values": "Ripristina ai valori iniziali",
   "resize_columns" : "Ridimensiona colonne",
+  "run" : "Lancia",
   "samples_by_mst_and_cluster_not_found": "Campioni per soglie e clusters non trovati nei metadati.",
   "save_as_complete_json" : "Salva come json completo",
   "save_as_newick" : "Salva come newick",
@@ -199,6 +203,8 @@ gtiz_languages.it = {
   "save_spread": "Salva SPREAD",
   "save_tree": "Salva albero",
   "scaling": "Ridimensionamento (%)",
+  "search_a_function": "Cerca una funzione",
+  "search_a_macro": "Cerca una macro",
   "see_available_clusters": "Mostra cluster disponibili",
   "see_available_zooms" : "Mostra zoom disponibili",
   "see_clusters_zooms": "Apri zoom dei cluster",