Updated ui to work with the new flask server.

config.json

@@ -0,0 +1 @@
+{"type": "Rescoring", "tag": "", "inputs": {"search_results": "20230315_PAX8_PWHF_1_PWHF_PLEX2.csv", "search_results_type": "Internal", "spectra": "../mzml", "spectra_type": "mzML"}, "models": {"intensity": "Prosit_2023_intensity_DBIA_20240112161916", "irt": "Prosit_2023_irt_DBIA_20240112172042"}, "outputFormat": "", "prediction_server": "10.157.98.62:8500", "thermoExe": "ThermoRawFileParser"}

ui/package.json

@@ -8,7 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.18.0",
+    "@vueuse/integrations": "^10.7.2",
+    "axios": "^1.6.6",
+    "universal-cookie": "^7.0.1",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vue-upload-component": "^2.8.20",
@@ -18,8 +20,10 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.4.1",
     "@vue/cli-plugin-babel": "^5.0.0",
-    "@vue/cli-service": "^3.0.5",
+    "@vue/cli-service": "^5.0.8",
     "material-design-icons-iconfont": "^3.0.3",
-    "vue-template-compiler": "^2.5.17"
+    "vue-cookies": "^1.8.3",
+    "vue-template-compiler": "^2.5.17",
+    "sortablejs": "^1.6.1"
   }
 }

ui/src/App.vue

@@ -17,9 +17,6 @@
           to add fragmentation column to the input. We assume all the sequences are fully labeled and you don't need to add the
           tmt modification explicitly in your input files.
         </v-alert>
-        <v-alert :value="true" type="error" color="#d6983c">
-          {{ testApi }}.
-        </v-alert>
       </v-flex>
 
       <v-flex xs9>
@@ -81,8 +78,7 @@
 <script>
 import router from '@/router'
 import axios from 'axios'
