Spaces:
Running
Running
| // The first screen, drawn before the index is read: the pictograms, and the hero from first.json (written by the deploy | |
| // step from the index commit of the day) when that commit is the one the page reads. app.js draws the hero from the | |
| // index itself when it has read it (data.js totals; portal.py first_screen counts alike). | |
| import { fmtBytes, fmtCompact, fmtDate, fmtInt } from './charts.js'; | |
| import { loadRevision } from './commit.js'; | |
| import { onLanguage, t } from './i18n.js'; | |
| import { icon } from './icons.js'; | |
| const reduced = () => matchMedia('(prefers-reduced-motion: reduce)').matches; | |
| const FACTS = { ready_sources: fmtInt, answers: fmtInt, raw_rows: fmtCompact, sources: fmtInt }; | |
| const shown = new Map(); | |
| /** Pictograms for every [data-icon] element, once. */ | |
| export function decorate(root = document) { | |
| for (const n of root.querySelectorAll('[data-icon]:not([data-drawn])')) { | |
| n.dataset.drawn = '1'; | |
| const inBar = n.closest('.progress'); | |
| n.prepend(icon(n.dataset.icon, { size: Number(n.dataset.size || (inBar ? 14 : 20)) })); | |
| } | |
| } | |
| /** Write value into node. The first value is written as it is (no count from 0: the first screen shows the true | |
| * numbers at once). A later, different value (main has moved past the commit first.json names, or the page reads | |
| * preview data) is written and briefly highlighted as an update. */ | |
| export function setNumber(node, key, value, fmt) { | |
| if (!node) return; | |
| const was = shown.get(key); | |
| shown.set(key, value); | |
| node.textContent = fmt(value); | |
| node.dataset.v = String(value); | |
| if (was == null || was === value || reduced()) return; | |
| node.classList.remove('updated'); | |
| void node.offsetWidth; | |
| node.classList.add('updated'); | |
| node.addEventListener('animationend', () => node.classList.remove('updated'), { once: true }); | |
| } | |
| /** The size line (#364): distinct content and the rows without a size, not in it; the words of docs/sources.md of the | |
| * index. */ | |
| function drawSize(v) { | |
| const node = document.getElementById('hero-size'); | |
| if (!node || !('distinct_bytes' in v)) return; | |
| if (v.distinct_bytes == null) { node.replaceChildren(t('hero.sizeUnknown')); return; } | |
| const big = document.createElement('b'); | |
| const unsized = v.unsized_rows ? ` · ${t('hero.unsized', { count: v.unsized_rows, n: fmtInt(v.unsized_rows) })}` : ''; | |
| node.replaceChildren(big, ` ${t('hero.distinct')}${unsized}`); | |
| setNumber(big, 'distinct_bytes', v.distinct_bytes, fmtBytes); | |
| } | |
| let last = null; | |
| /** v: {ready_units, ready_sources, answers, raw_rows, sources, distinct_bytes, unsized_rows, index, date}. */ | |
| export function drawHero(v) { | |
| if (!v) return; | |
| last = v; | |
| setNumber(document.getElementById('hero-big'), 'ready_units', v.ready_units, fmtInt); | |
| setNumber(document.getElementById('material-n'), 'material_units', v.ready_units, fmtInt); | |
| drawSize(v); | |
| for (const li of document.querySelectorAll('#hero-facts .fact-tile')) { | |
| const k = li.dataset.k; | |
| if (v[k] != null) setNumber(li.querySelector('.fact-num'), k, v[k], FACTS[k]); | |
| } | |
| const pin = document.getElementById('pin-link'); | |
| if (v.index && pin) { | |
| pin.textContent = fmtDate(v.date); | |
| pin.href = `https://huggingface.co/datasets/Battam/agentic-env-index/tree/${v.index}`; | |
| pin.title = t('hero.commit', { sha: v.index }); | |
| } | |
| const foot = document.getElementById('foot-pin'); | |
| if (v.index && foot) foot.textContent = t('foot.index', { sha: v.index.slice(0, 7), date: fmtDate(v.date) }); | |
| } | |
| decorate(); | |
| // the hero in the new language: the same numbers, written again | |
| onLanguage(() => drawHero(last)); | |
| let drawnFromIndex = false; | |
| export const markFromIndex = () => { drawnFromIndex = true; }; | |
| // first.json was computed at deploy from one commit of the index; it is drawn only when that is the commit the page reads | |
| // (?rev= or main as it is now), else the hero waits for the page's own count. With ?catalog= or ?vocabulary= the page | |
| // shows other data at the same commit, so the hero waits too (the file is still read: the page preloads it). | |
| const params = new URLSearchParams(location.search); | |
| const override = params.has('catalog') || params.has('vocabulary'); | |
| Promise.all([ | |
| fetch('first.json', { cache: 'no-cache' }).then((r) => (r.ok ? r.json() : null)), | |
| loadRevision(params.get('rev')), | |
| ]) | |
| .then(([j, rev]) => { if (j && !override && !drawnFromIndex && rev.sha && j.index === rev.sha) drawHero(j); }) | |
| .catch(() => {}); | |