JM changes 2.0

CNIC-Proteomics · Jan 28, 2021 · b362388 · b362388
1 parent 91c540f
commit b362388
Show file tree

Hide file tree

Showing 54 changed files with 3,522 additions and 323 deletions.
diff --git a/desktopApp/app/index.html b/desktopApp/app/index.html
@@ -11,12 +11,11 @@
     <style>
         /* CORPUS */ 
         #buttonContent {
-            margin-top: 5%;
+            margin-top: 10%;
             height: 140px;
         }
 
         .buttonSpace {
-            float: left;
             height: 130px;
         }
 
@@ -27,37 +26,35 @@
         }
 
         #spaceExe {
-            width: 40%;
+            float: right;
+            width: 48%;
         }
 
         #spaceExe a {
             display: inline-block;
             text-align: center;
             padding-top: 50px;
-
             width: 70%;
             height: 100%;
-            margin-left: 15%;
-            font-size: 1.5em;
+            margin-left: 10%;
+            font-size: 1.6em;
             font-weight: 300;
             text-decoration: none;
-
         }
 
         #spaceHelp {
-            width: 30%;
+            float: left;
+            width: 48%;
         }
 
         #spaceHelp a {
             display: inline-block;
             text-align: center;
-            padding-top: 14px;
-
-            width: 45%;
-            height: 40%;
-            margin-left: 55%;
-            margin-top: 20%; 
-            font-size: 1.2em;
+            padding-top: 50px;
+            width: 70%;
+            height: 100%;
+            margin-left: 20%;
+            font-size: 1.6em;
         }
 
         #spaceGit {
@@ -68,7 +65,6 @@
             display: inline-block;
             text-align: center;
             padding-top: 14px;
-
             width: 45%;
             height: 40%;
             margin-top: 20%;
@@ -80,26 +76,35 @@
             border-radius: 10px;
             border: 3px solid darkred;
             cursor: pointer;
-            color: #ffffff;
+            color: rgba(255,255,255,0.7);
             font-family: Arial;
             text-decoration: none;
-            transition: background-color 0.8s;
+            transition: 0.8s;
         }
 
         .button:hover {
             background-color: rgba(139, 0, 0, 0.5);
+            color: rgba(255,255,255,1);
         }
 
         /* IMAGE */
         #imgContent {
-            height: 150px;
+            margin-top: 45px;
         }
 
         #imgContent img {
             display: block;
-            width: 300px;
-            height: auto;
             margin: auto;
+            animation: rotation 30s infinite linear;
+        }
+
+        @keyframes rotation {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(359deg);
+            }
         }
     </style>
 </head>
@@ -117,19 +122,24 @@
     <div id="mainContent">
 
         <div id="buttonContent">
+
             <div id="spaceHelp" class="buttonSpace">
                 <a id="btnHelp" class="button" href="./sections/help/index.html">Help</a>
             </div>
+
             <div id="spaceExe" class="buttonSpace">
-                <a id="btnExe" class="button" href="sections/execute/moduleSelector.html">EXECUTE</a>
+                <a id="btnExe" class="button" href="sections/execute/moduleSelector.html">Execute</a>
             </div>
+
+            <!--
             <div id="spaceGit" class="buttonSpace">
                 <a id="btnGit" class="button" onclick="openGitHub()">GitHub</a>
             </div>
+            -->
         </div>
 
         <div id="imgContent">
-            <img src="./assets/images/molecule2.png" alt="fattyAcids">
+            <img src="./assets/images/icon2.ico" alt="fattyAcids" width="200">
         </div>
 
         <div id="footer">
@@ -144,12 +154,15 @@
 
     <script>
         // Global Variables
-        const { shell } = require('electron');
+        const { shell, webFrame } = require('electron');
 
         // Open gitHub
         function openGitHub() {
             shell.openExternal("https://github.com/CNIC-Proteomics/MetabolomicsWorkflow");
         }
