diff --git a/webapp/path_navigator.html b/webapp/path_navigator.html
index 8401c16..4b05635 100644
--- a/webapp/path_navigator.html
+++ b/webapp/path_navigator.html
@@ -135,8 +135,8 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
- background: #1a1a2e;
- color: #eee;
+ background: #000000;
+ color: #cccccc;
}
.container {
@@ -147,6 +147,9 @@
h1 {
text-align: center;
margin-bottom: 10px;
+ font-weight: 300;
+ letter-spacing: 2px;
+ color: #ffffff;
}
.controls {
@@ -158,35 +161,39 @@
}
.controls button {
- padding: 10px 20px;
- font-size: 16px;
+ padding: 8px 16px;
+ font-size: 14px;
cursor: pointer;
- background: #16213e;
- color: #eee;
- border: 1px solid #0f3460;
- border-radius: 5px;
+ background: #0a0a0a;
+ color: #888888;
+ border: 1px solid #222222;
+ border-radius: 4px;
+ transition: all 0.2s ease;
}
.controls button:hover {
- background: #0f3460;
+ background: #151515;
+ color: #ffffff;
+ border-color: #444444;
}
.controls button:disabled {
- opacity: 0.5;
+ opacity: 0.3;
cursor: not-allowed;
}
.index-display {
- font-size: 18px;
- font-weight: bold;
+ font-size: 14px;
+ color: #666666;
+ letter-spacing: 1px;
}
#graph-container {
width: 100%;
height: 450px;
- border: 1px solid #0f3460;
- border-radius: 8px;
- background: #16213e;
+ border: 1px solid #1a1a1a;
+ border-radius: 4px;
+ background: #050505;
position: relative;
}
@@ -197,33 +204,44 @@
}
.chord-panel {
- background: #16213e;
+ background: #0a0a0a;
padding: 15px;
- border-radius: 8px;
- min-width: 250px;
+ border-radius: 4px;
+ min-width: 200px;
+ border: 1px solid #1a1a1a;
}
.chord-panel h3 {
margin-top: 0;
- color: #e94560;
+ color: #666666;
+ font-size: 12px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-weight: 500;
}
.chord-panel.current {
- border: 2px solid #e94560;
+ border: 1px solid #333333;
+ }
+
+ .chord-panel.current h3 {
+ color: #00d4ff;
}
.chord-panel.prev, .chord-panel.next {
- opacity: 0.7;
+ opacity: 0.6;
}
.pitch-list {
list-style: none;
padding: 0;
+ font-size: 12px;
}
.pitch-list li {
- padding: 5px 0;
- font-family: monospace;
+ padding: 4px 0;
+ color: #888888;
+ font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
}
.file-input {
@@ -232,44 +250,20 @@
}
.file-input input {
- padding: 10px;
- background: #16213e;
- color: #eee;
- border: 1px solid #0f3460;
- border-radius: 5px;
+ padding: 8px;
+ background: #0a0a0a;
+ color: #888888;
+ border: 1px solid #222222;
+ border-radius: 4px;
}
- 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;
+ .file-select {
+ padding: 8px;
+ background: #0a0a0a;
+ color: #888888;
+ border: 1px solid #222222;
+ border-radius: 4px;
+ margin-left: 10px;
}
@@ -326,7 +320,7 @@
const graphHeight = 450;
// Voice colors - sleek pastel scheme
- const voiceColors = ['#5EAFD6', '#CE8E94', '#8FCEA4', '#E5C686'];
+ const voiceColors = ['#7eb5a6', '#c5a3ff', '#ffb3b3', '#ffd700'];
// Create Cytoscape instance
function initCytoscape() {
@@ -337,40 +331,41 @@
selector: 'node',
style: {
'background-color': 'data(color)',
- 'width': 36,
- 'height': 36,
+ 'width': 32,
+ 'height': 32,
'label': 'data(cents)',
'text-valign': 'center',
'text-halign': 'center',
- 'color': '#eee',
- 'font-size': '9px',
- 'text-outline-width': 2,
- 'text-outline-color': 'data(color)',
+ 'color': '#000000',
+ 'font-size': '10px',
+ 'font-family': 'monospace',
+ 'font-weight': 'bold',
+ 'text-outline-width': 0,
'border-width': 0,
}
},
{
selector: 'edge',
style: {
- 'width': 2,
- 'line-color': '#556',
+ 'width': 1.5,
+ 'line-color': '#555555',
'curve-style': 'straight',
'target-arrow-shape': 'none',
'label': 'data(ratio)',
- 'font-size': '10px',
- 'color': '#aaa',
+ 'font-size': '12px',
+ 'color': '#ffffff',
'text-rotation': 'autorotate',
- 'text-margin-y': -12,
- 'text-background-color': '#16213e',
+ 'text-margin-y': -10,
+ 'text-background-color': '#000000',
'text-background-opacity': 0.8,
- 'text-background-padding': '3px',
+ 'text-background-padding': '2px',
}
},
{
selector: ':selected',
style: {
- 'border-width': 3,
- 'border-color': '#fff',
+ 'border-width': 2,
+ 'border-color': '#00d4ff',
}
}
],
@@ -598,24 +593,70 @@
}
function updateChordPanel(elementId, data) {
- const ul = document.getElementById(elementId);
- ul.innerHTML = "";
+ const container = document.getElementById(elementId);
+ container.innerHTML = "";
if (!data || (Array.isArray(data) && data.length === 0)) {
- ul.innerHTML = "(none)";
+ container.innerHTML = "(none)
";
return;
}
- // Handle both formats: raw chord array or nodes array from graph API
const items = Array.isArray(data) ? data : (data.nodes || []);
- items.forEach(item => {
- const li = document.createElement("li");
- const fraction = item.fraction || item.fraction;
- const hs_array = item.hs_array || [];
- li.textContent = `${fraction} (${hs_array.join(", ")})`;
- ul.appendChild(li);
+ if (items.length === 0) return;
+
+ // Determine number of columns from first node's hs_array
+ const cols = items[0].hs_array ? items[0].hs_array.length : 0;
+ if (cols === 0) return;
+
+ // Create table - let it size based on content
+ const table = document.createElement("table");
+ table.style.fontFamily = "monospace";
+ table.style.fontSize = "10px";
+ table.style.borderCollapse = "collapse";
+ table.style.tableLayout = "auto";
+ table.style.lineHeight = "1.2";
+ table.style.margin = "0 auto";
+
+ // Header row - split into separate cells to match row structure
+ const headerRow = document.createElement("tr");
+ const headerParts = ["2", "3", "5", "7"];
+ headerParts.forEach((part, idx) => {
+ const th = document.createElement("th");
+ th.textContent = part;
+ th.style.padding = "0px 4px";
+ th.style.textAlign = idx === 0 ? "left" : "right";
+ th.style.borderBottom = "1px solid #444";
+ th.style.paddingBottom = "1px";
+ th.style.fontWeight = "normal";
+ th.style.color = "#666";
+ th.style.whiteSpace = "nowrap";
+ headerRow.appendChild(th);
});
+ table.appendChild(headerRow);
+
+ // Data rows (all nodes)
+ items.forEach((item) => {
+ const row = document.createElement("tr");
+ const hs = item.hs_array || [];
+
+ hs.forEach((val, j) => {
+ const td = document.createElement("td");
+ td.textContent = val;
+ td.style.padding = "0px 4px";
+ td.style.textAlign = "right";
+ td.style.color = "#888";
+ td.style.whiteSpace = "nowrap";
+ if (j === 0) {
+ td.style.textAlign = "left";
+ }
+ row.appendChild(td);
+ });
+
+ table.appendChild(row);
+ });
+
+ container.appendChild(table);
}
// Update display - now handled by loadFromAPI