rams/ftdt-quant-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: VBT sidebar — cleaner UX with grouped sections + collapsible fee tiers

Browse Source 
Sidebar reorganized into clear sections:
  [FILTERS] — Strategy + Asset + Interval + Sort
  ▶ Fee Tiers — collapsible (hidden by default), shows summary
    T0 + staking tier name when collapsed
  [NEW BACKTEST] — compact: Strategy (short names) + Interval + Limit
    Row 2: Coin + ▶ Run button (side by side) + ↻ Refresh
  [RESULTS] — count header + list + pagination

Removed:
  - Full-width run strategy row (now inline with interval/limit)
  - Duplicate fee tier labels in select options
  - Separate run/refresh button row (now same row as coin)

Added:
  - toggleFeeTiers() — expand/collapse fee settings
  - updateFeeSummary() — shows current tier in collapsed label
  - Fee changes auto-recalculate (no manual onchange needed)
  - Section headers: small uppercase labels
This commit is contained in:
ramseshk
2026-08-10 12:58:37 +08:00
parent 0486e8c93f
commit e71b47ac56
1 changed files with 55 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/static/vbt.html
+55 -35
View File
@@ -101,6 +101,7 @@ select:focus{outline:none;border-color:var(--text4)}
<div class="main">
<div class="sidebar">
<div class="controls">
<div style="font-size:8px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;padding:0 4px 3px">Filters</div>
<div class="row">
<select id="filter-strategy">
<option value="">All Strategies</option>
@@ -136,51 +137,53 @@ select:focus{outline:none;border-color:var(--text4)}
<option value="trades">Trades</option>
</select>
</div>
<div class="row" style="margin-top:2px">
<select id="fee-tier" style="flex:0.6" onchange="recalcIfSelected()">
<option value="0" selected>T0 (0.045%/0.015%)</option>
<option value="1">T1 (>$5M 0.040/0.012)</option>
<option value="2">T2 (>$25M 0.035/0.008)</option>
<option value="3">T3 (>$100M 0.030/0.004)</option>
<option value="4">T4 (>$500M 0.028/0.000)</option>
<option value="5">T5 (>$2B 0.026/0.000)</option>
<option value="6">T6 (>$7B 0.024/0.000)</option>
</select>
<select id="staking-tier" style="flex:0.4" onchange="recalcIfSelected()">
<option value="none">No Stake</option>
<option value="wood">Wood (-5%)</option>
<option value="bronze">Bronze (-10%)</option>
<option value="silver">Silver (-15%)</option>
<option value="gold">Gold (-20%)</option>
<option value="platinum">Platinum (-30%)</option>
<option value="diamond">Diamond (-40%)</option>
</select>
<div style="font-size:8px;color:var(--text4);cursor:pointer;padding:2px 4px;display:flex;align-items:center;gap:4px" onclick="toggleFeeTiers()">
<span id="fee-arrow">▶</span> Fee Tiers <span style="font-size:7px" id="fee-summary"></span>
</div>
<div id="fee-panel" style="display:none">
<div class="row">
<select id="fee-tier" style="flex:0.55">
<option value="0" selected>T0 (0.045/0.015)</option>
<option value="1">T1 >$5M (0.040/0.012)</option>
<option value="2">T2 >$25M (0.035/0.008)</option>
<option value="3">T3 >$100M (0.030/0.004)</option>
<option value="4">T4 >$500M (0.028/—)</option>
<option value="5">T5 >$2B (0.026/—)</option>
<option value="6">T6 >$7B (0.024/—)</option>
</select>
<select id="staking-tier" style="flex:0.45">
<option value="none">No Stake</option>
<option value="wood">Wood −5%</option>
<option value="bronze">Bronze −10%</option>
<option value="silver">Silver −15%</option>
<option value="gold">Gold −20%</option>
<option value="platinum">Platinum −30%</option>
<option value="diamond">Diamond −40%</option>
</select>
</div>
</div>
</div>
<div class="controls">
<div style="font-size:8px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;padding:0 4px 3px">New Backtest</div>
<div class="row">
<select id="run-strategy">
<option value="pairs">Pairs Trading</option>
<option value="hurst_vpin">Hurst VPIN</option>
<option value="as_mm">Avellaneda-Stoikov</option>
<option value="obi">Order Book Imbalance</option>
<option value="grid_mm">Grid Market Making</option>
<option value="composite_mm">Composite MM</option>
<option value="iceberg">Iceberg Detection</option>
<option value="momentum">Momentum Breakout</option>
<option value="mean_rev">Mean Reversion</option>
<option value="pairs">Pairs</option><option value="hurst_vpin">Hurst VPIN</option>
<option value="as_mm">A-S</option><option value="obi">OBI</option>
<option value="grid_mm">Grid</option><option value="composite_mm">Composite</option>
<option value="iceberg">Iceberg</option><option value="momentum">Momentum</option>
<option value="mean_rev">Mean Rev</option>
</select>
<select id="run-interval"><option value="1m">1m</option><option value="5m">5m</option><option value="15m">15m</option><option value="1h" selected>1h</option><option value="4h">4h</option><option value="1d">1d</option></select>
<select id="run-limit"><option value="100">100b</option><option value="200">200b</option><option value="500" selected>500b</option><option value="1000">1Kb</option><option value="2000">2Kb</option><option value="5000">5Kb</option></select>
</div>
<div class="row">
<select id="run-interval"><option value="1m">1m</option><option value="5m">5m</option><option value="15m">15m</option><option value="1h" selected>1h</option><option value="4h">4h</option><option value="1d">1d</option></select>
<select id="run-limit"><option value="100">100 bars</option><option value="200">200 bars</option><option value="500" selected>500 bars</option><option value="1000">1K bars</option><option value="2000">2K bars</option><option value="5000">5K bars</option></select>
<select id="run-coin"><option value="">auto</option><option value="BTC">BTC</option><option value="ETH">ETH</option><option value="SOL">SOL</option></select>
</div>
<div style="display:flex;gap:4px">
<button class="btn btn-primary" onclick="runNewBacktest()" id="btn-run">▶ Run Backtest</button>
<button class="btn" onclick="loadResults()" id="btn-refresh">↻</button>
<button class="btn btn-primary" onclick="runNewBacktest()" id="btn-run" style="flex:1">▶ Run</button>
<button class="btn" onclick="loadResults()" title="Refresh">↻</button>
</div>
<div id="run-status"></div>
</div>
<div style="font-size:9px;color:var(--text4);padding:2px 4px" id="result-count"></div>
<div style="font-size:8px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;padding:4px 4px 2px"><span id="result-count"></span></div>
<div id="results-list"><div class="loading">Loading...</div></div>
<div class="pagination-row" id="pagination" style="display:none">
<button class="nav-btn" id="btn-prev" onclick="loadPage(-1)" disabled>← Prev</button>
@@ -373,6 +376,23 @@ async function runNewBacktest(){
}
function applyFilter(){currentOffset=0;loadResults();}
function toggleFeeTiers(){
const panel=document.getElementById('fee-panel');
const arrow=document.getElementById('fee-arrow');
const open=panel.style.display==='block';
panel.style.display=open?'none':'block';
arrow.textContent=open?'▶':'▼';
}
function updateFeeSummary(){
const ft=document.getElementById('fee-tier');
const st=document.getElementById('staking-tier');
const stOpt=st.options[st.selectedIndex];
document.getElementById('fee-summary').textContent='· T'+ft.value+' '+stOpt.text.replace(/ .+/,'');
}
document.getElementById('fee-tier').addEventListener('change',()=>{updateFeeSummary();recalcIfSelected();});
document.getElementById('staking-tier').addEventListener('change',()=>{updateFeeSummary();recalcIfSelected();});
updateFeeSummary();
document.getElementById('filter-strategy').addEventListener('change',applyFilter);
document.getElementById('filter-interval').addEventListener('change',applyFilter);
document.getElementById('filter-asset').addEventListener('change',applyFilter);