Small fixes regarding the spectra, topographic and surface plots

app.jl

@@ -201,7 +201,7 @@ function loadContourPlot(interfaceImg::String)
     Y=repeat(reshape(y, length(y), 1), 1, length(x))
                 
     layout=PlotlyBase.Layout(
-        title="2D Topographic Map",
+        title="2D Topographic Map of $cleaned_img",
         xaxis=PlotlyBase.attr(
             title="X",
             scaleanchor="y"
@@ -262,12 +262,12 @@ function loadSurfacePlot(interfaceImg::String)
     aspect_ratio=attr(x=1, y=length(y) / length(x), z=0.5)
     # Define the layout for the 3D plot
     layout3D=PlotlyBase.Layout(
-        title="3D Surface Plot",
+        title="3D Surface Plot of $cleaned_img",
         scene=attr(
             xaxis_nticks=x_nticks,
             yaxis_nticks=y_nticks,
             zaxis_nticks=z_nticks, 
-            camera=attr(eye=attr(x=0, y=-1, z=0.5)), 
+            camera=attr(eye=attr(x=0, y=1, z=0.5)), 
             aspectratio=aspect_ratio
         ),
         margin=attr(l=0,r=0,t=120,b=0,pad=0)
@@ -592,7 +592,7 @@ end
     end
     
     @onbutton mainProcess begin
-    #@onchange Nmass begin
+        #@onchange Nmass begin
         progress=true # Start progress button animation
         btnStartDisable=true # We disable the button to avoid multiple requests
         btnPlotDisable=true
@@ -705,6 +705,7 @@ end
         end
         btnStartDisable=false
         btnPlotDisable=false
+        btnOpticalDisable = false
         if isfile(full_routeMz)
             # We enable coord search and spectra plot creation
             btnSpectraDisable=false
@@ -738,8 +739,20 @@ end
             )
             # dims=size(spectraMz)
             # scansMax=dims[2] # we get the total of scansMax
-            xSpectraMz=mean(spectraMz[1,:])
+            #spectraMz = convert(Array{Float64,2}, spectraMz)
-            ySpectraMz=mean(spectraMz[2,:])
+            #min_length = min(length(spectraMz[1,:]), length(spectraMz[2,:]))
+            try
+                xSpectraMz=mean(spectraMz[1,:])
+                ySpectraMz=mean(spectraMz[2,:])
+                #println("length of xSpectraMz: $(length(xSpectraMz))")
+                #println("length of ySpectraMz: $(length(ySpectraMz))")
+            catch e 
+                #println("an error was found: $e")
+                msg="there was an error with the mzML, please try again: $e"
+                warning_msg=true
+                xSpectraMz=spectraMz[1,1]
+                ySpectraMz=spectraMz[2,1]
+            end
             traceSpectra=PlotlyBase.scatter(x=xSpectraMz, y=ySpectraMz, mode="lines")
             plotdata=[traceSpectra] # We add the data from spectra to the plot
             plotlayout=layoutSpectra
@@ -791,6 +804,16 @@ end
                 autosize=false,
                 margin=attr(l=0,r=0,t=120,b=0,pad=0)
             )
+            if xCoord < 1
+                xCoord=1
+            elseif xCoord > imgWidth
+                xCoord=imgWidth
+            end
+            if yCoord > -1
+                yCoord=-1
+            elseif yCoord < -imgHeight
+                yCoord=-imgHeight
+            end
             xSpectraMz=spectraMz[1,abs(xCoord)]
             ySpectraMz=spectraMz[2,abs(yCoord)]
             traceSpectra=PlotlyBase.scatter(x=xSpectraMz, y=ySpectraMz, mode="lines")
@@ -1160,14 +1183,13 @@ end
             #println("you have clicked the triq image")
             cursor_data=data_click["cursor"] 
             xCoord=Int32(round(cursor_data["x"]))
-            if xCoord < 0
+            if xCoord < 1
-                xCoord=0
+                xCoord=1
             elseif xCoord > imgWidth
                 xCoord=imgWidth
             end
-            yCoord=Int32(round(cursor_data["y"]))
+            if yCoord > -1
-            if yCoord > 0
+                yCoord=-1
-                yCoord=0
             elseif yCoord < -imgHeight
                 yCoord=-imgHeight
             end # Get the x and y values from the click of the cursor and make sure they don't exceed image proportions
@@ -1179,14 +1201,13 @@ end
             #println("you have clicked the normal image")
             cursor_data=data_click["cursor"] 
             xCoord=Int32(round(cursor_data["x"]))
-            if xCoord < 0
+            if xCoord < 1
-                xCoord=0
+                xCoord=1
             elseif xCoord > imgWidth
                 xCoord=imgWidth
             end
-            yCoord=Int32(round(cursor_data["y"]))  
+            if yCoord > -1
-            if yCoord > 0
+                yCoord=-1
-                yCoord=0
             elseif yCoord < -imgHeight
                 yCoord=-imgHeight
             end # Get the x and y values from the click of the cursor and make sure they don't exceed image proportions

app.jl.html

@@ -18,48 +18,6 @@
         <q-btn id="btnStyle" icon="search" class="q-ma-sm" v-on:click="btnSearch=true"
           label="Select your imzML or mzML file"></q-btn>
         <!--<p>{{full_route}}</p>-->
-        <div class="row st-col col-12">
-          <!--<q-input id="textName" class="col-9" standout="custom-standout" v-model="file_name" label="Insert the name of your imzML file"></q-input>-->
-          <q-btn-dropdown id="btnStyle" class="q-ma-sm" :loading="progressPlot" :disable="btnPlotDisable"
-            label="Generate Plots" icon="play_arrow">
-            <template v-slot:loading>
-              <q-spinner-hourglass class="on-left" />
-              Loading Plot
-            </template>
-
-            <q-list>
-              <q-item clickable v-close-popup v-on:click="imageCPlot=true">
-                <q-item-section>
-                  <q-item-label>Image Contour Plot</q-item-label>
-                </q-item-section>
-              </q-item>
-
-              <q-item clickable v-close-popup v-on:click="triqCPlot=true">
-                <q-item-section>
-                  <q-item-label>TrIQ Contour Plot</q-item-label>
-                </q-item-section>
-              </q-item>
-
-              <q-item clickable v-close-popup v-on:click="image3dPlot=true">
-                <q-item-section>
-                  <q-item-label>Image 3D Plot</q-item-label>
-                </q-item-section>
-              </q-item>
-
-              <q-item clickable v-close-popup v-on:click="triq3dPlot=true">
-                <q-item-section>
-                  <q-item-label>TrIQ 3D Plot</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-btn-dropdown>
-          <q-btn id="btnStyle" icon="search" class="q-ma-sm" :disable="btnOpticalDisable"
-            v-on:click="btnOptical=true" label="Load your optical Image"></q-btn>
-          <div class="q-mx-sm">
-            <q-slider color="black" v-model="imgTrans" :min="0.0" :max="1" :step="0.1" :disable="btnOpticalDisable"/>
-            <q-badge style="background-color: #009f90;"> Transparency: {{ imgTrans }}</q-badge>
-          </div>
-        </div>
         <p id="lblFullRoute">full route: {{full_route}}</p>
         <!-- Variable Manipulation -->
         <div class="row">
@@ -149,6 +107,49 @@
             label="Compare"></q-btn>
         </div>
         <p>{{msg}}</p>
+
+        <div class="row st-col col-12">
+          <!--<q-input id="textName" class="col-9" standout="custom-standout" v-model="file_name" label="Insert the name of your imzML file"></q-input>-->
+          <q-btn-dropdown id="btnStyle" class="q-ma-sm" :loading="progressPlot" :disable="btnPlotDisable"
+            label="Generate Plots" icon="play_arrow">
+            <template v-slot:loading>
+              <q-spinner-hourglass class="on-left" />
+              Loading Plot
+            </template>
+
+            <q-list>
+              <q-item clickable v-close-popup v-on:click="imageCPlot=true">
+                <q-item-section>
+                  <q-item-label>Image Topology Plot</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item clickable v-close-popup v-on:click="triqCPlot=true">
+                <q-item-section>
+                  <q-item-label>TrIQ Topology Plot</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item clickable v-close-popup v-on:click="image3dPlot=true">
+                <q-item-section>
+                  <q-item-label>Image Surface Plot</q-item-label>
+                </q-item-section>
+              </q-item>
+
+              <q-item clickable v-close-popup v-on:click="triq3dPlot=true">
+                <q-item-section>
+                  <q-item-label>TrIQ Surface Plot</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+          <q-btn id="btnStyle" icon="search" class="q-ma-sm" :disable="btnOpticalDisable" v-on:click="btnOptical=true"
+            label="Load your optical Image"></q-btn>
+          <div class="q-mx-sm">
+            <q-slider color="black" v-model="imgTrans" :min="0.0" :max="1" :step="0.1" :disable="btnOpticalDisable" />
+            <q-badge style="background-color: #009f90;"> Transparency: {{ imgTrans }}</q-badge>
+          </div>
+        </div>
       </div>
     </div>
     <div class="row col-6">
@@ -241,7 +242,7 @@
       <q-card-section class="row">
         <div class="text-h6 q-ma-sm">Compare two diferent images or plots in a larger screen</div>
         <div class="q-mx-sm">
-          <q-slider color="black" v-model="imgTrans" :min="0.0" :max="1" :step="0.1" :disable="btnOpticalDisable"/>
+          <q-slider color="black" v-model="imgTrans" :min="0.0" :max="1" :step="0.1" :disable="btnOpticalDisable" />
           <q-badge style="background-color: #009f90;"> Transparency: {{ imgTrans }}</q-badge>
         </div>
       </q-card-section>