feat: new level calculations and score in leaderboard

kemuru · kemuru · commit d0b6c7c2e7a7 · 2025-03-27T13:59:34.000+01:00
diff --git a/web/src/components/Popup/MiniGuides/JurorLevels.tsx b/web/src/components/Popup/MiniGuides/JurorLevels.tsx
@@ -31,64 +31,73 @@ const Card = styled(_Card)`
 `;
 
 const leftPageContents = [
+  {
+    title: "Juror Level 0: Diogenes",
+    paragraphs: [
+      "Coherence Score below 25.",
+      "This level is for new jurors or those frequently voting incoherently. A few coherent votes can help climb out of this level quickly.",
+    ],
+  },
   {
     title: "Juror Level 1: Pythagoras",
     paragraphs: [
-      "Jurors are classified into distinct levels according to their performance starting from Level 1.",
-      "Level 1: Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
+      "Coherence Score between 25 and 49.",
+      "Jurors here are gaining experience and starting to build voting reliability.",
     ],
   },
   {
     title: "Juror Level 2: Socrates",
-    paragraphs: ["Level 2: Jurors with ≥ 3 cases arbitrated with more than 70% coherent votes."],
+    paragraphs: [
+      "Coherence Score between 50 and 69.",
+      "Mid-tier performance. Jurors at this level have demonstrated reasonable consistency in coherent voting.",
+    ],
   },
   {
     title: "Juror Level 3: Plato",
-    paragraphs: ["Level 3: Jurors with ≥ 7 cases arbitrated with more than 80% of coherent votes."],
+    paragraphs: [
+      "Coherence Score between 70 and 89.",
+      "Reliable jurors with a consistent track record of coherent votes. Just a few more coherent votes away from reaching the top.",
+    ],
   },
   {
     title: "Juror Level 4: Aristotle",
-    paragraphs: ["Level 4: Jurors with ≥ 10 cases arbitrated with more than 90% of coherent votes."],
-  },
-  {
-    title: "Juror Level 0: Diogenes",
     paragraphs: [
-      "There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated" +
-        " with less than 50% of coherent votes.",
+      "Coherence Score between 90 and 100.",
+      "Top-tier jurors with excellent coherence. Trusted members of the platform.",
     ],
   },
 ];
 
 const userLevelData = [
+  {
+    level: 0,
+    title: "Diogenes",
+    totalCoherentVotes: 2,
+    totalResolvedVotes: 10,
+  },
   {
     level: 1,
     title: "Pythagoras",
     totalCoherentVotes: 6,
-    totalResolvedVotes: 10,
+    totalResolvedVotes: 12,
   },
   {
     level: 2,
     title: "Socrates",
-    totalCoherentVotes: 7,
-    totalResolvedVotes: 10,
+    totalCoherentVotes: 22,
+    totalResolvedVotes: 34,
   },
   {
     level: 3,
     title: "Plato",
-    totalCoherentVotes: 8,
-    totalResolvedVotes: 10,
+    totalCoherentVotes: 52,
+    totalResolvedVotes: 65,
   },
   {
     level: 4,
     title: "Aristotle",
-    totalCoherentVotes: 9,
-    totalResolvedVotes: 10,
-  },
-  {
-    level: 0,
-    title: "Diogenes",
-    totalCoherentVotes: 3,
-    totalResolvedVotes: 10,
+    totalCoherentVotes: 90,
+    totalResolvedVotes: 90,
   },
 ];
 
diff --git a/web/src/pages/Home/TopJurors/Header/Coherence.tsx b/web/src/pages/Home/TopJurors/Header/Coherence.tsx
@@ -11,7 +11,7 @@ const Container = styled.div`
   display: flex;
   font-size: 12px !important;
   &::before {
-    content: "Coherence";
+    content: "Coherent\u00a0Votes";
   }
   color: ${({ theme }) => theme.secondaryText};
   align-items: center;
@@ -25,11 +25,10 @@ const Container = styled.div`
 `;
 
 const coherentVotesTooltipMsg =
-  "This is the percentage of coherent votes made by a juror." +
-  " Hover to see the ratio of coherent votes: " +
+  "This is the ratio of coherent votes made by a juror: " +
   "the number in the left is the number of times where the juror " +
   "voted coherently and the number in the right is the total number of times " +
-  "the juror voted";
+  "the juror voted. Hover to see the percentage of coherent votes.";
 
 const Coherence: React.FC = () => {
   const isDesktop = useIsDesktop();
diff --git a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx
@@ -16,6 +16,7 @@ import JurorLevels from "components/Popup/MiniGuides/JurorLevels";
 
 import Coherence from "./Coherence";
 import Rewards from "./Rewards";
+import Score from "./Score";
 
 const Container = styled.div<{ renderIcon?: boolean }>`
   display: none;
@@ -31,10 +32,8 @@ const Container = styled.div<{ renderIcon?: boolean }>`
     landscapeStyle(
       () => css`
         display: grid;
