Julian/JuliaMSI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now the file picker allows for mzML choosing, minor changes to the colorbarplots

Browse Source
This commit is contained in:
Pixelguy14 2025-01-28 00:11:19 -06:00
parent e5e6284d53
commit 4ea5d8e119
2 changed files with 53 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app.jl
View File

@ -54,12 +54,13 @@ function loadImgPlot(interfaceImg::String)
cleaned_img=lstrip(cleaned_img, '/') cleaned_img=lstrip(cleaned_img, '/')
var=joinpath("./public", cleaned_img) var=joinpath("./public", cleaned_img)
img=load(var) img=load(var)
println("type of img: $(typeof(img))")
# Convert to grayscale # Convert to grayscale
img_gray=Gray.(img) img_gray=Gray.(img)
img_array=Array(img_gray) img_array=Array(img_gray)
#println(typeof(img_array)) #println(typeof(img_array))
elevation=Float32.(Array(img_gray)) elevation=Float32.(Array(img_array)) ./ 255.0
#println(typeof(elevation)) println("type of elevation: $(typeof(elevation))")
# Get the X, Y coordinates of the image # Get the X, Y coordinates of the image
height, width=size(img_array) height, width=size(img_array)
#println("height: $(height), width: $(width)") #println("height: $(height), width: $(width)")
@ -434,13 +435,14 @@ 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 btnSearch begin @onbutton btnSearch begin
full_route=pick_file(; filterlist="imzML") full_route=pick_file(; filterlist="imzML,mzML")
if isnothing(full_route) if isnothing(full_route)
#println("No file selected") #println("No file selected")
msg="No file selected" msg="No file selected"
warning_msg=true warning_msg=true
btnStartDisable=true btnStartDisable=true
else else
if endswith(full_route, "imzML") # Case if the file loaded is imzML
#println("Selected file path: ", full_route) #println("Selected file path: ", full_route)
btnStartDisable=false btnStartDisable=false
btnPlotDisable=false btnPlotDisable=false
@ -450,6 +452,23 @@ end
# We enable coord search and spectra plot creation # We enable coord search and spectra plot creation
btnSpectraDisable=false btnSpectraDisable=false
SpectraEnabled=true SpectraEnabled=true
else
# If there's no MzML file, we deny access again
btnSpectraDisable=true
SpectraEnabled=false
end
else # Case if the file loaded is mzML
full_routeMz=full_route
btnSpectraDisable=false
SpectraEnabled=true
# Splitting the route the same way
full_route=replace(full_route, r"\.[^.]*$" => ".imzML")
if isfile(full_route)
btnStartDisable=false
else
btnStartDisable=true
full_route=full_routeMz
end
end end
xCoord=0 xCoord=0
yCoord=0 yCoord=0
@ -470,11 +489,11 @@ end
spectra=LoadImzml(full_route) spectra=LoadImzml(full_route)
msg="File loaded. Creating Spectra with the specific mass and tolerance, please be patient." msg="File loaded. Creating Spectra with the specific mass and tolerance, please be patient."
slice=GetSlice(spectra, Nmass, Tol) slice=GetSlice(spectra, Nmass, Tol)
fig=CairoMakie.Figure(size=(120, 220)) # Container fig=CairoMakie.Figure(size=(140, 440)) # Container
# Append a query string to force the image to refresh # Append a query string to force the image to refresh
timestamp=string(time_ns()) timestamp=string(time_ns())
if triqEnabled # If we have TrIQ if triqEnabled # If we have TrIQ
if colorLevel < 2 || colorLevel > 256 ||triqProb < 0.8 || triqProb > 1 if colorLevel < 4 || colorLevel > 256 || triqProb < 0.8 || triqProb > 1
msg="Incorrect TrIQ values, please adjust accordingly and try again." msg="Incorrect TrIQ values, please adjust accordingly and try again."
warning_msg=true warning_msg=true
else else
@ -501,7 +520,7 @@ end
ticks=round.(range(0, (stop=maximum(slice)*triqProb), length=15), sigdigits=3) ticks=round.(range(0, (stop=maximum(slice)*triqProb), length=15), sigdigits=3)
#println("ticks 2: $(round.(range(0, (stop=maximum(slice)*triqProb), length=15), sigdigits=3))") #println("ticks 2: $(round.(range(0, (stop=maximum(slice)*triqProb), length=15), sigdigits=3))")
#Colorbar(fig[1, 1], colormap=rgb_ViridisPalette, limits=(0, maximum(TrIQ(slice, Int(colorLevel), triqProb))),ticks=ticks, label="Intensity") #Colorbar(fig[1, 1], colormap=rgb_ViridisPalette, limits=(0, maximum(TrIQ(slice, Int(colorLevel), triqProb))),ticks=ticks, label="Intensity")
Colorbar(fig[1, 1], colormap=cgrad(:viridis, colorLevel, categorical=true), limits=(0, maximum(slice)*triqProb),ticks=ticks, label="Intensity") Colorbar(fig[1, 1], colormap=cgrad(:viridis, colorLevel, categorical=true), limits=(0, maximum(slice)*triqProb),ticks=ticks, label="Intensity", size = 25)
save("public/colorbar_TrIQ_$(text_nmass).png", fig) save("public/colorbar_TrIQ_$(text_nmass).png", fig)
colorbarT="/colorbar_TrIQ_$(text_nmass).png?t=$(timestamp)" colorbarT="/colorbar_TrIQ_$(text_nmass).png?t=$(timestamp)"
# Get current colorbar # Get current colorbar
@ -538,7 +557,7 @@ end
#ticks=round.(range(0, stop=maximum(slice), length=10), sigdigits=3) #ticks=round.(range(0, stop=maximum(slice), length=10), sigdigits=3)
ticks=round.(range(0, stop=maximum(slice), length=15), sigdigits=3) ticks=round.(range(0, stop=maximum(slice), length=15), sigdigits=3)
#Colorbar(fig[1, 1], colormap=rgb_ViridisPalette, limits=(0, maximum(slice)),ticks=ticks, label="Intensity") #Colorbar(fig[1, 1], colormap=rgb_ViridisPalette, limits=(0, maximum(slice)),ticks=ticks, label="Intensity")
Colorbar(fig[1, 1], colormap=cgrad(:viridis, 256, categorical=true), limits=(0, maximum(slice)),ticks=ticks, label="Intensity") Colorbar(fig[1, 1], colormap=cgrad(:viridis, 256, categorical=true), limits=(0, maximum(slice)),ticks=ticks, label="Intensity", size = 25)
save("public/colorbar_MSI_$(text_nmass).png", fig) save("public/colorbar_MSI_$(text_nmass).png", fig)
colorbar="/colorbar_MSI_$(text_nmass).png?t=$(timestamp)" colorbar="/colorbar_MSI_$(text_nmass).png?t=$(timestamp)"
# Get current colorbar # Get current colorbar
@ -620,7 +639,9 @@ end
end end
progressSpectraPlot=false progressSpectraPlot=false
btnPlotDisable=false btnPlotDisable=false
if endswith(full_route, "imzML")
btnStartDisable=false btnStartDisable=false
end
if isfile(full_routeMz) if isfile(full_routeMz)
# We enable coord search and spectra plot creation # We enable coord search and spectra plot creation
btnSpectraDisable=false btnSpectraDisable=false
@ -670,7 +691,9 @@ end
end end
progressSpectraPlot=false progressSpectraPlot=false
btnPlotDisable=false btnPlotDisable=false
if endswith(full_route, "imzML")
btnStartDisable=false btnStartDisable=false
end
if isfile(full_routeMz) if isfile(full_routeMz)
# We enable coord search and spectra plot creation # We enable coord search and spectra plot creation
btnSpectraDisable=false btnSpectraDisable=false

