Quant Report inline: embed in strategy detail view

Removed: popup button + fullscreen overlay
Added: QuantReport renders directly below trade history
  in every strategy detail view (live, paper, historical).
  White background, 6-panel layout, QF-Lib header.
This commit is contained in:
ramseshk
2026-08-06 03:56:23 +00:00
parent 79870925f7
commit 232d2dae10
2 changed files with 14 additions and 33 deletions
+13 -32
View File
@@ -29,7 +29,6 @@ export default function Dashboard() {
const [detailOpen, setDetailOpen] = useState(false); const [detailOpen, setDetailOpen] = useState(false);
const [l2TerminalOpen, setL2TerminalOpen] = useState(false); const [l2TerminalOpen, setL2TerminalOpen] = useState(false);
const [quantReportOpen, setQuantReportOpen] = useState(false);
const [detailName, setDetailName] = useState(""); const [detailName, setDetailName] = useState("");
const [detailTab, setDetailTab] = useState<Tab>("live"); const [detailTab, setDetailTab] = useState<Tab>("live");
const [filter, setFilter] = useState("ALL"); const [filter, setFilter] = useState("ALL");
@@ -230,17 +229,9 @@ export default function Dashboard() {
)} )}
<div> <div>
<div className="flex items-center justify-between mb-3 pb-2 border-b border-border"> <h4 className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-3 pb-2 border-b border-border">
<h4 className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider"> Trade History {detailTrades.length > 0 ? `(${detailTrades.length})` : ""}
Trade History {detailTrades.length > 0 ? `(${detailTrades.length})` : ""} </h4>
</h4>
<button
onClick={() => setQuantReportOpen(true)}
className="text-[9px] px-2 py-0.5 bg-blue-50 text-blue-700 rounded font-mono hover:bg-blue-100 transition-colors"
>
QF-Lib Report
</button>
</div>
{detailTrades.length > 0 ? ( {detailTrades.length > 0 ? (
<div className="overflow-x-auto rounded-lg border border-border"> <div className="overflow-x-auto rounded-lg border border-border">
<Table> <Table>
@@ -287,7 +278,16 @@ export default function Dashboard() {
<p className="text-xs text-muted-foreground text-center py-12">No trades recorded yet</p> <p className="text-xs text-muted-foreground text-center py-12">No trades recorded yet</p>
)} )}
</div> </div>
{/* Live L2 Order Book + Trade Tape (all strategies, live tab only) */}
{/* Quant Report — QF-Lib inline */}
<div className="mt-6 border-t border-border pt-1">
<QuantReport
strategyName={detailName}
backtestId={historical[detailName]?.name || `${detailName.replace(/\s+/g, "_").toLowerCase()}.json`}
/>
</div>
{/* Live L2 Order Book + Trade Tape (all strategies, live tab only) */}
{detailTab === "live" && ( {detailTab === "live" && (
<div className="mt-6"> <div className="mt-6">
<OrderBookDepthMap coin="BTC" height={480} topRatio={0.55} /> <OrderBookDepthMap coin="BTC" height={480} topRatio={0.55} />
@@ -389,25 +389,6 @@ export default function Dashboard() {
<L2Terminal coin="BTC" className="w-full h-full" /> <L2Terminal coin="BTC" className="w-full h-full" />
</div> </div>
)} )}
{/* Fullscreen Quant Report */}
{quantReportOpen && (
<div className="fixed inset-0 z-[200] bg-white overflow-auto">
<div className="sticky top-0 z-[201] bg-white border-b border-gray-200 px-4 py-2 flex justify-between items-center">
<span className="text-xs text-gray-600">QF-Lib Quant Report</span>
<button
onClick={() => setQuantReportOpen(false)}
className="text-xs text-gray-500 hover:text-black font-mono px-3 py-1 border border-gray-300 rounded"
>
Close
</button>
</div>
<QuantReport
strategyName={detailName}
backtestId={btFull ? `${detailName.replace(/\s+/g, "_").toLowerCase()}.json` : "live"}
/>
</div>
)}
</div> </div>
); );
} }
File diff suppressed because one or more lines are too long