Included environment variable to set up production, fixed plot errors and optical image load, started mzML to imzML function

app.jl

@@ -59,6 +59,7 @@ include("./julia_imzML_visual.jl")
     @in triq3dPlot=false # To generate 3d plot based on current triq image
     @in imageCPlot=false # To generate contour plots of current image
     @in triqCPlot=false # To generate contour plots of current triq image
+    @in btnCreateImz=false # To start process for creating imzML and Ibd with mzML and Syncro
     # Image change buttons
     @in imgPlus=false
     @in imgMinus=false
@@ -83,7 +84,7 @@ include("./julia_imzML_visual.jl")
     @out imgIntT="/.bmp" # image Interface TrIQ
     @out colorbar="/.png"
     @out colorbarT="/.png"
-    # interface controlling for the comparative view
+    # Interface controlling for the comparative view
     @out imgIntComp="/.bmp" # image Interface
     @out imgIntTComp="/.bmp" # image Interface TrIQ
     @out colorbarComp="/.png"
@@ -247,10 +248,12 @@ include("./julia_imzML_visual.jl")
 
     @onbutton btnSearch begin
         full_route=pick_file(; filterlist="imzML,mzML")
-        if isnothing(full_route)
+        if full_route==""
             msg="No file selected"
             warning_msg=true
             btnStartDisable=true
+            btnSpectraDisable=true
+            SpectraEnabled=false
         else
             if endswith(full_route, "imzML") # Case if the file loaded is imzML
                 btnStartDisable=false
@@ -914,44 +917,22 @@ include("./julia_imzML_visual.jl")
         CompareDialog=true
     end
 
-    # Event detection for clicking on the spectrum plot
-    @onchange data_click begin
-        if selectedTab == "tab2"
+    @onbutton btnCreateImz begin
+        msg="Not yet implemented"
+    end
+
+    # To include a visualization in the spectrum plot indicating where is the selected mass
+    @onchange Nmass begin
         if !isempty(xSpectraMz)
-                spectracoords=reshape(plotdata, 1, length(plotdata))
-                # Extract x and y values from data_click 
-                cursor_data=data_click["cursor"] 
-                x_value=cursor_data["x"]
-                y_value=cursor_data["y"]
-
-                # Find the minimum x-value in spectracoords
-                min_x_value=minimum([minimum(val[:x]) for val in spectracoords if !isempty(val[:x])])
-                # Adjust x_value and spectracoords x-values to start from 0
-                adjusted_x_value=x_value - min_x_value
-
-                closest_distance=Inf
-                for val in spectracoords
-                    adjusted_x=val[:x] .- min_x_value
-                    start_idx=findfirst(x -> x >= adjusted_x_value - 20, adjusted_x)
-                    end_idx=findlast(x -> x <= adjusted_x_value + 20, adjusted_x)
-                    
-                    if start_idx !== nothing && end_idx !== nothing
-                        for i in start_idx:end_idx
-                            spectra_x=adjusted_x[i]
-                            spectra_y=val[:y][i]
-                            distance=sqrt((spectra_x - adjusted_x_value)^2 + (spectra_y - y_value)^2)
-                            if distance < closest_distance
-                                closest_distance=distance
-                                Nmass=round(spectra_x + min_x_value, digits=2)
-                            end
-                        end
-                    end
-                end
             traceSpectra=PlotlyBase.scatter(x=xSpectraMz, y=ySpectraMz, mode="lines",name="Spectra",showlegend=false)
             trace2=PlotlyBase.scatter(x=[Nmass, Nmass],y=[0, maximum(ySpectraMz)],mode="lines",line=attr(color="red", width=0.5),name="<i>m/z</i> selected",showlegend=false)
             plotdata=[traceSpectra,trace2] # We add the data from spectra and the red line to the plot
         end
-        elseif selectedTab == "tab1"
+    end
+
+    # Event detection for clicking on the images
+    @onchange data_click begin
+        if selectedTab == "tab1"
             cursor_data=data_click["cursor"] 
             xCoord=Int32(round(cursor_data["x"]))
             yCoord=Int32(round(cursor_data["y"]))
@@ -990,11 +971,11 @@ include("./julia_imzML_visual.jl")
 
     @onbutton btnOptical begin
         imgRoute=pick_file(; filterlist="png,bmp,jpg,jpeg")
-        selectedTab="tab0"
-        plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT)
-        if isnothing(imgRoute)
+        if imgRoute==""
             msg="No optical image selected"
         else
+            selectedTab="tab0"
+            plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT)
             img=load(imgRoute)
             save("./public/css/imgOver.png",img)
             plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt,"/css/imgOver.png",imgTrans)
@@ -1004,11 +985,11 @@ include("./julia_imzML_visual.jl")
 
     @onbutton btnOpticalT begin
         imgRoute=pick_file(; filterlist="png,bmp,jpg,jpeg")
-        selectedTab="tab1"
-        plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt)
-        if isnothing(imgRoute)
+        if imgRoute==""
             msg="No optical image selected"
         else
+            selectedTab="tab1"
+            plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt)
             img=load(imgRoute)
             save("./public/css/imgOver.png",img)
             plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT,"/css/imgOver.png",imgTrans)
@@ -1017,19 +998,19 @@ include("./julia_imzML_visual.jl")
     end
 
     @onchange imgTrans begin
-        if !opticalOverTriq
+        if !opticalOverTriq && imgRoute!=""
             plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt,"/css/imgOver.png",imgTrans)
-        else
+        elseif opticalOverTriq && imgRoute!=""
             plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT,"/css/imgOver.png",imgTrans)
         end
     end
 
     @onchange opticalOverTriq begin
