loading icon + data patch

Wimmics · Mar 3, 2023 · 557aab7 · 557aab7
1 parent 0811766
commit 557aab7
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 19 deletions.
diff --git a/datatools.js b/datatools.js
@@ -171,7 +171,7 @@ async function transform(values) {
     }
 
     return { items: Object.values(items), 
-        // clusters: Object.values(groupedItems), 
+        clusters: Object.values(groupedItems), 
         links: Object.values(links), 
         linkTypes: linkTypes }
 

diff --git a/public/css/menu.css b/public/css/menu.css
@@ -7,7 +7,7 @@
     background-color: #ccc;
     overflow: hidden;
     transition: 0.5s;
-    padding-top: 50px;
+    padding-top: 20px;
     background-color: #2C3E50;
     z-index: 10;
 }
@@ -20,6 +20,11 @@
     margin-left: 50px;
 }
 
+.menu h3{
+    text-align: center;
+    padding: 5px;
+}
+
 .menu-icon{
     cursor: pointer;
     position: relative;

diff --git a/public/css/timeline.css b/public/css/timeline.css
@@ -48,4 +48,28 @@ body{
     border-radius: 5px;
     border: 1px solid #ccc;
     display: 'none';
+}
+
+#loading{
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background-color: white;
+    opacity: 80%;
+    display: none;
+    position: absolute;
+    top: 0;
+}
+
+#loading img{
+    position: relative;
+    left: calc(50% - 35px);
+    top: 50%;
+    text-align: center;
+}
+
+#loading p{
+    position: relative;
+    top: 55%;
+    text-align: center;
 }
