CSC/ECE 517 Spring 2020 - E2013. Refactor tree-display.js and tree display controller.rb

Introduction

Expertiza is an online web application for educational purpose, and is developed using Ruby on Rails. Instructors are able to create, modify, delete and view assignments and students are able to form teams, submit assignments and make reviews using this application.

The tree-display.js and its tree_display_controller.rb files are designed to allow Expertiza users to view their Assignments, Courses and Questionnaires at one place. This is the primary control page, as well as the home page for instructors on Expertiza which allows them to create, modify, delete and view Assignments.

Problem Statement

Background

The primary problem with this is that both the files, due to their bulky and unoptimized methods, slow the rendering of UI on screen. The methods in these files can be studied and refactored to improve the overall performance of this controller and its corresponding UI. Moreover, any obsolete or unused methods can be removed and DRY principle should be implemented. This project mostly revolves around these 2 files, and would involve refactoring JavaScript more than Ruby on Rails.

Issue1

There may be unused methods in the controller or java script file due to previous development, maintenance and refactoring.

Issue2

Loading speed of the web page is slowed down by repeated interface with database regarding to same variables but by different methods.

Used Methods

To find out unused methods in dynamically typed language like Ruby is difficult, thus our team is focusing on the suspicious methods which have neither comments nor references showing in github. All suspicious methods are tested and following shows the confirmed used methods as well as their functionality.

goto_... Methods

goto_... Methods are called when the instructor clicks on the corresponding node under the "Manage" menu (e.g. "goto_quetionnaires" is called when clicking on "Questionnaire" node.) and the user will get redirected to corresponding pages.

confirm

confirm method is called when the instructor tries to delete a course/assignment/review and chooses "yes" at the confirmation page.

folder_node_ng_getter

folder_node_ng_getter functions to render json of the node. (e.g. Returning all the courses data when clicking on "Course" node.)

Unused Methods

1. We found one unused method bridge_to_is_available and delete it.

OSS Code Changes

1. We simplified the month string representation in file app/assets/javascripts/tree_display.jsx

2. We found the goto_* functions in file app/controllers/tree_display_controller.rb are not necessary and can be replaced with the goto_controller(name_parameter). However, they are called outside of the files in our scope and we did not modify them for now.

3. We found a confusing variable name "res2" in file app/controllers/tree_display_controller.rb and changed.

4. We found two confusing method names "update_is_available" and "update_is_available_2" and that "update_is_available" is used for checking the accessibility of users who are tas/owners while "update_is_available_2" is used for checking the accessibility of user who are instructors.

update_is_available

is changed to

update_is_available_owner_ta

and

update_is_available_2

is changed to

update_is_available_instructor

5. We found three confusing method names "initialize_fnode_2" and "children_node_2_ng" and that "res_node_for_child_2" for corresponding nested chidren nodes (the subfolders in the tree display).

initialize_fnode_2

is changed to

initialize_fnode_nested

,

children_node_2_ng

is changed to

children_node_ng_nested

and

res_node_for_child_2

is changed to

res_node_for_child_nested

6. We renamed a few variable and method names related to update_tmp_obj

update_tmp_obj

is changed to

update_assignment_info

and

tmp_object

is changed to

assignment_obj

Test Plan

Test from UI

The tree_display.js and tree_display_controller.rb are mainly related to the "Manage" tab and its child nodes. Thus, the following steps are needed to test the functionality from UI:

1. Log in as an instructor.

2. Click on the "Manage" tab as well as its child node on the tool bar and to test if they are redirected to the correct page. (Child node means "Users", "Questionnaires", "Courses", etc. under "Manage" menu or "Review Rubrics", "Metareview Rubrics", etc. under "Questionnaires" menu. And the reason calling it "child node" is because it is the variable name used in code.)

3. Click on the displayed contents to test if the details can be displayed properly.

Test by Travis CI build

We passed all Travis CI build and Codeclimate checks.