fix logic

Author: lovelaced

src/App.tsx

@@ -18,29 +18,44 @@ import { PROOF_SIZE_MB, MB_TO_GAS, GAS_TO_MGAS } from './constants';
 
 const ALPHA = 0.3;
 const TARGET_WINDOW_SIZE = 30000; // 30s
-const MAX_BLOCKS_STORE = 2000;
+const MAX_BLOCKS_STORE = 1000;
+
+type RelayType = 'Polkadot' | 'Kusama';
+
+interface BlockRecord {
+  chainKey: string;
+  blockNumber: number;
+  timestamp: number;
+  extrinsics: number;
+  proofSize: number;
+}
 
-// standard ema
 function calculateEma(oldValue: number, newValue: number) {
   return ALPHA * newValue + (1 - ALPHA) * oldValue;
 }
 
-// compute rolling tps, mbs, gas from blocks in the last 30s
-function calculateRollingMetrics(
-  blocks: Array<{ blockNumber: number; timestamp: number; extrinsics: number; proofSize: number }>
-) {
-  if (blocks.length < 2) return { tps: 0, mbs: 0, gas: 0 };
+// compute rolling tps, mbs, gas from last 30s
+function calculateRollingMetrics(blocks: BlockRecord[]) {
+  if (blocks.length < 2) {
+   // console.log('debug: not enough blocks to calc rolling metrics -> returning 0');
+    return { tps: 0, mbs: 0, gas: 0 };
+  }
 
   const now = Date.now();
   const cutoff = now - TARGET_WINDOW_SIZE;
   const relevant = blocks.filter(b => b.timestamp >= cutoff);
-  if (relevant.length === 0) return { tps: 0, mbs: 0, gas: 0 };
+  if (relevant.length === 0) {
+  //  console.log('debug: no blocks in last 30s -> returning 0');
+    return { tps: 0, mbs: 0, gas: 0 };
+  }
 
   relevant.sort((a, b) => a.timestamp - b.timestamp);
   const timeWindow = relevant[relevant.length - 1].timestamp - relevant[0].timestamp;
-  if (timeWindow <= 0) return { tps: 0, mbs: 0, gas: 0 };
+  if (timeWindow <= 0) {
+   // console.log('debug: timeWindow <= 0, weird data -> returning 0');
+    return { tps: 0, mbs: 0, gas: 0 };
+  }
 
-  // adjust extrinsics with -2 offset if desired
   const sumExtrinsics = relevant.reduce((acc, b) => acc + Math.max(0, b.extrinsics - 2), 0);
   const sumProofSize = relevant.reduce((acc, b) => acc + b.proofSize, 0);
 
@@ -51,70 +66,67 @@ function calculateRollingMetrics(
   return { tps, mbs, gas };
 }
 
-interface BlockRecord {
-  chainKey: string;
-  blockNumber: number;
-  timestamp: number;
-  extrinsics: number;
-  proofSize: number;
-}
-
 const App: React.FC = () => {
-  const [selectedRelay, setSelectedRelay] = useState<'Polkadot' | 'Kusama'>('Polkadot');
+  // user picks polkadot or kusama
+  const [selectedRelay, setSelectedRelay] = useState<RelayType>('Polkadot');
 
-  // data feed
   const consumptionData = useWeightConsumption('https://stream.freeside.network/events');
 
-  // figure out which chains we're interested in
+  // separate chain arrays for polkadot vs. kusama
+  // do the same for blockNumber dedupe
+  const blocksByRelayRef = useRef<{ Polkadot: BlockRecord[]; Kusama: BlockRecord[] }>({
+    Polkadot: [],
+    Kusama: [],
+  });
+
+  const lastBlockNumberByRelayRef = useRef<{
+    Polkadot: Record<string, number>;
+    Kusama: Record<string, number>;
+  }>({
+    Polkadot: {},
+    Kusama: {},
+  });
+
+  // rolling totals for whichever relay is selected
+  //const [rollingTps, setRollingTps] = useState(0);
+  const [rollingTpsEma, setRollingTpsEma] = useState(0);
+  //const [rollingMbs, setRollingMbs] = useState(0);
+  const [rollingMbsEma, setRollingMbsEma] = useState(0);
+  //const [rollingGas, setRollingGas] = useState(0);
+  const [rollingGasEma, setRollingGasEma] = useState(0);
+
+  // figure out chain lists
   const chainNames = selectedRelay === 'Polkadot' ? polkadotChainNames : kusamaChainNames;
   const paraIdToChainName =
     selectedRelay === 'Polkadot' ? polkadotParaIdToChainName : kusamaParaIdToChainName;
 
-  // gather the "weightData" for all chains (just the mandatory + total_proof_size, for example)
+  // gather "weightData" for chain table
   const weightData: Record<PolkadotChainName | KusamaChainName, number> = chainNames.reduce(
     (acc, chain) => {
-      const paraId = Object.keys(paraIdToChainName).find(
-        (key) => paraIdToChainName[Number(key)] === chain
-      );
+      const paraId = Object.keys(paraIdToChainName).find(k => paraIdToChainName[Number(k)] === chain);
       if (paraId) {
         const key = `${selectedRelay}-${paraId}`;
         const chainData = consumptionData[key]?.current;
         if (chainData) {
-          // example: combine mandatory + total_proof_size
           const mandatorySize = chainData.ref_time?.mandatory ?? 0;
           const totalSize = chainData.total_proof_size ?? 0;
-          const combinedProof = mandatorySize + totalSize;
-          return { ...acc, [chain]: combinedProof };
+          const totalProof = mandatorySize + totalSize;
+          acc[chain] = totalProof;
         }
       }
       return acc;
     },
     {} as Record<PolkadotChainName | KusamaChainName, number>
   );
 
-  // store rolling metrics
-  //const [rollingTps, setRollingTps] = useState(0);
-  const [rollingTpsEma, setRollingTpsEma] = useState(0);
-
-  //const [rollingMbs, setRollingMbs] = useState(0);
-  const [rollingMbsEma, setRollingMbsEma] = useState(0);
-
-  //const [rollingGas, setRollingGas] = useState(0);
-  const [rollingGasEma, setRollingGasEma] = useState(0);
-
-  // dedup blocks
-  const blocksRef = useRef<BlockRecord[]>([]);
-  const lastBlockNumberByChain = useRef<Record<string, number>>({});
-
-  // we also want the immediate (non-ema) relay data
+  // immediate (non-ema) relay stats for whichever relay is selected
   let weightRelay = 0;
   let tpsRelay = 0;
   let gasRelay = 0;
 
-  // figure out the relay chain's data
   const relayChainName = selectedRelay === 'Polkadot' ? 'Polkadot' : 'Kusama';
   const relayParaId = Object.keys(paraIdToChainName).find(
-    (k) => paraIdToChainName[Number(k)] === relayChainName
+    k => paraIdToChainName[Number(k)] === relayChainName
   );
   if (relayParaId) {
     const relayKey = `${selectedRelay}-${relayParaId}`;
@@ -125,67 +137,96 @@ const App: React.FC = () => {
       const totalSize = relayData.total_proof_size ?? 0;
       weightRelay = mandatorySize + totalSize;
       tpsRelay = (relayData.extrinsics_num ?? 0) / blockTime;
-
       const chainMbs = (weightRelay * PROOF_SIZE_MB) / blockTime;
       gasRelay = chainMbs * (MB_TO_GAS / PROOF_SIZE_MB / GAS_TO_MGAS);
     }
   }
 
   useEffect(() => {
-    const newBlocks: BlockRecord[] = [];
+   // console.log('debug: consumptionData or selectedRelay changed -> updating polkadot + kusama blocks');
 
-    chainNames.forEach((chain) => {
-      const paraId = Object.keys(paraIdToChainName).find(
-        (key) => paraIdToChainName[Number(key)] === chain
+    // step 1: process polkadot chain data
+    polkadotChainNames.forEach(chain => {
+      const paraId = Object.keys(polkadotParaIdToChainName).find(
+        k => polkadotParaIdToChainName[Number(k)] === chain
       );
       if (!paraId) return;
-      const key = `${selectedRelay}-${paraId}`;
+      const key = `Polkadot-${paraId}`;
       const chainData = consumptionData[key]?.current;
       if (!chainData) return;
 
       const blockNum = chainData.block_number;
       const ts = chainData.timestamp;
-      // only add if we haven't seen this block_number before for this chain
-      if (
-        typeof blockNum === 'number' &&
-        ts &&
-        (lastBlockNumberByChain.current[key] === undefined ||
-          blockNum > lastBlockNumberByChain.current[key])
-      ) {
-        lastBlockNumberByChain.current[key] = blockNum;
-
-        // combine mandatory + total_proof_size
+      const lastSeen = lastBlockNumberByRelayRef.current['Polkadot'][key];
+
+      if (typeof blockNum === 'number' && ts && (lastSeen === undefined || blockNum > lastSeen)) {
+        lastBlockNumberByRelayRef.current['Polkadot'][key] = blockNum;
         const mandatorySize = chainData.ref_time?.mandatory ?? 0;
         const totalSize = chainData.total_proof_size ?? 0;
         const totalProof = mandatorySize + totalSize;
 
-        newBlocks.push({
-          chainKey: key,
-          blockNumber: blockNum,
-          timestamp: ts,
-          extrinsics: chainData.extrinsics_num ?? 0,
-          proofSize: totalProof,
-        });
+        blocksByRelayRef.current['Polkadot'] = [
+          ...blocksByRelayRef.current['Polkadot'],
+          {
+            chainKey: key,
+            blockNumber: blockNum,
+            timestamp: ts,
+            extrinsics: chainData.extrinsics_num ?? 0,
+            proofSize: totalProof,
+          },
+        ].slice(-MAX_BLOCKS_STORE);
+
       }
     });
 
-    // if we actually have new blocks, compute rolling metrics
-    if (newBlocks.length > 0) {
-      // add them, prune old
-      blocksRef.current = [...blocksRef.current, ...newBlocks].slice(-MAX_BLOCKS_STORE);
+    // step 2: process kusama chain data
+    kusamaChainNames.forEach(chain => {
+      const paraId = Object.keys(kusamaParaIdToChainName).find(
+        k => kusamaParaIdToChainName[Number(k)] === chain
+      );
+      if (!paraId) return;
+      const key = `Kusama-${paraId}`;
+      const chainData = consumptionData[key]?.current;
+      if (!chainData) return;
+
+      const blockNum = chainData.block_number;
+      const ts = chainData.timestamp;
+      const lastSeen = lastBlockNumberByRelayRef.current['Kusama'][key];
+
+      if (typeof blockNum === 'number' && ts && (lastSeen === undefined || blockNum > lastSeen)) {
+        lastBlockNumberByRelayRef.current['Kusama'][key] = blockNum;
+        const mandatorySize = chainData.ref_time?.mandatory ?? 0;
+        const totalSize = chainData.total_proof_size ?? 0;
+        const totalProof = mandatorySize + totalSize;
+
+        blocksByRelayRef.current['Kusama'] = [
+          ...blocksByRelayRef.current['Kusama'],
+          {
+            chainKey: key,
+            blockNumber: blockNum,
+            timestamp: ts,
+            extrinsics: chainData.extrinsics_num ?? 0,
+            proofSize: totalProof,
+          },
+        ].slice(-MAX_BLOCKS_STORE);
 
-      const { tps, mbs, gas } = calculateRollingMetrics(blocksRef.current);
+      }
+    });
 
-      //setRollingTps(tps);
-      setRollingTpsEma((prev) => calculateEma(prev || tps, tps));
+    // step 3: compute rolling metrics for whichever relay is selected
+    const blocks = blocksByRelayRef.current[selectedRelay] || [];
+   // console.log(`debug: computing rolling metrics for ${selectedRelay}, block array length = ${blocks.length}`);
 
-      //setRollingMbs(mbs);
-      setRollingMbsEma((prev) => calculateEma(prev || mbs, mbs));
+    const { tps, mbs, gas } = calculateRollingMetrics(blocks);
+   // setRollingTps(tps);
+    setRollingTpsEma(prev => calculateEma(prev || tps, tps));
+   // setRollingMbs(mbs);
+    setRollingMbsEma(prev => calculateEma(prev || mbs, mbs));
+   // setRollingGas(gas);
+    setRollingGasEma(prev => calculateEma(prev || gas, gas));
 
-     // setRollingGas(gas);
-      setRollingGasEma((prev) => calculateEma(prev || gas, gas));
-    }
-  }, [consumptionData, chainNames, paraIdToChainName, selectedRelay]);
+  //  console.log('debug: set new rolling metrics ->', { tps, mbs, gas });
+  }, [consumptionData, selectedRelay]);
 
   return (
     <div className="app-container">
@@ -200,15 +241,9 @@ const App: React.FC = () => {
           <RelaySelector selectedRelay={selectedRelay} onRelayChange={setSelectedRelay} />
 
           <MetricsTotal
-            // the rolling 30s metrics
-          // rollingTps={rollingTps.toFixed(2)}
             totalTps={rollingTpsEma.toFixed(2)}
-         //   rollingMbs={rollingMbs.toFixed(2)}
             totalMbs={rollingMbsEma.toFixed(2)}
-          //  rollingGas={rollingGas.toFixed(2)}
             totalGas={rollingGasEma.toFixed(2)}
-
-            // immediate relay chain-only stats (non-ema)
             tpsRelay={tpsRelay}
             weightRelay={weightRelay}
             gasRelay={gasRelay}
@@ -220,7 +255,6 @@ const App: React.FC = () => {
               chains={chainNames}
               selectedRelay={selectedRelay}
               paraIdToChainName={paraIdToChainName}
-              // pass in weightData for chain usage
               weightData={weightData}
             />
           </div>