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: Checks in tree_display.jsx are too complicated.

In

 showElement={_this.state.expandedRow.indexOf(entry.type+'_'(parseInt(entry.nodeinfo.node_object_id)*2).toString()+'_'+i) 
> -1 ? "" : "none"}

• Solution: For now, assign showElement as true.

 showElement={true}

• Problem 2: The beta branch isn't getting a prop related to the data to be displayed in the dropdown

 
var FilterableTable = React.createClass({
   ....
}

• Solution:

• Problem 3: Tree display controller needs to better parse the data prior to being access to the react client

• Solution:

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

• Solution:

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