CSC/ECE 517 Spring 2016 E1629 Performance improvement for Course & Assignment Listing

Purpose

The purpose of this project is to improve the performance of the Course and Assignment listing page. When an instructor or TA logs in to the system they are redirected to the course/assignment/questionnaire list page. This page lists all the courses that are created by the logged in user and also the public courses that are created by other users. The current implementation of the page is in ReactJS and takes a long time to load. The purpose of this project is to improve the performance of this functionality so that it takes lesser time to display the relevant data.

Problem Statement

The course assignment listing page has three tabs. These tabs are Courses, Assignments and Questionnaires. The courses tab lists all all the courses that the instructor/TA might be interested in. This includes all the courses that they created and also the public courses. Additionally in the courses page all the assignments related to each course is also loaded when the page is loaded. All assignments belonging to a course can be viewed by clicking on that course. On the listing page there exists a check-box which allows the user to select whether or not to display public projects. By default this option is selected and as a result all public and private courses are displayed. Similarly for the assignments page all the public as well as private assignments created by the user are loaded. Because of this the page takes a long time to load. This project is concerned with coming up with solutions so that the page is loaded in a quicker manner. The individual work items identified are as follows:

• Include others' items check-box should be unchecked by default for both courses and assignments page. By default, the public courses should not be loaded.
• Current implementation of the Course page makes separate REST calls to the controller for fetching assignments for each course. This is a bad design and it takes a while to load the whole page. we plan to modify such that the assignments are loaded only when a particular course is clicked.
• List the courses in two different sections. One section should be to list all the courses that are created by the user. The other section should be to display all the public courses. This section should be displayed only if the check-box is selected. Searching for courses in the current single list implementation is difficult. Partitioning the list into two sections would greatly improve the usability of the page.
• Similarly the assignments tab should be divided into two sections. The first section should list all the assignments that are created by the user and the next should list all the public assignments.

Magnitude of Problem

In order to better understand the problem consider the following scenario:
When logged in as an instructor(instructor6) the course page loads a total of 103 courses. Hence it will make 103 REST calls to fetch assignments for all these courses. Out of these 103 courses the signed in instructor is concerned with 25 courses. Assuming he checks the assignments to all of these courses it would result in a total of 25 REST calls to fetch assignments. This is a considerable reduction in the number of REST calls.

Design of Solution

Work Item 1: Separate Courses/Assignments into two sections

The table that displays the course listing is a ReactJS component. Currently it loads both private and public courses in the same section by means of a single REST call. We intend to split this such that one rest call is made for public courses and one call is made for private courses.
Files modified:

• app/controllers/tree_display_controller.rb
• app/assets/javascripts/tree_display.jsx
• app/views/tree_display/actions/_courses_folder_actions.html.erb

View of the Private Courses Section
View of the Public Courses Section

Work Item 2: Load only the private courses section

Adding to the changes made in previous work item, load only the private section on page load. The public section is loaded only when the check-box to load public courses is selected.
Files modified:

• app/controllers/tree_display_controller.rb
• app/assets/javascripts/tree_display.jsx
• app/views/tree_display/actions/_courses_folder_actions.html.erb

Work Item 3: Load assignments for each course as required

Each row in the course listing table represents a course. Each course has a sub section listing its assignment. Whenever a user clicks on a course a REST API call will be triggered and this will fetch the assignments, and a subsection will be added to the user interface.
Files modified:

• app/controllers/tree_display_controller.rb
• app/assets/javascripts/tree_display.jsx
• app/views/tree_display/actions/_courses_actions.html.erb

Use Case Diagrams

Database Design

This project is involved with improving the performance of the Course and Assignment Listing page. The work is majorly in reactJS and there is no necessity to change the current database design.

Performance Metric

In order to measure if the changes we made as part of the project leads to actual performance improvement, we are planning to use page load time as a metric. We will update this section with a comparison of the page load time on completion of the project.

Testing

Manual Testing

Since most of the changes that are required to implement this project are proposed in the user-interface using javascript we will be performing manual testing of the UI.

Detailed steps are as follows:

1. Course listing is a view used by instructors & TAs to view courses. As the instructor & TAs login to expertiza, they would be directed to the course listing where they would see that checkbox (“include others’ items”) to include public courses by other members, in the listing is unchecked by default. Similar to course listing, there is an assignment listing as well to be tested. Also check to see that only private courses are loaded by default.

2. The logged in user’s courses and others’ public courses are listed in two different sections. One section for each type. Section listing others’ public courses are displayed only when user selects the checkbox “include others’ items.

3. Similarly, the logged in user’s assignments and others’ public assignments are listed in two different sections. Section listing public assignments are be displayed only when user selects the checkbox “include others’ items”.

4. Check that on clicking a particular course in the course-listing page, the assignments of that course are listed.

Automated Testing

Added the following new test cases to the tree_display_controller:

TreeDisplayController
 should respond to #get_children_node_ng
 should respond to #get_children_node_2_ng
 should respond to #get_folder_node_ng
 POST #get_children_node_ng
   returns an empty list when there are no private or public courses
   returns a list of course objects(public) as json
   returns a list of course objects(private) as json
 GET #get_session_last_open_tab
   returns HTTP status 200
 GET #get_folder_node_ng
   populates a list of FolderNodes when there is a match
   populates an empty list when there is no match