Change settings

src/components/CompareChartE.vue

@@ -35,6 +35,7 @@
           class="card"
           :class="{ 'card--bh': c.kind==='bh', 'card--winner': c.isWinner }"
         >
+          <!-- header: logo | title | balance -->
           <div class="card__header">
             <div class="card__logo">
               <img v-if="c.logo" :src="c.logo" alt="" />
@@ -46,6 +47,7 @@
             <div class="card__balance">{{ fmtUSD(c.balance) }}</div>
           </div>
 
+          <!-- meta row -->
           <div class="card__meta">
             <div class="card__sub ellipsize" :title="c.subtitle">{{ c.subtitle }}</div>
 
@@ -61,6 +63,7 @@
             </template>
           </div>
 
+          <!-- date row -->
           <div class="card__footer">
             <div class="card__sub">EOD {{ c.date ? new Date(c.date).toLocaleDateString() : '–' }}</div>
           </div>
@@ -71,12 +74,12 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watchEffect } from 'vue'
+import { ref, computed, onMounted, nextTick, watch, shallowRef } from 'vue'
 import AssetTabs from '../components/AssetTabs.vue'
 import CompareChartE from '../components/CompareChartE.vue'
 import { dataService } from '../lib/dataService'
 
-/* —— use the same helpers as the chart —— */
+/* —— same helpers as the chart —— */
 import { getAllDecisions } from '../lib/dataCache'
 import { readAllRawDecisions } from '../lib/idb'
 import { filterRowsToNyseTradingDays } from '../lib/marketCalendar'
@@ -84,15 +87,12 @@ import { STRATEGIES } from '../lib/strategies'
 import { computeBuyHoldEquity, computeStrategyEquity } from '../lib/perf'
 
 /* ---------- config ---------- */
