From 27d34fdafcf0628ebcf237b06e43de1d51b52bf9 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Mon, 30 Mar 2026 21:06:14 +0200
Subject: [PATCH] Add Path Navigator webapp for visualizing chord paths

---
 webapp/output              |   1 +
 webapp/path_navigator.html | 527 +++++++++++++++++++++++++++++++++++++
 2 files changed, 528 insertions(+)
 create mode 120000 webapp/output
 create mode 100644 webapp/path_navigator.html
diff --git a/webapp/output b/webapp/output
new file mode 120000
index 0000000..56fa787
--- /dev/null
+++ b/webapp/output
@@ -0,0 +1 @@
+../output
\ No newline at end of file
diff --git a/webapp/path_navigator.html b/webapp/path_navigator.html
new file mode 100644
index 0000000..31041d1
--- /dev/null
+++ b/webapp/path_navigator.html
@@ -0,0 +1,527 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Path Navigator</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background: #1a1a2e;
+            color: #eee;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        h1 {
+            text-align: center;
+            margin-bottom: 10px;
+        }
+        
+        .controls {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 20px;
+            align-items: center;
+        }
+        
+        .controls button {
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            background: #16213e;
+            color: #eee;
+            border: 1px solid #0f3460;
+            border-radius: 5px;
+        }
+        
+        .controls button:hover {
+            background: #0f3460;
+        }
+        
+        .controls button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        
+        .index-display {
+            font-size: 18px;
+            font-weight: bold;
+        }
+        
+        #graph-container {
+            width: 100%;
+            height: 500px;
+            border: 1px solid #0f3460;
+            border-radius: 8px;
+            background: #16213e;
+        }
+        
+        .chord-info {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 20px;
+        }
+        
+        .chord-panel {
+            background: #16213e;
+            padding: 15px;
+            border-radius: 8px;
+            min-width: 250px;
+        }
+        
+        .chord-panel h3 {
+            margin-top: 0;
+            color: #e94560;
+        }
+        
+        .chord-panel.current {
+            border: 2px solid #e94560;
+        }
+        
+        .chord-panel.prev, .chord-panel.next {
+            opacity: 0.7;
+        }
+        
+        .pitch-list {
+            list-style: none;
+            padding: 0;
+        }
+        
+        .pitch-list li {
+            padding: 5px 0;
+            font-family: monospace;
+        }
+        
+        .file-input {
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        
+        .file-input input {
+            padding: 10px;
+            background: #16213e;
+            color: #eee;
+            border: 1px solid #0f3460;
+            border-radius: 5px;
+        }
+        
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+        
+        .node circle {
+            stroke: #fff;
+            stroke-width: 2px;
+        }
+        
+        .node.current circle {
+            stroke: #e94560;
+            stroke-width: 3px;
+        }
+        
+        .link {
+            stroke: #4a5568;
+            stroke-width: 2px;
+        }
+        
+        .link-label {
+            fill: #a0aec0;
+            font-size: 12px;
+            font-family: monospace;
+        }
+        
+        .node-label {
+            fill: #eee;
+            font-size: 11px;
+            font-family: monospace;
+            text-anchor: middle;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Path Navigator</h1>
+        
+        <div class="file-input">
+            <input type="file" id="fileInput" accept=".json">
+            <span style="margin-left: 10px;">(default: output/output_chords.json)</span>
+        </div>
+        
+        <div class="controls">
+            <button id="prevBtn" disabled>← Previous</button>
+            <span class="index-display">Index: <span id="currentIndex">0</span> / <span id="totalSteps">0</span></span>
+            <button id="nextBtn" disabled>Next →</button>
+        </div>
+        
+        <div id="graph-container"></div>
+        
+        <div class="chord-info">
+            <div class="chord-panel prev">
+                <h3>Previous</h3>
+                <ul class="pitch-list" id="prevPitches"></ul>
+            </div>
+            <div class="chord-panel current">
+                <h3>Current</h3>
+                <ul class="pitch-list" id="currentPitches"></ul>
+            </div>
+            <div class="chord-panel next">
+                <h3>Next</h3>
+                <ul class="pitch-list" id="nextPitches"></ul>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Global state
+        let chords = [];
+        let currentIndex = 0;
+        let simulation = null;
+        
+        // D3 setup
+        const width = 1100;
+        const height = 500;
+        
+        const svg = d3.select("#graph-container")
+            .append("svg")
+            .attr("viewBox", `0 0 ${width} ${height}`);
+        
+        const g = svg.append("g");
+        
+        // Zoom behavior
+        const zoom = d3.zoom()
+            .scaleExtent([0.5, 4])
+            .on("zoom", (event) => {
+                g.attr("transform", event.transform);
+            });
+        
+        svg.call(zoom);
+        
+        // Load default file
+        async function loadDefaultFile() {
+            try {
+                const response = await fetch("output/output_chords.json");
+                if (!response.ok) throw new Error("File not found");
+                const data = await response.json();
+                loadChords(data.chords);
+            } catch (e) {
+                console.log("No default file, waiting for user upload");
+            }
+        }
+        
+        // File input handler
+        document.getElementById("fileInput").addEventListener("change", async (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                try {
+                    const data = JSON.parse(event.target.result);
+                    loadChords(data.chords || data);
+                } catch (err) {
+                    alert("Invalid JSON file");
+                }
+            };
+            reader.readAsText(file);
+        });
+        
+        function loadChords(chordData) {
+            chords = chordData;
+            currentIndex = 0;
+            updateDisplay();
+        }
+        
+        // Compute edge between two pitches if they differ by ±1 in exactly one non-dim-0 dimension
+        function getEdgeInfo(pitch1, pitch2) {
+            const hs1 = pitch1.hs_array;
+            const hs2 = pitch2.hs_array;
+            
+            let diffCount = 0;
+            let diffDim = -1;
+            
+            for (let i = 1; i < hs1.length; i++) { // Skip dimension 0 (prime 2)
+                const diff = hs2[i] - hs1[i];
+                if (Math.abs(diff) === 1) {
+                    diffCount++;
+                    diffDim = i;
+                } else if (diff !== 0) {
+                    return null; // Difference > 1 in this dimension
+                }
+            }
+            
+            // Must differ by exactly ±1 in exactly one dimension
+            if (diffCount !== 1) return null;
+            
+            // Check dimension 0 (prime 2) - must be same
+            if (hs1[0] !== hs2[0]) return null;
+            
+            // Calculate ratio
+            const ratio = parseFraction(pitch1.fraction) / parseFraction(pitch2.fraction);
+            
+            return {
+                dim: diffDim,
+                ratio: ratio
+            };
+        }
+        
+        function parseFraction(frac) {
+            if (typeof frac === 'number') return frac;
+            const parts = frac.split('/');
+            if (parts.length === 1) return parseFloat(parts[0]);
+            return parseInt(parts[0]) / parseInt(parts[1]);
+        }
+        
+        function formatRatio(ratio) {
+            // Simplify ratio to simple intervals
+            const tolerance = 0.01;
+            
+            // Common ratios
+            const commonRatios = [
+                { r: 2, label: "2/1" },
+                { r: 3/2, label: "3/2" },
+                { r: 4/3, label: "4/3" },
+                { r: 5/4, label: "5/4" },
+                { r: 6/5, label: "6/5" },
+                { r: 5/3, label: "5/3" },
+                { r: 8/5, label: "8/5" },
+                { r: 7/4, label: "7/4" },
+                { r: 7/5, label: "7/5" },
+                { r: 7/6, label: "7/6" },
+                { r: 9/8, label: "9/8" },
+                { r: 10/9, label: "10/9" },
+                { r: 16/15, label: "16/15" },
+                { r: 15/14, label: "15/14" },
+                { r: 9/7, label: "9/7" },
+                { r: 10/7, label: "10/7" },
+                { r: 1, label: "1/1" },
+            ];
+            
+            // Check both ratio and its inverse
+            for (const {r, label} of commonRatios) {
+                if (Math.abs(ratio - r) < tolerance || Math.abs(ratio - 1/r) < tolerance) {
+                    return ratio < 1 ? label : reverseRatio(label);
+                }
+            }
+            
+            // Default: show simplified fraction
+            return ratio < 1 ? simplifyRatio(ratio) : simplifyRatio(1/ratio);
+        }
+        
+        function reverseRatio(ratio) {
+            const parts = ratio.split('/');
+            if (parts.length !== 2) return ratio;
+            return parts[1] + "/" + parts[0];
+        }
+        
+        function simplifyRatio(ratio) {
+            // Simple fraction simplification
+            for (let d = 2; d <= 16; d++) {
+                for (let n = 1; n < d; n++) {
+                    if (Math.abs(ratio - n/d) < 0.01) {
+                        return n + "/" + d;
+                    }
+                }
+            }
+            return ratio.toFixed(2);
+        }
+        
+        function buildGraph(chord) {
+            const nodes = chord.map((pitch, i) => ({
+                id: i,
+                pitch: pitch,
+                label: pitch.fraction,
+                hs: pitch.hs_array
+            }));
+            
+            const links = [];
+            const labelSet = new Set();
+            
+            for (let i = 0; i < nodes.length; i++) {
+                for (let j = i + 1; j < nodes.length; j++) {
+                    const edgeInfo = getEdgeInfo(nodes[i].pitch, nodes[j].pitch);
+                    if (edgeInfo) {
+                        const label = formatRatio(edgeInfo.ratio);
+                        links.push({
+                            source: i,
+                            target: j,
+                            label: label
+                        });
+                    }
+                }
+            }
+            
+            return { nodes, links };
+        }
+        
+        function renderGraph(chord) {
+            const { nodes, links } = buildGraph(chord);
+            
+            // Clear previous
+            g.selectAll("*").remove();
+            
+            if (nodes.length === 0) {
+                g.append("text")
+                    .attr("x", width / 2)
+                    .attr("y", height / 2)
+                    .attr("text-anchor", "middle")
+                    .attr("fill", "#888")
+                    .text("No chord data");
+                return;
+            }
+            
+            // Force simulation
+            simulation = d3.forceSimulation(nodes)
+                .force("link", d3.forceLink(links).id(d => d.id).distance(100))
+                .force("charge", d3.forceManyBody().strength(-300))
+                .force("center", d3.forceCenter(width / 2, height / 2))
+                .force("collision", d3.forceCollide().radius(40));
+            
+            // Draw links
+            const link = g.selectAll(".link")
+                .data(links)
+                .enter()
+                .append("line")
+                .attr("class", "link");
+            
+            // Draw link labels
+            const linkLabel = g.selectAll(".link-label")
+                .data(links)
+                .enter()
+                .append("text")
+                .attr("class", "link-label")
+                .attr("text-anchor", "middle")
+                .text(d => d.label);
+            
+            // Draw nodes
+            const node = g.selectAll(".node")
+                .data(nodes)
+                .enter()
+                .append("g")
+                .attr("class", "node")
+                .call(d3.drag()
+                    .on("start", dragstarted)
+                    .on("drag", dragged)
+                    .on("end", dragended));
+            
+            node.append("circle")
+                .attr("r", 20)
+                .attr("fill", (d, i) => d3.schemeCategory10[i % 10]);
+            
+            node.append("text")
+                .attr("class", "node-label")
+                .attr("dy", 4)
+                .text(d => d.label);
+            
+            // Update positions on tick
+            simulation.on("tick", () => {
+                link
+                    .attr("x1", d => d.source.x)
+                    .attr("y1", d => d.source.y)
+                    .attr("x2", d => d.target.x)
+                    .attr("y2", d => d.target.y);
+                
+                linkLabel
+                    .attr("x", d => (d.source.x + d.target.x) / 2)
+                    .attr("y", d => (d.source.y + d.target.y) / 2 - 10);
+                
+                node.attr("transform", d => `translate(${d.x},${d.y})`);
+            });
+            
+            function dragstarted(event, d) {
+                if (!event.active) simulation.alphaTarget(0.3).restart();
+                d.fx = d.x;
+                d.fy = d.y;
+            }
+            
+            function dragged(event, d) {
+                d.fx = event.x;
+                d.fy = event.y;
+            }
+            
+            function dragended(event, d) {
+                if (!event.active) simulation.alphaTarget(0);
+                d.fx = null;
+                d.fy = null;
+            }
+        }
+        
+        function updateChordPanel(elementId, chord) {
+            const ul = document.getElementById(elementId);
+            ul.innerHTML = "";
+            
+            if (!chord || chord.length === 0) {
+                ul.innerHTML = "<li>(none)</li>";
+                return;
+            }
+            
+            chord.forEach(pitch => {
+                const li = document.createElement("li");
+                li.textContent = `${pitch.fraction} (${pitch.hs_array.join(", ")})`;
+                ul.appendChild(li);
+            });
+        }
+        
+        function updateDisplay() {
+            document.getElementById("currentIndex").textContent = currentIndex;
+            document.getElementById("totalSteps").textContent = chords.length - 1;
+            
+            document.getElementById("prevBtn").disabled = currentIndex === 0;
+            document.getElementById("nextBtn").disabled = currentIndex >= chords.length - 1;
+            
+            // Update chord panels
+            const prevChord = currentIndex > 0 ? chords[currentIndex - 1] : null;
+            const currentChord = chords[currentIndex];
+            const nextChord = currentIndex < chords.length - 1 ? chords[currentIndex + 1] : null;
+            
+            updateChordPanel("prevPitches", prevChord);
+            updateChordPanel("currentPitches", currentChord);
+            updateChordPanel("nextPitches", nextChord);
+            
+            // Render graph
+            renderGraph(currentChord);
+        }
+        
+        // Navigation
+        document.getElementById("prevBtn").addEventListener("click", () => {
+            if (currentIndex > 0) {
+                currentIndex--;
+                updateDisplay();
+            }
+        });
+        
+        document.getElementById("nextBtn").addEventListener("click", () => {
+            if (currentIndex < chords.length - 1) {
+                currentIndex++;
+                updateDisplay();
+            }
+        });
+        
+        // Keyboard navigation
+        document.addEventListener("keydown", (e) => {
+            if (e.key === "ArrowLeft") {
+                if (currentIndex > 0) {
+                    currentIndex--;
+                    updateDisplay();
+                }
+            } else if (e.key === "ArrowRight") {
+                if (currentIndex < chords.length - 1) {
+                    currentIndex++;
+                    updateDisplay();
+                }
+            }
+        });
+        
+        // Initialize
+        loadDefaultFile();
+    </script>
+</body>
+</html>
