script.js

    const search = document.querySelector('#search');
    const ageFilter = document.querySelector('#ageFilter');
    const sortFilter = document.querySelector('#sortFilter');
    const scopeFilter = document.querySelector('#scopeFilter');
    const classFilter = document.querySelector('#classFilter');
    const filtersPanel = document.querySelector('#filters-panel');
    const filterToggle = document.querySelector('.filters-toggle');
    const rows = Array.from(document.querySelectorAll('#leaderboard tbody tr'));
    const tbody = document.querySelector('#leaderboard tbody');
    const generatedAt = new Date("2026-06-20T15:37:33Z");
    const rowLimit = Number(250) || rows.length;
    const dayMs = 24 * 60 * 60 * 1000;
    function setFiltersOpen(open) {
      if (!filterToggle || !filtersPanel) return;
      filterToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
      filtersPanel.classList.toggle('is-open', open);
    }
    function matchesAge(row, maxDays) {
      if (!maxDays) return true;
      const createdAt = new Date(row.dataset.created || '');
      if (Number.isNaN(createdAt.getTime()) || Number.isNaN(generatedAt.getTime())) return false;
      return ((generatedAt - createdAt) / dayMs) <= Number(maxDays);
    }
    function selectedScope() {
      return scopeFilter.value === 'representative' ? 'representative' : 'group';
    }
    function scopedDatasetKey(metric) {
      const scope = selectedScope();
      return metric === 'likes_per_month' ? `${scope}LikesPerMonth` : `${scope}DownloadsPerMonth`;
    }
    function updateMetricCell(row, metric) {
      const scope = selectedScope();
      const cell = row.querySelector(`[data-metric="${metric}"]`);
      if (!cell) return;
      const value = cell.querySelector('.metric-value');
      const prefix = metric === 'likes_per_month' ? `${scope}Likes` : `${scope}Downloads`;
      const rate = 'PerMonth';
      const tooltip = row.dataset[`${prefix}Tooltip`];
      if (value) value.textContent = row.dataset[`${prefix}${rate}Label`] || value.textContent;
      if (tooltip) {
        cell.dataset.tooltip = tooltip;
        cell.setAttribute('aria-label', tooltip.replace(/\n/g, ', '));
      }
    }
    function updateScopedMetrics() {
      rows.forEach(row => {
        updateMetricCell(row, 'downloads_per_month');
        updateMetricCell(row, 'likes_per_month');
      });
    }
    function sortRows() {
      const key = scopedDatasetKey(sortFilter.value);
      rows.sort((a, b) => {
        const bv = Number(b.dataset[key]) || 0;
        const av = Number(a.dataset[key]) || 0;
        if (bv !== av) return bv - av;
        return a.innerText.localeCompare(b.innerText);
      });
      rows.forEach(row => tbody.appendChild(row));
    }
    function applyFilters() {
      updateScopedMetrics();
      sortRows();
      const q = search.value.trim().toLowerCase();
      const maxDays = ageFilter.value;
      const cls = classFilter.value;
      let visible = 0;
      let visibleRank = 1;
      for (const row of rows) {
        const matchesText = !q || row.innerText.toLowerCase().includes(q);
        const matchesDate = matchesAge(row, maxDays);
        const matchesClass = !cls || row.dataset.class === cls;
        const matches = matchesText && matchesDate && matchesClass;
        const show = matches && visible < rowLimit;
        row.style.display = show ? '' : 'none';
        if (show) {
          row.children[0].textContent = String(visibleRank);
          visibleRank += 1;
          visible += 1;
        }
      }
    }
    search.addEventListener('input', applyFilters);
    ageFilter.addEventListener('change', applyFilters);
    sortFilter.addEventListener('change', applyFilters);
    scopeFilter.addEventListener('change', applyFilters);
    classFilter.addEventListener('change', applyFilters);
    tbody.addEventListener('click', event => {
      const target = event.target;
      if (!(target instanceof Element)) return;
      const button = target.closest('.artifact-toggle');
      if (!button) return;
      const list = button.closest('.artifact-list');
      const extra = list?.querySelector('.artifact-extra');
      if (!list || !extra) return;
      const expanded = button.getAttribute('aria-expanded') === 'true';
      button.setAttribute('aria-expanded', expanded ? 'false' : 'true');
      list.classList.toggle('is-expanded', !expanded);
      extra.hidden = expanded;
      button.textContent = expanded ? `+ ${button.dataset.moreLabel || 'more variants'}` : 'Show fewer variants';
    });
    filterToggle?.addEventListener('click', () => {
      setFiltersOpen(filterToggle.getAttribute('aria-expanded') !== 'true');
    });
    document.addEventListener('click', event => {
      if (!filterToggle || !filtersPanel || filterToggle.getAttribute('aria-expanded') !== 'true') return;
      const target = event.target;
      if (target instanceof Node && (filterToggle.contains(target) || filtersPanel.contains(target))) return;
      setFiltersOpen(false);
    });
    document.addEventListener('keydown', event => {
      if (event.key === 'Escape') setFiltersOpen(false);
    });
    applyFilters();