Loading Screen

main.js

@@ -284,25 +284,25 @@ function updateArgs(new_args) {
     console.log(current_json)
 }
 
-function showViz(viz_num) { 
+function showViz(viz_num) {
     switch(viz_num) {
-        case 1: 
+        case 1:
             if(!visited_modules[1].executed) return false;
             break;
-        
-        case 2: 
+
+        case 2:
             if(!visited_modules[2].executed) return false;
             break;
     }
 
-    viz = new BrowserWindow({width: 1024, height:768, backgroundColor: '#000'});
+    viz = new BrowserWindow({width: 800, height:600, backgroundColor: '#000'});
 
     viz.on('closed', function() {
         viz = null;
     });
 
     viz.loadURL('file:///' + __dirname + '/src/html/module' + viz_num.toString() + '_viz.html');
-    
+
     viz.webContents.once('dom-ready', () => {
         viz.webContents.send('NEW', JSON.stringify(current_json));
     });
@@ -336,14 +336,14 @@ function createSaveState(save_state_path) {
 function loadSaveState(save_state_path) {
     // clear out all files in the current state
     let state_files = fs.readdirSync(prefix);
-    
+
     for(let file of state_files) {
         fs.unlink(prefix + file.toString(), err => {
             if(err) console.log(err);
         });
     }
 
-    // extract the state files 
+    // extract the state files
     tar.x({file: save_state_path, cwd: prefix, sync: true});
 
     // Load in the args and state json files
@@ -359,7 +359,7 @@ function loadSaveState(save_state_path) {
 
     // Jump to the most recent module
     goToModule(current_module);
-    
+
     // Send IPC message with the arguments to the current module
     win.webContents.once('dom-ready', () => {
         win.webContents.send('NEW', JSON.stringify(current_json));
@@ -395,7 +395,7 @@ ipcMain.on('LOADVIZ', (event, viz_num) => {
     if(showViz(viz_num)) {
         console.log('opening viz number:', viz_num);
     }
-}); 
+});
 
 // Attempt to load a page
 ipcMain.on('LOADMODULE', (event, module_number) =>  {

src/css/style.css

@@ -668,13 +668,18 @@ input[type="range"]::-webkit-slider-thumb:hover {
 #loading_logo {
   height: 250px;
   width: 250px;
-  position: sticky;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -150px;
+  margin-left: -100px;
   -webkit-animation: spin 2s infinite;
   animation: spin 2s infinite;
   background-color: white;
   border-radius: 50%;
   border: 2px solid #000010;
   padding: 10px;
+  visibility: hidden;
 }
 
 @-webkit-keyframes spin {

src/html/loading_screen.html

@@ -16,13 +16,6 @@ <h1 style="font-size:24px;">LOADING...</h1>
       <div class="box progress_bar">
         <div id="current_progress">
       </div>
-      <p id="bio_text">
-      </p>
-      <script>
-        running = true
-        var bio_text = document.getElementById("bio_text")
-        const options = ["ATGC","AGCT","CTAG","TAGC","GTCA","CCAA","AAAA","CTCC","TGAT","GTAA"]
-      </script>
     </div>
   </div>
 </body>

src/html/module1.html

@@ -175,6 +175,7 @@ <h1>BACKGROUND SEQUENCES</h1>
         </div>
       </div>
 
+       <img src="../img/logo.png" id="loading_logo">
       <div id="container">
         <input type="submit" class="input" id="nextModule" value="Next Module">
         <input type="submit" class="input" id="execute" value="Execute and View Primer Visualizations">

src/html/module2.html

@@ -193,6 +193,7 @@ <h3>Rank each feature out of an importance score of 100.<br>If a feature is left
 
         </table>
         </br>
+        <img src="../img/logo.png" id="loading_logo">
         <input type="submit" class="input" id="nextModule" value="Next Module">
         <input type="submit" class="input" id="execute" value="Execute and View Viz">
       </div>

src/html/module3.html

@@ -166,6 +166,7 @@
       </br>
       <img src="../img/ranking.png" height="110px" width="280px">
       </br>
+      <img src="../img/logo.png" id="loading_logo">
       <input type="submit" class="input" id="nextModule" value="View Results">
       </br>
     </div>

src/js/module1.js

@@ -36,6 +36,7 @@ const default_min_length = document.getElementById('default_min_length');
 const default_max_length = document.getElementById('default_max_length');
 const search_box = document.getElementById('search_box');
 const change_all = document.getElementById('change_all');
+const loading_logo = document.getElementById('loading_logo');
 
 
 var manual_sequence = document.getElementById('manual_sequence');
@@ -795,12 +796,14 @@ execute.addEventListener('click', function() {
 
 submit.addEventListener('click', function() {
     sendMessage('LOADMODULE', 2);
+    loading_logo.style.visibility = 'visible';
     console.log('attempting execution');
 })
 
 // Intercept NEW message and bootstrap the page
 ipcRenderer.on('NEW', (event, arg) => {
     console.log("NEW Recieved:");
+    loading_logo.style.visibility = 'invisible';
     state = new Module1(JSON.parse(arg));
 });
 
@@ -828,6 +831,24 @@ ipcRenderer.on('LOADMODULE', (event, arg) => {
 });
 
 
+function move() {
+    var progress = document.getElementById("current_progress");
+    var width = 1;
+    var id = setInterval(frame, 700);
+    function frame() {
+        if (width >= 100) {
+            clearInterval(id);
+        }
+        else {
+            width++;
+            progress.style.width = width + '%';
+        }
+    }
+}
+
+move();
+
+
 // Clean init of state if nothing to bootstrap from
 if(!state) {
     state = new Module1();

src/js/module2.js

@@ -50,6 +50,10 @@ const degenerateSlider = document.getElementById('degenerate-slider');
 const degenerateBox = document.getElementById('degenerate-box');
 const degenerateCheckbox = document.getElementById('degenerate-checkbox');
 
+const nextModule = document.getElementById('nextModule');
+const execute = document.getElementById('execute');
+const loading_logo = document.getElementById('loading_logo');
+
 var state = {primer_scores: {}};
 
 
@@ -364,18 +368,31 @@ nextModule.addEventListener('click', function () {
     }
 });
 
+execute.addEventListener('click', function () {
+    try {
+        json_string = JSON.stringify(state);
+        sendMessage('EXECUTE', ['primacy primer-score', json_string]);
+
+        console.log("message sent");
+    } catch(e) {
+        console.log(e);
+    }
+});
+
 //listening
 ipcRenderer.on('EXECUTE', (event, arg) =>{
     if(arg != null){
         console.log("error received");
     } else {
         console.log("sending load message");
+        loading_logo.style.visibility = 'visible';
         sendMessage('LOADMODULE', 3);
     }
 });
 
 ipcRenderer.on('NEW', (event, arg) =>{
     console.log("NEW received");
+    loading_logo.style.visibility = 'invisible';
     console.log(arg);
     init(JSON.parse(arg));
 });

src/js/module3.js

@@ -60,6 +60,8 @@ const target_distance     = document.getElementById("targetDistance");
 const target_dist_check   = document.getElementById("targetDistanceCheck");
 const target_distance_row = document.getElementById("targetDistanceRow");
 
+const loading_logo        = document.getElementById("loading_logo");
+
 
 // Current module state
 var state = null;
@@ -517,6 +519,7 @@ ipcRenderer.on('EXECUTE', (event, arg) =>{
 
 ipcRenderer.on('NEW', (event, arg) =>{
     console.log("NEW received");
+    loading_logo.style.visibility = 'invisible';
     state = new Module3(JSON.parse(arg));
 });
 
@@ -527,11 +530,13 @@ ipcRenderer.on('LOADMODULE', (event, arg) =>{
 //loads tab on click
 module1.addEventListener('click', function (){
     console.log("click");
+    loading_logo.style.visibility = 'visible';
     sendMessage('LOADMODULE', 1);
 });
 
 module2.addEventListener('click', function (){
     console.log("click");
+    loading_logo.style.visibility = 'visible';
     sendMessage('LOADMODULE', 2);
 });