Skip to content

Commit 3157e46

Browse files
PaulHaxPaulHax
committed
feat: improve UI styling and KDMA labeling
- Change cell diff highlighting from orange to blue accent color - Add KDMA Association Truth label at top of KDMA lists - Introduce CSS accent color variable for consistent theming - Use inline styles for cell diff borders for better compatibility - Clean up HTML formatting and improve parameter labels
1 parent d16ff56 commit 3157e46

3 files changed

Lines changed: 93 additions & 83 deletions

File tree

‎align_browser/static/app.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1458,11 +1458,12 @@ document.addEventListener("DOMContentLoaded", () => {
14581458
appState.pinnedRuns.forEach((runData) => {
14591459
const pinnedValue = getParameterValue(runData, paramName);
14601460
const isDifferent = !isFirstColumn && !compareValues(previousValue, pinnedValue);
1461-
const borderStyle = isDifferent ? 'border-left: 3px solid #ffc107;' : '';
14621461

14631462
const td = document.createElement('td');
14641463
td.className = 'pinned-run-value';
1465-
td.style.cssText = borderStyle;
1464+
if (isDifferent) {
1465+
td.style.borderLeft = '3px solid #007bff';
1466+
}
14661467
td.innerHTML = formatValue(pinnedValue, paramInfo.type, paramName, runData.id);
14671468

14681469
row.appendChild(td);
@@ -2008,6 +2009,7 @@ document.addEventListener("DOMContentLoaded", () => {
20082009
// Add KDMA associations if available
20092010
if (choice.kdma_association) {
20102011
choicesHtml += '<div class="kdma-bars">';
2012+
choicesHtml += '<div class="kdma-truth-header">KDMA Association Truth</div>';
20112013
Object.entries(choice.kdma_association).forEach(([kdma, val]) => {
20122014
const percentage = Math.round(val * 100);
20132015
const color = val >= 0.7 ? '#28a745' : val >= 0.4 ? '#ffc107' : '#dc3545';

‎align_browser/static/index.html‎

Lines changed: 64 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,71 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Align Browser</title>
7-
<link rel="stylesheet" href="./style.css">
8-
</head>
9-
<body>
7+
<link rel="stylesheet" href="./style.css" />
8+
</head>
9+
<body>
1010
<main>
11-
<div class="table-header">
12-
<h2>Align System Experiments</h2>
13-
<button id="add-column-btn" class="btn btn-primary" style="display: none;">+ Add Column</button>
14-
</div>
15-
<div id="runs-container" class="runs-container">
16-
<div class="comparison-table-container">
17-
<table class="comparison-table">
18-
<thead>
19-
<tr>
20-
<th class="parameter-header"></th>
21-
<!-- Dynamic run columns will be added here -->
22-
</tr>
23-
</thead>
24-
<tbody>
25-
<tr class="parameter-row" data-category="base_scenario">
26-
<td class="parameter-name">Base Scenario</td>
27-
<!-- Dynamic run values will be added here -->
28-
</tr>
29-
<tr class="parameter-row" data-category="scenario">
30-
<td class="parameter-name">Scenario</td>
31-
<!-- Dynamic run values will be added here -->
32-
</tr>
33-
<tr class="parameter-row" data-category="scenario_state">
34-
<td class="parameter-name">Scenario State</td>
35-
<!-- Dynamic run values will be added here -->
36-
</tr>
37-
<tr class="parameter-row" data-category="available_choices">
38-
<td class="parameter-name">Available Choices</td>
39-
<!-- Dynamic run values will be added here -->
40-
</tr>
41-
<tr class="parameter-row" data-category="kdma_values">
42-
<td class="parameter-name">KDMAs</td>
43-
<!-- Dynamic run values will be added here -->
44-
</tr>
45-
<tr class="parameter-row" data-category="adm_type">
46-
<td class="parameter-name">ADM</td>
47-
<!-- Dynamic run values will be added here -->
48-
</tr>
49-
<tr class="parameter-row" data-category="llm_backbone">
50-
<td class="parameter-name">LLM Backbone</td>
51-
<!-- Dynamic run values will be added here -->
52-
</tr>
53-
<tr class="parameter-row" data-category="adm_decision">
54-
<td class="parameter-name">Adm Decision</td>
55-
<!-- Dynamic run values will be added here -->
56-
</tr>
57-
<tr class="parameter-row" data-category="justification">
58-
<td class="parameter-name">Justification</td>
59-
<!-- Dynamic run values will be added here -->
60-
</tr>
61-
<tr class="parameter-row" data-category="probe_time">
62-
<td class="parameter-name">Probe Time</td>
63-
<!-- Dynamic run values will be added here -->
64-
</tr>
65-
<tr class="parameter-row" data-category="input_output_json">
66-
<td class="parameter-name">Input Output JSON</td>
67-
<!-- Dynamic run values will be added here -->
68-
</tr>
69-
</tbody>
70-
</table>
71-
</div>
11+
<div class="table-header">
12+
<h2>Align System Experiments</h2>
13+
<button
14+
id="add-column-btn"
15+
class="btn btn-primary"
16+
style="display: none"
17+
>
18+
+ Add Column
19+
</button>
20+
</div>
21+
<div id="runs-container" class="runs-container">
22+
<div class="comparison-table-container">
23+
<table class="comparison-table">
24+
<thead>
25+
<tr>
26+
<th class="parameter-header"></th>
27+
<!-- Dynamic run columns will be added here -->
28+
</tr>
29+
</thead>
30+
<tbody>
31+
<tr class="parameter-row" data-category="base_scenario">
32+
<td class="parameter-name">Base Scenario</td>
33+
</tr>
34+
<tr class="parameter-row" data-category="scenario">
35+
<td class="parameter-name">Scenario</td>
36+
</tr>
37+
<tr class="parameter-row" data-category="scenario_state">
38+
<td class="parameter-name">Scenario State</td>
39+
</tr>
40+
<tr class="parameter-row" data-category="available_choices">
41+
<td class="parameter-name">Choices</td>
42+
</tr>
43+
<tr class="parameter-row" data-category="kdma_values">
44+
<td class="parameter-name">KDMAs</td>
45+
</tr>
46+
<tr class="parameter-row" data-category="adm_type">
47+
<td class="parameter-name">ADM</td>
48+
</tr>
49+
<tr class="parameter-row" data-category="llm_backbone">
50+
<td class="parameter-name">LLM Backbone</td>
51+
</tr>
52+
<tr class="parameter-row" data-category="adm_decision">
53+
<td class="parameter-name">Decision</td>
54+
</tr>
55+
<tr class="parameter-row" data-category="justification">
56+
<td class="parameter-name">Justification</td>
57+
</tr>
58+
<tr class="parameter-row" data-category="probe_time">
59+
<td class="parameter-name">Probe Time</td>
60+
</tr>
61+
<tr class="parameter-row" data-category="input_output_json">
62+
<td class="parameter-name">Input Output JSON</td>
63+
</tr>
64+
</tbody>
65+
</table>
7266
</div>
67+
</div>
7368
</main>
7469
<script type="module" src="./app.js"></script>
75-
</body>
76-
</html>
70+
</body>
71+
</html>

‎align_browser/static/style.css‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
:root {
44
--run-column-min-width: 350px;
5+
--accent-color: #007bff;
56
}
67

78
body {
@@ -174,8 +175,8 @@ footer {
174175

175176
.show-more-btn {
176177
background: none;
177-
border: 1px solid #007bff;
178-
color: #007bff;
178+
border: 1px solid var(--accent-color);
179+
color: var(--accent-color);
179180
padding: 2px 6px;
180181
border-radius: 3px;
181182
font-size: 12px;
@@ -184,7 +185,7 @@ footer {
184185
}
185186

186187
.show-more-btn:hover {
187-
background: #007bff;
188+
background: var(--accent-color);
188189
color: white;
189190
}
190191

@@ -253,6 +254,18 @@ footer {
253254
text-align: right;
254255
}
255256

257+
.kdma-truth-header {
258+
font-size: 10px;
259+
color: #6c757d;
260+
font-style: italic;
261+
margin-bottom: 2px;
262+
font-weight: 500;
263+
}
264+
265+
.different-value {
266+
border-left: 3px solid #007bff;
267+
}
268+
256269
.object-display {
257270
font-family: "Courier New", monospace;
258271
font-size: 12px;
@@ -319,7 +332,7 @@ footer {
319332
}
320333

321334
.btn-primary {
322-
background-color: #007bff;
335+
background-color: var(--accent-color);
323336
color: white;
324337
}
325338

@@ -421,14 +434,14 @@ footer {
421434
.table-llm-select:hover,
422435
.table-adm-select:hover,
423436
.table-scenario-select:hover {
424-
border-color: #007bff;
437+
border-color: var(--accent-color);
425438
}
426439

427440
.table-llm-select:focus,
428441
.table-adm-select:focus,
429442
.table-scenario-select:focus {
430443
outline: none;
431-
border-color: #007bff;
444+
border-color: var(--accent-color);
432445
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
433446
}
434447

@@ -470,19 +483,19 @@ footer {
470483
}
471484

472485
.table-kdma-type-select:hover {
473-
border-color: #007bff;
486+
border-color: var(--accent-color);
474487
}
475488

476489
.table-kdma-type-select:focus {
477490
outline: none;
478-
border-color: #007bff;
491+
border-color: var(--accent-color);
479492
box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25);
480493
}
481494

482495
.add-kdma-btn {
483-
background-color: #007bff;
496+
background-color: var(--accent-color);
484497
color: white;
485-
border: 1px solid #007bff;
498+
border: 1px solid var(--accent-color);
486499
border-radius: 3px;
487500
padding: 4px 10px;
488501
font-size: 12px;
@@ -560,7 +573,7 @@ footer {
560573
appearance: none;
561574
width: 16px;
562575
height: 16px;
563-
background: #007bff;
576+
background: var(--accent-color);
564577
cursor: pointer;
565578
border-radius: 50%;
566579
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -569,7 +582,7 @@ footer {
569582
.table-kdma-value-slider::-moz-range-thumb {
570583
width: 16px;
571584
height: 16px;
572-
background: #007bff;
585+
background: var(--accent-color);
573586
cursor: pointer;
574587
border-radius: 50%;
575588
border: none;

0 commit comments

Comments
 (0)