Add button in KomaUI to reload sequence (#790)

* Added button in KomaUI to reload sequence

* Refine sequence reload button UI

* Bump KomaMRI patch version

---------

Co-authored-by: Carlos Castillo Passi <cacp@stanford.edu>

Author: mcgrathcm

Project.toml

@@ -1,6 +1,6 @@
 name = "KomaMRI"
 uuid = "6a340f8b-2cdf-4c04-99be-4953d9b66d0a"
-version = "0.10.3"
+version = "0.10.4"
 authors = ["Carlos Castillo Passi <cncastillo@uc.cl>"]
 
 [workspace]

src/KomaCLI.jl

@@ -315,7 +315,7 @@ end
         redirect_stderr(devnull) do
             fields = [fieldnames(Phantom)[5:end-3]...]
             button.(string.(fields))
-            filepicker(".seq (Pulseq)/.seqk (Koma)"; accept=".seq,.seqk")
+            filepicker(".seq (Pulseq)"; accept=".seq,.seqk")
             sys = setup_scanner()
             setup_sequence(sys)
             setup_phantom()

src/KomaUI.jl

@@ -100,6 +100,7 @@ function KomaUI(;
     sim_params = merge(Dict{String,Any}(), sim)
     rec_params = merge(Dict{Symbol,Any}(:reco=>"direct"), rec)
     mat_folder = tempdir()
+    seq_file = Ref("")
 
     # Print gpu information
     if !(haskey(sim_params, "gpu") && sim_params["gpu"] == false)
@@ -118,6 +119,11 @@ function KomaUI(;
     handle(w, "pulses_seq") do _
         view_ui!(seq_ui[], w; type="sequence", darkmode)
     end
+    handle(w, "reload_seq") do _
+        if seq_file[] != ""
+            seq_ui[] = callback_filepicker(seq_file[], w, seq_ui[])
+        end
+    end
     handle(w, "pulses_kspace") do _
         view_ui!(seq_ui[], w; type="kspace", darkmode)
     end
@@ -330,7 +336,7 @@ function KomaUI(;
                                                          "KomaMRIPlots.jl v"+version_plots);
     )
     # Filepickers
-    setup_filepickers!(w)
+    setup_filepickers!(w; seq_file)
 
     @info "KomaMRI loaded successfully 🚀" KomaMRI=version_ui KomaMRIBase=version_base KomaMRICore=version_core KomaMRIFiles=version_io KomaMRIPlots=version_plots
 
@@ -342,17 +348,21 @@ function KomaUI(;
     return nothing
 end
 
-function setup_filepickers!(w::Window)
-    setup_filepicker!(w, "#seqfilepicker", ".seq (Pulseq)/.seqk (Koma)", seq_ui; accept=".seq,.seqk")
+function setup_filepickers!(w::Window; seq_file=Ref(""))
+    setup_filepicker!(
+        w, "#seqfilepicker", ".seq (Pulseq)", seq_ui; accept=".seq,.seqk", selected_file=seq_file,
+    )
     setup_filepicker!(w, "#phafilepicker", ".phantom (Koma)/.h5 (JEMRIS)", obj_ui; accept=".phantom,.h5")
     setup_filepicker!(w, "#sigfilepicker", ".h5/.mrd (ISMRMRD)", raw_ui; accept=".h5,.mrd")
     return nothing
 end
 
-function setup_filepicker!(w::Window, selector::String, label::String, output; accept)
+function setup_filepicker!(w::Window, selector::String, label::String, output; accept, selected_file=nothing)
     widget = filepicker(label; accept)
     content!(w, selector, widget, async=false, fade=false)
     on(observe(widget)) do filename
+        filename == "" && return nothing
+        isnothing(selected_file) || (selected_file[] = filename)
         output[] = callback_filepicker(filename, w, output[])
     end
     return nothing

src/ui/css/custom.css

@@ -79,6 +79,32 @@ body, button{
   font-size: 0.875rem;
 }
 
+.seq-filepicker-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.seq-filepicker-row .field.interact-widget {
+  margin-bottom: 0;
+}
+
+.seq-filepicker-row .seq-reload-button {
+  padding: 5px 8px !important;
+  background-color: transparent !important;
+  border-color: transparent !important;
+  color: #f8f9fa !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25 !important;
+  border-radius: 0.25rem !important;
+}
+
+.seq-filepicker-row .seq-reload-button:hover,
+.seq-filepicker-row .seq-reload-button:focus {
+  background-color: #52575c !important;
+  border-color: #52575c !important;
+}
+
 /* So Ulma does not overwrite h1 */
 h1 {
   font-size: 2.5rem!important;

src/ui/html/sidebar.html

@@ -26,7 +26,14 @@
             </ul>
           </li>
           <li><hr class="dropdown-divider"></li>
-          <li class="dropdown-interact" id="seqfilepicker"></li>
+          <li class="dropdown-interact">
+            <div class="seq-filepicker-row">
+              <span id="seqfilepicker"></span>
+              <button id="button_reload_seq" class="btn btn-dark seq-reload-button" type="button" onclick='Blink.msg("reload_seq", 1)' title="Reload sequence">
+                <i class="bi bi-arrow-clockwise"></i>
+              </button>
+            </div>
+          </li>
         </ul>
     </li>
     <p id="seqname" class="pname"><abbr title="epi.seq">epi.seq</abbr></p>

test/runtests.jl

@@ -231,6 +231,9 @@ end
         @js w document.getElementById("button_pulses_seq").click()
         @test "sequence" == @js w document.getElementById("content").dataset.content
 
+        @js w document.getElementById("button_reload_seq").click()
+        @test "sequence" == @js w document.getElementById("content").dataset.content
+
         @js w document.getElementById("button_pulses_kspace").click()
         @test "kspace" == @js w document.getElementById("content").dataset.content