Page tree
Skip to end of metadata
Go to start of metadata


  • Developer: Joonatan (10h/w -May), Ella (June - August)
  • Technical instructor: Jaakko
  • Customer: Jaakko
  • Weekly: -

Process description

Write here

Project description

Rewrite points page JavaScript to handle pagination better using reactive pattern, RxJS.

Project goals:

  1. Implement reactive pattern for downloading
  2. Cache request to local storage, so opening the page is instant (mark data as "old")
  3. Start updating the data after reloading from cache
  4. Encrypt cache, so no personal details are left on disk (

Documentation of library used:

Debugging library for RxJS:


GitHub (meta) issue that includes the course points issue:

The code after the summer 2020 is here:

A draft pull request for the code:


  • Pipeline works up to and including populating exercise&module selection and rendering out table with names of students
  • Table is rendered using rxJS and event listeners
  • student emails are included in the table (hidden in the browser)
  • student points are filled in the table
  • whole table is drawn, columns and rows are hidden as needed and sums updated (before table was rerendered entirely on each change)
  • filtering by student tags seems to work
  • Calculation and updation of values on indicator rows seems to work
  • Simple fixes on vertical and horizontal scrolling as well as stick-on-scroll headings
  • Rather than displaying exactly one point grouping method at once (difficulty, module or all exercises), several groupings (or none) can be displayed at once. (This could be extended to include a calculated grade as one grouping method)
  • Reworded some tooltips, added more info about indicator row percentages, updated translations

In progress:

  • cleaning up code, documentation, getting page to work all right

To be done next:

  • get aplusTableFilter and TableExport working


  • get aplusTableFilter working with hidden rows
    • The attribute hidden used currently for rows is overridden if the display value is changed. Figure out how to implement hiding rows so that the two (aplusTableFilter and filtering using colortags) play well together.
    • Currently the method is called automatically since the script is included in templates.base.html, but the method is called before  drawTablePrework adds rows to table, so only an empty filtering row is added
    • Dispatch event indicating row visibilities have been updated when visibilities are affected with the filters.
    • Do we want the filter cells to stick up top as well? (Not very easy to implement)
  • get TableExport working as wished
    • Export displayed cells (and email addresses), ignore hidden columns and rows; if normal indicator rows are exported, make sure data is in correct column (is it a problem that the heading has a colspan of 2?)
  • queue ajax-calls and create workers (say 5 of them) to execute those calls so not all of them are made (nearly) at once
  • update implementation so that data is fetched first for those that it's the most critical (eg. student rows that are displayed rather than hidden; after local caching: those rows that haven't been updated for a while)
  • create tests
  • Add a warning to module and difficulty sums (and possible grade) when not all their exercises are selected (reminding the user that the sum is only of the selected exercises, not all possible ones)
  • local caching
  • translate file with Babel or something (to add support for IE11, etc.)

Ideas for future and other notes

  • An extra heading row could be added to the top of the table to indicate/group point grouping methods (eg. "Points by difficulty", "Points by module and exercise")
    • see "Tables with irregular headings" and to tier headings:
    • If implemented:
      • One needs to think what the other colgroup headings would say (or would they be empty?)
      • Should this row stick on scroll as well? The CSS for stick-on-scroll would need to be updated in any case.
      • Cells would need to be hidden/shown when grouping methods are toggled
      • colspans may need to be updated when columns are toggled
    • If this is not implemented, col and colgroup tags could possibly be removed as unnecessary.
  • If there would be a way to get the horizontal scroll bar to appear at the bottom of the screen (or bottom of the table, whichever is higher) at all times, that would be awesome!
    • Then the height limiting the points-table-div could be undone (it's just a quick hack)
  • Caching data to local storage
    • Would enable viewing the table almost immediately as it can be rendered based on cached data (and rows could be updated when table is already visible)
    • Slowness vs. up-to-date, how long should it take that cached data is considered too old and should be updated? (10 minutes?)
    • When only some students are displayed, updating their data should be a higher priority.
  • There's a script created by Joonatan (and updated by Ella) by the name, which creates students, exercises and "submissions", and can help with playing around and testing how the page works. This file shouldn't be included in the "final product"
  • Unofficial points and submissions
    • Currently even if "show only unofficial points" is unchecked, if a person has any points from an official submission, those points are shown even if they would have more points from an unofficial submission (due to how best_submission in the API works), so basically the checkbox is useful only with unconfirmed points (e.g. mandatory feedback hasn't been answered yet); it would be good to make this very clear.
    • It's difficult to distinguish between how many official submissions a person has and how many unofficial (without individually going through each submission), so official/unofficial checkbox doesn't affect submission counts. This is said in the tooltip. Hopefully it's clear enough.
  • The file needs to be translated with Babel (or something), since there are many things IE11 doesn't support. Some of them have polyfills. Here are (most of) the methods and things that aren't supported in IE11, but are used in the file results_staff.js:
  • Here's rough sketch of what follows from different changes (may help in understanding the event and callback order):
  • No labels