DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add new db powered by UT_Grade_Parser (#163)

Browse Source 
* feat: add new db powered by UT_Grade_Parser

* Merge branch 'main' of https://github.com/Longhorn-Developers/UT-Registration-Plus into feature/update-db

* feat: update db

* feat: update db handlers and types

Co-authored-by: Samuel Gunter <sgunter@utexas.edu>

* fix: type errors

* fix: add Other to grade dist

* fix: db with proper insertion order

* Merge branch 'main' of https://github.com/Longhorn-Developers/UT-Registration-Plus into feature/update-db

* chore: address PR comments

Co-Authored-By: Samuel Gunter <sgunter@utexas.edu>
This commit is contained in:
doprz
2024-03-24 00:21:18 -05:00
committed by GitHub
parent ee2b7c40b9
commit 60d1f48bd9
8 changed files with 152 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/database/grade_distributions.db Normal file
View File

Binary file not shown.

BIN
public/database/grades.db
View File

Binary file not shown.

3
src/manifest.ts
View File

@@ -56,6 +56,9 @@ const manifest = defineManifest(async () => ({
matches: ['*://*/*'],
},
],
content_security_policy: {
extension_pages: "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'",
},
}));
export default manifest;

44
src/shared/types/Distribution.ts
View File

@@ -1,10 +1,7 @@
import { PointOptionsObject } from 'highcharts';
import { Semester } from './Course';
/**
* Each of the possible letter grades that can be given in a course
*/
export type LetterGrade = 'A' | 'A-' | 'B' | 'B+' | 'B-' | 'C' | 'C+' | 'C-' | 'D' | 'D+' | 'D-' | 'F';
export type LetterGrade = 'A' | 'A-' | 'B' | 'B+' | 'B-' | 'C' | 'C+' | 'C-' | 'D' | 'D+' | 'D-' | 'F' | 'Other';
/**
* A distribution of grades for a course,
@@ -18,23 +15,24 @@ export type Distribution = {
* This is a object-ified version of a row in the SQL table that is used to store the distribution data.
*/
export type CourseSQLRow = {
sem?: string;
prof?: string;
dept?: string;
course_nbr?: string;
course_name?: string;
a1?: number;
a2?: number;
a3?: number;
b1?: number;
b2?: number;
b3?: number;
c1?: number;
c2?: number;
c3?: number;
d1?: number;
d2?: number;
d3?: number;
f?: number;
semesters?: string;
Semester: string;
Section: number;
Department: string;
Department_Code: string;
Course_Number: string;
Course_Title: string;
Course_Full_Title: string;
A: number;
A_Minus: number;
B_Plus: number;
B: number;
B_Minus: number;
C_Plus: number;
C: number;
C_Minus: number;
D_Plus: number;
D: number;
D_Minus: number;
F: number;
Other: number;
};

1
src/shared/types/ThemeColors.ts
View File

@@ -38,6 +38,7 @@ export const extendedColors = {
d: '#DC2626',
dminus: '#B91C1C',
f: '#B91C1C',
other: '#6B7280',
},
} as const;

105
src/views/components/injected/CourseCatalogInjectedPopup/GradeDistribution.tsx
View File

