Spaces:
Running
Running
File size: 3,400 Bytes
ccaf22c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | /* Model-card visibility is saved separately for each benchmark panel. */
window.ModelCards = (() => {
const selections = new Map();
function mount(grid, panel) {
const storageKey = `programvla:model-cards:${panel}`;
if (!selections.has(panel)) {
let saved = [];
try {
const value = JSON.parse(localStorage.getItem(storageKey));
if (Array.isArray(value)) saved = value.filter(id => typeof id === 'string');
} catch {}
selections.set(panel, new Set(saved));
}
const hidden = selections.get(panel);
const picker = document.createElement('section');
picker.className = 'panel model-card-picker';
picker.setAttribute('aria-labelledby', 'model-card-picker-title');
picker.innerHTML = `<div class="column-picker-heading"><div>
<h2 id="model-card-picker-title">Models to display</h2>
<p id="model-card-status" role="status"></p>
</div><div class="column-picker-actions">
<button type="button" class="text-button" data-model-cards="all">Show all</button>
<button type="button" class="text-button" data-model-cards="none">Hide all</button>
</div></div><div class="task-column-options" role="group" aria-label="Models to display"></div>`;
const options = picker.querySelector('.task-column-options');
const items = [...grid.querySelectorAll('.agent-card')].map(card => {
const id = card.getAttribute('href').slice('#runs/'.length);
card.id = `model-card-${id}`;
const label = document.createElement('label');
label.className = 'model-card-toggle';
label.style.setProperty('--variant', card.style.getPropertyValue('--variant'));
label.title = card.querySelector('.card-model').textContent.trim();
const input = document.createElement('input');
input.type = 'checkbox';
input.value = id;
input.setAttribute('aria-controls', card.id);
const name = document.createElement('span');
name.textContent = card.querySelector('.agent-name').textContent.trim();
label.append(input, name);
options.append(label);
input.addEventListener('change', () => {
if (input.checked) hidden.delete(id); else hidden.add(id);
update(true);
});
return {id, card, input, label};
});
function update(save = false) {
let count = 0;
for (const {id, card, input, label} of items) {
const visible = !hidden.has(id);
card.hidden = !visible;
input.checked = visible;
label.classList.toggle('selected', visible);
if (visible) count++;
}
grid.hidden = count === 0;
picker.querySelector('#model-card-status').textContent = `${count} of ${items.length} model cards shown`;
picker.querySelector('[data-model-cards="all"]').disabled = count === items.length;
picker.querySelector('[data-model-cards="none"]').disabled = count === 0;
if (save) {
try { localStorage.setItem(storageKey, JSON.stringify([...hidden])); } catch {}
}
}
picker.addEventListener('click', event => {
const button = event.target.closest('[data-model-cards]');
if (!button) return;
for (const {id} of items) {
if (button.dataset.modelCards === 'all') hidden.delete(id); else hidden.add(id);
}
update(true);
});
grid.before(picker);
update();
}
return {mount};
})();
|