Tooltips everywhere!

web/app/static/js/nopaque.js

@@ -32,8 +32,13 @@ nopaque.socket.init = function() {
   // Add event handlers
   nopaque.socket.on("user_data_stream_init", function(msg) {
     nopaque.user = JSON.parse(msg);
-    for (let subscriber of nopaque.corporaSubscribers) {subscriber._init(nopaque.user.corpora);}
+    for (let subscriber of nopaque.corporaSubscribers) {
-    for (let subscriber of nopaque.jobsSubscribers) {subscriber._init(nopaque.user.jobs);}
+      subscriber._init(nopaque.user.corpora);
+    }
+    for (let subscriber of nopaque.jobsSubscribers) {
+      subscriber._init(nopaque.user.jobs);
+    }
+    RessourceList.modifyTooltips(false)
   });
 
   nopaque.socket.on("user_data_stream_update", function(msg) {
@@ -43,8 +48,12 @@ nopaque.socket.init = function() {
     nopaque.user = jsonpatch.apply_patch(nopaque.user, patch);
     corpora_patch = patch.filter(operation => operation.path.startsWith("/corpora"));
     jobs_patch = patch.filter(operation => operation.path.startsWith("/jobs"));
-    for (let subscriber of nopaque.corporaSubscribers) {subscriber._update(corpora_patch);}
+    for (let subscriber of nopaque.corporaSubscribers) {
-    for (let subscriber of nopaque.jobsSubscribers) {subscriber._update(jobs_patch);}
+      subscriber._update(corpora_patch);
+    }
+    for (let subscriber of nopaque.jobsSubscribers) {
+      subscriber._update(jobs_patch);
+    }
     if (["all", "end"].includes(nopaque.user.settings.job_status_site_notifications)) {
       for (operation of jobs_patch) {
         /* "/jobs/{jobId}/..." -> ["{jobId}", ...] */
@@ -59,8 +68,13 @@ nopaque.socket.init = function() {
 
   nopaque.socket.on("foreign_user_data_stream_init", function(msg) {
     nopaque.foreignUser = JSON.parse(msg);
-    for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._init(nopaque.foreignUser.corpora);}
+    for (let subscriber of nopaque.foreignCorporaSubscribers) {
-    for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._init(nopaque.foreignUser.jobs);}
+      subscriber._init(nopaque.foreignUser.corpora);
+    }
+    for (let subscriber of nopaque.foreignJobsSubscribers) {
+      subscriber._init(nopaque.foreignUser.jobs);
+    }
+    RessourceList.modifyTooltips(false)
   });
 
   nopaque.socket.on("foreign_user_data_stream_update", function(msg) {

web/app/static/js/nopaque.lists.js

@@ -60,9 +60,28 @@ class RessourceList extends List {
   addRessources(ressources) {
     this.add(ressources.map(x => RessourceList.dataMapper[this.type](x)));
   }
+
+  // Use this to modify tooltips to show after 750ms. If loaded is set to
+  // true (default) tooltips will only be initialized if DOMContentLoaded event
+  // triggered. If you do not want to wait for this event set pass false.
+  static modifyTooltips(waitForDOMContentLoaded=true) {
+    if (waitForDOMContentLoaded) {
+      document.addEventListener('DOMContentLoaded', function() {
+        var elems = document.querySelectorAll('.tooltipped');
+        console.log(elems);
+        var instances = M.Tooltip.init(elems, {enterDelay: 750});
+      });
+    } else {
+      var elems = document.querySelectorAll('.tooltipped');
+      console.log(elems);
+      var instances = M.Tooltip.init(elems, {enterDelay: 750});
+    }
+  }
 }
 
 
+
+
 RessourceList.dataMapper = {
   // ### Mapping Genera Info
   //The Mapping describes entitys rendered per row. One key value pair holds
@@ -163,10 +182,16 @@ RessourceList.options = {
                       </span>
                     </td>
                     <td class="actions right-align">
-                      <a class="btn-floating edit-link waves-effect waves-light" data-tooltip="Edit">
+                      <a class="btn-floating tooltipped edit-link waves-effect
+                                waves-light"
+                         data-position="top"
+                         data-tooltip="Edit">
                         <i class="material-icons">edit</i>
                       </a>
-                      <a class="btn-floating analyse-link waves-effect waves-light">
+                      <a class="btn-floating tooltipped analyse-link
+                                waves-effect waves-light"
+                         data-position="top"
+                         data-tooltip="Analyse">
                         <i class="material-icons">search</i>
                       </a>
                     </td>
@@ -233,7 +258,10 @@ RessourceList.options = {
                    <span class="badge new status" data-badge-caption=""></span>
                  </td>
                  <td class="actions right-align">
-                   <a class="btn-floating link waves-effect waves-light">
+                   <a class="btn-floating tooltipped link waves-effect
+                             waves-light"
+                      data-position="top"
+                      data-tooltip="Go to Job">
                     <i class="material-icons">send</i>
                   </a>
                  </td>

web/app/templates/admin/index.html.j2

@@ -36,5 +36,6 @@
   var ressources = {{ users|tojson|safe }};
   var userList = new RessourceList('users', null, "user");
   userList.addRessources(ressources);
+  RessourceList.modifyTooltips();
 </script>
 {% endblock %}

web/app/templates/corpora/corpus.html.j2

@@ -126,6 +126,7 @@
   var ressources = {{ corpus_files|tojson|safe }};
   var corpusFilesList = new RessourceList("corpus-files", null, "corpus_file");
   corpusFilesList.addRessources(ressources);
+  RessourceList.modifyTooltips();
 
   class InformationUpdater {
     constructor(corpusId, foreignCorpusFlag) {

web/app/templates/jobs/job.html.j2

@@ -162,6 +162,7 @@
   var ressources = {{ job_inputs|tojson|safe }};
   var jobInputsList = new RessourceList("inputs", null, "job_input");
   jobInputsList.addRessources(ressources);
+  RessourceList.modifyTooltips();
 
   class InformationUpdater {
     constructor(jobId, foreignJobFlag) {

web/app/templates/results/results.html.j2

@@ -66,5 +66,6 @@
 var ressources = {{ results|tojson|safe }};
 var importedResultsList = new RessourceList("results", null, "result");
 importedResultsList.addRessources(ressources);
+RessourceList.modifyTooltips();
 </script>
 {% endblock %}