+
+        // set zoom factor
+        webFrame.setZoomFactor(0.9);
     </script>
 
 </body>

diff --git a/desktopApp/app/index.js b/desktopApp/app/index.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron');
+const { app, BrowserWindow, ipcMain, shell } = require('electron');
 const path = require('path');
 const fs = require('fs');
 const os = require('os');
@@ -35,8 +35,8 @@ const errorCode = JSON.parse(fs.readFileSync(path.join(__dirname, 'assets', 'fil
 function showMainPage () {
 
     win = new BrowserWindow({
-        width: 780,
-        height: 655,
+        width: 950,
+        height: 800,
         webPreferences: {
             nodeIntegration: true
         },
@@ -49,7 +49,13 @@ function showMainPage () {
     // Load index.html
     win.loadURL(index);
 
-    // win.webContents.openDevTools();
+    // Open links in external navigator
+    win.webContents.on('new-window', (e, url) => {
+        e.preventDefault();
+        shell.openExternal(url);
+    })
+
+    win.webContents.openDevTools();
 }
 
 // Start app

diff --git a/desktopApp/app/sections/execute/REname.html b/desktopApp/app/sections/execute/REname.html
@@ -9,11 +9,12 @@
     <link href="./assets/css/tooltip.css" rel="stylesheet" type="text/css">
     <link href="./assets/css/changeButton.css" rel="stylesheet" type="text/css">
     <link href="./assets/css/header.css" rel="stylesheet" type="text/css">
+    <script type="text/javascript" src="assets/js/defaultValues.js"></script>
 
     <style>
         /* SETTINGS CONTAINER */
         #settings {
-            margin: 5% 3% 5% 3%;
+            /*margin: 5% 3% 5% 3%;*/
         }
 
         #settings::after {
@@ -91,39 +92,48 @@ <h3 style="color:white; font-size: 1.5em; font-weight: 300; font-family: Arial;"
 
             <div class="paramContainer">
                 <label class="tooltip" for="removeRowRegex">Regular Expression to remove row <span class="icon">&#9432</span>
-                    <span class="tooltipText">Regular expression that matches the name of rows to be removed</span>
+                    <span class="tooltipText" id="removeRowRegexTTT" style="top:-70%;">Regular expression that matches the name of rows to be removed</span>
+                    <script>document.querySelector("#removeRowRegexTTT").innerHTML += `. Default: ${defaultValues.REname.removeRowRegex}`</script>
                 </label>
-                <input type="text" id="removeRowRegex" name="removeRowRegex" value="(?i)No compounds found for experimental mass">
+                <input type="text" id="removeRowRegex" name="removeRowRegex" defaultValue="(?i)No compounds found for experimental mass" placeholder="Optional">
             </div>
 
+            <!--
             <div id="moreCont">
                 <button type="button" id="more" onclick="showMore()">Advanced</button>
             </div>
+            -->
 
-            <div id="hiddenParams" style="display: none;">
+            <div id="hiddenParams">
 
                 <div class="paramContainer">
                     <label class="tooltip" for="separator">Compound separator <span class="icon">&#9432</span>
-                        <span class="tooltipText">Regular expression that matches the character used to separate compound names in the same row</span>
+                        <span class="tooltipText" id="separatorTTT" style="top:-70%;">Regular expression that matches the character used to separate compound names in the same row</span>
+                        <script>document.querySelector("#separatorTTT").innerHTML += `. Default: ${defaultValues.REname.separator}`</script>
                     </label>
-                    <input type="text" id="separator" name="separator" value="\s//\s">
+                    <input type="text" id="separator" name="separator" defaultValue="\s//\s" placeholder="Optional">
                 </div>
 
                 <div class="paramContainer">
                     <label class="tooltip" for="aaSeparator">Amino acid separator <span class="icon">&#9432</span>
-                        <span class="tooltipText">Regular expression that matches the character used to separate aminoacid in peptides</span>
+                        <span class="tooltipText" id="aaSeparatorTTT" style="top:-60%;">Regular expression that matches the character used to separate aminoacid in peptides</span>
+                        <script>document.querySelector("#aaSeparatorTTT").innerHTML += `. Default: ${defaultValues.REname.aaSeparator}`</script>
                     </label>
-                    <input type="text" id="aaSeparator" name="aaSeparator" value="\s">
+                    <input type="text" id="aaSeparator" name="aaSeparator" defaultValue="\s" placeholder="Optional">
                 </div>
 
                 <div class="paramContainer">
-                    <label for="outputName">Output Name</label>
-                    <input type="text" id="outputName" name="outputName">
+                    <label class="tooltip" for="outputName">Output Name <span class="icon">&#9432</span>
+                        <span class="tooltipText" id="outputNameTTT" style="top:-20%;"></span>
+                    </label>
+                    <input type="text" id="outputName" name="outputName" placeholder="Optional">
                 </div>
 
                 <div class="paramContainer">
-                    <label for="outputColumns">Output Columns</label>
-                    <input type="text" id="outputColumns" name="outputColumns">
+                    <label class="tooltip" for="outputColumns">Output Columns <span class="icon">&#9432</span>
+                        <span class="tooltipText" id="outputColumnsTTT" style="top:-20%;">Default: All columns will be saved</span>
+                    </label>
+                    <input type="text" id="outputColumns" name="outputColumns" placeholder="Optional">
                 </div>
 
                 <div class="paramContainer">
@@ -136,7 +146,7 @@ <h3 style="color:white; font-size: 1.5em; font-weight: 300; font-family: Arial;"
         </div>
     </div>
 
-    <div id="nextContainer" style="visibility: visible;">
+    <div id="nextContainer" style="visibility: visible; margin-top: 4%;">
         <div id="selectBtn" style="width:200px; margin: auto; padding: 0px; text-align: center;">
             <a class="change next" onclick="next()">&raquo;</a>
         </div>
@@ -197,6 +207,9 @@ <h3 style="color:white; font-size: 1.5em; font-weight: 300; font-family: Arial;"
             workflow = receivedWorkflow;
             workflow.next += 1;
 
+            // Show default output name in tooltip
+            document.querySelector("#outputNameTTT").innerHTML += `Default: ${workflow.next}_REnamed_${workflow.files.infile.name}`;
+
             iniReader();
 
             // If this is the last module, hidde next button and show run button
@@ -210,7 +223,10 @@ <h3 style="color:white; font-size: 1.5em; font-weight: 300; font-family: Arial;"
             // Refill all fiedls with iniString
             workflow = receivedWorkflow;
             workflow.next -= 1;
-
+
+            // Show default output name in tooltip
+            document.querySelector("#outputNameTTT").innerHTML += `Default: ${workflow.next}_REnamed_${workflow.files.infile.name}`;
+
             iniReader();
 
         });
@@ -230,11 +246,13 @@ <h3 style="color:white; font-size: 1.5em; font-weight: 300; font-family: Arial;"
             iniContent += "OutputColumns = " + document.getElementById('outputColumns').value;
             iniContent += "###";
             iniContent += "Separator = "
-            iniContent += document.getElementById('separator').value == "" ? "\\s//\\s" : document.getElementById('separator').value;
+            iniContent += document.getElementById('separator').value == "" ? defaultValues.REname.separator : document.getElementById('separator').value;
             iniContent += "###";
             iniContent += "AminoAcidSeparator = " + document.getElementById('aaSeparator').value;
+            iniContent += document.getElementById('aaSeparator').value == "" ? defaultValues.REname.aaSeparator : document.getElementById('aaSeparator').value;
             iniContent += "###";
-            iniContent += "RemoveRow = " + document.getElementById('removeRowRegex').value;
+            iniContent += "RemoveRow = ";
+            iniContent += document.getElementById('removeRowRegex').value == "" ? defaultValues.REname.removeRowRegex : document.getElementById('removeRowRegex').value;
             iniContent += "###";
 
             iniContent = iniContent.replace(/###/g, "\n");
@@ -248,8 +266,8 @@ <h3 style="color:white; font-size: 1.5em; font-weight: 300; font-family: Arial;"
 
             var iniString = workflow.ini.REname;
 
-            document.getElementById('outputName').value = iniString.match(/\nOutputName = ([-\w\.]*)\n/)[1];
-            document.getElementById('outputColumns').value = iniString.match(/\nOutputColumns = ([\w\s,]*)\n/)[1];
+            document.getElementById('outputName').value = iniString.match(/\nOutputName = ([-\w\s\.()]*)\n/)[1];
+            document.getElementById('outputColumns').value = iniString.match(/\nOutputColumns = ([\w\s,()]*)\n/)[1];
             document.getElementById('separator').value = iniString.match(/\nSeparator = ([^\n]*)\n/)[1];
             document.getElementById('aaSeparator').value = iniString.match(/\nAminoAcidSeparator = ([^\n]*)\n/)[1];
             document.getElementById('removeRowRegex').value = iniString.match(/\nRemoveRow = ([^\n]*)\n/)[1];

diff --git a/desktopApp/app/sections/execute/assets/css/changeButton.css b/desktopApp/app/sections/execute/assets/css/changeButton.css
@@ -28,8 +28,8 @@
 
 #nextContainer {
     visibility: hidden;
-    margin-top: 5%;
-    margin-bottom: 5%;
+    margin-top: 2%;
+    margin-bottom: 0%;
 }
 
 #nextContainer a {

diff --git a/desktopApp/app/sections/execute/assets/css/tooltip.css b/desktopApp/app/sections/execute/assets/css/tooltip.css
@@ -11,8 +11,8 @@
     top: -50%;
     left: 105%;
     display: inline-block;
-    /*width: max-content;*/
-    width: 300px;
+    width: max-content;
+    max-width: 300px;
     visibility: hidden;
     background-color: black;
     color: lightgray;
@@ -21,6 +21,7 @@
     padding: 5px 8px;
     font-size: 0.8em;
     z-index: 1;
+    word-wrap: break-word;
 }
 
 .tooltip:hover .tooltipText {

diff --git a/desktopApp/app/sections/execute/assets/js/defaultValues.js b/desktopApp/app/sections/execute/assets/js/defaultValues.js
@@ -0,0 +1,24 @@
+// Default values parameters of different modules
+defaultValues = {
+
+    Tagger: {
+        halogenatedRegex: "([Ff]luor(?!ene)|[Cc]hlor(?!ophyl)|[Bb]rom|[Ii]od)",
+        peptideRegex: "(?i)^(Ala|Arg|Asn|Asp|Cys|Gln|Glu|Gly|His|Ile|Leu|Lys|Met|Phe|Pro|Ser|Thr|Trp|Tyr|Val|[-\\s,]){3,}$",
+    },
+
+    REname: {
+        removeRowRegex: "(?i)No compounds found for experimental mass",
+        separator: "\\s//\\s",
+        aaSeparator: "\\s",
+    },
+
+    RowMerger: {
+        comparedCol: "Experimental mass, Adduct, mz Error (ppm), Molecular Weight",
+        conservedCol: "Identifier, Name",
+    },
+
+    TableMerger: {
+        decimalPlaces: "4",
+    },
+
+};
diff --git a/desktopApp/app/sections/execute/infile.html b/desktopApp/app/sections/execute/infile.html
@@ -52,7 +52,7 @@ <h3>Upload Input File</h3>
         </div>
     </div>
 
-    <div id="nextContainer">
+    <div id="nextContainer" style="margin-top: 5%;">
         <div id="selectBtn" style="visibility: hidden; width:100px; margin: auto; padding: 0px; text-align: center;">
             <a class="change next" onclick="next()">&raquo;</a>
         </div>