{% extends "base.html" %}
{% block title %}Explore {{ study.name }} | Silisocs Studio{% endblock %}
{% block crumb %}<a href="/studies">Studies</a><span>/</span><a href="/studies/{{ study.id }}">{{ study.name }}</a><span>/</span>Explore{% endblock %}
{% block content %}
<div class="explore-page" data-study-explore>
  <header class="explore-heading"><div><p class="eyebrow">Unified exploration</p><h1>{{ study.name }}</h1><p>{{ study.question }}</p></div><div class="explore-status"><span class="badge neutral">study</span><span>{{ capabilities.artifact.hypotheses }} hypotheses</span><span>{{ capabilities.artifact.runs }} planned runs</span></div></header>
  <section class="explore-scope" aria-label="Study comparison scope">
    <div class="scope-identity"><span class="object-glyph study"><svg><use href="#icon-studies"/></svg></span><span><small>Scope</small><b>Study</b></span></div>
    <label><span>Compare</span><select data-study-query="compare"><option value="condition">Conditions</option><option value="seed" {{ 'selected' if state.comparison.dimension == 'seed' }}>Seeds (replicates)</option></select></label>
    <label><span>Baseline</span><input type="search" data-study-query="baseline" value="{{ state.comparison.baseline or '' }}" placeholder="Condition name"></label>
  </section>
  <nav class="explore-lenses" aria-label="Study exploration lenses">{% for scene in capabilities.scenes %}<button class="{{ 'active' if loop.first }}" type="button" data-scene="{{ scene.id }}" aria-pressed="{{ 'true' if loop.first else 'false' }}"><span>{{ '%02d'|format(loop.index) }}</span>{{ scene.title }}</button>{% endfor %}</nav>
  <div class="explore-layout">
    <main class="explore-scene"><header><div><p class="eyebrow" data-study-scene-kicker>Aligned evidence</p><h2 data-study-scene-title>Condition comparison</h2></div><span class="explore-count" data-study-count></span></header><div class="explore-stage loading" data-study-scene aria-live="polite" aria-busy="true"></div></main>
    <aside class="explore-inspector"><header><p class="eyebrow">Inspector</p><h2>Comparison</h2></header><div data-study-inspector><div class="empty compact"><b>Shared selection</b><p>Chart and table selections will remain aligned across conditions and seeds.</p></div></div></aside>
    <aside class="explore-evidence"><header><p class="eyebrow">Evidence</p><h2>Study context</h2></header><div class="evidence-list">{% for status, count in capabilities.evidence.progress.items() %}<div class="evidence-item"><span class="signal-mark {{ 'alt' if status == 'complete' }}"></span><span><b>{{ status }}</b><small>{{ count }} runs</small></span></div>{% endfor %}<div class="evidence-item"><span class="signal-mark alt"></span><span><b>{{ capabilities.panels|selectattr('available')|list|length }} compatible analyses</b><small>Study-scope contracts</small></span></div></div><details><summary>Artifact fingerprint</summary><code>{{ capabilities.artifact.fingerprint }}</code></details></aside>
  </div>
