mm/dr-sandbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling changes (radio for N)

Browse Source
This commit is contained in:
Michael Pilosov 2026-04-21 20:07:42 -06:00
parent 92069a3c91
commit eaeb6b5c2a
3 changed files with 33 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/web/static/dataset-picker.js
View File

@ -236,18 +236,18 @@ async function main() {
continueBtn.title = selectedId ? '' : 'pick a dataset first';
}
const slider = document.getElementById('n-slider');
const nValue = document.getElementById('n-value');
const nInputs = document.querySelectorAll('input[name="n"]');
function applyN(n) {
nValue.textContent = n.toLocaleString();
hidden.numPoints.value = String(n);
for (const s of scenes) {
const cap = s.geometry.attributes.position.count;
s.geometry.setDrawRange(0, Math.min(n, cap));
}
}
slider.addEventListener('input', (e) => applyN(parseInt(e.target.value, 10)));
applyN(parseInt(slider.value, 10));
nInputs.forEach(input => {
input.addEventListener('change', (e) => applyN(parseInt(e.target.value, 10)));
});
applyN(parseInt(document.querySelector('input[name="n"]:checked').value, 10));
let jitterScale = 0;
const jInputs = document.querySelectorAll('input[name="j"]');

35
app/web/static/style.css
View File

@ -625,40 +625,41 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
text-transform: uppercase;
color: var(--mute);
}
.picker-controls .ctl-value {
font-family: var(--mono);
font-size: 0.82rem;
color: var(--accent);
min-width: 3.5rem;
text-align: right;
font-variant-numeric: tabular-nums;
}
.picker-controls input[type="range"] {
width: 100%;
accent-color: var(--accent);
height: 4px;
}
.picker-controls .segmented {
grid-column: 2 / -1;
display: flex;
justify-content: space-between;
/* Shared 5-column track across every segmented row. 3-option rows drop
their options into columns 1/3/5 so first/middle/last align with the
5-option row's first/middle/last. */
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
}
.picker-controls .segmented.count-3 > label:nth-child(1) { grid-column: 1; }
.picker-controls .segmented.count-3 > label:nth-child(2) { grid-column: 3; }
.picker-controls .segmented.count-3 > label:nth-child(3) { grid-column: 5; }
.picker-controls .segmented label {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--mute);
cursor: pointer;
padding: 3px 2px 4px;
border-bottom: 1px solid transparent;
transition: color 120ms ease, border-color 120ms ease;
transition: color 120ms ease;
user-select: none;
font-variant-numeric: tabular-nums;
position: relative;
text-align: center;
}
.picker-controls .segmented label > span {
display: inline-block;
padding: 0 2px 1px;
border-bottom: 1px solid transparent;
transition: border-color 120ms ease;
}
.picker-controls .segmented label:hover { color: var(--ink); }
.picker-controls .segmented label:has(input:checked) {
color: var(--accent);
}
.picker-controls .segmented label:has(input:checked) > span {
border-bottom-color: var(--accent);
}
.picker-controls .segmented label:has(input:focus-visible) {

15
app/web/templates/index.html
View File

@ -49,19 +49,24 @@
</p>
<div class="picker-controls">
<label class="ctl-label" for="n-slider">n samples</label>
<input type="range" id="n-slider" min="100" max="5000" step="100" value="500">
<span class="ctl-value" id="n-value">500</span>
<span class="ctl-label">n samples</span>
<div class="segmented count-5" role="radiogroup" aria-label="number of samples">
<label><input type="radio" name="n" value="100"><span>100</span></label>
<label><input type="radio" name="n" value="500" checked><span>500</span></label>
<label><input type="radio" name="n" value="1000"><span>1,000</span></label>
<label><input type="radio" name="n" value="2500"><span>2,500</span></label>
<label><input type="radio" name="n" value="5000"><span>5,000</span></label>
</div>
<span class="ctl-label">noise σ</span>
<div class="segmented" role="radiogroup" aria-label="noise σ">
<div class="segmented count-3" role="radiogroup" aria-label="noise σ">
<label><input type="radio" name="j" value="0.001"><span>0.001</span></label>
<label><input type="radio" name="j" value="0.005" checked><span>0.005</span></label>
<label><input type="radio" name="j" value="0.01"><span>0.010</span></label>
</div>
<span class="ctl-label">timesteps</span>
<div class="segmented" role="radiogroup" aria-label="number of timesteps">
<div class="segmented count-3" role="radiogroup" aria-label="number of timesteps">
<label><input type="radio" name="f" value="12"><span>12</span></label>
<label><input type="radio" name="f" value="24" checked><span>24</span></label>
<label><input type="radio" name="f" value="48"><span>48</span></label>