/* global React, GOLA, PinContext, EvBars, ObjRail, AskMakerLab, RealClaimCard */
// =========================================================
// Insights tab — Path-B master/detail (à la "Findings — Room to Breathe").
// LEFT index: grouped by insight headline; each group lists the findings
// linked to that headline (curated in evidence-data.jsx).
// RIGHT reading panel: scrolls. Each insight's headline + description is a
// STICKY band that stays pinned while you scroll its findings. Every
// finding renders as a full page with the SAME chart + description
// used on the Findings tab (RealClaimCard).
// =========================================================
function rfIndex() {
const RF = window.REAL_FINDINGS;
if (!RF || !RF.CLAIMS) return {};
const idx = {};
RF.CLAIMS.forEach((f) => { idx[f.id] = f; });
return idx;
}
function InsightsLoop() {
const store = React.useContext(PinContext);
const insights = store.insights;
const RealCard = window.RealClaimCard;
const { study, bench } = window.useFindingsStudyBench();
const RF = React.useMemo(rfIndex, []);
// Resolve each insight → its linked findings / evidence.
const groups = React.useMemo(() => insights.map((ins) => {
if (ins.source === "user") {
const evCards = (ins.ev || []).map((id) => GOLA.EV_INDEX[id]).filter(Boolean);
return { ins, kind: "user", evCards };
}
const findings = (ins.findings || []).map((id) => RF[id]).filter(Boolean);
const exc = ins.findingsException && RF[ins.findingsException.id]
? { finding: RF[ins.findingsException.id], note: ins.findingsException.note }
: null;
const grp = ins.findingsGroup
? { label: ins.findingsGroup.label, sub: ins.findingsGroup.sub,
findings: ins.findingsGroup.ids.map((id) => RF[id]).filter(Boolean) }
: null;
return { ins, kind: "curated", findings, exc, grp, note: ins.findingsNote };
}), [insights, RF]);
// user insights first, then curated (matches the numbering on the cards)
const ordered = React.useMemo(() => {
const u = groups.filter((g) => g.ins.source === "user");
const c = groups.filter((g) => g.ins.source === "curated");
return [...u, ...c];
}, [groups]);
const numOf = {};
ordered.forEach((g, i) => { numOf[g.ins.id] = String(i + 1).padStart(2, "0"); });
// key -> finding object, so the chat can follow the scrolled finding
const keyToFinding = {};
ordered.forEach((g) => {
if (g.kind === "curated") {
g.findings.forEach((f) => { keyToFinding[g.ins.id + "::" + f.id] = f; });
if (g.exc) keyToFinding[g.ins.id + "::exc"] = g.exc.finding;
}
});
const sectionRefs = React.useRef({});
const findingRefs = React.useRef({});
const readRef = React.useRef(null);
const mlRef = React.useRef(null);
const [activeKey, setActiveKey] = React.useState(null);
const [activeIns, setActiveIns] = React.useState(ordered[0] ? ordered[0].ins.id : null);
function stickyH(insId) {
const sec = sectionRefs.current[insId];
const h = sec && sec.querySelector(".gl-bx-sticky");
return h ? h.offsetHeight : 130;
}
function scrollToFinding(insId, key) {
const el = findingRefs.current[key];
const sc = readRef.current;
if (!el || !sc) return;
const top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top
+ sc.scrollTop - stickyH(insId) - 16;
sc.scrollTo({ top, behavior: "smooth" });
setActiveKey(key); setActiveIns(insId);
}
function scrollToSection(insId) {
const el = sectionRefs.current[insId];
const sc = readRef.current;
if (!el || !sc) return;
const top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 6;
sc.scrollTo({ top, behavior: "smooth" });
setActiveIns(insId); setActiveKey(null);
}
// scroll-spy via IntersectionObserver (fires on any scroll, height-robust):
// a thin "active line" ~30% down the reading panel selects the section +
// finding currently under the sticky head.
React.useEffect(() => {
const sc = readRef.current;
if (!sc) return;
const finds = new Map();
const secs = new Map();
const apply = () => {
let topSec = null, topSecY = -Infinity;
secs.forEach((y, id) => { if (y > topSecY) { topSecY = y; topSec = id; } });
let topFind = null, topFindY = -Infinity;
finds.forEach((y, key) => {
if (topSec && key.indexOf(topSec + "::") !== 0) return;
if (y > topFindY) { topFindY = y; topFind = key; }
});
if (topSec) setActiveIns(topSec);
setActiveKey(topFind);
};
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
const k = e.target.getAttribute("data-spy");
const s = e.target.getAttribute("data-spysec");
if (k != null) { e.isIntersecting ? finds.set(k, e.boundingClientRect.top) : finds.delete(k); }
if (s != null) { e.isIntersecting ? secs.set(s, e.boundingClientRect.top) : secs.delete(s); }
});
apply();
}, { root: sc, rootMargin: "-20% 0px -60% 0px", threshold: 0 });
Object.values(sectionRefs.current).forEach((el) => el && io.observe(el));
Object.values(findingRefs.current).forEach((el) => el && io.observe(el));
return () => io.disconnect();
}, [ordered]);
// focus an insight from the pin toast
React.useEffect(() => {
if (!store.focusInsight) return;
const id = store.focusInsight;
const t = setTimeout(() => { scrollToSection(id); store.setFocusInsight(null); }, 90);
return () => clearTimeout(t);
}, [store.focusInsight]);
const linkCount = (g) => g.kind === "curated"
? g.findings.length + (g.exc ? 1 : 0) + (g.grp ? 1 : 0)
: g.evCards.length;
const totalLinks = ordered.reduce((s, g) => s + linkCount(g), 0);
return (
{/* ---------- Left index ---------- */}
{ordered.map((g) => (
scrollToSection(g.ins.id)}
>
{numOf[g.ins.id]}
{g.ins.source === "user" ? (g.ins.title || (g.ins.drafting ? "Drafting…" : "Untitled")) : (g.ins.nav || g.ins.title)}
{g.kind === "curated" ? (
{g.findings.map((f) => {
const key = g.ins.id + "::" + f.id;
return (
scrollToFinding(g.ins.id, key)}>
{f.statement}
{ e.stopPropagation(); scrollToFinding(g.ins.id, key); mlRef.current && mlRef.current.openWith(f); }}>
);
})}
{g.exc && (() => {
const key = g.ins.id + "::exc";
return (
scrollToFinding(g.ins.id, key)}>
EXC
{g.exc.finding.statement}
{ e.stopPropagation(); scrollToFinding(g.ins.id, key); mlRef.current && mlRef.current.openWith(g.exc.finding); }}>
);
})()}
{g.grp && (() => {
const key = g.ins.id + "::grp";
return (
scrollToFinding(g.ins.id, key)}>
{g.grp.label} · {g.grp.findings.length}
);
})()}
{g.findings.length === 0 && !g.exc && !g.grp && (
No linked findings
)}
) : (
g.evCards.length ? g.evCards.map((c) => {
const key = g.ins.id + "::" + c.id;
return (
scrollToFinding(g.ins.id, key)}>
{c.title}
);
}) :
No evidence pinned
)}
))}
{/* ---------- Reading panel ---------- */}
{ordered.map((g) => (
{ sectionRefs.current[g.ins.id] = el; }}>
{g.ins.action && (
Recommendation
{g.ins.action}
)}
{g.kind === "curated" ? (
{g.findings.map((f) => (
{ findingRefs.current[g.ins.id + "::" + f.id] = el; }}>
))}
{g.exc && (
{ findingRefs.current[g.ins.id + "::exc"] = el; }}>
Exception · qualifies the headline
{g.exc.note}
{ findingRefs.current[g.ins.id + "::grp"] = el; }}>
)}
{g.note && (
No linked findings in this batch
{g.note}
)}
) : (
)}
))}
End · {ordered.length} insight{ordered.length === 1 ? "" : "s"}
{num}
{isUser ? "✦ Yours" : "Published"}
{ins.objs && ins.objs.length > 0 && (
{ins.objs.map((o) => O{o} )}
)}
{isUser && !ins.drafting && (
store.publishInsight(ins.id)} title="Publish into the curated set">
)}
{ins.tagline &&
{ins.tagline}
}
);
}
// ---- Collapsed "consistent across segments" group ----
function ConsistentGroup({ group }) {
const [open, setOpen] = React.useState(false);
return (
setOpen((o) => !o)}>
▸
{group.label}
{group.findings.length} findings
{group.sub &&
{group.sub}
}
{open && (
{group.findings.map((f) => (
{f.statement}
{f.metricVal}
))}
)}
);
}
// ---- User-built insight: pinned evidence pages + optional synthesis ----
function UserInsightBody({ g, store, findingRefs }) {
const ins = g.ins;
return (
{g.evCards.length === 0 ? (
No evidence pinned yet — add cuts from the Evidence tab.
) : g.evCards.map((c) => (
{ findingRefs.current[ins.id + "::" + c.id] = el; }}>
store.removeEvidence(ins.id, c.id)} expanded />
))}
{ins.structured && ins.structure && (
Resolution
{ins.structure.resolution}
{ins.structure.args.map((a) =>
)}
)}
);
}
// ---- Headline editor (contentEditable, saves on blur) ----
function Headline({ insight, store }) {
if (insight.drafting) {
return (
✦ Drafting headline from your evidence…
);
}
return (
store.setHeadline(insight.id, e.currentTarget.textContent.trim())}
>{insight.title || "Write a headline…"}
);
}
// ---- Collapsible argument (groups findings) ----
function Argument({ arg, store }) {
const [open, setOpen] = React.useState(true);
return (
setOpen((o) => !o)}>
▸
{arg.id}
{arg.summary}
{arg.findings.length} {arg.findings.length === 1 ? "finding" : "findings"}
{open && (
{arg.findings.map((f) => (
{f.text}
{f.ev.map((e) => (
e.card
?
:
{e.id}
))}
))}
)}
);
}
// ---- Insights-tab Ask MakerLab presets — framed for the brand-side people
// who act on these (merchants, designers, marketers), not researchers. ----
const INSIGHT_PRESETS = [
{ q: "Which styles should anchor each account's buy?",
answer: "Lead every account with the same five — Hawk Twill, Championship, Sprinter Reflect, Delta Tonal and Elan. They land top-five with Anthropologie, Free People and department-store shoppers alike (the leader only moves about 4 points across accounts), so you can merchandise one core line everywhere and use the open slots for account-specific flavor.",
confidence: "High", sources: ["Product ratings × retailer", "Overall sentiment ranking"] },
{ q: "What should I brief design to focus on for FW26?",
answer: "Materialization, not new shapes. The same silhouette swings 12–19 points on its upper alone — Hawk in twill beats standard Hawk by 19 points, and mesh or heavy quilt consistently drags. Put development hours into fabric and upper treatment on the franchises you already have rather than briefing brand-new silhouettes.",
confidence: "High", sources: ["Within-franchise ratings", "Product feedback"] },
{ q: "What message should marketing lead with?",
answer: "Wardrobe-building, not durability. 59% buy for the design or to add a new style (only 16% to replace), 82% already own three or more pairs, and 80% wear them daily or weekly. Talk to shoppers like these are fashion pieces — that's what supports the premium price, not 'they last longer.'",
confidence: "High", sources: ["Purchase reason", "Wear frequency", "Pairs owned"] },
{ q: "Do we need a separate range for aspirational shoppers?",
answer: "No. The aspirational segment is half your sample and its top-five is identical to everyone else's — just +1 to +4 points higher on the same styles. Don't brief a separate line; the lift comes from shelf presence and visual merch at the premium retailers, so invest there instead.",
confidence: "Moderate", sources: ["Aspirational segment vs overall", "Retailer overlap"] },
];
function handleInsightAsk(preset) {
if (preset.free) {
return {
text: "Reading it against everything pinned, the most useful day-to-day takeaway is materialization: the same shape wins or loses on its upper, swinging sentiment 12–19 points. So when you're choosing what to push, get the fabric and upper right on the cores you already have before chasing new silhouettes.",
confidence: "Moderate", sources: ["Within-franchise ratings"],
};
}
return { text: preset.answer, confidence: preset.confidence, sources: preset.sources };
}
function famLabel(key) {
const f = GOLA.FAMILIES.find((x) => x.key === key);
return f ? f.title.replace(" comparison", "").replace(" drill-down", "").toUpperCase() : key.toUpperCase();
}
// ---- Reusable inline-expandable evidence row (shows the chart in place) ----
function EvBox({ card, store, onRemove, expanded }) {
const [open, setOpen] = React.useState(!!expanded);
const isHidden = store.hidden.includes(card.id);
return (
setOpen((o) => !o)}>
▸
{card.title}
{isHidden &&
Hidden from external }
{ e.stopPropagation(); isHidden ? store.unhide(card.id) : store.hide(card.id); }}
title={isHidden ? "Hidden from external viewers — click to show" : "Hide this data from external viewers"}
>
{isHidden
?
{isHidden ? "Hidden" : "Hide"}
{onRemove && (
{ e.stopPropagation(); onRemove(); }}
title="Remove from this insight"
aria-label="Remove from this insight"
>×
)}
{open && (
{card.q}
n = {card.n.toLocaleString()}
)}
);
}
window.InsightsLoop = InsightsLoop;
window.ConsistentGroup = ConsistentGroup;