From 8214d40923de444fa5837891b6d125c2c09a558c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 24 Jun 2026 17:06:57 +0000 Subject: [PATCH] Add React TypeScript instructor dashboard frontend --- .gitignore | 4 + controllers/endpoints/basic.py | 16 +- frontend-react/.gitignore | 24 + frontend-react/.oxlintrc.json | 8 + frontend-react/README.md | 57 + frontend-react/index.html | 13 + frontend-react/package-lock.json | 2122 +++++++++++++++++ frontend-react/package.json | 28 + frontend-react/public/favicon.svg | 1 + frontend-react/public/icons.svg | 24 + frontend-react/src/App.css | 7 + frontend-react/src/App.tsx | 8 + frontend-react/src/api/client.ts | 152 ++ frontend-react/src/api/dashboardUtils.ts | 145 ++ frontend-react/src/assets/hero.png | Bin 0 -> 13057 bytes frontend-react/src/assets/react.svg | 1 + frontend-react/src/assets/vite.svg | 1 + .../dashboard/AssignmentSubmissionsChart.tsx | 89 + .../components/dashboard/ErrorRateChart.tsx | 63 + .../src/components/dashboard/MetricsTable.tsx | 101 + .../src/components/dashboard/StatCard.tsx | 51 + .../src/components/dashboard/StudentTable.tsx | 77 + frontend-react/src/hooks/useFetch.ts | 91 + frontend-react/src/index.css | 111 + frontend-react/src/main.tsx | 10 + .../src/pages/InstructorDashboard.tsx | 293 +++ frontend-react/src/types/models.ts | 193 ++ frontend-react/tsconfig.app.json | 25 + frontend-react/tsconfig.json | 7 + frontend-react/tsconfig.node.json | 23 + frontend-react/vite.config.ts | 32 + templates/helpers/layout.html | 5 + templates/react/dashboard.html | 19 + 33 files changed, 3800 insertions(+), 1 deletion(-) create mode 100644 frontend-react/.gitignore create mode 100644 frontend-react/.oxlintrc.json create mode 100644 frontend-react/README.md create mode 100644 frontend-react/index.html create mode 100644 frontend-react/package-lock.json create mode 100644 frontend-react/package.json create mode 100644 frontend-react/public/favicon.svg create mode 100644 frontend-react/public/icons.svg create mode 100644 frontend-react/src/App.css create mode 100644 frontend-react/src/App.tsx create mode 100644 frontend-react/src/api/client.ts create mode 100644 frontend-react/src/api/dashboardUtils.ts create mode 100644 frontend-react/src/assets/hero.png create mode 100644 frontend-react/src/assets/react.svg create mode 100644 frontend-react/src/assets/vite.svg create mode 100644 frontend-react/src/components/dashboard/AssignmentSubmissionsChart.tsx create mode 100644 frontend-react/src/components/dashboard/ErrorRateChart.tsx create mode 100644 frontend-react/src/components/dashboard/MetricsTable.tsx create mode 100644 frontend-react/src/components/dashboard/StatCard.tsx create mode 100644 frontend-react/src/components/dashboard/StudentTable.tsx create mode 100644 frontend-react/src/hooks/useFetch.ts create mode 100644 frontend-react/src/index.css create mode 100644 frontend-react/src/main.tsx create mode 100644 frontend-react/src/pages/InstructorDashboard.tsx create mode 100644 frontend-react/src/types/models.ts create mode 100644 frontend-react/tsconfig.app.json create mode 100644 frontend-react/tsconfig.json create mode 100644 frontend-react/tsconfig.node.json create mode 100644 frontend-react/vite.config.ts create mode 100644 templates/react/dashboard.html diff --git a/.gitignore b/.gitignore index b61aba024..57189e5ab 100644 --- a/.gitignore +++ b/.gitignore @@ -59,6 +59,10 @@ settings/*.json settings/*.yaml frontend/node_modules/ +frontend-react/node_modules/ + +# React build output (generated by npm run build in frontend-react/) +static/libs/blockpy_react/ # Byte-compiled / optimized / DLL files __pycache__/ diff --git a/controllers/endpoints/basic.py b/controllers/endpoints/basic.py index 7adb964a8..3b25e52db 100644 --- a/controllers/endpoints/basic.py +++ b/controllers/endpoints/basic.py @@ -5,6 +5,7 @@ from urllib.parse import unquote from flask import render_template, current_app, send_from_directory, url_for, Blueprint, g, jsonify +from controllers.helpers import login_required basic = Blueprint('basic', __name__) @@ -62,4 +63,17 @@ def whoami(): A simple page that tells you who you are according to the server. Useful for debugging authentication issues. """ - return jsonify(g.user.encode_json()) \ No newline at end of file + return jsonify(g.user.encode_json()) + + +@basic.route('/dashboard/', methods=['GET']) +@basic.route('/dashboard', methods=['GET']) +@login_required +def react_dashboard(): + """ + Serve the React TypeScript instructor dashboard. + + This is a separate frontend from the KnockoutJS frontend and provides + interactive charts and tables for submission metrics. + """ + return render_template('react/dashboard.html') \ No newline at end of file diff --git a/frontend-react/.gitignore b/frontend-react/.gitignore new file mode 100644 index 000000000..a547bf36d --- /dev/null +++ b/frontend-react/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/frontend-react/.oxlintrc.json b/frontend-react/.oxlintrc.json new file mode 100644 index 000000000..6fa991dad --- /dev/null +++ b/frontend-react/.oxlintrc.json @@ -0,0 +1,8 @@ +{ + "$schema": "./node_modules/oxlint/configuration_schema.json", + "plugins": ["react", "typescript", "oxc"], + "rules": { + "react/rules-of-hooks": "error", + "react/only-export-components": ["warn", { "allowConstantExport": true }] + } +} diff --git a/frontend-react/README.md b/frontend-react/README.md new file mode 100644 index 000000000..add06d3f0 --- /dev/null +++ b/frontend-react/README.md @@ -0,0 +1,57 @@ +# BlockPy React Frontend + +A React TypeScript frontend for BlockPy, built with Vite. This runs **alongside** the existing KnockoutJS frontend — both are independently compiled and served. + +## Structure + +``` +frontend-react/ + src/ + api/ + client.ts # Typed API functions for all backend routes + dashboardUtils.ts # Data processing utilities + components/ + dashboard/ + StatCard.tsx # Summary stat cards + AssignmentSubmissionsChart.tsx # Bar chart: submissions & edits + ErrorRateChart.tsx # Bar chart: error/success rates + MetricsTable.tsx # Per-assignment metrics table + StudentTable.tsx # Per-student summary table + hooks/ + useFetch.ts # Data-fetching React hooks + pages/ + InstructorDashboard.tsx # Main dashboard page + types/ + models.ts # TypeScript types matching backend models +``` + +## Development + +```bash +cd frontend-react +npm install +npm run dev # Dev server with proxy to Flask at localhost:5001 +``` + +## Production Build + +```bash +cd frontend-react +npm run build # Outputs to ../static/libs/blockpy_react/ +``` + +The built assets are served by Flask at `/dashboard` via `templates/react/dashboard.html`. + +## Backend Routes Used + +| Endpoint | Purpose | +|---|---| +| `GET /api/test` | Connection check | +| `GET /api/list/courses` | List courses for the current user | +| `GET /api/task_status/:id` | Poll background task status | +| `GET /api/reports` | List user reports | +| `GET /courses/fake_dashboard?course_id=X&mode=json` | Per-submission metrics | +| `GET /courses/fake_dashboard?course_id=X&mode=csv` | CSV export | +| `GET /assignments/get_ids?course_id=X` | List assignment IDs in a course | +| `GET /grading/get_grading_spreadsheet` | Grading data | +| `POST /blockpy/update_submission` | Submit/update a submission | diff --git a/frontend-react/index.html b/frontend-react/index.html new file mode 100644 index 000000000..afb1594e7 --- /dev/null +++ b/frontend-react/index.html @@ -0,0 +1,13 @@ + + +
+ + + +mI|13!gBV?X`Ozp7x>?6jr`>Qz=^4ea35!$*f}) zS$i+x_k+@P2q1RFUH^ZTTk7=n?cjfR>hTq3l3SY~#w+I8SSutXGyhw;Ws~=zMQ%Vc z>$On~47Ut?P*_!TOQ&PFmLAyJieB2X4_Fd_!WxI-AY`q1Lc-oK?+qcOTzlQ?@~x@OT}*9jTVNfl@3rGvZpWI=eKg>T zZb@6YWz)J=IhP7CF|c?G62vMEG%#U}?#86$0jR4sG~i(jRd#jmn`7b(O#?N;3a;1t zhXLssmUwGhp79luw#(*V8W L0|8+E z6=YZ_O@er~$LrD_PYGc(kJgB=;yw#+Z3X6LDUZ(NcwN=B-hjdiHm!JFar%m{(5bEW z@@_VEtG$5;`EJZ|OkJ@l&G9n((w@uNFwmU%bG|s#TbcJJos!{e +bjCjrCq_}LcN!UFgKtgg7siV*7# z!}1whTRRi*-avJPu->C}Z8EiuK$#886+H_#_!btv+rsiBbv2jAJvJ+O0{#}y(%L3H zfjU-kq_-L@2XrL*ae{{qYJkD{@dw%*bkh2P&YS-0!Xt!PRz7KHV0+~j(t9W8lAVWR zt@B*DgURgEz4>WuN>o?_iKc w$?k{||Pg7{Q2o4|VmJ)mg?{VQJA<}zEr^YAAS zgGm5RT4T3p)U;yz-tfBO^kw8?IoG!IVmc+Z3m#}AOQ?5MRa>)OcU!$N^_+yK6ayn? zK>~WK0!#ysuj^oNLakm)Zvu+J)OSubX^kv!c*xgdIvs;kln!rgG4*uZ;w0mQQO4XD zO9P{GNdv!=cQ(CAL{S(% KtuV^zC& Q{%g)PoXnp^gn^>c*`E>$hLYg2HjnbVGtWLa{7zHdG1jT@B{|Dm16 z7K2(jsfG+m*Zxof)iXxu+!H5M o-0$pkyV3VV4B@Qms46M zuBxGRV@HxU 7Wwx-6CB zaU*HO <_qn$5GH>&@?nRy1{z zkik!sLfWQ)r#75)vVwCBU*r_)Q6mp?!j85{#Xqse)ApRdE$V0%I0*~e(_{)5H)`Mk z#rExC>yjhZxuL@|+#v4#< Axw$+VpV zuT;!2Vww$je$DpAW`$FX_Ab|Ip%$;&T$-lW8jS~B$>G}rd>eQG+$h9lQx4Mx0w={m zx9?T6VU`>sR}XC lkAhHEShOUe8awiq zmizhL+}5UKs3}6~It7vBTig9dfQ2Q8coo+Miiaw7n~>4ybv2Ptt0^^=VqX(t*Yya9 zr`FxxFX8(v*H=+uJ#JJWIB2A(==HDYx~^zZ2nu?2`}|Wsa*f3h3ixc+U|FDtAG$Y! z*lc_7se5Oso-Cgqe0){{!8H4g$3<8!R<6JOurD;((({c$1(pwb>(#TT!sge@4>r2@ zVL7>U`0`nsWAYErezk4(Z!gMI2?UTo{J3Ajo(u4)KYIRd>BRcG4BoS3G0EXyEp@tw z%P7__?A^a>Q&AKL@ayDO9D*Qkc!NHnO9l}kpp_6hXbMppYL(X1L?njdFT|-h2<_$; zAtDZ!1Rf%|yb!qbWKd}%0b`LzBeyNy43|QO(&h2mxQLUL)|0%agVOW)6TV!&Ip^Ls z`PG2cygM8)IecQx=Fc+nqYRo4hS^^-nM_&-y8?EJXUczP=DIw(GkTJdpEdh<_STs{ z|A)4n1GKdE=Wu!!nYoZHcUQ4S&R;oDOKX2lrkdF(mK>hz<$Pp>igjOcvoRIjlN=W8 zu8Gx5(roqn8$>gEE5vy{GiGeW8Tq{vnf3hS-V=$tZkQuftUVuU8o6k&dn= Yg3)6MOIH>nlK^-2+C6BZITr~1@So?NvG#TwL)|~=1YXGMTLpS<)ziK_CSOabe z=cB#5)yz|@0i9dSo?*CX)}UP=s6)B+F@~Em(u@Q(I9J9i_V{LmMu8BfXYMh~*oPP+ z!3~xTv|(>|=n6ZOtT~C@V!z!w%18*8T2t6}U2S##rC)mekBql&VsBX;$~ByGE$oA9 z`0Wzq8p?R{4)$l*on;!cLa}Dh^Xe?owiQZt9nH1fxxh$pN9K%CtOw?u3>85L7rr!d zXs)l{TZ{xXP&U8exz?9cv~dNNibOmt*K4I$?RxqIBZ0(?Mg-9FS{*9Bc49Qc1`=sIF-rye`aNT1G@4NwXcnyc@+bw_mTsR>5< zF<2;X0QesG_pw|TonqVBhRtfqI>ty(SIu&VOXd0CrLlfp+;WH7HYjhqnu^oAY!9cB z=B6#R?Rfz9BP`dJ=@v_?70s3HxQPk+{6Y+lM85f2NF^00*^OcM0~?JOZfR9ZPYF+# zYSs}(_BUYV8{n@2a1hD^SV41bwmi2uztR;PeBgF1F-`9>` zoNss-@3LaF2sjl~>OaaVmp7PNp+UT`6@}gR%uzqHDVeEZ14{Yt?n%JeQm+t(1_u zSc}oj^{b;+rlS|ME%+LjzSI&xu0Bblxo$MJ-J$kJ?Qu_XUXh}*@*-x@ny|}wVM%Lg z3tNB`yvr*}N?ClGL;H2cglcvErIccU3(eP7>@~4nOIcI~-`P8tSQnx=jI&{9)!1}l z;gQ%_h>ZlPSV@o@Azq1 R$C6ja5!^ZGh;YRhhxs58qJWo9@Bc eac&yy(pET1hnn`~7@}2L0&dfPKYs$ih7m2}R!25!(hxqA(!UIw; zK4+~Jowy3=R NC6n E=ncU{LH5?*9@W24lacJlvCZXB$CYtE@>c+~H zkV=(5I&gb{xn2!~f&fs2NQgAL6`p|kyt6kpWk}iVlqIp(H;ig`{_U9yxs1jzu^ETM z7~)Rg8C-Nue qTYP&U8l{DY=Y47cR zOR@U%$KQV{mkRF|4)z9Y^t3K`@p>duY&QLUFeh6VoV`a`$U@)(z!-N*5Cj<1 1$EZW&hJLX83TO{lJYP74rlDZQPkm@t<=U^I)x@|UnHHkdQlh?!ltZwl92rE;;^ zZuIappj4dhld1}kttYYV-j|KF1Kus zWBnzttD^00%LFK(wrwNragFub6xiV8QE2rm<`&fcR4SLFcdtLxVuN!Aal-g6dE4%k zARZ}|xeo;K{0yf7@9aua%2j5o)CPcIOc6uLHFJOcgtB5owlcNAwyAHc0QB0Dts?c@ zUemG~j_E&W7R%+x-IO4FJl8e&*2Blmp1S#RA|)geVrxvP)NHdYuxi~g&Etn?QdN K8ZDKZ?QFLU? zh30 G|t9G>a_X4zk}Ygw<^$7K!GIn(Io$>(d4ODJQ2XSd%jpK zm7>ptl$a3GyB}5-%p4>Q*p#VL^B{yQMuFCM^#l#+N!Ne z5_PrJWB=@Iy+t)H`g1lX`{bm($KE5I?0c(JEYm#t{F}j!xtsb ob0{xu@0TB_*>G7w0ICn zr#V oBktqHZ~XxhiKD*lcG|b;H *|Ny3P^8ceV`sfBRfrhwZ!T+MFZ!F1Bt{q$8d9i6o?~ zODj^POr}&ivSa^R^YFIq7o0giLBKCycH_aU`F6)O6JX%nPTwh~Q`eq6*0iE#Srj2^ z*_hN3%*b83zfafy60@Cp3{J({RlSaEn &E?mrxRNC9GQ7#+f=s! z0KBf-9Ny_v2VbE%aB|Di)5kNJ^t&C`4D(>t7zYUWUFtbxt+Oq=!@O7BU)}>d*R72o zFF)3jQD_lLe4is&xzyJYC1-c{8TX$RU>&>P$%)ufpez0XSAukmh!xcekg`s$c<>-q zI#zn^JU0zzF}V60)o$_gY}PQH>b2M9&8fR Za#OauglPb zeQ@pMm&=!vNgos4CluQjLMV!pfkmxK+35bi^k&=k>9h02?l+u+m0agG ;(h2|Jslc-llvtEwn~*w3bx7qnvZACG<8}AGeaDVvcHbKd2>3G^ zSFPULUn-?Pmo^-_`mLZr??uNH`2=I&yajlrF{DtUxMy#Nu}z=3y7qbUA;5`)hibMR zhXL@@uKyV0-2&A@t@!xyrBnMJl&^o@Gx$&5_q6?D=ji5grd-~=?dlg;ur(_V0wjh! zA=JV^C1m+DDkOsgr<%O9ZQFg!0}pD(#PSz4Dr_EyS5$`)VIAv);4n-SFP~YtC7sH= z7&*MfpH;gd*FHbkmD#)hVxb6xjc9~`t?_{=JS+@ip_cTicXxG<=7m9 & zPX+Z8IC*GSAXuGCrZDHgR$r%jyk-fctis2Kx4HvZ|B~8uC@o)m^>Hy-O!&TKA?$&n zkP2Xc54w~!=z2?^NafyL*L0V9cbYrugHBBUj`xVyZmGFR&kvk#>1J*Z~i zNTz}?IAdJ$gkqd2!Gw(%LzE!O5s4C7q4%T~e_P{+z=DNDKrG**p=U`d5yg^vp`;Zn zsU=8gd0a9s4s0FPJePWR9eH5=+O^Kks&kC-iblNqTh2&Pw*^(4384f+D8N|fewZu_ zg2ejQ)ov;ztz;NQl7yj;A`(!H!XQu_$sqY9h_IrH*}_%1{L&_YLDvO?%R5Z-t+ClW z_qERbL?HKUZ!nt+!E9S`uoh^5A|DaIHe*_gf1`E_Vq+}{&T@t$EGhMnRjJ4z2w_W8 zp+qjs7as22^&S3wY1?+}^j-I=RcCE>#|39)g( lU7v_8;?=qK(9D8-*pPdiy)P3lIblG`+?%ea| zYoD3dopYt!tKgFicfNmNi(EWE=E4hC6(r|PYtanqJlmt57YOVrr2^tfrG(eG9C##X zu&1t@%L$RIvpj!w UA z8i>Pqot#_+Cnp6L2XPcZy1ar|9MnY+7eNvK1E)@Tr#2KsXq1*>)uUCozT7L##ok?o zhA6ofP4E|b*9tAfG?u f$#}>TIR&1A!yslP8}i7w-EzW(x#9VEvx18k%Tn=-$VV zkOtUr0b2!w3t>h?#8AZl^Az*(6KCGlD;4j~yx};`#2gN1_gv=%7KVzecIRakN{f*4 zeaI>yH;-o4OGhvGTU)(quWI )-q?V*(sVesSMv|wMUQ3hLEt=lBB$KZ9TyHr> )f7o%) zPYeU<3P)*P10*7vE)nA5#{c=6-E-_>r_u4e3i!I2+UksELwDqwMeBZ9FSP$;^Ajro z_@M#_Ss$?ejoB@!wN|kbGKs(0zLo%0QpQXW#t;oC$B0MZYZ&Ej?8~fNhcCVvPo3vo zFn0WWZaPliF^8_}yzb`*f@yg0uWv6HgNI)xa=pO%Ck(C<=-60l#uD3(wXP~c7!NoX z0&^6=N`zcc90F#qt@=Rn@r!3(*1v(Tl{B!m?Mc7yIA+nEHpY{YWr$=)F7rhR1P}(v zt{YhY#;jsW6G>#xhP*B`OCk|Pf+NN;ju1rxa*HAgoGq*rvqw&xe~;t1JA31$s?GBb z*g7&@cbKo4n<`>)!UlIAgR6q&))B0KYU8r66GbFj?8Guw4E%&}Qi_lT003LtoIZei zwD~=XZmeo+yZ2Pq3KYCF-R&11^p = z@H%s+=G`}wrbJ{()Mh71#2SP3Zy3m>l1n?0N-N1Q;z6?oSxr-G(H5m4EO>~&;}VKi zfY}3w+9z> vp#d)hVuu`)vG_aaH%3b=WKMnSu&c31;<3O;bz2iD=w+o4#oBb36 z5ZCF*Gu?zjZIR0S>_%pHY2$k8D^n7Sz_K8tCDeXM+dO<#LSg%h6`~dnVG1N@T7v&e z%wEd1!k{^zfz_1BTW{!$!B%g)J^2b87!9Y>>100X1SgT7s0z$o>^lAA=G p_cC1(h=*5Tmf8z&LGJJ>$|K^~s`z9*OWz5MFUr?>Bi?_PGBB)#psD5?>n+q{o_ zz7~ez&;t#h8l$jwGPCC&xq2YetXYQT+0F3j(`xmNGf8dj#an|p#I*pvI*kwW4iuB> z+q3_7xB8y;pLzHG-S%+UHQ A zvqp;$kmGJY>lL sN4C~&TcvAS1SErTcwcw0r@wngk zShAUA1M9b#g}^pL-zH7Q#z^&j#r9F8BTVfkR&qF<=e35goTu7c|GN)0mokj4m0%~0 zXJ8j4Hc_l;HJ&uU*Iw`8d_EscJ``s0tk9mkKo^TYXm-EoAzTQObxa@^u~g2t#T) zJz|rE!I_?i4dCJC=B8(_pZ{YR>|V?0iCcnU;E@$239^x?SYCfNaMHN;CtHIS_zHN9 zTkQc1v@O35okiFtq5_u+5FkY55ap@pi)O?}x0D1c*qB0KpY R}>Ul+B0Vmr}Z@+%mJ|As}sis_=ROPbov@*2thpE&?!V#Qgu$snYvCZ zrkhmkMU+fSf-s8(L37 fPr&M*jRs{{THb!aXQu|P9l_-vJhHvLzMGH zE?1U0H_+Pm NABp9`|KzkGfrrZ%XvdGo6*<{d5m9~L7 z_ ^`M;X6xDo=m6LY6RfvJEvsTK1!u8d2HPx| $S}p;sRy!I zWL55Yxu~_B`OP@~(q6&W3#)~I&+MGL%GWR$#udC151^wsswhqlii;rP9jJpiI7o&Z zAb})=HY7?4HA|re3ns`%$)FuvKCFWjhb~?IE)F6dF2K5}poj-NK6Gf;hw$t3=1txY zoxQxZWrQU6K!%|~!m?~Bnw-6Rr!F3BZ{u5!LqnZTDON}Coj9^@&le)V!NYrVwS~B% zEL+>Sr@}qGwGvu|HrOo|gSt__ezN^&%~{*)a=rf7y1HujUcr`zZB<4#l@T#eN)si} z)lZA<{=tKx8E%c9>A(##6 }_p+~EZpKsl5a4pj`E*;_-6`ysiv zffA!7=MT1vCz}-m4~tjVey1b2KSR4OEtLd-(_DdUqYZ74LaDkhH?KFh?%WAOP2WbX zp@zT+Dx|5_f%JQiAGvVw!oh +g3e50u!aPfMxdC=E)XB{F5IcEZhePIM- zph6Y`$Oy?JBL<8Ex(SqEhLeQ@XcrdA>a?rx+_~HLA;l14)WmmpH}_w?Pg#HBZs0eS zwypwAW?M-x+3AU-(GGWSJ=ngxUEcEZ5OsX(Qlt !MQ zn^(`S{GHkAv(8@D`EAfSYig%Cxv?z!{=w^F#y)5_d7FuKZH7qlR-#5B0bt806%D0I zT7VdVP_?q*%Rq8UR;JkD4i^RXowt+E%#V2U>TfDqzZSDZ+dR!a#T3I>-z_$q9@k|m zy5~A*m~&JWP@E7a=pc}4kVHTc4h&R;Li7d@f`|hKMLkbb^uhOakNr3&FLj lm~i5NBM< zFaYI{;cpiHCNRdE0dg*>qIm(_t?#$h=(SCw?h3rJV2*ER8{O4^3#=dO)KwklZkoqU zS8i5c%YL*y*4;FY#D=XmkQnYj%LH)?02~gSJH`Qp1XY64g>%c_K$xseI&|e)7vRoL zAqRba$G@%fSGA7X7hQk%_3NVOYVS+$leU_!&6*5uN)8#5ZBz_6ASCA;azYS-Rt@ki zg2NWz(=;t}SC(~Ibl63$5C8FPmhXqb^)5#jaJ~I{Ex3xZ!+2h8$}}h_g@Be>HZ;72 z6#y#>AY3^skuVKF#0WxFBQ()5d5_nWb?c6c>EeMM|Mh+*&wEpPyxHCq{R-Gdr-`hN zF=1sxl&mBoK+#qRLl9#CEN|Fg8>nbmsTg3a1;#M9enQ$RgWk}kp#-5wh=EF&1tl%mJln2V^8o%Qv(*=zEuO7y z=m*8?xpUn-*@h5Cl_3BK3joiGkyaScK+>|MWdMRWm@RT!Q1piAlv5hL@B6>3&GI8) zP!xBc6}ZNIpJLL%2a8Y!+(<=f%WX>_uWVxlga9!D*oYt$l0cxRDMvqfU;Kq_mLK5k z)dvqYcgLa_Lz?3HyeF)@$%$&6lI?r4I>6W#M*<)vq{?& Oqrx``d`mhpVPr> z#q078F6gw_X<=?KR>8%^t%@wbITvNMu!hKiTSkCTJkw>1!e*Y{%31#_yMf=LW7{RJ zYoC^w$6%3cBtVG5)x#{Hg6IVTh9XEcM{gQwXk!R^y95^f-hZ`d{aVa+xW1EO4wDV4 zB?JgD7*?qkvc|$nIykTvNl2x0j3Q!MXoLL^)~}d7jcYf(H8D~c+?$pKL(px>Z3`eb z04RzS6_AgFT6Pn#iZAg$Sl_j8#;6ShF%&(Fag#E2asU@@LaN;=b=Wf7sgPKhfzhBM zC@eFL8^MrnA*9&Khe*Ab@CC9*uyJGXyi(;y2>lQLJZt;ShtJi?3Yf_t `F+$hY!+Q2Ndsx=U+bjTiAy7djLji>7k%k`$9&--f<*BNA3Hy&ZrHH|4 zG5H&9cB?O#zI1_OOf0Ce%mDfQxdtp3vU%(iY6yji3iISS61XLv#z|!zI_sZqza@B+ zyu9st5-h+`H7QUKx9}3w@oU@EO}&cEzG?fu!!bLO->%zkcg;i9^j`S~=WKMnDi1f= P00000NkvXXu0mjft=yBf literal 0 HcmV?d00001 diff --git a/frontend-react/src/assets/react.svg b/frontend-react/src/assets/react.svg new file mode 100644 index 000000000..6c87de9bb --- /dev/null +++ b/frontend-react/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend-react/src/assets/vite.svg b/frontend-react/src/assets/vite.svg new file mode 100644 index 000000000..5101b674d --- /dev/null +++ b/frontend-react/src/assets/vite.svg @@ -0,0 +1 @@ + diff --git a/frontend-react/src/components/dashboard/AssignmentSubmissionsChart.tsx b/frontend-react/src/components/dashboard/AssignmentSubmissionsChart.tsx new file mode 100644 index 000000000..7209b3ab4 --- /dev/null +++ b/frontend-react/src/components/dashboard/AssignmentSubmissionsChart.tsx @@ -0,0 +1,89 @@ +/** + * Bar chart showing per-assignment submission counts and average time spent. + */ + +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, +} from 'recharts'; +import type { AssignmentMetricSummary } from '../../types/models'; +import { formatDuration } from '../../api/dashboardUtils'; + +interface Props { + data: AssignmentMetricSummary[]; +} + +interface ChartRow { + name: string; + submissions: number; + avgEdits: number; + avgTimeSpentMin: number; +} + +const COLORS = { + submissions: '#4e73df', + avgEdits: '#1cc88a', + avgTime: '#36b9cc', +}; + +export default function AssignmentSubmissionsChart({ data }: Props) { + const chartData: ChartRow[] = data.map((d) => ({ + name: d.assignment_name.length > 20 ? d.assignment_name.slice(0, 18) + '…' : d.assignment_name, + submissions: d.submission_count, + avgEdits: Math.round(d.avg_total_edits), + avgTimeSpentMin: Math.round(d.avg_time_spent / 60), + })); + + return ( + ++ ); +} diff --git a/frontend-react/src/components/dashboard/ErrorRateChart.tsx b/frontend-react/src/components/dashboard/ErrorRateChart.tsx new file mode 100644 index 000000000..7cff89ae6 --- /dev/null +++ b/frontend-react/src/components/dashboard/ErrorRateChart.tsx @@ -0,0 +1,63 @@ +/** + * Stacked bar chart showing error rates per assignment. + */ + +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + ResponsiveContainer, +} from 'recharts'; +import type { AssignmentMetricSummary } from '../../types/models'; + +interface Props { + data: AssignmentMetricSummary[]; +} + +export default function ErrorRateChart({ data }: Props) { + const chartData = data.map((d) => ({ + name: d.assignment_name.length > 20 ? d.assignment_name.slice(0, 18) + '…' : d.assignment_name, + syntaxErrorRate: parseFloat((d.syntax_error_rate * 100).toFixed(1)), + runtimeErrorRate: parseFloat((d.runtime_error_rate * 100).toFixed(1)), + assertionSuccessRate: parseFloat((d.assertion_success_rate * 100).toFixed(1)), + })); + + return ( ++ Submissions & Edits per Assignment +
++ ++ ++ + + { + const v = typeof value === 'number' ? value : 0; + if (name === 'avgTimeSpentMin') return [`${v} min`, 'Avg Time Spent']; + return [v, name === 'submissions' ? 'Submissions' : 'Avg Edits']; + }} + /> + + Hover bars for details. Time shown in minutes. Raw avg time:{' '} + {data.map((d) => `${d.assignment_name}: ${formatDuration(d.avg_time_spent)}`).join(' | ')} +
+++ ); +} diff --git a/frontend-react/src/components/dashboard/MetricsTable.tsx b/frontend-react/src/components/dashboard/MetricsTable.tsx new file mode 100644 index 000000000..61acdc262 --- /dev/null +++ b/frontend-react/src/components/dashboard/MetricsTable.tsx @@ -0,0 +1,101 @@ +/** + * Detailed metrics table — one row per assignment. + */ + +import type { AssignmentMetricSummary } from '../../types/models'; +import { formatDuration } from '../../api/dashboardUtils'; + +interface Props { + data: AssignmentMetricSummary[]; +} + +const thStyle: React.CSSProperties = { + background: '#4e73df', + color: '#fff', + padding: '8px 12px', + textAlign: 'left', + fontWeight: 600, + fontSize: 13, + whiteSpace: 'nowrap', +}; + +const tdStyle: React.CSSProperties = { + padding: '7px 12px', + fontSize: 13, + borderBottom: '1px solid #dee2e6', +}; + +function pct(v: number) { + return `${(v * 100).toFixed(1)}%`; +} + +export default function MetricsTable({ data }: Props) { + return ( ++ Error & Success Rates per Assignment (%) +
++ ++ ++ + `${v}%`} /> + {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */} + `${typeof v === 'number' ? v : 0}%`} /> + + + + + + Error rates are calculated as errors per run attempt. Success rate = passing assertions / total assertions. +
+++ ); +} diff --git a/frontend-react/src/components/dashboard/StatCard.tsx b/frontend-react/src/components/dashboard/StatCard.tsx new file mode 100644 index 000000000..c60424bd4 --- /dev/null +++ b/frontend-react/src/components/dashboard/StatCard.tsx @@ -0,0 +1,51 @@ +/** Small summary card shown at the top of the dashboard. */ + +import type { CSSProperties } from 'react'; + +interface StatCardProps { + label: string; + value: string | number; + sub?: string; + color?: string; +} + +const cardStyle: CSSProperties = { + background: '#fff', + border: '1px solid #dee2e6', + borderRadius: 8, + padding: '16px 20px', + minWidth: 140, + flex: '1 1 140px', + boxShadow: '0 1px 3px rgba(0,0,0,.07)', +}; + +const labelStyle: CSSProperties = { + fontSize: 12, + fontWeight: 600, + textTransform: 'uppercase', + letterSpacing: 0.5, + color: '#6c757d', + marginBottom: 4, +}; + +const valueStyle: CSSProperties = { + fontSize: 28, + fontWeight: 700, + lineHeight: 1, + marginBottom: 4, +}; + +const subStyle: CSSProperties = { + fontSize: 12, + color: '#6c757d', +}; + +export default function StatCard({ label, value, sub, color = '#212529' }: StatCardProps) { + return ( ++ Assignment Metrics Detail +
++ +
++ + + + {data.map((row, i) => ( +Assignment +Submissions +Avg Edits +Avg Time +Avg Runs +Syntax Err% +Runtime Err% +Assert Pass% +Avg Feedback ++ + ))} + {data.length === 0 && ( ++ {row.assignment_name} + +{row.submission_count} +{row.avg_total_edits.toFixed(1)} +{formatDuration(row.avg_time_spent)} +{row.avg_interventions.toFixed(1)} +0.3 ? '#e74a3b' : 'inherit' }}> + {pct(row.syntax_error_rate)} + +0.3 ? '#f6c23e' : 'inherit' }}> + {pct(row.runtime_error_rate)} + +0.7 ? '#1cc88a' : '#e74a3b', + }} + > + {pct(row.assertion_success_rate)} + +{row.avg_feedback_total.toFixed(1)} ++ + )} + ++ No data available. + +++ ); +} diff --git a/frontend-react/src/components/dashboard/StudentTable.tsx b/frontend-react/src/components/dashboard/StudentTable.tsx new file mode 100644 index 000000000..9bb142045 --- /dev/null +++ b/frontend-react/src/components/dashboard/StudentTable.tsx @@ -0,0 +1,77 @@ +/** + * Table showing per-student summary metrics. + */ + +import type { StudentMetricSummary } from '../../types/models'; +import { formatDuration } from '../../api/dashboardUtils'; + +interface Props { + data: StudentMetricSummary[]; +} + +const thStyle: React.CSSProperties = { + background: '#1cc88a', + color: '#fff', + padding: '8px 12px', + textAlign: 'left', + fontWeight: 600, + fontSize: 13, + whiteSpace: 'nowrap', +}; + +const tdStyle: React.CSSProperties = { + padding: '7px 12px', + fontSize: 13, + borderBottom: '1px solid #dee2e6', +}; + +export default function StudentTable({ data }: Props) { + return ( +{label}+{value}+ {sub &&{sub}} +++ ); +} diff --git a/frontend-react/src/hooks/useFetch.ts b/frontend-react/src/hooks/useFetch.ts new file mode 100644 index 000000000..e8005675a --- /dev/null +++ b/frontend-react/src/hooks/useFetch.ts @@ -0,0 +1,91 @@ +/** + * React hooks for data fetching. + */ + +import { useState, useEffect, useCallback } from 'react'; +import type { Course, DashboardData } from '../types/models'; +import { listCourses, getCourseMetrics } from '../api/client'; + +export interface FetchStateStudent Summary
++ +
++ + + + {data.map((row, i) => ( +User ID +Submissions +Correct +Avg Score +Avg Time +Avg Edits ++ + ))} + {data.length === 0 && ( +{row.user_id} +{row.submission_count} ++ {row.correct_count} / {row.submission_count} + +{row.avg_score.toFixed(1)} +{formatDuration(row.avg_time_spent)} +{row.avg_edits.toFixed(1)} ++ + )} + ++ No student data available. + +{ + data: T | null; + loading: boolean; + error: string | null; + refetch: () => void; +} + +function useFetch (fetcher: () => Promise ): FetchState { + const [data, setData] = useState (null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState (null); + const [tick, setTick] = useState(0); + + const refetch = useCallback(() => setTick((t) => t + 1), []); + + useEffect(() => { + let cancelled = false; + setLoading(true); + setError(null); + fetcher() + .then((result) => { + if (!cancelled) { + setData(result); + setLoading(false); + } + }) + .catch((err: unknown) => { + if (!cancelled) { + setError(err instanceof Error ? err.message : String(err)); + setLoading(false); + } + }); + return () => { + cancelled = true; + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [tick]); + + return { data, loading, error, refetch }; +} + +export function useCourses(): FetchState { + return useFetch(listCourses); +} + +export function useCourseMetrics( + courseId: number | null +): FetchState { + const [data, setData] = useState (null); + const [loading, setLoading] = useState(false); + const [error, setError] = useState (null); + const [tick, setTick] = useState(0); + + const refetch = useCallback(() => setTick((t) => t + 1), []); + + useEffect(() => { + if (courseId === null) { + setData(null); + return; + } + let cancelled = false; + setLoading(true); + setError(null); + getCourseMetrics(courseId) + .then((result) => { + if (!cancelled) { + setData(result); + setLoading(false); + } + }) + .catch((err: unknown) => { + if (!cancelled) { + setError(err instanceof Error ? err.message : String(err)); + setLoading(false); + } + }); + return () => { + cancelled = true; + }; + }, [courseId, tick]); + + return { data, loading, error, refetch }; +} diff --git a/frontend-react/src/index.css b/frontend-react/src/index.css new file mode 100644 index 000000000..5fb331302 --- /dev/null +++ b/frontend-react/src/index.css @@ -0,0 +1,111 @@ +:root { + --text: #6b6375; + --text-h: #08060d; + --bg: #fff; + --border: #e5e4e7; + --code-bg: #f4f3ec; + --accent: #aa3bff; + --accent-bg: rgba(170, 59, 255, 0.1); + --accent-border: rgba(170, 59, 255, 0.5); + --social-bg: rgba(244, 243, 236, 0.5); + --shadow: + rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; + + --sans: system-ui, 'Segoe UI', Roboto, sans-serif; + --heading: system-ui, 'Segoe UI', Roboto, sans-serif; + --mono: ui-monospace, Consolas, monospace; + + font: 18px/145% var(--sans); + letter-spacing: 0.18px; + color-scheme: light dark; + color: var(--text); + background: var(--bg); + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + @media (max-width: 1024px) { + font-size: 16px; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #9ca3af; + --text-h: #f3f4f6; + --bg: #16171d; + --border: #2e303a; + --code-bg: #1f2028; + --accent: #c084fc; + --accent-bg: rgba(192, 132, 252, 0.15); + --accent-border: rgba(192, 132, 252, 0.5); + --social-bg: rgba(47, 48, 58, 0.5); + --shadow: + rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; + } + + #social .button-icon { + filter: invert(1) brightness(2); + } +} + +#root { + width: 1126px; + max-width: 100%; + margin: 0 auto; + text-align: center; + border-inline: 1px solid var(--border); + min-height: 100svh; + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +body { + margin: 0; +} + +h1, +h2 { + font-family: var(--heading); + font-weight: 500; + color: var(--text-h); +} + +h1 { + font-size: 56px; + letter-spacing: -1.68px; + margin: 32px 0; + @media (max-width: 1024px) { + font-size: 36px; + margin: 20px 0; + } +} +h2 { + font-size: 24px; + line-height: 118%; + letter-spacing: -0.24px; + margin: 0 0 8px; + @media (max-width: 1024px) { + font-size: 20px; + } +} +p { + margin: 0; +} + +code, +.counter { + font-family: var(--mono); + display: inline-flex; + border-radius: 4px; + color: var(--text-h); +} + +code { + font-size: 15px; + line-height: 135%; + padding: 4px 8px; + background: var(--code-bg); +} diff --git a/frontend-react/src/main.tsx b/frontend-react/src/main.tsx new file mode 100644 index 000000000..bef5202a3 --- /dev/null +++ b/frontend-react/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.tsx' + +createRoot(document.getElementById('root')!).render( + + , +) diff --git a/frontend-react/src/pages/InstructorDashboard.tsx b/frontend-react/src/pages/InstructorDashboard.tsx new file mode 100644 index 000000000..a23b4fde0 --- /dev/null +++ b/frontend-react/src/pages/InstructorDashboard.tsx @@ -0,0 +1,293 @@ +/** + * Instructor Dashboard page. + * + * Shows submission metrics for a selected course using charts and tables. + * Data comes from /courses/fake_dashboard?mode=json. + */ + +import { useState, useMemo } from 'react'; +import type { Course } from '../types/models'; +import { useCourses, useCourseMetrics } from '../hooks/useFetch'; +import { processDashboardData } from '../api/dashboardUtils'; +import { getCourseMetricsCsv } from '../api/client'; +import StatCard from '../components/dashboard/StatCard'; +import AssignmentSubmissionsChart from '../components/dashboard/AssignmentSubmissionsChart'; +import ErrorRateChart from '../components/dashboard/ErrorRateChart'; +import MetricsTable from '../components/dashboard/MetricsTable'; +import StudentTable from '../components/dashboard/StudentTable'; + +function downloadBlob(blob: Blob, filename: string) { + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + a.click(); + URL.revokeObjectURL(url); +} + +export default function InstructorDashboard() { + const [selectedCourseId, setSelectedCourseId] = useState+ (null); + const [activeTab, setActiveTab] = useState<'charts' | 'assignment-table' | 'student-table'>( + 'charts' + ); + const [csvLoading, setCsvLoading] = useState(false); + + const coursesState = useCourses(); + const metricsState = useCourseMetrics(selectedCourseId); + + const processed = useMemo(() => { + if (!metricsState.data) return null; + return processDashboardData(metricsState.data); + }, [metricsState.data]); + + function handleCourseChange(e: React.ChangeEvent ) { + const val = parseInt(e.target.value, 10); + setSelectedCourseId(isNaN(val) ? null : val); + } + + async function handleExportCsv() { + if (!selectedCourseId) return; + setCsvLoading(true); + try { + const blob = await getCourseMetricsCsv(selectedCourseId); + downloadBlob(blob, `metrics_course_${selectedCourseId}.csv`); + } catch (e) { + alert(`CSV export failed: ${e instanceof Error ? e.message : String(e)}`); + } finally { + setCsvLoading(false); + } + } + + const tabStyle = (active: boolean): React.CSSProperties => ({ + padding: '8px 18px', + border: 'none', + borderRadius: '6px 6px 0 0', + background: active ? '#fff' : '#e9ecef', + color: active ? '#4e73df' : '#495057', + fontWeight: active ? 700 : 400, + cursor: 'pointer', + fontSize: 14, + marginRight: 4, + borderBottom: active ? '2px solid #4e73df' : '2px solid transparent', + }); + + return ( + + {/* Header */} ++ ); +} diff --git a/frontend-react/src/types/models.ts b/frontend-react/src/types/models.ts new file mode 100644 index 000000000..b2fc42ad2 --- /dev/null +++ b/frontend-react/src/types/models.ts @@ -0,0 +1,193 @@ +/** + * TypeScript models matching the BlockPy server data structures. + */ + +// ---- Enums ---- + +export type SubmissionStatus = 'started' | 'submitted' | 'completed' | 'inProgress'; +export type GradingStatus = 'not_ready' | 'queued' | 'failed' | 'done' | 'waiting'; + +/** Mirrors models/enums/metrics.py SubmissionMetrics */ +export type SubmissionMetric = + | 'total_edit_time' + | 'total_edits' + | 'total_intervention_time' + | 'total_interventions' + | 'total_time_spent' + | 'total_read_time' + | 'total_active_read_time' + | 'total_watch_time' + | 'pastes' + | 'emojis' + | 'window_visibility_changes' + | 'feedback_total' + | 'feedback_syntax_errors' + | 'feedback_runtime_errors' + | 'feedback_assertion_counts' + | 'feedback_assertion_successes' + | 'feedback_assertion_feedbacks' + | 'feedback_assertion_feedback_successes'; + +// ---- Core Models ---- + +export interface User { + id: number; + email: string; + first_name: string; + last_name: string; +} + +export interface Course { + id: number; + name: string; + url: string; + visibility: string; + date_created?: string; +} + +export interface Assignment { + id: number; + name: string; + url: string; + type: string; + course_id: number; + reviewed: boolean; + hidden: boolean; +} + +export interface AssignmentGroup { + id: number; + name: string; + url: string; + course_id: number; + position: number; +} + +export interface Submission { + id: number; + user_id: number; + assignment_id: number; + course_id: number; + code: string; + score: number; + correct: boolean; + submission_status: SubmissionStatus; + grading_status: GradingStatus; + date_created?: string; + date_modified?: string; + date_submitted?: string; + url: string; +} + +// ---- Counts Tables ---- + +export interface SubmissionCounts { + submission_id: number; + metric: SubmissionMetric; + value: number; +} + +export interface CourseCounts { + course_id: number; + total_submissions: number; + total_assignments: number; + total_assignment_groups: number; + total_users: number; + total_students: number; + total_instructors: number; + date_last_user?: string; + date_last_submission?: string; + date_last_assignment?: string; +} + +export interface AssignmentCounts { + assignment_id: number; + total_submissions: number; + date_last_submission?: string; +} + +export interface UserCounts { + user_id: number; + total_courses_in: number; + total_assignments: number; + total_submissions: number; + total_reports: number; + estimated_time_spent: number; + last_logged_in?: string; + last_edited?: string; +} + +// ---- Dashboard Aggregate Types ---- + +/** Row returned by /courses/fake_dashboard?mode=json */ +export interface DashboardRow { + assignment_url: string; + user_id: number; + metrics: Record++ + {/* State messages */} + {!selectedCourseId && !coursesState.loading && ( ++ 📊 Instructor Dashboard +
++ Submission metrics and analytics for your courses. +
+ + {/* Course selector */} ++ + {coursesState.loading && Loading courses…} + {coursesState.error && ( + Error: {coursesState.error} + )} + {coursesState.data && ( + + )} + {selectedCourseId && ( + <> + + + > + )} +++ Select a course above to view submission metrics. ++ )} + + {metricsState.loading && ( ++ Loading metrics… ++ )} + + {metricsState.error && ( ++ Error loading metrics: {metricsState.error} ++ )} + + {/* Dashboard content */} + {processed && !metricsState.loading && ( + <> + {/* Stat cards */} +++ + {/* Empty state */} + {processed.byAssignment.length === 0 && ( ++ + + 0 + ? `${Math.round(processed.totals.avgTimeSpent / 60)} min` + : 'N/A' + } + /> + = 70 ? '#1cc88a' : '#e74a3b'} + /> + 0.3 ? '#e74a3b' : '#212529'} + /> + 0.3 ? '#f6c23e' : '#212529'} + /> + + No submission data found for this course. Students may not have started assignments yet. ++ )} + + {processed.byAssignment.length > 0 && ( + <> + {/* Tabs */} ++ + + ++ ++ {activeTab === 'charts' && ( ++ > + )} + > + )} +++ )} + {activeTab === 'assignment-table' && ( ++
++ + )} + {activeTab === 'student-table' && ( + + )} + ; +} + +/** Dashboard data as returned by the fake_dashboard endpoint */ +export interface DashboardData { + counts: [string, number, Record ][]; +} + +/** Per-assignment aggregated metrics for display */ +export interface AssignmentMetricSummary { + assignment_url: string; + assignment_name: string; + submission_count: number; + avg_total_edits: number; + avg_time_spent: number; + avg_interventions: number; + syntax_error_rate: number; + runtime_error_rate: number; + assertion_success_rate: number; + avg_feedback_total: number; +} + +/** Per-student aggregated metrics */ +export interface StudentMetricSummary { + user_id: number; + submission_count: number; + avg_score: number; + avg_time_spent: number; + avg_edits: number; + correct_count: number; +} + +// ---- API Response Wrappers ---- + +export interface ApiSuccess { + success: true; + data: T; +} + +export interface ApiError { + success: false; + message: string; +} + +export type ApiResponse = ApiSuccess | ApiError; + +export interface CoursesListResponse { + courses: Course[]; +} + +export interface TaskResponse { + task_id: string; + status_url: string; +} + +export interface TaskStatus { + status: 'Pending' | 'Complete' | 'Error'; + message: unknown; +} + +export interface GradingSpreadsheetRow { + user_id: number; + assignment_id: number; + submission_id: number; + score: number; + correct: boolean; + [key: string]: unknown; +} diff --git a/frontend-react/tsconfig.app.json b/frontend-react/tsconfig.app.json new file mode 100644 index 000000000..7f42e5f7c --- /dev/null +++ b/frontend-react/tsconfig.app.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + "target": "es2023", + "lib": ["ES2023", "DOM"], + "module": "esnext", + "types": ["vite/client"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/frontend-react/tsconfig.json b/frontend-react/tsconfig.json new file mode 100644 index 000000000..1ffef600d --- /dev/null +++ b/frontend-react/tsconfig.json @@ -0,0 +1,7 @@ +{ + "files": [], + "references": [ + { "path": "./tsconfig.app.json" }, + { "path": "./tsconfig.node.json" } + ] +} diff --git a/frontend-react/tsconfig.node.json b/frontend-react/tsconfig.node.json new file mode 100644 index 000000000..8455dcbc2 --- /dev/null +++ b/frontend-react/tsconfig.node.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "target": "es2023", + "lib": ["ES2023"], + "types": ["node"], + "skipLibCheck": true, + + /* Bundler mode */ + "module": "nodenext", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "noUnusedLocals": true, + "noUnusedParameters": true, + "erasableSyntaxOnly": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["vite.config.ts"] +} diff --git a/frontend-react/vite.config.ts b/frontend-react/vite.config.ts new file mode 100644 index 000000000..e7a607b89 --- /dev/null +++ b/frontend-react/vite.config.ts @@ -0,0 +1,32 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import path from 'path' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], + base: '/static/libs/blockpy_react/', + build: { + outDir: path.resolve(__dirname, '../static/libs/blockpy_react'), + emptyOutDir: true, + rollupOptions: { + input: path.resolve(__dirname, 'index.html'), + output: { + // Use stable (non-hashed) filenames so the Flask template doesn't + // need to be updated after every build. + entryFileNames: 'assets/index.js', + chunkFileNames: 'assets/[name].js', + assetFileNames: 'assets/[name].[ext]', + }, + }, + }, + server: { + proxy: { + '/api': 'http://localhost:5001', + '/courses': 'http://localhost:5001', + '/assignments': 'http://localhost:5001', + '/grading': 'http://localhost:5001', + '/blockpy': 'http://localhost:5001', + }, + }, +}) diff --git a/templates/helpers/layout.html b/templates/helpers/layout.html index 2b402d63b..b3b90dd14 100644 --- a/templates/helpers/layout.html +++ b/templates/helpers/layout.html @@ -245,6 +245,11 @@ Try Editor + {% if g.user and not g.user.anonymous %} ++ Dashboard + + {% endif %} {% if g.user and g.user.is_admin() %}Admin diff --git a/templates/react/dashboard.html b/templates/react/dashboard.html new file mode 100644 index 000000000..6fe319511 --- /dev/null +++ b/templates/react/dashboard.html @@ -0,0 +1,19 @@ +{% extends 'helpers/layout.html' %} + +{% block title %}Instructor Dashboard{% endblock %} + +{% block extrahead %} + +{% endblock %} + +{% block body %} +{# The React app mounts into #root which is provided by this div. #} + + + +{% endblock %}