mirror of
https://github.com/samsonjs/spirit-tracker.git
synced 2026-03-25 09:25:51 +00:00
feat: SKU Linking tool
This commit is contained in:
Brennan Wilkes (Text Groove)
parent
d2c06af432
commit
fdc0091689
3 changed files with 363 additions and 6 deletions
294
viz/app.js
294
viz/app.js
|
|
@ -4,6 +4,7 @@
|
|||
* Hash routes:
|
||||
* #/ search
|
||||
* #/item/<sku> detail
|
||||
* #/link sku linker (local-write only)
|
||||
*/
|
||||
|
||||
const $app = document.getElementById("app");
|
||||
|
|
@ -71,8 +72,6 @@ function displaySku(key) {
|
|||
return String(key || "").startsWith("u:") ? "unknown" : String(key || "");
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Normalize for search: lowercase, punctuation -> space, collapse spaces
|
||||
function normSearchText(s) {
|
||||
return String(s ?? "")
|
||||
|
|
@ -116,6 +115,7 @@ function route() {
|
|||
const parts = h.replace(/^#\/?/, "").split("/").filter(Boolean);
|
||||
if (parts.length === 0) return renderSearch();
|
||||
if (parts[0] === "item" && parts[1]) return renderItem(decodeURIComponent(parts[1]));
|
||||
if (parts[0] === "link") return renderSkuLinker();
|
||||
return renderSearch();
|
||||
}
|
||||
|
||||
|
|
@ -167,7 +167,6 @@ function aggregateBySku(listings) {
|
|||
const bySku = new Map();
|
||||
|
||||
for (const r of listings) {
|
||||
|
||||
const sku = keySkuForRow(r);
|
||||
|
||||
const name = String(r?.name || "");
|
||||
|
|
@ -276,8 +275,11 @@ function renderSearch() {
|
|||
$app.innerHTML = `
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="h1">Spirit Tracker Viz</h1>
|
||||
<div class="small">Search name / url / sku (word AND)</div>
|
||||
<div>
|
||||
<h1 class="h1">Spirit Tracker Viz</h1>
|
||||
<div class="small">Search name / url / sku (word AND)</div>
|
||||
</div>
|
||||
<a class="btn" href="#/link" style="text-decoration:none;">Link SKUs</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
|
@ -470,6 +472,287 @@ function renderSearch() {
|
|||
});
|
||||
}
|
||||
|
||||
/* ---------------- SKU Linker ---------------- */
|
||||
|
||||
function isLocalWriteMode() {
|
||||
const h = String(location.hostname || "").toLowerCase();
|
||||
return (location.protocol === "http:" || location.protocol === "https:") && (h === "127.0.0.1" || h === "localhost");
|
||||
}
|
||||
|
||||
function levenshtein(a, b) {
|
||||
a = String(a || "");
|
||||
b = String(b || "");
|
||||
const n = a.length, m = b.length;
|
||||
if (!n) return m;
|
||||
if (!m) return n;
|
||||
const dp = new Array(m + 1);
|
||||
for (let j = 0; j <= m; j++) dp[j] = j;
|
||||
|
||||
for (let i = 1; i <= n; i++) {
|
||||
let prev = dp[0];
|
||||
dp[0] = i;
|
||||
const ca = a.charCodeAt(i - 1);
|
||||
for (let j = 1; j <= m; j++) {
|
||||
const tmp = dp[j];
|
||||
const cost = ca === b.charCodeAt(j - 1) ? 0 : 1;
|
||||
dp[j] = Math.min(dp[j] + 1, dp[j - 1] + 1, prev + cost);
|
||||
prev = tmp;
|
||||
}
|
||||
}
|
||||
return dp[m];
|
||||
}
|
||||
|
||||
function similarityScore(aName, bName) {
|
||||
const a = normSearchText(aName);
|
||||
const b = normSearchText(bName);
|
||||
if (!a || !b) return 0;
|
||||
|
||||
const A = new Set(tokenizeQuery(a));
|
||||
const B = new Set(tokenizeQuery(b));
|
||||
let inter = 0;
|
||||
for (const w of A) if (B.has(w)) inter++;
|
||||
const denom = Math.max(1, Math.max(A.size, B.size));
|
||||
const overlap = inter / denom; // 0..1
|
||||
|
||||
const d = levenshtein(a, b);
|
||||
const maxLen = Math.max(1, Math.max(a.length, b.length));
|
||||
const levSim = 1 - d / maxLen; // ~0..1
|
||||
|
||||
return overlap * 2.2 + levSim * 1.0;
|
||||
}
|
||||
|
||||
function isBCStoreLabel(label) {
|
||||
const s = String(label || "").toLowerCase();
|
||||
return s.includes("bcl") || s.includes("strath");
|
||||
}
|
||||
|
||||
// infer BC-ness by checking any row for that skuKey in current index
|
||||
function skuIsBC(allRows, skuKey) {
|
||||
for (const r of allRows) {
|
||||
if (keySkuForRow(r) !== skuKey) continue;
|
||||
const lab = String(r.storeLabel || r.store || "");
|
||||
if (isBCStoreLabel(lab)) return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function topSuggestions(allAgg, limit) {
|
||||
const scored = allAgg.map((it) => {
|
||||
const stores = it.stores ? it.stores.size : 0;
|
||||
const hasPrice = it.cheapestPriceNum !== null ? 1 : 0;
|
||||
const hasName = it.name ? 1 : 0;
|
||||
return { it, s: stores * 2 + hasPrice * 1.2 + hasName * 1.0 };
|
||||
});
|
||||
scored.sort((a, b) => b.s - a.s);
|
||||
return scored.slice(0, limit).map((x) => x.it);
|
||||
}
|
||||
|
||||
function recommendSimilar(allAgg, pinned, limit) {
|
||||
if (!pinned || !pinned.name) return topSuggestions(allAgg, limit);
|
||||
const base = String(pinned.name || "");
|
||||
const scored = [];
|
||||
for (const it of allAgg) {
|
||||
if (!it || it.sku === pinned.sku) continue;
|
||||
const s = similarityScore(base, it.name || "");
|
||||
if (s > 0) scored.push({ it, s });
|
||||
}
|
||||
scored.sort((a, b) => b.s - a.s);
|
||||
return scored.slice(0, limit).map((x) => x.it);
|
||||
}
|
||||
|
||||
async function apiWriteSkuLink(fromSku, toSku) {
|
||||
const res = await fetch("/__stviz/sku-links", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({ fromSku, toSku }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
return await res.json();
|
||||
}
|
||||
|
||||
async function renderSkuLinker() {
|
||||
destroyChart();
|
||||
|
||||
const localWrite = isLocalWriteMode();
|
||||
|
||||
$app.innerHTML = `
|
||||
<div class="container" style="max-width:1200px;">
|
||||
<div class="topbar">
|
||||
<button id="back" class="btn">← Back</button>
|
||||
<div style="flex:1"></div>
|
||||
<span class="badge">SKU Linker</span>
|
||||
<span class="badge mono">${esc(localWrite ? "LOCAL WRITE" : "READ-ONLY")}</span>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding:14px;">
|
||||
<div class="small" style="margin-bottom:10px;">
|
||||
Search or pin items in each column. With both pinned, LINK SKU writes to viz/data/sku_links.json (local only).
|
||||
</div>
|
||||
|
||||
<div style="display:flex; gap:16px;">
|
||||
<div style="flex:1; min-width:0;">
|
||||
<div class="small" style="margin-bottom:6px;">Left</div>
|
||||
<input id="qL" class="input" placeholder="Search (name / url / sku)..." autocomplete="off" />
|
||||
<div id="listL" class="list" style="margin-top:10px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="flex:1; min-width:0;">
|
||||
<div class="small" style="margin-bottom:6px;">Right</div>
|
||||
<input id="qR" class="input" placeholder="Search (name / url / sku)..." autocomplete="off" />
|
||||
<div id="listR" class="list" style="margin-top:10px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card linkBar" style="padding:10px;">
|
||||
<button id="linkBtn" class="btn" style="width:100%;" disabled>LINK SKU</button>
|
||||
<div id="status" class="small" style="margin-top:8px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById("back").addEventListener("click", () => (location.hash = "#/"));
|
||||
|
||||
const $qL = document.getElementById("qL");
|
||||
const $qR = document.getElementById("qR");
|
||||
const $listL = document.getElementById("listL");
|
||||
const $listR = document.getElementById("listR");
|
||||
const $linkBtn = document.getElementById("linkBtn");
|
||||
const $status = document.getElementById("status");
|
||||
|
||||
$listL.innerHTML = `<div class="small">Loading index…</div>`;
|
||||
$listR.innerHTML = `<div class="small">Loading index…</div>`;
|
||||
|
||||
const idx = await loadIndex();
|
||||
const allRows = Array.isArray(idx.items) ? idx.items : [];
|
||||
const allAgg = aggregateBySku(allRows);
|
||||
|
||||
let pinnedL = null;
|
||||
let pinnedR = null;
|
||||
|
||||
function renderCard(it, pinned) {
|
||||
const storeCount = it.stores.size || 0;
|
||||
const plus = storeCount > 1 ? ` +${storeCount - 1}` : "";
|
||||
const price = it.cheapestPriceStr ? it.cheapestPriceStr : "(no price)";
|
||||
const store = it.cheapestStoreLabel || ([...it.stores][0] || "Store");
|
||||
return `
|
||||
<div class="item ${pinned ? "pinnedItem" : ""}" data-sku="${esc(it.sku)}">
|
||||
<div class="itemRow">
|
||||
<div class="thumbBox">${renderThumbHtml(it.img)}</div>
|
||||
<div class="itemBody">
|
||||
<div class="itemTop">
|
||||
<div class="itemName">${esc(it.name || "(no name)")}</div>
|
||||
<span class="badge mono">${esc(displaySku(it.sku))}</span>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="mono">${esc(price)}</span>
|
||||
<span class="badge">${esc(store)}${esc(plus)}</span>
|
||||
</div>
|
||||
<div class="meta"><span class="mono">${esc(it.sampleUrl || "")}</span></div>
|
||||
${pinned ? `<div class="small">Pinned (click again to unpin)</div>` : ``}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function sideItems(query, otherPinned) {
|
||||
const tokens = tokenizeQuery(query);
|
||||
if (tokens.length) return allAgg.filter((it) => matchesAllTokens(it.searchText, tokens)).slice(0, 80);
|
||||
if (otherPinned) return recommendSimilar(allAgg, otherPinned, 60);
|
||||
return topSuggestions(allAgg, 60);
|
||||
}
|
||||
|
||||
function attachHandlers($root, side) {
|
||||
for (const el of Array.from($root.querySelectorAll(".item"))) {
|
||||
el.addEventListener("click", () => {
|
||||
const skuKey = el.getAttribute("data-sku") || "";
|
||||
const it = allAgg.find((x) => String(x.sku || "") === skuKey);
|
||||
if (!it) return;
|
||||
|
||||
if (side === "L") pinnedL = pinnedL && pinnedL.sku === it.sku ? null : it;
|
||||
else pinnedR = pinnedR && pinnedR.sku === it.sku ? null : it;
|
||||
|
||||
updateAll();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function renderSide(side) {
|
||||
const pinned = side === "L" ? pinnedL : pinnedR;
|
||||
const other = side === "L" ? pinnedR : pinnedL;
|
||||
const query = side === "L" ? $qL.value : $qR.value;
|
||||
const $list = side === "L" ? $listL : $listR;
|
||||
|
||||
if (pinned) {
|
||||
$list.innerHTML = renderCard(pinned, true);
|
||||
attachHandlers($list, side);
|
||||
return;
|
||||
}
|
||||
|
||||
const items = sideItems(query, other);
|
||||
$list.innerHTML = items.length ? items.map((it) => renderCard(it, false)).join("") : `<div class="small">No matches.</div>`;
|
||||
attachHandlers($list, side);
|
||||
}
|
||||
|
||||
function updateButton() {
|
||||
if (!localWrite) {
|
||||
$linkBtn.disabled = true;
|
||||
$status.textContent = "Write disabled on GitHub Pages. Use: node viz/serve.js and open 127.0.0.1.";
|
||||
return;
|
||||
}
|
||||
if (!(pinnedL && pinnedR)) {
|
||||
$linkBtn.disabled = true;
|
||||
$status.textContent = "Pin one item on each side to enable linking.";
|
||||
return;
|
||||
}
|
||||
$linkBtn.disabled = false;
|
||||
$status.textContent = "";
|
||||
}
|
||||
|
||||
function updateAll() {
|
||||
renderSide("L");
|
||||
renderSide("R");
|
||||
updateButton();
|
||||
}
|
||||
|
||||
let tL = null, tR = null;
|
||||
$qL.addEventListener("input", () => {
|
||||
if (tL) clearTimeout(tL);
|
||||
tL = setTimeout(updateAll, 50);
|
||||
});
|
||||
$qR.addEventListener("input", () => {
|
||||
if (tR) clearTimeout(tR);
|
||||
tR = setTimeout(updateAll, 50);
|
||||
});
|
||||
|
||||
$linkBtn.addEventListener("click", async () => {
|
||||
if (!(pinnedL && pinnedR) || !localWrite) return;
|
||||
|
||||
const a = String(pinnedL.sku || "");
|
||||
const b = String(pinnedR.sku || "");
|
||||
|
||||
// Direction: if either is BC-based (BCL/Strath appears), FROM is BC sku.
|
||||
const aBC = skuIsBC(allRows, a);
|
||||
const bBC = skuIsBC(allRows, b);
|
||||
|
||||
let fromSku = a, toSku = b;
|
||||
if (aBC && !bBC) { fromSku = a; toSku = b; }
|
||||
else if (bBC && !aBC) { fromSku = b; toSku = a; }
|
||||
|
||||
$status.textContent = `Writing: ${displaySku(fromSku)} → ${displaySku(toSku)} …`;
|
||||
|
||||
try {
|
||||
const out = await apiWriteSkuLink(fromSku, toSku);
|
||||
$status.textContent = `Saved: ${displaySku(fromSku)} → ${displaySku(toSku)} (links=${out.count}).`;
|
||||
} catch (e) {
|
||||
$status.textContent = `Write failed: ${String(e && e.message ? e.message : e)}`;
|
||||
}
|
||||
});
|
||||
|
||||
updateAll();
|
||||
}
|
||||
|
||||
/* ---------------- Detail (chart) ---------------- */
|
||||
|
||||
let CHART = null;
|
||||
|
|
@ -526,7 +809,6 @@ function findItemBySkuInDb(obj, skuKey, dbFile, storeLabel) {
|
|||
return null;
|
||||
}
|
||||
|
||||
|
||||
function computeSuggestedY(values) {
|
||||
const nums = values.filter((v) => Number.isFinite(v));
|
||||
if (!nums.length) return { suggestedMin: undefined, suggestedMax: undefined };
|
||||
|
|
|
|||
63
viz/serve.js
63
viz/serve.js
|
|
@ -26,8 +26,70 @@ function safePath(urlPath) {
|
|||
return norm;
|
||||
}
|
||||
|
||||
const LINKS_FILE = path.join(root, "data", "sku_links.json");
|
||||
|
||||
function readLinks() {
|
||||
try {
|
||||
const raw = fs.readFileSync(LINKS_FILE, "utf8");
|
||||
const obj = JSON.parse(raw);
|
||||
if (obj && Array.isArray(obj.links)) return obj;
|
||||
} catch {}
|
||||
return { generatedAt: new Date().toISOString(), links: [] };
|
||||
}
|
||||
|
||||
function writeLinks(obj) {
|
||||
obj.generatedAt = new Date().toISOString();
|
||||
fs.mkdirSync(path.dirname(LINKS_FILE), { recursive: true });
|
||||
fs.writeFileSync(LINKS_FILE, JSON.stringify(obj, null, 2) + "\n", "utf8");
|
||||
}
|
||||
|
||||
function send(res, code, body, headers) {
|
||||
res.writeHead(code, { "Content-Type": "text/plain; charset=utf-8", ...(headers || {}) });
|
||||
res.end(body);
|
||||
}
|
||||
|
||||
function sendJson(res, code, obj) {
|
||||
res.writeHead(code, { "Content-Type": "application/json; charset=utf-8" });
|
||||
res.end(JSON.stringify(obj));
|
||||
}
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
const u = req.url || "/";
|
||||
const url = new URL(u, "http://127.0.0.1");
|
||||
|
||||
// Local-only API: append / read links file (this server only runs locally)
|
||||
if (url.pathname === "/__stviz/sku-links") {
|
||||
if (req.method === "GET") {
|
||||
const obj = readLinks();
|
||||
return sendJson(res, 200, { ok: true, count: obj.links.length, links: obj.links });
|
||||
}
|
||||
|
||||
if (req.method === "POST") {
|
||||
let body = "";
|
||||
req.on("data", (c) => (body += c));
|
||||
req.on("end", () => {
|
||||
try {
|
||||
const inp = JSON.parse(body || "{}");
|
||||
const fromSku = String(inp.fromSku || "").trim();
|
||||
const toSku = String(inp.toSku || "").trim();
|
||||
if (!fromSku || !toSku) return sendJson(res, 400, { ok: false, error: "fromSku/toSku required" });
|
||||
|
||||
const obj = readLinks();
|
||||
obj.links.push({ fromSku, toSku, createdAt: new Date().toISOString() });
|
||||
writeLinks(obj);
|
||||
|
||||
return sendJson(res, 200, { ok: true, count: obj.links.length, file: "viz/data/sku_links.json" });
|
||||
} catch (e) {
|
||||
return sendJson(res, 400, { ok: false, error: String(e && e.message ? e.message : e) });
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
return send(res, 405, "Method Not Allowed");
|
||||
}
|
||||
|
||||
// Static
|
||||
let file = safePath(u === "/" ? "/index.html" : u);
|
||||
if (!file) {
|
||||
res.writeHead(400);
|
||||
|
|
@ -54,4 +116,5 @@ const server = http.createServer((req, res) => {
|
|||
const port = Number(process.env.PORT || 8080);
|
||||
server.listen(port, "127.0.0.1", () => {
|
||||
process.stdout.write(`Serving ${root} on http://127.0.0.1:${port}\n`);
|
||||
process.stdout.write(`SKU links file: ${LINKS_FILE}\n`);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -238,3 +238,15 @@ a:hover { text-decoration: underline; }
|
|||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* --- SKU linker additions --- */
|
||||
.pinnedItem {
|
||||
outline: 2px solid #37566b;
|
||||
border-color: #37566b;
|
||||
}
|
||||
|
||||
.linkBar {
|
||||
margin-top: 12px;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue