Leaderboard

src/commons/application/ApplicationTypes.ts

@@ -2,6 +2,7 @@ import { Chapter, Language, type SourceError, type Value, Variant } from 'js-sla
 
 import type { AchievementState } from '../../features/achievement/AchievementTypes';
 import type { DashboardState } from '../../features/dashboard/DashboardTypes';
+import type { LeaderboardState } from '../../features/leaderboard/LeaderboardTypes';
 import type { PlaygroundState } from '../../features/playground/PlaygroundTypes';
 import { PlaybackStatus, RecordingStatus } from '../../features/sourceRecorder/SourceRecorderTypes';
 import type { StoriesEnvState, StoriesState } from '../../features/stories/StoriesTypes';
@@ -26,6 +27,7 @@ import type { VscodeState as VscodeState } from './types/VscodeTypes';
 export type OverallState = {
   readonly router: RouterState;
   readonly achievement: AchievementState;
+  readonly leaderboard: LeaderboardState;
   readonly playground: PlaygroundState;
   readonly session: SessionState;
   readonly stories: StoriesState;
@@ -345,6 +347,16 @@ export const defaultAchievement: AchievementState = {
   assessmentOverviews: []
 };
 
+export const defaultLeaderboard: LeaderboardState = {
+  userXp: [],
+  paginatedUserXp: { rows: [], userCount: 0 },
+  contestScore: [],
+  contestPopularVote: [],
+  code: '',
+  contests: [],
+  initialRun: {}
+};
+
 const getDefaultLanguageConfig = (): SALanguage => {
   const languageConfig = ALL_LANGUAGES.find(
     sublang =>
@@ -604,6 +616,7 @@ export const defaultVscode: VscodeState = {
 export const defaultState: OverallState = {
   router: defaultRouter,
   achievement: defaultAchievement,
+  leaderboard: defaultLeaderboard,
   dashboard: defaultDashboard,
   playground: defaultPlayground,
   session: defaultSession,

src/commons/application/reducers/RootReducer.ts

@@ -1,9 +1,10 @@
 import { combineReducers, Reducer } from '@reduxjs/toolkit';
-import { FeatureFlagsReducer as featureFlags } from 'src/commons/featureFlags';
 import { SourceActionType } from 'src/commons/utils/ActionsHelper';
 
+import { FeatureFlagsReducer as featureFlags } from '../../..//commons/featureFlags';
 import { AchievementReducer as achievement } from '../../../features/achievement/AchievementReducer';
 import { DashboardReducer as dashboard } from '../../../features/dashboard/DashboardReducer';
+import { LeaderboardReducer as leaderboard } from '../../../features/leaderboard/LeaderboardReducer';
 import { PlaygroundReducer as playground } from '../../../features/playground/PlaygroundReducer';
 import { StoriesReducer as stories } from '../../../features/stories/StoriesReducer';
 import { FileSystemReducer as fileSystem } from '../../fileSystem/FileSystemReducer';
@@ -17,6 +18,7 @@ import { VscodeReducer as vscode } from './VscodeReducer';
 const rootReducer: Reducer<OverallState, SourceActionType> = combineReducers({
   router,
   achievement,
+  leaderboard,
   dashboard,
   playground,
   session,

src/commons/application/types/SessionTypes.ts

@@ -39,6 +39,10 @@ export type SessionState = {
   readonly enableAchievements?: boolean;
   readonly enableSourcecast?: boolean;
   readonly enableStories?: boolean;
+  readonly enableOverallLeaderboard?: boolean;
+  readonly enableContestLeaderboard?: boolean;
+  readonly topLeaderboardDisplay?: number;
+  readonly topContestLeaderboardDisplay?: number;
   readonly sourceChapter?: Chapter;
   readonly sourceVariant?: Variant;
   readonly moduleHelpText?: string;
@@ -105,6 +109,10 @@ export type CourseConfiguration = {
   enableAchievements: boolean;
   enableSourcecast: boolean;
   enableStories: boolean;
+  enableOverallLeaderboard: boolean;
+  enableContestLeaderboard: boolean;
+  topLeaderboardDisplay: number;
+  topContestLeaderboardDisplay: number;
   sourceChapter: Chapter;
   sourceVariant: Variant;
   moduleHelpText: string;

src/commons/assessment/Assessment.tsx

@@ -40,7 +40,7 @@ import NotificationBadge from '../notificationBadge/NotificationBadge';
 import { filterNotificationsByAssessment } from '../notificationBadge/NotificationBadgeHelper';
 import Constants from '../utils/Constants';
 import { beforeNow, getPrettyDate, getPrettyDateAfterHours } from '../utils/DateHelper';
-import { useResponsive, useSession } from '../utils/Hooks';
+import { useResponsive, useSession, useTypedSelector } from '../utils/Hooks';
 import { assessmentTypeLink, convertParamToInt } from '../utils/ParamParseHelper';
 import AssessmentNotFound from './AssessmentNotFound';
 import {
@@ -279,6 +279,8 @@ const Assessment: React.FC = () => {
     [assessmentConfigToLoad.type, assessmentOverviewsUnfiltered]
   );
 
+  const fromLeaderboard: boolean = useTypedSelector(store => store.leaderboard.code) ? true : false;
+
   // If assessmentId or questionId is defined but not numeric, redirect back to the Assessment overviews page
   if (
     (params.assessmentId && !params.assessmentId?.match(numberRegExp)) ||
@@ -307,7 +309,8 @@ const Assessment: React.FC = () => {
       canSave:
         role !== Role.Student ||
         (overview.status !== AssessmentStatuses.submitted && !beforeNow(overview.closeAt)),
-      assessmentConfiguration: assessmentConfigToLoad
+      assessmentConfiguration: assessmentConfigToLoad,
+      fromContestLeaderboard: fromLeaderboard
     };
     return <AssessmentWorkspace {...assessmentWorkspaceProps} />;
   }

src/commons/assessment/AssessmentTypes.ts

@@ -194,6 +194,7 @@ export type ContestEntry = {
   score?: number;
   final_score?: number;
   student_name?: string;
+  rank?: number;
 };
 
 export type ContestEntryCodeAnswer = {

src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

@@ -19,6 +19,7 @@
 import { useNavigate } from 'react-router';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 import { onClickProgress } from 'src/features/assessments/AssessmentUtils';
+import LeaderboardActions from 'src/features/leaderboard/LeaderboardActions';
 import Messages, { sendToWebview } from 'src/features/vscode/messages';
 import { mobileOnlyTabIds } from 'src/pages/playground/PlaygroundTabs';
 
@@ -85,6 +86,7 @@
   notAttempted: boolean;
   canSave: boolean;
   assessmentConfiguration: AssessmentConfiguration;
+  fromContestLeaderboard: boolean;
 };
 
 const workspaceLocation: WorkspaceLocation = 'assessment';
@@ -187,6 +189,17 @@
     };
   }, [dispatch]);
 
+  const code = useTypedSelector(store => store.leaderboard.code);
+  const initialRunCompleted = useTypedSelector(store => store.leaderboard.initialRun);
+  const votingId = props.assessmentId;
+
+  useEffect(() => {
+    if (initialRunCompleted[votingId] && props.fromContestLeaderboard && code != '') {
+      dispatch(WorkspaceActions.updateEditorValue(workspaceLocation, 0, code));
+      dispatch(LeaderboardActions.clearCode());
+    }
+  }, [dispatch]);
+
   useEffect(() => {
     if (assessmentOverview && assessmentOverview.maxTeamSize > 1) {
       handleTeamOverviewFetch(props.assessmentId);
@@ -226,7 +239,10 @@
    */
   useEffect(() => {
     checkWorkspaceReset();
-  });
+    if (assessment != undefined && question.type == 'voting') {
+      dispatch(LeaderboardActions.setWorkspaceInitialRun(votingId));
+    }
+  }, [dispatch, assessment]);
 
   /**
    * Handles toggling enabling and disabling token counter depending on assessment properties
@@ -368,6 +384,7 @@
       case QuestionTypes.voting:
         const votingQuestionData: IContestVotingQuestion = question;
         options.programPrependValue = votingQuestionData.prepend;
+        if (props.fromContestLeaderboard) options.editorValue = code;
         options.programPostpendValue = votingQuestionData.postpend;
         break;
       case QuestionTypes.mcq:

src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.test.tsx

@@ -28,6 +28,7 @@ const defaultProps = assertType<AssessmentWorkspaceProps>()({
     hoursBeforeEarlyXpDecay: 48,
     earlySubmissionXp: 200
   },
+  fromContestLeaderboard: false,
   questionId: 0
 });
 

src/commons/dropdown/DropdownCreateCourse.tsx

@@ -40,6 +40,10 @@ const DropdownCreateCourse: React.FC<Props> = props => {
     enableAchievements: true,
     enableSourcecast: true,
     enableStories: false,
+    enableOverallLeaderboard: true,
+    enableContestLeaderboard: true,
+    topLeaderboardDisplay: 100,
+    topContestLeaderboardDisplay: 10,
     sourceChapter: Chapter.SOURCE_1,
     sourceVariant: Variant.DEFAULT,
     moduleHelpText: ''
@@ -197,6 +201,28 @@ const DropdownCreateCourse: React.FC<Props> = props => {
                 })
               }
             />
+            <Switch
+              checked={courseConfig.enableOverallLeaderboard}
+              inline
+              label="Enable Overall Leaderboard"
+              onChange={e =>
+                setCourseConfig({
+                  ...courseConfig,
+                  enableOverallLeaderboard: (e.target as HTMLInputElement).checked
+                })
+              }
+            />
+            <Switch
+              checked={courseConfig.enableContestLeaderboard}
+              inline
+              label="Enable Contest Leaderboard"
+              onChange={e =>
+                setCourseConfig({
+                  ...courseConfig,
+                  enableContestLeaderboard: (e.target as HTMLInputElement).checked
+                })
+              }
+            />
           </div>
           <div>
             <Switch
@@ -236,6 +262,42 @@ const DropdownCreateCourse: React.FC<Props> = props => {
             />
           </div>
         </div>
+        <div>
+          <FormGroup
+            label="Leaderboard Top XX Display"
+            labelInfo="(configurable later on)"
+            labelFor="leaderboard-top-display"
+          >
+            <InputGroup
+              id="leaderboard-top-display"
+              value={String(courseConfig.topLeaderboardDisplay)}
+              onChange={e =>
+                setCourseConfig({
+                  ...courseConfig,
+                  topLeaderboardDisplay: Number(e.target.value)
+                })
+              }
+            />
+          </FormGroup>
+        </div>
+        <div>
+          <FormGroup
+            label="Contest Leaderboard Top XX Display"
+            labelInfo="(configurable later on)"
+            labelFor="contest-leaderboard-top-display"
+          >
+            <InputGroup
+              id="contest-leaderboard-top-display"
+              value={String(courseConfig.topContestLeaderboardDisplay)}
+              onChange={e =>
+                setCourseConfig({
+                  ...courseConfig,
+                  topContestLeaderboardDisplay: Number(e.target.value)
+                })
+              }
+            />
+          </FormGroup>
+        </div>
         <div>
           <FormGroup
             label="Default Source Chapter"

src/commons/mocks/StoreMocks.ts

@@ -6,6 +6,7 @@ import {
   defaultAchievement,
   defaultDashboard,
   defaultFileSystem,
+  defaultLeaderboard,
   defaultPlayground,
   defaultRouter,
   defaultSession,
@@ -26,6 +27,7 @@ export function mockInitialStore(
   const state: OverallState = {
     router: defaultRouter,
     achievement: defaultAchievement,
+    leaderboard: defaultLeaderboard,
     dashboard: defaultDashboard,
     playground: defaultPlayground,
     workspaces: defaultWorkspaceManager,

src/commons/mocks/UserMocks.ts

@@ -373,6 +373,10 @@ export const mockCourseConfigurations: CourseConfiguration[] = [
     enableAchievements: true,
     enableSourcecast: true,
     enableStories: false,
+    enableOverallLeaderboard: true,
+    enableContestLeaderboard: true,
+    topLeaderboardDisplay: 100,
+    topContestLeaderboardDisplay: 10,
     sourceChapter: Chapter.SOURCE_1,
     sourceVariant: Variant.DEFAULT,
     moduleHelpText: '',
@@ -386,6 +390,10 @@ export const mockCourseConfigurations: CourseConfiguration[] = [
     enableAchievements: false,
     enableSourcecast: false,
     enableStories: false,
+    enableOverallLeaderboard: true,
+    enableContestLeaderboard: true,
+    topLeaderboardDisplay: 100,
+    topContestLeaderboardDisplay: 10,
     sourceChapter: Chapter.SOURCE_2,
     sourceVariant: Variant.DEFAULT,
     moduleHelpText: 'Help Text!',

src/commons/navigationBar/NavigationBar.tsx

@@ -97,6 +97,8 @@ const NavigationBar: React.FC = () => {
     courseId,
     courseShortName,
     enableAchievements,
+    enableOverallLeaderboard,
+    enableContestLeaderboard,
     enableSourcecast,
     enableStories,
     assessmentConfigurations
@@ -150,6 +152,13 @@ const NavigationBar: React.FC = () => {
         text: 'Stories',
         // TODO: Enable for public deployment
         disabled: !(isEnrolledInACourse && enableStories)
+      },
+      {
+        to: `/courses/${courseId}/leaderboard`,
+        // icon: IconNames.TIMELINE_BAR_CHART,
+        icon: IconNames.TIMELINE_BAR_CHART,
+        text: 'Leaderboard',
+        disabled: !(isEnrolledInACourse && (enableContestLeaderboard || enableOverallLeaderboard))
       }
     ];
   }, [
@@ -158,7 +167,9 @@ const NavigationBar: React.FC = () => {
     enableSourcecast,
     enableStories,
     isLoggedIn,
-    enableAchievements
+    enableAchievements,
+    enableContestLeaderboard,
+    enableOverallLeaderboard
   ]);
 
   const fullAcademyMobileNavbarLeftAdditionalInfo = useMemo(
@@ -211,7 +222,8 @@ const NavigationBar: React.FC = () => {
       '/sicpjs',
       '/contributors',
       `/courses/${courseId}/sourcecast`,
-      `/courses/${courseId}/achievements`
+      `/courses/${courseId}/achievements`,
+      `/courses/${courseId}/leaderboard`
     ];
     const enableDesktopPopover =
       courseId != null && !!topNavbarNavlinks.find(x => location.pathname.startsWith(x));
@@ -306,6 +318,7 @@ const NavigationBar: React.FC = () => {
         <Route path="/contributors" element={null} />
         <Route path="/courses/:courseId/sourcecast" element={null} />
         <Route path="/courses/:courseId/achievements" element={null} />
+        <Route path="/courses/:courseId/leaderboard/*" element={null} />
         <Route path="/sicpjs/:section?" element={<SicpNavigationBar />} />
         <Route
           path="*"

src/commons/navigationBar/__tests__/NavigationBar.test.tsx

@@ -38,6 +38,8 @@ describe('NavigationBar', () => {
       courseId: 1,
       courseShortName: 'CS1101S',
       enableAchievements: true,
+      enableContestLeaderboard: false,
+      enableOverallLeaderboard: false,
       enableSourcecast: true,
       assessmentConfigurations: [
         {