CSC/ECE 517 Fall 2020 - E2063. Refactor tree-display.js and tree display controller.rb

E2063. Refactoring the tree-display.js and tree display controller.rb

This page provides a description of the Expertiza based OSS project.

About Expertiza

Expertiza is an open source project based on Ruby on Rails framework. Expertiza allows the instructor to create new assignments and customize new or existing assignments. It also allows the instructor to create a list of topics the students can sign up for. Students can form teams in Expertiza to work on various projects and assignments. Students can also peer review other students' submissions. Expertiza supports submission across various document types, including the URLs and wiki pages.

Background

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.

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. Knowledge of JavaScript is a prerequisite for this project.

Accomplishments

The following tasks were accomplished in this project:

• Removed methods that were not used
• Implemented previous changes from past groups on this assignment if useful
• Modified tree display controller to better parse data prior to being accessed by the react client

About Tree Display Controller

This class manages different the different tabs: courses, assignments, and questionaires.

Current Implementation

Functionality

• Instructors can view the course, assignment and questionnaire tabs.

Drawbacks and Solutions

• Problem 1: For the questionnaires' handleExpandClick function it appears that the get_sub_folder_contents method is not capable of returning the data.

if(this.props.dataType!='assignment') {
            _this = this;
            jQuery.get('/tree_display/get_sub_folder_contents',
                {
                    reactParams2: newParams
                },
                function (data) {
                    _this.props.data[id.split("_")[2]]['children'] = data;
                    _this.forceUpdate();
                }, 'json');
        }

• Solution: Change the the JQuery route to a post because you can't give parameters to a get route and also change this in routes.rb file.

jQuery.post('/tree_display/get_sub_folder_contents',
                {
                    reactParams2: newParams
                },

                
post :get_sub_folder_contents

• Drawback:The assignments tab did not have any data when we used the reset debugging extension (i.e. the childNodes attribute was null). Thus we assumed there was no data to display underneath each assignment.

-After debugging, we found that the "nodeType" attribute in the :reactParams field of the post request identifies the type of childNodes to be retrieved (i.e. "Courses" or "Questionnaires")

-We found that a "FolderNode" value for this attribute equates to a questionnaire.

• Problem 3: Tree display controller needs to better parse the data prior to being access to the react client because currently, there are too many comparisons when checking for the type of tab.

Example:

var SimpleTableRow = React.createClass({
    render: function () {
      var creation_date;
      var updated_date;
      var colWidthArray = ["30%", "0%", "0%", "0%", "25%", "25%", "20%"]
      var colDisplayStyle = {
        "display": ""
      }
      if (this.props.dataType === 'questionnaire') {
        colWidthArray = ["30%", "0%", "0%", "0%", "20%", "20%", "30%"]
        colDisplayStyle = {
          "display": "none"
        }
      } else if(this.props.dataType === 'course') {
        colWidthArray = ["20%", "0%", "0%", "20%", "20%", "20%", "20%"]
      }
     ......

}

• Solution: Centralize the attributes of each tabs

• Problem 4: Components in tree-display are passed too far down when only a small amount of it is needed at a time.

• Solution:

• Problem 5: The Assignments and Courses tab isn't showing the edit option for each row. It seems that what's implemented is trying to verify that there was an active user and the active user is null.

if (app_variables.currentUserId == null || this.props.instructor_id == app_variables.currentUserId) {
              moreContent.push(
                  <span>
                <a title="Edit" href={"/" + newNodeType + "/" + (parseInt(this.props.id) / 2).toString() + "/edit"}><img
                    src="/assets/tree_view/edit-icon-24.png"/></a>
              </span>
              );
          }

• Solution: Remove the active user implementation and replace with a check to make sure the current tab isn't Questionnaire.

if(newNodeType != 'questionnaires') { // should only be viewed by either assignments or courses
              moreContent.push(
                  <span>
                <a title="Edit" href={"/" + newNodeType + "/" + (parseInt(this.props.id) / 2).toString() + "/edit"}><img
                    src="/assets/tree_view/edit-icon-24.png"/></a>
              </span>
              );
          }

References

1. Expertiza on GitHub
2. GitHub Project Repository Fork
3. The live Expertiza website
4. Demo link
5. Expertiza project documentation wiki
6. Rspec Documentation
7. Clean Code: A handbook of agile software craftsmanship. Author: Robert C Martin