Simplify UI: remove file dropdown, auto-send fundamental on keypress

webapp/path_navigator.html

@@ -271,15 +271,10 @@
         <h1>Path Navigator</h1>
         
         <div class="file-input">
-            <select id="fileSelect">
-                <option value="">Loading files...</option>
-            </select>
-            <button onclick="loadSelectedFile()">Load</button>
-            <span style="margin-left: 10px;">or upload:</span>
+            <span>Upload file:</span>
             <input type="file" id="fileInput" accept=".json">
             <span style="margin-left: 20px;">Fundamental (Hz):</span>
             <input type="number" id="fundamentalInput" value="110" style="width: 60px;">
-            <button onclick="setFundamental()">Set</button>
         </div>
         
         <div class="controls">
@@ -655,7 +650,7 @@
             }).run();
             
             // Set canvas size
-            cy.style().cssJson()[0].value = graphWidth;
+            cy.style().json()[0].value = graphWidth;
             
             // Fit to show initial position centered
             panToIndex(currentIndex);
@@ -696,8 +691,7 @@
                 updateUI();
                 
             } catch (e) {
-                console.log("API not available, trying local file", e);
-                loadFromLocalFile();
+                console.log("Error loading graphs:", e);
             }
         }
         
@@ -755,46 +749,10 @@
             }
         }
         
-        // Fallback to local file
-        // Load file list and setup file selection
-        async function loadFileList() {
-            try {
-                const response = await fetch("/api/files");
-                const data = await response.json();
-                const select = document.getElementById("fileSelect");
-                select.innerHTML = "";
-                data.files.forEach(f => {
-                    const opt = document.createElement("option");
-                    opt.value = f;
-                    opt.textContent = f;
-                    if (f === "output_chords.json") opt.selected = true;
-                    select.appendChild(opt);
-                });
-            } catch (e) {
-                console.log("Could not load file list", e);
-            }
-        }
-        
-        async function loadSelectedFile() {
-            const select = document.getElementById("fileSelect");
-            const filename = select.value;
-            if (!filename) return;
-            
-            try {
-                const response = await fetch(`/api/set-file/${filename}`, { method: "POST" });
-                const data = await response.json();
-                currentIndex = 0;
-                loadFromAPI();
-            } catch (e) {
-                console.log("Error loading file", e);
-            }
-        }
-        
         async function setFundamental() {
             const input = document.getElementById("fundamentalInput");
             const fundamental = parseFloat(input.value);
             if (!fundamental || fundamental <= 0) {
-                alert("Please enter a valid positive number");
                 return;
             }
             try {
@@ -810,6 +768,29 @@
             }
         }
         
+        // Fundamental input - auto-send on Enter, Up/Down arrows, or input change
+        document.getElementById("fundamentalInput").addEventListener("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                setFundamental();
+            } else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                const input = document.getElementById("fundamentalInput");
+                input.value = parseFloat(input.value || 110) + 1;
+                setFundamental();
+            } else if (e.key === "ArrowDown") {
+                e.preventDefault();
+                const input = document.getElementById("fundamentalInput");
+                input.value = parseFloat(input.value || 110) - 1;
+                setFundamental();
+            }
+        });
+        
+        // Also trigger on input change (for the spinner buttons)
+        document.getElementById("fundamentalInput").addEventListener("input", () => {
+            setFundamental();
+        });
+        
         async function loadFromLocalFile() {
             try {
                 const response = await fetch("output/output_chords.json");
@@ -976,7 +957,6 @@
         });
         
         // Initialize
-        loadFileList();
         loadAllGraphs();
     </script>
 </body>