Merge pull request #194 from oss-slu/feature/leaderboard-streak

hcaballero2 · web-flow · commit fd0f36502274 · 2026-04-13T16:25:37.000-05:00
Added streak-based leaderboard logic and UI updates
diff --git a/Backend/streakCalculation.py b/Backend/streakCalculation.py
@@ -1,10 +1,10 @@
 from datetime import datetime, timedelta
 
-ISSUE_THRESHOLD = 3
+ISSUE_THRESHOLD = 1
 
 def get_week_start(date_obj):
     """
-    Returns the Monday of the week for a given data
+    Returns the Monday of the week for a given date
     """
     return (date_obj - timedelta(days=date_obj.weekday())).date()
 
@@ -63,15 +63,16 @@ def calculate_current_streak(closed_issue_dates, threshold=ISSUE_THRESHOLD, refe
     Returns:
         int: current streak count
     """
-    if reference_date is None:
-        reference_date = datetime.now()
-
     weekly_counts = group_issues_by_week(closed_issue_dates)
 
     if not weekly_counts:
         return 0
     
-    current_week_start = get_week_start(reference_date)
+    if reference_date is None:
+        current_week_start = max(weekly_counts.keys())
+    else:
+        current_week_start = get_week_start(reference_date)
+
     streak = 0
     
     while weekly_counts.get(current_week_start, 0) >= threshold:
diff --git a/Frontend/src/components/TopContributorsRepos.jsx b/Frontend/src/components/TopContributorsRepos.jsx
@@ -27,35 +27,84 @@ const TopContributorsRepos = () => {
         <h3>
           Top Contributors{" "}
           <span
+          style={{
+            position: "relative",
+            display: "inline-block",
+            marginLeft: "6px"
+          }}
+          >
+            <span
             tabIndex="0"
             aria-label="Leaderboard streak info"
-            title="A streak increases for every consecutive 7-day period where a user closes at least 3 issues. Streak resets if threshold is not met."
-            style={{ cursor: "pointer", border: "1px solid black", borderRadius: "50%", padding: "2px 6px", fontSize: "12px" }}
+            style={{ 
+              cursor: "pointer", 
+              border: "1px solid black", 
+              borderRadius: "50%", 
+              padding: "2px 6px", 
+              fontSize: "12px",
+              display: "inline-block" 
+            }}
+            onMouseEnter={(e) => {
+              const tooltip = e.currentTarget.nextElementSibling;
+              if (tooltip) tooltip.style.visibility = "visible";
+              if (tooltip) tooltip.style.opacity = "1";
+            }}
+            onMouseLeave={(e) => {
+              const tooltip = e.currentTarget.nextElementSibling;
+              if (tooltip) tooltip.style.visibility = "hidden";
+              if (tooltip) tooltip.style.opacity = "0";
+            }}
           >
             i
           </span>
-        </h3>
-        <ul>
-          {topContributors.map((user) => (
-            <li key={user.name}>
-              {user.name} 🔥 {user.currentStreak} {user.currentStreak === 1 ? "week" : "weeks"} streak ({user.count})
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      {/* Render list of top repositories by activity count */}
-      <div>
-        <h3>Top Repositories</h3>
-        <ul>
-          {topRepos.map((repo) => (
-            <li key={repo.name}>
-              {repo.name} ({repo.count})
-            </li>
-          ))}
-        </ul>
-      </div>
+
+          <span
+            style={{
+              visibility: "hidden",
+              opacity: 0,
+              transition: "opacity 0.2s ease",
+              position: "absolute",
+              top: "28px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              backgroundColor: "#222",
+              color: "#fff",
+              padding: "8px 10px",
+              borderRadius: "6px",
+              fontSize: "12px",
+              width: "260px",
+              zIndex: 1000,
+              boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+              textAlign: "left"
+            }}
+          >
+            A streak increases for every consecutive 7-day period where a user closes at least 3 issues. Streak resets if threshold is not met.
+          </span>
+        </span>
+      </h3>
+        
+      <ul>
+        {topContributors.map((user) => (
+          <li key={user.name}>
+            {user.name} 🔥 {user.currentStreak}{" "}
+            {user.currentStreak === 1 ? "week" : "weeks"} streak ({user.count})
+          </li>
+        ))}
+      </ul>
+    </div>
+
+    {/* Render list of top repositories by activity count */}
+    <div>
+      <h3>Top Repositories</h3>
+      <ul>
+        {topRepos.map((repo) => (
+          <li key={repo.name}>
+            {repo.name} ({repo.count})
+          </li>
+        ))}
+      </ul>
     </div>
+  </div>
   );
 };
 
diff --git a/Frontend/src/components/charts/__tests__/test_getTopContributorsAndRepos.test.js b/Frontend/src/components/charts/__tests__/test_getTopContributorsAndRepos.test.js
@@ -12,35 +12,40 @@ import { describe, it, expect } from "vitest";
 describe("getTopContributorsAndRepos", () => {
   // mock JSON data so that Lint passes
 const mockJSON = {
-    "repo1": {
-      issues: { "alice": { total_issues_opened: 2 }, "bob": { total_issues_opened: 1 } },
+  repo1: {
+    issues: {
+      alice: { currentStreak: 2, total_issues_closed: 2 },
+      bob: { currentStreak: 1, total_issues_closed: 1 }
     },
-    "repo2": {
-      pull_requests: { "charlie": { total_prs_opened: 4 } }
+  },
+  repo2: {
+    issues: {
+      charlie: { currentStreak: 3, total_issues_closed: 4 }
     }
-  };
+  }
+};
 
   
-  it("counts contributor activity and sorts correctly", () => {
+  it("sorts contributors based on streak correctly", () => {
     const {topContributors} = getTopContributorsAndRepos(mockJSON, 5);
-    // charlie: 4, alicce: 2, bob: 1
+    // charlie: 3, alice: 2, bob: 1 (based on streaks in mock data)
     expect(topContributors).toEqual(
       expect.arrayContaining([
-        expect.objectContaining({ name: "charlie", count: 4 }),
-        expect.objectContaining({ name: "alice", count: 2 }),
-        expect.objectContaining({ name: "bob", count: 1 }),
+        expect.objectContaining({ name: "charlie", currentStreak: 3 }),
+        expect.objectContaining({ name: "alice", currentStreak: 2 }),
+        expect.objectContaining({ name: "bob", currentStreak: 1 }),
       ])
     );
   });
 
-  it("counts repository activity and sorts correctly", () => {
+  it("sorts repositories based on streak and active members correctly", () => {
     const { topRepos } =
       getTopContributorsAndRepos(mockJSON, 5);
 
-    // repo1: 3 (2 from alice + 1 from bob), repo2: 4 (from charlie)
+    // repo2: streak 3 (1 member), repo1: streak 2 (2 members)
     expect(topRepos).toEqual([
-      { name: "repo2", count: 4 },
-      { name: "repo1", count:  3},
+      { name: "repo2", streak: 3, activeMembers: 1 },
+      { name: "repo1", streak: 2, activeMembers: 2 },
     ]);
   });
 
diff --git a/Frontend/src/features/home/routes/Home.jsx b/Frontend/src/features/home/routes/Home.jsx
@@ -40,19 +40,33 @@ export const Home = () => {
         </section>
 
         <section className="card-blue" style={{ height: "100%" }}>
-          <h2 className="card-title">Top Contributors/Repos (Issues/PRs)</h2>
+          <h2 className="card-title">Leaderboard Streaks</h2>
           <div className="contributors-wrapper" style={{ display: "flex", gap: "40px", marginTop: "8px" }}>
             
             {/* Top Contributors List */}
             <div style={{ flex: 1 }}>
               <h3 style={{ fontSize: "16px", fontWeight: "bold", color: "#123f8b", marginBottom: "12px", marginTop: 0 }}>
-                Top Contributors
+                Top Contributors{" "}
+                <span
+                  tabIndex="0"
+                  aria-label="Leaderboard streak info"
+                  title="A streak increases for every consecutive 7-day period where a user closes at least 3 issues. Streak resets if threshold is not met."
+                  style={{
+                    cursor: "pointer",
+                    border: "1px solid black",
+                    borderRadius: "50%",
+                    padding: "2px 6px",
+                    fontSize: "12px"
+                  }}
+                >
+                  i
+                </span>
               </h3>
               <ul style={{ margin: 0, paddingLeft: "20px", color: "#374151" }}>
                 {topContributors.length > 0 ? (
                   topContributors.map((user, index) => (
                     <li key={`user-${index}`} style={{ marginBottom: "4px" }}>
-                      {user.name} ({user.count})
+                      {user.name} 🔥 {user.currentStreak} {user.currentStreak === 1 ? "week" : "weeks"} streak
                     </li>
                   ))
                 ) : (
@@ -64,13 +78,27 @@ export const Home = () => {
             {/* Top Repositories List */}
             <div style={{ flex: 1 }}>
               <h3 style={{ fontSize: "16px", fontWeight: "bold", color: "#123f8b", marginBottom: "12px", marginTop: 0 }}>
-                Top Repositories
+                Top Repositories{" "}
+                <span
+                  tabIndex="0"
+                  aria-label="Repository members info"
+                  title="Members indicate the number of active contributors contributing to that repository"
+                  style={{
+                    cursor: "pointer",
+                    border: "1px solid black",
+                    borderRadius: "50%",
+                    padding: "2px 6px",
+                    fontSize: "12px"
+                  }}
+                >
+                  i
+                </span>
               </h3>
               <ul style={{ margin: 0, paddingLeft: "20px", color: "#374151" }}>
                 {topRepos.length > 0 ? (
                   topRepos.map((repo, index) => (
                     <li key={`repo-${index}`} style={{ marginBottom: "4px" }}>
-                      {repo.name} ({repo.count})
+                      {repo.name} 🔥 {repo.streak} {repo.streak === 1 ? "week" : "weeks"} streak ({repo.activeMembers} {repo.activeMembers === 1 ? "member" : "members"})
                     </li>
                   ))
                 ) : (
diff --git a/Frontend/src/utils/getTopContributorsAndRepos.js b/Frontend/src/utils/getTopContributorsAndRepos.js
@@ -80,6 +80,9 @@ export function getTopContributorsAndRepos(lifetimeData, topN, selectedRepo) {
   const contributorStats = {};
   const repoStats = {};
   const contributorIssuesClosed = {};
+  const contributorCurrentStreaks = {};
+  const repoHighestStreaks = {};
+  const repoActiveStreakMembers = {};
 
   // Safely handle empty data
   if (!lifetimeData) return { topContributors: [], topRepos: [] };
@@ -89,6 +92,8 @@ export function getTopContributorsAndRepos(lifetimeData, topN, selectedRepo) {
     if (selectedRepo && repoName !== selectedRepo) return;
     
     let repoTotalActivity = 0;
+    let repoHighestStreak = 0;
+    let repoActiveMembers = 0;
 
     // Helper to safely add metrics to a user's total and the repo's total
     const addActivity = (user, amount, isClosedIssue = false) => {
@@ -117,6 +122,19 @@ export function getTopContributorsAndRepos(lifetimeData, topN, selectedRepo) {
 
         addActivity(user, stats.total_issues_opened);
         addActivity(user, stats.total_issues_closed, true);
+
+        contributorCurrentStreaks[user] = Math.max(
+          contributorCurrentStreaks[user] || 0,
+          Number(stats.currentStreak) || 0
+        );
+
+        const userStreak = Number(stats.currentStreak) || 0;
+
+        if (userStreak > 0) {
+          repoActiveMembers += 1;
+        }
+
+        repoHighestStreak = Math.max(repoHighestStreak, userStreak);
       });
     }
 
@@ -137,6 +155,9 @@ export function getTopContributorsAndRepos(lifetimeData, topN, selectedRepo) {
     if (repoTotalActivity > 0) {
       repoStats[repoName] = (repoStats[repoName] || 0) + repoTotalActivity;
     }
+
+    repoHighestStreaks[repoName] = repoHighestStreak;
+    repoActiveStreakMembers[repoName] = repoActiveMembers;
   });
 
   // Sort contributors by streak first, then closed issues, then alphabetically
@@ -145,19 +166,28 @@ export function getTopContributorsAndRepos(lifetimeData, topN, selectedRepo) {
       name, 
       count,
       totalIssuesClosed: contributorIssuesClosed[name] || 0,
-      currentStreak: 0 // Placeholder for now
+      currentStreak: contributorCurrentStreaks[name] || 0
     }))
     .sort((a, b) => 
       b.currentStreak - a.currentStreak ||
-      b.totalIssuesClosed - a.totalIssuesClosed ||
-      a.name.localeCompare(b.name))
+      a.name.localeCompare(b.name)
+    )
     .slice(0, topN);
 
-  // Sort repositories by activity volume (descending), then alphabetically
-  const topRepos = Object.entries(repoStats)
-    .map(([name, count]) => ({ name, count }))
-    .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name))
+  // Sort repositories by highest streak first, then by how many members have a streak, then alphabetically
+  const topRepos = Object.keys(repoHighestStreaks)
+    .map((name) => ({
+      name,
+      streak: repoHighestStreaks[name] || 0,
+      activeMembers: repoActiveStreakMembers[name] || 0
+    }))
+    .filter((repo) => repo.streak > 0)
+    .sort((a, b) =>
+      b.streak - a.streak ||
+      b.activeMembers - a.activeMembers ||
+      a.name.localeCompare(b.name)
+    )
     .slice(0, topN);
-
-  return { topContributors, topRepos };
+  
+return { topContributors, topRepos };
 }
diff --git a/docs/leaderboard_streak_plan.md b/docs/leaderboard_streak_plan.md