-const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // (MRNA removed)
+const orderedAssets = ['BTC','ETH','MSFT','BMRN','TSLA'] // MRNA removed
 const EXCLUDED_AGENT_NAMES = new Set(['vanilla', 'vinilla']) // case-insensitive
 
 // optional logos
 const AGENT_LOGOS = {
   // 'DeepFundAgent': new URL('../assets/images/agents/deepfund.png', import.meta.url).href,
-  // 'InvestorAgent': new URL('../assets/images/agents/investor.png', import.meta.url).href,
-  // 'TradeAgent': new URL('../assets/images/agents/trade.png', import.meta.url).href,
-  // 'HedgeFundAgent': new URL('../assets/images/agents/hedge.png', import.meta.url).href,
 }
 const ASSET_ICONS = {
   BTC: new URL('../assets/images/assets_images/BTC.png', import.meta.url).href,
@@ -102,7 +102,7 @@ const ASSET_ICONS = {
   TSLA: new URL('../assets/images/assets_images/TSLA.png', import.meta.url).href,
 }
 
-/* match the chart’s cutoff so numbers align */
+/* match the chart’s cutoff so numbers align exactly */
 const ASSET_CUTOFF = { BTC: '2025-08-01' }
 
 /* ---------- state ---------- */
@@ -110,7 +110,7 @@ const mode = ref('usd') // 'usd' | 'pct'
 const asset = ref('BTC')
 const rowsRef = ref([])
 
-let allDecisions = [] // in-memory decisions for perf calc
+let allDecisions = [] // decisions cache used for perf
 
 /* ---------- bootstrap ---------- */
 onMounted(async () => {
@@ -124,7 +124,7 @@ onMounted(async () => {
   rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
   if (!orderedAssets.includes(asset.value)) asset.value = orderedAssets[0]
 
-  // pull the same decisions cache the chart uses
+  // pull decisions used by chart
   allDecisions = getAllDecisions() || []
   if (!allDecisions.length) {
     try {
@@ -132,6 +132,7 @@ onMounted(async () => {
       if (cached?.length) allDecisions = cached
     } catch {}
   }
+  await nextTick()
 })
 
 /* ---------- helpers ---------- */
@@ -151,7 +152,7 @@ const filteredRows = computed(() =>
   })
 )
 
-/* Best model per agent (by balance) — still from leaderboard rows for picking winners */
+/* Best model per agent (by balance) — from leaderboard rows for winners list */
 const winners = computed(() => {
   const byAgent = new Map()
   for (const r of filteredRows.value) {
@@ -162,7 +163,7 @@ const winners = computed(() => {
   return [...byAgent.values()]
 })
 
-/* Chart selections built from winners */
+/* Chart selections mirror winners */
 const winnersForChart = computed(() =>
   winners.value.map(w => ({
     agent_name:  w.agent_name,
@@ -173,10 +174,10 @@ const winnersForChart = computed(() =>
   }))
 )
 
-/* ---------- PERF: compute B&H + strategy the same way as the chart ---------- */
+/* ---------- PERF: compute B&H + strategy like the chart (ASYNC & SERIALIZED) ---------- */
 
-/** build the ordered decision seq for a selection (same logic as chart) */
-function buildSeq(sel) {
+/** async: build ordered decision seq for a selection (await calendar filter) */
+async function buildSeq(sel) {
   const { agent_name: agent, asset, model } = sel
   const ids = Array.isArray(sel.decision_ids) ? sel.decision_ids : []
   let seq = ids.length
@@ -186,7 +187,10 @@ function buildSeq(sel) {
   seq.sort((a, b) => (a.date > b.date ? 1 : -1))
 
   const isCrypto = asset === 'BTC' || asset === 'ETH'
-  let filtered = isCrypto ? seq : filterRowsToNyseTradingDays(seq)
+  let filtered = seq
+  if (!isCrypto) {
+    filtered = await filterRowsToNyseTradingDays(seq) // ← await was missing before
+  }
 
   const cutoff = ASSET_CUTOFF[asset]
   if (cutoff) {
@@ -196,12 +200,11 @@ function buildSeq(sel) {
   return filtered
 }
 
-/** compute final equity & aligned B&H for a selection */
-function computeEquities(sel) {
-  const seq = buildSeq(sel)
+/** async: compute final equity & aligned B&H for a selection */
+async function computeEquities(sel) {
+  const seq = await buildSeq(sel)
   if (!seq.length) return null
 
-  // strategy params (mirror CompareChartE)
   const cfg =
     (STRATEGIES || []).find(s => s.id === sel.strategy) ||
     { strategy: 'long_only', tradingMode: 'aggressive', fee: 0.0005 }
@@ -216,66 +219,74 @@ function computeEquities(sel) {
     date: seq[lastIdx].date,
     stratLast: stratY[lastIdx],
     bhLast: bhY[lastIdx],
-    seq, stratY, bhY
   }
 }
 
-/* compute cards from perf (no leaderboard math) */
-const cards = ref([])
-
-watchEffect(() => {
-  if (!winnersForChart.value.length) {
-    cards.value = []
-    return
-  }
-
-  // compute perf for each winner
-  const perfs = winnersForChart.value
-    .map(sel => ({ sel, perf: computeEquities(sel) }))
-    .filter(x => x.perf)
-
-  if (!perfs.length) {
-    cards.value = []
-    return
-  }
-
-  // Buy & Hold card: use the first winner’s BH last for the asset
-  const first = perfs[0]
-  const assetCode = first.sel.asset
-  const bhCard = {
-    key: `bh|${assetCode}`,
-    kind: 'bh',
-    title: 'Buy & Hold',
-    subtitle: assetCode,
-    balance: first.perf.bhLast,
-    date: first.perf.date,
-    logo: ASSET_ICONS[assetCode] || null,
-    isWinner: false
-  }
+/* cards are computed via a serialized async watcher (avoid re-entrancy) */
+const cards = shallowRef([])
+let computing = false
 
-  // agent cards and winner flag
-  const agentCards = perfs.map(({ sel, perf }) => {
-    const gapUsd = perf.stratLast - perf.bhLast
-    const gapPct = perf.bhLast > 0 ? (perf.stratLast / perf.bhLast - 1) : 0
-    return {
-      key: `agent|${sel.agent_name}|${sel.model}`,
-      kind: 'agent',
-      title: sel.agent_name,
-      subtitle: sel.model,
-      balance: perf.stratLast,
-      date: perf.date,
-      logo: AGENT_LOGOS[sel.agent_name] || null,
-      gapUsd, gapPct,
-      isWinner: false // set below
+watch(
+  () => [asset.value, winnersForChart.value], // deps
+  async () => {
+    if (!allDecisions.length) { cards.value = []; return }
+    if (computing) return
+    computing = true
+    try {
+      const sels = winnersForChart.value || []
+      if (!sels.length) { cards.value = []; return }
+
+      // run all perf computations in parallel
+      const perfs = (await Promise.all(
+        sels.map(async sel => ({ sel, perf: await computeEquities(sel) }))
+      )).filter(x => x.perf)
+
+      if (!perfs.length) { cards.value = []; return }
+
+      // B&H card: use first selection's BH (same asset & cutoff as chart)
+      const assetCode = perfs[0].sel.asset
+      const bhCard = {
+        key: `bh|${assetCode}`,
+        kind: 'bh',
+        title: 'Buy & Hold',
+        subtitle: assetCode,
+        balance: perfs[0].perf.bhLast,
+        date: perfs[0].perf.date,
+        logo: ASSET_ICONS[assetCode] || null,
+        isWinner: false
+      }
+
+      // Agent cards and winner flag
+      const agentCards = perfs.map(({ sel, perf }) => {
+        const gapUsd = perf.stratLast - perf.bhLast
+        const gapPct = perf.bhLast > 0 ? (perf.stratLast / perf.bhLast - 1) : 0
+        return {
+          key: `agent|${sel.agent_name}|${sel.model}`,
+          kind: 'agent',
+          title: sel.agent_name,
+          subtitle: sel.model,
+          balance: perf.stratLast,
+          date: perf.date,
+          logo: AGENT_LOGOS[sel.agent_name] || null,
+          gapUsd, gapPct,
+          isWinner: false
+        }
+      })
+
+      const maxBal = Math.max(...agentCards.map(c => c.balance ?? -Infinity))
+      agentCards.forEach(c => { c.isWinner = c.balance === maxBal })
+
+      // Top 4 agents + BH
+      cards.value = [bhCard, ...agentCards.sort((a,b) => b.balance - a.balance).slice(0,4)]
+    } catch (e) {
+      console.error('LiveView: compute cards failed', e)
+      cards.value = []
+    } finally {
+      computing = false
     }
-  })
-
-  const maxBal = Math.max(...agentCards.map(c => c.balance ?? -Infinity))
-  agentCards.forEach(c => { c.isWinner = c.balance === maxBal })
-
-  // top 4 agents + BH card
-  cards.value = [bhCard, ...agentCards.sort((a,b) => b.balance - a.balance).slice(0,4)]
-})
+  },
+  { immediate: true, deep: true }
+)
 </script>
 
 <style scoped>