ui: show MP and novel tracks separately

index.html

@@ -206,6 +206,7 @@
   <div class="card">
     <h2><span id="t_board_h"></span><span class="cnt" id="counts"></span></h2>
     <div id="divbar"></div>
+    <div id="trackbar"></div>
     <div class="scroll">
       <table>
         <thead><tr id="head"></tr></thead>
@@ -285,6 +286,8 @@ const T = {
   mcounts:(m,n)=>`모델 ${m} · 제출 ${n}`,
   mlegend:`<span><i></i>최고 점수</span><span><u></u>평균</span><span>제출 수</span>`,
   tabs:{board:"대회 · 순위표", guide:"참가 가이드", models:"모델별 성과"},
+  tracks:{all:"전체", mp:"MP 수록 (MP 값으로 채점)", novel:"신규 조성 (직접 계산)"},
+  tracknote:"MP 에 값이 있으면 그 값을, 없으면 저희가 직접 계산합니다. 두 자의 눈금이 달라 (같은 조성 40건 실측, 직접 계산 쪽이 88%에서 평균 1.0점 낮음) 순위를 따로 매깁니다.",
   divs:{all:"전체", fluoride:"불화물", halide:"염화·브롬화·요오드화", sulfide:"황화물",
         oxide:"산화물", nitride:"질화물", hydride:"수소화물", other:"기타"},
   divnote:"음이온 골격에 따라 부문을 나눴습니다. <b>점수는 부문과 무관하게 동일한 기준</b>으로 매겨지며, 부문은 같은 화학 계열 안에서 비교하시라고 둔 것입니다.",
@@ -367,6 +370,8 @@ const T = {
   mcounts:(m,n)=>`${m} models · ${n} entries`,
   mlegend:`<span><i></i>Best score</span><span><u></u>Mean</span><span>Entries</span>`,
   tabs:{board:"Challenge · Board", guide:"How to take part", models:"By model"},
+  tracks:{all:"All", mp:"In MP (scored on MP values)", novel:"Novel (computed here)"},
+  tracknote:"Where Materials Project has a value we use it; where it does not, we compute one. The two rulers disagree (40 identical compositions measured; the computed path scores 1.0 point lower on 88% of them), so the two are ranked separately.",
   divs:{all:"All", fluoride:"Fluoride", halide:"Chloride / bromide / iodide", sulfide:"Sulfide",
         oxide:"Oxide", nitride:"Nitride", hydride:"Hydride", other:"Other"},
   divnote:"Divisions follow the anion framework. <b>Scores are identical across divisions</b> - the split is there so you can compare within a chemical family.",
@@ -521,7 +526,7 @@ const COLS = ["rank","cand","user","who","date","oxidation","li_stability","nove
 // 표가 커지면 한꺼번에 그리지 않고 한 페이지씩 그린다.
 const PAGE_SIZE = 500;
 let LANG = "ko", DATA = null, SEASONS = [], SEASON = 1;
-let sortKey = "total", sortDir = -1, page = 0, DIV = "all";
+let sortKey = "total", sortDir = -1, page = 0, DIV = "all", TRK = "all";
 const t = () => T[LANG];
 
 let ME = null;
@@ -713,6 +718,21 @@ function renderDivBar(){
   });
 }
 
+function renderTrackBar(){
+  const d = t(), host = $("#trackbar");
+  if(!host) return;
+  const tally = {all:0, mp:0, novel:0};
+  (DATA.entries||[]).forEach(e=>{ if(e.is_anchor) return; tally.all++;
+    if(e.track==="mp") tally.mp++; else if(e.track==="novel") tally.novel++; });
+  if(!tally.mp && !tally.novel){ host.innerHTML=""; return; }
+  const btn=(k,n)=>`<button data-k="${k}" class="${k===TRK?"on":""}">${esc(d.tracks[k]||k)}<span class="dn">${n}</span></button>`;
+  host.innerHTML = btn("all",tally.all)+btn("mp",tally.mp)+btn("novel",tally.novel)
+    + `<div class="sub" style="margin-top:6px">${esc(d.tracknote||"")}</div>`;
+  host.querySelectorAll("button[data-k]").forEach(b=>b.onclick=()=>{
+    TRK=b.dataset.k; page=0; render();
+  });
+}
+
 function renderPager(total,pages){
   const host = $("#pager"), d = t();
   if(pages<=1){ host.innerHTML=""; return; }
@@ -757,9 +777,12 @@ function render(){
   });
 
   renderDivBar();
+  renderTrackBar();
   // 부문을 고르면 그 부문 + 기준물질만 남긴다. 기준물질은 척도라 항상 보여야 한다.
-  const pool = DIV==="all" ? DATA.entries
+  let pool = DIV==="all" ? DATA.entries
     : DATA.entries.filter(e=>e.is_anchor || e.division===DIV);
+  // 기준물질은 척도라 어느 트랙을 골라도 남긴다.
+  if(TRK!=="all") pool = pool.filter(e=>e.is_anchor || e.track===TRK);
   const all = pool.slice().sort((a,b)=>{
     const x=sortVal(a,sortKey), y=sortVal(b,sortKey);
     if(x<y) return -sortDir; if(x>y) return sortDir; return 0;
@@ -789,7 +812,7 @@ function render(){
                 + (unscored ? ` <span class="pill warn">${esc(hk || d.hold)}</span>` : "");
     const has = (e.detail && Object.keys(e.detail).length) || (unscored && e.gate);
     return `<tr class="${cls}${has?" pick":""}"${has?` data-i="${e.candidate_id}"`:""}>
-      <td class="num">${(DIV==="all" ? e.rank : e.div_rank) ?? "—"}</td>
+      <td class="num">${(TRK!=="all" ? e.track_rank : (DIV==="all" ? e.rank : e.div_rank)) ?? "—"}</td>
       <td>${esc(e.formula||e.candidate_id||"")}${e.masked?' <span class="pill">🔒</span>':""}</td>
       <td>${who}</td><td>${esc(e.model_name||"")}</td><td>${dt}</td>
       ${num("oxidation")}${num("li_stability")}${num("novelty")}