-
-
+import Cookies from 'universal-cookie';
 
 export default {
   name: 'app',
@@ -91,27 +87,28 @@ export default {
     taskid: null,
     underMaintenance: false,
     testApi: false,
+    cookies:false,
     runJobs: -1,
   }),
   methods: {
     toggleTaskDialog: function(){
       this.displayTaskDialog = ! this.displayTaskDialog;
     },
     showHome: function(){
-      router.push('/prosit/')
+      router.push('/')
     },
     showLOG: function(){
-      router.push('/prosit/log/')
+      router.push('/log/')
     },
     showFAQ: function(){
-      router.push('/prosit/faq/')
+      router.push('/faq/')
     },
     showLibraries: function(){
-      router.push('/prosit/libraries/')
+      router.push('/libraries/')
     },
     showTaskStatus: function(){
       this.toggleTaskDialog();
-      router.push('/prosit/task/' + this.taskid)
+      router.push('/task/' + this.taskid)
     },
   },
   computed: {
@@ -123,24 +120,43 @@ export default {
         return this.$route.name != 'faq'
       }
       return false;
-    }
+    },
+    setCookieTime: function() {
+      var today = new Date();
+      var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
+      var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
+      var dateTime = date+' '+time;
+      console.log(dateTime)
+      return dateTime;
+    },
+    
   },
   mounted() {
-    let statusUrl = '/prosit/api/backend.xsjs';
-    let test_api = process.env.VUE_APP_API_URL +'/hi'
-    
-    let self = this;
+    let statusUrl = process.env.VUE_APP_API_URL +'/api/v1/status';
 
-    axios.get(test_api).then(function (response){   
-        self.testApi = response.data;
+    let self = this;
+    self.cookies = new Cookies(null, { path: '/' });
+
+    axios.get('https://api.ipify.org?format=json').then(response => {
+      let ipAddress = response.data.ip;
+      self.cookies.set("ipAddress",ipAddress);
+      self.cookies.set("timeStamp",self.setCookieTime);
+      let hashId =  self.cookies.get('timeStamp') + self.cookies.get('ipAddress')
+      console.log(hashId)
+      self.$store.commit('sethashId',hashId)
+      console.log(self.$store.state.task.hashId)
     });
+    
+    //axios.get(test_api,{"Access-Control-Allow-Credentials": true}).then(function (response){   
+      //  self.testApi = response.data.message;
+    //});
 
     // expects an json object: {"underMaintenance": true} or false.
     axios.get(statusUrl).then(function (response){   
         self.underMaintenance = response.data.underMaintenance == "true";
     });
 
-    let runJobsUrl = '/prosit/api/get_running_jobs.xsjs';
+    let runJobsUrl = process.env.VUE_APP_API_URL +'/api/v1/runningJobs';
     axios.get(runJobsUrl).then(function (response){
       self.runJobs = response.data.number_of_jobs;
     });

ui/src/components/CEA.vue

@@ -164,34 +164,14 @@ export default {
       this.step = 4;
     },
     setModels: function(response){
-      let modelIntensityLists = response.data.models.intensities;
-      let modelIRTLists = response.data.models.iRT;
-      this.modelIRTList = [];
-      //modelIRTList = response.data.models.iRT;
-      this.modelIntensityList = [];
-      for (let i = 0; i < modelIntensityLists.length; i++){
-        //if(modelIntensityLists[i].enabled.ce_calibration)
-        this.modelIntensityList.push(modelIntensityLists[i]);
-      }
-      for (let i = 0; i < modelIRTLists.length; i++){
-        //if(modelIRTLists[i].enabled.ce_calibration)
-        this.modelIRTList.push(modelIRTLists[i]);
-      }
-      let that = this;
-      if(this.modelIntensityList.length>0) {
-        this.modelIntensityList.forEach(function (item) {
-          if (item.default) that.modelIntensityName = item.name;
-        });
-      }
-      if(this.modelIRTList.length>0) {
-        this.modelIRTList.forEach(function (item) {
-          if (item.default) that.modelIRTName = item.name;
-        });
-      }
+      this.modelIntensityList = response.data.intensity;
+      this.modelIRTList = response.data.irt;
+      this.modelIntensityName = this.modelIntensityList[0].name
+      this.modelIRTName = this.modelIRTList[0].name
     }
   },
   mounted() {
-    let modelsUrl = '/prosit/api/models.xsjs';
+    let modelsUrl = process.env.VUE_APP_API_URL +'/api/v1/getModels';
     axios.get(modelsUrl).then(this.setModels);
   }
   

ui/src/components/MQR.vue

@@ -19,53 +19,51 @@
   </Info>
 
 
-
   <v-stepper-step :complete="step > 1" step="1">
     Search Engine
     <small>select the search engine used for searching your data.</small>
   </v-stepper-step>
   <v-stepper-content step="1">
      <v-card flat>   
       <div v-if="searchEngineList.length>0">
-        Intensity prediction model
         <v-radio-group v-model="searchEngine" column>
           <v-radio color='primary'
                   v-for="f in searchEngineList"
-                  :label="f"
-                  :value="f"
+                  :key="f.name"
+                  :label="f.name"
+                  :value="f.name"
           ></v-radio>
         </v-radio-group>
       </div>
     <v-card-actions>
-    <v-spacer></v-spacer>
-    <v-btn small color="primary" @click="toStepTwo" :disabled="!((searchEngine))">next<v-icon>chevron_right</v-icon></v-btn>
+      <v-btn small color="primary" @click="toStepTwo">next<v-icon>chevron_right</v-icon></v-btn>
     </v-card-actions>
     </v-card>
   </v-stepper-content>
 
   <v-stepper-step :complete="step > 2" step="2">
     Upload Files
-    <div v-if="searchEngine='MaxQuant'">
+    <div v-if="searchEngine=='MaxQuant'">
       <small>msms.txt and RAW file.</small>
     </div>
-    <div v-if="searchEngine='MSFragger'">
+    <div v-if="searchEngine=='MSFragger'">
       <small>pepXML files and RAW file.</small>
     </div>
-    <div v-if="searchEngine='Sage'">
+    <div v-if="searchEngine=='Sage'">
       <small>psm.tsv and RAW file.</small>
     </div>
   </v-stepper-step>
   <v-stepper-content step="2">
-    <div v-if="searchEngine='MaxQuant'">
-      <Upload filetype="msms.txt" filesuffix=".txt" :taskid="taskid" hinttext="MaxQuant's msms.txt from a finished search. Note, amino acid U or O are not supported."></Upload>
+    <div v-if="searchEngine=='MaxQuant'">
+      <Upload filetype="msms.txt" filesuffix=".txt" v-bind:sizelimit=10000 hinttext="MaxQuant's msms.txt from a finished search. Note, amino acid U or O are not supported."></Upload>
     </div>
-    <div v-if="searchEngine='MSFragger'">
-      <MultiUpload filetype="pepXML" filesuffix=".pepXML" :taskid="taskid" hinttext="MSFragger .pepXML files generated during the search"></MultiUpload>
+    <div v-if="searchEngine=='MSFragger'">
+      <MultiUpload filetype="pepXML" filesuffix=".pepXML" v-bind:sizelimit=10000 hinttext="MSFragger .pepXML files generated during the search"></MultiUpload>
     </div>
-    <div v-if="searchEngine='Sage'">
-      <Upload filetype="results.sage.tsv" filesuffix=".tsv" :taskid="taskid" hinttext="Sage search results."></Upload>
+    <div v-if="searchEngine=='Sage'">
+      <Upload filetype="results.sage.tsv" filesuffix=".tsv" v-bind:sizelimit=10000 hinttext="Sage search results."></Upload>
     </div>
-    <MultiUpload filetype="RAW" filesuffix=".RAW,.raw,.zip" v-bind:sizelimit=6000 :taskid="taskid" hinttext="RAW file that was searched."></MultiUpload>
+    <Upload filetype="RAW" filesuffix=".RAW,.raw,.zip" v-bind:sizelimit=10000 hinttext="RAW file that was searched."></Upload>
 
     <v-card flat>   
     <v-card-actions>
@@ -79,7 +77,7 @@
     Model
     <small>Select intensity and iRT model for prediction</small>
   </v-stepper-step>  
-  <v-stepper-content step="2">
+  <v-stepper-content step="3">
   <v-card flat>
     <div v-if="modelIntensityList.length>0">
       Intensity prediction model
@@ -106,7 +104,7 @@
 
   <v-card-actions>
   <v-spacer></v-spacer>
-  <v-btn small color="accent" @click="step = 2"><v-icon>chevron_left</v-icon>back</v-btn>
+  <v-btn small color="accent" @click="step = 3"><v-icon>chevron_left</v-icon>back</v-btn>
   <v-btn small color="primary" @click="toStepFour" :disabled="!((modelIRTName||modelIRTList.length==0)&&(modelIntensityName||modelIntensityList.length==0))">next<v-icon>chevron_right</v-icon></v-btn>
   </v-card-actions>
   </v-card> 
@@ -171,6 +169,8 @@ import Upload from '@/components/Upload.vue'
 import Submit from '@/components/Submit.vue'
 import Info from '@/components/Info.vue'
 import MultiUpload from '@/components/MultiUpload.vue'
+import Cookies from 'universal-cookie';
+
 
 
 export default {
@@ -181,22 +181,24 @@ export default {
       step: 1,
       modelIntensityName: false,
       modelIntensityList: false,
-      searchEngineList: false,
+      searchEngineList: [{'name':'MaxQuant'},{'name':'MSFragger'},{'name':'Sage'}],
       modelIRTName: false,
       modelIRTList: false,
       tag: false,
-      searchEngine: false,
+      searchEngine: "MaxQuant",
+      testApiC: false,
     }
   },
   computed: {
     doneUploads: function () {
       let uploads = this.$store.state.task.uploads;
       return uploads['msms.txt'] && uploads.RAW;
-    }
+    },
   },
   methods: {
     toStepTwo: function (){
       this.$store.commit('changeSearchEngine', this.searchEngine);
+      console.log(this.searchEngine)
       this.step = 2;
     },
     toStepFour: function (){
@@ -214,34 +216,14 @@ export default {
       this.step = 5;
     },
     setModels: function(response){
-      let modelIntensityLists = response.data.models.intensities;
-      let modelIRTLists = response.data.models.iRT;
-      this.modelIRTList = [];
-      this.modelIntensityList = [];
-      this.searchEngineList = ['MaxQuant','MSFragger','Sage'];
-      for (let i = 0; i < modelIntensityLists.length; i++){
-        //if(modelIntensityLists[i].enabled.rescoring)
-        this.modelIntensityList.push(modelIntensityLists[i]);
-      }
-      for (let i = 0; i < modelIRTLists.length; i++){
-        //if(modelIRTLists[i].enabled.rescoring)
-        this.modelIRTList.push(modelIRTLists[i]);
-      }
-      let that = this;
-      if(this.modelIntensityList.length>0) {
-        this.modelIntensityList.forEach(function (item) {
-          if (item.default) that.modelIntensityName = item.name;
-        });
-      }
-      if(this.modelIRTList.length>0) {
-        this.modelIRTList.forEach(function (item) {
-          if (item.default) that.modelIRTName = item.name;
-        });
-      }
+      this.modelIntensityList = response.data.intensity;
+      this.modelIRTList = response.data.irt;
+      this.modelIntensityName = this.modelIntensityList[0].name
+      this.modelIRTName = this.modelIRTList[0].name
     }
   },
   mounted() {
-    let modelsUrl = '/prosit/api/models.xsjs';
+    let modelsUrl = process.env.VUE_APP_API_URL +'/api/v1/getModels';
     axios.get(modelsUrl).then(this.setModels);
   }
 }

ui/src/components/MultiUpload.vue

@@ -80,7 +80,7 @@ export default {
     return {
       files: [],
       progress: 0,
-      baseurl: '/prosit/api/upload.xsjs',
+      baseurl: process.env.VUE_APP_API_URL +'/api/v1/uploadFile',
       file: null,
       filename: this.filetype,
       requesttoken: axios.CancelToken.source()
@@ -168,15 +168,15 @@ export default {
       formData.append('file', this.file.file);
       this.requesttoken = axios.CancelToken.source();
 
-      await axios.post(
+      axios.post(
         this.baseurl,
         formData,
         {
-          params: { datasetId: this.$store.state.taskID },
+          params: {'hashInput': self.$store.getters.getTask.hashId},
           headers: { 'Content-Type': 'multipart/form-data' },
-          onUploadProgress: ( progressEvent ) => {
-            file.progress = parseInt( Math.round( ( progressEvent.loaded * 100 ) / progressEvent.total ) );
-          },
+          onUploadProgress: function( progressEvent ) {
+            this.progress = parseInt( Math.round( ( progressEvent.loaded * 100 ) / progressEvent.total ) );
+          }.bind(this),
           cancelToken: this.requesttoken.token
         }
       ).then(() => {