/* global React, StudyData */ // ========================================================= // Raw Results view — real data from study.json // Left rail: Sections (Survey insights stubs + Raw results subsections) // Center: question cards OR product carousel depending on section // Right: filter panel (real cross-tabs on per-respondent data) // ========================================================= // ---- Sneaker silhouette family color mapping ---- const FAMILY_COLORS = { Hawk: { bg: "#E8D9C4", fg: "#5A3F2B", abbrev: "HK" }, Sprinter: { bg: "#D6E2D4", fg: "#3D5A3A", abbrev: "SP" }, Delta: { bg: "#E8DCDC", fg: "#7A3F3F", abbrev: "DE" }, Elan: { bg: "#DDD8E6", fg: "#4A3F6E", abbrev: "EL" }, Amera: { bg: "#E6E0CF", fg: "#6E5A2E", abbrev: "AM" }, Viper: { bg: "#CFD8DE", fg: "#2F4A5C", abbrev: "VI" }, Trakstar: { bg: "#E5D6CF", fg: "#7A4A35", abbrev: "TK" }, Championship:{ bg: "#D8DBE0", fg: "#3A4456", abbrev: "CH" }, Celestra: { bg: "#E0D6E0", fg: "#5A3F6E", abbrev: "CE" }, Clora: { bg: "#E6D7DA", fg: "#7A3F4C", abbrev: "CL" }, Badminton: { bg: "#D8E0D2", fg: "#3F5A35", abbrev: "BD" }, default: { bg: "#E0E0E0", fg: "#444", abbrev: "??" }, }; function productFamily(title) { const first = (title || "").split(" ")[0]; return FAMILY_COLORS[first] || FAMILY_COLORS.default; } // ---- Section definitions (left rail) ---- const SURVEY_INSIGHTS_STUBS = [ { id: "sentiment", label: "Consumer sentiment", ti: "heart", icon: "♡", stub: "AI-summarized sentiment across the panel — what consumers feel, in their own words." }, { id: "efficiency", label: "Line efficiency", ti: "chart-line", icon: "↗", stub: "Which products in the line earn their slot vs cannibalize each other — coming soon." }, { id: "head", label: "Head to head", ti: "circles-relation", icon: "⇄", stub: "Compare any two products side-by-side across every question — coming soon." }, { id: "buckets", label: "Buckets", ti: "stack-2", icon: "☰", stub: "Group products into go / hold / kill buckets based on signal — coming soon." }, ]; // ---- Active study config (filter facets + demo question split). ---- // Defaults reproduce the Gola study exactly; the app overrides via // window.ACTIVE_STUDY_CFG for other studies. function activeCfg() { return (typeof window !== "undefined" && window.ACTIVE_STUDY_CFG) || { demoQuestionIds: ["q19", "q20"], demoFacets: [ { field: "age", label: "Age" }, { field: "gender", label: "Gender" }, { field: "country", label: "Country", limit: 6 }, ], answerFacets: [], }; } // ---- Main component ---- function RawResultsView() { const [loaded, setLoaded] = React.useState(false); const [data, setData] = React.useState(null); const [activeSection, setActiveSection] = React.useState({ kind: "survey", id: "main" }); const [filtersOpen, setFiltersOpen] = React.useState(true); const [filters, setFilters] = React.useState({ demo: {}, answers: {} }); const [sortMode, setSortMode] = React.useState({}); const [traceNote, setTraceNote] = React.useState(null); const [productTarget, setProductTarget] = React.useState(null); const store = React.useContext(window.PinContext); React.useEffect(() => { StudyData.load().then((d) => { setData(d); setLoaded(true); }); }, []); // ---- Apply a deep link from a Findings card (question + filter) ---- const intent = store && store.dataIntent; React.useEffect(() => { if (!loaded || !intent) return; if (intent.section === "sentiment") { setActiveSection({ kind: "stub", id: "sentiment" }); } else if (intent.section === "product") { setActiveSection({ kind: "product", id: "product" }); setProductTarget({ productId: intent.productId, pqTitle: intent.pqTitle, key: Date.now() }); } else if (intent.section === "question") { const demoIds = (window.ACTIVE_STUDY_CFG && window.ACTIVE_STUDY_CFG.demoQuestionIds) || ["q19", "q20"]; const isDemo = demoIds.indexOf(intent.qid) >= 0; setActiveSection({ kind: isDemo ? "demo" : "survey", id: isDemo ? "demo" : "main" }); } if (intent.filter) { const fresh = { demo: {}, answers: {} }; Object.entries(intent.filter.demo || {}).forEach(([k, v]) => { fresh.demo[k] = new Set(v); }); Object.entries(intent.filter.answers || {}).forEach(([k, v]) => { fresh.answers[k] = new Set(v); }); setFilters(fresh); setFiltersOpen(true); } else { setFilters({ demo: {}, answers: {} }); } setTraceNote({ statement: intent.statement, sourceLabel: intent.sourceLabel, cutLabel: intent.cutLabel, fromId: intent.fromId, }); let n = 0; const tick = () => { const parent = document.querySelector("[data-rr-scroll]"); if (!parent) return; if (intent.section === "question") { const el = document.getElementById("rr-q-" + intent.qid); if (el && el.getBoundingClientRect().height > 0) { const top = el.getBoundingClientRect().top - parent.getBoundingClientRect().top + parent.scrollTop - 14; parent.scrollTo({ top, behavior: n === 0 ? "auto" : "smooth" }); } } else if (n === 0) { parent.scrollTo({ top: 0 }); } n += 1; if (n < 9) setTimeout(tick, 140); }; setTimeout(tick, 100); store.setDataIntent(null); }, [loaded, intent]); if (!loaded) { return
Loading study data…
; } // ----- Compute filtered respondents ----- const filtered = StudyData.filterRespondents(filters); const totalShown = filtered.length; const totalAll = data.respondents.length; const filterCount = Object.values(filters.demo).reduce((n, s) => n + s.size, 0) + Object.values(filters.answers).reduce((n, s) => n + s.size, 0); // ----- Section definitions (derived from real data) ----- const cfg = activeCfg(); const demoIds = cfg.demoQuestionIds || ["q19", "q20"]; const mainQuestions = data.questions.filter((q) => demoIds.indexOf(q.id) < 0); const demoQuestions = data.questions.filter((q) => demoIds.indexOf(q.id) >= 0); const rawSections = [ { id: "main", label: "Survey questions", count: mainQuestions.length, kind: "questions", questions: mainQuestions }, { id: "product", label: "Product Section", count: (data.product_questions || []).length, kind: "product", pqs: data.product_questions || [] }, { id: "demo", label: "Demographics", count: demoQuestions.length, kind: "questions", questions: demoQuestions }, ]; // ----- Filter toggles ----- function toggleDemo(field, value) { setFilters((f) => { const next = { ...f.demo }; const cur = new Set(next[field] || []); cur.has(value) ? cur.delete(value) : cur.add(value); if (cur.size === 0) delete next[field]; else next[field] = cur; return { ...f, demo: next }; }); } function toggleAnswer(qid, label) { setFilters((f) => { const next = { ...f.answers }; const cur = new Set(next[qid] || []); cur.has(label) ? cur.delete(label) : cur.add(label); if (cur.size === 0) delete next[qid]; else next[qid] = cur; return { ...f, answers: next }; }); } function applyProfile(profile) { // Replace filters with profile's filter spec (cloning sets) const fresh = { demo: {}, answers: {} }; Object.entries(profile.filter.demo || {}).forEach(([k, s]) => { fresh.demo[k] = new Set(s); }); Object.entries(profile.filter.answers || {}).forEach(([k, s]) => { fresh.answers[k] = new Set(s); }); setFilters(fresh); } function clearFilters() { setFilters({ demo: {}, answers: {} }); setTraceNote(null); } return (
{/* Left rail: Sections */} { setTraceNote(null); setActiveSection(s); }} /> {/* Center */}
{!filtersOpen && (
{filterCount > 0 && ( )}
)} {traceNote && (
Traced from finding “{traceNote.statement}” · showing {traceNote.sourceLabel}{traceNote.cutLabel && traceNote.cutLabel !== "All respondents" ? <> filtered to {traceNote.cutLabel} : <> · all respondents}
)} {activeSection.kind === "survey" && ( setSortMode((s) => ({ ...s, [qid]: m }))} /> )} {activeSection.kind === "product" && ( )} {activeSection.kind === "demo" && ( setSortMode((s) => ({ ...s, [qid]: m }))} /> )} {activeSection.kind === "stub" && ( activeSection.id === "sentiment" ? React.createElement(window.ConsumerSentimentView, { filtered, allRespondents: data.respondents }) : s.id === activeSection.id)} /> )}
{/* Right: filter panel */} {filtersOpen && ( setFiltersOpen(false)} /> )}
); } // ---------- Left rail ---------- function SectionsRail({ surveyInsights, rawSections, activeSection, onSelect }) { const [expanded, setExpanded] = React.useState({ main: true, product: true, demo: true }); const [collapsed, setCollapsed] = React.useState(true); function toggle(id) { setExpanded((e) => ({ ...e, [id]: !e[id] })); } return ( ); } // ---------- Question list view ---------- function QuestionsList({ questions, respondents, filters, onToggleAnswer, sortMode, onSortChange }) { return ( {questions.map((q) => (
onSortChange(q.id, m)} />
))} ); } // ---------- Question card ---------- // Respondent count chip. With a twin/human split configured it becomes the // hover target for the composition popover instead of a second pill. function RRNChip({ n }) { const s = window.__TWIN_SPLIT; const plain = n = {(n || 0).toLocaleString()}; if (!s || n == null || !window.ApSamplePop) return plain; const t = Math.round(n * (s.share || 0.667)), h = n - t; return ( n = {n.toLocaleString()} ); } function QuestionCard({ q, respondents, filters, onToggleAnswer, sortMode, onSortChange }) { const agg = React.useMemo( () => StudyData.aggregateQuestion(q.id, respondents), [q.id, respondents] ); const selfSet = filters.answers[q.id]; const hasSelf = selfSet && selfSet.size > 0; const items = React.useMemo(() => { if (!agg) return []; if (agg.type === "text" || agg.type === "ranking") return agg.options || []; const arr = agg.options.map((opt) => ({ ...opt, _selected: hasSelf && selfSet.has(opt.label), })); if (sortMode === "desc") arr.sort((a, b) => b.pct - a.pct); return arr; }, [agg, sortMode, hasSelf, selfSet]); const [sortOpen, setSortOpen] = React.useState(false); return (
{q.title}
{q.type === "single" ? "Single select" : q.type === "multi" ? "Multi-select" : q.type === "ranking" ? "Ranking" : "Long text"} {(agg && agg.type !== "text") && (
{sortOpen && (
setSortOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 28 }}>
Sort by
 )}
)}
{agg && (agg.type === "single" || agg.type === "multi" || agg.type === "scale") && items.map((opt) => ( onToggleAnswer(q.id, opt.label)} /> ))} {agg && agg.type === "ranking" && items.map((opt) => ( ))} {agg && agg.type === "text" && }
); } function BarRow({ opt, onClick }) { return (
{opt._selected && ✓} {opt.label}
{opt.count.toLocaleString()} {opt.pct}%
); } function RankRow({ opt }) { return (
{opt.label}
avg #{opt.mean} {opt.top1pct}% picked #1
); } function TextResponses({ cloud, sample }) { const max = Math.max(...cloud.map((r) => r.count), 1); const total = cloud.reduce((n, r) => n + r.count, 0); return (
{cloud.length} top tokens · {total.toLocaleString()} mentions
{cloud.map((r) => ( {r.text} {r.count} ))}
{sample && sample.length > 0 && (
Sample verbatims
{sample.map((s, i) =>
"{s}"
)}
)}
); } // ---------- Stub view ---------- function StubView({ stub }) { if (!stub) return null; return (
{stub.label}
{stub.label}
{stub.stub}
Coming soon · v2.1
); } // ---------- Filter panel ---------- function FilterPanel({ data, cfg, filters, filterCount, totalShown, onToggleDemo, onToggleAnswer, onApplyProfile, onClear, onClose }) { const profiles = StudyData.getProfiles(); const demoFacets = (cfg && cfg.demoFacets) || []; const answerFacets = (cfg && cfg.answerFacets) || []; const [q, setQ] = React.useState(""); const match = (s) => !q || String(s).toLowerCase().indexOf(q.toLowerCase()) !== -1; return ( ); } function RRFilterGroup({ label, children, action, compare, count, startOpen = true }) { const [open, setOpen] = React.useState(startOpen); const [cmp, setCmp] = React.useState(false); return (
{open && (
{action &&
{action}
} {children} {compare && (
Compare
)}
)}
); } function RRFilterRow({ label, meta, swatch, checked, onChange, strong }) { return ( ); } Object.assign(window, { RawResultsView, productFamily, FAMILY_COLORS, RRFilterGroup, RRFilterRow });