28
app.jl.html
View File

@ -14,9 +14,9 @@
<!-- Left DIV --> <!-- Left DIV -->
<div id="intDivStyle" class="st-col col-12 st-module"> <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>--> <!--<q-input id="textRoute" standout="custom-standout" v-model="file_route" label="Insert the route to your imzML file"></q-input>-->
<h6>Search for your imzML file in your device</h6> <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" <q-btn id="btnStyle" icon="search" class="q-ma-sm" v-on:click="btnSearch=true"
label="Search in your device for the imzML file"></q-btn> label="Select your imzML or mzML file"></q-btn>
<!--<p>{{full_route}}</p>--> <!--<p>{{full_route}}</p>-->
<div class="row st-col col-12"> <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-input id="textName" class="col-9" standout="custom-standout" v-model="file_name" label="Insert the name of your imzML file"></q-input>-->
@ -85,7 +85,7 @@
<div class="st-col col-4 col-sm-4 q-ma-sm"> <div class="st-col col-4 col-sm-4 q-ma-sm">
<q-input standout="custom-standout" id="textcolorLevel" step="1" v-model="colorLevel" <q-input standout="custom-standout" id="textcolorLevel" step="1" v-model="colorLevel"
label="TrIQ color levels" type="number" :rules="[ label="TrIQ color levels" type="number" :rules="[
val => triqEnabled ? ( '* Required', val >= 2 &amp;&amp; val <= 256 || 'Needs to be in range between 2 and 256') : true val => triqEnabled ? ( '* Required', val >= 4 &amp;&amp; val <= 256 || 'Needs to be in range between 2 and 256') : true
]" :readonly="!triqEnabled" :disable="!triqEnabled"></q-input> ]" :readonly="!triqEnabled" :disable="!triqEnabled"></q-input>
</div> </div>
</div> </div>
@ -159,11 +159,11 @@
</div> </div>
<!-- Image manager --> <!-- Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10"> <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> <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>--> <!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgInt" width="80%"></q-img>-->
</div> </div>
<div class="col-2"> <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> <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
</div> </div>
</div> </div>
@ -180,11 +180,11 @@
</div> </div>
<!-- Triq Image manager --> <!-- Triq Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10"> <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> <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>--> <!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgIntT" width="80%"></q-img>-->
</div> </div>
<div class="col-2"> <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> <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
</div> </div>
</div> </div>
@ -246,10 +246,10 @@
</div> </div>
<!-- Image manager --> <!-- Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="st-col col-10"> <div class="col-10 q-pa-none q-ma-none ">
<plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none"></plotly> <plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none"></plotly>
</div> </div>
<div class="st-col col-2"> <div class="col-2">
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img> <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
</div> </div>
</div> </div>
@ -265,7 +265,7 @@
</div> </div>
<!-- Triq Image manager --> <!-- Triq Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10"> <div class="col-10 q-pa-none q-ma-none ">
<plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none"></plotly> <plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none"></plotly>
</div> </div>
<div class="col-2"> <div class="col-2">
@ -301,10 +301,10 @@
</div> </div>
<!-- Image manager --> <!-- Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="st-col col-10"> <div class="col-10 q-pa-none q-ma-none ">
<plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none"></plotly> <plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none"></plotly>
</div> </div>
<div class="st-col col-2"> <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> <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
</div> </div>
</div> </div>
@ -320,10 +320,10 @@
</div> </div>
<!-- Triq Image manager --> <!-- Triq Image manager -->
<div id="image-container" class="row st-col col-12"> <div id="image-container" class="row st-col col-12">
<div class="col-10"> <div class="col-10 q-pa-none q-ma-none ">
<plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none"></plotly> <plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none"></plotly>
</div> </div>
<div class="col-2"> <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> <q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
</div> </div>
</div> </div>