-        grid-template-columns: ${renderIcon
-          ? `min-content repeat(3, ${responsiveSize(160, 180, 900)}) auto`
-          : `repeat(3, ${responsiveSize(160, 180, 900)}) auto`};
-        column-gap: ${responsiveSize(12, 28, 900)};
+        grid-template-columns: ${renderIcon ? `min-content 1fr 0.8fr 1fr 1.6fr 1fr` : `1fr 0.8fr 1fr 1.6fr 1fr`};
+        column-gap: ${responsiveSize(12, 24, 900)};
         align-items: center;
       `
     )}
@@ -65,8 +64,9 @@ export const DesktopHeader: React.FC = () => {
     <Container renderIcon={renderIcon}>
       {renderIcon ? <StyledRankingIcon /> : null}
       <StyledLabel>Juror</StyledLabel>
-      <Rewards />
+      <Score />
       <Coherence />
+      <Rewards />
       <HowItWorksContainer>
         <HowItWorks
           isMiniGuideOpen={isJurorLevelsMiniGuideOpen}
diff --git a/web/src/pages/Home/TopJurors/Header/Score.tsx b/web/src/pages/Home/TopJurors/Header/Score.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { landscapeStyle } from "styles/landscapeStyle";
+
+import useIsDesktop from "hooks/useIsDesktop";
+
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+const Container = styled.div`
+  display: flex;
+  font-size: 12px !important;
+  &::before {
+    content: "Score";
+  }
+  color: ${({ theme }) => theme.secondaryText};
+  align-items: center;
+
+  ${landscapeStyle(
+    () => css`
+      font-size: 14px !important;
+      justify-content: center;
+    `
+  )}
+`;
+
+const scoreTooltipMsg =
+  "A score from 0 to 100 reflecting coherent voting, smoothed " +
+  "to prevent jurors with low vote counts from ranking too high.";
+
+const Score: React.FC = () => {
+  const isDesktop = useIsDesktop();
+
+  return (
+    <Container>
+      <WithHelpTooltip place={isDesktop ? "top" : "left"} tooltipMsg={scoreTooltipMsg}></WithHelpTooltip>
+    </Container>
+  );
+};
+export default Score;
diff --git a/web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx b/web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx
@@ -24,8 +24,8 @@ const Coherence: React.FC<ICoherence> = ({ totalCoherentVotes, totalResolvedVote
 
   return (
     <Container>
-      <Tooltip text={coherenceRatio}>
-        {getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes))}
+      <Tooltip text={getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes))}>
+        {coherenceRatio}
       </Tooltip>
     </Container>
   );
diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx
@@ -10,6 +10,7 @@ import JurorLevel from "./JurorLevel";
 import JurorTitle from "./JurorTitle";
 import Rank from "./Rank";
 import Rewards from "./Rewards";
+import Score from "./Score";
 
 const Container = styled.div<{ renderRank?: boolean }>`
   ${hoverShortTransitionTiming}
@@ -25,10 +26,8 @@ const Container = styled.div<{ renderRank?: boolean }>`
     landscapeStyle(
       () => css`
         display: grid;
-        grid-template-columns: ${renderRank
-          ? `min-content repeat(3, ${responsiveSize(160, 180, 900)}) auto`
-          : `repeat(3, ${responsiveSize(160, 180, 900)}) auto`};
-        column-gap: ${responsiveSize(12, 28, 900)};
+        grid-template-columns: ${renderRank ? `min-content 1fr 0.8fr 1fr 1.6fr 1fr` : `1fr 0.8fr 1fr 1.6fr 1fr`};
+        column-gap: ${responsiveSize(12, 24, 900)};
       `
     )}
 
@@ -40,27 +39,28 @@ const Container = styled.div<{ renderRank?: boolean }>`
 interface IDesktopCard {
   rank?: number;
   address: string;
+  coherenceScore: string;
   totalCoherentVotes: string;
   totalResolvedVotes: string;
-  totalResolvedDisputes: string;
 }
 
 const DesktopCard: React.FC<IDesktopCard> = ({
   rank,
   address,
+  coherenceScore,
   totalCoherentVotes,
   totalResolvedVotes,
-  totalResolvedDisputes,
 }) => {
   const renderRank = !!rank;
 
   return (
     <Container renderRank={renderRank}>
       {renderRank && <Rank rank={rank} />}
       <JurorTitle address={address} />
-      <Rewards address={address} />
+      <Score coherenceScore={coherenceScore} />
       <Coherence {...{ totalCoherentVotes, totalResolvedVotes }} />
-      <JurorLevel {...{ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }} />
+      <Rewards address={address} />
+      <JurorLevel coherenceScore={Number(coherenceScore)} />
     </Container>
   );
 };
diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx
@@ -4,7 +4,6 @@ import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import { getUserLevelData } from "utils/userLevelCalculation";
-import { getCoherencePercent } from "utils/getCoherencePercent";
 
 import PixelArt from "pages/Profile/JurorInfo/PixelArt";
 
@@ -40,14 +39,11 @@ const StyledLabel = styled.label`
 `;
 
 interface IJurorLevel {
-  totalCoherentVotes: string;
-  totalResolvedVotes: string;
-  totalResolvedDisputes: string;
+  coherenceScore: number;
 }
 
-const JurorLevel: React.FC<IJurorLevel> = ({ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }) => {
-  const coherencePercentage = getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes));
-  const userLevelData = getUserLevelData(coherencePercentage, Number(totalResolvedDisputes));
+const JurorLevel: React.FC<IJurorLevel> = ({ coherenceScore }) => {
+  const userLevelData = getUserLevelData(coherenceScore);
   const level = userLevelData.level;
 
   return (
diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx
@@ -82,15 +82,15 @@ interface IMobileCard {
   address: string;
   totalCoherentVotes: string;
   totalResolvedVotes: string;
-  totalResolvedDisputes: string;
+  coherenceScore: string;
 }
 
 const MobileCard: React.FC<IMobileCard> = ({
   rank,
   address,
   totalCoherentVotes,
   totalResolvedVotes,
-  totalResolvedDisputes,
+  coherenceScore,
 }) => {
   return (
     <Container>
@@ -99,7 +99,7 @@ const MobileCard: React.FC<IMobileCard> = ({
           {rank ? <Rank rank={rank} /> : null}
           <JurorTitle address={address} />
         </RankAndTitle>
-        <JurorLevel {...{ totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes }} />
+        <JurorLevel coherenceScore={Number(coherenceScore)} />
       </TopSide>
       <BottomSide>
         <HeaderRewardsAndRewards>
diff --git a/web/src/pages/Home/TopJurors/JurorCard/Score.tsx b/web/src/pages/Home/TopJurors/JurorCard/Score.tsx
@@ -0,0 +1,27 @@
+import { Tooltip } from "@kleros/ui-components-library";
+import React from "react";
+
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
+interface IScore {
+  coherenceScore: string;
+}
+
+const Score: React.FC<IScore> = ({ coherenceScore }) => {
+  return (
+    <Container>
+      <Tooltip text={coherenceScore}>{coherenceScore}</Tooltip>
+    </Container>
+  );
+};
+
+export default Score;
diff --git a/web/src/pages/Home/TopJurors/JurorCard/index.tsx b/web/src/pages/Home/TopJurors/JurorCard/index.tsx
@@ -6,19 +6,13 @@ import MobileCard from "./MobileCard";
 interface IJurorCard {
   rank: number;
   address: `0x${string}`;
+  coherenceScore: string;
   totalCoherentVotes: string;
   totalResolvedVotes: string;
-  totalResolvedDisputes: string;
 }
 
-const JurorCard: React.FC<IJurorCard> = ({
-  rank,
-  address,
-  totalCoherentVotes,
-  totalResolvedVotes,
-  totalResolvedDisputes,
-}) => {
-  const allProps = { rank, address, totalCoherentVotes, totalResolvedVotes, totalResolvedDisputes };
+const JurorCard: React.FC<IJurorCard> = ({ rank, address, coherenceScore, totalCoherentVotes, totalResolvedVotes }) => {
+  const allProps = { rank, address, coherenceScore, totalCoherentVotes, totalResolvedVotes };
 
   return (
     <>
diff --git a/web/src/pages/Profile/JurorInfo/index.tsx b/web/src/pages/Profile/JurorInfo/index.tsx
@@ -4,7 +4,6 @@ import styled, { css } from "styled-components";
 import { Card as _Card } from "@kleros/ui-components-library";
 
 import { getUserLevelData } from "utils/userLevelCalculation";
-import { getCoherencePercent } from "utils/getCoherencePercent";
 
 import { useUserQuery } from "queries/useUser";
 
@@ -46,9 +45,8 @@ const JurorInfo: React.FC<IJurorInfo> = ({ addressToQuery }) => {
   const { data } = useUserQuery(addressToQuery);
   const totalCoherentVotes = data?.user ? parseInt(data?.user?.totalCoherentVotes) : 0;
   const totalResolvedVotes = data?.user ? parseInt(data?.user?.totalResolvedVotes) : 0;
-  const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 0;
-  const coherencePercentage = getCoherencePercent(Number(totalCoherentVotes), Number(totalResolvedVotes));
-  const userLevelData = getUserLevelData(coherencePercentage, totalResolvedDisputes);
+  const coherenceScore = data?.user ? parseInt(data?.user?.coherenceScore) : 0;
+  const userLevelData = getUserLevelData(coherenceScore);
 
   return (
     <Container>
diff --git a/web/src/utils/userLevelCalculation.ts b/web/src/utils/userLevelCalculation.ts
