started the inclusion of click interaction for plots

Manifest.toml

@@ -2,7 +2,7 @@
 
 julia_version = "1.11.2"
 manifest_format = "2.0"
-project_hash = "e84343a015a9b60e7e39a0605149974e3d8cf1e0"
+project_hash = "e1be01554a547da63b1504fb440ab6cc4855bc9d"
 
 [[deps.ATK_jll]]
 deps = ["Artifacts", "Glib_jll", "JLLWrappers", "Libdl"]

Project.toml

@@ -10,4 +10,5 @@ NativeFileDialog = "e1fe445b-aa65-4df4-81c1-2041507f0fd4"
 NaturalSort = "c020b1a1-e9b0-503a-9c33-f039bfc54a85"
 PlotlyBase = "a03496cd-edff-5a9b-9e67-9cda94a718b5"
 Statistics = "10745b16-79ce-11e8-11f9-7d13ad32a3b2"
+StipplePlotly = "ec984513-233d-481d-95b0-a3b58b97af2b"
 julia_mzML_imzML = "38eb50d3-2fb6-4afa-992a-964ed8562ed9"

app.jl

@@ -12,6 +12,7 @@ using NaturalSort
 using Images
 using LinearAlgebra
 using NativeFileDialog # Opens the file explorer depending on the OS
+using StipplePlotly
 @genietools
 
 # == Code import ==
@@ -148,6 +149,11 @@ end
     @out plotdata=[traceSpectra]
     @out plotlayout=layoutSpectra
 
+    # Interactive plot reactions
+    @in data_click = Dict{String,Any}()
+    #@in data_selected = Dict{String,Any}() # Selected is for areas, this can work for the masks
+    #<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" @click="data_selected" class="q-pa-none q-ma-none sync_data"></plotly>
+
     # Interface Plot Surface
     layoutContour=PlotlyBase.Layout(
         title="2D Topographic Map",
@@ -197,8 +203,6 @@ end
     @out plotdata3d=[trace3D]
     @out plotlayout3d=layout3D
 
-    # println("3D trace defined: ", trace3D)
-
     # == Reactive handlers ==
     # Reactive handlers watch a variable and execute a block of code when its value changes
     # The onbutton handler will set the variable to false after the block is executed
@@ -768,6 +772,20 @@ end
         CompareDialog=true
     end
 
+
+    # Event detection for clicking on the spectrum plot
+    @onchange data_click begin
+        println("Clicked data on sum spectrum plot : ", data_click)
+        # Now it needs to compare if there is a value from the spectrum close (to make sure it does not select invalid m/z)
+        # and then, add it to the mass-to-charge ratio of interest input to the frontend to ease with inputs
+        # optional: red line signaling which m/z got selected in the spectrum plot
+    end
+
+    # WIP add an x and y input and a plot to select pixels in an image and then calculate a plot (not the sum of plots)
+    # optional: red lines to signal which pixel is selected in the image plot
+
+    @mounted watchplots()
+
     GC.gc() # Trigger garbage collection
     if Sys.islinux()
         ccall(:malloc_trim, Int32, (Int32,), 0) # Ensure julia returns the freed memory to OS

app.jl.html

@@ -151,7 +151,8 @@
                         </q-tab-panel>
                         <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"></plotly>-->
+                            <plotly id="plotStyle" :data="plotdata" :layout="plotlayout" @click="data_click" class="q-pa-none q-ma-none sync_data"></plotly>
                         </q-tab-panel>
                         <q-tab-panel name="tab3">
                           <!-- Content for Tab 3 -->

start_MSI_GUI.jl

@@ -7,6 +7,7 @@ Pkg.add("Libz") ; Pkg.add("PlotlyBase") ; Pkg.add("CairoMakie") ; Pkg.add("Color
 Pkg.add(url="https://github.com/CINVESTAV-LABI/julia_mzML_imzML") # With this we ensure it uses the latest library iteration
 Pkg.add("Images") ; Pkg.add("LinearAlgebra")
 Pkg.add("NativeFileDialog")
+Pkg.add("StipplePlotly")
 
 using Genie