results-ui.js

// results-ui.js

(function(){
  const resultsShell = document.getElementById('results');
  const listView     = document.getElementById('list-view');
  const detailView   = document.getElementById('detail-view');
  const backBtn      = document.getElementById('back-to-list');
  const detailTitle  = document.getElementById('detail-title');

  const casesTableBody = document.querySelector('#cases-table tbody');
  const casesEmpty     = document.getElementById('cases-empty');
  const searchInput    = document.getElementById('case-search');

  const filterModal    = document.getElementById('filter-modal');
  const openFiltersBtn = document.getElementById('open-filters');
  const filterInclusionSel = document.getElementById('filter-inclusion');
  const filterFileSel      = document.getElementById('filter-file');
  const filterDiffSel      = document.getElementById('filter-diff');
  const filterTagsHost     = document.getElementById('filter-tags-host');
  const filterApplyBtn     = document.getElementById('filter-apply');
  const filterTagsAllBtn   = document.getElementById('filter-tags-all');
  const filterTagsNoneBtn  = document.getElementById('filter-tags-none');

  //detail filtering controls
  const detailSearchInput = document.getElementById('detail-search');
  const detailFieldSel    = document.getElementById('detail-field');
  const detailClearBtn    = document.getElementById('detail-clear');
  const detailCountEl     = document.getElementById('detail-count');
  const detailSpinner     = document.getElementById('detail-spinner');

  // sid -> { sid, inclusion, file, diff, diffCount, roots, tags, pending }
  const runs = new Map();

  //current filters
  const filterState = {
    inclusion: '__all__',
    file: '__all__',
    diff: '__all__',
    tags: new Set(), //empty=all tags
    search: '',
  };

  //detail view state
  let detailActiveSid = null;
  let tableObserver = null;

  function enterListMode() {
    resultsShell.classList.remove('detail-mode');
    resultsShell.classList.add('list-mode');
    //observer when leaving detail
    teardownDetailObserver();
    detailActiveSid = null;
    hideDetailSpinner();
  }
  function enterDetailMode() {
    resultsShell.classList.remove('list-mode');
    resultsShell.classList.add('detail-mode');
  }

  backBtn?.addEventListener('click', enterListMode);

  //open/close filter drawer
  function openFilters() {
    filterModal.setAttribute('aria-hidden', 'false');
    filterModal.classList.add('open');
  }
  function closeFilters() {
    filterModal.setAttribute('aria-hidden', 'true');
    filterModal.classList.remove('open');
  }
  filterModal.addEventListener('click', (ev) => {
    if (ev.target.dataset.close === '1') {
      closeFilters();
    }
  });
  openFiltersBtn?.addEventListener('click', openFilters);

  //render tag badges in a cell
  function renderTagBadges(tags) {
    if (!tags || !tags.length) return '';
    return tags.map(t => `<span class="tag-badge">${t}</span>`).join(' ');
  }

  //helpers to detect pending/completed status from the tab chip
  function isRunPending(sid) {
    const small = document.querySelector(`#tab-${sid} .small`);
    if (!small) return false;
    const t = (small.textContent || '').toLowerCase();
    return t.includes('waiting') || t.includes('computing');
  }

  function getTabBasePartsBySid(sid) {
    const tab = document.getElementById('tab-' + sid);
    if (!tab) return { inclusion:'', file:'', diff:'' };
    let label = '';
    tab.childNodes.forEach(n => {
      if (n.nodeType === Node.TEXT_NODE) label += n.textContent;
      else if (n.nodeType === 1 && !n.classList.contains('small')) label += n.textContent;
    });
    label = label.trim();
    const parts = label.split('|').map(s => s.trim());
    return {
      inclusion: parts[0] || '',
      file: parts[1] || '',
      diff: parts[2] || ''
    };
  }

  //observe tab creation so a pending run can be immediately created
  (function observeTabsForPendingRuns(){
    const tabsHost = document.getElementById('tabs');
    if (!tabsHost) return;
    const mo = new MutationObserver(muts => {
      for (const m of muts) {
        m.addedNodes && m.addedNodes.forEach(n => {
          if (n.nodeType === 1 && n.matches && n.matches('button.tab') && n.id && n.id.startsWith('tab-')) {
            const sid = n.id.slice(4);
            const parts = getTabBasePartsBySid(sid);
            if (!runs.has(sid)) {
              runs.set(sid, {
                sid,
                inclusion: parts.inclusion,
                file: parts.file,
                diff: parts.diff,
                diffCount: null, // unknown yet -> loader
                roots: 0,
                tags: ['pending'],
                pending: true
              });
              renderRunsTable();
            }
          }
        });
      }
    });
    mo.observe(tabsHost, { childList: true, subtree: true, characterData: true });
  })();

  //rebuild the filter options based on current runs
  function rebuildFilterOptions() {
    const inclusionSet = new Set();
    const fileSet = new Set();
    const diffSet = new Set();
    const tagSet = new Set();

    for (const r of runs.values()) {
      if (r.inclusion) inclusionSet.add(r.inclusion);
      if (r.file)      fileSet.add(r.file);
      if (r.diff)      diffSet.add(r.diff);
      (r.tags || []).forEach(t => tagSet.add(t));
    }

    //inclusion
    const incSelVal = filterState.inclusion;
    filterInclusionSel.innerHTML = '<option value="__all__">All</option>' +
      Array.from(inclusionSet).sort().map(v => `<option value="${v}">${v}</option>`).join('');
    if (Array.from(inclusionSet).includes(incSelVal)) {
      filterInclusionSel.value = incSelVal;
    }

    //file
    const fileSelVal = filterState.file;
    filterFileSel.innerHTML = '<option value="__all__">All</option>' +
      Array.from(fileSet).sort().map(v => `<option value="${v}">${v}</option>`).join('');
    if (Array.from(fileSet).includes(fileSelVal)) {
      filterFileSel.value = fileSelVal;
    }


    //diff
    const diffSelVal = filterState.diff;
    filterDiffSel.innerHTML = '<option value="__all__">All</option>' +
      Array.from(diffSet).sort().map(v => `<option value="${v}">${v}</option>`).join('');
    if (Array.from(diffSet).includes(diffSelVal)) {
      filterDiffSel.value = diffSelVal;
    }

    //tags
    const currentSelected = new Set(filterState.tags);
    filterTagsHost.innerHTML = '';
    const allTags = Array.from(tagSet).sort();
    for (const t of allTags) {
      const id = 'ftag-' + t.replace(/[^a-z0-9_-]/gi,'_');
      const wrap = document.createElement('label');
      wrap.className = 'filter-tag-pill';
      const cb = document.createElement('input');
      cb.type = 'checkbox';
      cb.id = id;
      cb.value = t;
      cb.checked = (currentSelected.size === 0) ? true : currentSelected.has(t);
      const sp = document.createElement('span');
      sp.textContent = t;
      wrap.appendChild(cb);
      wrap.appendChild(sp);
      filterTagsHost.appendChild(wrap);
    }
  }

  function applyFiltersFromUI() {
    filterState.inclusion = filterInclusionSel.value || '__all__';
    filterState.file      = filterFileSel.value || '__all__';
    filterState.diff      = filterDiffSel.value || '__all__';

    const chosen = new Set();
    const inputs = filterTagsHost.querySelectorAll('input[type="checkbox"]');
    let allChecked = true;
    inputs.forEach(cb => {
      if (cb.checked) {
        chosen.add(cb.value);
      } else {
        allChecked = false;
      }
    });
    filterState.tags = allChecked ? new Set() : chosen;

    closeFilters();
    renderRunsTable();
  }
  filterApplyBtn?.addEventListener('click', applyFiltersFromUI);

  filterTagsAllBtn?.addEventListener('click', () => {
    filterTagsHost.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = true);
  });
  filterTagsNoneBtn?.addEventListener('click', () => {
    filterTagsHost.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
  });

  //search
  searchInput?.addEventListener('input', (ev) => {
    filterState.search = ev.target.value.trim().toLowerCase();
    renderRunsTable();
  });

  //a run matches if it passes inclusion/file/diff, and has any of the selected tags (if any)
  function runMatchesFilters(run) {
    if (filterState.inclusion !== '__all__' && run.inclusion !== filterState.inclusion) return false;
    if (filterState.file !== '__all__' && run.file !== filterState.file) return false;
    if (filterState.diff !== '__all__' && run.diff !== filterState.diff) return false;

    if (filterState.tags.size > 0) {
      const hasAny = run.tags && run.tags.some(t => filterState.tags.has(t));
      if (!hasAny) return false;
    }

    if (filterState.search) {
      const hay = (run.inclusion + ' ' + run.file + ' ' + run.diff + ' ' + (run.sid || '')).toLowerCase();
      if (!hay.includes(filterState.search)) return false;
    }
    return true;
  }

  function renderRunsTable() {
    const rows = Array.from(runs.values()).filter(runMatchesFilters);

    casesTableBody.innerHTML = rows.map(r => {
      const pending = (r.diffCount == null) || r.pending || isRunPending(r.sid);
      const diffsCell = pending
        ? `<span class="diff-loading" aria-label="Calculating…"><b class="d1"></b><b class="d2"></b><b class="d3"></b></span>`
        : `${r.diffCount ?? 0}`;
      return `
      <tr data-sid="${r.sid}">
        <td>${r.inclusion || ''}</td>
        <td>${r.file || ''}</td>
        <td>${r.diff || ''}</td>
        <td>${diffsCell}</td>
        <td>${renderTagBadges(r.tags || [])}</td>
      </tr>`;
    }).join('');

    casesEmpty.style.display = rows.length === 0 ? 'block' : 'none';

    //click row and open detail and show that run
    casesTableBody.querySelectorAll('tr[data-sid]').forEach(tr => {
      tr.addEventListener('click', () => {
        const sid = tr.dataset.sid;
        const r = runs.get(sid);
        if (r) {
          //set title
          detailTitle.textContent = `${r.inclusion || ''} | ${r.file || ''} | ${r.diff || ''}`;
        } else {
          detailTitle.textContent = sid;
        }
        //activate the corresponding tab if present (if app.js created it)
        const tab = document.getElementById('tab-' + sid);
        if (tab) tab.click();

        //set current detail run, wire up filtering
        setupDetailForSid(sid);

        //switch mode
        enterDetailMode();
      });
    });
  }

  // listen for app.js custom event and update runs registry
  window.addEventListener('show-config-tags', (ev) => {
    const detail = ev.detail || {};
    const sid    = detail.sid;
    const tags   = Array.isArray(detail.tags) ? detail.tags : [];
    if (!sid) return;

    // Extract label parts from tab text (if exists)
    const parts = getTabBasePartsBySid(sid);
    let inclusion = parts.inclusion;
    let file = parts.file;
    let diff = parts.diff;

    //ensure record exists
    const existing = runs.get(sid) || {};
    const finalTags = (tags && tags.length) ? tags : (existing.tags || []);
    const cleanedTags = finalTags.filter(t => t !== 'pending');

    runs.set(sid, {
      sid,
      inclusion: inclusion || existing.inclusion || '',
      file:      file      || existing.file      || '',
      diff:      diff      || existing.diff      || '',
      diffCount: existing.diffCount ?? null,
      roots:     existing.roots ?? 0,
      tags:      cleanedTags.length ? cleanedTags : (existing.tags || []),
      pending:   true
    });

    //rAF loop right after tags to snap the count as soon as the DOM finishes updating
    snapCountSoon(sid);

    rebuildFilterOptions();
    renderRunsTable();
  });

  //live-sync diff counts directly from #panels as soon as stats changes
  const panelsRoot = document.getElementById('panels');
  if (panelsRoot) {
    const moPanels = new MutationObserver(() => {
      syncCountsFromDOM();
    });
    moPanels.observe(panelsRoot, { childList: true, subtree: true, characterData: true });
  }

  function syncCountsFromDOM() {
    let changed = false;

    //prefer stats text if present
    const statEls = document.querySelectorAll('[id^="stats-"]');
    statEls.forEach(el => {
      const id = el.id || '';
      if (!id.startsWith('stats-')) return;
      const sid = id.slice(6);
      const text = el.textContent || '';
      const m = text.match(/Paths with diffs:\s*(\d+)/i);
      const m2 = text.match(/Roots of change:\s*(\d+)/i);
      const count = m ? parseInt(m[1], 10) : null;
      const roots = m2 ? parseInt(m2[1], 10) : null;

      if (sid && Number.isFinite(count)) {
        const rec = runs.get(sid) || { sid };
        const prevCount = rec.diffCount;
        if (prevCount !== count || rec.pending) {
          rec.diffCount = count;
          if (Number.isFinite(roots)) rec.roots = roots;
          rec.pending = false; //have a count -> clear loader
          //refresh labels to strip any status chips
          const parts = getTabBasePartsBySid(sid);
          rec.inclusion = parts.inclusion || rec.inclusion || '';
          rec.file      = parts.file      || rec.file      || '';
          rec.diff      = parts.diff      || rec.diff      || '';
          runs.set(sid, rec);
          changed = true;
        }
      }
    });

    //if no stats yet, derive count from table rows
    const panels = document.querySelectorAll('[id^="panel-"]');
    panels.forEach(p => {
      const sid = p.id.replace(/^panel-/, '');
      const tableWrap = document.querySelector(`#panel-${sid} #table-${sid}`);
      if (!tableWrap) return;
      const tableEl = tableWrap.querySelector('table');
      if (!tableEl) return;
      const rows = tableEl.querySelectorAll('tbody tr');
      const count = rows ? rows.length : null;
      if (sid && Number.isFinite(count)) {
        const rec = runs.get(sid) || { sid };
        if (rec.diffCount !== count || rec.pending) {
          rec.diffCount = count;
          rec.pending = false;
          const parts = getTabBasePartsBySid(sid);
          rec.inclusion = parts.inclusion || rec.inclusion || '';
          rec.file      = parts.file      || rec.file      || '';
          rec.diff      = parts.diff      || rec.diff      || '';
          runs.set(sid, rec);
          changed = true;
        }
      }
    });

    if (changed) renderRunsTable();
  }

  //rAF-based micro-wait after tags or 'done' chip flips to ensure DOM is painted then snap count
  function snapCountSoon(sid) {
    let frames = 0;
    function tick() {
      frames++;
      const before = (runs.get(sid) || {}).diffCount;
      syncCountsFromDOM();
      const after = (runs.get(sid) || {}).diffCount;
      if (Number.isFinite(after) || frames > 40) return;
      requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }

  (function observeTabDoneFlip(){
    const tabsHost = document.getElementById('tabs');
    if (!tabsHost) return;
    const mo = new MutationObserver(muts => {
      for (const m of muts) {
        if (m.type === 'characterData' || m.type === 'childList') {
          const node = m.target && m.target.nodeType === 3 ? m.target.parentNode : m.target;
          const btn = node && node.closest ? node.closest('button.tab') : null;
          if (btn && btn.id && btn.id.startsWith('tab-')) {
            const sid = btn.id.slice(4);
            const small = btn.querySelector('.small');
            const txt = (small && small.textContent || '').toLowerCase();
            if (txt.includes('done')) {
              snapCountSoon(sid);
            }
          }
        }
      }
    });
    mo.observe(tabsHost, { childList: true, subtree: true, characterData: true });
  })();

  //Detail view filtering

  function setupDetailForSid(sid) {
    //clean observer for previous run
    teardownDetailObserver();
    detailActiveSid = sid;

    //show if table not populated yet
    if (!detailHasTableRows(sid)) {
      showDetailSpinner();
    } else {
      hideDetailSpinner();
    }

    //set up observer to toggle spinner off when table arrives/updates
    const host = document.getElementById('table-' + sid) || document.getElementById('panels');
    if (host) {
      tableObserver = new MutationObserver(() => {
        //when app.js writes the table or updates rows, adjust spinner and re-apply filter
        if (detailHasTableRows(sid)) {
          hideDetailSpinner();
          applyDetailFilter();
        }
      });
      tableObserver.observe(host, { childList: true, subtree: true });
    }

    //hook up inputs
    detailSearchInput.value = '';
    detailFieldSel.value = 'all';
    updateDetailCount(0, 0);

    detailSearchInput.addEventListener('input', applyDetailFilter);
    detailFieldSel.addEventListener('change', applyDetailFilter);
    detailClearBtn.addEventListener('click', () => {
      detailSearchInput.value = '';
      detailFieldSel.value = 'all';
      applyDetailFilter();
      detailSearchInput.focus();
    });

    //apply once if table already present
    applyDetailFilter();
  }

  function teardownDetailObserver() {
    if (tableObserver) {
      try { tableObserver.disconnect(); } catch {}
      tableObserver = null;
    }
  }

  function showDetailSpinner() {
    if (detailSpinner) {
      detailSpinner.setAttribute('aria-hidden', 'false');
      detailSpinner.style.display = 'flex';
    }
  }
  function hideDetailSpinner() {
    if (detailSpinner) {
      detailSpinner.setAttribute('aria-hidden', 'true');
      detailSpinner.style.display = 'none';
    }
  }

  function detailHasTableRows(sid) {
    const tableWrap = document.querySelector(`#panel-${sid} #table-${sid}`);
    if (!tableWrap) return false;
    const tableEl = tableWrap.querySelector('table');
    if (!tableEl) return false;
    const rows = tableEl.querySelectorAll('tbody tr');
    return rows && rows.length > 0;
  }

  function getDetailRows(sid) {
    const tableWrap = document.querySelector(`#panel-${sid} #table-${sid}`);
    if (!tableWrap) return [];
    const tableEl = tableWrap.querySelector('table');
    if (!tableEl) return [];
    return Array.from(tableEl.querySelectorAll('tbody tr'));
  }

  function applyDetailFilter() {
    const sid = detailActiveSid;
    if (!sid) return;
    const q = (detailSearchInput.value || '').toLowerCase();
    const field = detailFieldSel.value; // 'all' | 'path' | 's0' | 's1'

    const rows = getDetailRows(sid);
    const total = rows.length;
    let shown = 0;

    //nothing to filter, show all
    if (!q) {
      rows.forEach(tr => tr.style.display = '');
      shown = total;
      updateDetailCount(shown, total);
      return;
    }

    rows.forEach(tr => {
      const tds = tr.querySelectorAll('td');
      const path = (tds[0]?.textContent || '').toLowerCase();
      const s0   = (tds[1]?.textContent || '').toLowerCase();
      const s1   = (tds[2]?.textContent || '').toLowerCase();

      let hay = '';
      if (field === 'path') hay = path;
      else if (field === 's0') hay = s0;
      else if (field === 's1') hay = s1;
      else hay = path + ' ' + s0 + ' ' + s1;

      const hit = hay.includes(q);
      tr.style.display = hit ? '' : 'none';
      if (hit) shown++;
    });

    updateDetailCount(shown, total);
  }

  function updateDetailCount(shown, total) {
    if (!detailCountEl) return;
    if (!total) {
      detailCountEl.textContent = '';
      return;
    }
    detailCountEl.textContent = `Showing ${shown} of ${total}`;
  }

  //initial state: list mode with empty table
  enterListMode();
  renderRunsTable();
})();