Update templates/index.html

templates/index.html

@@ -20,7 +20,6 @@
       --shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
     }
 
-    /* Background */
     html,body{height:100%;}
     body{
       margin:0;
@@ -33,7 +32,6 @@
       line-height:1.45;
     }
 
-    /* Layout */
     .wrap{
       max-width: 980px;
       margin: 48px auto 120px;
@@ -49,7 +47,6 @@
       box-shadow: inset 0 0 0 1px #ffffff08;
     }
 
-    /* Cards */
     .card{
       background: linear-gradient(180deg, #ffffff08, #00000022);
       border: 1px solid #ffffff1c;
@@ -66,12 +63,8 @@
     .card .hdr h2{margin:0; font-size:18px; font-weight:700; color:#fff;}
     .card .body{ padding:18px; }
 
-    /* Uploader */
-    .uploader{
-      display:grid; gap:14px;
-    }
+    .uploader{ display:grid; gap:14px; }
 
-    /* Hide original input but keep for logic */
     #fileUpload{
       position: absolute;
       width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
@@ -105,7 +98,6 @@
 
     .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
 
-    /* Buttons */
     .btn{
       --btn-bg: #2331a6;
       --btn-fg: #eaf0ff;
@@ -121,7 +113,6 @@
     .btn.secondary{ --btn-bg:#1a213f; --btn-fg:#dbe2ff; }
     .btn.danger  { --btn-bg:#4a1020; --btn-fg:#ffd7df; border-color:#ff6b6b44; }
 
-    /* Progress + status */
     progress{
       width: 320px; height: 14px; border-radius: 999px; overflow:hidden; vertical-align: middle;
       background: #293079;
@@ -133,14 +124,12 @@
     }
     #uploadStatus, #searchStatus{ margin-left:10px; font-weight:700; color:#d5dcff; }
 
-    /* Client list chips */
     #uploadedListClient ul{ list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:8px;}
     #uploadedListClient li{
       padding:6px 10px; border-radius:999px; font-size:12px; color:#dfe5ff;
       background: linear-gradient(180deg,#ffffff0a,#00000025); border:1px solid #ffffff1a;
     }
 
-    /* Forms */
     label{ color:#cdd4ff; font-weight:600; letter-spacing:.2px; }
     textarea, input[type="number"]{
       width:100%; box-sizing:border-box; color:#fff; background:#0d1333; border:1px solid #ffffff22;
@@ -151,18 +140,52 @@
 
     hr{ border:none; height:1px; background:#ffffff1a; margin:26px 0; }
 
-    /* Results */
     ol{ padding-left: 22px; }
-    ol li{ margin: 10px 0; }
+    ol li{ margin: 12px 0; }
     a{ color: var(--accent2); }
 
-    /* Small helpers */
     .muted{ color:var(--muted); font-size:13px; }
     .cluster{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
 
-    @media (max-width:700px){
-      .row{ gap:8px; }
-      progress{ width:100%; }
+    /* Sidebar for context */
+    .sidebar-backdrop{
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,.35);
+      opacity: 0;
+      pointer-events: none;
+      transition: .18s ease;
+      z-index: 60;
+    }
+    .sidebar{
+      position: fixed;
+      top: 0; right: 0; bottom: 0;
+      width: min(520px, 90vw);
+      background: linear-gradient(180deg, #0e1330, #0a0f28);
+      border-left: 1px solid #ffffff22;
+      box-shadow: -16px 0 40px rgba(0,0,0,.35);
+      transform: translateX(100%);
+      transition: transform .22s ease;
+      z-index: 70;
+      display: grid;
+      grid-template-rows: auto 1fr;
+    }
+    .sidebar.open{ transform: translateX(0); }
+    .sidebar-backdrop.open{ opacity: 1; pointer-events: auto; }
+    .sidebar .sbar-hdr{
+      display:flex; align-items:center; justify-content:space-between; gap:10px;
+      padding:14px 16px; border-bottom:1px solid #ffffff1a;
+    }
+    .sidebar .sbar-hdr h3{ margin:0; font-size:16px; }
+    .sidebar .sbar-body{
+      overflow: auto; padding: 16px;
+    }
+    .ctx-p{ margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: #ffffff06; border:1px solid #ffffff14; }
+    .ctx-p.hl{ outline: 2px solid #61e7ff; box-shadow: 0 0 0 3px #61e7ff22; }
+
+    .smallbtn{
+      font-size:12px; padding:6px 8px; border-radius:10px;
+      background: #1a213f; color:#dbe2ff; border:1px solid #ffffff18; cursor:pointer;
     }
   </style>
 </head>
@@ -187,10 +210,7 @@
       </div>
       <div class="body">
         <div class="uploader">
-          <!-- Original input kept for logic -->
           <input type="file" id="fileUpload" multiple>
-
-          <!-- Drop zone (click also opens the hidden input) -->
           <div id="dropZone" class="drop" tabindex="0" role="button" aria-label="Drop files here or click to browse">
             <div class="big">Drag & Drop files here</div>
             <div class="small">.txt, .pdf supported</div>
@@ -202,7 +222,6 @@
             <span id="uploadStatus"></span>
           </div>
 
-          <!-- This shows uploaded files immediately after form submission (server-rendered) -->
           {% if uploaded_filenames %}
             <h4 style="margin:14px 0 6px;">Uploaded Files</h4>
             <ul>
@@ -212,7 +231,6 @@
             </ul>
           {% endif %}
 
-          <!-- Client-side list -->
           <div id="uploadedListClient" style="display:none; margin-top:10px;"></div>
         </div>
       </div>
@@ -226,7 +244,6 @@
         <h2 id="ret">Search your uploads</h2>
       </div>
       <div class="body">
-        <!-- ⬇️ the hidden sid travels with every form submit -->
         <form method="post">
           <input type="hidden" name="sid" value="{{ sid }}">
 
@@ -262,8 +279,11 @@
 
         <h3 style="margin-top:18px;">Matching Paragraphs</h3>
         <ol>
-          {% for para in results %}
-            <li><p>{{ para }}</p></li>
+          {% for r in results %}
+            <li>
+              <p>{{ r.text }}</p>
+              <button type="button" class="smallbtn" onclick="openContext({{ r.idx }})">🔎 View context</button>
+            </li>
           {% endfor %}
         </ol>
         {% endif %}
@@ -271,11 +291,26 @@
     </section>
   </div>
 
+  <!-- Sidebar + backdrop -->
+  <div id="sidebarBackdrop" class="sidebar-backdrop"></div>
+  <aside id="sidebar" class="sidebar" aria-hidden="true">
+    <div class="sbar-hdr">
+      <h3>Paragraph context</h3>
+      <div style="display:flex; gap:8px; align-items:center;">
+        <button class="smallbtn" id="expandLess" title="Show less context">−</button>
+        <button class="smallbtn" id="expandMore" title="Show more context">+</button>
+        <button class="smallbtn" id="closeSidebar">✕</button>
+      </div>
+    </div>
+    <div id="sidebarBody" class="sbar-body"></div>
+  </aside>
+
   <script>
     const SID = "{{ sid }}";
     let uploadedNames = [];
+    let currentWindow = 3;
 
-    // Keep original input-change logic (unchanged)
+    // Upload (unchanged behavior)
     document.getElementById("fileUpload").addEventListener("change", function () {
       const files = this.files;
       if (files.length === 0) return;
@@ -317,7 +352,7 @@
       xhr.send(formData);
     });
 
-    // Show client-side list (unchanged IDs / flow)
+    // Show client-side list
     document.getElementById("showFilesBtn").addEventListener("click", function () {
       const listDiv = document.getElementById("uploadedListClient");
       listDiv.innerHTML = "";
@@ -333,28 +368,22 @@
       listDiv.style.display = "block";
     });
 
-    // Maintain existing search progress behavior
+    // Search progress (unchanged)
     document.querySelector('form[method="post"]').addEventListener("submit", function () {
       const progressBar = document.getElementById("searchProgress");
       const statusText  = document.getElementById("searchStatus");
-
-      // Show spinner + message (indeterminate)
       progressBar.removeAttribute("value");
       progressBar.style.display = "inline-block";
       statusText.textContent = "🔍 Searching...";
     });
 
-    // New: Drag-and-drop zone (reuses identical upload flow; does not alter existing logic)
+    // Drag & drop (unchanged)
     const dropZone = document.getElementById('dropZone');
     const hiddenInput = document.getElementById('fileUpload');
-
-    // Clicking the zone opens the hidden input (so your original listener runs)
     dropZone.addEventListener('click', () => hiddenInput.click());
     dropZone.addEventListener('keypress', (e) => {
       if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); hiddenInput.click(); }
     });
-
-    // Visual state
     ['dragenter','dragover'].forEach(evt => {
       dropZone.addEventListener(evt, e => {
         e.preventDefault(); e.stopPropagation();
@@ -364,14 +393,11 @@
     ['dragleave','dragend','drop'].forEach(evt => {
       dropZone.addEventListener(evt, () => dropZone.classList.remove('dragover'));
     });
-
-    // Handle drop by sending the exact same request shape as the original change-handler
     dropZone.addEventListener('drop', (e) => {
       e.preventDefault(); e.stopPropagation();
       const files = e.dataTransfer.files;
       if(!files || files.length === 0) return;
 
-      // Note: we duplicate the same logic here to avoid modifying your original handler.
       const formData = new FormData();
       for (const file of files) {
         formData.append("file", file);
@@ -408,6 +434,91 @@
 
       xhr.send(formData);
     });
+
+    // ── Context sidebar logic ──────────────────────────────────────────────
+    const sidebar = document.getElementById('sidebar');
+    const sidebarBody = document.getElementById('sidebarBody');
+    const backdrop = document.getElementById('sidebarBackdrop');
+    const btnClose = document.getElementById('closeSidebar');
+    const btnMore = document.getElementById('expandMore');
+    const btnLess = document.getElementById('expandLess');
+
+    function openSidebar(){
+      sidebar.classList.add('open');
+      backdrop.classList.add('open');
+      sidebar.setAttribute('aria-hidden', 'false');
+    }
+    function closeSidebar(){
+      sidebar.classList.remove('open');
+      backdrop.classList.remove('open');
+      sidebar.setAttribute('aria-hidden', 'true');
+      sidebarBody.innerHTML = '';
+    }
+    btnClose.addEventListener('click', closeSidebar);
+    backdrop.addEventListener('click', closeSidebar);
+
+    async function fetchContext(idx, windowSize){
+      const res = await fetch(`/api/context?sid=${encodeURIComponent(SID)}&idx=${idx}&window=${windowSize}`);
+      if(!res.ok){
+        const t = await res.text();
+        throw new Error(t || 'Failed to fetch context');
+      }
+      return res.json();
+    }
+
+    function renderContext(ctxJson){
+      sidebarBody.innerHTML = '';
+      ctxJson.paras.forEach((p, i) => {
+        const div = document.createElement('div');
+        div.className = 'ctx-p' + (i === ctxJson.center ? ' hl' : '');
+        div.innerText = p;
+        if(i === ctxJson.center){
+          div.id = 'centerPara';
+        }
+        sidebarBody.appendChild(div);
+      });
+      // Scroll the highlighted one into view
+      setTimeout(() => {
+        const el = document.getElementById('centerPara');
+        if(el){ el.scrollIntoView({behavior:'smooth', block:'center'}); }
+      }, 0);
+    }
+
+    let lastIdx = null;
+
+    window.openContext = async function(idx){
+      try{
+        lastIdx = idx;
+        const data = await fetchContext(idx, currentWindow);
+        renderContext(data);
+        openSidebar();
+      }catch(err){
+        alert('Error: ' + err.message);
+      }
+    }
+
+    btnMore.addEventListener('click', async () => {
+      if(lastIdx === null) return;
+      currentWindow = Math.min(currentWindow + 2, 20);
+      const data = await fetchContext(lastIdx, currentWindow);
+      renderContext(data);
+    });
+
+    btnLess.addEventListener('click', async () => {
+      if(lastIdx === null) return;
+      currentWindow = Math.max(1, currentWindow - 2);
+      const data = await fetchContext(lastIdx, currentWindow);
+      renderContext(data);
+    });
+
+    // Maintain existing search progress behavior
+    document.querySelector('form[method="post"]').addEventListener("submit", function () {
+      const progressBar = document.getElementById("searchProgress");
+      const statusText  = document.getElementById("searchStatus");
+      progressBar.removeAttribute("value");
+      progressBar.style.display = "inline-block";
+      statusText.textContent = "🔍 Searching...";
+    });
   </script>
 </body>
-</html>
+</html>