From 80171da78d0aca4914f47642c1c749f9d3a0d8fa Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 20 Oct 2025 11:14:44 +0100
Subject: [PATCH] Enhance LLM import preview with improved question display and
 missing M2M handling

---
 sbas/templates/sbas/llm_prompt_view.html      |   6 +-
 .../sbas/partials/import_preview.html         | 107 +++++++++++++-----
 2 files changed, 81 insertions(+), 32 deletions(-)

diff --git a/sbas/templates/sbas/llm_prompt_view.html b/sbas/templates/sbas/llm_prompt_view.html
index a1386b59..9475da0d 100644
--- a/sbas/templates/sbas/llm_prompt_view.html
+++ b/sbas/templates/sbas/llm_prompt_view.html
@@ -20,9 +20,9 @@ Please adhere to the following guidelines when creating each question:
 7. Relevance: Ensure that the question is relevant to current radiological practices and guidelines.
 8. Questions should feature metadata tags for finding, structure, condition, presentation, and subspecialty.
 9. Each question output should be a json object with the following schema:
-10. For article sources pleese reference the article doi within the explanation field in the format [doi:10.xxxx/xxxxx].
-11. For statdx sources please reference the article in the format [statdx:article_id].
-12. References should be included inline within the explanation field.
+10. For article sources pleese reference the article doi within the explanation field in the format [doi:10.xxxx/xxxxx], if you do not know the doi please use the article name.
+11. For statdx sources please reference the article name in the format [statdx:article_id].
+12. References should be included inline within the feedback fields.
 13. Questions need to have a radiology focus, please avoid questions that are purely clinical or biochemical without imaging relevance.
 
 JSON Schema (draft-07 compatible)
diff --git a/sbas/templates/sbas/partials/import_preview.html b/sbas/templates/sbas/partials/import_preview.html
index ad703921..dbc45dd5 100644
--- a/sbas/templates/sbas/partials/import_preview.html
+++ b/sbas/templates/sbas/partials/import_preview.html
@@ -1,36 +1,85 @@
-{% for item in items %}
-  <div class="card mb-2">
-    <div class="card-body">
-      <h5 class="card-title">Question {{ item.index|add:1 }}</h5>
-      {% if item.payload %}
-        <p><strong>Stem:</strong> {{ item.payload.stem|default:''|safe }}</p>
-        <p><strong>Answers:</strong>
-          <ul>
-            <li>A: {{ item.payload.a_answer|default:''|safe }}</li>
-            <li>B: {{ item.payload.b_answer|default:''|safe }}</li>
-            <li>C: {{ item.payload.c_answer|default:''|safe }}</li>
-            <li>D: {{ item.payload.d_answer|default:''|safe }}</li>
-            <li>E: {{ item.payload.e_answer|default:''|safe }}</li>
-          </ul>
-        </p>
-      {% endif %}
-      <p><strong>Missing M2M:</strong>
-        {% if item.missing_m2m %}
-          <ul>
-            {% for m in item.missing_m2m %}
-              <li>{{ m.model }}: {{ m.values|join:", " }}</li>
-            {% endfor %}
-          </ul>
-        {% else %}
-          None
+<form id="llm-import-confirm-form" method="post" hx-post="{% url 'sbas:import_llm_confirm' %}" hx-target="#import-result" hx-swap="innerHTML">
+  {% csrf_token %}
+  <input type="hidden" name="session_key" value="{{ session_key }}">
+  {% for item in items %}
+    <div class="card mb-2">
+      <div class="card-body">
+        <h5 class="card-title">Question {{ item.index }}</h5>
+        {% if item.payload %}
+          <p><strong>Stem:</strong> {{ item.payload.stem|default:''|safe }}</p>
+          <p><strong>Answers:</strong>
+            <ul>
+              <li>A: {{ item.payload.a_answer|default:''|safe }}</li>
+              <li>B: {{ item.payload.b_answer|default:''|safe }}</li>
+              <li>C: {{ item.payload.c_answer|default:''|safe }}</li>
+              <li>D: {{ item.payload.d_answer|default:''|safe }}</li>
+              <li>E: {{ item.payload.e_answer|default:''|safe }}</li>
+            </ul>
+          </p>
         {% endif %}
-      </p>
-      <div>
-        <label><input type="checkbox" name="selected" value="{{ item.index }}" checked> Include</label>
+        <p><strong>Missing M2M:</strong>
+          {% if item.missing_m2m %}
+            <ul>
+              {% for m in item.missing_m2m %}
+                <li>
+                  {{ m.model }}:
+                  {% for val in m.values %}
+                    <button type="button" class="btn btn-sm btn-outline-danger ms-1 toggle-exclude" data-idx="{{ item.index }}" data-model="{{ m.model }}" data-value="{{ val }}">{{ val }}</button>
+                  {% endfor %}
+                </li>
+              {% endfor %}
+            </ul>
+          {% else %}
+            None
+          {% endif %}
+        </p>
+        <div>
+          <label><input type="checkbox" name="selected" value="{{ item.index }}" checked> Include</label>
+        </div>
+        <!-- container for hidden exclude inputs for this item -->
+        <div id="exclude-container-{{ item.index }}"></div>
       </div>
     </div>
+  {% endfor %}
+
+  <div class="d-flex gap-2">
+    <label class="me-2"><input type="checkbox" name="allow_create_m2m" {% if allow_create_m2m %}checked{% endif %}> Create missing M2M</label>
+    <button class="btn btn-success" type="submit">Import selected</button>
+    <button class="btn btn-secondary" type="button" hx-get="{% url 'sbas:import_llm_questions' %}" hx-target="#import-preview">Cancel</button>
   </div>
-{% endfor %}
+  <div id="import-result" class="mt-3"></div>
+</form>
+
+<script>
+  // Toggle exclude: clicking a missing M2M button will add/remove a hidden input
+  document.querySelectorAll('.toggle-exclude').forEach(function(btn){
+    btn.addEventListener('click', function(){
+      const idx = btn.dataset.idx;
+      const model = btn.dataset.model;
+      const value = btn.dataset.value;
+      const container = document.getElementById('exclude-container-' + idx);
+      const inputName = 'exclude_' + idx;
+      // check if an input for this value already exists
+      const existing = container.querySelector('input[data-model="' + model + '"][data-value="' + value + '"]');
+      if(existing){
+        // remove input and toggle style
+        existing.remove();
+        btn.classList.remove('btn-danger');
+        btn.classList.add('btn-outline-danger');
+      } else {
+        const inp = document.createElement('input');
+        inp.type = 'hidden';
+        inp.name = inputName;
+        inp.value = model + ':::' + value;
+        inp.setAttribute('data-model', model);
+        inp.setAttribute('data-value', value);
+        container.appendChild(inp);
+        btn.classList.remove('btn-outline-danger');
+        btn.classList.add('btn-danger');
+      }
+    });
+  });
+</script>
 
 <div class="d-flex gap-2">
   <button class="btn btn-success" hx-post="{% url 'sbas:import_llm_confirm' %}" hx-target="#import-result" hx-include="closest form">Import selected</button>