refactor(web): extra stats block query algorithm improvement

alcercu · alcercu · commit e85461b2618f · 2024-10-02T15:42:37.000+02:00
diff --git a/web/src/components/ExtraStatsDisplay.tsx b/web/src/components/ExtraStatsDisplay.tsx
@@ -42,17 +42,18 @@ const StyledExtraStatTitleSkeleton = styled(StyledSkeleton)`
 
 export interface IExtraStatsDisplay {
   title: string;
-  text: string;
   icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  content?: React.ReactNode;
+  text?: string;
 }
 
-const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, text, icon: Icon, ...props }) => {
+const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, text, content, icon: Icon, ...props }) => {
   return (
     <Container {...props}>
       <SVGContainer>{<Icon />}</SVGContainer>
       <TextContainer>
         <label>{title}:</label>
-        <StyledP>{!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}</StyledP>
+        {content ? content : <StyledP>{!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}</StyledP>}
       </TextContainer>
     </Container>
   );
diff --git a/web/src/hooks/queries/useHomePageBlockQuery.ts b/web/src/hooks/queries/useHomePageBlockQuery.ts
@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
-import { useMemo } from "react";
+import { isUndefined } from "utils/index";
 
 import { graphql } from "src/graphql";
 import { HomePageBlockQuery } from "src/graphql/graphql";
@@ -34,11 +34,32 @@ const homePageBlockQuery = graphql(`
   }
 `);
 
-export const useHomePageBlockQuery = (blockNumber: number | null, allTime: boolean) => {
-  const isEnabled = blockNumber !== null || allTime;
+type Court = HomePageBlockQuery["presentCourts"][number];
+type CourtWithTree = Court & {
+  numberDisputes: number;
+  numberVotes: number;
+  feeForJuror: bigint;
+  effectiveStake: bigint;
+  treeNumberDisputes: number;
+  treeNumberVotes: number;
+  votesPerPnk: number;
+  treeVotesPerPnk: number;
+  expectedRewardPerPnk: number;
+  treeExpectedRewardPerPnk: number;
+};
+
+export type HomePageBlockStats = {
+  mostDisputedCourt: CourtWithTree;
+  bestDrawingChancesCourt: CourtWithTree;
+  bestExpectedRewardCourt: CourtWithTree;
+  courts: CourtWithTree[];
+};
+
+export const useHomePageBlockQuery = (blockNumber: number | undefined, allTime: boolean) => {
+  const isEnabled = !isUndefined(blockNumber) || allTime;
   const { graphqlBatcher } = useGraphqlBatcher();
 
-  const usedQuery = useQuery({
+  return useQuery<HomePageBlockStats>({
     queryKey: [`homePageBlockQuery${blockNumber}-${allTime}`],
     enabled: isEnabled,
     staleTime: Infinity,
@@ -48,104 +69,100 @@ export const useHomePageBlockQuery = (blockNumber: number | null, allTime: boole
         document: homePageBlockQuery,
         variables: { blockNumber },
       });
-      return data;
+
+      return processData(data, allTime);
     },
   });
+};
 
-  const courtActivityStats = useMemo(() => {
-    if (usedQuery.data && !usedQuery.isFetching) {
-      const diffCourts = allTime
-        ? usedQuery.data.presentCourts.map((presentCourt) => ({
-            ...presentCourt,
-            numberDisputes: presentCourt.numberDisputes,
-            treeNumberDisputes: presentCourt.numberDisputes,
-            numberVotes: presentCourt.numberVotes,
-            treeNumberVotes: presentCourt.numberVotes,
-            effectiveStake: presentCourt.effectiveStake,
-            votesPerPnk: Number(presentCourt.numberVotes) / (Number(presentCourt.effectiveStake) / 1e18),
-            treeVotesPerPnk: Number(presentCourt.numberVotes) / (Number(presentCourt.effectiveStake) / 1e18),
-          }))
-        : usedQuery.data.presentCourts.map((presentCourt) => {
-            const pastCourt = usedQuery.data.pastCourts.find((pastCourt) => pastCourt.id === presentCourt.id);
-
-            return {
-              ...presentCourt,
-              numberDisputes: pastCourt
-                ? presentCourt.numberDisputes - pastCourt.numberDisputes
-                : presentCourt.numberDisputes,
-              treeNumberDisputes: pastCourt
-                ? presentCourt.numberDisputes - pastCourt.numberDisputes
-                : presentCourt.numberDisputes,
-              numberVotes: pastCourt ? presentCourt.numberVotes - pastCourt.numberVotes : presentCourt.numberVotes,
-              treeNumberVotes: pastCourt ? presentCourt.numberVotes - pastCourt.numberVotes : presentCourt.numberVotes,
-              effectiveStake: pastCourt
-                ? (BigInt(presentCourt.effectiveStake) + BigInt(pastCourt.effectiveStake)) / 2n
-                : presentCourt.effectiveStake,
-              votesPerPnk:
-                Number(pastCourt ? presentCourt.numberVotes - pastCourt.numberVotes : presentCourt.numberVotes) /
-                (Number(
-                  pastCourt
-                    ? (BigInt(presentCourt.effectiveStake) + BigInt(pastCourt.effectiveStake)) / 2n
-                    : presentCourt.effectiveStake
-                ) /
-                  1e18),
-              treeVotesPerPnk:
-                Number(pastCourt ? presentCourt.numberVotes - pastCourt.numberVotes : presentCourt.numberVotes) /
-                (Number(
-                  pastCourt
-                    ? (BigInt(presentCourt.effectiveStake) + BigInt(pastCourt.effectiveStake)) / 2n
-                    : presentCourt.effectiveStake
-                ) /
-                  1e18),
-            };
-          });
-
-      const mostDisputedCourt = diffCourts.toSorted((a, b) => b.numberDisputes - a.numberDisputes)[0];
-      // 1. biggest chances of getting drawn
-      // fact: getting drawn in a parent court also subjects you to its rewards
-      // so, rewards/disputes trickle down
-
-      for (const parent of diffCourts) {
-        for (const child of diffCourts) {
-          if (parent.id === child.parent?.id) {
-            child.treeNumberVotes = String(Number(parent.treeNumberVotes) + Number(child.treeNumberVotes));
-          }
-        }
-      }
+const processData = (data: HomePageBlockQuery, allTime: boolean) => {
+  const presentCourts = data.presentCourts;
+  const pastCourts = data.pastCourts;
+  const processedCourts: CourtWithTree[] = Array(presentCourts.length);
+  const processed = new Set();
 
-      for (const parent of diffCourts) {
-        for (const child of diffCourts) {
-          if (parent.id === child.parent?.id) {
-            child.treeVotesPerPnk += parent.votesPerPnk;
-          }
-        }
-      }
-      const bestDrawingChancesCourt = diffCourts.toSorted((a, b) => b.treeVotesPerPnk - a.treeVotesPerPnk)[0];
-      // 2. expected reward
-      // since we isolated the exclusive disputes from the cumulative disputes
-      // we can calculate the "isolated reward" of every court
-      // after that's done, then just trickle the rewards down
-
-      for (const c of diffCourts) {
-        c.expectedRewardPerPnk = c.votesPerPnk * c.feeForJuror;
-        c.treeExpectedRewardPerPnk = c.expectedRewardPerPnk;
-      }
-      for (const parent of diffCourts) {
-        for (const child of diffCourts) {
-          if (parent.id === child.parent?.id) {
-            child.treeExpectedRewardPerPnk = parent.treeExpectedRewardPerPnk + child.treeExpectedRewardPerPnk;
-          }
-        }
-      }
-      const bestExpectedRewardCourt = diffCourts.toSorted(
-        (a, b) => b.treeExpectedRewardPerPnk - a.treeExpectedRewardPerPnk
-      )[0];
+  const processCourt = (id: number): CourtWithTree => {
+    if (processed.has(id)) return processedCourts[id];
+
+    processed.add(id);
+    const court =
+      !allTime && id < data.pastCourts.length
+        ? addTreeValuesWithDiff(presentCourts[id], pastCourts[id])
+        : addTreeValues(presentCourts[id]);
+    const parentIndex = court.parent ? Number(court.parent.id) - 1 : 0;
 
-      return { mostDisputedCourt, bestDrawingChancesCourt, bestExpectedRewardCourt, diffCourts };
-    } else {
-      return undefined;
+    if (id === parentIndex) {
+      processedCourts[id] = court;
+      return court;
     }
-  }, [usedQuery]);
 
-  return courtActivityStats;
+    processedCourts[id] = {
+      ...court,
+      treeNumberDisputes: court.treeNumberDisputes + processCourt(parentIndex).treeNumberDisputes,
+      treeNumberVotes: court.treeNumberVotes + processCourt(parentIndex).treeNumberVotes,
+      treeVotesPerPnk: court.treeVotesPerPnk + processCourt(parentIndex).treeVotesPerPnk,
+      treeExpectedRewardPerPnk: court.treeExpectedRewardPerPnk + processCourt(parentIndex).treeExpectedRewardPerPnk,
+    };
+
+    return processedCourts[id];
+  };
+
+  for (const court of presentCourts.toReversed()) {
+    processCourt(Number(court.id) - 1);
+  }
+
+  processedCourts.reverse();
+
+  return {
+    mostDisputedCourt: getCourtMostDisputes(processedCourts),
+    bestDrawingChancesCourt: getCourtBestDrawingChances(processedCourts),
+    bestExpectedRewardCourt: getBestExpectedRewardCourt(processedCourts),
+    courts: processedCourts,
+  };
 };
+
+const addTreeValues = (court: Court): CourtWithTree => {
+  const votesPerPnk = Number(court.numberVotes) / (Number(court.effectiveStake) / 1e18);
+  const expectedRewardPerPnk = votesPerPnk * (Number(court.feeForJuror) / 1e18);
+  return {
+    ...court,
+    numberDisputes: Number(court.numberDisputes),
+    numberVotes: Number(court.numberVotes),
+    feeForJuror: BigInt(court.feeForJuror) / BigInt(1e18),
+    effectiveStake: BigInt(court.effectiveStake),
+    treeNumberDisputes: Number(court.numberDisputes),
+    treeNumberVotes: Number(court.numberVotes),
+    votesPerPnk,
+    treeVotesPerPnk: votesPerPnk,
+    expectedRewardPerPnk,
+    treeExpectedRewardPerPnk: expectedRewardPerPnk,
+  };
+};
+
+const addTreeValuesWithDiff = (presentCourt: Court, pastCourt: Court): CourtWithTree => {
+  const presentCourtWithTree = addTreeValues(presentCourt);
+  const pastCourtWithTree = addTreeValues(pastCourt);
+  const diffNumberVotes = presentCourtWithTree.numberVotes - pastCourtWithTree.numberVotes;
+  const avgEffectiveStake = (presentCourtWithTree.effectiveStake + pastCourtWithTree.effectiveStake) / 2n;
+  const votesPerPnk = diffNumberVotes / Number(avgEffectiveStake);
+  const expectedRewardPerPnk = votesPerPnk * Number(presentCourt.feeForJuror);
+  return {
+    ...presentCourt,
+    numberDisputes: presentCourtWithTree.numberDisputes - pastCourtWithTree.numberDisputes,
+    treeNumberDisputes: presentCourtWithTree.treeNumberDisputes - pastCourtWithTree.treeNumberDisputes,
+    numberVotes: diffNumberVotes,
+    treeNumberVotes: presentCourtWithTree.treeNumberVotes - pastCourtWithTree.treeNumberVotes,
+    effectiveStake: avgEffectiveStake,
+    votesPerPnk,
+    treeVotesPerPnk: votesPerPnk,
+    expectedRewardPerPnk,
+    treeExpectedRewardPerPnk: expectedRewardPerPnk,
+  };
+};
+
+const getCourtMostDisputes = (courts: CourtWithTree[]) =>
+  courts.toSorted((a: CourtWithTree, b: CourtWithTree) => b.numberDisputes - a.numberDisputes)[0];
+const getCourtBestDrawingChances = (courts: CourtWithTree[]) =>
+  courts.toSorted((a, b) => b.treeVotesPerPnk - a.treeVotesPerPnk)[0];
+const getBestExpectedRewardCourt = (courts: CourtWithTree[]) =>
+  courts.toSorted((a, b) => b.treeExpectedRewardPerPnk - a.treeExpectedRewardPerPnk)[0];
diff --git a/web/src/hooks/queries/useHomePageExtraStats.ts b/web/src/hooks/queries/useHomePageExtraStats.ts
@@ -1,10 +1,16 @@
 import { useEffect, useState } from "react";
-import { DEFAULT_CHAIN } from "consts/chains";
-import { useHomePageBlockQuery } from "./useHomePageBlockQuery";
+
+import { UseQueryResult } from "@tanstack/react-query";
 import { useBlockNumber } from "wagmi";
+
 import { averageBlockTimeInSeconds } from "consts/averageBlockTimeInSeconds";
+import { DEFAULT_CHAIN } from "consts/chains";
+
+import { useHomePageBlockQuery, HomePageBlockStats } from "./useHomePageBlockQuery";
+
+type ReturnType = UseQueryResult<HomePageBlockStats, Error>;
 
-export const useHomePageExtraStats = (days: number | string) => {
+export const useHomePageExtraStats = (days: number | string): ReturnType => {
   const [pastBlockNumber, setPastBlockNumber] = useState<number>();
   const currentBlockNumber = useBlockNumber({ chainId: DEFAULT_CHAIN });
 
@@ -13,7 +19,7 @@ export const useHomePageExtraStats = (days: number | string) => {
       const timeInBlocks = Math.floor((days * 24 * 3600) / averageBlockTimeInSeconds[DEFAULT_CHAIN]);
       setPastBlockNumber(Number(currentBlockNumber.data) - timeInBlocks);
     }
-  }, [DEFAULT_CHAIN, currentBlockNumber, days]);
+  }, [currentBlockNumber, days]);
 
   const data = useHomePageBlockQuery(pastBlockNumber, days === "allTime");
 
diff --git a/web/src/pages/Home/CourtOverview/ExtraStats.tsx b/web/src/pages/Home/CourtOverview/ExtraStats.tsx
@@ -1,12 +1,14 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
+import { DropdownSelect } from "@kleros/ui-components-library";
+
 import LawBalance from "svgs/icons/law-balance.svg";
 import LongArrowUp from "svgs/icons/long-arrow-up.svg";
 
 import { useHomePageExtraStats } from "hooks/queries/useHomePageExtraStats";
+
 import ExtraStatsDisplay from "components/ExtraStatsDisplay";
-import { DropdownSelect } from "@kleros/ui-components-library";
 
 const StyledCard = styled.div`
   display: flex;
@@ -17,24 +19,24 @@ const StyledCard = styled.div`
 
 interface IStat {
   title: string;
-  getText: (data) => string | null;
+  getText: (data) => string;
   icon: React.FC<React.SVGAttributes<SVGElement>>;
 }
 
 const stats: IStat[] = [
   {
     title: "Most Cases",
-    getText: (data) => data?.mostDisputedCourt?.name,
+    getText: ({ data }) => data?.mostDisputedCourt?.name,
     icon: LongArrowUp,
   },
   {
     title: "Highest drawing chance",
-    getText: (data) => data?.bestDrawingChancesCourt?.name,
+    getText: ({ data }) => data?.bestDrawingChancesCourt?.name,
     icon: LongArrowUp,
   },
   {
     title: "Highest rewards chance",
-    getText: (data) => data?.bestExpectedRewardCourt?.name,
+    getText: ({ data }) => data?.bestExpectedRewardCourt?.name,
     icon: LongArrowUp,
   },
 ];
@@ -61,7 +63,7 @@ const ExtraStats = () => {
     <StyledCard>
       <ExtraStatsDisplay
         title="Activity"
-        text={
+        content={
           <DropdownSelect
             smallButton
             simpleButton
