734 lines
23 KiB
JavaScript
734 lines
23 KiB
JavaScript
(() => {
|
|
let qs = new URLSearchParams(window.location.search);
|
|
const qInput = document.getElementById("q");
|
|
const channelDropdown = document.getElementById("channelDropdown");
|
|
const channelSummary = document.getElementById("channelSummary");
|
|
const channelOptions = document.getElementById("channelOptions");
|
|
const sortSel = document.getElementById("sort");
|
|
const sizeSel = document.getElementById("size");
|
|
const exactToggle = document.getElementById("exactToggle");
|
|
const fuzzyToggle = document.getElementById("fuzzyToggle");
|
|
const phraseToggle = document.getElementById("phraseToggle");
|
|
const queryToggle = document.getElementById("queryStringToggle");
|
|
const searchBtn = document.getElementById("searchBtn");
|
|
const resultsDiv = document.getElementById("results");
|
|
const metaDiv = document.getElementById("meta");
|
|
const metricsContainer = document.getElementById("metrics");
|
|
const metricsStatus = document.getElementById("metricsStatus");
|
|
const metricsContent = document.getElementById("metricsContent");
|
|
const freqSummary = document.getElementById("frequencySummary");
|
|
const freqChart = document.getElementById("frequencyChart");
|
|
const channelMap = new Map();
|
|
const selectedChannels = new Set();
|
|
let pendingChannelSelection = [];
|
|
let channelsReady = false;
|
|
let suppressChannelChange = false;
|
|
let allChannelsCheckbox = null;
|
|
let previousToggleState = { exact: true, fuzzy: true, phrase: true };
|
|
let currentPage =
|
|
parseInt(qs.get("page") || "0", 10) ||
|
|
0;
|
|
|
|
function parseBoolParam(name, defaultValue) {
|
|
const raw = qs.get(name);
|
|
if (raw === null) return defaultValue;
|
|
const lowered = raw.toLowerCase();
|
|
return !["0", "false", "no"].includes(lowered);
|
|
}
|
|
|
|
function parseChannelParams(params) {
|
|
const collected = [];
|
|
if (!params) return collected;
|
|
const seen = new Set();
|
|
const rawValues = params.getAll("channel_id");
|
|
const legacy = params.get("channel");
|
|
if (legacy) rawValues.push(legacy);
|
|
rawValues.forEach((value) => {
|
|
if (value == null) return;
|
|
String(value)
|
|
.split(",")
|
|
.map((part) => part.trim())
|
|
.filter((part) => part && part.toLowerCase() !== "all")
|
|
.forEach((part) => {
|
|
if (!seen.has(part)) {
|
|
seen.add(part);
|
|
collected.push(part);
|
|
}
|
|
});
|
|
});
|
|
return collected;
|
|
}
|
|
|
|
function getSelectedChannels() {
|
|
return Array.from(selectedChannels);
|
|
}
|
|
|
|
function ensureAllCheckboxState() {
|
|
if (allChannelsCheckbox) {
|
|
allChannelsCheckbox.checked = selectedChannels.size === 0;
|
|
}
|
|
}
|
|
|
|
function updateChannelSummary() {
|
|
if (!channelSummary) return;
|
|
if (!selectedChannels.size) {
|
|
channelSummary.textContent = "All Channels";
|
|
return;
|
|
}
|
|
const names = Array.from(selectedChannels).map(
|
|
(id) => channelMap.get(id) || id
|
|
);
|
|
if (names.length > 1) {
|
|
names.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
|
|
}
|
|
let label = names.slice(0, 3).join(", ");
|
|
if (names.length > 3) {
|
|
label += ` +${names.length - 3} more`;
|
|
}
|
|
channelSummary.textContent = label;
|
|
}
|
|
|
|
function applyChannelSelection(ids, { silent = false } = {}) {
|
|
selectedChannels.clear();
|
|
ids.forEach((id) => selectedChannels.add(id));
|
|
pendingChannelSelection = getSelectedChannels();
|
|
ensureAllCheckboxState();
|
|
if (channelOptions) {
|
|
suppressChannelChange = true;
|
|
const checkboxes = channelOptions.querySelectorAll(
|
|
'input[type="checkbox"][data-channel="1"]'
|
|
);
|
|
checkboxes.forEach((checkbox) => {
|
|
checkbox.checked = selectedChannels.has(checkbox.value);
|
|
});
|
|
suppressChannelChange = false;
|
|
}
|
|
updateChannelSummary();
|
|
if (!silent && channelsReady) {
|
|
runSearch(0);
|
|
}
|
|
}
|
|
|
|
function setFromQuery() {
|
|
qInput.value = qs.get("q") || "";
|
|
sortSel.value = qs.get("sort") || "relevant";
|
|
sizeSel.value = qs.get("size") || "10";
|
|
pendingChannelSelection = parseChannelParams(qs);
|
|
applyChannelSelection(pendingChannelSelection, { silent: true });
|
|
exactToggle.checked = parseBoolParam("exact", true);
|
|
fuzzyToggle.checked = parseBoolParam("fuzzy", true);
|
|
phraseToggle.checked = parseBoolParam("phrase", true);
|
|
queryToggle.checked = parseBoolParam("query_string", false);
|
|
applyQueryMode();
|
|
rememberToggleState();
|
|
}
|
|
|
|
function applyQueryMode() {
|
|
if (!queryToggle) return;
|
|
if (queryToggle.checked) {
|
|
if (!exactToggle.disabled) {
|
|
previousToggleState = {
|
|
exact: exactToggle.checked,
|
|
fuzzy: fuzzyToggle.checked,
|
|
phrase: phraseToggle.checked,
|
|
};
|
|
}
|
|
exactToggle.checked = false;
|
|
fuzzyToggle.checked = false;
|
|
phraseToggle.checked = false;
|
|
exactToggle.disabled = true;
|
|
fuzzyToggle.disabled = true;
|
|
phraseToggle.disabled = true;
|
|
} else {
|
|
exactToggle.disabled = false;
|
|
fuzzyToggle.disabled = false;
|
|
phraseToggle.disabled = false;
|
|
exactToggle.checked = previousToggleState.exact;
|
|
fuzzyToggle.checked = previousToggleState.fuzzy;
|
|
phraseToggle.checked = previousToggleState.phrase;
|
|
}
|
|
}
|
|
|
|
function rememberToggleState() {
|
|
if (queryToggle && !queryToggle.checked) {
|
|
previousToggleState = {
|
|
exact: !!exactToggle.checked,
|
|
fuzzy: !!fuzzyToggle.checked,
|
|
phrase: !!phraseToggle.checked,
|
|
};
|
|
}
|
|
}
|
|
|
|
if (channelOptions) {
|
|
channelOptions.addEventListener("change", (event) => {
|
|
const target = event.target;
|
|
if (!(target instanceof HTMLInputElement) || target.type !== "checkbox") {
|
|
return;
|
|
}
|
|
if (suppressChannelChange) {
|
|
return;
|
|
}
|
|
if (target.dataset.all === "1") {
|
|
if (!target.checked && !selectedChannels.size) {
|
|
suppressChannelChange = true;
|
|
target.checked = true;
|
|
suppressChannelChange = false;
|
|
return;
|
|
}
|
|
if (target.checked) {
|
|
selectedChannels.clear();
|
|
pendingChannelSelection = [];
|
|
suppressChannelChange = true;
|
|
const others = channelOptions.querySelectorAll(
|
|
'input[type="checkbox"][data-channel="1"]'
|
|
);
|
|
others.forEach((checkbox) => {
|
|
checkbox.checked = false;
|
|
});
|
|
suppressChannelChange = false;
|
|
ensureAllCheckboxState();
|
|
updateChannelSummary();
|
|
if (channelsReady) {
|
|
runSearch(0);
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
const id = target.value;
|
|
if (!id) return;
|
|
if (target.checked) {
|
|
selectedChannels.add(id);
|
|
} else {
|
|
selectedChannels.delete(id);
|
|
}
|
|
pendingChannelSelection = getSelectedChannels();
|
|
ensureAllCheckboxState();
|
|
updateChannelSummary();
|
|
if (channelsReady) {
|
|
runSearch(0);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function loadChannels() {
|
|
if (!channelOptions) {
|
|
channelsReady = true;
|
|
return;
|
|
}
|
|
try {
|
|
const res = await fetch("/api/channels");
|
|
const data = await res.json();
|
|
channelMap.clear();
|
|
channelOptions.innerHTML = "";
|
|
|
|
const listFragment = document.createDocumentFragment();
|
|
|
|
const allLabel = document.createElement("label");
|
|
allLabel.className = "channel-option";
|
|
allChannelsCheckbox = document.createElement("input");
|
|
allChannelsCheckbox.type = "checkbox";
|
|
allChannelsCheckbox.dataset.all = "1";
|
|
allChannelsCheckbox.checked = selectedChannels.size === 0;
|
|
const allText = document.createElement("span");
|
|
allText.textContent = "All Channels";
|
|
allLabel.appendChild(allChannelsCheckbox);
|
|
allLabel.appendChild(allText);
|
|
listFragment.appendChild(allLabel);
|
|
|
|
data.forEach((item) => {
|
|
const label = document.createElement("label");
|
|
label.className = "channel-option";
|
|
const checkbox = document.createElement("input");
|
|
checkbox.type = "checkbox";
|
|
checkbox.value = item.Id;
|
|
checkbox.dataset.channel = "1";
|
|
const text = document.createElement("span");
|
|
text.textContent = `${item.Name} (${item.Count})`;
|
|
label.appendChild(checkbox);
|
|
label.appendChild(text);
|
|
listFragment.appendChild(label);
|
|
channelMap.set(item.Id, item.Name);
|
|
});
|
|
|
|
channelOptions.appendChild(listFragment);
|
|
|
|
if (!data.length) {
|
|
const empty = document.createElement("div");
|
|
empty.textContent = "No channels available.";
|
|
channelOptions.appendChild(empty);
|
|
}
|
|
|
|
const initialSelection = pendingChannelSelection.length
|
|
? pendingChannelSelection
|
|
: Array.from(selectedChannels);
|
|
applyChannelSelection(initialSelection, { silent: true });
|
|
channelsReady = true;
|
|
updateChannelSummary();
|
|
} catch (err) {
|
|
console.error("Failed to load channels", err);
|
|
channelOptions.innerHTML = "<div>Failed to load channels.</div>";
|
|
channelsReady = true;
|
|
ensureAllCheckboxState();
|
|
updateChannelSummary();
|
|
}
|
|
}
|
|
|
|
function updateUrl(q, sort, channels, page, size, exact, fuzzy, phrase, queryMode) {
|
|
const next = new URL(window.location.href);
|
|
next.searchParams.set("q", q);
|
|
next.searchParams.set("sort", sort);
|
|
next.searchParams.delete("channel_id");
|
|
next.searchParams.delete("channel");
|
|
channels.forEach((id) => next.searchParams.append("channel_id", id));
|
|
next.searchParams.set("page", page);
|
|
next.searchParams.set("size", size);
|
|
next.searchParams.set("exact", exact ? "1" : "0");
|
|
next.searchParams.set("fuzzy", fuzzy ? "1" : "0");
|
|
next.searchParams.set("phrase", phrase ? "1" : "0");
|
|
next.searchParams.set("query_string", queryMode ? "1" : "0");
|
|
history.pushState({}, "", next.toString());
|
|
}
|
|
|
|
function fmtDate(value) {
|
|
try {
|
|
return (value || "").split("T")[0];
|
|
} catch {
|
|
return value;
|
|
}
|
|
}
|
|
|
|
function fmtNumber(n) {
|
|
if (typeof n === "number") return n.toLocaleString();
|
|
return n;
|
|
}
|
|
|
|
|
|
// Transcript viewer functionality removed.
|
|
|
|
function renderMetrics(data) {
|
|
if (!metricsContent) return;
|
|
metricsContent.innerHTML = "";
|
|
if (!data) return;
|
|
|
|
if (metricsStatus) {
|
|
metricsStatus.textContent = "";
|
|
}
|
|
|
|
const summary = document.createElement("div");
|
|
summary.innerHTML = `<strong>Entries:</strong> ${fmtNumber(data.totalItems)} • <strong>Channels:</strong> ${fmtNumber(data.totalChannels)}`;
|
|
metricsContent.appendChild(summary);
|
|
|
|
if (Array.isArray(data.itemsPerChannel) && data.itemsPerChannel.length) {
|
|
const top = data.itemsPerChannel.slice(0, 5);
|
|
const channelHeader = document.createElement("div");
|
|
channelHeader.style.marginTop = "8px";
|
|
channelHeader.innerHTML = "<strong>Top Channels</strong>";
|
|
metricsContent.appendChild(channelHeader);
|
|
|
|
const channelList = document.createElement("div");
|
|
channelList.className = "muted";
|
|
top.forEach((entry) => {
|
|
const row = document.createElement("div");
|
|
row.textContent = `${entry.label}: ${fmtNumber(entry.count)}`;
|
|
channelList.appendChild(row);
|
|
});
|
|
metricsContent.appendChild(channelList);
|
|
}
|
|
}
|
|
|
|
async function loadMetrics() {
|
|
if (!metricsContainer) return;
|
|
metricsContainer.dataset.loading = "1";
|
|
if (!metricsContainer.dataset.loaded && metricsStatus) {
|
|
metricsStatus.textContent = "Loading metrics…";
|
|
}
|
|
try {
|
|
const res = await fetch("/api/metrics");
|
|
const data = await res.json();
|
|
renderMetrics(data);
|
|
metricsContainer.dataset.loaded = "1";
|
|
} catch (err) {
|
|
console.error("Failed to load metrics", err);
|
|
if (!metricsContainer.dataset.loaded && metricsStatus) {
|
|
metricsStatus.textContent = "Metrics unavailable.";
|
|
}
|
|
} finally {
|
|
delete metricsContainer.dataset.loading;
|
|
}
|
|
}
|
|
|
|
function clearFrequency(message) {
|
|
if (freqSummary) {
|
|
freqSummary.textContent = message || "";
|
|
}
|
|
if (freqChart) {
|
|
freqChart.innerHTML = "";
|
|
}
|
|
}
|
|
|
|
function renderFrequencyChart(buckets, channelTotals) {
|
|
if (!freqChart || typeof d3 === "undefined") {
|
|
return;
|
|
}
|
|
freqChart.innerHTML = "";
|
|
if (!buckets.length) {
|
|
clearFrequency("No matches for this query.");
|
|
return;
|
|
}
|
|
|
|
let channelsOrder =
|
|
(channelTotals && channelTotals.length
|
|
? channelTotals.map((entry) => entry.id)
|
|
: []) || [];
|
|
if (!channelsOrder.length) {
|
|
const unique = new Set();
|
|
buckets.forEach((bucket) => {
|
|
(bucket.channels || []).forEach((entry) => unique.add(entry.id));
|
|
});
|
|
channelsOrder = Array.from(unique);
|
|
}
|
|
channelsOrder = channelsOrder.slice(0, 6);
|
|
if (!channelsOrder.length) {
|
|
clearFrequency("No matches for this query.");
|
|
return;
|
|
}
|
|
|
|
const dateKeyFormat = d3.timeFormat("%Y-%m-%d");
|
|
const parsed = buckets
|
|
.map((bucket) => {
|
|
const parsedDate = d3.isoParse(bucket.date) || new Date(bucket.date);
|
|
if (!(parsedDate instanceof Date) || Number.isNaN(parsedDate.valueOf())) {
|
|
return null;
|
|
}
|
|
const counts = {};
|
|
(bucket.channels || []).forEach((entry) => {
|
|
if (channelsOrder.includes(entry.id)) {
|
|
counts[entry.id] = entry.count || 0;
|
|
}
|
|
});
|
|
return {
|
|
date: parsedDate,
|
|
dateKey: dateKeyFormat(parsedDate),
|
|
counts,
|
|
};
|
|
})
|
|
.filter(Boolean);
|
|
|
|
if (!parsed.length) {
|
|
clearFrequency("Timeline unavailable.");
|
|
return;
|
|
}
|
|
|
|
const margin = { top: 12, right: 12, bottom: 52, left: 56 };
|
|
const fullWidth = freqChart.clientWidth || 360;
|
|
const fullHeight = 220;
|
|
const width = fullWidth - margin.left - margin.right;
|
|
const height = fullHeight - margin.top - margin.bottom;
|
|
|
|
const svg = d3
|
|
.select(freqChart)
|
|
.append("svg")
|
|
.attr("width", fullWidth)
|
|
.attr("height", fullHeight);
|
|
|
|
const g = svg
|
|
.append("g")
|
|
.attr("transform", `translate(${margin.left},${margin.top})`);
|
|
|
|
const x = d3
|
|
.scaleBand()
|
|
.domain(parsed.map((entry) => entry.dateKey))
|
|
.range([0, width])
|
|
.padding(0.25);
|
|
|
|
const yMax = d3.max(parsed, (entry) =>
|
|
d3.sum(channelsOrder, (key) => entry.counts[key] || 0)
|
|
);
|
|
|
|
const y = d3
|
|
.scaleLinear()
|
|
.domain([0, yMax || 0])
|
|
.nice()
|
|
.range([height, 0]);
|
|
|
|
const tickValues =
|
|
parsed.length <= 6
|
|
? parsed.map((entry) => entry.dateKey)
|
|
: parsed
|
|
.filter((_, index, arr) => index % Math.ceil(arr.length / 6) === 0)
|
|
.map((entry) => entry.dateKey);
|
|
|
|
const xAxis = d3.axisBottom(x).tickValues(tickValues);
|
|
const yAxis = d3.axisLeft(y).ticks(5);
|
|
|
|
g.append("g")
|
|
.attr("class", "axis")
|
|
.attr("transform", `translate(0,${height})`)
|
|
.call(xAxis)
|
|
.selectAll("text")
|
|
.attr("text-anchor", "end")
|
|
.attr("transform", "rotate(-35)")
|
|
.attr("dx", "-0.8em")
|
|
.attr("dy", "0.15em");
|
|
|
|
g.append("g").attr("class", "axis").call(yAxis);
|
|
|
|
const stack = d3.stack().keys(channelsOrder).value((entry, key) => entry.counts[key] || 0);
|
|
const stacked = stack(parsed);
|
|
const color = d3.scaleOrdinal(channelsOrder, d3.schemeTableau10);
|
|
|
|
const layers = g
|
|
.selectAll(".freq-layer")
|
|
.data(stacked)
|
|
.enter()
|
|
.append("g")
|
|
.attr("class", "freq-layer")
|
|
.attr("fill", (d) => color(d.key));
|
|
|
|
layers
|
|
.selectAll("rect")
|
|
.data((d) => d)
|
|
.enter()
|
|
.append("rect")
|
|
.attr("x", (d) => x(d.data.dateKey))
|
|
.attr("width", x.bandwidth())
|
|
.attr("y", (d) => y(d[1]))
|
|
.attr("height", (d) => y(d[0]) - y(d[1]))
|
|
.append("title")
|
|
.text(function (d) {
|
|
const group = this.parentNode ? this.parentNode.parentNode : null;
|
|
const key = group ? d3.select(group).datum().key : undefined;
|
|
const label = key ? channelMap.get(key) || key : key || '';
|
|
return `${dateKeyFormat(d.data.date)}: ${d[1] - d[0]}${label ? " (" + label + ")" : ''}`;
|
|
});
|
|
|
|
const legend = document.createElement("div");
|
|
legend.className = "freq-legend";
|
|
channelsOrder.forEach((key) => {
|
|
const item = document.createElement("div");
|
|
item.className = "freq-legend-item";
|
|
const swatch = document.createElement("span");
|
|
swatch.className = "freq-legend-swatch";
|
|
swatch.style.backgroundColor = color(key);
|
|
const label = document.createElement("span");
|
|
label.textContent = channelMap.get(key) || key;
|
|
item.appendChild(swatch);
|
|
item.appendChild(label);
|
|
legend.appendChild(item);
|
|
});
|
|
freqChart.appendChild(legend);
|
|
}
|
|
|
|
async function updateFrequencyChart(term, channels, queryMode) {
|
|
if (!freqChart || typeof d3 === "undefined") {
|
|
return;
|
|
}
|
|
let trimmed = term.trim();
|
|
if (!trimmed) {
|
|
if (queryMode) {
|
|
trimmed = "*";
|
|
} else {
|
|
clearFrequency("Enter a query to see timeline.");
|
|
return;
|
|
}
|
|
}
|
|
|
|
const params = new URLSearchParams();
|
|
params.set("term", trimmed);
|
|
params.set("interval", "month");
|
|
(channels || []).forEach((id) => params.append("channel_id", id));
|
|
if (queryMode) {
|
|
params.set("query_string", "1");
|
|
}
|
|
|
|
clearFrequency("Loading timeline…");
|
|
try {
|
|
const res = await fetch(`/api/frequency?${params.toString()}`);
|
|
if (!res.ok) {
|
|
throw new Error(`Request failed with status ${res.status}`);
|
|
}
|
|
const payload = await res.json();
|
|
const total = payload.totalResults || 0;
|
|
if (freqSummary) {
|
|
if (total === 0) {
|
|
freqSummary.textContent = "No matches for this query.";
|
|
} else if (queryMode) {
|
|
freqSummary.textContent = `Matches: ${total.toLocaleString()} • Interval: ${payload.interval || "month"} (query-string)`;
|
|
} else {
|
|
freqSummary.textContent = `Matches: ${total.toLocaleString()} • Interval: ${payload.interval || "month"}`;
|
|
}
|
|
}
|
|
if (total === 0) {
|
|
freqChart.innerHTML = "";
|
|
return;
|
|
}
|
|
renderFrequencyChart(payload.buckets || [], payload.channels || []);
|
|
} catch (err) {
|
|
console.error(err);
|
|
clearFrequency("Timeline unavailable.");
|
|
}
|
|
}
|
|
|
|
function renderResults(payload, page) {
|
|
resultsDiv.innerHTML = "";
|
|
metaDiv.textContent = `Total: ${payload.totalResults} • Page ${
|
|
page + 1
|
|
} of ${payload.totalPages}`;
|
|
|
|
(payload.items || []).forEach((item) => {
|
|
const el = document.createElement("div");
|
|
el.className = "item";
|
|
const titleHtml =
|
|
item.titleHtml || escapeHtml(item.title || "Untitled");
|
|
const descriptionHtml =
|
|
item.descriptionHtml || escapeHtml(item.description || "");
|
|
|
|
const header = document.createElement("div");
|
|
const badges = [];
|
|
if (item.highlightSource && item.highlightSource.primary) badges.push('primary transcript');
|
|
if (item.highlightSource && item.highlightSource.secondary) badges.push('secondary transcript');
|
|
const badgeHtml = badges.length
|
|
? `<div class="badge-row">${badges
|
|
.map((b) => `<span class="badge">${escapeHtml(b)}</span>` )
|
|
.join('')}</div>`
|
|
: '';
|
|
header.innerHTML = `
|
|
<strong>${titleHtml}</strong>
|
|
<div class="muted">${escapeHtml(item.channel_name || "")} • ${fmtDate(
|
|
item.date
|
|
)}</div>
|
|
<div class="muted"><a href="${item.url}" target="_blank" rel="noopener">Open on YouTube</a></div>
|
|
${badgeHtml}
|
|
`;
|
|
el.appendChild(header);
|
|
|
|
if (descriptionHtml) {
|
|
const desc = document.createElement("div");
|
|
desc.className = "muted";
|
|
desc.innerHTML = descriptionHtml;
|
|
el.appendChild(desc);
|
|
}
|
|
|
|
if (Array.isArray(item.toHighlight) && item.toHighlight.length) {
|
|
const highlights = document.createElement("div");
|
|
highlights.className = "transcript highlight-list";
|
|
item.toHighlight.forEach((entry) => {
|
|
const html = typeof entry === "string" ? entry : entry?.html;
|
|
if (!html) return;
|
|
const row = document.createElement("div");
|
|
row.className = "highlight-row";
|
|
row.innerHTML = html;
|
|
highlights.appendChild(row);
|
|
});
|
|
if (highlights.childElementCount) {
|
|
el.appendChild(highlights);
|
|
}
|
|
}
|
|
|
|
resultsDiv.appendChild(el);
|
|
});
|
|
|
|
const pager = document.createElement("div");
|
|
pager.className = "pager";
|
|
const prev = document.createElement("button");
|
|
prev.textContent = "Prev";
|
|
prev.disabled = page <= 0;
|
|
const next = document.createElement("button");
|
|
next.textContent = "Next";
|
|
next.disabled = page + 1 >= payload.totalPages;
|
|
prev.onclick = () => runSearch(page - 1);
|
|
next.onclick = () => runSearch(page + 1);
|
|
pager.appendChild(prev);
|
|
pager.appendChild(next);
|
|
resultsDiv.appendChild(pager);
|
|
}
|
|
|
|
async function runSearch(pageOverride, pushState = true) {
|
|
const q = qInput.value.trim();
|
|
const channels = getSelectedChannels();
|
|
const sort = sortSel.value;
|
|
const size = parseInt(sizeSel.value, 10) || 10;
|
|
const queryMode = queryToggle && queryToggle.checked;
|
|
let exact = !!exactToggle.checked;
|
|
let fuzzy = !!fuzzyToggle.checked;
|
|
let phrase = !!phraseToggle.checked;
|
|
if (queryMode) {
|
|
exact = false;
|
|
fuzzy = false;
|
|
phrase = false;
|
|
} else {
|
|
previousToggleState = {
|
|
exact,
|
|
fuzzy,
|
|
phrase,
|
|
};
|
|
}
|
|
const page = pageOverride != null ? pageOverride : currentPage;
|
|
currentPage = page;
|
|
|
|
if (pushState) {
|
|
updateUrl(q, sort, channels, page, size, exact, fuzzy, phrase, queryMode);
|
|
}
|
|
|
|
const params = new URLSearchParams();
|
|
params.set("q", q);
|
|
params.set("sort", sort);
|
|
params.set("size", String(size));
|
|
params.set("page", String(page));
|
|
params.set("exact", exact ? "1" : "0");
|
|
params.set("fuzzy", fuzzy ? "1" : "0");
|
|
params.set("phrase", phrase ? "1" : "0");
|
|
params.set("query_string", queryMode ? "1" : "0");
|
|
channels.forEach((id) => params.append("channel_id", id));
|
|
|
|
const res = await fetch(`/api/search?${params.toString()}`);
|
|
const payload = await res.json();
|
|
renderResults(payload, page);
|
|
updateFrequencyChart(q, channels, queryMode);
|
|
}
|
|
|
|
searchBtn.addEventListener("click", () => runSearch(0));
|
|
qInput.addEventListener("keypress", (e) => {
|
|
if (e.key === "Enter") runSearch(0);
|
|
});
|
|
sortSel.addEventListener("change", () => runSearch(0));
|
|
sizeSel.addEventListener("change", () => runSearch(0));
|
|
exactToggle.addEventListener("change", () => { rememberToggleState(); runSearch(0); });
|
|
fuzzyToggle.addEventListener("change", () => { rememberToggleState(); runSearch(0); });
|
|
phraseToggle.addEventListener("change", () => { rememberToggleState(); runSearch(0); });
|
|
if (queryToggle) {
|
|
queryToggle.addEventListener("change", () => { applyQueryMode(); runSearch(0); });
|
|
}
|
|
|
|
window.addEventListener("popstate", () => {
|
|
qs = new URLSearchParams(window.location.search);
|
|
setFromQuery();
|
|
currentPage = parseInt(qs.get("page") || "0", 10) || 0;
|
|
runSearch(currentPage, false);
|
|
});
|
|
|
|
setFromQuery();
|
|
loadMetrics();
|
|
loadChannels().then(() => runSearch(currentPage));
|
|
})();
|
|
|
|
function escapeHtml(str) {
|
|
return (str || "").replace(/[&<>"']/g, (ch) => {
|
|
switch (ch) {
|
|
case "&":
|
|
return "&";
|
|
case "<":
|
|
return "<";
|
|
case ">":
|
|
return ">";
|
|
case '"':
|
|
return """;
|
|
case "'":
|
|
return "'";
|
|
default:
|
|
return ch;
|
|
}
|
|
});
|
|
}
|