diff --git a/EC50Histogram.vue b/EC50Histogram.vue
index 8e52b26..d812473 100644
--- a/EC50Histogram.vue
+++ b/EC50Histogram.vue
@@ -1,5 +1,5 @@
 <template>
-  <histogram 
+  <histogram
     v-if="chartData"
     id="ec50Histogram"
     :chartData="chartData"
@@ -10,94 +10,102 @@
     :minWidth="minWidth"
     :title="title"
     :xlabel="xlabel"
-    />
+  />
 </template>
 
 <script>
-import axios from 'axios'
-import histogram from '@/vue-d3-components/GenericHistogram'
+import axios from "axios";
+import histogram from "@/vue-d3-components/GenericHistogram";
 
 export default {
-  name: 'ec50histogram',
+  name: "ec50histogram",
   components: {
-    histogram: histogram
+    histogram: histogram,
   },
   props: {
     minWidth: {
-        type: Number,
-        default: 200
+      type: Number,
+      default: 200,
     },
     minHeight: {
-        type: Number,
-        default: 200
+      type: Number,
+      default: 200,
     },
     title: {
-        type: String,
-        default: ''
+      type: String,
+      default: "",
     },
     xlabel: {
-        type: String,
-        default: ''
+      type: String,
+      default: "",
     },
     sModelIds: {
-        type: String,
-        default: ''
+      type: String,
+      default: "",
     },
     selectedDataset: {
-        type: Object,
-        default: null
+      type: Object,
+      default: null,
     },
     selectedLines: {
-        type: Array,
-        default: null
+      type: Array,
+      default: null,
     },
     minDose: {
-        type: Number,
-        default: 1e-20
+      type: Number,
+      default: 1e-20,
     },
     maxDose: {
-        type: Number,
-        default: 1e20
-    }
+      type: Number,
+      default: 1e20,
+    },
   },
   data: function () {
     return {
-      chartData: null
-    }
+      chartData: null,
+    };
   },
   watch: {
     sModelIds: function () {
-      this.getData()
+      this.getData();
     },
     selectedDataset: function () {
-      this.getData()
-    }
+      this.getData();
+    },
   },
   methods: {
-    getData: function () {  
-      let that = this
-      let urlCurveData = this.$store.state.host + '/proteomicsdb/logic/ptmCurves/getEC50Data.xsjs'
+    getData: function () {
+      let that = this;
+      let urlCurveData =
+        this.$store.state.host +
+        "/proteomicsdb/logic/ptmCurves/getEC50Data.xsjs";
       if (this.selectedDataset) {
-        axios.get(urlCurveData, {
-          params: {
-            experiment_design_id: this.selectedDataset.experimentDesignId,
-            min_dose: this.selectedDataset.minDose * this.getDoseUnitMultiplier(this.selectedDataset),
-            max_dose: this.selectedDataset.maxDose * this.getDoseUnitMultiplier(this.selectedDataset)
-          }})
-          .then(function (response) {
-            that.chartData = response.data
+        axios
+          .get(urlCurveData, {
+            params: {
+              experiment_design_id: this.selectedDataset.experimentDesignId,
+              min_dose:
+                this.selectedDataset.minDose *
+                this.getDoseUnitMultiplier(this.selectedDataset),
+              max_dose:
+                this.selectedDataset.maxDose *
+                this.getDoseUnitMultiplier(this.selectedDataset),
+            },
           })
+          .then(function (response) {
+            that.chartData = response.data;
+          });
       } else {
-        this.chartData = null
+        this.chartData = null;
       }
     },
-    getDoseUnitMultiplier: function(dataset) {
+    getDoseUnitMultiplier: function (dataset) {
       if (dataset.doseUnit === "nanomolar") {
         return 1e-9;
       } else {
         return 1.0;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
diff --git a/GeneFDRGraph.vue b/GeneFDRGraph.vue
index 92786c4..ab9e2cd 100644
--- a/GeneFDRGraph.vue
+++ b/GeneFDRGraph.vue
@@ -1,45 +1,45 @@
 <template>
   <fdrplot
-  ref='fdrRef'
-  id='geneFDR'
-  :height='"300px"'
-  :data='geneFdrModel'
-  :targetName='targetName'
-  :targetPosition='targetScore'
-  :decoyPosition='decoyScore'
-  :enrichment='enrichment'
-  :qValue='qValue'
-  :xAxisLabel='"protein score (best Q-score)"'
-  :yAxisLabel='"# of proteins"'
+    ref="fdrRef"
+    id="geneFDR"
+    :height="'300px'"
+    :data="geneFdrModel"
+    :targetName="targetName"
+    :targetPosition="targetScore"
+    :decoyPosition="decoyScore"
+    :enrichment="enrichment"
+    :qValue="qValue"
+    :xAxisLabel="'protein score (best Q-score)'"
+    :yAxisLabel="'# of proteins'"
   />
 </template>
 
 <script>
-import axios from 'axios'
-import fdrplot from '@/vue-d3-components/FDRGraph'
+import axios from "axios";
+import fdrplot from "@/vue-d3-components/FDRGraph";
 
 export default {
-  name: 'geneFdrPlot',
+  name: "geneFdrPlot",
   components: {
-    fdrplot: fdrplot
+    fdrplot: fdrplot,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 400
+      default: 400,
     },
     minHeight: {
       type: Number,
-      default: 400
+      default: 400,
     },
     proteinId: {
       type: String,
-      default: null
+      default: null,
     },
     targetName: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   data: function () {
     return {
@@ -47,48 +47,52 @@ export default {
       targetScore: null,
       decoyScore: null,
       enrichment: null,
-      qValue: null
-    }
-  },
-  computed: {
-  },
-  watch: {
+      qValue: null,
+    };
   },
+  computed: {},
+  watch: {},
   methods: {
-    getData: function () {  
-        let that = this
+    getData: function () {
+      let that = this;
 
-        let urlDatasets = this.$store.state.host+'/proteomicsdb/logic/fdr/getGeneFDR.xsjs'
-        axios.get(urlDatasets, {
+      let urlDatasets =
+        this.$store.state.host + "/proteomicsdb/logic/fdr/getGeneFDR.xsjs";
+      axios
+        .get(urlDatasets, {
           params: {
-            proteinId: this.proteinId
-        }})
-        .then(function (response) {
-          that.geneFdrModel = response.data
+            proteinId: this.proteinId,
+          },
         })
+        .then(function (response) {
+          that.geneFdrModel = response.data;
+        });
     },
-    getGeneScores: function () {  
-        let that = this
+    getGeneScores: function () {
+      let that = this;
 
-        let urlDatasets = this.$store.state.host+'/proteomicsdb/logic/fdr/getGeneFDRScore.xsjs'
-        axios.get(urlDatasets, {
+      let urlDatasets =
+        this.$store.state.host + "/proteomicsdb/logic/fdr/getGeneFDRScore.xsjs";
+      axios
+        .get(urlDatasets, {
           params: {
-            proteinId: this.proteinId
-        }})
-        .then(function (response) {
-          that.targetScore = response.data.TARGET.SCORE
-          that.decoyScore = response.data.DECOY.SCORE
-          that.enrichment = response.data.enrichment
-          that.qValue = response.data.Q_VALUE
+            proteinId: this.proteinId,
+          },
         })
+        .then(function (response) {
+          that.targetScore = response.data.TARGET.SCORE;
+          that.decoyScore = response.data.DECOY.SCORE;
+          that.enrichment = response.data.enrichment;
+          that.qValue = response.data.Q_VALUE;
+        });
     },
-    getSVG: function() {
+    getSVG: function () {
       return this.$refs.fdrRef.getSVG();
-    }
+    },
   },
   mounted() {
-    this.getData()
-    this.getGeneScores()
-  }
-}
+    this.getData();
+    this.getGeneScores();
+  },
+};
 </script>
diff --git a/IntensityHistogram.vue b/IntensityHistogram.vue
index 05e5f5b..634e76d 100644
--- a/IntensityHistogram.vue
+++ b/IntensityHistogram.vue
@@ -1,5 +1,5 @@
 <template>
-  <histogram 
+  <histogram
     v-if="chartData"
     id="intensityHistogram"
     :chartData="chartData"
@@ -8,77 +8,81 @@
     :minWidth="minWidth"
     :title="title"
     :xlabel="xlabel"
-    />
+  />
 </template>
 
 <script>
-import axios from 'axios'
-import histogram from '@/vue-d3-components/GenericHistogram'
+import axios from "axios";
+import histogram from "@/vue-d3-components/GenericHistogram";
 
 export default {
-  name: 'intensityhistogram',
+  name: "intensityhistogram",
   components: {
-    histogram: histogram
+    histogram: histogram,
   },
   props: {
     minWidth: {
-        type: Number,
-        default: 200
+      type: Number,
+      default: 200,
     },
     minHeight: {
-        type: Number,
-        default: 200
+      type: Number,
+      default: 200,
     },
     title: {
-        type: String,
-        default: ''
+      type: String,
+      default: "",
     },
     xlabel: {
-        type: String,
-        default: ''
+      type: String,
+      default: "",
     },
     sModelIds: {
-        type: String,
-        default: ''
+      type: String,
+      default: "",
     },
     selectedDataset: {
-        type: Object,
-        default: null
+      type: Object,
+      default: null,
     },
     selectedLines: {
-        type: Array,
-        default: null
-    }
+      type: Array,
+      default: null,
+    },
   },
   data: function () {
     return {
-      chartData: null
-    }
+      chartData: null,
+    };
   },
   watch: {
     sModelIds: function () {
-      this.getData()
+      this.getData();
     },
     selectedDataset: function () {
-      this.getData()
-    }
+      this.getData();
+    },
   },
   methods: {
-    getData: function () {  
-      let that = this
-      let urlCurveData = this.$store.state.host + '/proteomicsdb/logic/ptmCurves/getIntensityData.xsjs'
+    getData: function () {
+      let that = this;
+      let urlCurveData =
+        this.$store.state.host +
+        "/proteomicsdb/logic/ptmCurves/getIntensityData.xsjs";
       if (this.selectedDataset) {
-        axios.get(urlCurveData, {
-          params: {
-            experiment_design_id: this.selectedDataset.experimentDesignId
-          }})
-          .then(function (response) {
-            that.chartData = response.data
+        axios
+          .get(urlCurveData, {
+            params: {
+              experiment_design_id: this.selectedDataset.experimentDesignId,
+            },
           })
+          .then(function (response) {
+            that.chartData = response.data;
+          });
       } else {
-        this.chartData = null
+        this.chartData = null;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
diff --git a/InteractionWrapper.vue b/InteractionWrapper.vue
index d03fdbc..dfa720b 100644
--- a/InteractionWrapper.vue
+++ b/InteractionWrapper.vue
@@ -4,16 +4,18 @@
       <v-col cols="3">
         <v-card class="ma-1">
           <v-tabs
-                v-model="UiModel.tabIndex"
-                grow
-                dense
-                dark
-                :background-color="$store.state.selectedOrganismShown.secondaryColor"
-                >
-                <v-tabs-slider :color="$store.state.selectedOrganismShown.primaryColor"></v-tabs-slider>
-            <v-tab href="#tab-0">
-              Relations
-            </v-tab>
+            v-model="UiModel.tabIndex"
+            grow
+            dense
+            dark
+            :background-color="
+              $store.state.selectedOrganismShown.secondaryColor
+            "
+          >
+            <v-tabs-slider
+              :color="$store.state.selectedOrganismShown.primaryColor"
+            ></v-tabs-slider>
+            <v-tab href="#tab-0"> Relations </v-tab>
             <v-tab href="#tab-1" :disabled="!UiModel.visibleNode">
               Node information
             </v-tab>
@@ -23,189 +25,428 @@
             <v-tabs-items v-model="UiModel.tabIndex">
               <v-tab-item :value="'tab-0'">
                 <v-treeview
-                          :items="RelationTypesModel" 
-                          item-children="Children"
-                          item-text="Label"
-                          return-object
-                          dense style="overflow-y: auto; max-height:500px"
-                                >
-                                <template v-slot:prepend="{ item }">
-                                  <v-row>
-                                    <div v-html="item.svg"></div>
-                                    <v-checkbox v-if="item.Description" v-model="item.selected" :value="item.selected" :label="item.Name" dense class="mt-0 pt-0" @change="modifiedRelationSelection = true"></v-checkbox>
-                                  </v-row>
-                                </template>
+                  :items="RelationTypesModel"
+                  item-children="Children"
+                  item-text="Label"
+                  return-object
+                  dense
+                  style="overflow-y: auto; max-height: 500px"
+                >
+                  <template v-slot:prepend="{ item }">
+                    <v-row>
+                      <div v-html="item.svg"></div>
+                      <v-checkbox
+                        v-if="item.Description"
+                        v-model="item.selected"
+                        :value="item.selected"
+                        :label="item.Name"
+                        dense
+                        class="mt-0 pt-0"
+                        @change="modifiedRelationSelection = true"
+                      ></v-checkbox>
+                    </v-row>
+                  </template>
                 </v-treeview>
                 <v-col align="middle">
-                  <v-btn :color="$store.state.selectedOrganismShown.primaryColor" :loading="loading" :disabled="loading" class="ma-2 white--text" @click="runAnalysis">
+                  <v-btn
+                    :color="$store.state.selectedOrganismShown.primaryColor"
+                    :loading="loading"
+                    :disabled="loading"
+                    class="ma-2 white--text"
+                    @click="runAnalysis"
+                  >
                     Run analysis
                     <v-icon right>fas fa-running</v-icon>
                   </v-btn>
                 </v-col>
               </v-tab-item>
               <v-tab-item :value="'tab-1'">
-                <v-expansion-panels multiple dense  style="overflow-y: auto; max-height:500px" class="pa-1">
-                  <v-expansion-panel v-for="(item, i) in NodeModel.nodes"
-                                     :key="i"
-                                     class="ma-1"
-                                     color="secondary">
-                    <v-expansion-panel-header>{{item.Label}}</v-expansion-panel-header>
+                <v-expansion-panels
+                  multiple
+                  dense
+                  style="overflow-y: auto; max-height: 500px"
+                  class="pa-1"
+                >
+                  <v-expansion-panel
+                    v-for="(item, i) in NodeModel.nodes"
+                    :key="i"
+                    class="ma-1"
+                    color="secondary"
+                  >
+                    <v-expansion-panel-header>{{
+                      item.Label
+                    }}</v-expansion-panel-header>
                     <v-expansion-panel-content>
-                      <v-divider/>
-                        <v-list dense>
-                          <v-list-item v-for="(child, j) in item.Children" :key="j">
-                            <v-list-item-title>{{child.ResourceType}}</v-list-item-title>
-                            <v-list-item-subtitle class="text-right">{{child.AccessionNumber}}</v-list-item-subtitle>
-                          </v-list-item>
-                          <v-divider/>
-                            <v-list-item>
-                              <v-list-item-title>Protein information</v-list-item-title>
-                              <v-tooltip top>
-                                <template v-slot:activator="{ on, attrs }">
-                                  <v-btn :color="$store.state.selectedOrganismShown.primaryColor" outlined fab small class="ma-1" v-bind="attrs" v-on="on" @click="proteinLinkFormatter(item.UniProtName)"><v-icon>fas fa-info</v-icon></v-btn>
-                                </template>
-                                <span>Information</span>
-                              </v-tooltip>
-                              <v-tooltip top>
-                                <template v-slot:activator="{ on, attrs }">
-                                  <v-btn :disabled="!item.Expression" :color="$store.state.selectedOrganismShown.primaryColor" outlined fab small class="ma-1" @click="proteinLinkExpressionFormatter(item.UniProtName)" v-bind="attrs" v-on="on"><v-icon>fas fa-street-view</v-icon></v-btn>
-                                </template>
-                                <span>Expression</span>
-                              </v-tooltip>
-                              <v-tooltip top>
-                                <template v-slot:activator="{ on, attrs }">
-                                  <v-btn :disabled="!item.BC" :color="$store.state.selectedOrganismShown.primaryColor" outlined fab small class="ma-1" v-bind="attrs" v-on="on"  @click="proteinLinkBcFormatter(item.UniProtName)">BC</v-btn>
-                                </template>
-                                <span>Biochemical Assays</span>
-                              </v-tooltip>
-                              <v-tooltip top>
-                                <template v-slot:activator="{ on, attrs }">
-                                  <v-btn :color="$store.state.selectedOrganismShown.primaryColor" outlined fab small class="ma-1" v-bind="attrs" v-on="on" @click="proteinLinkNodeFormatter(item.UniProtName)"><v-icon>mdi mdi-apache-kafka</v-icon></v-btn>
-                                </template>
-                                <span>Interaction Network</span>
-                              </v-tooltip>
-                            </v-list-item>
-                            <v-divider/>
-                              <v-list-item>
-                                <v-list-item-title>Protein analytics</v-list-item-title>
-                                <v-tooltip top>
-                                  <template v-slot:activator="{ on, attrs }">
-                                    <v-btn :disabled="!item.CurveFit" :color="$store.state.selectedOrganismShown.primaryColor" outlined fab small class="ma-1" v-bind="attrs" v-on="on"  @click="proteinLinkDsFormatter(item.UniProtName)"><v-icon>mdi mdi-distribute-horizontal-center</v-icon></v-btn>
-                                  </template>
-                                  <span>Dose Selectivity</span>
-                                </v-tooltip>
-                                <v-tooltip top>
-                                  <template v-slot:activator="{ on, attrs }">
-                                    <v-btn :disabled="!item.CurveFit" :color="$store.state.selectedOrganismShown.primaryColor" outlined fab small class="ma-1" v-bind="attrs" v-on="on" @click="proteinLinkDsFormatter(item.UniProtName)">CT</v-btn>
-                                  </template>
-                                  <span>Combination Treatment</span>
-                                </v-tooltip>
-                              </v-list-item>
-                            </v-list>
-                          </v-expansion-panel-content>
-                        </v-expansion-panel>
-                      </v-expansion-panels>
-                      <v-list-item class="mx-10 py-5">
-                        <v-list-item-title>Combined analytics</v-list-item-title>
-                        <v-tooltip top>
-                          <template v-slot:activator="{ on, attrs }">
-                            <v-btn :disabled="!NodeModel.bEnableHeatmap" :color="$store.state.selectedOrganismShown.primaryColor" outlined fab small class="ma-1" v-bind="attrs" v-on="on" @click="heatmapLinkFormatter(NodeModel.asUniProtNameHeatmap)"><v-icon>mdi mdi-table-column-width</v-icon></v-btn>
-                          </template>
-                          <span>Interactive Expression Heatmap</span>
-                        </v-tooltip>
-                        <v-tooltip top>
-                          <template v-slot:activator="{ on, attrs }">
-                            <v-btn :disabled="!NodeModel.bEnableCt" :color="$store.state.selectedOrganismShown.primaryColor" outlined fab small class="ma-1" v-bind="attrs" v-on="on" @click="proteinLinkCtFormatter(NodeModel.asUniProtNameCt)">CT</v-btn>
-                          </template>
-                          <span>Combination Treatment</span>
-                        </v-tooltip>
-                      </v-list-item>
-                    </v-tab-item>
-                    <v-tab-item :value="'tab-2'">
-                      <v-list-item>
-                        <v-list-item-title class="text-center" >Visible resources</v-list-item-title>
-                      </v-list-item>
-                      <v-list dense style="max-height:400px">
-                        <v-list-item v-for="(item, i) in GraphRadioModel.Radios" :key="i">
-                          <v-switch dense class="ml-7 mt-0 pt-0" v-model="item.State" :label="`${item.ResourceType} : ${!item.State ? 'hidden' : 'visible' }`" @change="onRadioSelection"></v-switch>
+                      <v-divider />
+                      <v-list dense>
+                        <v-list-item
+                          v-for="(child, j) in item.Children"
+                          :key="j"
+                        >
+                          <v-list-item-title>{{
+                            child.ResourceType
+                          }}</v-list-item-title>
+                          <v-list-item-subtitle class="text-right">{{
+                            child.AccessionNumber
+                          }}</v-list-item-subtitle>
+                        </v-list-item>
+                        <v-divider />
+                        <v-list-item>
+                          <v-list-item-title
+                            >Protein information</v-list-item-title
+                          >
+                          <v-tooltip top>
+                            <template v-slot:activator="{ on, attrs }">
+                              <v-btn
+                                :color="
+                                  $store.state.selectedOrganismShown
+                                    .primaryColor
+                                "
+                                outlined
+                                fab
+                                small
+                                class="ma-1"
+                                v-bind="attrs"
+                                v-on="on"
+                                @click="proteinLinkFormatter(item.UniProtName)"
+                                ><v-icon>fas fa-info</v-icon></v-btn
+                              >
+                            </template>
+                            <span>Information</span>
+                          </v-tooltip>
+                          <v-tooltip top>
+                            <template v-slot:activator="{ on, attrs }">
+                              <v-btn
+                                :disabled="!item.Expression"
+                                :color="
+                                  $store.state.selectedOrganismShown
+                                    .primaryColor
+                                "
+                                outlined
+                                fab
+                                small
+                                class="ma-1"
+                                @click="
+                                  proteinLinkExpressionFormatter(
+                                    item.UniProtName
+                                  )
+                                "
+                                v-bind="attrs"
+                                v-on="on"
+                                ><v-icon>fas fa-street-view</v-icon></v-btn
+                              >
+                            </template>
+                            <span>Expression</span>
+                          </v-tooltip>
+                          <v-tooltip top>
+                            <template v-slot:activator="{ on, attrs }">
+                              <v-btn
+                                :disabled="!item.BC"
+                                :color="
+                                  $store.state.selectedOrganismShown
+                                    .primaryColor
+                                "
+                                outlined
+                                fab
+                                small
+                                class="ma-1"
+                                v-bind="attrs"
+                                v-on="on"
+                                @click="
+                                  proteinLinkBcFormatter(item.UniProtName)
+                                "
+                                >BC</v-btn
+                              >
+                            </template>
+                            <span>Biochemical Assays</span>
+                          </v-tooltip>
+                          <v-tooltip top>
+                            <template v-slot:activator="{ on, attrs }">
+                              <v-btn
+                                :color="
+                                  $store.state.selectedOrganismShown
+                                    .primaryColor
+                                "
+                                outlined
+                                fab
+                                small
+                                class="ma-1"
+                                v-bind="attrs"
+                                v-on="on"
+                                @click="
+                                  proteinLinkNodeFormatter(item.UniProtName)
+                                "
+                                ><v-icon>mdi mdi-apache-kafka</v-icon></v-btn
+                              >
+                            </template>
+                            <span>Interaction Network</span>
+                          </v-tooltip>
+                        </v-list-item>
+                        <v-divider />
+                        <v-list-item>
+                          <v-list-item-title
+                            >Protein analytics</v-list-item-title
+                          >
+                          <v-tooltip top>
+                            <template v-slot:activator="{ on, attrs }">
+                              <v-btn
+                                :disabled="!item.CurveFit"
+                                :color="
+                                  $store.state.selectedOrganismShown
+                                    .primaryColor
+                                "
+                                outlined
+                                fab
+                                small
+                                class="ma-1"
+                                v-bind="attrs"
+                                v-on="on"
+                                @click="
+                                  proteinLinkDsFormatter(item.UniProtName)
+                                "
+                                ><v-icon
+                                  >mdi mdi-distribute-horizontal-center</v-icon
+                                ></v-btn
+                              >
+                            </template>
+                            <span>Dose Selectivity</span>
+                          </v-tooltip>
+                          <v-tooltip top>
+                            <template v-slot:activator="{ on, attrs }">
+                              <v-btn
+                                :disabled="!item.CurveFit"
+                                :color="
+                                  $store.state.selectedOrganismShown
+                                    .primaryColor
+                                "
+                                outlined
+                                fab
+                                small
+                                class="ma-1"
+                                v-bind="attrs"
+                                v-on="on"
+                                @click="
+                                  proteinLinkDsFormatter(item.UniProtName)
+                                "
+                                >CT</v-btn
+                              >
+                            </template>
+                            <span>Combination Treatment</span>
+                          </v-tooltip>
                         </v-list-item>
                       </v-list>
-                      <v-divider/>
-                        <v-col align="center">
-                          <v-list-item>
-                            <v-list-item-title class="text-center" >Downloadable content</v-list-item-title>
-                          </v-list-item>
-                          <v-btn dark :color="$store.state.selectedOrganismShown.primaryColor" class ="ma-2" @click="onSvgClick"><v-icon>fas fa-download</v-icon>SVG</v-btn>
-                          <v-btn dark :color="$store.state.selectedOrganismShown.primaryColor" class ="ma-2" @click="onPngClick"><v-icon>fas fa-download</v-icon>PNG</v-btn>
-                          <v-btn dark :color="$store.state.selectedOrganismShown.primaryColor" class ="ma-2" @click="onSifClick"><v-icon>fas fa-download</v-icon>SIF</v-btn>
-                          <canvas id="canvasId" style=display:none></canvas>
-                        </v-col>
-                      </v-tab-item>
-                    </v-tabs-items>
-                  </v-tabs>
-                </v-card>
-              </v-col>
-
-              <v-btn v-if="UiModel.visibleD3Button" :color="$store.state.selectedOrganismShown.primaryColor" fab outlined elevation="4" absolute style="top:140px;left:565px;" @click="onButtonPressDelete"><v-icon>far fa-trash-alt</v-icon></v-btn>
-              <v-btn v-if="UiModel.visibleD3Button" :color="$store.state.selectedOrganismShown.primaryColor" :disabled="!UiModel.enableExpansion" fab outlined elevation="4" absolute style="top:210px;left:565px;" @click="onButtonPressExpand"><v-icon>fas fa-plus</v-icon></v-btn>
-              <v-btn v-if="UiModel.visibleD3Button" :color="$store.state.selectedOrganismShown.primaryColor" fab outlined elevation="4" absolute style="top:280px;left:565px;" @click="onButtonPressUnfix"><v-icon>fas fa-unlock-alt</v-icon></v-btn>
-
-              <v-col cols="9">
-                <interactiongraph ref="interactionsgraph" 
-                                  v-if="UiModel.visibleD3Button"
-                                  :height="'600px'"
-                                  :proteinId="proteinId"
-                                  :selectedEdges="SelectionModel"
-                                  @visibleRetrieval="onRetrievalChange"
-                                  :accessionId="PlotInformationModel.AccessionId"
-                                  :sRelationTypeIds="PlotInformationModel.sRelationTypeIds"
-                                  :endpointAccession="$store.state.host+'/proteomicsdb/logic/pathways/getAccessionId.xsjs?protein_id=__parameter1__'"
-                                  :endpointMarker="$store.state.host+'/proteomicsdb/logic/pathways/getAllMarkers.xsjs'"
-                                  :endpointSuperNodeInfo="$store.state.host+'/proteomicsdb/logic/pathways/getSuperNodeInfo.xsjs'"
-                                  @disableNodeTab="disableNodeTab"
-                                  @keyChange="onKeyChange"
-                                  @showOverlay="onShowOverlay"
-                                  @enableExpansion="onEnableExpansion"
-                                  @triggerRadioSelection="onRadioSelection"
-                                  @NodeModel="onNodeSelection"
-                                  @radioButtons="setGraphRadioModel"
-                                  :heatmapLinkGenerator="heatmapLinkFormatter"
-                                  :endpoint="this.$store.state.host+'/proteomicsdb/logic/pathways/getPathwayGraphForProteinId.xsjs?accession_id=__parameter1__&amp;resource_type=__parameter2__&amp;relation_ids=__parameter3__&amp;offset=__parameter4__&amp;new_graph=__parameter5__&amp;sn_exist=__parameter6__'" />
-              </v-col>
-              <edgePopup :openDialog="isEdgeSelected" :inputData="overlayData" @closePopUp="disablePopUp"/>
-            </v-row>
-          </v-container>
+                    </v-expansion-panel-content>
+                  </v-expansion-panel>
+                </v-expansion-panels>
+                <v-list-item class="mx-10 py-5">
+                  <v-list-item-title>Combined analytics</v-list-item-title>
+                  <v-tooltip top>
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-btn
+                        :disabled="!NodeModel.bEnableHeatmap"
+                        :color="$store.state.selectedOrganismShown.primaryColor"
+                        outlined
+                        fab
+                        small
+                        class="ma-1"
+                        v-bind="attrs"
+                        v-on="on"
+                        @click="
+                          heatmapLinkFormatter(NodeModel.asUniProtNameHeatmap)
+                        "
+                        ><v-icon>mdi mdi-table-column-width</v-icon></v-btn
+                      >
+                    </template>
+                    <span>Interactive Expression Heatmap</span>
+                  </v-tooltip>
+                  <v-tooltip top>
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-btn
+                        :disabled="!NodeModel.bEnableCt"
+                        :color="$store.state.selectedOrganismShown.primaryColor"
+                        outlined
+                        fab
+                        small
+                        class="ma-1"
+                        v-bind="attrs"
+                        v-on="on"
+                        @click="
+                          proteinLinkCtFormatter(NodeModel.asUniProtNameCt)
+                        "
+                        >CT</v-btn
+                      >
+                    </template>
+                    <span>Combination Treatment</span>
+                  </v-tooltip>
+                </v-list-item>
+              </v-tab-item>
+              <v-tab-item :value="'tab-2'">
+                <v-list-item>
+                  <v-list-item-title class="text-center"
+                    >Visible resources</v-list-item-title
+                  >
+                </v-list-item>
+                <v-list dense style="max-height: 400px">
+                  <v-list-item
+                    v-for="(item, i) in GraphRadioModel.Radios"
+                    :key="i"
+                  >
+                    <v-switch
+                      dense
+                      class="ml-7 mt-0 pt-0"
+                      v-model="item.State"
+                      :label="`${item.ResourceType} : ${
+                        !item.State ? 'hidden' : 'visible'
+                      }`"
+                      @change="onRadioSelection"
+                    ></v-switch>
+                  </v-list-item>
+                </v-list>
+                <v-divider />
+                <v-col align="center">
+                  <v-list-item>
+                    <v-list-item-title class="text-center"
+                      >Downloadable content</v-list-item-title
+                    >
+                  </v-list-item>
+                  <v-btn
+                    dark
+                    :color="$store.state.selectedOrganismShown.primaryColor"
+                    class="ma-2"
+                    @click="onSvgClick"
+                    ><v-icon>fas fa-download</v-icon>SVG</v-btn
+                  >
+                  <v-btn
+                    dark
+                    :color="$store.state.selectedOrganismShown.primaryColor"
+                    class="ma-2"
+                    @click="onPngClick"
+                    ><v-icon>fas fa-download</v-icon>PNG</v-btn
+                  >
+                  <v-btn
+                    dark
+                    :color="$store.state.selectedOrganismShown.primaryColor"
+                    class="ma-2"
+                    @click="onSifClick"
+                    ><v-icon>fas fa-download</v-icon>SIF</v-btn
+                  >
+                  <canvas id="canvasId" style="display: none"></canvas>
+                </v-col>
+              </v-tab-item>
+            </v-tabs-items>
+          </v-tabs>
+        </v-card>
+      </v-col>
+
+      <v-btn
+        v-if="UiModel.visibleD3Button"
+        :color="$store.state.selectedOrganismShown.primaryColor"
+        fab
+        outlined
+        elevation="4"
+        absolute
+        style="top: 140px; left: 565px"
+        @click="onButtonPressDelete"
+        ><v-icon>far fa-trash-alt</v-icon></v-btn
+      >
+      <v-btn
+        v-if="UiModel.visibleD3Button"
+        :color="$store.state.selectedOrganismShown.primaryColor"
+        :disabled="!UiModel.enableExpansion"
+        fab
+        outlined
+        elevation="4"
+        absolute
+        style="top: 210px; left: 565px"
+        @click="onButtonPressExpand"
+        ><v-icon>fas fa-plus</v-icon></v-btn
+      >
+      <v-btn
+        v-if="UiModel.visibleD3Button"
+        :color="$store.state.selectedOrganismShown.primaryColor"
+        fab
+        outlined
+        elevation="4"
+        absolute
+        style="top: 280px; left: 565px"
+        @click="onButtonPressUnfix"
+        ><v-icon>fas fa-unlock-alt</v-icon></v-btn
+      >
+
+      <v-col cols="9">
+        <interactiongraph
+          ref="interactionsgraph"
+          v-if="UiModel.visibleD3Button"
+          :height="'600px'"
+          :proteinId="proteinId"
+          :selectedEdges="SelectionModel"
+          @visibleRetrieval="onRetrievalChange"
+          :accessionId="PlotInformationModel.AccessionId"
+          :sRelationTypeIds="PlotInformationModel.sRelationTypeIds"
+          :endpointAccession="
+            $store.state.host +
+            '/proteomicsdb/logic/pathways/getAccessionId.xsjs?protein_id=__parameter1__'
+          "
+          :endpointMarker="
+            $store.state.host +
+            '/proteomicsdb/logic/pathways/getAllMarkers.xsjs'
+          "
+          :endpointSuperNodeInfo="
+            $store.state.host +
+            '/proteomicsdb/logic/pathways/getSuperNodeInfo.xsjs'
+          "
+          @disableNodeTab="disableNodeTab"
+          @keyChange="onKeyChange"
+          @showOverlay="onShowOverlay"
+          @enableExpansion="onEnableExpansion"
+          @triggerRadioSelection="onRadioSelection"
+          @NodeModel="onNodeSelection"
+          @radioButtons="setGraphRadioModel"
+          :heatmapLinkGenerator="heatmapLinkFormatter"
+          :endpoint="
+            this.$store.state.host +
+            '/proteomicsdb/logic/pathways/getPathwayGraphForProteinId.xsjs?accession_id=__parameter1__&amp;resource_type=__parameter2__&amp;relation_ids=__parameter3__&amp;offset=__parameter4__&amp;new_graph=__parameter5__&amp;sn_exist=__parameter6__'
+          "
+        />
+      </v-col>
+      <edgePopup
+        :openDialog="isEdgeSelected"
+        :inputData="overlayData"
+        @closePopUp="disablePopUp"
+      />
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-import axios from 'axios'
-import utils from '@/vue-d3-component-wrappers/common-lib/Utils.js'
-import edgePopup from '@/views/popup/InteractionNetworkEdgeOverlay'
-import interactiongraph from '@/vue-d3-components/InteractionNetwork'
+import axios from "axios";
+import utils from "@/vue-d3-component-wrappers/common-lib/Utils.js";
+import edgePopup from "@/views/popup/InteractionNetworkEdgeOverlay";
+import interactiongraph from "@/vue-d3-components/InteractionNetwork";
 
 export default {
-  name: 'proteinInteractionGraph',
+  name: "proteinInteractionGraph",
   components: {
     interactiongraph: interactiongraph,
-    edgePopup: edgePopup
+    edgePopup: edgePopup,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 400
+      default: 400,
     },
     minHeight: {
       type: Number,
-      default: 400
+      default: 400,
     },
     proteinId: {
       type: String,
-      default: null
+      default: null,
     },
     proteinAccession: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   data: function () {
     return {
@@ -218,36 +459,40 @@ export default {
       tab: 0,
       PlotInformationModel: {
         proteinId: this.proteinId,
-        visible: false
+        visible: false,
       },
-      overlayData: [{
-        Source: '',
-        Destination: '',
-        Relations: []
-      },
-      {
-        Source: '',
-        Destination: '',
-        Relations: []
-      }],
+      overlayData: [
+        {
+          Source: "",
+          Destination: "",
+          Relations: [],
+        },
+        {
+          Source: "",
+          Destination: "",
+          Relations: [],
+        },
+      ],
       UiModel: {
         visibleD3Button: false,
         visibleEdge: false,
         visibleNode: false,
-        tabIndex: 'tab-0',
+        tabIndex: "tab-0",
         isRendered: false,
         visibleRetrieval: false,
-        canvasHidden: '<canvas id=hiddenPNG style=display:none />'
+        canvasHidden: "<canvas id=hiddenPNG style=display:none />",
       },
       SelectionModel: [],
       GraphRadioModel: { Radios: [] },
       NodeModel: [],
       modifiedRelationSelection: false,
-      svgCss: [require('@/vue-d3-components/d3v4-selectable-zoomable-force-directed-graph.css.prdb')]
-    }
+      svgCss: [
+        require("@/vue-d3-components/d3v4-selectable-zoomable-force-directed-graph.css.prdb"),
+      ],
+    };
   },
   watch: {
-/*    loader () {
+    /*    loader () {
       const l = this.loader
       this[l] = !this[l]
 
@@ -257,60 +502,111 @@ export default {
     },*/
   },
   methods: {
-    getAccessionId: function() {
+    getAccessionId: function () {
       var that = this;
-      axios.get(this.$store.state.host+'/proteomicsdb/logic/pathways/getAccessionId.xsjs', {params: {protein_id: that.proteinId}}).then(function (response) {
-        that.PlotInformationModel.AccessionId = response.data.AccessionId;
-      })
+      axios
+        .get(
+          this.$store.state.host +
+            "/proteomicsdb/logic/pathways/getAccessionId.xsjs",
+          { params: { protein_id: that.proteinId } }
+        )
+        .then(function (response) {
+          that.PlotInformationModel.AccessionId = response.data.AccessionId;
+        });
     },
-    getRelations: function() {
+    getRelations: function () {
       var that = this;
       this.modifiedRelationSelection = true;
-      axios.get(this.$store.state.host+'/proteomicsdb/logic/pathways/getAllRelationTypes.xsjs', {}).then(function (response) {
-        var aRelationTypes = response.data;
-        aRelationTypes = aRelationTypes.map(function(dataset) {
-          dataset.Children = dataset.Children.map(function(elements) {
-            elements.value = elements.Name;
-            elements.selected = elements.Selected > 0;
-            elements.cheatCss = 'sapInteractionCheckbox' + elements.Level;
-            var xDistance = elements.Level * 30 + 10;
-            var svgConstructStart = '<svg height="21" width="' + xDistance + '">';
-            var svgConstructStop = '</svg>';
-            // CHEAT is necessary  for unique ids in the document
-            var marker_base = '<marker id="CHEAT__ArrowTypeId__" viewBox="-10 -10 20 20" refX="0" refY="0" markerWidth="6" markerHeight="6" orient="auto"><path transform="scale(1)" fill="__ArrowColour__" d="__Marker__"></path></marker>';
-
-            var marker = elements.EndArrowTypeId ? marker_base.replace('__ArrowTypeId__', elements.EndArrowTypeId).replace('__ArrowColour__', elements.EndArrowColour).replace('__Marker__', elements.EndMarker) : '';
-
-            marker += elements.StartArrowTypeId ? marker_base.replace('__ArrowTypeId__', elements.StartArrowTypeId).replace('__ArrowColour__', elements.StartArrowColour).replace('__Marker__', elements.StartMarker) : '';
-            marker += elements.MidArrowTypeId ? marker_base.replace('__ArrowTypeId__', elements.MidArrowTypeId).replace('__ArrowColour__', elements.MidArrowColour).replace('__Marker__', elements.MidMarker) : '';
-
-            var defs = '<defs>' + marker + '</defs>';
-            var marker_mid = elements.MidArrowTypeId ? ' marker-mid="url(#CHEAT__MidArrowTypeId__)" '.replace('__MidArrowTypeId__', elements.MidArrowTypeId) : '';
-            var marker_end = elements.EndArrowTypeId ? ' marker-end="url(#CHEAT__EndArrowTypeId__)" '.replace('__EndArrowTypeId__', elements.EndArrowTypeId) : '';
-            var marker_start = elements.StartArrowTypeId ? ' marker-mid="url(#CHEAT__StartArrowTypeId__)" '.replace('__StartArrowTypeId__', elements.StartArrowTypeId) : '';
-            var path_base = '<path ' + marker_mid + marker_end + marker_start + ' class="linkRef" refY="-50" stroke="black" stroke-width="3px" d="M10,10L20,10L30,10"></path>';
-            var path = path_base.replace('__ArrowTypeId__', elements.ArrowTypeId);
-
-            elements.svg = svgConstructStart + defs + path + svgConstructStop;
-            return elements;
+      axios
+        .get(
+          this.$store.state.host +
+            "/proteomicsdb/logic/pathways/getAllRelationTypes.xsjs",
+          {}
+        )
+        .then(function (response) {
+          var aRelationTypes = response.data;
+          aRelationTypes = aRelationTypes.map(function (dataset) {
+            dataset.Children = dataset.Children.map(function (elements) {
+              elements.value = elements.Name;
+              elements.selected = elements.Selected > 0;
+              elements.cheatCss = "sapInteractionCheckbox" + elements.Level;
+              var xDistance = elements.Level * 30 + 10;
+              var svgConstructStart =
+                '<svg height="21" width="' + xDistance + '">';
+              var svgConstructStop = "</svg>";
+              // CHEAT is necessary  for unique ids in the document
+              var marker_base =
+                '<marker id="CHEAT__ArrowTypeId__" viewBox="-10 -10 20 20" refX="0" refY="0" markerWidth="6" markerHeight="6" orient="auto"><path transform="scale(1)" fill="__ArrowColour__" d="__Marker__"></path></marker>';
+
+              var marker = elements.EndArrowTypeId
+                ? marker_base
+                    .replace("__ArrowTypeId__", elements.EndArrowTypeId)
+                    .replace("__ArrowColour__", elements.EndArrowColour)
+                    .replace("__Marker__", elements.EndMarker)
+                : "";
+
+              marker += elements.StartArrowTypeId
+                ? marker_base
+                    .replace("__ArrowTypeId__", elements.StartArrowTypeId)
+                    .replace("__ArrowColour__", elements.StartArrowColour)
+                    .replace("__Marker__", elements.StartMarker)
+                : "";
+              marker += elements.MidArrowTypeId
+                ? marker_base
+                    .replace("__ArrowTypeId__", elements.MidArrowTypeId)
+                    .replace("__ArrowColour__", elements.MidArrowColour)
+                    .replace("__Marker__", elements.MidMarker)
+                : "";
+
+              var defs = "<defs>" + marker + "</defs>";
+              var marker_mid = elements.MidArrowTypeId
+                ? ' marker-mid="url(#CHEAT__MidArrowTypeId__)" '.replace(
+                    "__MidArrowTypeId__",
+                    elements.MidArrowTypeId
+                  )
+                : "";
+              var marker_end = elements.EndArrowTypeId
+                ? ' marker-end="url(#CHEAT__EndArrowTypeId__)" '.replace(
+                    "__EndArrowTypeId__",
+                    elements.EndArrowTypeId
+                  )
+                : "";
+              var marker_start = elements.StartArrowTypeId
+                ? ' marker-mid="url(#CHEAT__StartArrowTypeId__)" '.replace(
+                    "__StartArrowTypeId__",
+                    elements.StartArrowTypeId
+                  )
+                : "";
+              var path_base =
+                "<path " +
+                marker_mid +
+                marker_end +
+                marker_start +
+                ' class="linkRef" refY="-50" stroke="black" stroke-width="3px" d="M10,10L20,10L30,10"></path>';
+              var path = path_base.replace(
+                "__ArrowTypeId__",
+                elements.ArrowTypeId
+              );
+
+              elements.svg = svgConstructStart + defs + path + svgConstructStop;
+              return elements;
+            });
+            return dataset;
           });
-          return dataset;
-        });
 
-        that.RelationTypesModel = aRelationTypes;
-
-      })
+          that.RelationTypesModel = aRelationTypes;
+        });
     },
-    disablePopUp: function() {
+    disablePopUp: function () {
       this.isEdgeSelected = false;
     },
     onEnableExpansion: function onEnableExpansion(oEvent) {
       var bEnable = oEvent.bEnable;
       this.UiModel.enableExpansion = bEnable;
     },
-    runAnalysis: function(){
-      if(this.modifiedRelationSelection){
-        this.loader = 'loading';
+    runAnalysis: function () {
+      if (this.modifiedRelationSelection) {
+        this.loader = "loading";
         const l = this.loader;
         this[l] = !this[l];
         this.modifiedRelationSelection = false;
@@ -318,15 +614,15 @@ export default {
       this.UiModel.visibleD3Button = true;
       this.UiModel.visibleEdge = false;
       this.UiModel.visibleNode = false;
-      this.UiModel.tabIndex = 'tab-0';
+      this.UiModel.tabIndex = "tab-0";
       this.UiModel.isRendered = false;
       this.UiModel.visibleRetrieval = false;
       var sRelationTypeIds = this.getSelectedRelationTypeIds();
       this.PlotInformationModel.sRelationTypeIds = sRelationTypeIds;
       this.PlotInformationModel.visible = true;
-      this.$emit('dataLoaded',null);
+      this.$emit("dataLoaded", null);
     },
-    onRetrievalChange: function(data){
+    onRetrievalChange: function (data) {
       this.UiModel.visibleRetrieval = data.value;
       const l = this.loader;
       this[l] = false;
@@ -337,11 +633,11 @@ export default {
       var iTabId = oEvent.iTabId;
       this.UiModel.visibleEdge = iTabId === 1 ? false : true;
       this.UiModel.visibleNode = iTabId === 2 ? false : true;
-      this.UiModel.tabIndex = "tab-"+iTabId;
+      this.UiModel.tabIndex = "tab-" + iTabId;
     },
 
     nTitleFormatter: function proteinTitleFormatter(name, id) {
-      return name + ' (' + id + ')';
+      return name + " (" + id + ")";
     },
 
     onCheckBoxChange: function onCheckBoxChange() {},
@@ -350,8 +646,8 @@ export default {
       var bDisableNode = oEvent.bDisable;
       this.UiModel.visibleNode = !bDisableNode;
       this.NodeModel = [];
-      if ( this.UiModel.tabIndex === 'tab-1') {
-        this.UiModel.tabIndex = 'tab-0';
+      if (this.UiModel.tabIndex === "tab-1") {
+        this.UiModel.tabIndex = "tab-0";
         this.UiModel.enableExpansion = false;
       }
     },
@@ -364,21 +660,29 @@ export default {
       var sRelation_ids = oEvent.relation_ids;
       var that = this;
 
-      axios.get(this.$store.state.host+'/proteomicsdb/logic/pathways/getEdgeInfo.xsjs', {params: {
+      axios
+        .get(
+          this.$store.state.host +
+            "/proteomicsdb/logic/pathways/getEdgeInfo.xsjs",
+          {
+            params: {
               source: sSource,
               target: sTarget,
               directional: sDirectional,
               arrowtype: sArrowType,
-              relation_ids: sRelation_ids
-            }}).then(function (response) {
-              that.overlayData = response.data;
-              that.isEdgeSelected = true;
-      });
+              relation_ids: sRelation_ids,
+            },
+          }
+        )
+        .then(function (response) {
+          that.overlayData = response.data;
+          that.isEdgeSelected = true;
+        });
     },
     onSelectionModelChange: function onSelectionModelChange() {},
 
     onButtonNetwork: function onButtonNetwork() {
-      window.open('tesgt', '_blank');
+      window.open("tesgt", "_blank");
     },
     onButtonPressExpand: function onButtonPressExpand() {
       this.$refs.interactionsgraph.expandSelection();
@@ -389,117 +693,151 @@ export default {
     onButtonPressUnfix: function onButtonPressUnfix() {
       this.$refs.interactionsgraph.unfixSelection();
     },
-    onSvgClick: function() {
+    onSvgClick: function () {
       var aPlots = [];
       aPlots.push(this.$refs.interactionsgraph.getSVG());
-      utils.downloadSVGs(aPlots, 'InteractionsGraph: ', true, 'canvasId', this.svgCss);
+      utils.downloadSVGs(
+        aPlots,
+        "InteractionsGraph: ",
+        true,
+        "canvasId",
+        this.svgCss
+      );
     },
-    onPngClick: function() {
+    onPngClick: function () {
       var aPlots = [];
       aPlots.push(this.$refs.interactionsgraph.getSVG());
-      utils.downloadSVGs(aPlots, 'InteractionsGraph: ', false, 'canvasId', this.svgCss);
+      utils.downloadSVGs(
+        aPlots,
+        "InteractionsGraph: ",
+        false,
+        "canvasId",
+        this.svgCss
+      );
     },
-    onSifClick: function() {
+    onSifClick: function () {
       var aCSVRows = this.$refs.interactionsgraph.getSif();
       var sFileName = this.proteinAccession;
-      utils.downloadFile(aCSVRows, sFileName, 'sif');
+      utils.downloadFile(aCSVRows, sFileName, "sif");
     },
     proteinLinkFormatter: function proteinLinkFormatter(iProteinId) {
-      window.open('/vue/protein/'+iProteinId+'/summary', '_blank');
+      window.open("/vue/protein/" + iProteinId + "/summary", "_blank");
     },
 
     proteinLinkBcFormatter: function proteinLinkBcFormatter(iProteinId) {
-      window.open('/vue/protein/'+iProteinId+'/assay', '_blank');
+      window.open("/vue/protein/" + iProteinId + "/assay", "_blank");
     },
 
     proteinLinkNodeFormatter: function proteinLinkNodeFormatter(iProteinId) {
-      window.open('/vue/protein/'+iProteinId+'/interactions', '_blank');
+      window.open("/vue/protein/" + iProteinId + "/interactions", "_blank");
     },
 
-    proteinLinkExpressionFormatter: function proteinLinkExpressionFormatter(iProteinId) {
-      window.open('/vue/protein/'+iProteinId+'/expression', '_blank');
+    proteinLinkExpressionFormatter: function proteinLinkExpressionFormatter(
+      iProteinId
+    ) {
+      window.open("/vue/protein/" + iProteinId + "/expression", "_blank");
     },
 
     proteinLinkCtFormatter: function proteinLinkCtFormatter(asUniProtName) {
-      if (typeof asUniProtName === 'string') {
-        window.open('/vue/analytics/combinationTreatment?protein_name='+ asUniProtName, '_blank');
-      } else if (typeof asUniProtName === 'undefined') {
-        return '';
+      if (typeof asUniProtName === "string") {
+        window.open(
+          "/vue/analytics/combinationTreatment?protein_name=" + asUniProtName,
+          "_blank"
+        );
+      } else if (typeof asUniProtName === "undefined") {
+        return "";
       }
-      window.open('/vue/analytics/combinationTreatment?protein_name='+ asUniProtName.join(','), '_blank');
+      window.open(
+        "/vue/analytics/combinationTreatment?protein_name=" +
+          asUniProtName.join(","),
+        "_blank"
+      );
     },
 
     proteinLinkDsFormatter: function proteinLinkDsFormatter(sUniProtName) {
-      window.open('/vue/analytics/selectivity?protein_name=' + sUniProtName, '_blank');
+      window.open(
+        "/vue/analytics/selectivity?protein_name=" + sUniProtName,
+        "_blank"
+      );
     },
 
     // array consists of Data from D3 graph
     heatmapLinkFormatter: function heatmapLinkFormatter(asUniProtNameHeatmap) {
-      if (typeof asUniProtNameHeatmap === 'undefined') {
-        return '';
+      if (typeof asUniProtNameHeatmap === "undefined") {
+        return "";
       }
       var iTaxCode = this.$store.state.cookie;
-      window.open('/vue/analytics/expressionHeatmap?proteins=' + asUniProtNameHeatmap.join('%3B') + '&quantification=1&biologicalSource=tissue%3Bfluid&calculationMethod=0&swissprotOnly=1&noIsoforms=1&taxcode=' + iTaxCode, '_blank');
+      window.open(
+        "/vue/analytics/expressionHeatmap?proteins=" +
+          asUniProtNameHeatmap.join("%3B") +
+          "&quantification=1&biologicalSource=tissue%3Bfluid&calculationMethod=0&swissprotOnly=1&noIsoforms=1&taxcode=" +
+          iTaxCode,
+        "_blank"
+      );
     },
 
-    setGraphRadioModel: function(oData) {
+    setGraphRadioModel: function (oData) {
       this.GraphRadioModel.Radios = oData;
     },
 
     onRadioSelection: function onRadioSelection() {
       var aRadioStuff = this.GraphRadioModel.Radios;
 
-      var aShownShapes = aRadioStuff.filter(function(d) {
-        return d.State;
-      }).map(function(d) {
-        return d.Shape;
-      });
+      var aShownShapes = aRadioStuff
+        .filter(function (d) {
+          return d.State;
+        })
+        .map(function (d) {
+          return d.Shape;
+        });
       this.$refs.interactionsgraph.seek_and_hide(true, aShownShapes);
     },
 
-    onNodeSelection: function(nodes) {
+    onNodeSelection: function (nodes) {
       this.NodeModel = nodes;
     },
 
     getSelectedRelationTypeIds: function getSelectedRelationTypeIds() {
       var aRelationTypes = this.RelationTypesModel;
-      aRelationTypes = aRelationTypes.map(function(dataset) {
-        var selectedElements = dataset.Children.filter(function(element) {
+      aRelationTypes = aRelationTypes.map(function (dataset) {
+        var selectedElements = dataset.Children.filter(function (element) {
           return element.selected;
         });
-        return selectedElements.map(function(element) {
+        return selectedElements.map(function (element) {
           return element.RelationTypeId;
         });
       });
-      return aRelationTypes.reduce(function(a, b) {
-        return a.concat(b);
-      }, []).join(',');
+      return aRelationTypes
+        .reduce(function (a, b) {
+          return a.concat(b);
+        }, [])
+        .join(",");
     },
-
   },
   computed: {
-    selectedRelations: function() {
+    selectedRelations: function () {
       var aRelationTypes = this.RelationTypesModel;
-      aRelationTypes = aRelationTypes.map(function(dataset) {
-        var selectedElements = dataset.Children.filter(function(element) {
+      aRelationTypes = aRelationTypes.map(function (dataset) {
+        var selectedElements = dataset.Children.filter(function (element) {
           return element.selected;
         });
-        return selectedElements.map(function(element) {
+        return selectedElements.map(function (element) {
           return element.RelationTypeId;
         });
       });
-      return aRelationTypes.reduce(function(a, b) {
-        return a.concat(b);
-      }, []).join(',');
-
-    }
+      return aRelationTypes
+        .reduce(function (a, b) {
+          return a.concat(b);
+        }, [])
+        .join(",");
+    },
   },
   mounted() {
     this.getRelations();
     this.getAccessionId();
-  }
-}
+  },
+};
 </script>
 <style scss>
-@import '../vue-d3-components/d3v4-selectable-zoomable-force-directed-graph.css.prdb'
+@import "../vue-d3-components/d3v4-selectable-zoomable-force-directed-graph.css.prdb";
 </style>
diff --git a/ProteinExpressionBodymapWrapper.vue b/ProteinExpressionBodymapWrapper.vue
index c178e3a..73f6ec1 100644
--- a/ProteinExpressionBodymapWrapper.vue
+++ b/ProteinExpressionBodymapWrapper.vue
@@ -1,208 +1,240 @@
 <template>
   <v-card :height="height" :max-height="maxHeight">
-    <v-toolbar v-if="showToolbar" :color="color" dark class="mb-2" elevation="2" dense>
+    <v-toolbar
+      v-if="showToolbar"
+      :color="color"
+      dark
+      class="mb-2"
+      elevation="2"
+      dense
+    >
       <v-card-title>Protein Expression</v-card-title>
     </v-toolbar>
-  <bodymap id='expressionBodymap'
-    :data="bodyMapData"
-    :selectedOrganism="selectedOrganism"
-    :drawOnMount="drawOnMount"
-    @organSelected="organSelected"
-    @resetSelections="resetSelections"
-    ref="bodymap"
-    class="pt-2"
-  />
+    <bodymap
+      id="expressionBodymap"
+      :data="bodyMapData"
+      :selectedOrganism="selectedOrganism"
+      :drawOnMount="drawOnMount"
+      @organSelected="organSelected"
+      @resetSelections="resetSelections"
+      ref="bodymap"
+      class="pt-2"
+    />
   </v-card>
 </template>
 
 <script>
-import axios from 'axios';
-import bodymap from '@/vue-d3-components/Bodymap';
-import Helper from '@/vue-d3-component-wrappers/common-lib/Helper.js';
+import axios from "axios";
+import bodymap from "@/vue-d3-components/Bodymap";
+import Helper from "@/vue-d3-component-wrappers/common-lib/Helper.js";
 
 export default {
-  name: 'proteinExpressionBodymap',
+  name: "proteinExpressionBodymap",
   components: {
-    bodymap
+    bodymap,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 400
+      default: 400,
     },
     maxHeight: {
       type: String,
-      default: '750px'
+      default: "750px",
     },
     height: {
       type: String,
-      default: '750px'
+      default: "750px",
     },
     showToolbar: {
       type: Boolean,
-      default: false
+      default: false,
     },
     color: {
       type: String,
-      default: 'black'
+      default: "black",
     },
     drawOnMount: {
       type: Boolean,
-      default: false
+      default: false,
     },
     proteinId: {
       type: String,
-      default: null
+      default: null,
     },
     proteinAccession: {
       type: String,
-      default: null
+      default: null,
     },
     omicsType: {
       type: String,
-      default: null
+      default: null,
     },
     quantification: {
       type: String,
-      default: null
+      default: null,
     },
     tissue_category: {
       type: String,
-      default: null
+      default: null,
     },
     scope: {
       type: String,
-      default: null
+      default: null,
     },
     group_by_tissue: {
       type: String,
-      default: null
+      default: null,
     },
     calculation: {
       type: String,
-      default: null
+      default: null,
     },
     selectedOrganism: {
       type: Object,
-      default: () => {}
-    }
+      default: () => {},
+    },
   },
   data: function () {
     return {
-      bodyMapData: []
+      bodyMapData: [],
     };
   },
-  computed: {
-  },
+  computed: {},
   watch: {
-    omicsType: function() {
-      if (this.tissue_category && this.tissue_category !== '') {
+    omicsType: function () {
+      if (this.tissue_category && this.tissue_category !== "") {
         this.getData();
       }
     },
-    calculation: function() {
-      if(this.tissue_category && this.tissue_category !== '') {
+    calculation: function () {
+      if (this.tissue_category && this.tissue_category !== "") {
         this.getData();
       }
     },
-    tissue_category: function() {
-      if (this.tissue_category && this.tissue_category !== '') {
+    tissue_category: function () {
+      if (this.tissue_category && this.tissue_category !== "") {
         this.getData();
       }
-    }
-
+    },
   },
   methods: {
-    getData: function () {  
+    getData: function () {
       let that = this;
 
-      let urlDatasets = this.$store.state.host+'/proteomicsdb/logic/getExpressionWrapper.xsjs'
-      axios.get(urlDatasets, { params: {
-          omics: that.omicsType,
-          protein_id: that.proteinId,
-          quantification: that.quantification,
-          tissue_category: that.tissue_category,
-          scope: that.scope,
-          group_by_tissue: that.group_by_tissue,
-          calculation: that.calculation
-      }})
-      .then(function (response) {
-        that.bodyMapData = response.data;
-        that.$emit('dataLoaded', response.data);
-      })
+      let urlDatasets =
+        this.$store.state.host +
+        "/proteomicsdb/logic/getExpressionWrapper.xsjs";
+      axios
+        .get(urlDatasets, {
+          params: {
+            omics: that.omicsType,
+            protein_id: that.proteinId,
+            quantification: that.quantification,
+            tissue_category: that.tissue_category,
+            scope: that.scope,
+            group_by_tissue: that.group_by_tissue,
+            calculation: that.calculation,
+          },
+        })
+        .then(function (response) {
+          that.bodyMapData = response.data;
+          that.$emit("dataLoaded", response.data);
+        });
     },
     toggleOrgan: function (name) {
       this.$refs.bodymap.toggleOrgan(name);
     },
     resetSelections: function () {
-      this.$emit('resetSelections', null);
+      this.$emit("resetSelections", null);
     },
     organSelected: function (data) {
-      this.$emit('organSelected', data);
+      this.$emit("organSelected", data);
     },
     getSVG: function () {
       return this.$refs.bodymap.getSVG();
     },
     getCSV: function () {
       var aColumnMapping = [];
-      var title = '';
-      if (this.omicsType === 'Proteomics') {
-        aColumnMapping = [{
-          jsonProperty: 'TISSUE_ID',
-          columnName: 'Tissue ID'
-        }, {
-          jsonProperty: 'TISSUE_NAME',
-          columnName: 'Tissue'
-        }, {
-          jsonProperty: 'SAP_SYNONYM',
-          columnName: 'Tissue Synonym'
-        }, {
-          jsonProperty: 'UNNORMALIZED_INTENSITY',
-          columnName: 'Average Unnormalized Intensity'
-        }, {
-          jsonProperty: 'NORMALIZED_INTENSITY',
-          columnName: 'Average Normalized Intensity'
-        }, {
-          jsonProperty: 'MAX_NORMALIZED_INTENSITY',
-          columnName: 'Maximum Normalized Intensity'
-        }, {
-          jsonProperty: 'MIN_NORMALIZED_INTENSITY',
-          columnName: 'Minimum Normalized Intensity'
-        }, {
-          jsonProperty: 'SAMPLES',
-          columnName: 'Number of Samples'
-        }];
-        title = 'Protein Expression: ' + this.proteinAccession;
+      var title = "";
+      if (this.omicsType === "Proteomics") {
+        aColumnMapping = [
+          {
+            jsonProperty: "TISSUE_ID",
+            columnName: "Tissue ID",
+          },
+          {
+            jsonProperty: "TISSUE_NAME",
+            columnName: "Tissue",
+          },
+          {
+            jsonProperty: "SAP_SYNONYM",
+            columnName: "Tissue Synonym",
+          },
+          {
+            jsonProperty: "UNNORMALIZED_INTENSITY",
+            columnName: "Average Unnormalized Intensity",
+          },
+          {
+            jsonProperty: "NORMALIZED_INTENSITY",
+            columnName: "Average Normalized Intensity",
+          },
+          {
+            jsonProperty: "MAX_NORMALIZED_INTENSITY",
+            columnName: "Maximum Normalized Intensity",
+          },
+          {
+            jsonProperty: "MIN_NORMALIZED_INTENSITY",
+            columnName: "Minimum Normalized Intensity",
+          },
+          {
+            jsonProperty: "SAMPLES",
+            columnName: "Number of Samples",
+          },
+        ];
+        title = "Protein Expression: " + this.proteinAccession;
       } else {
-        aColumnMapping = [{
-          jsonProperty: 'TISSUE_ID',
-          columnName: 'Tissue ID'
-        }, {
-          jsonProperty: 'TISSUE_NAME',
-          columnName: 'Tissue'
-        }, {
-          jsonProperty: 'SAP_SYNONYM',
-          columnName: 'Tissue Synonym'
-        }, {
-          jsonProperty: 'NORMALIZED_INTENSITY',
-          columnName: 'Average ' + this.calculation
-        }, {
-          jsonProperty: 'MAX_NORMALIZED_INTENSITY',
-          columnName: 'Maximum ' + this.calculation
-        }, {
-          jsonProperty: 'MIN_NORMALIZED_INTENSITY',
-          columnName: 'Minimum ' + this.calculation
-        }, {
-          jsonProperty: 'NUMBER_OF_SAMPLES',
-          columnName: 'Number of Samples'
-        }];
-        title = 'mRNA Expression: ' + this.proteinAccession;
+        aColumnMapping = [
+          {
+            jsonProperty: "TISSUE_ID",
+            columnName: "Tissue ID",
+          },
+          {
+            jsonProperty: "TISSUE_NAME",
+            columnName: "Tissue",
+          },
+          {
+            jsonProperty: "SAP_SYNONYM",
+            columnName: "Tissue Synonym",
+          },
+          {
+            jsonProperty: "NORMALIZED_INTENSITY",
+            columnName: "Average " + this.calculation,
+          },
+          {
+            jsonProperty: "MAX_NORMALIZED_INTENSITY",
+            columnName: "Maximum " + this.calculation,
+          },
+          {
+            jsonProperty: "MIN_NORMALIZED_INTENSITY",
+            columnName: "Minimum " + this.calculation,
+          },
+          {
+            jsonProperty: "NUMBER_OF_SAMPLES",
+            columnName: "Number of Samples",
+          },
+        ];
+        title = "mRNA Expression: " + this.proteinAccession;
       }
-      return Helper.downloadCsvFromJson(this.bodyMapData, title, aColumnMapping);
-    }
+      return Helper.downloadCsvFromJson(
+        this.bodyMapData,
+        title,
+        aColumnMapping
+      );
+    },
   },
   mounted() {
     this.getData();
-  }
-}
+  },
+};
 </script>
diff --git a/ProteinFDRGraph.vue b/ProteinFDRGraph.vue
index cc40027..66078ba 100644
--- a/ProteinFDRGraph.vue
+++ b/ProteinFDRGraph.vue
@@ -1,45 +1,45 @@
 <template>
   <fdrplot
-  ref="fdrRef"
-  id='proteinFDR'
-  :height='"300px"'
-  :data='geneFdrModel'
-  :targetName='targetName'
-  :targetPosition='targetScore'
-  :decoyPosition='decoyScore'
-  :enrichment='enrichment'
-  :qValue='qValue'
-  :xAxisLabel='"protein score (best Q-score)"'
-  :yAxisLabel='"# of proteins"'
+    ref="fdrRef"
+    id="proteinFDR"
+    :height="'300px'"
+    :data="geneFdrModel"
+    :targetName="targetName"
+    :targetPosition="targetScore"
+    :decoyPosition="decoyScore"
+    :enrichment="enrichment"
+    :qValue="qValue"
+    :xAxisLabel="'protein score (best Q-score)'"
+    :yAxisLabel="'# of proteins'"
   />
 </template>
 
 <script>
-import axios from 'axios'
-import fdrplot from '@/vue-d3-components/FDRGraph'
+import axios from "axios";
+import fdrplot from "@/vue-d3-components/FDRGraph";
 
 export default {
-  name: 'proteinFdrPlot',
+  name: "proteinFdrPlot",
   components: {
-    fdrplot: fdrplot
+    fdrplot: fdrplot,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 400
+      default: 400,
     },
     minHeight: {
       type: Number,
-      default: 400
+      default: 400,
     },
     proteinId: {
       type: String,
-      default: null
+      default: null,
     },
     targetName: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   data: function () {
     return {
@@ -47,48 +47,57 @@ export default {
       targetScore: null,
       decoyScore: null,
       enrichment: null,
-      qValue: null
-    }
-  },
-  computed: {
-  },
-  watch: {
+      qValue: null,
+    };
   },
+  computed: {},
+  watch: {},
   methods: {
-    getData: function () {  
-        let that = this
+    getData: function () {
+      let that = this;
 
-        let urlDatasets = this.$store.state.host+'/proteomicsdb/logic/fdr/getProteinFDR.xsjs'
-        axios.get(urlDatasets, {
+      let urlDatasets =
+        this.$store.state.host + "/proteomicsdb/logic/fdr/getProteinFDR.xsjs";
+      axios
+        .get(urlDatasets, {
           params: {
-            proteinId: this.proteinId
-        }})
-        .then(function (response) {
-          that.geneFdrModel = response.data
+            proteinId: this.proteinId,
+          },
         })
+        .then(function (response) {
+          that.geneFdrModel = response.data;
+        });
     },
-    getGeneScores: function () {  
-        let that = this
+    getGeneScores: function () {
+      let that = this;
 
-        let urlDatasets = this.$store.state.host+'/proteomicsdb/logic/fdr/getProteinFDRScore.xsjs'
-        axios.get(urlDatasets, {
+      let urlDatasets =
+        this.$store.state.host +
+        "/proteomicsdb/logic/fdr/getProteinFDRScore.xsjs";
+      axios
+        .get(urlDatasets, {
           params: {
-            proteinId: this.proteinId
-        }})
-        .then(function (response) {
-          that.targetScore = response.data.TARGET ? response.data.TARGET.SCORE : undefined
-          that.decoyScore = response.data.DECOY ? response.data.DECOY.SCORE : undefined
-          that.enrichment = response.data.enrichment
-          that.qValue = response.data.Q_VALUE
+            proteinId: this.proteinId,
+          },
         })
+        .then(function (response) {
+          that.targetScore = response.data.TARGET
+            ? response.data.TARGET.SCORE
+            : undefined;
+          that.decoyScore = response.data.DECOY
+            ? response.data.DECOY.SCORE
+            : undefined;
+          that.enrichment = response.data.enrichment;
+          that.qValue = response.data.Q_VALUE;
+        });
     },
-    getSVG: function() {
+    getSVG: function () {
       return this.$refs.fdrRef.getSVG();
-    }
+    },
   },
   mounted() {
-    this.getData()
-    this.getGeneScores()
-  }
-}
+    this.getData();
+    this.getGeneScores();
+  },
+};
 </script>
diff --git a/ResponseCurve.vue b/ResponseCurve.vue
index c42ee0a..b09d7da 100644
--- a/ResponseCurve.vue
+++ b/ResponseCurve.vue
@@ -1,5 +1,5 @@
 <template>
-  <lineplot 
+  <lineplot
     v-if="responseCurveModel"
     id="ic50Plot"
     :curveParameters="responseCurveModel.parameter"
@@ -10,77 +10,83 @@
     :properties="responseCurveModel.properties"
     @update-curve-styles="updateCurveStyles"
     v-on="$listeners"
-    />
+  />
 </template>
 
 <script>
-import axios from 'axios'
-import lineplot from '@/vue-d3-components/GenericLinePlot'
+import axios from "axios";
+import lineplot from "@/vue-d3-components/GenericLinePlot";
 
 export default {
-  name: 'responsecurve',
+  name: "responsecurve",
   components: {
-    lineplot: lineplot
+    lineplot: lineplot,
   },
   props: {
     minWidth: {
-        type: Number,
-        default: 200
+      type: Number,
+      default: 200,
     },
     minHeight: {
-        type: Number,
-        default: 200
+      type: Number,
+      default: 200,
     },
     title: {
-        type: String,
-        default: ''
+      type: String,
+      default: "",
     },
     sModelIds: {
-        type: String,
-        default: ''
+      type: String,
+      default: "",
     },
     selectedDataset: {
-        type: Object,
-        default: null
+      type: Object,
+      default: null,
     },
     dataType: {
-        type: String,
-        default: 'cellSelectivity'
-    }
+      type: String,
+      default: "cellSelectivity",
+    },
   },
   data: function () {
     return {
-      responseCurveModel: null
-    }
+      responseCurveModel: null,
+    };
   },
   watch: {
     sModelIds: function () {
-      this.getData()
+      this.getData();
     },
     datasetId: function () {
-      this.getData()
-    }
+      this.getData();
+    },
   },
   methods: {
-    getData: function () {  
-      let that = this
-      let urlCurveData = this.$store.state.host+'/proteomicsdb/logic/' + this.dataType + '/getCurveData.xsjs'
-      if (this.sModelIds !== '' && this.selectedDataset) {
-        axios.get(urlCurveData, {
-          params: {
-            dr_model_ids: this.sModelIds,
-            dataset_id: this.selectedDataset.datasetId
-          }})
-          .then(function (response) {
-            that.responseCurveModel = response.data
+    getData: function () {
+      let that = this;
+      let urlCurveData =
+        this.$store.state.host +
+        "/proteomicsdb/logic/" +
+        this.dataType +
+        "/getCurveData.xsjs";
+      if (this.sModelIds !== "" && this.selectedDataset) {
+        axios
+          .get(urlCurveData, {
+            params: {
+              dr_model_ids: this.sModelIds,
+              dataset_id: this.selectedDataset.datasetId,
+            },
           })
+          .then(function (response) {
+            that.responseCurveModel = response.data;
+          });
       } else {
-        this.responseCurveModel = null
+        this.responseCurveModel = null;
       }
     },
     updateCurveStyles: function (oCurveStyleMapping) {
-      this.$emit('update-curve-styles', oCurveStyleMapping)
-    }
-  }
-}
+      this.$emit("update-curve-styles", oCurveStyleMapping);
+    },
+  },
+};
 </script>
diff --git a/SampleExpressionBars.vue b/SampleExpressionBars.vue
index 92e6ed3..33b6f97 100644
--- a/SampleExpressionBars.vue
+++ b/SampleExpressionBars.vue
@@ -1,92 +1,92 @@
 <template>
-  <v-card style="max-height:750px;">
+  <v-card style="max-height: 750px">
     <expressionbars
-          ref="expressionbarsref"
-          :data="barData"
-          :barAttributes="barAttributes"
-          :svgAttributes="svgAttributes"
-          @sampleBarSelected="barSelected"
-          />
+      ref="expressionbarsref"
+      :data="barData"
+      :barAttributes="barAttributes"
+      :svgAttributes="svgAttributes"
+      @sampleBarSelected="barSelected"
+    />
     <sampleInfoPopUp
-          :openDialog="publicSampleSelected"
-          :sampleId="selectedSampleId" 
-          :omics="omicsType"
-          @closePopUp="resetSelectedSample"
-          ></sampleInfoPopUp>
+      :openDialog="publicSampleSelected"
+      :sampleId="selectedSampleId"
+      :omics="omicsType"
+      @closePopUp="resetSelectedSample"
+    ></sampleInfoPopUp>
     <v-snackbar
-          v-model="privateAlert"
-          :color="$store.state.selectedOrganismShown.primaryColor"
-          >
-          {{ privateAlertText }}
+      v-model="privateAlert"
+      :color="$store.state.selectedOrganismShown.primaryColor"
+    >
+      {{ privateAlertText }}
 
-          <template v-slot:action="{ attrs }">
-            <v-btn
+      <template v-slot:action="{ attrs }">
+        <v-btn
           text
           class="white--text"
           v-bind="attrs"
           @click="privateAlert = false"
-          >
+        >
           Close
-            </v-btn>
-          </template>
+        </v-btn>
+      </template>
     </v-snackbar>
   </v-card>
 </template>
 
 <script>
-import expressionbars from '@/vue-d3-components/ExpressionBars';
-import sampleInfoPopUp from '@/views/popup/SampleInfoPopUp'
-import axios from 'axios';
+import expressionbars from "@/vue-d3-components/ExpressionBars";
+import sampleInfoPopUp from "@/views/popup/SampleInfoPopUp";
+import axios from "axios";
 export default {
-  name: 'proteinExpressionBodymap',
+  name: "proteinExpressionBodymap",
   components: {
     expressionbars,
-    sampleInfoPopUp
+    sampleInfoPopUp,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 400
+      default: 400,
     },
     minHeight: {
       type: Number,
-      default: 400
+      default: 400,
     },
     data: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     proteinId: {
       type: String,
-      default: null
+      default: null,
     },
     omicsType: {
       type: String,
-      default: null
+      default: null,
     },
     quantification: {
       type: String,
-      default: null
+      default: null,
     },
     tissue_category: {
       type: String,
-      default: null
+      default: null,
     },
     tissues_selected: {
       type: String,
-      default: null
+      default: null,
     },
     scope: {
       type: String,
-      default: null
+      default: null,
     },
     group_by_tissue: {
       type: String,
-      default: null
+      default: null,
     },
     calculation: {
       type: String,
-      default: null
+      default: null,
     },
   },
   data: function () {
@@ -108,24 +108,33 @@ export default {
         },
         tipsy: function tipsy(d) {
           var mouseOverLabel = d.EXPERIMENT_NAME;
-          if (d.STATUS === 'public') {
-            mouseOverLabel = mouseOverLabel + ' | ' + d.SAMPLE_NAME;
+          if (d.STATUS === "public") {
+            mouseOverLabel = mouseOverLabel + " | " + d.SAMPLE_NAME;
           }
           if (d.SAP_SYNONYM) {
-            mouseOverLabel = mouseOverLabel + '<hr>' + d.TISSUE_NAME + ' | ' + d.SAP_SYNONYM + ' <hr>Intensity: ' + d.NORMALIZED_INTENSITY
-            .toFixed(2);
+            mouseOverLabel =
+              mouseOverLabel +
+              "<hr>" +
+              d.TISSUE_NAME +
+              " | " +
+              d.SAP_SYNONYM +
+              " <hr>Intensity: " +
+              d.NORMALIZED_INTENSITY.toFixed(2);
           } else {
-            mouseOverLabel = mouseOverLabel + '<hr>' + d.TISSUE_NAME + ' <hr>Intensity: ' + d.NORMALIZED_INTENSITY.toFixed(
-            2);
+            mouseOverLabel =
+              mouseOverLabel +
+              "<hr>" +
+              d.TISSUE_NAME +
+              " <hr>Intensity: " +
+              d.NORMALIZED_INTENSITY.toFixed(2);
           }
           return mouseOverLabel;
-        }
-
+        },
       },
       svgAttributes: {
-        x_axis_label: 'intensity (log2 top3)',
-        y_axis_label: 'samples',
-        title: 'Sample specific protein expression',
+        x_axis_label: "intensity (log2 top3)",
+        y_axis_label: "samples",
+        title: "Sample specific protein expression",
         width: 260,
         margin: {
           top: 55,
@@ -133,44 +142,43 @@ export default {
           right: 20,
           bottom: 0,
           chart: {
-            top: 0
-          }
-        }
+            top: 0,
+          },
+        },
       },
       barData: [],
       privateAlert: false,
-      privateAlertText: 'Sorry - This data is not yet publicly available.',
+      privateAlertText: "Sorry - This data is not yet publicly available.",
       publicSampleSelected: false,
-      selectedSampleId: null
+      selectedSampleId: null,
     };
   },
-  computed: {
-  },
+  computed: {},
   watch: {
-    data: function( newData ) {
+    data: function (newData) {
       if (this.proteinId === null && newData) {
         this.barData = newData;
       }
     },
-    proteinId: function() {
+    proteinId: function () {
       this.getData();
     },
     tissues_selected: function (sTissues) {
-      if(sTissues !== ''){
+      if (sTissues !== "") {
         this.getData();
       }
-    }
+    },
   },
   methods: {
     resetSelectedSample: function () {
       this.publicSampleSelected = false;
       this.selectedSampleId = null;
     },
-    toggleBar: function(data) {
+    toggleBar: function (data) {
       this.$refs.expressionbarsref.toggleBar(data);
     },
-    barSelected: function(data) {
-      if (data.STATUS === 'private') {
+    barSelected: function (data) {
+      if (data.STATUS === "private") {
         this.privateAlert = true;
       } else {
         this.privateAlert = false;
@@ -178,32 +186,37 @@ export default {
         this.publicSampleSelected = true;
       }
     },
-    getData: function () {  
+    getData: function () {
       let that = this;
 
-      let urlDatasets = this.$store.state.host+'/proteomicsdb/logic/getExpressionWrapper.xsjs'
-      axios.get(urlDatasets, { params: {
-          protein_id: that.proteinId,
-          quantification: that.quantification,
-          tissue_category: that.tissue_category,
-          tissues_selected: that.tissues_selected,
-          scope: that.scope,
-          omics: that.omicsType,
-          group_by_tissue: that.group_by_tissue,
-          calculation: that.calculation
-      }})
-      .then(function (response) {
-        that.barData = response.data;
-      })
+      let urlDatasets =
+        this.$store.state.host +
+        "/proteomicsdb/logic/getExpressionWrapper.xsjs";
+      axios
+        .get(urlDatasets, {
+          params: {
+            protein_id: that.proteinId,
+            quantification: that.quantification,
+            tissue_category: that.tissue_category,
+            tissues_selected: that.tissues_selected,
+            scope: that.scope,
+            omics: that.omicsType,
+            group_by_tissue: that.group_by_tissue,
+            calculation: that.calculation,
+          },
+        })
+        .then(function (response) {
+          that.barData = response.data;
+        });
     },
     getSVG: function () {
       return this.$refs.expressionbarsref.getSVG();
-    }
+    },
   },
   mounted() {
-    if (this.tissues_selected !== '') {
+    if (this.tissues_selected !== "") {
       this.getData();
     }
-  }
-}
+  },
+};
 </script>
diff --git a/SensitivityBarPlot.vue b/SensitivityBarPlot.vue
index 6893355..da78707 100644
--- a/SensitivityBarPlot.vue
+++ b/SensitivityBarPlot.vue
@@ -8,53 +8,56 @@
     :minHeight="minHeight"
     :title="barPlotTitle"
     @send-message="onBarSelected"
-    />
+  />
 </template>
 
 <script>
-import barplot from '@/vue-d3-components/GenericBarPlot'
+import barplot from "@/vue-d3-components/GenericBarPlot";
 
 export default {
-  name: 'sensitivitybarplot',
+  name: "sensitivitybarplot",
   components: {
-    barplot: barplot
+    barplot: barplot,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 200
+      default: 200,
     },
     minHeight: {
       type: Number,
-      default: 200
+      default: 200,
     },
     selectedKey: {
       type: String,
-      default: ''
+      default: "",
     },
     violinModel: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   computed: {
-    barPlotModel: function(){
-      if(this.selectedKey){
-      return this.violinModel.filter(model => model.AttributeType === this.selectedKey)[0];
-      }
-      else{
+    barPlotModel: function () {
+      if (this.selectedKey) {
+        return this.violinModel.filter(
+          (model) => model.AttributeType === this.selectedKey
+        )[0];
+      } else {
         return null;
       }
     },
-    
+
     barPlotTitle: function () {
-      return this.selectedKey + "  values for selected drug/cell line combination"
-    }
+      return (
+        this.selectedKey + "  values for selected drug/cell line combination"
+      );
+    },
   },
   methods: {
     onBarSelected: function (obj) {
-      this.$emit('send-message', obj)
+      this.$emit("send-message", obj);
     },
-  }
-}
+  },
+};
 </script>
diff --git a/SensitivityParallelPlot.vue b/SensitivityParallelPlot.vue
index 09b9e99..075cd2b 100644
--- a/SensitivityParallelPlot.vue
+++ b/SensitivityParallelPlot.vue
@@ -9,31 +9,31 @@
 </template>
 
 <script>
-import parallelplot from '@/vue-d3-components/D3ParallelGeneric'
+import parallelplot from "@/vue-d3-components/D3ParallelGeneric";
 
 export default {
-  name: 'sensitivityparallelplot',
+  name: "sensitivityparallelplot",
   components: {
-    parallelplot: parallelplot
+    parallelplot: parallelplot,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 200
+      default: 200,
     },
     minHeight: {
       type: Number,
-      default: 200
+      default: 200,
     },
     violinModel: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   methods: {
     keyChange: function (selectedLinesForBarPlot, selectedKey) {
-      this.$emit('keyChange', selectedLinesForBarPlot, selectedKey)
+      this.$emit("keyChange", selectedLinesForBarPlot, selectedKey);
     },
-  }
-}
+  },
+};
 </script>
diff --git a/SpecificGeneFDRGraph.vue b/SpecificGeneFDRGraph.vue
index e38133d..d9ece7d 100644
--- a/SpecificGeneFDRGraph.vue
+++ b/SpecificGeneFDRGraph.vue
@@ -1,72 +1,74 @@
 <template>
   <fdrplot
-  ref="fdrRef"
-  id='specificGeneFDR'
-  :height='"300px"'
-  :data='geneFdrModel'
-  :targetName='targetName'
-  :xAxisLabel='"Q-score"'
-  :yAxisLabel='"# of PSMs"'
-  :logY='true'
-  :psmLevel='true'
+    ref="fdrRef"
+    id="specificGeneFDR"
+    :height="'300px'"
+    :data="geneFdrModel"
+    :targetName="targetName"
+    :xAxisLabel="'Q-score'"
+    :yAxisLabel="'# of PSMs'"
+    :logY="true"
+    :psmLevel="true"
   />
 </template>
 
 <script>
-import axios from 'axios'
-import fdrplot from '@/vue-d3-components/FDRGraph'
+import axios from "axios";
+import fdrplot from "@/vue-d3-components/FDRGraph";
 
 export default {
-  name: 'specificGeneFdrPlot',
+  name: "specificGeneFdrPlot",
   components: {
-    fdrplot: fdrplot
+    fdrplot: fdrplot,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 400
+      default: 400,
     },
     minHeight: {
       type: Number,
-      default: 400
+      default: 400,
     },
     proteinId: {
       type: String,
-      default: null
+      default: null,
     },
     targetName: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   data: function () {
     return {
-      geneFdrModel: null
-    }
-  },
-  computed: {
-  },
-  watch: {
+      geneFdrModel: null,
+    };
   },
+  computed: {},
+  watch: {},
   methods: {
-    getData: function () {  
-        let that = this
+    getData: function () {
+      let that = this;
 
-        let urlDatasets = this.$store.state.host+'/proteomicsdb/logic/fdr/getGeneSpecificFDR.xsjs'
-        axios.get(urlDatasets, {
+      let urlDatasets =
+        this.$store.state.host +
+        "/proteomicsdb/logic/fdr/getGeneSpecificFDR.xsjs";
+      axios
+        .get(urlDatasets, {
           params: {
-            proteinId: this.proteinId
-        }})
-        .then(function (response) {
-          that.geneFdrModel = response.data
+            proteinId: this.proteinId,
+          },
         })
+        .then(function (response) {
+          that.geneFdrModel = response.data;
+        });
     },
-    getSVG: function() {
+    getSVG: function () {
       return this.$refs.fdrRef.getSVG();
-    }
+    },
   },
   mounted() {
-    this.getData()
-  }
-}
+    this.getData();
+  },
+};
 </script>
diff --git a/SpecificProteinFDRGraph.vue b/SpecificProteinFDRGraph.vue
index f81d56e..afe0f35 100644
--- a/SpecificProteinFDRGraph.vue
+++ b/SpecificProteinFDRGraph.vue
@@ -1,72 +1,74 @@
 <template>
   <fdrplot
-  ref="fdrRef"
-  id='specificProteinFDR'
-  :height='"300px"'
-  :data='geneFdrModel'
-  :targetName='targetName'
-  :xAxisLabel='"Q-score"'
-  :yAxisLabel='"# of PSMs"'
-  :logY='true'
-  :psmLevel='true'
+    ref="fdrRef"
+    id="specificProteinFDR"
+    :height="'300px'"
+    :data="geneFdrModel"
+    :targetName="targetName"
+    :xAxisLabel="'Q-score'"
+    :yAxisLabel="'# of PSMs'"
+    :logY="true"
+    :psmLevel="true"
   />
 </template>
 
 <script>
-import axios from 'axios'
-import fdrplot from '@/vue-d3-components/FDRGraph'
+import axios from "axios";
+import fdrplot from "@/vue-d3-components/FDRGraph";
 
 export default {
-  name: 'specificProteinFdrPlot',
+  name: "specificProteinFdrPlot",
   components: {
-    fdrplot: fdrplot
+    fdrplot: fdrplot,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 400
+      default: 400,
     },
     minHeight: {
       type: Number,
-      default: 400
+      default: 400,
     },
     proteinId: {
       type: String,
-      default: null
+      default: null,
     },
     targetName: {
       type: String,
-      default: null
-    }
+      default: null,
+    },
   },
   data: function () {
     return {
-      geneFdrModel: null
-    }
-  },
-  computed: {
-  },
-  watch: {
+      geneFdrModel: null,
+    };
   },
+  computed: {},
+  watch: {},
   methods: {
-    getData: function () {  
-      let that = this
+    getData: function () {
+      let that = this;
 
-      let urlDatasets = this.$store.state.host+'/proteomicsdb/logic/fdr/getProteinSpecificFDR.xsjs'
-      axios.get(urlDatasets, {
-        params: {
-          proteinId: this.proteinId
-      }})
-      .then(function (response) {
-        that.geneFdrModel = response.data
-      })
+      let urlDatasets =
+        this.$store.state.host +
+        "/proteomicsdb/logic/fdr/getProteinSpecificFDR.xsjs";
+      axios
+        .get(urlDatasets, {
+          params: {
+            proteinId: this.proteinId,
+          },
+        })
+        .then(function (response) {
+          that.geneFdrModel = response.data;
+        });
     },
-    getSVG: function() {
+    getSVG: function () {
       return this.$refs.fdrRef.getSVG();
-    }
+    },
   },
   mounted() {
-    this.getData()
-  }
-}
+    this.getData();
+  },
+};
 </script>
diff --git a/SpectrumWrapper.vue b/SpectrumWrapper.vue
index 10f5a18..14eb762 100644
--- a/SpectrumWrapper.vue
+++ b/SpectrumWrapper.vue
@@ -8,227 +8,340 @@
               Reference Spectrum
             </v-expansion-panel-header>
             <v-expansion-panel-content>
-              <p>Origin
-              <v-btn-toggle
-                            dense
-                            class="mx-1 "
-                            v-model="mirrorOrigin"
-                            :color="$store.state.selectedOrganismShown.primaryColor"
-                            >
-                            <v-btn small>Prosit</v-btn>
-                <v-btn small>ProteomeTools</v-btn>
-              </v-btn-toggle></p>
+              <p>
+                Origin
+                <v-btn-toggle
+                  dense
+                  class="mx-1"
+                  v-model="mirrorOrigin"
+                  :color="$store.state.selectedOrganismShown.primaryColor"
+                >
+                  <v-btn small>Prosit</v-btn>
+                  <v-btn small>ProteomeTools</v-btn>
+                </v-btn-toggle>
+              </p>
               <v-col v-if="mirrorOrigin === 0">
-                <v-text-field label="Peptide Sequence" class="mx-2 my-0 py-0" type="text" v-model="mirrorSequence" :rules="mirrorSequenceRules" counter="30"></v-text-field>
+                <v-text-field
+                  label="Peptide Sequence"
+                  class="mx-2 my-0 py-0"
+                  type="text"
+                  v-model="mirrorSequence"
+                  :rules="mirrorSequenceRules"
+                  counter="30"
+                ></v-text-field>
                 <v-row class="px-0" align="center">
                   <v-col align="center" class="px-0">
-                    <v-text-field justify="left" label="Precursor Charge" class="mx-2 my-0 py-0" type="number" v-model="mirrorSequencePrecursorCharge" style="max-width:150px;"></v-text-field>
+                    <v-text-field
+                      justify="left"
+                      label="Precursor Charge"
+                      class="mx-2 my-0 py-0"
+                      type="number"
+                      v-model="mirrorSequencePrecursorCharge"
+                      style="max-width: 150px"
+                    ></v-text-field>
                   </v-col>
                   <v-col align="center" class="px-0">
-                    <v-text-field label="Collision Energy" class="mx-2 my-0 py-0" type="number" v-model="mirrorSequenceCE" style="max-width:150px;"></v-text-field>
+                    <v-text-field
+                      label="Collision Energy"
+                      class="mx-2 my-0 py-0"
+                      type="number"
+                      v-model="mirrorSequenceCE"
+                      style="max-width: 150px"
+                    ></v-text-field>
                   </v-col>
                 </v-row>
                 <v-row justify="center">
                   <v-combobox
-                       v-model="modObjectBottom.selectedMods"
-                       :items="modsBottom"
-                       :item-text="modSelectOption"
-                       label="Selected modifications"
-                       multiple
-                       clear-on-select
-                       chips
-                       deletable-chips
-                       return-object
-                       :error-messages="prositError"
-                       class="mx-2 my-0 py-0"
-                       ></v-combobox>
+                    v-model="modObjectBottom.selectedMods"
+                    :items="modsBottom"
+                    :item-text="modSelectOption"
+                    label="Selected modifications"
+                    multiple
+                    clear-on-select
+                    chips
+                    deletable-chips
+                    return-object
+                    :error-messages="prositError"
+                    class="mx-2 my-0 py-0"
+                  ></v-combobox>
                 </v-row>
                 <v-row justify="center">
-                  <v-btn :color="$store.state.selectedOrganismShown.primaryColor" class="white--text" @click="getMirrorSpectrum">Get mirror spectrum</v-btn>
+                  <v-btn
+                    :color="$store.state.selectedOrganismShown.primaryColor"
+                    class="white--text"
+                    @click="getMirrorSpectrum"
+                    >Get mirror spectrum</v-btn
+                  >
                 </v-row>
               </v-col>
               <v-col v-if="mirrorOrigin === 1">
-                <v-select :items="aAcquisitionModes"
+                <v-select
+                  :items="aAcquisitionModes"
                   label="Acquisition Mode"
                   v-model="selectedAcquisitionMode"
                   @change="triggerFilterReferenceSpectrumList"
-                  ></v-select>
-                  <v-divider/>
-                    <v-list dense style="overflow-y: auto; max-height:400px">
-                      <v-list-item-group
-                                  color="primary"
-                                  >
-                                  <v-list-item
-                                  v-for="(item, i) in aReferenceSpectrumList"
-                                  :key="i"
-                                  @click="getMirrorSpectrum(item)"
-                                  >
-                                  <v-tooltip right open-delay="300">
-                                    <template v-slot:activator="{ on }">
-                                      <v-list-item-content v-on="on">
-                                        <v-list-item-title v-text="item.text"></v-list-item-title>
-                                      </v-list-item-content>
-                                    </template>
-                                    <span v-html="item.tooltip"></span>
-                                  </v-tooltip>
-                                  </v-list-item>
-                      </v-list-item-group>
-
-                    </v-list>
-                  </v-col>
-              </v-expansion-panel-content>
-            </v-expansion-panel>
-            <v-expansion-panel>
-              <v-expansion-panel-header>
-                Fragments
-              </v-expansion-panel-header>
-              <v-expansion-panel-content>
-                <v-row class="ma-0 pa-0 py-1" justify="end">
-                  <v-btn @click="selectAll" small class="white--text mx-1" :color="$store.state.selectedOrganismShown.primaryColor">Select all</v-btn>
-                  <v-btn @click="deselectAll" small class="white--text mx-1" :color="$store.state.selectedOrganismShown.primaryColor" >Deselect all</v-btn>
-                </v-row>
-                <v-row>
-                  <v-col>
-                    <v-row class="ma-0 pa-0 my-1" align="center" v-for="(item, i ) in ions.slice(0,3)" :key="i">
-                      {{item.ion}}:
-                      <v-btn-toggle
-                                                                 dense
-                                                                 multiple
-                                                                 class="mx-1 "
-                                                                 v-model="item.state"
-                                                                 :color="$store.state.selectedOrganismShown.primaryColor"
-                                                                 @change="setSelectedIonList(true)"
-                                                                 >
-
-                                                                 <v-btn v-for="(ch, j) in item.charges" :key="j" small :disabled="!item.enabled[j]">
-                                                                   {{ch}}
-                                                                 </v-btn>
-                      </v-btn-toggle>
-                    </v-row>
-                  </v-col>
-                  <v-col>
-                    <v-row class="ma-0 pa-0 my-1" align="center" v-for="(item, i ) in ions.slice(3)" :key="i">
-                      {{item.ion}}:
-                      <v-btn-toggle
-                                                                 dense
-                                                                 multiple
-                                                                 class="mx-1 "
-                                                                 v-model="item.state"
-                                                                 :color="$store.state.selectedOrganismShown.primaryColor"
-                                                                 @change="setSelectedIonList(true)"
-                                                                 >
-
-                                                                 <v-btn v-for="(ch, j) in item.charges" :key="j" small :disabled="!item.enabled[j]">
-                                                                   {{ch}}
-                                                                 </v-btn>
-                      </v-btn-toggle>
-                    </v-row>
-                  </v-col>
-                </v-row>
-                <v-row justify="center" >
-                  <v-col v-for="(peak, i) in extraPeaks" :key="i">
-                    <v-switch dense class="ml-7 mt-0 pt-0" v-model="peak.state" :label="peak.ion" :key="i" :disabled="!peak.enabled" @change="setSelectedExtraPeakList(true)"></v-switch>
-                  </v-col>
-                </v-row>
-                <v-row justify="center" class="my-2" >
-                  <v-label>Neutral loss: </v-label>
-                </v-row>
-                <v-row justify="center">
-                  <v-switch v-for="(item, i) in nl" dense class="ml-7 mt-0 pt-0" v-model="item.state" :label="item.name" :key="i" :disabled="!item.enabled" @change="setSelectedNeutralLossList(true)"></v-switch>
-                </v-row>
-              </v-expansion-panel-content>
-            </v-expansion-panel>
-            <v-expansion-panel>
-              <v-expansion-panel-header>
-                Configuration
-              </v-expansion-panel-header>
-              <v-expansion-panel-content>
-                <v-row align="center" justify="center">
-                  <v-label>Max neutral loss count </v-label>
-                  <v-text-field class="mx-2 my-0 py-0" type="number" v-model="nlCount" style="max-width:50px;" @change="nlChange" @keydown="nlChange" @click="nlChange"></v-text-field>
-                </v-row>
-                <v-row align="center" justify="center">
-                  <v-btn-toggle dense>
-                    <v-text-field label="Fragment Annotation Tolerance (+/-)" class="mx-2 my-0 py-0" type="number" v-model="massTolerance[selectedMassTolerance + 0].value"></v-text-field>
-                    <v-btn :color="$store.state.selectedOrganismShown.primaryColor" class="white--text" @click="selectedMassTolerance = !selectedMassTolerance">{{massTolerance[selectedMassTolerance + 0].text}}</v-btn>
-                  </v-btn-toggle>
-                </v-row>
-                <v-row align="center" justify="center">
-                  <v-btn-toggle dense>
-                    <v-text-field label="Peak Matching Tolerance (+/-)" class="mx-2 my-0 py-0" type="number" v-model="matchTolerance[selectedMatchTolerance + 0].value"></v-text-field>
-                    <v-btn :color="$store.state.selectedOrganismShown.primaryColor" class="white--text" @click="selectedMatchTolerance = !selectedMatchTolerance">{{matchTolerance[selectedMatchTolerance + 0].text}}</v-btn>
-                  </v-btn-toggle>
-                </v-row>
-                <v-row justify="center">
-                  <v-switch dense label="Expert system annotation" small v-model="expert"></v-switch>
-                </v-row>
-                <v-row justify="center">
-                  <v-btn dense small :color="$store.state.selectedOrganismShown.primaryColor" class="white--text" @click="getSpectra">Update settings</v-btn>
-                </v-row>
-              </v-expansion-panel-content>
-            </v-expansion-panel>
-          </v-expansion-panels>
-        </v-col>
-        <v-col cols="8">
-          <spectrumViewer ref="peptideSpectrumViewer"
-                          :plotdata="topSpec"
-                          :mirrorplotdata="bottomSpec"
-                          :peptide="peptide"
-                          :peptideBottom="peptideBottom"
-                          :settings="specViewSettings"
-                          :score="score"
-                          :scoreTop="scoreTop"
-                          :scoreBottom="scoreBottom"
-                          />
-        </v-col>
-      </v-row>
-    </v-container>
+                ></v-select>
+                <v-divider />
+                <v-list dense style="overflow-y: auto; max-height: 400px">
+                  <v-list-item-group color="primary">
+                    <v-list-item
+                      v-for="(item, i) in aReferenceSpectrumList"
+                      :key="i"
+                      @click="getMirrorSpectrum(item)"
+                    >
+                      <v-tooltip right open-delay="300">
+                        <template v-slot:activator="{ on }">
+                          <v-list-item-content v-on="on">
+                            <v-list-item-title
+                              v-text="item.text"
+                            ></v-list-item-title>
+                          </v-list-item-content>
+                        </template>
+                        <span v-html="item.tooltip"></span>
+                      </v-tooltip>
+                    </v-list-item>
+                  </v-list-item-group>
+                </v-list>
+              </v-col>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+          <v-expansion-panel>
+            <v-expansion-panel-header> Fragments </v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-row class="ma-0 pa-0 py-1" justify="end">
+                <v-btn
+                  @click="selectAll"
+                  small
+                  class="white--text mx-1"
+                  :color="$store.state.selectedOrganismShown.primaryColor"
+                  >Select all</v-btn
+                >
+                <v-btn
+                  @click="deselectAll"
+                  small
+                  class="white--text mx-1"
+                  :color="$store.state.selectedOrganismShown.primaryColor"
+                  >Deselect all</v-btn
+                >
+              </v-row>
+              <v-row>
+                <v-col>
+                  <v-row
+                    class="ma-0 pa-0 my-1"
+                    align="center"
+                    v-for="(item, i) in ions.slice(0, 3)"
+                    :key="i"
+                  >
+                    {{ item.ion }}:
+                    <v-btn-toggle
+                      dense
+                      multiple
+                      class="mx-1"
+                      v-model="item.state"
+                      :color="$store.state.selectedOrganismShown.primaryColor"
+                      @change="setSelectedIonList(true)"
+                    >
+                      <v-btn
+                        v-for="(ch, j) in item.charges"
+                        :key="j"
+                        small
+                        :disabled="!item.enabled[j]"
+                      >
+                        {{ ch }}
+                      </v-btn>
+                    </v-btn-toggle>
+                  </v-row>
+                </v-col>
+                <v-col>
+                  <v-row
+                    class="ma-0 pa-0 my-1"
+                    align="center"
+                    v-for="(item, i) in ions.slice(3)"
+                    :key="i"
+                  >
+                    {{ item.ion }}:
+                    <v-btn-toggle
+                      dense
+                      multiple
+                      class="mx-1"
+                      v-model="item.state"
+                      :color="$store.state.selectedOrganismShown.primaryColor"
+                      @change="setSelectedIonList(true)"
+                    >
+                      <v-btn
+                        v-for="(ch, j) in item.charges"
+                        :key="j"
+                        small
+                        :disabled="!item.enabled[j]"
+                      >
+                        {{ ch }}
+                      </v-btn>
+                    </v-btn-toggle>
+                  </v-row>
+                </v-col>
+              </v-row>
+              <v-row justify="center">
+                <v-col v-for="(peak, i) in extraPeaks" :key="i">
+                  <v-switch
+                    dense
+                    class="ml-7 mt-0 pt-0"
+                    v-model="peak.state"
+                    :label="peak.ion"
+                    :key="i"
+                    :disabled="!peak.enabled"
+                    @change="setSelectedExtraPeakList(true)"
+                  ></v-switch>
+                </v-col>
+              </v-row>
+              <v-row justify="center" class="my-2">
+                <v-label>Neutral loss: </v-label>
+              </v-row>
+              <v-row justify="center">
+                <v-switch
+                  v-for="(item, i) in nl"
+                  dense
+                  class="ml-7 mt-0 pt-0"
+                  v-model="item.state"
+                  :label="item.name"
+                  :key="i"
+                  :disabled="!item.enabled"
+                  @change="setSelectedNeutralLossList(true)"
+                ></v-switch>
+              </v-row>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+          <v-expansion-panel>
+            <v-expansion-panel-header> Configuration </v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-row align="center" justify="center">
+                <v-label>Max neutral loss count </v-label>
+                <v-text-field
+                  class="mx-2 my-0 py-0"
+                  type="number"
+                  v-model="nlCount"
+                  style="max-width: 50px"
+                  @change="nlChange"
+                  @keydown="nlChange"
+                  @click="nlChange"
+                ></v-text-field>
+              </v-row>
+              <v-row align="center" justify="center">
+                <v-btn-toggle dense>
+                  <v-text-field
+                    label="Fragment Annotation Tolerance (+/-)"
+                    class="mx-2 my-0 py-0"
+                    type="number"
+                    v-model="massTolerance[selectedMassTolerance + 0].value"
+                  ></v-text-field>
+                  <v-btn
+                    :color="$store.state.selectedOrganismShown.primaryColor"
+                    class="white--text"
+                    @click="selectedMassTolerance = !selectedMassTolerance"
+                    >{{ massTolerance[selectedMassTolerance + 0].text }}</v-btn
+                  >
+                </v-btn-toggle>
+              </v-row>
+              <v-row align="center" justify="center">
+                <v-btn-toggle dense>
+                  <v-text-field
+                    label="Peak Matching Tolerance (+/-)"
+                    class="mx-2 my-0 py-0"
+                    type="number"
+                    v-model="matchTolerance[selectedMatchTolerance + 0].value"
+                  ></v-text-field>
+                  <v-btn
+                    :color="$store.state.selectedOrganismShown.primaryColor"
+                    class="white--text"
+                    @click="selectedMatchTolerance = !selectedMatchTolerance"
+                    >{{
+                      matchTolerance[selectedMatchTolerance + 0].text
+                    }}</v-btn
+                  >
+                </v-btn-toggle>
+              </v-row>
+              <v-row justify="center">
+                <v-switch
+                  dense
+                  label="Expert system annotation"
+                  small
+                  v-model="expert"
+                ></v-switch>
+              </v-row>
+              <v-row justify="center">
+                <v-btn
+                  dense
+                  small
+                  :color="$store.state.selectedOrganismShown.primaryColor"
+                  class="white--text"
+                  @click="getSpectra"
+                  >Update settings</v-btn
+                >
+              </v-row>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-col>
+      <v-col cols="8">
+        <spectrumViewer
+          ref="peptideSpectrumViewer"
+          :plotdata="topSpec"
+          :mirrorplotdata="bottomSpec"
+          :peptide="peptide"
+          :peptideBottom="peptideBottom"
+          :settings="specViewSettings"
+          :score="score"
+          :scoreTop="scoreTop"
+          :scoreBottom="scoreBottom"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-import useTransformer from '@/vue-d3-component-wrappers/common-lib/ProteomicsDBTransformer'
-import annotationTransformer from '@/vue-d3-component-wrappers/common-lib/AnnotationTransformer'
-import axios from 'axios'
+import useTransformer from "@/vue-d3-component-wrappers/common-lib/ProteomicsDBTransformer";
+import annotationTransformer from "@/vue-d3-component-wrappers/common-lib/AnnotationTransformer";
+import axios from "axios";
 
-import binary from '@/vue-d3-component-wrappers/common-lib/binary.js'
-import measures from '@/vue-d3-component-wrappers/common-lib/measures.js'
-import comparator from '@/vue-d3-component-wrappers/common-lib/Comparator.js'
+import binary from "@/vue-d3-component-wrappers/common-lib/binary.js";
+import measures from "@/vue-d3-component-wrappers/common-lib/measures.js";
+import comparator from "@/vue-d3-component-wrappers/common-lib/Comparator.js";
 
-const d3 = require('d3v3')
-import spectrumViewer from '@/vue-d3-components/SpectrumViewer'
+const d3 = require("d3v3");
+import spectrumViewer from "@/vue-d3-components/SpectrumViewer";
 
-import ModificationsTxt from '@/assets/mods/Modifications.txt'
+import ModificationsTxt from "@/assets/mods/Modifications.txt";
 
 export default {
-  name: 'spetrumWrapper',
+  name: "spetrumWrapper",
   components: {
-    spectrumViewer
+    spectrumViewer,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 400
+      default: 400,
     },
     minHeight: {
       type: Number,
-      default: 400
+      default: 400,
     },
     spectrumEntry: {
       type: Object,
-      default: ()=> {}
+      default: () => {},
     },
     peptideId: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     peptideSequence: {
       type: String,
-      default: undefined
+      default: undefined,
     },
     isReferenceSpectrum: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data: function () {
     return {
@@ -244,272 +357,276 @@ export default {
       potentialMods: [],
       potentialModsBottom: [],
       topSpec: {
-        "x": [
-        ],
-        "y": [
-        ],
-        "id": [
-        ],
-        "color": [
-        ],
-        "label": [
-        ],
-        "labelCharge": [
-        ],
-        "neutralLosses": [
-        ],
-        "barwidth": [
-        ],
-        "massError": [
-        ],
-        "theoMz": [
-        ],
-        "percentBasePeak": [
-        ],
-        "TIC": 0,
-        "massErrorX": [
-        ],
-        "intensityError": [
-        ],
-        "intensityErrorIdsTop": [
-        ],
-        "intensityErrorIdsBottom": [
-        ]
+        x: [],
+        y: [],
+        id: [],
+        color: [],
+        label: [],
+        labelCharge: [],
+        neutralLosses: [],
+        barwidth: [],
+        massError: [],
+        theoMz: [],
+        percentBasePeak: [],
+        TIC: 0,
+        massErrorX: [],
+        intensityError: [],
+        intensityErrorIdsTop: [],
+        intensityErrorIdsBottom: [],
       },
       bottomSpec: {
-        "x": [
-        ],
-        "y": [
-        ],
-        "id": [
-        ],
-        "color": [
-        ],
-        "label": [
-        ],
-        "labelCharge": [
-        ],
-        "neutralLosses": [
-        ],
-        "barwidth": [
-        ],
-        "massError": [
-        ],
-        "theoMz": [
-        ],
-        "percentBasePeak": [
-        ],
-        "TIC": 0
+        x: [],
+        y: [],
+        id: [],
+        color: [],
+        label: [],
+        labelCharge: [],
+        neutralLosses: [],
+        barwidth: [],
+        massError: [],
+        theoMz: [],
+        percentBasePeak: [],
+        TIC: 0,
       },
       peptide: {
-        "sequence": "TESTPEPTIDE",
-        "precursorMz": null,
-        "precursorCharge": null,
-        "mods": [
-        {
-          "site": -1,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 0,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 1,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 2,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 3,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 4,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 5,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 6,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 7,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 8,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 9,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 10,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 11,
-          "deltaElement": null,
-          "deltaMass": 0
-        }
+        sequence: "TESTPEPTIDE",
+        precursorMz: null,
+        precursorCharge: null,
+        mods: [
+          {
+            site: -1,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 0,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 1,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 2,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 3,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 4,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 5,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 6,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 7,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 8,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 9,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 10,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 11,
+            deltaElement: null,
+            deltaMass: 0,
+          },
         ],
-        "origin": "Origin"
+        origin: "Origin",
       },
       peptideBottom: {
-        "sequence": "TESTPEPTIDE",
-        "precursorMz": null,
-        "precursorCharge": null,
-        "mods": [
-        {
-          "site": -1,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 0,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 1,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 2,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 3,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 4,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 5,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 6,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 7,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 8,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 9,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 10,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 11,
-          "deltaElement": null,
-          "deltaMass": 0
-        }
+        sequence: "TESTPEPTIDE",
+        precursorMz: null,
+        precursorCharge: null,
+        mods: [
+          {
+            site: -1,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 0,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 1,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 2,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 3,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 4,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 5,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 6,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 7,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 8,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 9,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 10,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 11,
+            deltaElement: null,
+            deltaMass: 0,
+          },
         ],
-        "origin": "Origin"
+        origin: "Origin",
       },
       specViewSettings: {
-        "toleranceThreshold": 40,
-        "toleranceType": "ppm",
-        "ionizationMode": "+"
+        toleranceThreshold: 40,
+        toleranceType: "ppm",
+        ionizationMode: "+",
       },
       score: {
-        sa: 0.00,
-        corr: 0.00
+        sa: 0.0,
+        corr: 0.0,
       },
       scoreTop: {
-        sa: 0.00,
-        corr: 0.00
+        sa: 0.0,
+        corr: 0.0,
       },
       scoreBottom: {
-        sa: 0.00,
-        corr: 0.00
+        sa: 0.0,
+        corr: 0.0,
       },
       oAcquisitionModeSet: [],
       aAcquisitionModes: [],
       topPeaks: {},
       bottomPeaks: {},
       mirrorOrigin: 0,
-      mirrorSequenceRules: [v => v.length <= 30 || 'Max 30 amino acids'],
-      mirrorSequence: '',
+      mirrorSequenceRules: [(v) => v.length <= 30 || "Max 30 amino acids"],
+      mirrorSequence: "",
       mirrorSequencePrecursorCharge: 1,
       mirrorSequenceCE: 30,
       selectedReferenceSpectrum: [],
-      selectedAcquisitionMode: 'All',
+      selectedAcquisitionMode: "All",
       aReferenceSpectrumList: [],
       ions: [
-      {ion: "a", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "b", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "c", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "x", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "y", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "z", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]}
+        {
+          ion: "a",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
+        },
+        {
+          ion: "b",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
+        },
+        {
+          ion: "c",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
+        },
+        {
+          ion: "x",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
+        },
+        {
+          ion: "y",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
+        },
+        {
+          ion: "z",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
+        },
       ],
       extraPeaks: [
-      {ion: "yb", state: 0, enabled: 0},
-      {ion: "IM", state: 0, enabled: 0},
-      {ion: "M[H]", state: 0, enabled: 0}
+        { ion: "yb", state: 0, enabled: 0 },
+        { ion: "IM", state: 0, enabled: 0 },
+        { ion: "M[H]", state: 0, enabled: 0 },
       ],
       nl: [
-      {name: "H2O", state:0, enabled: 0},
-      {name: "NH3", state:0, enabled: 0},
-      {name: "CO", state:0, enabled: 0},
-      {name: "CO2", state:0, enabled: 0},
-      {name: "C2H4", state:0, enabled: 0},
-      {name: "C3H6", state:0, enabled: 0},
-      {name: "C4H8", state:0, enabled: 0},
-      {name: "C2H4O2", state:0, enabled: 0},
-      {name: "C2H5NO", state:0, enabled: 0},
-      {name: "C3H9N3", state:0, enabled: 0},
-      {name: "C4H6N2", state:0, enabled: 0},
-      {name: "CH2N2", state:0, enabled: 0}
+        { name: "H2O", state: 0, enabled: 0 },
+        { name: "NH3", state: 0, enabled: 0 },
+        { name: "CO", state: 0, enabled: 0 },
+        { name: "CO2", state: 0, enabled: 0 },
+        { name: "C2H4", state: 0, enabled: 0 },
+        { name: "C3H6", state: 0, enabled: 0 },
+        { name: "C4H8", state: 0, enabled: 0 },
+        { name: "C2H4O2", state: 0, enabled: 0 },
+        { name: "C2H5NO", state: 0, enabled: 0 },
+        { name: "C3H9N3", state: 0, enabled: 0 },
+        { name: "C4H6N2", state: 0, enabled: 0 },
+        { name: "CH2N2", state: 0, enabled: 0 },
       ],
       massTolerance: [
-      {text: 'ppm', value: 20},
-      {text: 'Da', value: 0.35}
+        { text: "ppm", value: 20 },
+        { text: "Da", value: 0.35 },
       ],
       matchTolerance: [
-      {text: 'ppm', value: 20},
-      {text: 'Da', value: 0.35}
+        { text: "ppm", value: 20 },
+        { text: "Da", value: 0.35 },
       ],
       nlCount: 3,
       maxNlCount: 3,
@@ -517,70 +634,70 @@ export default {
       selectedMatchTolerance: false,
       expert: true,
       fragmentTypes: {
-        "a": {
-          "selected": false,
-          "color": "#820cad",
-          "label": "a"
-        },
-        "b": {
-          "selected": false,
-          "color": "#0d75bc",
-          "label": "b"
-        },
-        "c": {
-          "selected": false,
-          "color": "#07a14a",
-          "label": "c"
+        a: {
+          selected: false,
+          color: "#820cad",
+          label: "a",
+        },
+        b: {
+          selected: false,
+          color: "#0d75bc",
+          label: "b",
+        },
+        c: {
+          selected: false,
+          color: "#07a14a",
+          label: "c",
+        },
+        C: {
+          selected: false,
+          color: "#035729",
+          label: "c-1",
+        },
+        x: {
+          selected: false,
+          color: "#d1e02d",
+          label: "x",
+        },
+        y: {
+          selected: false,
+          color: "#be202d",
+          label: "y",
+        },
+        z: {
+          selected: false,
+          color: "#f79420",
+          label: "z•",
+        },
+        Z: {
+          selected: false,
+          color: "#A16016",
+          label: "z+1",
+        },
+        yb: {
+          selected: false,
+          color: "#00ff00",
+          label: "yb",
+        },
+        IM: {
+          selected: false,
+          color: "#ffff00",
+          label: "IM",
+        },
+        precursor: {
+          selected: true,
+          color: "#000000",
+        },
+        unassigned: {
+          selected: true,
+          color: "#a6a6a6",
         },
-        "C": {
-          "selected": false,
-          "color": "#035729",
-          "label": "c-1"
-        },
-        "x": {
-          "selected": false,
-          "color": "#d1e02d",
-          "label": "x"
-        },
-        "y": {
-          "selected": false,
-          "color": "#be202d",
-          "label": "y"
-        },
-        "z": {
-          "selected": false,
-          "color": "#f79420",
-          "label": "z•"
-        },
-        "Z": {
-          "selected": false,
-          "color": "#A16016",
-          "label": "z+1"
-        },
-        "yb": {
-          "selected": false,
-          "color": "#00ff00",
-          "label": "yb"
-        },
-        "IM": {
-          "selected": false,
-          "color": "#ffff00",
-          "label": "IM"
-        },
-        "precursor": {
-          "selected": true,
-          "color": "#000000"
-        },
-        "unassigned": {
-          "selected": true,
-          "color": "#a6a6a6"
-        }
-      }
-    }
+      },
+    };
   },
   watch: {
     mirrorSequence: function (newSeq) {
-      if ( newSeq !== '' ) {
+      if (newSeq !== "") {
         this.oReferenceSpectrumModel.data.sequence = newSeq;
         this.mods = [];
         this.modsBottom = [];
@@ -592,7 +709,7 @@ export default {
     peptideSequence: function (newSeq) {
       this.mirrorSequence = newSeq;
     },
-    spectrumEntry: function(newData) {
+    spectrumEntry: function (newData) {
       if (newData) {
         this.initializeModel();
       }
@@ -605,38 +722,42 @@ export default {
 
       var that = this;
 
-      that.$set(that.modObjectBottom, 'selectedMods', {});
-      var aMods = sFmods.split('; ').concat(sVmods.split('; '));
-      var name = '', residue = '', index = -1;
+      that.$set(that.modObjectBottom, "selectedMods", {});
+      var aMods = sFmods.split("; ").concat(sVmods.split("; "));
+      var name = "",
+        residue = "",
+        index = -1;
       if (topSpectrum) {
         // todo
       } else {
         this.modObjectBottom.selectedMods = [];
       }
       aMods.forEach((mod) => {
-        if( mod !==  '' ) {
-          name = mod.split('@')[0];
-          residue = mod.split('@')[1].charAt(0);
-          index = mod.split('@')[1].slice(1) || -1;
+        if (mod !== "") {
+          name = mod.split("@")[0];
+          residue = mod.split("@")[1].charAt(0);
+          index = mod.split("@")[1].slice(1) || -1;
 
-          if ( topSpectrum ) {
+          if (topSpectrum) {
             // todo
           } else {
             var temp = that.modsBottom.filter((x) => {
               return (
-              x.name === name &&
-              x.site === residue &&
-              ((index !== -1 && x.index === index -1) || (index === -1))
-              )
+                x.name === name &&
+                x.site === residue &&
+                ((index !== -1 && x.index === index - 1) || index === -1)
+              );
             });
-            that.$set(that.modObjectBottom, 'selectedMods', that.modObjectBottom.selectedMods.concat(temp));
+            that.$set(
+              that.modObjectBottom,
+              "selectedMods",
+              that.modObjectBottom.selectedMods.concat(temp)
+            );
           }
         }
-
       });
-
     },
-    contains: function(a, scopeMods) {
+    contains: function (a, scopeMods) {
       var isIn = false;
       for (var i = 0; i < scopeMods.length; i++) {
         var listMod = scopeMods[i];
@@ -658,20 +779,32 @@ export default {
       }
       return isIn;
     },
-    modSelectOptionValue: function(mod, topSpectrum = true) {
+    modSelectOptionValue: function (mod, topSpectrum = true) {
       var returnString = mod.name + ": " + mod.site;
 
-      if (mod.index != -1 && (topSpectrum && mod.index != this.oSpectrumModel.data.sequence.length) || (!topSpectrum && mod.index != this.oReferenceSpectrumModel.data.sequence.length)) {
-        returnString += mod.index + 1 
+      if (
+        (mod.index != -1 &&
+          topSpectrum &&
+          mod.index != this.oSpectrumModel.data.sequence.length) ||
+        (!topSpectrum &&
+          mod.index != this.oReferenceSpectrumModel.data.sequence.length)
+      ) {
+        returnString += mod.index + 1;
       }
 
       return returnString;
     },
-    modSelectOption: function(mod, topSpectrum = true) {
+    modSelectOption: function (mod, topSpectrum = true) {
       var returnString = mod.name + ": " + mod.site;
 
-      if (mod.index != -1 && (topSpectrum && mod.index != this.oSpectrumModel.data.sequence.length) || (!topSpectrum && mod.index != this.oReferenceSpectrumModel.data.sequence.length)) {
-        returnString += mod.index + 1 
+      if (
+        (mod.index != -1 &&
+          topSpectrum &&
+          mod.index != this.oSpectrumModel.data.sequence.length) ||
+        (!topSpectrum &&
+          mod.index != this.oReferenceSpectrumModel.data.sequence.length)
+      ) {
+        returnString += mod.index + 1;
       }
 
       returnString += " (";
@@ -687,39 +820,41 @@ export default {
 
       return returnString;
     },
-    loadMods: function(topSpectrum = true) {
+    loadMods: function (topSpectrum = true) {
       // get potential mods from text file
-      var sSeq = '';
+      var sSeq = "";
       var aTempPotMods = [];
       var aMods = [];
       var char, i, j, mod, addMod;
-      var tempArray = []
+      var tempArray = [];
       if (this.predeterminedMods.length === 0) {
-        var text = 'Mods not yet loaded.';
+        var text = "Mods not yet loaded.";
         var data = ModificationsTxt;
         text = data.split("\n");
         tempArray = [];
 
-        for (i = 0; i < text.length -1; i++) {
-          var line = text[i].split(';');
+        for (i = 0; i < text.length - 1; i++) {
+          var line = text[i].split(";");
 
-          tempArray.push(
-          {
+          tempArray.push({
             name: line[0],
             site: line[1],
-            elementChange: line[2]
-          }
-          );
+            elementChange: line[2],
+          });
         }
         this.predeterminedMods = tempArray;
 
-        sSeq = topSpectrum ? this.oSpectrumModel.data.sequence : this.oReferenceSpectrumModel.data.sequence;
+        sSeq = topSpectrum
+          ? this.oSpectrumModel.data.sequence
+          : this.oReferenceSpectrumModel.data.sequence;
 
-        aTempPotMods = topSpectrum ? this.potentialMods : this.potentialModsBottom;
-        if(topSpectrum) {
+        aTempPotMods = topSpectrum
+          ? this.potentialMods
+          : this.potentialModsBottom;
+        if (topSpectrum) {
           this.potentialMods = this.predeterminedMods;
           this.mods = [];
-        } else{
+        } else {
           this.potentialModsBottom = this.predeterminedMods;
           this.modsBottom = [];
         }
@@ -730,28 +865,29 @@ export default {
           for (j = 0; j < aTempPotMods.length; j++) {
             mod = aTempPotMods[j];
             addMod = {};
-            if (mod.site.charAt(0) == char && mod.site != "N-terminus" && mod.site != "C-terminus") {
-
+            if (
+              mod.site.charAt(0) == char &&
+              mod.site != "N-terminus" &&
+              mod.site != "C-terminus"
+            ) {
               if (mod.deltaMass) {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: i,
-                  deltaMass: mod.deltaMass
+                  deltaMass: mod.deltaMass,
                 };
               } else {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: i,
-                  elementChange: mod.elementChange
+                  elementChange: mod.elementChange,
                 };
               }
 
               if (!this.contains(addMod, aMods)) {
-                if(topSpectrum){
+                if (topSpectrum) {
                   this.mods.push(addMod);
                 } else {
                   this.modsBottom.push(addMod);
@@ -759,24 +895,22 @@ export default {
               }
             } else if (mod.site == "N-terminus") {
               if (mod.deltaMass) {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: -1,
-                  deltaMass: mod.deltaMass
+                  deltaMass: mod.deltaMass,
                 };
               } else {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: -1,
-                  elementChange: mod.elementChange
+                  elementChange: mod.elementChange,
                 };
               }
               if (!this.contains(addMod, aMods)) {
-                if(topSpectrum){
+                if (topSpectrum) {
                   this.mods.push(addMod);
                 } else {
                   this.modsBottom.push(addMod);
@@ -784,24 +918,22 @@ export default {
               }
             } else if (mod.site == "C-terminus") {
               if (mod.deltaMass) {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: sSeq.length,
-                  deltaMass: mod.deltaMass
+                  deltaMass: mod.deltaMass,
                 };
               } else {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: sSeq.length,
-                  elementChange: mod.elementChange
+                  elementChange: mod.elementChange,
                 };
               }
               if (!this.contains(addMod, aMods)) {
-                if(topSpectrum){
+                if (topSpectrum) {
                   this.mods.push(addMod);
                 } else {
                   this.modsBottom.push(addMod);
@@ -811,45 +943,50 @@ export default {
           }
         }
       } else {
-        if(topSpectrum) {
+        if (topSpectrum) {
           this.potentialMods = this.predeterminedMods;
           this.mods = [];
-        } else{
+        } else {
           this.potentialModsBottom = this.predeterminedMods;
           this.modsBottom = [];
         }
 
-        sSeq = topSpectrum ? this.oSpectrumModel.data.sequence : this.oReferenceSpectrumModel.data.sequence;
+        sSeq = topSpectrum
+          ? this.oSpectrumModel.data.sequence
+          : this.oReferenceSpectrumModel.data.sequence;
 
-        aTempPotMods = topSpectrum ? this.potentialMods : this.potentialModsBottom;
+        aTempPotMods = topSpectrum
+          ? this.potentialMods
+          : this.potentialModsBottom;
         aMods = topSpectrum ? this.mods : this.modsBottom;
         for (i = 0; i < sSeq.length; i++) {
           char = sSeq.charAt(i).toUpperCase();
           for (j = 0; j < aTempPotMods.length; j++) {
             mod = aTempPotMods[j];
             addMod = {};
-            if (mod.site.charAt(0) == char && mod.site != "N-terminus" && mod.site != "C-terminus") {
-
+            if (
+              mod.site.charAt(0) == char &&
+              mod.site != "N-terminus" &&
+              mod.site != "C-terminus"
+            ) {
               if (mod.deltaMass) {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: i,
-                  deltaMass: mod.deltaMass
+                  deltaMass: mod.deltaMass,
                 };
               } else {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: i,
-                  elementChange: mod.elementChange
+                  elementChange: mod.elementChange,
                 };
               }
 
               if (!this.contains(addMod, aMods)) {
-                if(topSpectrum){
+                if (topSpectrum) {
                   this.mods.push(addMod);
                 } else {
                   this.modsBottom.push(addMod);
@@ -857,24 +994,22 @@ export default {
               }
             } else if (mod.site == "N-terminus") {
               if (mod.deltaMass) {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: -1,
-                  deltaMass: mod.deltaMass
+                  deltaMass: mod.deltaMass,
                 };
               } else {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: -1,
-                  elementChange: mod.elementChange
+                  elementChange: mod.elementChange,
                 };
               }
               if (!this.contains(addMod, aMods)) {
-                if(topSpectrum){
+                if (topSpectrum) {
                   this.mods.push(addMod);
                 } else {
                   this.modsBottom.push(addMod);
@@ -882,24 +1017,22 @@ export default {
               }
             } else if (mod.site == "C-terminus") {
               if (mod.deltaMass) {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: sSeq.length,
-                  deltaMass: mod.deltaMass
+                  deltaMass: mod.deltaMass,
                 };
               } else {
-                addMod = 
-                {
+                addMod = {
                   name: mod.name,
                   site: mod.site,
                   index: sSeq.length,
-                  elementChange: mod.elementChange
+                  elementChange: mod.elementChange,
                 };
               }
               if (!this.contains(addMod, aMods)) {
-                if(topSpectrum){
+                if (topSpectrum) {
                   this.mods.push(addMod);
                 } else {
                   this.modsBottom.push(addMod);
@@ -916,10 +1049,10 @@ export default {
         this.modsBottom = this.modsBottom.sort(this.sortMods);
       }
     },
-    sortMods: function(x,y) {
+    sortMods: function (x, y) {
       let xName = x.name.toLowerCase();
       let yName = y.name.toLowerCase();
-      
+
       let xSite = x.site.toLowerCase();
       let ySite = y.site.toLowerCase();
 
@@ -932,55 +1065,69 @@ export default {
       return 0;
     },
     nlChange: function () {
-      if(this.nlCount > this.maxNlCount) {
+      if (this.nlCount > this.maxNlCount) {
         this.nlCount = this.maxNlCount;
       }
-      if(this.nlCount < 0) {
+      if (this.nlCount < 0) {
         this.nlCount = 0;
       }
     },
-    selectAll: function() {
+    selectAll: function () {
       this.setButtonStates(1);
     },
-    deselectAll: function() {
+    deselectAll: function () {
       this.setButtonStates(0);
     },
-    disableAllButtons: function(bState) {
-      this.ions.forEach((x) => { x.enabled.fill(bState)});
-      this.extraPeaks.forEach((x) => { x.enabled = bState });
-      this.nl.forEach((x) => { x.enabled = bState });
+    disableAllButtons: function (bState) {
+      this.ions.forEach((x) => {
+        x.enabled.fill(bState);
+      });
+      this.extraPeaks.forEach((x) => {
+        x.enabled = bState;
+      });
+      this.nl.forEach((x) => {
+        x.enabled = bState;
+      });
     },
-    setButtonStates: function(bState) {
+    setButtonStates: function (bState) {
       this.ions.forEach((x) => {
         x.state = [];
-        x.enabled.forEach((e,i) => {
-          if(e * bState)  {
+        x.enabled.forEach((e, i) => {
+          if (e * bState) {
             x.state.push(i);
           }
-        })
+        });
+      });
+      this.extraPeaks.forEach((x) => {
+        x.state = bState * x.enabled;
+      });
+      this.nl.forEach((x) => {
+        x.state = bState * x.enabled;
       });
-      this.extraPeaks.forEach((x) => { x.state = bState * x.enabled});
-      this.nl.forEach((x) => { x.state = bState * x.enabled});
       this.setSelectedIonList(false);
       this.setSelectedExtraPeakList(false);
       this.setSelectedNeutralLossList(true);
     },
     setSelectedIonList: function (triggerMerge = true) {
       var selected = this.ions.filter((ion) => {
-        return (ion.state.length > 0)
+        return ion.state.length > 0;
       });
 
-      if(selected.length > 0) {
+      if (selected.length > 0) {
         selected = selected.map((x) => {
           var dict = {};
-          dict[x.ion] = x.state.map((c, i) => {return( (c+1) * x.enabled[i])}).reduce((p,n) => {
-            if(n !== 0) {
-              return p.concat(n)
-            } else {
-              return p
-            }
-          }, []);
-          return (dict);
+          dict[x.ion] = x.state
+            .map((c, i) => {
+              return (c + 1) * x.enabled[i];
+            })
+            .reduce((p, n) => {
+              if (n !== 0) {
+                return p.concat(n);
+              } else {
+                return p;
+              }
+            }, []);
+          return dict;
         });
       }
       this.oSpectrumModel.data.selectedIonList = selected;
@@ -996,15 +1143,15 @@ export default {
     },
     setSelectedExtraPeakList: function (triggerMerge = true) {
       var selected = this.extraPeaks.filter((ion) => {
-        return (ion.state + 0 === 1)
+        return ion.state + 0 === 1;
       });
 
-      if(selected.length > 0) {
+      if (selected.length > 0) {
         selected = selected.map((x) => {
-          if (x.ion === 'M[H]') {
-            return 'M'
+          if (x.ion === "M[H]") {
+            return "M";
           } else {
-            return x.ion
+            return x.ion;
           }
         });
       }
@@ -1019,12 +1166,12 @@ export default {
     },
     setSelectedNeutralLossList: function (triggerMerge = true) {
       var selected = this.nl.filter((ion) => {
-        return (ion.state + 0 === 1)
+        return ion.state + 0 === 1;
       });
 
-      if(selected.length > 0) {
+      if (selected.length > 0) {
         selected = selected.map((x) => {
-          return x.name
+          return x.name;
         });
       }
       this.oSpectrumModel.data.selectedNeutralLossList = selected;
@@ -1039,99 +1186,164 @@ export default {
         this.mergeAndCalculateScores();
       }
     },
-    check: function(spectrum){
-      if (typeof spectrum == 'undefined') {
-        return [{"mz":"", "intensity":"", "percentBasePeak": 0, "sn": null, "matchedFeatures": []}]
-      }else{
+    check: function (spectrum) {
+      if (typeof spectrum == "undefined") {
+        return [
+          {
+            mz: "",
+            intensity: "",
+            percentBasePeak: 0,
+            sn: null,
+            matchedFeatures: [],
+          },
+        ];
+      } else {
         return spectrum;
       }
     },
-    mergeSpectra: function(sp1,sp2) {
-      var binarySpectrum_1 = binary.binary_search_spectrum(sp1, sp2, this.massTolerance[this.selectedMassTolerance + 0].text, this.massTolerance[this.selectedMassTolerance + 0].value);
-      var binarySpectrum_2 = binary.binary_search_spectrum(sp2, sp1, this.massTolerance[this.selectedMassTolerance + 0].text, this.massTolerance[this.selectedMassTolerance + 0].value);
+    mergeSpectra: function (sp1, sp2) {
+      var binarySpectrum_1 = binary.binary_search_spectrum(
+        sp1,
+        sp2,
+        this.massTolerance[this.selectedMassTolerance + 0].text,
+        this.massTolerance[this.selectedMassTolerance + 0].value
+      );
+      var binarySpectrum_2 = binary.binary_search_spectrum(
+        sp2,
+        sp1,
+        this.massTolerance[this.selectedMassTolerance + 0].text,
+        this.massTolerance[this.selectedMassTolerance + 0].value
+      );
       binarySpectrum_1 = binary.selectMostIntensePeak(binarySpectrum_1);
       binarySpectrum_2 = binary.selectMostIntensePeak(binarySpectrum_2);
       var result = binary.full_merge(binarySpectrum_1, binarySpectrum_2);
       return result;
     },
-    calculateScores: function(sp1, sp2){
-      var result = this.mergeSpectra(sp1,sp2);
+    calculateScores: function (sp1, sp2) {
+      var result = this.mergeSpectra(sp1, sp2);
       var binarySpectrum = {};
-      binarySpectrum["intensity_1"] = result.map(function(x){
-        return x.intensity_1
+      binarySpectrum["intensity_1"] = result.map(function (x) {
+        return x.intensity_1;
       });
-      binarySpectrum["intensity_2"] = result.map(function(x){
-        return x.intensity_2
+      binarySpectrum["intensity_2"] = result.map(function (x) {
+        return x.intensity_2;
       });
 
-      var spectral_angle = measures.ipsa_helper["comparison"]["spectral_angle"](binarySpectrum["intensity_1"], binarySpectrum["intensity_2"]);
-      var pearson_correlation = measures.ipsa_helper["comparison"]["pearson_correlation"](binarySpectrum["intensity_1"], binarySpectrum["intensity_2"]);
-
-      return (
-      {
-        sa : Math.round(spectral_angle * 100)/100,
-        corr: Math.round(pearson_correlation * 100)/100
-      }
+      var spectral_angle = measures.ipsa_helper["comparison"]["spectral_angle"](
+        binarySpectrum["intensity_1"],
+        binarySpectrum["intensity_2"]
       );
+      var pearson_correlation = measures.ipsa_helper["comparison"][
+        "pearson_correlation"
+      ](binarySpectrum["intensity_1"], binarySpectrum["intensity_2"]);
+
+      return {
+        sa: Math.round(spectral_angle * 100) / 100,
+        corr: Math.round(pearson_correlation * 100) / 100,
+      };
     },
-    getScores: function(spec1, spec2){
-      var compar = new comparator.Comparator(spec1, spec2, this.matchTolerance[this.selectedMatchTolerance + 0].text, this.matchTolerance[this.selectedMatchTolerance + 0].value);
+    getScores: function (spec1, spec2) {
+      var compar = new comparator.Comparator(
+        spec1,
+        spec2,
+        this.matchTolerance[this.selectedMatchTolerance + 0].text,
+        this.matchTolerance[this.selectedMatchTolerance + 0].value
+      );
       var scoresO = compar.calculate_scores();
 
       this.scoreBottom = scoresO.spec2;
       this.scoreTop = scoresO.spec1;
 
       this.score = scoresO.full;
-
     },
-    mergeAndCalculateScores: function() {
-      if(this.topPeaks.peaks){
-        if(this.bottomPeaks.peaks){
+    mergeAndCalculateScores: function () {
+      if (this.topPeaks.peaks) {
+        if (this.bottomPeaks.peaks) {
           var top = this.check(this.topPeaks.peaks);
           var bottom = this.check(this.bottomPeaks.peaks);
 
           var mergedForRegression = this.mergeSpectra(top, bottom);
           var originalData = this.mergeSpectra(top, bottom);
 
-          mergedForRegression = mergedForRegression.filter((x) =>{return x.mz_1 !==-1 && x.mz_2!== -1});
-          var int1 = mergedForRegression.map((x) =>{return x.intensity_1});
-          var int2 = mergedForRegression.map((x) =>{return x.intensity_2});
+          mergedForRegression = mergedForRegression.filter((x) => {
+            return x.mz_1 !== -1 && x.mz_2 !== -1;
+          });
+          var int1 = mergedForRegression.map((x) => {
+            return x.intensity_1;
+          });
+          var int2 = mergedForRegression.map((x) => {
+            return x.intensity_2;
+          });
           var beta_hat;
-          if (int1.length ===0 && int2.length ===0){
+          if (int1.length === 0 && int2.length === 0) {
             beta_hat = 1;
-          }else{
+          } else {
             beta_hat = measures.regressionThroughZero(int1, int2);
           }
 
           // data is max scaled if no merged peaks are found
-          var int1Scaling = d3.max(mergedForRegression.map((x) => {return x.intensity_1}));
-          int1Scaling = isNaN(int1Scaling) ?  d3.max(originalData, (x) => {return x.intensity_1}) : int1Scaling;
-          var int2Scaling = d3.max(mergedForRegression.map((x) => {return x.intensity_2}));
-          int2Scaling = isNaN(int2Scaling) ?  d3.max(originalData, (x) => {return x.intensity_2}) : int2Scaling;
+          var int1Scaling = d3.max(
+            mergedForRegression.map((x) => {
+              return x.intensity_1;
+            })
+          );
+          int1Scaling = isNaN(int1Scaling)
+            ? d3.max(originalData, (x) => {
+                return x.intensity_1;
+              })
+            : int1Scaling;
+          var int2Scaling = d3.max(
+            mergedForRegression.map((x) => {
+              return x.intensity_2;
+            })
+          );
+          int2Scaling = isNaN(int2Scaling)
+            ? d3.max(originalData, (x) => {
+                return x.intensity_2;
+              })
+            : int2Scaling;
 
           var intensityerror = originalData.map((x) => {
-            if(x.mz_1 === -1 || x.mz_2 === -1){
+            if (x.mz_1 === -1 || x.mz_2 === -1) {
               return 0;
             }
             var delta = x.mz_1 - x.mz_2;
             var avg = (x.mz_1 + x.mz_2) / 2;
-            return delta / avg * Math.pow(10, 6);
-          })
-          var intensityerrorx = originalData.map((x) =>{if(x.mz_1 <0){return x.mz_2}else if(x.mz_2 <0){return x.mz_1}return (x.mz_1 + x.mz_2) / 2});
+            return (delta / avg) * Math.pow(10, 6);
+          });
+          var intensityerrorx = originalData.map((x) => {
+            if (x.mz_1 < 0) {
+              return x.mz_2;
+            } else if (x.mz_2 < 0) {
+              return x.mz_1;
+            }
+            return (x.mz_1 + x.mz_2) / 2;
+          });
           // size of bubble
           var intensityDifference = originalData.map((x) => {
-            if(x.mz_1 === -1){
+            if (x.mz_1 === -1) {
               return Math.abs(x.intensity_2 / int2Scaling);
             }
-            if(x.mz_2 === -1){
+            if (x.mz_2 === -1) {
               return Math.abs(beta_hat * (x.intensity_1 / int1Scaling));
             }
             // return(Math.abs( beta_hat * (x.intensity_1/int1Scaling) - x.intensity_2/int2Scaling) *100)
-            return Math.abs(beta_hat * (x.intensity_1/int1Scaling) - (x.intensity_2/int2Scaling))
+            return Math.abs(
+              beta_hat * (x.intensity_1 / int1Scaling) -
+                x.intensity_2 / int2Scaling
+            );
           });
-          this.plotData(this.topPeaks, intensityerror, intensityerrorx, intensityDifference,
-          originalData.map(x => {return x.id_1}),
-          originalData.map(x => {return x.id_2})
+          this.plotData(
+            this.topPeaks,
+            intensityerror,
+            intensityerrorx,
+            intensityDifference,
+            originalData.map((x) => {
+              return x.id_1;
+            }),
+            originalData.map((x) => {
+              return x.id_2;
+            })
           );
           this.plotMirrorData(this.bottomPeaks);
           this.getScores(top, bottom);
@@ -1139,24 +1351,25 @@ export default {
           this.plotData(this.topPeaks);
         }
       }
-      this.$emit('plottingFinished', null);
+      this.$emit("plottingFinished", null);
     },
     preInitializeModel: function () {
       this.nl.forEach((n) => {
-        this.fragmentTypes[n.name] =  { selected: false};
+        this.fragmentTypes[n.name] = { selected: false };
       });
 
       var oSpectrumData = {
         identificationID: null,
-        selectedIonList: [{y:[1]}, {b:[1]}],
-        selectedExtraPeakList: [ 'M' ],
+        selectedIonList: [{ y: [1] }, { b: [1] }],
+        selectedExtraPeakList: ["M"],
         selectedNeutralLossList: [],
         massTolerance: this.massTolerance[this.selectedMassTolerance + 0].value,
         minX: 0,
         maxY: 0,
         maxYRefSpectrum: 0,
         massToleranceUnit: this.selectedMassTolerance + 1, // default is Dalton
-        massToleranceType: this.massTolerance[this.selectedMassTolerance + 0].text, // default is Dalton
+        massToleranceType:
+          this.massTolerance[this.selectedMassTolerance + 0].text, // default is Dalton
         isReferenceSpectrum: this.isReferenceSpectrum,
         showReferenceSpectrum: false,
         neutralLossLimit: this.nlCount,
@@ -1171,13 +1384,13 @@ export default {
         precursorCharge: null,
         file: null,
         scan: null,
-        variableModifications: '',
-        fixedModifications: '',
+        variableModifications: "",
+        fixedModifications: "",
         fragmentTypes: this.getFragmentTypes(),
         matchingType: "% Base Peak",
         cutoff: 0,
-        modString: '',
-        aMods: []
+        modString: "",
+        aMods: [],
       };
 
       this.mirrorSequence = this.peptideSequence;
@@ -1185,15 +1398,16 @@ export default {
 
       // Update model
       this.oSpectrumModel = {
-        data: oSpectrumData
+        data: oSpectrumData,
       };
 
       this.oReferenceSpectrumModel = {
-        data: Object.assign({},oSpectrumData)
+        data: Object.assign({}, oSpectrumData),
       };
 
       this.oReferenceSpectrumModel.data.sequence = this.mirrorSequence;
-      this.oReferenceSpectrumModel.data.precursorCharge = this.mirrorSequencePrecursorCharge;
+      this.oReferenceSpectrumModel.data.precursorCharge =
+        this.mirrorSequencePrecursorCharge;
 
       this.mods = [];
       this.modsBottom = [];
@@ -1207,424 +1421,461 @@ export default {
     },
     initializeModel: function () {
       this.nl.forEach((n) => {
-        this.fragmentTypes[n.name] =  { selected: false};
+        this.fragmentTypes[n.name] = { selected: false };
       });
 
       let oData = this.spectrumEntry;
       var oSpectrumData = {
-        identificationID: this.isReferenceSpectrum ? oData.REFERENCE_IDENTIFICATION_ID : oData.IDENTIFICATION_ID,
+        identificationID: this.isReferenceSpectrum
+          ? oData.REFERENCE_IDENTIFICATION_ID
+          : oData.IDENTIFICATION_ID,
         massTolerance: this.massTolerance[this.selectedMassTolerance + 0].value,
         massToleranceUnit: this.selectedMassTolerance + 1, // default is Dalton
-        massToleranceType: this.massTolerance[this.selectedMassTolerance + 0].text, // default is Dalton
+        massToleranceType:
+          this.massTolerance[this.selectedMassTolerance + 0].text, // default is Dalton
         neutralLossLimit: this.nlCount,
         expertMode: this.expert,
-        sequence: this.isReferenceSpectrum ? oData.SEQUENCE : oData.PEPTIDE_SEQUENCE,
+        sequence: this.isReferenceSpectrum
+          ? oData.SEQUENCE
+          : oData.PEPTIDE_SEQUENCE,
         maxX: Math.round(oData.MASS * 10000) / 10000 || undefined,
         peptideId: oData.PEPTIDE_ID,
         mz: Math.round(oData.PRECURSOR_MZ * 10000) / 10000 || undefined,
         massError: Math.round(oData.MASS_ERROR_PPM * 100) / 100,
         charge: oData.PRECURSOR_CHARGE,
         precursorCharge: oData.PRECURSOR_CHARGE,
-        file: oData.MSFILE_NAME || '',
+        file: oData.MSFILE_NAME || "",
         scan: oData.SPECTRUM_ID,
-        variableModifications: oData.VARIABLE_MODIFICATION_STRING || '',
-        fixedModifications: oData.FIXED_MODIFICATION_STRING || '',
+        variableModifications: oData.VARIABLE_MODIFICATION_STRING || "",
+        fixedModifications: oData.FIXED_MODIFICATION_STRING || "",
         fragmentTypes: this.getFragmentTypes(),
-        matchingType: "% Base Peak"
+        matchingType: "% Base Peak",
       };
 
-      this.mirrorSequence = this.isReferenceSpectrum ? oData.SEQUENCE : oData.PEPTIDE_SEQUENCE;
+      this.mirrorSequence = this.isReferenceSpectrum
+        ? oData.SEQUENCE
+        : oData.PEPTIDE_SEQUENCE;
       this.mirrorSequencePrecursorCharge = oData.PRECURSOR_CHARGE;
-      
-      oSpectrumData = {...this.oSpectrumModel.data ,...oSpectrumData};
+
+      oSpectrumData = { ...this.oSpectrumModel.data, ...oSpectrumData };
       // Update model
       this.oSpectrumModel = {
-        data: oSpectrumData
+        data: oSpectrumData,
       };
 
       this.oReferenceSpectrumModel = {
-        data: Object.assign({},oSpectrumData)
+        data: Object.assign({}, oSpectrumData),
       };
 
       this.oReferenceSpectrumModel.data.sequence = this.mirrorSequence;
-      this.oReferenceSpectrumModel.data.precursorCharge =  this.mirrorSequencePrecursorCharge;
+      this.oReferenceSpectrumModel.data.precursorCharge =
+        this.mirrorSequencePrecursorCharge;
 
       this.setPreselectedMods(false);
       this.getSpectrumData();
-      this.getReferenceSpectra(this.spectrumEntry.PEPTIDE_ID, this.spectrumEntry.PRECURSOR_CHARGE);
+      this.getReferenceSpectra(
+        this.spectrumEntry.PEPTIDE_ID,
+        this.spectrumEntry.PRECURSOR_CHARGE
+      );
     },
     resetBottomMods: function () {
-      this.modsBottom= [];
-      this.modObjectBottom= { selectedMods: [] };
-      this.potentialModsBottom= [];
+      this.modsBottom = [];
+      this.modObjectBottom = { selectedMods: [] };
+      this.potentialModsBottom = [];
     },
-    resetBottom: function() {
-      this.bottomSpec= {
-        "x": [
-        ],
-        "y": [
-        ],
-        "id": [
-        ],
-        "color": [
-        ],
-        "label": [
-        ],
-        "labelCharge": [
-        ],
-        "neutralLosses": [
-        ],
-        "barwidth": [
-        ],
-        "massError": [
-        ],
-        "theoMz": [
-        ],
-        "percentBasePeak": [
-        ],
-        "TIC": 0
+    resetBottom: function () {
+      this.bottomSpec = {
+        x: [],
+        y: [],
+        id: [],
+        color: [],
+        label: [],
+        labelCharge: [],
+        neutralLosses: [],
+        barwidth: [],
+        massError: [],
+        theoMz: [],
+        percentBasePeak: [],
+        TIC: 0,
       };
-      this.peptideBottom= {
-        "sequence": "TESTPEPTIDE",
-        "precursorMz": null,
-        "precursorCharge": null,
-        "mods": [
-        {
-          "site": -1,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 0,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 1,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 2,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 3,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 4,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 5,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 6,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 7,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 8,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 9,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 10,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 11,
-          "deltaElement": null,
-          "deltaMass": 0
-        }
+      this.peptideBottom = {
+        sequence: "TESTPEPTIDE",
+        precursorMz: null,
+        precursorCharge: null,
+        mods: [
+          {
+            site: -1,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 0,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 1,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 2,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 3,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 4,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 5,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 6,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 7,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 8,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 9,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 10,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 11,
+            deltaElement: null,
+            deltaMass: 0,
+          },
         ],
-        "origin": "Origin"
+        origin: "Origin",
       };
-      this.score= {
-        sa: 0.00,
-        corr: 0.00
+      this.score = {
+        sa: 0.0,
+        corr: 0.0,
       };
-      this.scoreTop= {
-        sa: 0.00,
-        corr: 0.00
+      this.scoreTop = {
+        sa: 0.0,
+        corr: 0.0,
       };
-      this.scoreBottom= {
-        sa: 0.00,
-        corr: 0.00
+      this.scoreBottom = {
+        sa: 0.0,
+        corr: 0.0,
       };
     },
-    resetAll: function() {
-      this.panel= 0;
-      this.mods= [];
-      this.modObject= { selectedMods: [] };
-      this.predeterminedMods= [];
-      this.potentialMods= [];
-      this.topSpec= {
-        "x": [
-        ],
-        "y": [
-        ],
-        "id": [
-        ],
-        "color": [
-        ],
-        "label": [
-        ],
-        "labelCharge": [
-        ],
-        "neutralLosses": [
-        ],
-        "barwidth": [
-        ],
-        "massError": [
-        ],
-        "theoMz": [
-        ],
-        "percentBasePeak": [
-        ],
-        "TIC": 0,
-        "massErrorX": [
-        ],
-        "intensityError": [
-        ],
-        "intensityErrorIdsTop": [
+    resetAll: function () {
+      this.panel = 0;
+      this.mods = [];
+      this.modObject = { selectedMods: [] };
+      this.predeterminedMods = [];
+      this.potentialMods = [];
+      this.topSpec = {
+        x: [],
+        y: [],
+        id: [],
+        color: [],
+        label: [],
+        labelCharge: [],
+        neutralLosses: [],
+        barwidth: [],
+        massError: [],
+        theoMz: [],
+        percentBasePeak: [],
+        TIC: 0,
+        massErrorX: [],
+        intensityError: [],
+        intensityErrorIdsTop: [],
+        intensityErrorIdsBottom: [],
+      };
+      this.peptide = {
+        sequence: "TESTPEPTIDE",
+        precursorMz: null,
+        precursorCharge: null,
+        mods: [
+          {
+            site: -1,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 0,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 1,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 2,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 3,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 4,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 5,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 6,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 7,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 8,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 9,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 10,
+            deltaElement: null,
+            deltaMass: 0,
+          },
+          {
+            site: 11,
+            deltaElement: null,
+            deltaMass: 0,
+          },
         ],
-        "intensityErrorIdsBottom": [
-        ]
+        origin: "Origin",
       };
-      this.peptide= {
-        "sequence": "TESTPEPTIDE",
-        "precursorMz": null,
-        "precursorCharge": null,
-        "mods": [
-        {
-          "site": -1,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 0,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 1,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 2,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 3,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
-        {
-          "site": 4,
-          "deltaElement": null,
-          "deltaMass": 0
-        },
+      this.specViewSettings = {
+        toleranceThreshold: 40,
+        toleranceType: "ppm",
+        ionizationMode: "+",
+      };
+      this.oAcquisitionModeSet = [];
+      this.aAcquisitionModes = [];
+      this.topPeaks = {};
+      this.bottomPeaks = {};
+      this.mirrorOrigin = 0;
+      this.mirrorSequenceRules = [
+        (v) => v.length <= 30 || "Max 30 amino acids",
+      ];
+      this.mirrorSequence = "";
+      this.mirrorSequencePrecursorCharge = 1;
+      this.mirrorSequenceCE = 30;
+      this.selectedReferenceSpectrum = [];
+      this.selectedAcquisitionMode = "All";
+      this.aReferenceSpectrumList = [];
+      this.ions = [
         {
-          "site": 5,
-          "deltaElement": null,
-          "deltaMass": 0
+          ion: "a",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
         },
         {
-          "site": 6,
-          "deltaElement": null,
-          "deltaMass": 0
+          ion: "b",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
         },
         {
-          "site": 7,
-          "deltaElement": null,
-          "deltaMass": 0
+          ion: "c",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
         },
         {
-          "site": 8,
-          "deltaElement": null,
-          "deltaMass": 0
+          ion: "x",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
         },
         {
-          "site": 9,
-          "deltaElement": null,
-          "deltaMass": 0
+          ion: "y",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
         },
         {
-          "site": 10,
-          "deltaElement": null,
-          "deltaMass": 0
+          ion: "z",
+          charges: ["1+", "2+", "3+"],
+          state: [],
+          enabled: [0, 0, 0],
         },
-        {
-          "site": 11,
-          "deltaElement": null,
-          "deltaMass": 0
-        }
-        ],
-        "origin": "Origin"
-      };
-      this.specViewSettings= {
-        "toleranceThreshold": 40,
-        "toleranceType": "ppm",
-        "ionizationMode": "+"
-      };
-      this.oAcquisitionModeSet= [];
-      this.aAcquisitionModes= [];
-      this.topPeaks= {};
-      this.bottomPeaks= {};
-      this.mirrorOrigin= 0;
-      this.mirrorSequenceRules= [v => v.length <= 30 || 'Max 30 amino acids'];
-      this.mirrorSequence= '';
-      this.mirrorSequencePrecursorCharge= 1;
-      this.mirrorSequenceCE= 30;
-      this.selectedReferenceSpectrum= [];
-      this.selectedAcquisitionMode= 'All';
-      this.aReferenceSpectrumList= [];
-      this.ions= [
-      {ion: "a", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "b", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "c", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "x", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "y", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]},
-      {ion: "z", charges: ["1+", "2+","3+"], state:[], enabled: [0,0,0]}
       ];
-      this.extraPeaks= [
-      {ion: "yb", state: 0, enabled: 0},
-      {ion: "IM", state: 0, enabled: 0},
-      {ion: "M[H]", state: 0, enabled: 0}
+      this.extraPeaks = [
+        { ion: "yb", state: 0, enabled: 0 },
+        { ion: "IM", state: 0, enabled: 0 },
+        { ion: "M[H]", state: 0, enabled: 0 },
       ];
-      this.nl= [
-      {name: "H2O", state:0, enabled: 0},
-      {name: "NH3", state:0, enabled: 0},
-      {name: "CO", state:0, enabled: 0},
-      {name: "CO2", state:0, enabled: 0},
-      {name: "C2H4", state:0, enabled: 0},
-      {name: "C3H6", state:0, enabled: 0},
-      {name: "C4H8", state:0, enabled: 0},
-      {name: "C2H4O2", state:0, enabled: 0},
-      {name: "C2H5NO", state:0, enabled: 0},
-      {name: "C3H9N3", state:0, enabled: 0},
-      {name: "C4H6N2", state:0, enabled: 0},
-      {name: "CH2N2", state:0, enabled: 0}
+      this.nl = [
+        { name: "H2O", state: 0, enabled: 0 },
+        { name: "NH3", state: 0, enabled: 0 },
+        { name: "CO", state: 0, enabled: 0 },
+        { name: "CO2", state: 0, enabled: 0 },
+        { name: "C2H4", state: 0, enabled: 0 },
+        { name: "C3H6", state: 0, enabled: 0 },
+        { name: "C4H8", state: 0, enabled: 0 },
+        { name: "C2H4O2", state: 0, enabled: 0 },
+        { name: "C2H5NO", state: 0, enabled: 0 },
+        { name: "C3H9N3", state: 0, enabled: 0 },
+        { name: "C4H6N2", state: 0, enabled: 0 },
+        { name: "CH2N2", state: 0, enabled: 0 },
       ];
-      this.massTolerance= [
-      {text: 'ppm', value: 20},
-      {text: 'Da', value: 0.35}
+      this.massTolerance = [
+        { text: "ppm", value: 20 },
+        { text: "Da", value: 0.35 },
       ];
-      this.matchTolerance= [
-      {text: 'ppm', value: 20},
-      {text: 'Da', value: 0.35}
+      this.matchTolerance = [
+        { text: "ppm", value: 20 },
+        { text: "Da", value: 0.35 },
       ];
-      this.nlCount= 3;
-      this.maxNlCount= 3;
-      this.selectedMassTolerance= false;
-      this.selectedMatchTolerance= false;
-      this.expert= true;
-      this.fragmentTypes= {
-        "a": {
-          "selected": false,
-          "color": "#820cad",
-          "label": "a"
-        },
-        "b": {
-          "selected": false,
-          "color": "#0d75bc",
-          "label": "b"
-        },
-        "c": {
-          "selected": false,
-          "color": "#07a14a",
-          "label": "c"
-        },
-        "C": {
-          "selected": false,
-          "color": "#035729",
-          "label": "c-1"
-        },
-        "x": {
-          "selected": false,
-          "color": "#d1e02d",
-          "label": "x"
-        },
-        "y": {
-          "selected": false,
-          "color": "#be202d",
-          "label": "y"
-        },
-        "z": {
-          "selected": false,
-          "color": "#f79420",
-          "label": "z•"
+      this.nlCount = 3;
+      this.maxNlCount = 3;
+      this.selectedMassTolerance = false;
+      this.selectedMatchTolerance = false;
+      this.expert = true;
+      this.fragmentTypes = {
+        a: {
+          selected: false,
+          color: "#820cad",
+          label: "a",
+        },
+        b: {
+          selected: false,
+          color: "#0d75bc",
+          label: "b",
+        },
+        c: {
+          selected: false,
+          color: "#07a14a",
+          label: "c",
+        },
+        C: {
+          selected: false,
+          color: "#035729",
+          label: "c-1",
+        },
+        x: {
+          selected: false,
+          color: "#d1e02d",
+          label: "x",
+        },
+        y: {
+          selected: false,
+          color: "#be202d",
+          label: "y",
+        },
+        z: {
+          selected: false,
+          color: "#f79420",
+          label: "z•",
+        },
+        Z: {
+          selected: false,
+          color: "#A16016",
+          label: "z+1",
+        },
+        yb: {
+          selected: false,
+          color: "#00ff00",
+          label: "yb",
+        },
+        IM: {
+          selected: false,
+          color: "#ffff00",
+          label: "IM",
+        },
+        precursor: {
+          selected: true,
+          color: "#000000",
+        },
+        unassigned: {
+          selected: true,
+          color: "#a6a6a6",
         },
-        "Z": {
-          "selected": false,
-          "color": "#A16016",
-          "label": "z+1"
-        },
-        "yb": {
-          "selected": false,
-          "color": "#00ff00",
-          "label": "yb"
-        },
-        "IM": {
-          "selected": false,
-          "color": "#ffff00",
-          "label": "IM"
-        },
-        "precursor": {
-          "selected": true,
-          "color": "#000000"
-        },
-        "unassigned": {
-          "selected": true,
-          "color": "#a6a6a6"
-        }
       };
       this.resetBottom();
       this.resetBottomMods();
     },
-    resetFragmentTypes: function() {
+    resetFragmentTypes: function () {
       var ft = Object.keys(this.fragmentTypes);
       var that = this;
       ft.forEach((ion) => {
         that.fragmentTypes[ion].selected = false;
       });
     },
-    getFragmentTypes: function() {
+    getFragmentTypes: function () {
       this.resetFragmentTypes();
       var that = this;
-      this.ions.filter((ion) => {return ( ion.state.length !== 0)}).forEach((i) => {
-        that.fragmentTypes[i.ion].selected = true;
-      });
-      this.nl.filter((ion) => {return ( (ion.state + 0) !== 0)}).forEach((i) => {
-        that.fragmentTypes[i.name].selected = true;
-      });
-      if(this.extraPeaks.filter((ion) => {return (ion.ion === 'M[H]')})[0].state === 1) {
+      this.ions
+        .filter((ion) => {
+          return ion.state.length !== 0;
+        })
+        .forEach((i) => {
+          that.fragmentTypes[i.ion].selected = true;
+        });
+      this.nl
+        .filter((ion) => {
+          return ion.state + 0 !== 0;
+        })
+        .forEach((i) => {
+          that.fragmentTypes[i.name].selected = true;
+        });
+      if (
+        this.extraPeaks.filter((ion) => {
+          return ion.ion === "M[H]";
+        })[0].state === 1
+      ) {
         that.fragmentTypes.precursor.selected = true;
       }
-      if(this.extraPeaks.filter((ion) => {return (ion.ion === 'yb')})[0].state === 1) {
+      if (
+        this.extraPeaks.filter((ion) => {
+          return ion.ion === "yb";
+        })[0].state === 1
+      ) {
         that.fragmentTypes.yb.selected = true;
       }
-      if(this.extraPeaks.filter((ion) => {return (ion.ion === 'IM')})[0].state === 1) {
+      if (
+        this.extraPeaks.filter((ion) => {
+          return ion.ion === "IM";
+        })[0].state === 1
+      ) {
         that.fragmentTypes.IM.selected = true;
       }
       return this.fragmentTypes;
@@ -1632,71 +1883,95 @@ export default {
     updateIonCheckBoxes: function updateIonCheckBoxes() {
       var oSpectrumData = this.oSpectrumModel.data;
       var availableIons = oSpectrumData.rawData
-      .map((x)=>{
-        return ({ion: x.ion, charge: x.ch, intensity: x.oii})
-      }).filter((x) => {
-        return (x.intensity > 0)
-      }).reduce((p,n) => {
-        if (p.length === 0) {
-          return [{ion: n.ion, charges:[n.charge]}];
-        } else {
-          var pi = p.filter((x) => {return (x.ion === n.ion)});
-          if(pi.length === 0) {
-            return(p.concat([{ion: n.ion, charges:[n.charge]}]));
+        .map((x) => {
+          return { ion: x.ion, charge: x.ch, intensity: x.oii };
+        })
+        .filter((x) => {
+          return x.intensity > 0;
+        })
+        .reduce((p, n) => {
+          if (p.length === 0) {
+            return [{ ion: n.ion, charges: [n.charge] }];
           } else {
-            if (pi[0].charges.indexOf(n.charge) !== -1 ) {
-              return(p);
+            var pi = p.filter((x) => {
+              return x.ion === n.ion;
+            });
+            if (pi.length === 0) {
+              return p.concat([{ ion: n.ion, charges: [n.charge] }]);
             } else {
-              p.filter((x) => { return(x.ion === n.ion)})[0].charges.push(n.charge);
-              return(p);
+              if (pi[0].charges.indexOf(n.charge) !== -1) {
+                return p;
+              } else {
+                p.filter((x) => {
+                  return x.ion === n.ion;
+                })[0].charges.push(n.charge);
+                return p;
+              }
             }
           }
-        }
-      }, [])
-      .filter((x)=> {return(x.ion !== undefined)});
+        }, [])
+        .filter((x) => {
+          return x.ion !== undefined;
+        });
 
       this.disableAllButtons(0);
-      var that=this;
+      var that = this;
 
       //
       // make them enabled or disabled
       //
       availableIons.forEach((x) => {
-        var aPos = x.charges.map((e) => {return (e-1)});
+        var aPos = x.charges.map((e) => {
+          return e - 1;
+        });
 
-        var t_ion = that.ions.filter((ion) => { return (ion.ion === x.ion)})[0];
-        if(t_ion) {
-          aPos.forEach((i) => { that.ions.filter((ion) => { return (ion.ion === x.ion)})[0].enabled[i] = 1});
+        var t_ion = that.ions.filter((ion) => {
+          return ion.ion === x.ion;
+        })[0];
+        if (t_ion) {
+          aPos.forEach((i) => {
+            that.ions.filter((ion) => {
+              return ion.ion === x.ion;
+            })[0].enabled[i] = 1;
+          });
         } else {
-          if( x.ion === 'M') {
-            that.extraPeaks.filter((ion) => { return (ion.ion === 'M[H]')})[0].enabled = 1 ;
+          if (x.ion === "M") {
+            that.extraPeaks.filter((ion) => {
+              return ion.ion === "M[H]";
+            })[0].enabled = 1;
           } else {
-            that.extraPeaks.filter((ion) => { return (ion.ion === x.ion)})[0].enabled = 1;
+            that.extraPeaks.filter((ion) => {
+              return ion.ion === x.ion;
+            })[0].enabled = 1;
           }
         }
       });
 
-      var availableNL = oSpectrumData.rawData.filter((ion) => {return (ion.nln !== null)})
-      .map((x) => {return x.nln})
-      .reduce((p,n) => {
-        if (n !== 'Q' && p.indexOf(n) === -1) {
-          return p.concat(n);
-        } else {
-          return p;
-        }
-      }, []);
+      var availableNL = oSpectrumData.rawData
+        .filter((ion) => {
+          return ion.nln !== null;
+        })
+        .map((x) => {
+          return x.nln;
+        })
+        .reduce((p, n) => {
+          if (n !== "Q" && p.indexOf(n) === -1) {
+            return p.concat(n);
+          } else {
+            return p;
+          }
+        }, []);
       availableNL.forEach((n) => {
         var existing = that.nl.filter((x) => {
-          return (x.name === n)
+          return x.name === n;
         });
-        if(existing.length > 0) {
+        if (existing.length > 0) {
           that.nl.filter((x) => {
-            return (x.name === n)
+            return x.name === n;
           })[0].enabled = 1;
         }
       });
 
-
       //
       // make them selected or not
       //
@@ -1704,188 +1979,233 @@ export default {
 
       oSpectrumData.selectedIonList.forEach((ion) => {
         let ionName = Object.keys(ion)[0];
-        let ionNumbers = ion[ionName].map((pos) => {return(pos -1)});
+        let ionNumbers = ion[ionName].map((pos) => {
+          return pos - 1;
+        });
 
-        that.ions.filter((f) => { return(f.ion === ionName)})[0].state = ionNumbers;
+        that.ions.filter((f) => {
+          return f.ion === ionName;
+        })[0].state = ionNumbers;
       });
       oSpectrumData.selectedExtraPeakList.forEach((ionName) => {
-        if (ionName === 'M') {
-          that.extraPeaks.filter((f) => { return(f.ion === 'M[H]')})[0].state = 1 * that.extraPeaks.filter((f) => { return(f.ion === 'M[H]')})[0].enabled;
+        if (ionName === "M") {
+          that.extraPeaks.filter((f) => {
+            return f.ion === "M[H]";
+          })[0].state =
+            1 *
+            that.extraPeaks.filter((f) => {
+              return f.ion === "M[H]";
+            })[0].enabled;
         } else {
-          that.extraPeaks.filter((f) => { return(f.ion === ionName)})[0].state = 1 * that.extraPeaks.filter((f) => { return(f.ion === ionName)})[0].enabled;
+          that.extraPeaks.filter((f) => {
+            return f.ion === ionName;
+          })[0].state =
+            1 *
+            that.extraPeaks.filter((f) => {
+              return f.ion === ionName;
+            })[0].enabled;
         }
       });
 
       oSpectrumData.selectedNeutralLossList.forEach((n) => {
         that.nl.filter((x) => {
-          return (x.name === n)
+          return x.name === n;
         })[0].state = 1;
       });
     },
-    getMirrorSpectrum: function(refId = null, topSpectrum = false) {
+    getMirrorSpectrum: function (refId = null, topSpectrum = false) {
       this.prositError = [];
-      if(refId !== null) {
+      if (refId !== null) {
         this.selectedReferenceSpectrum = refId;
       }
 
       var modString = "";
-      if(topSpectrum) {
+      if (topSpectrum) {
         if (this.modObject.selectedMods != undefined) {
-          this.modObject.selectedMods.sort((x,y) => {return x.index > y.index});
-          this.modObject.selectedMods.forEach(function(mod) {
-            if (modString != ""){
-              modString +=",";
+          this.modObject.selectedMods.sort((x, y) => {
+            return x.index > y.index;
+          });
+          this.modObject.selectedMods.forEach(function (mod) {
+            if (modString != "") {
+              modString += ",";
             }
-            modString += mod.name + "@"+mod.site + (mod.index+1);
+            modString += mod.name + "@" + mod.site + (mod.index + 1);
           });
         }
       } else {
         if (this.modObjectBottom.selectedMods !== undefined) {
-          this.modObjectBottom.selectedMods.sort((x,y) => {return x.index > y.index});
-          this.modObjectBottom.selectedMods.forEach(function(mod) {
-            if (modString != ""){
-              modString +=",";
+          this.modObjectBottom.selectedMods.sort((x, y) => {
+            return x.index > y.index;
+          });
+          this.modObjectBottom.selectedMods.forEach(function (mod) {
+            if (modString != "") {
+              modString += ",";
             }
-            modString += mod.name + "@"+mod.site + (mod.index+1);
+            modString += mod.name + "@" + mod.site + (mod.index + 1);
           });
         }
       }
 
-
       var that = this;
       var url;
-      var params= {};
+      var params = {};
       this.oReferenceSpectrumModel.data.sequence = that.mirrorSequence;
-      this.oReferenceSpectrumModel.data.charge = that.mirrorSequencePrecursorCharge;
-      this.oReferenceSpectrumModel.data.precursorCharge = that.mirrorSequencePrecursorCharge;
+      this.oReferenceSpectrumModel.data.charge =
+        that.mirrorSequencePrecursorCharge;
+      this.oReferenceSpectrumModel.data.precursorCharge =
+        that.mirrorSequencePrecursorCharge;
 
       if (this.mirrorOrigin === 0) {
-        url = this.$store.state.host+'/proteomicsdb/logic/api/getFragmentationPrediction.xsjs';
+        url =
+          this.$store.state.host +
+          "/proteomicsdb/logic/api/getFragmentationPrediction.xsjs";
         params = {
           sequence: [that.mirrorSequence],
           charge: [that.mirrorSequencePrecursorCharge],
           ce: [that.mirrorSequenceCE],
-          mods : [modString]
+          mods: [modString],
         };
 
-        axios.post(url, params)
-        .then(function (response) {
-          that.oReferenceSpectrumModel.data.rawData = response.data[0].ions.map((ion) => {return( {
-              oim: ion.mz,
-              ch: ion.charge,
-              oii: ion.intensity,
-              num: ion.number,
-              ion: ion.ion,
-              nln: null
-          })});
-          that.oReferenceSpectrumModel.data.fragmentTypes = that.getFragmentTypes();
-          that.prepareReferenceSpectrum();
-          that.mergeAndCalculateScores();
-        })
-        .catch(error => {
-          that.prositError.push(error.response.data.message);
-          that.resetBottom();
-        });
+        axios
+          .post(url, params)
+          .then(function (response) {
+            that.oReferenceSpectrumModel.data.rawData =
+              response.data[0].ions.map((ion) => {
+                return {
+                  oim: ion.mz,
+                  ch: ion.charge,
+                  oii: ion.intensity,
+                  num: ion.number,
+                  ion: ion.ion,
+                  nln: null,
+                };
+              });
+            that.oReferenceSpectrumModel.data.fragmentTypes =
+              that.getFragmentTypes();
+            that.prepareReferenceSpectrum();
+            that.mergeAndCalculateScores();
+          })
+          .catch((error) => {
+            that.prositError.push(error.response.data.message);
+            that.resetBottom();
+          });
       } else {
         var id = that.selectedReferenceSpectrum;
-        url = this.$store.state.host+'/proteomicsdb/logic/getReferenceSpectrumInformation.xsjs'
+        url =
+          this.$store.state.host +
+          "/proteomicsdb/logic/getReferenceSpectrumInformation.xsjs";
         params = {
           id: id.key.split("-")[0],
-          origin: id.key.split("-")[1]
+          origin: id.key.split("-")[1],
         };
-        axios.get(url, {params: params})
-        .then(function (response) {
-          that.oReferenceSpectrumModel.data.rawData = response.data.ions.map((ion) => {return( {
-              mZ: ion.oim,
-              intensity: ion.oii
-          })});
-          that.oReferenceSpectrumModel.data.fragmentTypes = that.getFragmentTypes();
+        axios.get(url, { params: params }).then(function (response) {
+          that.oReferenceSpectrumModel.data.rawData = response.data.ions.map(
+            (ion) => {
+              return {
+                mZ: ion.oim,
+                intensity: ion.oii,
+              };
+            }
+          );
+          that.oReferenceSpectrumModel.data.fragmentTypes =
+            that.getFragmentTypes();
           that.prepareReferenceSpectrum();
           that.mergeAndCalculateScores();
-        })
+        });
       }
-
     },
-    getSpectrumData: function() {
+    getSpectrumData: function () {
       var that = this;
       var oSpectrumData = this.oSpectrumModel.data;
       var url;
 
       if (oSpectrumData.isReferenceSpectrum) {
-        url = this.$store.state.host+'/proteomicsdb/logic/getReferenceSpectrumInformationNew.xsjs'
+        url =
+          this.$store.state.host +
+          "/proteomicsdb/logic/getReferenceSpectrumInformationNew.xsjs";
       } else {
-        url = this.$store.state.host+'/proteomicsdb/logic/getSpectrumInformationNew.xsjs'
+        url =
+          this.$store.state.host +
+          "/proteomicsdb/logic/getSpectrumInformationNew.xsjs";
       }
 
+      axios
+        .get(url, {
+          params: {
+            id: this.oSpectrumModel.data.identificationID,
+            tolerance: this.oSpectrumModel.data.massTolerance,
+            tolerance_type: this.oSpectrumModel.data.massToleranceUnit,
+            instrument_id: this.oSpectrumModel.data.instrumentId,
+            max_nl: this.oSpectrumModel.data.neutralLossLimit,
+            expert_mode: this.oSpectrumModel.data.expertMode,
+          },
+        })
+        .then(function (response) {
+          that.oSpectrumModel.data.rawData = response.data.ions;
+          that.disableAllButtons(1);
+          that.updateIonCheckBoxes();
+          that.oSpectrumModel.data.fragmentTypes = that.getFragmentTypes();
+          that.prepareSpectrum();
 
-      axios.get(url, {params: {
-          id: this.oSpectrumModel.data.identificationID,
-          tolerance: this.oSpectrumModel.data.massTolerance,
-          tolerance_type: this.oSpectrumModel.data.massToleranceUnit,
-          instrument_id: this.oSpectrumModel.data.instrumentId,
-          max_nl: this.oSpectrumModel.data.neutralLossLimit,
-          expert_mode: this.oSpectrumModel.data.expertMode
-      }}).then(function (response) {
-        that.oSpectrumModel.data.rawData = response.data.ions;
-        that.disableAllButtons(1);
-        that.updateIonCheckBoxes();
-        that.oSpectrumModel.data.fragmentTypes = that.getFragmentTypes();
-        that.prepareSpectrum();
-
-        that.getMirrorSpectrum();
-        that.mergeAndCalculateScores();
-      })
-
+          that.getMirrorSpectrum();
+          that.mergeAndCalculateScores();
+        });
     },
-    updateConfiguration: function (topSpectrum = true){
-      var oData = topSpectrum ? this.oSpectrumModel.data : this.oReferenceSpectrumModel.data;
-      oData.massTolerance = this.massTolerance[this.selectedMassTolerance + 0].value;
+    updateConfiguration: function (topSpectrum = true) {
+      var oData = topSpectrum
+        ? this.oSpectrumModel.data
+        : this.oReferenceSpectrumModel.data;
+      oData.massTolerance =
+        this.massTolerance[this.selectedMassTolerance + 0].value;
       oData.massToleranceUnit = this.selectedMassTolerance + 1; // default is ppm
-      oData.massToleranceType = this.massTolerance[this.selectedMassTolerance + 0].text; // default is ppm
+      oData.massToleranceType =
+        this.massTolerance[this.selectedMassTolerance + 0].text; // default is ppm
       oData.neutralLossLimit = this.nlCount;
       oData.expertMode = this.expert;
     },
-    getSpectra: function() {
+    getSpectra: function () {
       this.updateConfiguration();
       this.getSpectrumData();
     },
-    prepareSpectrum: function() {
+    prepareSpectrum: function () {
       var useT = new useTransformer.Annotation(this.oSpectrumModel.data);
       var returnedDataT = useT.fakeAPI();
       this.topPeaks = returnedDataT;
       //this.plotData(returnedDataT);
     },
-    prepareReferenceSpectrum: function() {
-      var useB = this.mirrorOrigin === 0 
-      ? new useTransformer.Annotation(this.oReferenceSpectrumModel.data) 
-      : new annotationTransformer.Annotation(this.oReferenceSpectrumModel.data);
+    prepareReferenceSpectrum: function () {
+      var useB =
+        this.mirrorOrigin === 0
+          ? new useTransformer.Annotation(this.oReferenceSpectrumModel.data)
+          : new annotationTransformer.Annotation(
+              this.oReferenceSpectrumModel.data
+            );
       var returnedDataB = useB.fakeAPI();
       this.bottomPeaks = returnedDataB;
       //this.plotMirrorData(returnedDataB);
     },
-    plotMirrorData: function(returnedData) {
-      this.peptideBottom =
-      {
+    plotMirrorData: function (returnedData) {
+      this.peptideBottom = {
         sequence: returnedData.sequence,
         precursorMz: returnedData.precursorMz,
         precursorCharge: returnedData.precursorCharge,
         mods: returnedData.modifications,
-        origin: this.mirrorOrigin === 0 ? 'Prosit' : 'ProteomeTools'
+        origin: this.mirrorOrigin === 0 ? "Prosit" : "ProteomeTools",
       };
 
-      this.bottomSpec.x = [ ];
-      this.bottomSpec.y = [ ];
-      this.bottomSpec.color = [ ];
-      this.bottomSpec.label = [ ];
-      this.bottomSpec.labelCharge = [ ];
-      this.bottomSpec.neutralLosses = [ ];
-      this.bottomSpec.barwidth = [ ];
-      this.bottomSpec.massError = [ ];
-      this.bottomSpec.theoMz = [ ];
-      this.bottomSpec.percentBasePeak = [ ];
+      this.bottomSpec.x = [];
+      this.bottomSpec.y = [];
+      this.bottomSpec.color = [];
+      this.bottomSpec.label = [];
+      this.bottomSpec.labelCharge = [];
+      this.bottomSpec.neutralLosses = [];
+      this.bottomSpec.barwidth = [];
+      this.bottomSpec.massError = [];
+      this.bottomSpec.theoMz = [];
+      this.bottomSpec.percentBasePeak = [];
       this.bottomSpec.TIC = 0;
       var that = this;
-      returnedData.peaks.forEach(function(data, i) {
+      returnedData.peaks.forEach(function (data, i) {
         that.bottomSpec.x.push(data.mz);
         that.bottomSpec.y.push(data.intensity);
         that.bottomSpec.id.push(i);
@@ -1933,7 +2253,9 @@ export default {
           that.bottomSpec.labelCharge.push(fragment.charge);
           // two label types, precursor, or regular label w/wo neutral losses
           if (fragment.isPrecursor) {
-            that.bottomSpec.label.push("[" + fragment.type + fragment.number + "]");
+            that.bottomSpec.label.push(
+              "[" + fragment.type + fragment.number + "]"
+            );
           } else {
             that.bottomSpec.label.push(fragment.type + fragment.number);
           }
@@ -1944,22 +2266,27 @@ export default {
       });
     },
 
-    plotData: function(returnedData, returnedError = [], returnedErrorX = [], intensityError=[], intensityErrorIdsTop=[], intensityErrorIdsBottom=[]) {
-      this.peptide =
-      {
+    plotData: function (
+      returnedData,
+      returnedError = [],
+      returnedErrorX = [],
+      intensityError = [],
+      intensityErrorIdsTop = [],
+      intensityErrorIdsBottom = []
+    ) {
+      this.peptide = {
         sequence: returnedData.sequence,
         precursorMz: returnedData.precursorMz,
         precursorCharge: returnedData.precursorCharge,
         mods: returnedData.modifications,
-        origin: 'Experimental'
-
+        origin: "Experimental",
       };
 
-      this.specViewSettings =
-      {
-        toleranceThreshold: this.massTolerance[this.selectedMassTolerance + 0].value,
+      this.specViewSettings = {
+        toleranceThreshold:
+          this.massTolerance[this.selectedMassTolerance + 0].value,
         toleranceType: this.massTolerance[this.selectedMassTolerance + 0].text,
-        ionizationMode: ""
+        ionizationMode: "",
       };
 
       if (returnedData.precursorCharge > 0) {
@@ -1968,19 +2295,19 @@ export default {
         this.specViewSettings.ionizationMode = "-";
       }
 
-      this.topSpec.x = [ ];
-      this.topSpec.y = [ ];
-      this.topSpec.color = [ ];
-      this.topSpec.label = [ ];
-      this.topSpec.labelCharge = [ ];
-      this.topSpec.neutralLosses = [ ];
-      this.topSpec.barwidth = [ ];
-      this.topSpec.massError = [ ];
-      this.topSpec.theoMz = [ ];
-      this.topSpec.percentBasePeak = [ ];
+      this.topSpec.x = [];
+      this.topSpec.y = [];
+      this.topSpec.color = [];
+      this.topSpec.label = [];
+      this.topSpec.labelCharge = [];
+      this.topSpec.neutralLosses = [];
+      this.topSpec.barwidth = [];
+      this.topSpec.massError = [];
+      this.topSpec.theoMz = [];
+      this.topSpec.percentBasePeak = [];
       this.topSpec.TIC = 0;
       var that = this;
-      returnedData.peaks.forEach(function(data, i) {
+      returnedData.peaks.forEach(function (data, i) {
         that.topSpec.x.push(data.mz);
         that.topSpec.y.push(data.intensity);
         that.topSpec.id.push(i);
@@ -2030,7 +2357,9 @@ export default {
           that.topSpec.labelCharge.push(fragment.charge);
           // two label types, precursor, or regular label w/wo neutral losses
           if (fragment.isPrecursor) {
-            that.topSpec.label.push("[" + fragment.type + fragment.number + "]");
+            that.topSpec.label.push(
+              "[" + fragment.type + fragment.number + "]"
+            );
           } else {
             that.topSpec.label.push(fragment.type + fragment.number);
           }
@@ -2043,23 +2372,30 @@ export default {
         that.topSpec.intensityError = intensityError;
         that.topSpec.intensityErrorIdsTop = intensityErrorIdsTop;
         that.topSpec.intensityErrorIdsBottom = intensityErrorIdsBottom;
-
       });
     },
 
-    getReferenceSpectra: function(iPeptideId, iCharge){
+    getReferenceSpectra: function (iPeptideId, iCharge) {
       var that = this;
 
-      axios.get(this.$store.state.host+'/proteomicsdb/logic/getReferenceSpectrum.xsjs', { params: {
-          id: iPeptideId,
-          charge: iCharge
-        }
-      }).then(function(response) {
-        that.refreshReferenceSpectrumList(response.data.filter((x) => x.source_type !== 'PREDICTION'));
-      });
-
+      axios
+        .get(
+          this.$store.state.host +
+            "/proteomicsdb/logic/getReferenceSpectrum.xsjs",
+          {
+            params: {
+              id: iPeptideId,
+              charge: iCharge,
+            },
+          }
+        )
+        .then(function (response) {
+          that.refreshReferenceSpectrumList(
+            response.data.filter((x) => x.source_type !== "PREDICTION")
+          );
+        });
     },
-    refreshReferenceSpectrumList: function(oData) {
+    refreshReferenceSpectrumList: function (oData) {
       var that = this;
       this.oAcquisitionModeSet = {};
 
@@ -2068,19 +2404,21 @@ export default {
       }
       if (this.oReferenceSpectra) {
         // fill aquisition mode dropdown
-        this.oReferenceSpectra.forEach(function iterateEachSpectrum(oReferenceSpectrum) {
+        this.oReferenceSpectra.forEach(function iterateEachSpectrum(
+          oReferenceSpectrum
+        ) {
           var oMode = oReferenceSpectrum.mode;
           var aDefinedModes = [];
           if (oMode.fragmentationMethod) {
-            aDefinedModes.push('Fragmentation: ' + oMode.fragmentationMethod);
+            aDefinedModes.push("Fragmentation: " + oMode.fragmentationMethod);
           }
           if (oMode.collisionEnergy) {
-            aDefinedModes.push('CE: ' + oMode.collisionEnergy);
+            aDefinedModes.push("CE: " + oMode.collisionEnergy);
           }
           if (oMode.massAnalyzer) {
             aDefinedModes.push(oMode.massAnalyzer);
           }
-          that.oAcquisitionModeSet[aDefinedModes.join(' - ')] = oMode;
+          that.oAcquisitionModeSet[aDefinedModes.join(" - ")] = oMode;
         });
 
         this.aAcquisitionModes = ["All"];
@@ -2094,44 +2432,58 @@ export default {
 
         // makes no sense to put this to < 1
         //if (cReferenceSpectrumList.getItems().length <= 1) {
-          //  that._Accordion.openSection(that._AccordionFragments.getId());
-          //  that._AccordionReferenceSpectrum.setEnabled(false);
+        //  that._Accordion.openSection(that._AccordionFragments.getId());
+        //  that._AccordionReferenceSpectrum.setEnabled(false);
         //}
       }
     },
-    triggerFilterReferenceSpectrumList: function() {
-      this.filterReferenceSpectrumList(this.oReferenceSpectra, this.oAcquisitionModeSet[this.selectedAcquisitionMode]);
+    triggerFilterReferenceSpectrumList: function () {
+      this.filterReferenceSpectrumList(
+        this.oReferenceSpectra,
+        this.oAcquisitionModeSet[this.selectedAcquisitionMode]
+      );
     },
     filterReferenceSpectrumList: function (localSpectra, oPeptideMode) {
       var that = this;
       function hasMatchingAquisitionMode(oReferenceSpectrum) {
         let oRefMode = oReferenceSpectrum.mode;
-        let bIsSameMode = oRefMode.collisionEnergy === oPeptideMode.collisionEnergy &&
-        oRefMode.massAnalyzer === oPeptideMode.massAnalyzer &&
-        oRefMode.fragmentationMethod === oPeptideMode.fragmentationMethod;
+        let bIsSameMode =
+          oRefMode.collisionEnergy === oPeptideMode.collisionEnergy &&
+          oRefMode.massAnalyzer === oPeptideMode.massAnalyzer &&
+          oRefMode.fragmentationMethod === oPeptideMode.fragmentationMethod;
         return bIsSameMode;
       }
 
       function hasMatchingModifications(oReferenceSpectrum) {
         function sortLexicographically(sModifications) {
-          var S_SEPARATOR = '; ';
+          var S_SEPARATOR = "; ";
           return sModifications.split(S_SEPARATOR).sort().join(S_SEPARATOR);
         }
         var oSpectrumData = that.oSpectrumModel.data;
-        var sFixedMod = sortLexicographically(oSpectrumData.fixedModifications || '');
-        var sVariableMod = sortLexicographically(oSpectrumData.variableModifications || '');
-        var sReferenceFixedMod = sortLexicographically(oReferenceSpectrum.fixedModifications || '');
-        var sReferenceVariableMod = sortLexicographically(oReferenceSpectrum.variableModifications || '');
-        return sFixedMod === sReferenceFixedMod &&
-        sVariableMod === sReferenceVariableMod;
+        var sFixedMod = sortLexicographically(
+          oSpectrumData.fixedModifications || ""
+        );
+        var sVariableMod = sortLexicographically(
+          oSpectrumData.variableModifications || ""
+        );
+        var sReferenceFixedMod = sortLexicographically(
+          oReferenceSpectrum.fixedModifications || ""
+        );
+        var sReferenceVariableMod = sortLexicographically(
+          oReferenceSpectrum.variableModifications || ""
+        );
+        return (
+          sFixedMod === sReferenceFixedMod &&
+          sVariableMod === sReferenceVariableMod
+        );
       }
 
       function hasHighScore(oReferenceSpectrum) {
         var F_SCORE_THRESHOLD = 20.0;
         var F_COUNT_THRESHOLD = 3;
-        if (oReferenceSpectrum.mode.origin == 'Predicted') {
+        if (oReferenceSpectrum.mode.origin == "Predicted") {
           return oReferenceSpectrum.score > F_COUNT_THRESHOLD;
-        } else if (oReferenceSpectrum.mode.origin == 'Measured') {
+        } else if (oReferenceSpectrum.mode.origin == "Measured") {
           return oReferenceSpectrum.score > F_SCORE_THRESHOLD;
         }
         return false;
@@ -2139,64 +2491,90 @@ export default {
 
       function addReferenceSpectrumToList(oReferenceSpectrum) {
         function replaceEmptyString(string) {
-          return string ? string : 'None';
+          return string ? string : "None";
         }
 
-        var sText = oReferenceSpectrum.name + ' - ' + oReferenceSpectrum.mode.fragmentationMethod + ', ' +
-        (oReferenceSpectrum.source_type === 'PREDICTION' ? 'NCE' : 'CE') + ' ' + oReferenceSpectrum.mode.collisionEnergy;
+        var sText =
+          oReferenceSpectrum.name +
+          " - " +
+          oReferenceSpectrum.mode.fragmentationMethod +
+          ", " +
+          (oReferenceSpectrum.source_type === "PREDICTION" ? "NCE" : "CE") +
+          " " +
+          oReferenceSpectrum.mode.collisionEnergy;
 
         var fMods = replaceEmptyString(oReferenceSpectrum.fixedModifications);
-        var vMods = replaceEmptyString(oReferenceSpectrum.variableModifications);
-        var sTooltip = 'charge: ' + oReferenceSpectrum.p_charge + ' <br/>' +
-        'id: ' + oReferenceSpectrum.r_id + ' <br/>' +
-        'fixed modifications: ' + fMods + ' <br/>' +
-        'variable modifications: ' + vMods + ' <br/>' +
-        'fragmentation method: ' + oReferenceSpectrum.mode.fragmentationMethod + ' <br/>' +
-        'collision energy: ' + oReferenceSpectrum.mode.collisionEnergy + ' <br/>' +
-        'mass analyzer: ' + oReferenceSpectrum.mode.massAnalyzer;
+        var vMods = replaceEmptyString(
+          oReferenceSpectrum.variableModifications
+        );
+        var sTooltip =
+          "charge: " +
+          oReferenceSpectrum.p_charge +
+          " <br/>" +
+          "id: " +
+          oReferenceSpectrum.r_id +
+          " <br/>" +
+          "fixed modifications: " +
+          fMods +
+          " <br/>" +
+          "variable modifications: " +
+          vMods +
+          " <br/>" +
+          "fragmentation method: " +
+          oReferenceSpectrum.mode.fragmentationMethod +
+          " <br/>" +
+          "collision energy: " +
+          oReferenceSpectrum.mode.collisionEnergy +
+          " <br/>" +
+          "mass analyzer: " +
+          oReferenceSpectrum.mode.massAnalyzer;
         var sKey = oReferenceSpectrum.r_id;
         that.aReferenceSpectrumList.push({
           text: sText,
-          key: sKey + '-' + oReferenceSpectrum.mode.origin,
-          tooltip: sTooltip
+          key: sKey + "-" + oReferenceSpectrum.mode.origin,
+          tooltip: sTooltip,
         });
       }
 
       //this.aReferenceSpectrumList = [
       //{
-        //  text: 'None',
-        //  key: 'None'
+      //  text: 'None',
+      //  key: 'None'
       //}
       //];
 
-      if (typeof oPeptideMode !== 'undefined') {
+      if (typeof oPeptideMode !== "undefined") {
         localSpectra
-        .filter(hasMatchingAquisitionMode)
-        .filter(hasMatchingModifications)
-        .filter(hasHighScore)
-        .forEach(addReferenceSpectrumToList);
+          .filter(hasMatchingAquisitionMode)
+          .filter(hasMatchingModifications)
+          .filter(hasHighScore)
+          .forEach(addReferenceSpectrumToList);
       } else {
         localSpectra
-        .filter(hasMatchingModifications)
-        .filter(hasHighScore)
-        .forEach(addReferenceSpectrumToList);
+          .filter(hasMatchingModifications)
+          .filter(hasHighScore)
+          .forEach(addReferenceSpectrumToList);
       }
     },
 
-
-    getAccessionId: function() {
+    getAccessionId: function () {
       var that = this;
-      axios.get(this.$store.state.host+'/proteomicsdb/logic/pathways/getAccessionId.xsjs', {params: {protein_id: that.proteinId}}).then(function (response) {
-        that.PlotInformationModel.AccessionId = response.data.AccessionId;
-      })
-    }
-  },
-  computed: {
+      axios
+        .get(
+          this.$store.state.host +
+            "/proteomicsdb/logic/pathways/getAccessionId.xsjs",
+          { params: { protein_id: that.proteinId } }
+        )
+        .then(function (response) {
+          that.PlotInformationModel.AccessionId = response.data.AccessionId;
+        });
+    },
   },
+  computed: {},
   mounted() {
     this.preInitializeModel();
-  }
-}
+  },
+};
 </script>
 <style scss>
 </style>
diff --git a/TissueExpressionBars.vue b/TissueExpressionBars.vue
index bb3afcb..d2cbd14 100644
--- a/TissueExpressionBars.vue
+++ b/TissueExpressionBars.vue
@@ -1,36 +1,36 @@
 <template>
-  <v-card style="height:750px;max-height:750px;">
+  <v-card style="height: 750px; max-height: 750px">
     <expressionbars
-          ref="expressionbarsref"
-          :data="data"
-          :barAttributes="barAttributes"
-          :svgAttributes="svgAttributes"
-          @barSelected="barSelected"
-          />
+      ref="expressionbarsref"
+      :data="data"
+      :barAttributes="barAttributes"
+      :svgAttributes="svgAttributes"
+      @barSelected="barSelected"
+    />
   </v-card>
 </template>
 
 <script>
-import expressionbars from '@/vue-d3-components/ExpressionBars';
+import expressionbars from "@/vue-d3-components/ExpressionBars";
 
 export default {
-  name: 'proteinExpressionBodymap',
+  name: "proteinExpressionBodymap",
   components: {
-    expressionbars
+    expressionbars,
   },
   props: {
     minWidth: {
       type: Number,
-      default: 400
+      default: 400,
     },
     minHeight: {
       type: Number,
-      default: 400
+      default: 400,
     },
     data: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data: function () {
     return {
@@ -50,18 +50,23 @@ export default {
           return d.TISSUE_ID;
         },
         tipsy: function tipsy(d) {
-          var mouseOverLabel = '';
+          var mouseOverLabel = "";
           if (d.SAP_SYNONYM) {
-            mouseOverLabel = d.TISSUE_NAME + '<hr>';
+            mouseOverLabel = d.TISSUE_NAME + "<hr>";
           }
-          mouseOverLabel = mouseOverLabel + 'Id: ' + d.TISSUE_ID + '<hr> Intensity: ' + d.NORMALIZED_INTENSITY.toFixed(2);
+          mouseOverLabel =
+            mouseOverLabel +
+            "Id: " +
+            d.TISSUE_ID +
+            "<hr> Intensity: " +
+            d.NORMALIZED_INTENSITY.toFixed(2);
           return mouseOverLabel;
-        }
+        },
       },
       svgAttributes: {
-        x_axis_label: 'intensity (log2 top3)',
-        y_axis_label: 'tissues',
-        title: 'Median protein expression',
+        x_axis_label: "intensity (log2 top3)",
+        y_axis_label: "tissues",
+        title: "Median protein expression",
         width: 260,
         margin: {
           top: 55,
@@ -69,34 +74,31 @@ export default {
           right: 20,
           bottom: 0,
           chart: {
-            top: 0
-          }
-        }
-      }
+            top: 0,
+          },
+        },
+      },
     };
   },
-  computed: {
-  },
-  watch: {
-  },
+  computed: {},
+  watch: {},
   methods: {
-    toggleBarTissueId: function(data) {
+    toggleBarTissueId: function (data) {
       this.$refs.expressionbarsref.toggleBarTissueId(data);
     },
-    toggleBar: function(data) {
+    toggleBar: function (data) {
       this.$refs.expressionbarsref.toggleBar(data);
     },
-    barSelected: function(data) {
-      this.$emit('barSelected', data);
+    barSelected: function (data) {
+      this.$emit("barSelected", data);
     },
     resetBarSelection: function () {
       this.$refs.expressionbarsref.resetBarSelection();
     },
-    getSVG: function() {
+    getSVG: function () {
       return this.$refs.expressionbarsref.getSVG();
-    }
+    },
   },
-  mounted() {
-  }
-}
+  mounted() {},
+};
 </script>