Added Colorbar for each slice of scan
improved UI, better response, better bug report, minor fixes
This commit is contained in:
José Julián Sierra Álvarez
GitHub
parent
2aaa53ee42
commit
1caf0a76c3
26
README.md
26
README.md
@ -1,18 +1,22 @@
|
||||
# Julia_imzML_GUI<br />
|
||||
A Graphical User Interface created with Julia Genie Builder made for this repository: https://github.com/CINVESTAV-LABI/julia_mzML_imzML that generates images with the imzML and ibd files.<br />
|
||||
For this to work you must insert the next lines as they are depicted in your Julia terminal for the first time only: <br />
|
||||
# Julia_msi_GUI<br />
|
||||
A Graphical User Interface created with <i>Julia Genie Builder</i> made for to assist in the use of this repository: https://github.com/CINVESTAV-LABI/julia_mzML_imzML which generates images with the mzMl, imzML and ibd files.<br />
|
||||
For the correct implementation and use of this repository one must insert the next lines just as they are depicted in your <b>Julia</b> terminal to install the dependencies needed, this part is only needed once. <br />
|
||||
```
|
||||
julia
|
||||
]
|
||||
add Pkg Libz ; add https://github.com/CINVESTAV-LABI/julia_mzML_imzML ; add PlotlyBase ; add Statistics
|
||||
```
|
||||
Then open a terminal on the directory "JuliaIMZML_GUI" and put the next code: <br />
|
||||
```
|
||||
julia
|
||||
]
|
||||
activate .
|
||||
add Pkg Libz ; add https://github.com/CINVESTAV-LABI/julia_mzML_imzML ; add PlotlyBase ; add Statistics ; add CairoMakie ; add Colors ; add
|
||||
add Genie
|
||||
##(press backspace)
|
||||
```
|
||||
Then open a <b>Julia</b> terminal on the directory <i>"Julia_msi_GUI"</i> and put the next code, this is needed every time you want to run the GUI: <br />
|
||||
```
|
||||
]
|
||||
```
|
||||
to enter Pkg mode.
|
||||
```
|
||||
activate .
|
||||
```
|
||||
Press backspace key to exit Pkg mode.
|
||||
```
|
||||
using Genie ; Genie.loadapp() ; up()
|
||||
```
|
||||
And finally open the port that gets generated to access to the GUI<br />
|
||||
|
||||
84
app.jl
84
app.jl
@ -1,10 +1,11 @@
|
||||
module App
|
||||
# == Packages ==
|
||||
# set up Genie development environment.
|
||||
using GenieFramework
|
||||
using GenieFramework # set up Genie development environment.
|
||||
using Pkg
|
||||
using Libz
|
||||
using PlotlyBase
|
||||
using CairoMakie
|
||||
using Colors
|
||||
using julia_mzML_imzML
|
||||
using Statistics
|
||||
@genietools
|
||||
@ -12,9 +13,10 @@ using Statistics
|
||||
# == Code import ==
|
||||
# add your data analysis code here or in the lib folder. Code in lib/ will be
|
||||
# automatically loaded
|
||||
rgb_ViridisPalette =reinterpret(ColorTypes.RGB24, ViridisPalette)
|
||||
|
||||
# == Reactive code ==
|
||||
# add reactive code to make the UI interactive
|
||||
# reactive code to make the UI interactive
|
||||
@app begin
|
||||
# == Reactive variables ==
|
||||
# reactive variables exist in both the Julia backend and the browser with two-way synchronization
|
||||
@ -42,14 +44,16 @@ using Statistics
|
||||
@in ImgPlusT = false
|
||||
@in ImgMinusT = false
|
||||
@out testT = "/.bmp"
|
||||
@in msg = ""
|
||||
@in msgimg = ""
|
||||
@in msgtriq = ""
|
||||
@out msg = ""
|
||||
@out msgimg = ""
|
||||
@out msgtriq = ""
|
||||
@out full_route = ""
|
||||
@out full_routeMz = ""
|
||||
@out full_routeMz2 = ""
|
||||
@out colorbar = "/.png"
|
||||
@out colorbarT = "/.png"
|
||||
layoutSpectra = PlotlyBase.Layout(
|
||||
title = "Spectra Plot",
|
||||
title = "SUM Spectrum plot",
|
||||
xaxis = PlotlyBase.attr(
|
||||
title = "<i>m/z</i>",
|
||||
showgrid = true
|
||||
@ -70,11 +74,12 @@ using Statistics
|
||||
# its value changes
|
||||
@onchange triqEnabled begin
|
||||
if !triqEnabled
|
||||
triqProb = 0.0
|
||||
triqColor = 0
|
||||
#triqProb = 0.0
|
||||
#triqColor = 0
|
||||
end
|
||||
end
|
||||
@onchange file_name begin
|
||||
msg = ""
|
||||
if contains(file_name,".imzML")
|
||||
warning_fr = ""
|
||||
full_route = joinpath( file_route, file_name )
|
||||
@ -96,8 +101,11 @@ using Statistics
|
||||
Disab_btn = false
|
||||
full_routeMz2 = full_routeMz # to avoid creating the plot if its the same file read as before
|
||||
end
|
||||
else
|
||||
warning_fr = "is not an imzML file"
|
||||
end
|
||||
else
|
||||
full_route = "/"
|
||||
warning_fr = "is not an imzML file"
|
||||
end
|
||||
end
|
||||
@ -107,38 +115,44 @@ using Statistics
|
||||
lastimg = floor(Int, Nmass)
|
||||
lastimgTriq = floor(Int, Nmass)
|
||||
end
|
||||
# the onbutton handler will set the variable to false after the block is executed
|
||||
# The onbutton handler will set the variable to false after the block is executed
|
||||
@onbutton Main_Process begin
|
||||
Disab_btn = true #We disable the button to avoid multiple requests
|
||||
Disab_btn = true # We disable the button to avoid multiple requests
|
||||
indeximg = floor(Int, Nmass)
|
||||
full_route = joinpath(file_route, file_name)
|
||||
if isfile(full_route) && Nmass > 0 && Tol > 0 && Tol <= 1
|
||||
msg = "File exists, Nmass=$(Nmass) Tol=$(Tol). Please do not press the start button until confirmation"
|
||||
msg = "File exists, Nmass=$(Nmass) Tol=$(Tol). Loading file will begin, please be patient."
|
||||
try
|
||||
spectra = LoadImzml(full_route)
|
||||
msg = "File loaded. Please do not press the start button until confirmation"
|
||||
msg = "File loaded. Creating Spectra with the specific mass and tolerance, please be patient."
|
||||
slice = GetSlice(spectra, Nmass, Tol)
|
||||
if triqProb != 0 # if we have TrIQ
|
||||
if triqColor < 1 || triqColor > 256
|
||||
triqColor = 1
|
||||
end
|
||||
if triqProb < 0 || triqProb > 1
|
||||
triqProb = 0.1
|
||||
end
|
||||
SaveBitmap(joinpath("public", "TrIQ_$(floor(Int, Nmass)).bmp"),
|
||||
TrIQ(slice, Int(triqColor), triqProb),
|
||||
ViridisPalette)
|
||||
fig = CairoMakie.Figure(size = (100, 200)) #container
|
||||
if triqEnabled # if we have TrIQ
|
||||
if triqColor < 1 || triqColor > 256 ||triqProb < 0 || triqProb > 1
|
||||
msg = "Incorrect TrIQ values, please adjust accordingly and try again."
|
||||
else
|
||||
SaveBitmap(joinpath("public", "TrIQ_$(floor(Int, Nmass)).bmp"),TrIQ(slice, Int(triqColor), triqProb),ViridisPalette)
|
||||
testT = "/TrIQ_$(floor(Int, Nmass)).bmp" # we define the starting value of the images
|
||||
msgtriq = "TrIQ image with the Nmass of $(floor(Int, Nmass))"
|
||||
else # if we don't
|
||||
SaveBitmap(joinpath("public", "$(floor(Int, Nmass)).bmp"),
|
||||
IntQuant(slice),
|
||||
ViridisPalette)
|
||||
Colorbar(fig[1, 1], colormap = rgb_ViridisPalette, limits = (0, maximum(TrIQ(slice, Int(triqColor), triqProb))))
|
||||
save("public/colorbar_TrIQ_$(floor(Int, Nmass)).png", fig)
|
||||
msg = "The file has been created successfully inside the 'public' folder of the app."
|
||||
colorbarT = "/colorbar_TrIQ_$(floor(Int, Nmass)).png"
|
||||
end
|
||||
else # if we don't use TrIQ
|
||||
SaveBitmap(joinpath("public", "$(floor(Int, Nmass)).bmp"),IntQuant(slice),ViridisPalette)
|
||||
test = "/$(floor(Int, Nmass)).bmp" # we define the starting value of the images
|
||||
msgimg = "image with the Nmass of $(floor(Int, Nmass))"
|
||||
Colorbar(fig[1, 1], colormap = rgb_ViridisPalette, limits = (0, maximum(slice)))
|
||||
save("public/colorbar_$(floor(Int, Nmass)).png", fig)
|
||||
msg = "The file has been created successfully inside the 'public' folder of the app."
|
||||
colorbar = "/colorbar_$(floor(Int, Nmass)).png"
|
||||
end
|
||||
catch e
|
||||
msg = "There was an error loading the ImzML file, please verify the file accordingly and try again. $(e)"
|
||||
end
|
||||
msg = "The file has been created inside the 'public' folder of the app"
|
||||
else
|
||||
msg = "File does not exist or a parameter was not well inputted"
|
||||
msg = "File does not exist or a parameter is incorrect, please try again."
|
||||
end
|
||||
spectra = nothing # Important for memory cleaning
|
||||
slice = nothing
|
||||
@ -155,10 +169,9 @@ using Statistics
|
||||
indeximg = lastimg
|
||||
end
|
||||
test = "/$(indeximg).bmp"
|
||||
colorbar = "/colorbar_$(indeximg).png"
|
||||
msgimg = "image with the Nmass of $(indeximg)"
|
||||
lastimg = indeximg
|
||||
GC.gc() # Trigger garbage collection
|
||||
ccall(:malloc_trim, Int32, (Int32,), 0) # Ensure julia returns the freed memory to OS
|
||||
end
|
||||
@onbutton ImgPlus begin
|
||||
indeximg+=1
|
||||
@ -169,10 +182,9 @@ using Statistics
|
||||
indeximg = lastimg
|
||||
end
|
||||
test = "/$(indeximg).bmp"
|
||||
colorbar = "/colorbar_$(indeximg).png"
|
||||
msgimg = "image with the Nmass of $(indeximg)"
|
||||
lastimg = indeximg
|
||||
GC.gc() # Trigger garbage collection
|
||||
ccall(:malloc_trim, Int32, (Int32,), 0) # Ensure julia returns the freed memory to OS
|
||||
end
|
||||
|
||||
@onbutton ImgMinusT begin
|
||||
@ -184,10 +196,9 @@ using Statistics
|
||||
indeximgTriq = lastimgTriq
|
||||
end
|
||||
testT = "/TrIQ_$(indeximgTriq).bmp"
|
||||
colorbarT = "/colorbar_TrIQ_$(indeximgTriq).png"
|
||||
msgtriq = "TrIQ image with the Nmass of $(indeximgTriq)"
|
||||
lastimgTriq = indeximgTriq
|
||||
GC.gc() # Trigger garbage collection
|
||||
ccall(:malloc_trim, Int32, (Int32,), 0) # Ensure julia returns the freed memory to OS
|
||||
end
|
||||
@onbutton ImgPlusT begin
|
||||
indeximgTriq+=1
|
||||
@ -198,10 +209,9 @@ using Statistics
|
||||
indeximgTriq = lastimgTriq
|
||||
end
|
||||
testT = "/TrIQ_$(indeximgTriq).bmp"
|
||||
colorbarT = "/colorbar_TrIQ_$(indeximgTriq).png"
|
||||
msgtriq = "TrIQ image with the Nmass of $(indeximgTriq)"
|
||||
lastimgTriq = indeximgTriq
|
||||
GC.gc() # Trigger garbage collection
|
||||
ccall(:malloc_trim, Int32, (Int32,), 0) # Ensure julia returns the freed memory to OS
|
||||
end
|
||||
GC.gc() # Trigger garbage collection
|
||||
ccall(:malloc_trim, Int32, (Int32,), 0) # Ensure julia returns the freed memory to OS
|
||||
|
||||
45
app.jl.html
45
app.jl.html
@ -1,13 +1,15 @@
|
||||
<header>
|
||||
<h4>Julia mzML imzML GUI </h4>
|
||||
<h6>Please make sure the ibd, the mzML and the imzML files are located in the same directory and have the same name</h6>
|
||||
<h6>It may take a while to generate the image and the plot, please be patient</h6>
|
||||
<header id="ikbk"><!--<img src="/css/biotech_100dp_1B1F3B.png" alt="Bioteck Icon" id="i65e">-->
|
||||
<img src="/css/LABI_logo.jpeg" alt="Labi Logo Icon" id="i65e">
|
||||
<div>
|
||||
<h4>Julia mzML imzML analysis GUI </h4>
|
||||
<h6>Please make sure the ibd, the mzML and the imzML files are located in the same directory and have the same name.</h6>
|
||||
<h6>It may take a while to generate the image and the plot, please be patient.</h6>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="row">
|
||||
<div class="st-col col-12 col-sm st-module">
|
||||
<div class="st-col col-12 col-sm st-module" id="i0xj8">
|
||||
<div class="row">
|
||||
<div class="st-col col-12 col-sm st-module">
|
||||
<div class="st-col col-12 col-sm st-module" id="idbha">
|
||||
<!--Left DIV-->
|
||||
<!--<q-file v-model="file_route" filled="" label="Select your imzML file" accept=".imzML"></q-file>-->
|
||||
<q-input id="ijii1" v-model="file_route" :dense="true" label="Insert the route to your imzML file"></q-input>
|
||||
@ -15,12 +17,12 @@
|
||||
<p id="i7brk">full route: {{full_route}} {{warning_fr}}</p>
|
||||
<div class="row">
|
||||
<div class="st-col col-12 col-sm">
|
||||
<q-input id="icc9d" v-model="Nmass" :dense="true" label="Mass Value" type="number" :rules="[
|
||||
<q-input id="icc9d" v-model="Nmass" :dense="true" label="Mass-to-charge ratio of interest" type="number" :rules="[
|
||||
val => val >= 0 || 'Need positive mass values',
|
||||
]"></q-input>
|
||||
</div>
|
||||
<div class="st-col col-12 col-sm">
|
||||
<q-input id="iqt3l" step="0.01" v-model="Tol" :dense="true" label="Tolerance" type="number" :rules="[
|
||||
<q-input id="iqt3l" step="0.01" v-model="Tol" :dense="true" label="Mass-to-charge ratio Tolerance" type="number" :rules="[
|
||||
val => !!val || '* Required',
|
||||
val => val >= 0 && val <= 1 || 'Needs to be in range between 0 and 1',
|
||||
]"></q-input>
|
||||
@ -38,7 +40,7 @@
|
||||
]" :readonly="!triqEnabled"></q-input>
|
||||
</div>
|
||||
<div class="st-col col-12 col-sm-4">
|
||||
<q-input id="i28wb-2" step="1" v-model="triqColor" :dense="true" label="TrIQ Color" type="number" :rules="[
|
||||
<q-input id="i28wb-2" step="1" v-model="triqColor" :dense="true" label="TrIQ Color Levels" type="number" :rules="[
|
||||
val => val >= 0 && val <= 256 || 'Needs to be in range between 1 and 256',
|
||||
]" :readonly="!triqEnabled"></q-input>
|
||||
</div>
|
||||
@ -46,29 +48,34 @@
|
||||
<q-btn id="isfqg" :disabled="Disab_btn" color="primary" icon="play_arrow" v-on:click="Main_Process = true" label="Start"></q-btn>
|
||||
<p>{{msg}}</p>
|
||||
</div>
|
||||
</div><!-- <plotly :data="plotdata" :layout="plotlayout"> </plotly>-->
|
||||
</div>
|
||||
<!-- <plotly :data="plotdata" :layout="plotlayout"> </plotly>-->
|
||||
</div>
|
||||
<div class="st-col col-12 col-sm st-module">
|
||||
<div class="st-col col-12 col-sm st-module" id="i8pdn">
|
||||
<div class="row">
|
||||
<div class="st-col col-12 col-sm st-module">
|
||||
<div class="st-col col-12 col-sm st-module" id="ihxlc">
|
||||
<!--Right DIV-->
|
||||
<h6>Image Visualizer</h6><br>
|
||||
<p></p>
|
||||
<q-btn id="ijhjl-2" color="primary" icon="arrow_back" label="Previous" v-on:click="ImgMinus = true"></q-btn>
|
||||
<q-btn id="i3zt1" color="primary" icon="arrow_forward" label="Next" v-on:click="ImgPlus = true"></q-btn>
|
||||
<q-img id="i6e3p" :src="test"></q-img>
|
||||
<div id="image-container" class="row col-12">
|
||||
<div class="col-10"><q-img id="i6e3p" :src="test"></q-img></div>
|
||||
<div class="col-2"><q-img id="colorbar" :src="colorbar"></q-img></div>
|
||||
</div>
|
||||
<p>{{msgimg}}</p>
|
||||
<q-btn id="ijhjl-2-2" color="primary" icon="arrow_back" label="Previous" v-on:click="ImgMinusT = true"></q-btn>
|
||||
<q-btn id="i3zt1-2" color="primary" icon="arrow_forward" label="Next" v-on:click="ImgPlusT = true"></q-btn>
|
||||
<q-img id="i6e3p-2" :src="testT"></q-img>
|
||||
<div id="image-container" class="row col-12">
|
||||
<div class="col-10"><q-img id="i6e3p-2" :src="testT"></q-img></div>
|
||||
<div class="col-2"><q-img id="colorbar-2" :src="colorbarT"></q-img></div>
|
||||
</div>
|
||||
<p>{{msgtriq}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="st-col col-12 col-sm st-module">
|
||||
<plotly :data="plotdata" :layout="plotlayout"> </plotly>
|
||||
</div>
|
||||
<div class="st-col col-12 col-sm st-module">
|
||||
<plotly id="iiglk" :data="plotdata" :layout="plotlayout"></plotly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user