</div>
<script>
const exploreStudy={{ study.id|tojson }},studyScenes={{ capabilities.scenes|tojson }},studyScene=document.querySelector('[data-study-scene]'),studyCount=document.querySelector('[data-study-count]');
let activeStudyScene=null,studyAbort=null;
function studyUrlState(){const url=new URL(location);document.querySelectorAll('[data-study-query]').forEach(input=>{url.searchParams.delete(input.dataset.studyQuery);if(input.value)url.searchParams.set(input.dataset.studyQuery,input.value)});if(activeStudyScene){url.searchParams.set('scene',activeStudyScene.id);url.searchParams.set('lens',activeStudyScene.lens)}history.replaceState(null,'',url)}
function studyQuery(){const params=new URLSearchParams();document.querySelectorAll('[data-study-query]').forEach(input=>{if(input.value)params.set(input.dataset.studyQuery,input.value)});return params.toString()}
function studyFetchSignal(){studyAbort?.abort();studyAbort=new AbortController();return studyAbort.signal}
function studySceneBusy(on){studyScene.classList.toggle('loading',on);if(on)studyScene.setAttribute('aria-busy','true');else studyScene.removeAttribute('aria-busy')}
async function renderStudyExplore(){studySceneBusy(true);try{const query=studyQuery(),response=await fetch(`/api/studies/${encodeURIComponent(exploreStudy)}/compare${query?`?${query}`:''}`,{signal:studyFetchSignal()});if(!response.ok)throw new Error(await response.text());const view=await response.json(),grid=document.createElement('div');grid.className='study-scene-panels';for(const panel of view.panels||[]){const section=document.createElement('section'),header=document.createElement('header'),title=document.createElement('h3'),body=document.createElement('div');section.className='panel';title.textContent=panel.title;body.className='panel-body';header.append(title);section.append(header,body);grid.append(section);await renderPanel(body,panel.output)}studyScene.replaceChildren(grid);studyCount.textContent=`${(view.panels||[]).length} analyses`;if(!(view.panels||[]).length)studyScene.innerHTML='<div class="empty"><b>No comparison output yet</b><p>Run or attach study conditions to populate this scene.</p></div>'}catch(error){if(error.name==='AbortError')return;studyScene.innerHTML='<div class="empty"><b>Comparison unavailable</b><p></p></div>';studyScene.querySelector('p').textContent=error.message;notify(error.message,'danger')}finally{studySceneBusy(false)}}
async function renderStudyExtension(scene){studySceneBusy(true);try{if(!scene.renderer.startsWith('/'))throw new Error(`Scene "${scene.title}" is registered, but its renderer "${scene.renderer}" has no Studio implementation.`);const query=studyQuery(),response=await fetch(`${scene.renderer}${query?`?${query}`:''}`,{signal:studyFetchSignal()});if(!response.ok)throw new Error(await response.text());const data=await response.json();if(data.output){const host=document.createElement('div');host.className='study-scene-panels';const body=document.createElement('div');body.className='panel-body';host.append(body);studyScene.replaceChildren(host);await renderPanel(body,data.output)}else{const pre=document.createElement('pre');pre.textContent=JSON.stringify(data,null,2);studyScene.replaceChildren(pre)}studyCount.textContent=''}catch(error){if(error.name==='AbortError')return;studyScene.innerHTML='<div class="empty"><b>Lens unavailable</b><p></p></div>';studyScene.querySelector('p').textContent=error.message;notify(error.message,'danger')}finally{studySceneBusy(false)}}
async function renderStudyScene(id){const lens=new URL(location).searchParams.get('lens');const scene=studyScenes.find(s=>s.id===id)||studyScenes.find(s=>!id&&s.lens===lens)||studyScenes[0];if(!scene)return renderStudyExplore();activeStudyScene=scene;document.querySelectorAll('[data-scene]').forEach(button=>{const on=button.dataset.scene===scene.id;button.classList.toggle('active',on);button.setAttribute('aria-pressed',String(on))});const title=document.querySelector('[data-study-scene-title]'),kicker=document.querySelector('[data-study-scene-kicker]');if(title)title.textContent=scene.title;if(kicker)kicker.textContent=`${scene.lens} lens`;studyUrlState();return scene.renderer==='comparison'?renderStudyExplore():renderStudyExtension(scene)}
const studyLensButtons=[...document.querySelectorAll('[data-scene]')];
studyLensButtons.forEach((button,index)=>{button.addEventListener('click',()=>renderStudyScene(button.dataset.scene));button.addEventListener('keydown',event=>{if(event.key!=='ArrowRight'&&event.key!=='ArrowLeft')return;event.preventDefault();const next=studyLensButtons[(index+(event.key==='ArrowRight'?1:studyLensButtons.length-1))%studyLensButtons.length];next.focus();renderStudyScene(next.dataset.scene)})});
document.querySelectorAll('[data-study-query]').forEach(input=>input.addEventListener('change',()=>{studyUrlState();renderStudyScene(activeStudyScene&&activeStudyScene.id)}));
renderStudyScene(new URL(location).searchParams.get('scene'));
studyScenes.forEach(scene=>registerPaletteCommand({label:`Explore study: ${scene.title}`,href:`?lens=${encodeURIComponent(scene.lens)}&scene=${encodeURIComponent(scene.id)}`,keywords:'study conditions seeds compare'}));
</script>
{% endblock %}