dynamic buttons from python args

AustralianBioCommons · Sep 17, 2024 · 91c23c3 · 91c23c3
1 parent eed4b4a
commit 91c23c3
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/assets/proteinfold_template.html b/assets/proteinfold_template.html
@@ -244,7 +244,7 @@ <h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white">Structure p
 
         <!-- Canvas buttons -->
         <div id="canvas_button_container" class="flex-1 p-6 pb-2 flex justify-center items-end bg-black gap-6">
-          <button
+          <!-- <button
             class="selected group btn btn-canvas w-24 rounded bg-black py-3 text-sm font-semibold text-white hover:text-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-800"
             id="btn-ranked_0"
             onclick="setModel(0);"
@@ -303,7 +303,7 @@ <h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white">Structure p
               class="inline-block w-20 h-20 border-2 border-gray-300 group-hover:border-gray-400 rounded-md mb-2"
             />
             Ranked 4
-          </button>
+          </button> -->
         </div>
         <!-- <div class="text-white mx-auto font-semibold pb-4">
           The top-ranked structures predicted by Alphafold
@@ -636,6 +636,7 @@ <h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white">Structure p
 
       loadModel();
       loadModelImage();
+      generateButtons();
 
       while (true) {
         if (!state.loading) {
@@ -853,6 +854,27 @@ <h1 class="text-4xl md:text-5xl font-bold tracking-tight text-white">Structure p
       document.body.removeChild(saveLink);
     };
 
+    const generateButtons = () => {
+      const container = document.getElementById("canvas_button_container");
+
+      MODELS.forEach((model, index) => {
+        const button = document.createElement("button");
+        button.className =
+          "selected group btn btn-canvas w-24 rounded bg-black py-3 text-sm font-semibold text-white hover:text-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-800";
+        button.id = `btn-${model.split(".")[0]}`; // Use model name without extension as ID
+        button.onclick = () => setModel(index);
+        button.innerHTML = `
+      <img
+        id="image${index}"
+        class="inline-block w-20 h-20 border-2 border-gray-300 group-hover:border-gray-400 rounded-md mb-2"
+      />
+      ${model.split(".")[0]} <!-- Display the model name without extension -->
+    `;
+
+        container.appendChild(button);
+      });
+    };
+
     const updateButtons = () => {
       MODELS.forEach((name, i) => {
         const id = `#btn-${name.replace(".pdb", "")}`;

diff --git a/bin/generat_plots.py b/bin/generat_plots.py
@@ -299,6 +299,17 @@ def align_structures(structures):
 alphafold_template = alphafold_template.replace(f"*sample_name*", args.name)
 alphafold_template = alphafold_template.replace(f"*prog_name*", args.in_type)
 
+# Convert the Python pdb args list to a JavaScript array format
+args_pdb_array_js = ",\n".join([f'"{model}"' for model in structures])
+
+# Use regex to find and replace the MODELS array in the HTML file
+alphafold_template = re.sub(
+    r'const MODELS = \[.*?\];',  # Match the existing MODELS array in HTML template
+    f'const MODELS = [\n  {args_pdb_array_js}\n];',  # Replace with the new array
+    alphafold_template,
+    flags=re.DOTALL,
+)
+
 i = 0
 for structure in aligned_structures:
     alphafold_template = alphafold_template.replace(f"*_data_ranked_{i}.pdb*", open(structure, "r").read().replace("\n", "\\n"))