@@ -10,7 +10,8 @@ import {
} from '@views/lib/database/queryDistribution';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import React from 'react';
import type { ChangeEvent } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
interface GradeDistributionProps {
course: Course;
@@ -22,6 +23,7 @@ const DataStatus = {
NOT_FOUND: 'NOT_FOUND',
ERROR: 'ERROR',
} as const satisfies Record<string, string>;
type DataStatusType = (typeof DataStatus)[keyof typeof DataStatus];
const GRADE_COLORS = {
@@ -37,6 +39,7 @@ const GRADE_COLORS = {
D: extendedColors.gradeDistribution.d,
'D-': extendedColors.gradeDistribution.dminus,
F: extendedColors.gradeDistribution.f,
Other: extendedColors.gradeDistribution.other,
} as const satisfies Record<LetterGrade, string>;
/**
@@ -48,48 +51,55 @@ const GRADE_COLORS = {
* @returns {JSX.Element} The grade distribution chart component.
*/
export default function GradeDistribution({ course }: GradeDistributionProps): JSX.Element {
const [semester, setSemester] = React.useState('Aggregate');
const [distributions, setDistributions] = React.useState<Record<string, Distribution>>({});
const [status, setStatus] = React.useState<DataStatusType>(DataStatus.LOADING);
const ref = React.useRef<HighchartsReact.RefObject>(null);
const [semester, setSemester] = useState('Aggregate');
const [distributions, setDistributions] = useState<Record<string, Distribution>>({});
const [status, setStatus] = useState<DataStatusType>(DataStatus.LOADING);
const ref = useRef<HighchartsReact.RefObject>(null);
// const chartData = React.useMemo(() => {
// if (status === DataStatus.FOUND && distributions[semester]) {
// return Object.entries(distributions[semester]).map(([grade, count]) => ({
// y: count,
// color: GRADE_COLORS[grade as LetterGrade],
// }));
// }
// return Array(12).fill(0);
// }, [distributions, semester, status]);
// const chartData: unknown[] = [];
const chartData = useMemo(() => {
if (status === DataStatus.FOUND && distributions[semester]) {
return Object.entries(distributions[semester]!).map(([grade, count]) => ({
y: count,
color: GRADE_COLORS[grade as LetterGrade],
}));
}
return Array(13).fill(0);
}, [distributions, semester, status]);
// React.useEffect(() => {
// const fetchInitialData = async () => {
// try {
// const [aggregateDist, semesters] = await queryAggregateDistribution(course);
// const initialDistributions: Record<string, Distribution> = { Aggregate: aggregateDist };
// const semesterPromises = semesters.map(semester => querySemesterDistribution(course, semester));
// const semesterDistributions = await Promise.all(semesterPromises);
// semesters.forEach((semester, i) => {
// initialDistributions[`${semester.season} ${semester.year}`] = semesterDistributions[i];
// });
// setDistributions(initialDistributions);
// setStatus(DataStatus.FOUND);
// } catch (e) {
// console.error(e);
// if (e instanceof NoDataError) {
// setStatus(DataStatus.NOT_FOUND);
// } else {
// setStatus(DataStatus.ERROR);
// }
// }
// };
useEffect(() => {
const fetchInitialData = async () => {
try {
const [aggregateDist, semesters] = await queryAggregateDistribution(course);
const initialDistributions: Record<string, Distribution> = { Aggregate: aggregateDist };
const semesterPromises = semesters.map(semester => querySemesterDistribution(course, semester));
const semesterDistributions = await Promise.allSettled(semesterPromises);
semesters.forEach((semester, i) => {
const distributionResult = semesterDistributions[i];
// fetchInitialData();
// }, [course]);
if (!distributionResult) {
throw new Error('Distribution result is undefined');
}
const handleSelectSemester = (event: React.ChangeEvent<HTMLSelectElement>) => {
if (distributionResult.status === 'fulfilled') {
initialDistributions[`${semester.season} ${semester.year}`] = distributionResult.value;
}
});
setDistributions(initialDistributions);
setStatus(DataStatus.FOUND);
} catch (e) {
console.error(e);
if (e instanceof NoDataError) {
setStatus(DataStatus.NOT_FOUND);
} else {
setStatus(DataStatus.ERROR);
}
}
};
fetchInitialData();
}, [course]);
const handleSelectSemester = (event: ChangeEvent<HTMLSelectElement>) => {
setSemester(event.target.value);
};
@@ -116,7 +126,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
fontWeight: '400',
},
},
categories: ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F'],
categories: ['A', 'A-', 'B+', 'B', 'B-', 'C+', 'C', 'C-', 'D+', 'D', 'D-', 'F', 'Other'],
tickInterval: 1,
tickWidth: 1.5,
tickLength: 10,
@@ -168,7 +178,7 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
{
type: 'column',
name: 'Grades',
// data: chartData,
data: chartData,
},
],
};
@@ -197,8 +207,8 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
<Text variant='small'>
Grade Distribution for {course.department} {course.number}
</Text>
{/* <select
className='flex items-center py-1 px-1 gap-1 border border rounded border-solid'
<select
className='border border rounded-[4px] border-solid px-[12px] py-[8px]'
onChange={handleSelectSemester}
>
{Object.keys(distributions)
@@ -209,19 +219,22 @@ export default function GradeDistribution({ course }: GradeDistributionProps): J
if (k2 === 'Aggregate') {
return 1;
}
const [season1, year1] = k1.split(' ');
const [, year2] = k2.split(' ');
if (year1 !== year2) {
return parseInt(year2, 10) - parseInt(year1, 10);
return parseInt(year2 as string, 10) - parseInt(year1 as string, 10);
}
return season1 === 'Fall' ? 1 : -1;
return season1 === 'Fall' ? -1 : 1;
})
.map(semester => (
<option key={semester} value={semester}>
{semester}
</option>
))}
</select> */}
</select>
</div>
<HighchartsReact ref={ref} highcharts={Highcharts} options={chartOptions} />
</>

2
src/views/lib/database/initializeDB.ts
View File

@@ -1,4 +1,4 @@
import DB_FILE_URL from '@public/database/grades.db?url';
import DB_FILE_URL from '@public/database/grade_distributions.db?url';
import initSqlJs from 'sql.js/dist/sql-wasm';
import WASM_FILE_URL from 'sql.js/dist/sql-wasm.wasm?url';
// import WASM_FILE_URL from '../../../../public/database/sql-wasm.wasm?url';