diff --git a/public/images/loading.svg b/public/images/loading.svg
diff --git a/public/js/dataModel.js b/public/js/dataModel.js
@@ -40,6 +40,8 @@ class DataModel {
 
     async add(node) {
 
+        this.chart.showLoading()
+
         let data = await this.fetchData(node)
         await this.update(data)
 

diff --git a/public/js/muvin.js b/public/js/muvin.js
@@ -63,6 +63,14 @@ class Muvin extends HTMLElement {
         // this.testHal()
     }
 
+    showLoading() {
+        this.shadowRoot.querySelector('#loading').style.display = "block";
+    }
+
+    hideLoading() {
+        this.shadowRoot.querySelector('#loading').style.display = "none";
+    }
+
     /**
      * Launch test with HAL data
      */
@@ -91,6 +99,7 @@ class Muvin extends HTMLElement {
             focus = nodes[nodes.length / 2]
         }
 
+        this.hideLoading()
         this.menu.close()
         this.menu.displayViewSettings()
 
@@ -519,7 +528,10 @@ template.innerHTML = `
     <div class='tooltip' id='profile-tooltip'></div>
     
     <div class="menu">
-        <img src="/muvin/images/open.svg" id="menu-icon" width="20"; height="20"; class="menu-icon"></img>
+        
+        <h3 style="color: white;">Muvin</h3>
+        <img src="/muvin/images/open.svg" id="menu-icon" width="20" height="20" class="menu-icon"></img>
+        
 
         <div class='icon-container'>
             <img src="/muvin/images/data.svg" id="data-icon" width="20"; height="20"; class="menu-icon"></img>
@@ -537,7 +549,7 @@ template.innerHTML = `
                 </select>
             </div>
             <div >
-                <label>Starting Point</label>
+                <label>Search for</label>
                 <input type="text" list='nodes-list' id="nodes-input" placeholder="Type here">
                 <datalist id='nodes-list'></datalist>
             </div>
@@ -555,6 +567,10 @@ template.innerHTML = `
     </div>
 
     <div class="vis">
+        <div id="loading">  
+            <img width="70px" height="70px" src="/muvin/images/loading.svg"></img>
+            <p>Loading data...</p>
+        </div>
 
         <div class='legend'>  </div>
 

diff --git a/views/about.ejs b/views/about.ejs
@@ -28,7 +28,6 @@
     <a href="#description" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Description</a>
     <a href="#publications" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Publications</a>
     <a href="#demo" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Online Demo</a>
-    <a href="#wasabi" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Wasabi</a>
     <a href="#code" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Source Code</a>
     <a href="#contact" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white">Contact</a>
   </div>
@@ -38,7 +37,6 @@
     <a href="#description" class="w3-bar-item w3-button w3-padding-large">Description</a>
     <a href="#publications" class="w3-bar-item w3-button w3-padding-large">Publications</a>
     <a href="#demo" class="w3-bar-item w3-button w3-padding-large">Online Demo</a>
-    <a href="#wasabi" class="w3-bar-item w3-button w3-padding-large">Wasabi</a>
     <a href="#code" class="w3-bar-item w3-button w3-padding-large">Source Code</a>
     <a href="#contact" class="w3-bar-item w3-button w3-padding-large">Contact</a>
   </div>
@@ -87,30 +85,25 @@
 
       <p class="w3-text-grey">You can play with the web prototype of Muvin at <a href="/muvin/demo/" target=”_blank” >http://dataviz.i3s.unice.fr/muvin/demo</a></p>
 
-  </div>
-</div>
-
-<div id="wasabi" class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
-  <div class="w3-content">
-    <h1>Wasabi Application</h1>
-    <h5 class="w3-padding-32">Muvin was applied on the Wasabi dataset to support the visualization of the discography of artists and collaborations between musical artists and groups across time. This version provides auditory exploration based on audio thumbnailing to support user perception throughout the visual exploration process, and MIR analysis of songs through a direct link to the <a href="https://timeside.ircam.fr/docs/index.html">TimeSide service</a>.</h5>
+      <h5>Wasabi Application</h5>
+      <p class="w3-text-grey">Muvin was applied on the Wasabi dataset to support the visualization of the discography of artists and collaborations between musical artists and groups across time. This version provides auditory exploration based on audio thumbnailing to support user perception throughout the visual exploration process, and MIR analysis of songs through a direct link to the <a href="https://timeside.ircam.fr/docs/index.html">TimeSide service</a>.</p>
 
-    <p class="w3-text-grey">
-      You can play with the demonstration prototype at <a href="http://dataviz.i3s.unice.fr/muvinWasabi/">http://dataviz.i3s.unice.fr/muvinWasabi/</a>
-    </p>
+      <p class="w3-text-grey">
+        You can play with the demonstration prototype at <a href="http://dataviz.i3s.unice.fr/muvinWasabi/">http://dataviz.i3s.unice.fr/muvinWasabi/</a>
+      </p>
   </div>
 </div>
 
 <!-- Fourth Grid -->
-<div id="code" class="w3-row-padding w3-padding-64 w3-container">
+<div id="code" class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
   <div class="w3-content">
       <h1>Source Code</h1>
       <p class="w3-text-grey">Source code is available at <a href="https://github.com/Wimmics/muvin">https://github.com/Wimmics/muvin</a>.</p>
   </div>
 </div>
 
 <!-- Second Grid -->
-<div id="contact" class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
+<div id="contact" class="w3-row-padding w3-padding-64 w3-container">
   <div class="w3-content">
       <h1>Contact</h1>
 
@@ -122,7 +115,7 @@
 </div>
 
 <!-- Footer -->
-<footer class="w3-container w3-padding-64 w3-center">  
+<footer class="w3-container w3-padding-64 w3-center w3-indigo">  
   <div class="w3-xlarge w3-padding-32 w3-white">
     <a href="https://univ-cotedazur.fr/" target=”_blank”><img src="/muvin/images/logos/uca.png" class="w3-round" alt="Université Côte d'Azur" width="60px"></a>
     <a href="https://www.cnrs.fr/fr" target=”_blank”><img src="/muvin/images/logos/cnrs.png" class="w3-round" alt="CNRS" width="60px"></a>