CSC/ECE 517 Spring 2016 E1629 Performance improvement for Course & Assignment Listing: Difference between revisions
No edit summary |
|||
(43 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
== Purpose == | == 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 the public courses that are created by other users. | 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 == | == Problem Statement == | ||
On the | 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. | ||
* ''Include others' items'' check-box should be unchecked by default for both courses and assignments page. | 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: | ||
* Current implementation of the | * ''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. | ||
* 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. | * 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. | * 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:<br>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. | |||
<br>'''Files modified:'''<br> | |||
* 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''' | |||
[[File:Private Tab for Courses.png]]<br> | |||
'''View of the Public Courses Section''' | |||
[[File:Public Tab for Courses.png]] | |||
===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. | |||
<br>'''Files modified:'''<br> | |||
* 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. | |||
<br>'''Files modified:'''<br> | |||
* app/controllers/tree_display_controller.rb | |||
* app/assets/javascripts/tree_display.jsx | |||
* app/views/tree_display/actions/_courses_actions.html.erb | |||
===Use Case Diagrams=== | |||
[[File:Current_Implemenation.png]] | |||
[[File:Proposed_Implementation.png]] | |||
=== 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 == | == 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 |
Latest revision as of 19:57, 26 April 2016
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