dennisthiessen/signal-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rank Top Setups by expected value, badge the top pick
Deploy / lint (push) Successful in 5s
Details
Deploy / test (push) Successful in 37s
Details
Deploy / deploy (push) Successful in 24s
Details

Browse Source 
The dashboard Top Setups list showed raw fields in arbitrary order with no
indication of why a ticker was listed or which was best. Now sort by expected
value (R) — probability-weighted payoff per unit risk — so the strongest
opportunity is row 1, badged "Top pick", with a new Exp. Value column that
folds R:R and target probability into one "is this worth taking" number.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Dennis Thiessen
2026-06-14 14:09:33 +02:00
parent da83f027e1
commit d892c46fbb
2 changed files with 73 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/DashboardPage.tsx
+58 -29
View File
@@ -9,7 +9,7 @@ import { Section } from '../components/ui/Section';
import { SkeletonCard, SkeletonTable } from '../components/ui/Skeleton';
import { formatPrice } from '../lib/format';
import { recommendationActionLabel } from '../lib/recommendation';
import { qualifiesSetup, activationSummary, primaryTargetProbability } from '../lib/qualification';
import { qualifiesSetup, activationSummary, primaryTargetProbability, expectedValueR } from '../lib/qualification';
import type { TradeSetup } from '../lib/types';
function fmtR(value: number | null): string {
@@ -64,12 +64,15 @@ export default function DashboardPage() {
[trades.data, activation.data],
);
// Show qualified setups first; fall back to the full list when none qualify
// Show qualified setups first; fall back to the full list when none qualify.
// Rank by expected value (R) so the best opportunity sits at the top.
const showingQualified = qualifiedSetups.length > 0;
const topSetups: TradeSetup[] = useMemo(
() => (showingQualified ? qualifiedSetups : trades.data ?? []).slice(0, 5),
[showingQualified, qualifiedSetups, trades.data],
);
const topSetups: TradeSetup[] = useMemo(() => {
const pool = showingQualified ? qualifiedSetups : trades.data ?? [];
return [...pool]
.sort((a, b) => (expectedValueR(b) ?? -Infinity) - (expectedValueR(a) ?? -Infinity))
.slice(0, 5);
}, [showingQualified, qualifiedSetups, trades.data]);
const topWatchlist = useMemo(
() =>
@@ -130,7 +133,10 @@ export default function DashboardPage() {
<div className="grid gap-8 xl:grid-cols-5">
{/* Top setups */}
<div className="xl:col-span-3">
<Section title="Top Setups" hint={showingQualified ? 'qualified' : 'none qualified — showing all'}>
<Section
title="Top Setups"
hint={showingQualified ? 'ranked by expected value' : 'none qualified — showing all'}
>
{trades.isLoading && <SkeletonTable rows={5} cols={5} />}
{trades.isError && <Callout variant="error">Failed to load setups</Callout>}
{trades.data && topSetups.length === 0 && (
@@ -146,34 +152,57 @@ export default function DashboardPage() {
<th className="px-4 py-3 text-right">Entry</th>
<th className="px-4 py-3 text-right">R:R</th>
<th className="px-4 py-3 text-right">Target&nbsp;Prob</th>
<th className="px-4 py-3 text-right">Exp.&nbsp;Value</th>
<th className="hidden px-4 py-3 md:table-cell">Action</th>
</tr>
</thead>
<tbody>
{topSetups.map((setup) => (
<tr key={setup.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
<td className="px-4 py-3">
<Link to={`/ticker/${setup.symbol}`} className="font-medium text-blue-300 hover:text-blue-200 transition-colors">
{setup.symbol}
</Link>
</td>
<td className="px-4 py-3"><DirectionTag direction={setup.direction} /></td>
<td className="num px-4 py-3 text-right text-gray-200">{formatPrice(setup.entry_price)}</td>
<td className="num px-4 py-3 text-right text-gray-200">{setup.rr_ratio.toFixed(1)}:1</td>
<td className="num px-4 py-3 text-right text-gray-200">
{(() => {
const p = primaryTargetProbability(setup);
return p != null ? `${Math.round(p)}%` : '—';
})()}
</td>
<td className="hidden px-4 py-3 text-xs text-gray-400 md:table-cell">
{recommendationActionLabel(setup.recommended_action)}
</td>
</tr>
))}
{topSetups.map((setup, i) => {
const ev = expectedValueR(setup);
const isTopPick = i === 0;
return (
<tr
key={setup.id}
className={`border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03] ${
isTopPick ? 'bg-blue-500/[0.06]' : ''
}`}
>
<td className="px-4 py-3">
<div className="flex items-center gap-2">
<Link to={`/ticker/${setup.symbol}`} className="font-medium text-blue-300 hover:text-blue-200 transition-colors">
{setup.symbol}
</Link>
{isTopPick && (
<span className="rounded bg-blue-500/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-blue-300">
Top pick
</span>
)}
</div>
</td>
<td className="px-4 py-3"><DirectionTag direction={setup.direction} /></td>
<td className="num px-4 py-3 text-right text-gray-200">{formatPrice(setup.entry_price)}</td>
<td className="num px-4 py-3 text-right text-gray-200">{setup.rr_ratio.toFixed(1)}:1</td>
<td className="num px-4 py-3 text-right text-gray-200">
{(() => {
const p = primaryTargetProbability(setup);
return p != null ? `${Math.round(p)}%` : '—';
})()}
</td>
<td className={`num px-4 py-3 text-right font-semibold ${rColor(ev)}`}>
{fmtR(ev)}
</td>
<td className="hidden px-4 py-3 text-xs text-gray-400 md:table-cell">
{recommendationActionLabel(setup.recommended_action)}
</td>
</tr>
);
})}
</tbody>
</table>
<div className="border-t border-white/[0.04] px-4 py-2.5">
<div className="flex items-center justify-between border-t border-white/[0.04] px-4 py-2.5">
<span className="text-[11px] text-gray-500">
Exp. Value = probability-weighted payoff per unit of risk
</span>
<Link to="/signals" className="text-xs font-medium text-blue-300 hover:text-blue-200 transition-colors">
All setups →
</Link>