-        if !opticalOverTriq
+        if !opticalOverTriq && imgRoute!=""
             plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt,"/css/imgOver.png",imgTrans)
             plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT)
             selectedTab="tab0"
-        else
+        elseif opticalOverTriq && imgRoute!=""
             plotdataImg, plotlayoutImg, imgWidth, imgHeight=loadImgPlot(imgInt)
             plotdataImgT, plotlayoutImgT, imgWidth, imgHeight=loadImgPlot(imgIntT,"/css/imgOver.png",imgTrans)
             selectedTab="tab1"

app.jl.html

@@ -7,22 +7,21 @@
         name.</h6>
       <h6>It may take a while to generate the image and the plot, please be patient.</h6>
       <h6>To generate the contour or surface plots, you have to select the desired image first using the interface.</h6>
+      <h6>Syncro file is required to create imzML and ibd files.</h6>
     </div>
   </header>
   <div id="extDivStyle" class="row col-12 q-pa-xl">
     <div class="row col-6">
       <!-- Left DIV -->
       <div id="intDivStyle" class="st-col col-12 st-module">
-        <!--<q-input id="textRoute" standout="custom-standout" v-model="file_route" label="Insert the route to your imzML file"></q-input>-->
         <h6>Search for the imzML or mzML file in your system</h6>
         <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>-->
         <p id="lblFullRoute">full route: {{full_route}}</p>
         <!-- Variable Manipulation -->
         <div class="row">
           <div class="st-col col-4 col-sm q-ma-sm">
-            <q-input standout="custom-standout" id="textNmass" step="0.01" v-model="Nmass"
+            <q-input standout="custom-standout" id="textNmass" step="0.001" v-model="Nmass"
               label="Mass-to-charge ratio of interest" type="number"
               :rules="[ val => !!val || '* Required', val => val >= 0.0 || 'Need positive mass values']"></q-input>
           </div>
@@ -53,8 +52,6 @@
                         val => triqEnabled ? ( '* Required', val >= 0.8 &amp;&amp; val <= 1 || 'Needs to be in range between 0.8 and 1') : true
                         ]" :readonly="!triqEnabled" :disable="!triqEnabled"></q-input>
               </div>
-              <!--<div class="st-col col-4 col-sm-4 q-ma-sm">
-              </div>-->
             </div>
           </div>
           <!-- Spectra Plot Manipulation -->
@@ -93,6 +90,13 @@
                         ]" :readonly="!SpectraEnabled" :disable="!SpectraEnabled"></q-input>
               </div>
             </div>
+            <q-btn id="btnStyle" icon="play_arrow" class="q-ma-sm" v-on:click="btnCreateImz=true"  :loading="progressSpectraPlot" :disable="btnSpectraDisable"
+              label="Generate imzML">
+              <template v-slot:loading>
+                <q-spinner-hourglass class="on-left" />
+                Loading Plot
+              </template>
+            </q-btn>
           </div>
         </div>
         <div class="row">
@@ -109,7 +113,6 @@
         <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>
@@ -181,7 +184,6 @@
               <div class="col-10 q-pa-none q-ma-none">
                 <plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none sync_data"
                   @click="data_click"></plotly>
-                <!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgInt" width="80%"></q-img>-->
               </div>
               <div class="col-2 q-pa-none q-ma-none">
                 <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
@@ -203,7 +205,6 @@
               <div class="col-10 q-pa-none q-ma-none ">
                 <plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT"
                   class="q-pa-none q-ma-none sync_data" @click="data_click"></plotly>
-                <!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgIntT" width="80%"></q-img>-->
               </div>
               <div class="col-2 q-pa-none q-ma-none ">
                 <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
@@ -214,9 +215,7 @@
 
           <q-tab-panel name="tab2">
             <!-- Content for Tab 2 -->
-            <!--<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none"></plotly>-->
-            <plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none sync_data"
-              @click="data_click"></plotly>
+            <plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none"></plotly>
           </q-tab-panel>
 
           <q-tab-panel name="tab3">
@@ -327,12 +326,14 @@
                 <!-- Btn image changer -->
                 <div>
                   <q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinusComp=true"></q-btn>
-                  <q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlusComp=true"></q-btn>
+                  <q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right"
+                    v-on:click="imgPlusComp=true"></q-btn>
                 </div>
                 <!-- Image manager -->
                 <div id="image-container" class="row st-col col-12">
                   <div class="col-10 q-pa-none q-ma-none ">
-                    <plotly id="plotStyle" :data="plotdataImgComp" :layout="plotlayoutImgComp" class="q-pa-none q-ma-none">
+                    <plotly id="plotStyle" :data="plotdataImgComp" :layout="plotlayoutImgComp"
+                      class="q-pa-none q-ma-none">
                     </plotly>
                   </div>
                   <div class="col-2 q-pa-none q-ma-none ">
@@ -347,12 +348,14 @@
                 <!-- Triq Btn image changer -->
                 <div>
                   <q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinusTComp=true"></q-btn>
-                  <q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlusTComp=true"></q-btn>
+                  <q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right"
+                    v-on:click="imgPlusTComp=true"></q-btn>
                 </div>
                 <!-- Triq Image manager -->
                 <div id="image-container" class="row st-col col-12">
                   <div class="col-10 q-pa-none q-ma-none ">
-                    <plotly id="plotStyle" :data="plotdataImgTComp" :layout="plotlayoutImgTComp" class="q-pa-none q-ma-none">
+                    <plotly id="plotStyle" :data="plotdataImgTComp" :layout="plotlayoutImgTComp"
+                      class="q-pa-none q-ma-none">
                     </plotly>
                   </div>
                   <div class="col-2 q-pa-none q-ma-none ">

config/env/global.jl

@@ -0,0 +1 @@
+ENV["GENIE_ENV"] = "dev"