wuyang
681 lines
22 KiB
JavaScript
681 lines
22 KiB
JavaScript
const state = {
|
|
atlas: null,
|
|
health: null,
|
|
view: "atlas",
|
|
activeTopic: "",
|
|
topicFocus: null,
|
|
selectedPaper: null,
|
|
selectedMarkdown: "",
|
|
searchItems: [],
|
|
searchTotal: 0,
|
|
aiBusy: false,
|
|
};
|
|
|
|
const $ = (selector) => document.querySelector(selector);
|
|
|
|
const elements = {
|
|
healthLine: $("#healthLine"),
|
|
searchInput: $("#searchInput"),
|
|
searchBtn: $("#searchBtn"),
|
|
mapTitle: $("#mapTitle"),
|
|
atlasSvg: $("#atlasSvg"),
|
|
routeList: $("#routeList"),
|
|
timeline: $("#timeline"),
|
|
explainAtlasBtn: $("#explainAtlasBtn"),
|
|
readingPathBtn: $("#readingPathBtn"),
|
|
lensEyebrow: $("#lensEyebrow"),
|
|
lensTitle: $("#lensTitle"),
|
|
lensBody: $("#lensBody"),
|
|
closePaperBtn: $("#closePaperBtn"),
|
|
};
|
|
|
|
function escapeHtml(value) {
|
|
return String(value ?? "")
|
|
.replaceAll("&", "&")
|
|
.replaceAll("<", "<")
|
|
.replaceAll(">", ">")
|
|
.replaceAll('"', """)
|
|
.replaceAll("'", "'");
|
|
}
|
|
|
|
function debounce(fn, delay = 260) {
|
|
let timer = null;
|
|
return (...args) => {
|
|
window.clearTimeout(timer);
|
|
timer = window.setTimeout(() => fn(...args), delay);
|
|
};
|
|
}
|
|
|
|
async function api(path, options = {}) {
|
|
const response = await fetch(path, {
|
|
...options,
|
|
headers: {
|
|
"content-type": "application/json",
|
|
...(options.headers || {}),
|
|
},
|
|
});
|
|
const payload = await response.json();
|
|
if (!response.ok) {
|
|
throw new Error(payload.error || `HTTP ${response.status}`);
|
|
}
|
|
return payload;
|
|
}
|
|
|
|
function topicLabel(topic) {
|
|
const found = state.atlas?.topics?.find((item) => item.id === topic);
|
|
return found?.label || topic.replaceAll("-", " ");
|
|
}
|
|
|
|
function colorFor(index) {
|
|
const colors = ["#0d766f", "#ba5644", "#aa7419", "#527b46", "#665d9f", "#236092", "#8a5a25"];
|
|
return colors[index % colors.length];
|
|
}
|
|
|
|
async function loadHealth() {
|
|
try {
|
|
const health = await api("/api/health");
|
|
state.health = health;
|
|
elements.healthLine.textContent = `${health.paper_count} papers · ${health.ollama_ok ? "Ollama online" : "Ollama offline"}`;
|
|
} catch (error) {
|
|
elements.healthLine.textContent = error.message;
|
|
}
|
|
}
|
|
|
|
async function loadAtlas() {
|
|
state.atlas = await api("/api/atlas");
|
|
elements.mapTitle.textContent = `${state.atlas.paper_count} 篇论文构成的 Agent 版图`;
|
|
renderAtlasMap();
|
|
renderRoutes();
|
|
renderTimeline();
|
|
renderOverview();
|
|
}
|
|
|
|
function renderAtlasMap() {
|
|
const topics = state.atlas.topics.filter((topic) => topic.count >= 30).slice(0, 13);
|
|
const topicMap = new Map(topics.map((topic, index) => [topic.id, { ...topic, index }]));
|
|
const maxCount = Math.max(...topics.map((topic) => topic.count), 1);
|
|
const isMobile = window.matchMedia("(max-width: 760px)").matches;
|
|
elements.atlasSvg.setAttribute("viewBox", isMobile ? "16 -4 78 86" : "0 0 170 100");
|
|
const point = (topic) => ({
|
|
x: isMobile ? topic.x : 14 + topic.x * 1.58,
|
|
y: -18 + topic.y * 0.93,
|
|
});
|
|
|
|
const edges = state.atlas.edges
|
|
.filter((edge) => topicMap.has(edge.source) && topicMap.has(edge.target))
|
|
.map((edge) => {
|
|
const source = topicMap.get(edge.source);
|
|
const target = topicMap.get(edge.target);
|
|
const sourcePoint = point(source);
|
|
const targetPoint = point(target);
|
|
return `
|
|
<line class="atlas-edge"
|
|
x1="${sourcePoint.x}" y1="${sourcePoint.y}"
|
|
x2="${targetPoint.x}" y2="${targetPoint.y}"
|
|
stroke-width="${Math.max(0.25, 1.8 * edge.strength).toFixed(2)}">
|
|
<title>${escapeHtml(topicLabel(edge.source))} ↔ ${escapeHtml(topicLabel(edge.target))}: ${edge.count}</title>
|
|
</line>
|
|
`;
|
|
})
|
|
.join("");
|
|
|
|
const nodes = topics
|
|
.map((topic, index) => {
|
|
const active = topic.id === state.activeTopic ? " active" : "";
|
|
const r = 3.6 + 5.6 * (topic.count / maxCount);
|
|
const ring = r + 1.6 + topic.heat * 1.7;
|
|
const color = colorFor(index);
|
|
const p = point(topic);
|
|
return `
|
|
<g class="atlas-node${active}" data-topic="${escapeHtml(topic.id)}" transform="translate(${p.x.toFixed(2)} ${p.y.toFixed(2)})">
|
|
<circle class="heat-ring" r="${ring.toFixed(2)}" style="stroke:${color}; opacity:${0.2 + topic.heat * 0.65}"></circle>
|
|
<circle r="${r.toFixed(2)}" style="stroke:${color};"></circle>
|
|
<text y="-0.4">${escapeHtml(topic.label)}</text>
|
|
<text class="node-count" y="3.0">${topic.count} · +${topic.recent_count}</text>
|
|
</g>
|
|
`;
|
|
})
|
|
.join("");
|
|
|
|
elements.atlasSvg.innerHTML = `${edges}${nodes}`;
|
|
}
|
|
|
|
function renderRoutes() {
|
|
elements.routeList.innerHTML = state.atlas.routes
|
|
.map(
|
|
(route) => `
|
|
<button class="route-item" type="button" data-route="${escapeHtml(route.id)}">
|
|
<strong>${escapeHtml(route.title)}</strong>
|
|
<span>${escapeHtml(route.summary)}</span>
|
|
</button>
|
|
`,
|
|
)
|
|
.join("");
|
|
}
|
|
|
|
function renderTimeline() {
|
|
const rows = state.atlas.timeline.slice(-13);
|
|
const maxTotal = Math.max(...rows.map((row) => row.total), 1);
|
|
elements.timeline.innerHTML = rows
|
|
.map((row) => {
|
|
const height = 8 + 70 * (row.total / maxTotal);
|
|
return `
|
|
<div class="month-cell" title="${escapeHtml(row.month)} · ${row.total}">
|
|
<div class="month-bar" style="height:${height.toFixed(1)}px"></div>
|
|
<div class="month-label">${escapeHtml(row.month.slice(5))}</div>
|
|
</div>
|
|
`;
|
|
})
|
|
.join("");
|
|
}
|
|
|
|
function statGrid(items) {
|
|
return `
|
|
<div class="stat-grid">
|
|
${items
|
|
.map(
|
|
(item) => `
|
|
<div class="stat">
|
|
<strong>${escapeHtml(item.value)}</strong>
|
|
<span>${escapeHtml(item.label)}</span>
|
|
</div>
|
|
`,
|
|
)
|
|
.join("")}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function paperList(items, limit = items.length) {
|
|
if (!items?.length) {
|
|
return `<div class="empty-state">暂无证据</div>`;
|
|
}
|
|
return `
|
|
<div class="paper-list">
|
|
${items
|
|
.slice(0, limit)
|
|
.map(
|
|
(paper) => `
|
|
<button class="paper-item" type="button" data-paper="${escapeHtml(paper.id)}">
|
|
<div class="paper-title">${escapeHtml(paper.title)}</div>
|
|
<div class="paper-meta">
|
|
<span>${escapeHtml(paper.published_at || paper.year || "unknown")}</span>
|
|
<span>score ${escapeHtml(paper.collection_score)}</span>
|
|
${(paper.topics || [])
|
|
.slice(0, 4)
|
|
.map((topic) => `<span class="mini-badge">${escapeHtml(topicLabel(topic))}</span>`)
|
|
.join("")}
|
|
</div>
|
|
</button>
|
|
`,
|
|
)
|
|
.join("")}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function routeButtons(routes) {
|
|
return `
|
|
<div class="chip-row">
|
|
${routes
|
|
.map(
|
|
(route) => `
|
|
<button class="pill-button" type="button" data-route="${escapeHtml(route.id)}">${escapeHtml(route.title)}</button>
|
|
`,
|
|
)
|
|
.join("")}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderOverview(aiHtml = "") {
|
|
state.view = "atlas";
|
|
state.selectedPaper = null;
|
|
elements.lensEyebrow.textContent = "Atlas";
|
|
elements.lensTitle.textContent = "整体脉络";
|
|
setModeButtons("atlas");
|
|
|
|
const topTopics = state.atlas.topics.slice(0, 7);
|
|
elements.lensBody.innerHTML = `
|
|
<section class="section">
|
|
${statGrid([
|
|
{ value: state.atlas.paper_count, label: "papers" },
|
|
{ value: state.atlas.topic_count, label: "topics" },
|
|
{ value: state.atlas.recent_months.join(" / "), label: "recent window" },
|
|
])}
|
|
</section>
|
|
|
|
<section class="section">
|
|
<p class="statement">这版 Atlas 把论文当作证据，把主题、路线和趋势当作入口。当前最强的主轴是 evaluation、tool use、RAG、reasoning、planning、safety、memory。</p>
|
|
<p class="question">核心问题：Agent 如何从“能回答”走向“能长期、可观察、可治理地行动”？</p>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>主题入口</h3>
|
|
<div class="chip-row">
|
|
${topTopics
|
|
.map(
|
|
(topic) => `
|
|
<button class="pill-button" type="button" data-topic="${escapeHtml(topic.id)}">
|
|
${escapeHtml(topic.label)} · ${topic.count}
|
|
</button>
|
|
`,
|
|
)
|
|
.join("")}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>路线</h3>
|
|
${routeButtons(state.atlas.routes)}
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>关键论文候选</h3>
|
|
${paperList(state.atlas.key_papers, 8)}
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>AI 研究编辑</h3>
|
|
<div class="tool-row">
|
|
<button class="tool-button primary" type="button" data-atlas-ai="atlas">解释地图</button>
|
|
<button class="tool-button" type="button" data-atlas-ai="path">阅读路径</button>
|
|
</div>
|
|
<div id="aiResult" class="ai-box" style="${aiHtml ? "" : "display:none"}">${aiHtml}</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
async function selectTopic(topic) {
|
|
state.activeTopic = topic;
|
|
state.selectedPaper = null;
|
|
renderAtlasMap();
|
|
const focus = await api(`/api/topic?topic=${encodeURIComponent(topic)}`);
|
|
state.topicFocus = focus;
|
|
renderTopic(focus);
|
|
}
|
|
|
|
function renderTopic(focus, aiHtml = "") {
|
|
state.view = "atlas";
|
|
elements.lensEyebrow.textContent = "Topic";
|
|
elements.lensTitle.textContent = focus.label;
|
|
setModeButtons("atlas");
|
|
|
|
const recentTotal = Object.values(focus.months).slice(-3).reduce((sum, value) => sum + Number(value || 0), 0);
|
|
elements.lensBody.innerHTML = `
|
|
<section class="section">
|
|
${statGrid([
|
|
{ value: focus.count, label: "papers" },
|
|
{ value: recentTotal, label: "recent" },
|
|
{ value: focus.neighbors.length, label: "neighbors" },
|
|
])}
|
|
</section>
|
|
|
|
<section class="section">
|
|
<p class="statement">${escapeHtml(focus.stance)}</p>
|
|
<p class="question">${escapeHtml(focus.question)}</p>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>相邻主题</h3>
|
|
<div class="chip-row">
|
|
${focus.neighbors
|
|
.slice(0, 8)
|
|
.map(
|
|
(item) => `
|
|
<button class="pill-button" type="button" data-topic="${escapeHtml(item.topic)}">
|
|
${escapeHtml(item.label)} · ${item.count}
|
|
</button>
|
|
`,
|
|
)
|
|
.join("")}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>所在路线</h3>
|
|
${routeButtons(focus.routes)}
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>AI 研究编辑</h3>
|
|
<div class="tool-row">
|
|
<button class="tool-button primary" type="button" data-topic-ai="topic">生成主题导读</button>
|
|
<button class="tool-button" type="button" data-topic-ai="path">生成阅读路径</button>
|
|
${
|
|
focus.neighbors[0]
|
|
? `<button class="tool-button" type="button" data-compare-topic="${escapeHtml(focus.neighbors[0].topic)}">对比 ${escapeHtml(focus.neighbors[0].label)}</button>`
|
|
: ""
|
|
}
|
|
</div>
|
|
<div id="aiResult" class="ai-box" style="${aiHtml ? "" : "display:none"}">${aiHtml}</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>关键论文</h3>
|
|
${paperList(focus.key_papers, 10)}
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3>最近新增</h3>
|
|
${paperList(focus.recent_papers, 8)}
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
function renderRoute(routeId) {
|
|
const route = state.atlas.routes.find((item) => item.id === routeId);
|
|
if (!route) return;
|
|
state.selectedPaper = null;
|
|
elements.lensEyebrow.textContent = "Route";
|
|
elements.lensTitle.textContent = route.title;
|
|
elements.lensBody.innerHTML = `
|
|
<section class="section">
|
|
<p class="statement">${escapeHtml(route.summary)}</p>
|
|
</section>
|
|
<section class="section">
|
|
<h3>主题链路</h3>
|
|
<div class="chip-row">
|
|
${route.topics
|
|
.map((topic) => `<button class="pill-button" type="button" data-topic="${escapeHtml(topic)}">${escapeHtml(topicLabel(topic))}</button>`)
|
|
.join("")}
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<h3>路线证据</h3>
|
|
${paperList(
|
|
state.atlas.key_papers.filter((paper) => paper.topics.some((topic) => route.topics.includes(topic))),
|
|
12,
|
|
)}
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
async function runSearch() {
|
|
const q = elements.searchInput.value.trim();
|
|
if (!q) {
|
|
renderOverview();
|
|
return;
|
|
}
|
|
state.view = "search";
|
|
setModeButtons("search");
|
|
elements.lensEyebrow.textContent = "Search";
|
|
elements.lensTitle.textContent = q;
|
|
elements.lensBody.innerHTML = `<div class="empty-state">searching</div>`;
|
|
const params = new URLSearchParams({ q, limit: "60", sort: "score" });
|
|
if (state.activeTopic) params.set("topic", state.activeTopic);
|
|
const payload = await api(`/api/papers?${params.toString()}`);
|
|
state.searchItems = payload.items;
|
|
state.searchTotal = payload.total;
|
|
elements.lensBody.innerHTML = `
|
|
<section class="section">
|
|
${statGrid([
|
|
{ value: payload.total, label: "matches" },
|
|
{ value: state.activeTopic ? topicLabel(state.activeTopic) : "all", label: "scope" },
|
|
{ value: "score", label: "sort" },
|
|
])}
|
|
</section>
|
|
<section class="section">
|
|
${paperList(payload.items, payload.items.length)}
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
function renderReading() {
|
|
state.view = "reading";
|
|
setModeButtons("reading");
|
|
elements.lensEyebrow.textContent = "Reading";
|
|
elements.lensTitle.textContent = "阅读流";
|
|
elements.lensBody.innerHTML = `
|
|
<section class="section">
|
|
<p class="statement">先从路线理解问题，再进入主题，最后把论文作为证据读。当前版本把高分论文和最近新增放在这里，后续可以接入个人阅读队列。</p>
|
|
</section>
|
|
<section class="section">
|
|
<h3>高优先级</h3>
|
|
${paperList(state.atlas.key_papers, 12)}
|
|
</section>
|
|
<section class="section">
|
|
<h3>最近新增</h3>
|
|
${paperList(state.atlas.recent_papers, 12)}
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
function stripFrontmatter(markdown) {
|
|
const text = String(markdown || "");
|
|
const match = text.match(/^# .+?\n\n---[\s\S]*?\n---\n\n?/);
|
|
return match ? text.slice(match[0].length) : text;
|
|
}
|
|
|
|
function renderMarkdown(markdown) {
|
|
return escapeHtml(stripFrontmatter(markdown))
|
|
.replace(/^### (.+)$/gm, "\n$1\n")
|
|
.replace(/^## (.+)$/gm, "\n$1\n")
|
|
.replace(/^# (.+)$/gm, "$1\n")
|
|
.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, "$1 ($2)");
|
|
}
|
|
|
|
async function selectPaper(id) {
|
|
const payload = await api(`/api/paper?id=${encodeURIComponent(id)}`);
|
|
state.selectedPaper = payload.paper;
|
|
state.selectedMarkdown = payload.markdown;
|
|
renderPaperReader();
|
|
}
|
|
|
|
function renderPaperReader(aiHtml = "", abstractHtml = "") {
|
|
const paper = state.selectedPaper;
|
|
if (!paper) return;
|
|
elements.lensEyebrow.textContent = "Paper";
|
|
elements.lensTitle.textContent = "研读";
|
|
elements.lensBody.innerHTML = `
|
|
<section class="section">
|
|
<h3 class="reader-title">${escapeHtml(paper.title)}</h3>
|
|
<div class="paper-meta">
|
|
<span>${escapeHtml(paper.published_at || paper.year)}</span>
|
|
<span>${escapeHtml(paper.venue || paper.source)}</span>
|
|
<span>score ${escapeHtml(paper.collection_score)}</span>
|
|
</div>
|
|
<div class="chip-row" style="margin-top:10px">
|
|
${(paper.topics || []).map((topic) => `<button class="pill-button" type="button" data-topic="${escapeHtml(topic)}">${escapeHtml(topicLabel(topic))}</button>`).join("")}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="tool-row">
|
|
<a class="paper-link" href="${escapeHtml(paper.url)}" target="_blank" rel="noreferrer">arXiv</a>
|
|
<button class="tool-button" type="button" data-paper-action="abstract">摘要</button>
|
|
<button class="tool-button primary" type="button" data-paper-action="summary">中文摘要</button>
|
|
<button class="tool-button" type="button" data-paper-action="translate">翻译</button>
|
|
<button class="tool-button" type="button" data-paper-action="deep">深度研读</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="paperAbstract" style="${abstractHtml ? "" : "display:none"}">${abstractHtml}</section>
|
|
<section class="section" id="paperAi" style="${aiHtml ? "" : "display:none"}">${aiHtml}</section>
|
|
|
|
<section class="section">
|
|
<h3>本地卡片</h3>
|
|
<div class="reader-box markdown-preview">${renderMarkdown(state.selectedMarkdown)}</div>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
async function loadAbstract() {
|
|
if (!state.selectedPaper) return;
|
|
setAiBusy(true, "摘要获取中");
|
|
try {
|
|
const payload = await api(`/api/paper/abstract?id=${encodeURIComponent(state.selectedPaper.id)}`);
|
|
const abstract = payload.abstract;
|
|
const html = abstract
|
|
? `<h3>arXiv Abstract</h3><div class="abstract-text">${escapeHtml(abstract.abstract)}</div>`
|
|
: `<div class="empty-state">${escapeHtml(payload.message || "No abstract")}</div>`;
|
|
renderPaperReader("", html);
|
|
} catch (error) {
|
|
renderPaperReader("", `<div class="empty-state">${escapeHtml(error.message)}</div>`);
|
|
} finally {
|
|
setAiBusy(false);
|
|
}
|
|
}
|
|
|
|
function setAiBusy(isBusy, label = "") {
|
|
state.aiBusy = isBusy;
|
|
document.querySelectorAll(".tool-button, .quiet-button").forEach((button) => {
|
|
button.disabled = isBusy;
|
|
});
|
|
if (isBusy) {
|
|
const box = $("#aiResult") || $("#paperAi");
|
|
if (box) {
|
|
box.style.display = "";
|
|
box.innerHTML = `<div class="empty-state">${escapeHtml(label)}</div>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function runPaperAi(mode) {
|
|
if (!state.selectedPaper) return;
|
|
const model = state.health?.default_models?.[mode] || (mode === "translate" ? "ChatGPT-5.6:light" : "ChatGPT-5.6:fast");
|
|
if (model.includes(":large") && !window.confirm("将调用 large 模型，占用更多 GPU。继续？")) return;
|
|
setAiBusy(true, `${mode} · ${model}`);
|
|
try {
|
|
const payload = await api("/api/ai", {
|
|
method: "POST",
|
|
body: JSON.stringify({ id: state.selectedPaper.id, mode, model }),
|
|
});
|
|
const cache = payload.cached ? "cached" : `${payload.duration_seconds}s`;
|
|
const html = `<h3>${escapeHtml(payload.model)} · ${escapeHtml(cache)}</h3><div class="ai-output">${escapeHtml(payload.response)}</div>`;
|
|
renderPaperReader(html, $("#paperAbstract")?.innerHTML || "");
|
|
} catch (error) {
|
|
renderPaperReader(`<div class="empty-state">${escapeHtml(error.message)}</div>`, $("#paperAbstract")?.innerHTML || "");
|
|
} finally {
|
|
setAiBusy(false);
|
|
}
|
|
}
|
|
|
|
async function runAtlasAi(mode, topic = "", topicB = "") {
|
|
const model = state.health?.default_models?.[mode] || "ChatGPT-5.6:fast";
|
|
if (model.includes(":large") && !window.confirm("将调用 large 模型做高维综合，占用更多 GPU。继续？")) return;
|
|
setAiBusy(true, `${mode} · ${model}`);
|
|
try {
|
|
const payload = await api("/api/atlas/ai", {
|
|
method: "POST",
|
|
body: JSON.stringify({ mode, topic, topic_b: topicB, model }),
|
|
});
|
|
const cache = payload.cached ? "cached" : `${payload.duration_seconds}s`;
|
|
const html = `<h3>${escapeHtml(payload.model)} · ${escapeHtml(cache)}</h3><div class="ai-output">${escapeHtml(payload.response)}</div>`;
|
|
if (mode === "topic" || (mode === "path" && state.topicFocus)) {
|
|
renderTopic(state.topicFocus, html);
|
|
} else {
|
|
renderOverview(html);
|
|
}
|
|
} catch (error) {
|
|
const html = `<div class="empty-state">${escapeHtml(error.message)}</div>`;
|
|
if (state.topicFocus) renderTopic(state.topicFocus, html);
|
|
else renderOverview(html);
|
|
} finally {
|
|
setAiBusy(false);
|
|
}
|
|
}
|
|
|
|
function setModeButtons(view) {
|
|
document.querySelectorAll("[data-view]").forEach((button) => {
|
|
button.classList.toggle("active", button.dataset.view === view);
|
|
});
|
|
|
|
window.addEventListener(
|
|
"resize",
|
|
debounce(() => {
|
|
if (state.atlas) renderAtlasMap();
|
|
}, 150),
|
|
);
|
|
}
|
|
|
|
function scrollLensIntoView() {
|
|
if (window.matchMedia("(max-width: 760px)").matches) {
|
|
document.querySelector(".lens-panel").scrollIntoView({ behavior: "smooth", block: "start" });
|
|
}
|
|
}
|
|
|
|
function bindEvents() {
|
|
elements.atlasSvg.addEventListener("click", async (event) => {
|
|
const node = event.target.closest("[data-topic]");
|
|
if (!node) return;
|
|
await selectTopic(node.dataset.topic);
|
|
scrollLensIntoView();
|
|
});
|
|
|
|
elements.routeList.addEventListener("click", (event) => {
|
|
const button = event.target.closest("[data-route]");
|
|
if (button) {
|
|
renderRoute(button.dataset.route);
|
|
scrollLensIntoView();
|
|
}
|
|
});
|
|
|
|
elements.lensBody.addEventListener("click", async (event) => {
|
|
const topicButton = event.target.closest("[data-topic]");
|
|
const routeButton = event.target.closest("[data-route]");
|
|
const paperButton = event.target.closest("[data-paper]");
|
|
const atlasAi = event.target.closest("[data-atlas-ai]");
|
|
const topicAi = event.target.closest("[data-topic-ai]");
|
|
const compareButton = event.target.closest("[data-compare-topic]");
|
|
const paperAction = event.target.closest("[data-paper-action]");
|
|
|
|
if (topicButton) {
|
|
await selectTopic(topicButton.dataset.topic);
|
|
scrollLensIntoView();
|
|
} else if (routeButton) {
|
|
renderRoute(routeButton.dataset.route);
|
|
} else if (paperButton) {
|
|
await selectPaper(paperButton.dataset.paper);
|
|
scrollLensIntoView();
|
|
} else if (atlasAi) {
|
|
await runAtlasAi(atlasAi.dataset.atlasAi, state.activeTopic);
|
|
} else if (topicAi) {
|
|
await runAtlasAi(topicAi.dataset.topicAi, state.activeTopic);
|
|
} else if (compareButton) {
|
|
await runAtlasAi("compare", state.activeTopic, compareButton.dataset.compareTopic);
|
|
} else if (paperAction) {
|
|
const action = paperAction.dataset.paperAction;
|
|
if (action === "abstract") await loadAbstract();
|
|
else await runPaperAi(action);
|
|
}
|
|
});
|
|
|
|
elements.searchBtn.addEventListener("click", runSearch);
|
|
elements.searchInput.addEventListener(
|
|
"input",
|
|
debounce(() => {
|
|
if (elements.searchInput.value.trim()) runSearch();
|
|
}),
|
|
);
|
|
|
|
elements.explainAtlasBtn.addEventListener("click", () => runAtlasAi("atlas", state.activeTopic));
|
|
elements.readingPathBtn.addEventListener("click", () => runAtlasAi("path", state.activeTopic));
|
|
elements.closePaperBtn.addEventListener("click", () => {
|
|
if (state.topicFocus) renderTopic(state.topicFocus);
|
|
else renderOverview();
|
|
});
|
|
|
|
document.querySelectorAll("[data-view]").forEach((button) => {
|
|
button.addEventListener("click", async () => {
|
|
const view = button.dataset.view;
|
|
if (view === "atlas") {
|
|
state.activeTopic ? await selectTopic(state.activeTopic) : renderOverview();
|
|
} else if (view === "search") {
|
|
await runSearch();
|
|
} else {
|
|
renderReading();
|
|
}
|
|
scrollLensIntoView();
|
|
});
|
|
});
|
|
}
|
|
|
|
async function boot() {
|
|
bindEvents();
|
|
await loadHealth();
|
|
await loadAtlas();
|
|
}
|
|
|
|
boot();
|