{/* header */}
{cols.map(c => (
onSort(c.id)}
style={{
width: c.w, padding: '12px 10px', textAlign: c.align,
cursor: 'pointer', display: 'flex', alignItems: 'center',
justifyContent: c.align === 'right' ? 'flex-end' : 'flex-start',
gap: 4,
borderRight: '1px solid transparent',
}}>
{c.label}
{sortBy === c.id && {sortDir === 'desc' ? '↓' : '↑'}}
{c.help && }
))}
{/* rows */}
{rows.map((r, i) => {
const focused = focusedTicker === r.ticker;
return (
onFocus(r.ticker)}
style={{
display: 'flex', alignItems: 'center', cursor: 'pointer',
background: focused ? CX.accentVery : (i % 2 ? 'transparent' : 'rgba(255,255,255,0.012)'),
borderBottom: `1px solid ${CX.line}`,
borderLeft: `2px solid ${focused ? CX.accent : 'transparent'}`,
}}>
{cols.map(c => {
const v = r[c.id];
const A = { textAlign: c.align, width: c.w, padding: '10px', display: 'flex', alignItems: 'center',
justifyContent: c.align === 'right' ? 'flex-end' : 'flex-start',
fontFamily: CX.mono, fontSize: 12, color: CX.text };
if (c.type === 'bucket') {
const colors = { compounder: CX.accent, cheap_decent: CX.blue, inflection: CX.amber, pullback: CX.dim, danger: CX.red };
return
● {v}
;
}
if (c.type === 'rank') return
{v}
;
if (c.type === 'ticker') return
{v}
;
if (c.type === 'name') return
{v}
;
if (c.type === 'cc') {
const code = { Sverige:'SE', Norge:'NO', Danmark:'DK', Finland:'FI', Island:'IS' }[v];
return
{code}
;
}
if (c.type === 'sector') return
{v}
;
if (c.type === 'score' || c.type === 'score-inv') {
// For risk, flip color: high=bad
const display = c.type === 'score-inv' ? (
70 ? CX.red : v > 40 ? CX.amber : CX.accent, opacity: 0.85 }} />
{v}
) :
;
return
{display}
;
}
if (c.type === 'tag') {
const tone = v === 'liquid' || v === 'small_mid' ? CX.dim : v === 'thin' ? CX.amber : CX.dim;
return
{v}
;
}
if (c.type === 'flag') {
const tone = v === 'NEW' || v === 'BUY' ? CX.accent : v === 'AVOID' ? CX.red : CX.faint;
return
{v || '—'}
;
}
return
{v}
;
})}
);
})}
);
}
function DrillIn({ row }) {
if (!row) {
return (
SELECT A ROW TO DRILL IN ↑
);
}
const fields = [
[
['Bucket', row.bucket, null, 'primary_signal_bucket'],
['Rank', `${row.rank} in bucket`, null, 'bucket_rank'],
['Country', row.country, null, null],
['Sector', row.sector, null, null],
],
[
['Mcap', `€ ${row.mcap_eur}M`, null, 'mcap_eur'],
['EV / EBIT', row.ev_ebit, null, 'ev_ebit'],
['FCF yield', `${row.fcf_yield}%`, parseFloat(row.fcf_yield) >= 0 ? CX.accent : CX.red, 'fcf_yield'],
['Δ 30D', `${row.thirty_d}%`, parseFloat(row.thirty_d) >= 0 ? CX.accent : CX.red, 'thirty_d'],
],
[
['Liquidity', row.liquidity, null, 'liquidity_bucket'],
['Mcap bucket', row.mcap_bucket, null, 'market_cap_bucket'],
['Held', row.held ? 'yes' : 'no', row.held ? CX.accent : CX.faint, null],
['Watchlist', row.watch ? 'yes' : 'no', row.watch ? CX.amber : CX.faint, null],
],
];
const scores = [
['Quality', row.quality, false, 'quality_score'],
['Value', row.value, false, 'value_score'],
['Growth', row.growth, false, 'growth_score'],
['Momentum', row.momentum, false, 'momentum_score'],
['Inflection', row.inflection, false, 'inflection_score'],
['Risk', row.risk, true, 'risk_score'],
];
return (
DRILL IN · /Q.DRILL
{row.ticker}
{row.name}
{fields.map((col, ci) => (
{col.map((f, i) => (
{f[0].toUpperCase()}
{f[3] && }
{f[1]}
))}
))}
SCORES
{scores.map((s, i) => (
{s[0]}
{s[2] ? (
70 ? CX.red : s[1] > 40 ? CX.amber : CX.accent, opacity: 0.85 }} />
{s[1]}
) :
}
))}
);
}
function btn(C, kind) {
const base = {
appearance: 'none', cursor: 'pointer',
padding: '8px 14px',
fontFamily: C.mono, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase',
transition: 'background .12s',
};
if (kind === 'accent') return { ...base, background: C.accentDim, color: C.accent, border: `1px solid ${C.accent}` };
return { ...base, background: 'transparent', color: C.dim, border: `1px solid ${C.lineHi}` };
}
function PageQueue() {
// ── filter state
const date = META.asof || 'no queue date';
const [buckets, setBuckets] = React.useState(new Set(BUCKETS));
const [countries, setCountries] = React.useState(new Set(COUNTRIES));
const [sectors, setSectors] = React.useState(new Set(SECTORS));
const [minQuality, setMinQuality] = React.useState(0);
const [maxRisk, setMaxRisk] = React.useState(100);
const [sortBy, setSortBy] = React.useState('rank');
const [sortDir, setSortDir] = React.useState('asc');
const [focused, setFocused] = React.useState(META.initial_ticker || ROWS[0]?.ticker || '');
const toggle = (set, setSet) => (v) => {
const n = new Set(set);
if (n.has(v)) n.delete(v); else n.add(v);
setSet(n);
};
const filtered = React.useMemo(() => {
let xs = ROWS.filter(r =>
buckets.has(r.bucket) &&
countries.has(r.country) &&
sectors.has(r.sector) &&
r.quality >= minQuality &&
r.risk <= maxRisk
);
xs = [...xs].sort((a, b) => {
const va = a[sortBy], vb = b[sortBy];
const cmp = typeof va === 'number' ? va - vb : String(va).localeCompare(String(vb));
return sortDir === 'desc' ? -cmp : cmp;
});
return xs;
}, [buckets, countries, sectors, minQuality, maxRisk, sortBy, sortDir]);
const focusedRow = filtered.find(r => r.ticker === focused) || filtered[0];
return (
{/* page header */}
01 · /Q.QUEUE
Research queue.
queue date
{date}
▾
{/* filters */}
{/* meta row */}
Showing {filtered.length} of {ROWS.length} rows · sorted by {sortBy} {sortDir}
● compounder
● cheap_decent
● inflection
● pullback
● danger
{ if (sortBy === c) setSortDir(sortDir === 'desc' ? 'asc' : 'desc'); else { setSortBy(c); setSortDir('desc'); } }}
focusedTicker={focused} onFocus={setFocused}
/>
);
}
window.PageQueue = PageQueue;
window.cortexBtn = btn;
window.Spark = Spark;