110
src/views/lib/database/queryDistribution.ts
View File

@@ -3,6 +3,14 @@ import type { CourseSQLRow, Distribution } from '@shared/types/Distribution';
import { initializeDB } from './initializeDB';
// TODO: in the future let's maybe refactor this to be reactive to the items in the db rather than being explicit
const allTables = [
'grade_distributions_2019_2020',
'grade_distributions_2020_2021',
'grade_distributions_2021_2022',
'grade_distributions_2022_2023',
] as const;
/**
* fetches the aggregate distribution of grades for a given course from the course db, and the semesters that we have data for
* @param course the course to fetch the distribution for
@@ -18,31 +26,48 @@ export async function queryAggregateDistribution(course: Course): Promise<[Distr
throw new NoDataError(course);
}
let row: Required<CourseSQLRow> = {} as Required<CourseSQLRow>;
res.columns.forEach((col, i) => {
row[col as keyof CourseSQLRow] = res.values[0]![i]! as never;
});
const row: Required<CourseSQLRow> = {} as Required<CourseSQLRow>;
for (let i = 0; i < res.columns.length; i++) {
const col = res.columns[i] as keyof CourseSQLRow;
switch (col) {
case 'A':
case 'A_Minus':
case 'B_Plus':
case 'B':
case 'B_Minus':
case 'C_Plus':
case 'C':
case 'C_Minus':
case 'D_Plus':
case 'D':
case 'D_Minus':
case 'F':
case 'Other':
row[col] = res.values.reduce((acc, cur) => acc + (cur[i] as number), 0) as never;
break;
default:
row[col] = res.columns[i]![0]! as never;
}
}
const distribution: Distribution = {
A: row.a2,
'A-': row.a3,
'B+': row.b1,
B: row.b2,
'B-': row.b3,
'C+': row.c1,
C: row.c2,
'C-': row.c3,
'D+': row.d1,
D: row.d2,
'D-': row.d3,
F: row.f,
A: row.A,
'A-': row.A_Minus,
'B+': row.B_Plus,
B: row.B,
'B-': row.B_Minus,
'C+': row.C_Plus,
C: row.C,
'C-': row.C_Minus,
'D+': row.D_Plus,
D: row.D,
'D-': row.D_Minus,
F: row.F,
Other: row.Other,
};
// the db file for some reason has duplicate semesters, so we use a set to remove duplicates
const rawSemesters = new Set<string>();
row.semesters.split(',').forEach((sem: string) => {
rawSemesters.add(sem);
});
// get unique semesters from the data
const rawSemesters = res.values.reduce((acc, cur) => acc.add(cur[0] as string), new Set<string>());
const semesters: Semester[] = [];
@@ -64,15 +89,15 @@ export async function queryAggregateDistribution(course: Course): Promise<[Distr
* @returns a SQL query string
*/
function generateQuery(course: Course, semester: Semester | null): string {
const profName = course.instructors[0]?.fullName;
// const profName = course.instructors[0]?.fullName;
// eslint-disable-next-line no-nested-ternary
const yearDelta = semester ? (semester.season === 'Fall' ? 0 : -1) : 0;
const query = `
select * from ${semester ? 'grades' : 'agg'}
where dept like '%${course.department}%'
${profName ? `and prof like '%${profName}%'` : ''}
and course_nbr like '%${course.number}%'
${semester ? `and sem like '%${semester.season} ${semester.year}%'` : ''}
order by a1+a2+a3+b1+b2+b3+c1+c2+c3+d1+d2+d3+f desc
select * from ${semester ? `grade_distributions_${semester.year + yearDelta}_${semester.year + yearDelta + 1}` : `(select * from ${allTables.join(' union all select * from ')})`}
where Department_Code = '${course.department}'
and Course_Number = '${course.number}'
${semester ? `and Semester = '${semester.season} ${semester.year}'` : ''}
`;
return query;
@@ -98,22 +123,21 @@ export async function querySemesterDistribution(course: Course, semester: Semest
row[col as keyof CourseSQLRow] = res.values[0]![i]! as never;
});
const distribution: Distribution = {
A: row.a2,
'A-': row.a3,
'B+': row.b1,
B: row.b2,
'B-': row.b3,
'C+': row.c1,
C: row.c2,
'C-': row.c3,
'D+': row.d1,
D: row.d2,
'D-': row.d3,
F: row.f,
return {
A: row.A,
'A-': row.A_Minus,
'B+': row.B_Plus,
B: row.B,
'B-': row.B_Minus,
'C+': row.C_Plus,
C: row.C,
'C-': row.C_Minus,
'D+': row.D_Plus,
D: row.D,
'D-': row.D_Minus,
F: row.F,
Other: row.Other,
};
return distribution;
}
/**