Skip to content

Commit 0e106dd

Browse files
jayjay19630RichDom2185sayomaki
authored
Display popular votes leaderboard (#2785)
* Create new tab for popular votes leaderboard * Rename popular votes to popular vote leaderboard * Edit assessment mocks and assessment types to include popular vote * Modify tests * Rename score property to calculated score and add popularity score * Conditionally render different kinds of score depending on leaderboardType * Revert "Conditionally render different kinds of score depending on leaderboardType" This reverts commit 1ac975f. * Revert "Rename score property to calculated score and add popularity score" This reverts commit e6b5b08. * Edit snapshots * Move from switch case to ternary ladder * Fix bug with snapshot * Fix import post-merge * Update test snapshots --------- Co-authored-by: Richard Dominick <[email protected]> Co-authored-by: sayomaki <[email protected]>
1 parent dcd2c69 commit 0e106dd

File tree

8 files changed

+314
-32
lines changed

8 files changed

+314
-32
lines changed

‎src/commons/assessment/AssessmentTypes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export interface IContestVotingQuestion extends BaseQuestion {
124124
postpend: string;
125125
contestEntries: ContestEntry[];
126126
scoreLeaderboard: ContestEntry[];
127+
popularVoteLeaderboard: ContestEntry[];
127128
type: 'voting';
128129
}
129130

‎src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -475,9 +475,24 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
475475
<SideContentContestLeaderboard
476476
handleContestEntryClick={handleContestEntryClick}
477477
orderedContestEntries={(question as IContestVotingQuestion)?.scoreLeaderboard ?? []}
478+
leaderboardType={SideContentType.scoreLeaderboard}
478479
/>
479480
),
480481
id: SideContentType.scoreLeaderboard
482+
},
483+
{
484+
label: 'Popular Vote Leaderboard',
485+
iconName: IconNames.PEOPLE,
486+
body: (
487+
<SideContentContestLeaderboard
488+
handleContestEntryClick={handleContestEntryClick}
489+
orderedContestEntries={
490+
(question as IContestVotingQuestion)?.popularVoteLeaderboard ?? []
491+
}
492+
leaderboardType={SideContentType.popularVoteLeaderboard}
493+
/>
494+
),
495+
id: SideContentType.popularVoteLeaderboard
481496
}
482497
);
483498
} else {

‎src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap

Lines changed: 225 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -493,6 +493,33 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
493493
</div>
494494
</span>
495495
</div>
496+
<div
497+
aria-controls="bp5-tab-panel_side-content-tabs_popular_vote_leaderboard"
498+
aria-disabled="false"
499+
aria-expanded="false"
500+
aria-selected="false"
501+
class="bp5-tab side-content-tab"
502+
data-tab-id="popular_vote_leaderboard"
503+
id="bp5-tab-title_side-content-tabs_popular_vote_leaderboard"
504+
role="tab"
505+
tabindex="-1"
506+
>
507+
<span
508+
class="bp5-popover-target"
509+
>
510+
<div
511+
aria-expanded="false"
512+
class="side-content-tooltip"
513+
tabindex="0"
514+
>
515+
<span
516+
aria-hidden="true"
517+
class="bp5-icon bp5-icon-large bp5-icon-people"
518+
data-icon="people"
519+
/>
520+
</div>
521+
</span>
522+
</div>
496523
</div>
497524
<div
498525
aria-hidden="false"
@@ -854,7 +881,204 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
854881
<div
855882
class="header-score"
856883
>
857-
Score
884+
Calculated Score
885+
<span
886+
aria-hidden="true"
887+
class="bp5-icon bp5-icon-caret-down"
888+
>
889+
<svg
890+
data-icon="caret-down"
891+
height="16"
892+
role="img"
893+
viewBox="0 0 16 16"
894+
width="16"
895+
>
896+
<path
897+
d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
898+
fill-rule="evenodd"
899+
/>
900+
</svg>
901+
</span>
902+
</div>
903+
</div>
904+
<div
905+
class="LeaderboardCard"
906+
>
907+
<div
908+
class="bp5-interactive bp5-card bp5-elevation-1"
909+
data-testid="SideContentLeaderboardCard"
910+
>
911+
<pre
912+
class="bp5-code-block contestentry-entryid"
913+
>
914+
student_1
915+
</pre>
916+
<pre
917+
class="bp5-code-block contestentry-rank"
918+
>
919+
1
920+
</pre>
921+
<pre
922+
class="bp5-code-block contestentry-score"
923+
data-testid="contestentry-score"
924+
/>
925+
</div>
926+
</div>
927+
<div
928+
class="LeaderboardCard"
929+
>
930+
<div
931+
class="bp5-interactive bp5-card bp5-elevation-1"
932+
data-testid="SideContentLeaderboardCard"
933+
>
934+
<pre
935+
class="bp5-code-block contestentry-entryid"
936+
>
937+
student_2
938+
</pre>
939+
<pre
940+
class="bp5-code-block contestentry-rank"
941+
>
942+
2
943+
</pre>
944+
<pre
945+
class="bp5-code-block contestentry-score"
946+
data-testid="contestentry-score"
947+
/>
948+
</div>
949+
</div>
950+
</div>
951+
</div>
952+
</div>
953+
</div>
954+
</div>
955+
</div>
956+
<div
957+
aria-hidden="true"
958+
aria-labelledby="bp5-tab-title_side-content-tabs_popular_vote_leaderboard"
959+
class="bp5-tab-panel side-content-tab"
960+
id="bp5-tab-panel_side-content-tabs_popular_vote_leaderboard"
961+
role="tabpanel"
962+
>
963+
<div
964+
class="side-content-text"
965+
>
966+
<div
967+
class="ContestLeaderboard"
968+
>
969+
<button
970+
class="bp5-button bp5-minimal collapse-button"
971+
type="button"
972+
>
973+
<span
974+
aria-hidden="true"
975+
class="bp5-icon bp5-icon-caret-down"
976+
>
977+
<svg
978+
data-icon="caret-down"
979+
height="16"
980+
role="img"
981+
viewBox="0 0 16 16"
982+
width="16"
983+
>
984+
<path
985+
d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
986+
fill-rule="evenodd"
987+
/>
988+
</svg>
989+
</span>
990+
<span
991+
class="bp5-button-text"
992+
>
993+
<span>
994+
Popular Vote Leaderboard
995+
</span>
996+
<span
997+
class="bp5-popover-target"
998+
>
999+
<span
1000+
aria-expanded="false"
1001+
aria-hidden="true"
1002+
class="bp5-icon bp5-icon-help"
1003+
tabindex="0"
1004+
>
1005+
<svg
1006+
data-icon="help"
1007+
height="16"
1008+
role="img"
1009+
viewBox="0 0 16 16"
1010+
width="16"
1011+
>
1012+
<path
1013+
d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z"
1014+
fill-rule="evenodd"
1015+
/>
1016+
</svg>
1017+
</span>
1018+
</span>
1019+
</span>
1020+
</button>
1021+
<div
1022+
class="bp5-collapse"
1023+
style="height: auto; overflow-y: visible; transition: none;"
1024+
>
1025+
<div
1026+
aria-hidden="false"
1027+
class="bp5-collapse-body"
1028+
style="transform: translateY(0); transition: none;"
1029+
>
1030+
<div>
1031+
<div
1032+
class="leaderboard-header"
1033+
>
1034+
<div
1035+
class="header-entryid"
1036+
>
1037+
Student Name
1038+
<span
1039+
aria-hidden="true"
1040+
class="bp5-icon bp5-icon-caret-down"
1041+
>
1042+
<svg
1043+
data-icon="caret-down"
1044+
height="16"
1045+
role="img"
1046+
viewBox="0 0 16 16"
1047+
width="16"
1048+
>
1049+
<path
1050+
d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
1051+
fill-rule="evenodd"
1052+
/>
1053+
</svg>
1054+
</span>
1055+
</div>
1056+
<div
1057+
class="header-entryrank"
1058+
>
1059+
Rank
1060+
<span
1061+
aria-hidden="true"
1062+
class="bp5-icon bp5-icon-caret-down"
1063+
>
1064+
<svg
1065+
data-icon="caret-down"
1066+
height="16"
1067+
role="img"
1068+
viewBox="0 0 16 16"
1069+
width="16"
1070+
>
1071+
<path
1072+
d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
1073+
fill-rule="evenodd"
1074+
/>
1075+
</svg>
1076+
</span>
1077+
</div>
1078+
<div
1079+
class="header-score"
1080+
>
1081+
Popularity Score
8581082
<span
8591083
aria-hidden="true"
8601084
class="bp5-icon bp5-icon-caret-down"

‎src/commons/mocks/AssessmentMocks.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -874,12 +874,24 @@ const mockContestEntryQuestion: Array<IContestVotingQuestion> = [
874874
{
875875
submission_id: 1,
876876
student_name: 'student_1',
877-
answer: { code: "display('leaderboard test')" }
877+
answer: { code: "display('score_leaderboard test')" }
878878
},
879879
{
880880
submission_id: 2,
881881
student_name: 'student_2',
882-
answer: { code: 'function leaderboard_test() { return true; }' }
882+
answer: { code: 'function score_leaderboard_test() { return true; }' }
883+
}
884+
],
885+
popularVoteLeaderboard: [
886+
{
887+
submission_id: 1,
888+
student_name: 'student_1',
889+
answer: { code: "display('popular_vote_leaderboard test')" }
890+
},
891+
{
892+
submission_id: 2,
893+
student_name: 'student_2',
894+
answer: { code: 'function popular_vote_leaderboard_test() { return true; }' }
883895
}
884896
],
885897
library: mockLibrary,

‎src/commons/sideContent/SideContentTypes.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export enum SideContentType {
1414
autograder = 'autograder',
1515
briefing = 'briefing',
1616
contestVoting = 'contest_voting',
17-
scoreLeaderboard = 'score_leaderboard',
1817
dataVisualizer = 'data_visualizer',
1918
editorGrading = 'editor_grading',
2019
editorAutograder = 'editor_autograder',
@@ -31,8 +30,10 @@ export enum SideContentType {
3130
grading = 'grading',
3231
introduction = 'introduction',
3332
module = 'module',
33+
popularVoteLeaderboard = 'popular_vote_leaderboard',
3434
questionOverview = 'question_overview',
3535
remoteExecution = 'remote_execution',
36+
scoreLeaderboard = 'score_leaderboard',
3637
missionMetadata = 'mission_metadata',
3738
mobileEditor = 'mobile_editor',
3839
mobileEditorRun = 'mobile_editor_run',

‎src/commons/sideContent/__tests__/SideContentContestLeaderboard.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
33
import { shallowRender } from 'src/commons/utils/TestUtils';
44

55
import SideContentContestLeaderboard from '../content/SideContentContestLeaderboard';
6+
import { SideContentType } from '../SideContentTypes';
67

78
const mockLeaderboardEntries = [
89
{
@@ -27,7 +28,8 @@ const mockLeaderboardEntries = [
2728

2829
const mockProps = {
2930
handleContestEntryClick: () => {},
30-
orderedContestEntries: mockLeaderboardEntries
31+
orderedContestEntries: mockLeaderboardEntries,
32+
leaderboardType: SideContentType.scoreLeaderboard
3133
};
3234

3335
// Basic snapshot testing to catch unexpected changes
@@ -54,13 +56,14 @@ test('SideContentContestLeaderboard orders entry in the same order as orderedCon
5456
expect(scores).toEqual(['100', '90', '80']);
5557
});
5658

57-
test('Clicking the contest entry updates the editor for contest leaderboard.', async () => {
59+
test('Clicking the contest entry updates the editor for score leaderboard.', async () => {
5860
const user = userEvent.setup();
5961
const mockedHandleContestEntryClick = jest.fn();
6062

6163
const mockProps = {
6264
handleContestEntryClick: mockedHandleContestEntryClick,
63-
orderedContestEntries: mockLeaderboardEntries
65+
orderedContestEntries: mockLeaderboardEntries,
66+
leaderboardType: SideContentType.scoreLeaderboard
6467
};
6568

6669
const contestVotingContainer = <SideContentContestLeaderboard {...mockProps} />;

‎src/commons/sideContent/__tests__/__snapshots__/SideContentContestLeaderboard.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ exports[`SideContentContestLeaderboard matches snapshot 1`] = `
1515
</span>
1616
<Blueprint5.Tooltip
1717
compact={false}
18-
content="View the top-rated contest entries!"
18+
content="View the highest scoring contest entries!"
1919
hoverCloseDelay={0}
2020
hoverOpenDelay={100}
2121
interactionKind="hover-target"
@@ -62,7 +62,7 @@ exports[`SideContentContestLeaderboard matches snapshot 1`] = `
6262
<div
6363
className="header-score"
6464
>
65-
Score
65+
Calculated Score
6666
<Blueprint5.Icon
6767
autoLoad={true}
6868
icon="caret-down"

0 commit comments

Comments
 (0)