CSC/ECE 517 Spring 2013/OSS E734 - Revision history

Hliu11: /* Future Works */

2013-05-05T00:08:43Z

Future Works

← Older revision		Revision as of 00:08, 5 May 2013
Line 273:		Line 273:

	= Future Works =		= Future Works =
	Sorted by task difficulty		Sorted by task difficulty and importantce
	*Move expertiza/app/helpers/chart.rb to expertiza/app/model and rename to analytic.rb		*Move expertiza/app/helpers/chart.rb to expertiza/app/model and rename to analytic.rb
	*Rename Chart class to Analytic		*Rename Chart class to Analytic
	*Unit test		*Unit test
			*Strengthen access control by checking if the current user have permission to access to the data that they requested
	*Add data mining methods for meta-review		*Add data mining methods for meta-review
	*Add options for displaying raw data point related data using scatter plot(for example: raw grades)		*Add options for displaying raw data point related data using scatter plot(for example: raw grades)
	*Come up with other interesting data for the comparison ~~scope~~		*Give control of options in the of graph type selection and comparison scope selection drop down to controller (require java-script experience)
			*Come up with other interesting data for the comparison scopes
	*Improve the performance of data mining methods especially score related methods.		*Improve the performance of data mining methods especially score related methods.
	*Add user comparisons (comparing student with student)		*Add user comparisons (comparing student with student)
	*~~Give control~~ of ~~options in~~ the of ~~graph type~~ selection ~~and comparison scope selection drop down to controller (require java script experience~~)		*Implement a static version (with next buttons after each selection instead of dynamically updating the content of each choices depending on the selection) of the index page using embedded ruby and restrict java-script to only handle displaying the graph (require EXTENSIVE java-script experience)
	*Implement a static version of the index page using ruby (require java script experience)
	*Strengthen access control by checking if the current user have permission to access to the data that they requested

	'''IMPORTANT NOTE:''' There is a bug in the get_average_score function in the response module class WATCH OUT!		'''IMPORTANT NOTE:''' There is a bug in the get_average_score function in the response module class WATCH OUT!

Hliu11: /* Framework Design */

2013-05-05T00:02:34Z

Framework Design

← Older revision		Revision as of 00:02, 5 May 2013
Line 103:		Line 103:

	= Framework Design =		= Framework Design =
			The framework for the analytic project was completely redesigned in-order to improve the usability, scalability, readability, maintainability, extensibility and reusability.

	Architecture of the Expertiza Analytic Framework is based on the model-view-controller design pattern used in Rails application.		Architecture of the Expertiza Analytic Framework is based on the model-view-controller design pattern used in Rails application.

Line 142:		Line 144:

	==== Data Formatting ====		==== Data Formatting ====
	In the new implementation of analytic, a Chart class was created to handle the formatting of data. The Chart class serve as a interface between the java script based front-end in view and the ruby model back-end. The controller passes the graph type and data into the Chart class and the Chart class will handle all formatting and return the data that controller can pass into view.		In the new implementation of analytic, a Chart class was created to handle the formatting of data. The Chart class serve as a interface between the java script based front-end in view (described in next section) and the ruby model back-end. The controller passes the graph type and data into the Chart class and the Chart class will handle all formatting and return the data that controller can pass into view.

	The example for the input data format and how to use the Chart class will be provided in a later section.		The example for the input data format and how to use the Chart class will be provided in a later section.
Line 156:		Line 158:

	=== Original Implementation ===		=== Original Implementation ===
	The original implementation of analytic leverages the google chart ruby gem to generate the graph in a static fashion. The graph data type that the user can request are hard coded into the view with lots of switch statements and if else statements to handle different cases. This method of implementation which limits what the user can see and dramatically increases the difficult for adding new data options that user can see. According to the documentation for the MVC architecture used in Rails, the decision for what to display should be handle by the controller.		The original implementation of analytic leverages the google chart ruby gem to generate the graph in a static fashion.

	Using google chart ruby gem is an acceptable implementation however the google chart gem have limited capabilities and a somewhat outdated look. Further more, the gem it might have the risk running into compatibly issues with future Rails version if the gem is not kept up to date.		Using google chart ruby gem is an acceptable implementation however the google chart gem have limited capabilities and a somewhat outdated look. Further more, the gem it might have the risk running into compatibly issues with future Rails version if the gem is not kept up to date.

			The bigger issue that the original implementation have is how they handle user request. In the original implementation, the graph data type that the user can request are hard coded into the view using embedded ruby with lots of switch statements and if else statements to handle the different cases. This method of implementation dramatically decreases the extendability and increases the difficult for adding new options that user. According to the documentation for the MVC architecture used in Rails, the decision for what to display should be handle by the controller.

	=== New Implementation ===		=== New Implementation ===
	~~====javascript libraries====~~		For our new implementation of analytic we decided to move to jQuery and hightchart for rendering the graphical user interface.
	For our new implementation of analytic we decided to move to jQuery and hightchart.

	jQuery is a powerful, popular, and well maintained webpage frontend AJAX library for javascript, its documentation is available here [http://api.jquery.com/]. For the UI part, we use highchart which is a jQuery compatible chart library, the documentation: [http://api.highcharts.com/highcharts]. Licenses for these two libraries are GPL and CC by 3.0 for non-commercial usage.		jQuery is a powerful, popular, and well maintained webpage frontend AJAX library for javascript, its documentation is available here [http://api.jquery.com/]. For the UI part, we use highchart which is a jQuery compatible chart library, the documentation: [http://api.highcharts.com/highcharts]. Licenses for these two libraries are GPL and CC by 3.0 for non-commercial usage.
Line 168:		Line 171:
	The original jQuery library used by Expertiza is version 1.4, we have it upgraded to version 1.9 in this project, locates at /public/javascripts/jquery.js and highchart is at /public/javascripts/highcharts.js.		The original jQuery library used by Expertiza is version 1.4, we have it upgraded to version 1.9 in this project, locates at /public/javascripts/jquery.js and highchart is at /public/javascripts/highcharts.js.

	====~~chart object~~ and ~~chart~~====		Although this method of implementation offers us a amazing amount of new functionalities, it poses some potential barrier for the developers. A good foundation in javascript will be required for developer who wants to work on the view for this project. However due to the design of the framework and the abstraction of the view related functionality through the interface class (chart.rb described in section above) developer can extend the functionality of the analytic project without any knowledge in javascript (but will benefit greatly from knowing at least basic javascript and AJAX.)

			The sections below will describe the various aspect this new implementation of view.

			==== Chart Object and Chart ====
	Chart object is an ruby object created by calling Chart.new(type, data, [option], [width]). It is just a ruby object representing the chart.		Chart object is an ruby object created by calling Chart.new(type, data, [option], [width]). It is just a ruby object representing the chart.

	In order to display the chart, you need to render '_chart.erb', this partial will create html and javascript code for a given chart (represented by the chart object).		In order to display the chart, you need to render '_chart.erb', this partial will create html and javascript code for a given chart (represented by the chart object).

	====~~code responsibilities~~====		==== Code Responsibilities ====
	If one do not want to 'customize' the chart, see ''render_sample.html.erb'' for quick setup examples. If one want to 'customize' charts, or want to understand ''index.html.erb'', here is something need to know:		If one do not want to 'customize' the chart, see ''render_sample.html.erb'' for quick setup examples. If one want to 'customize' charts, or want to understand ''index.html.erb'', here is something need to know:
	* '''views/analytic/_chart.erb''': render a chart represented by given chart object. it handles all javascript headers, javascript and HTML for you. see ''render_sample.html.erb'' for detail.		* '''views/analytic/_chart.erb''': render a chart represented by given chart object. it handles all javascript headers, javascript and HTML for you. see ''render_sample.html.erb'' for detail.
Line 187:		Line 194:
	*** ''witdh'': optional parameter, specify the width of the chart, like "500px" or "80%", default is "100%". see ''render_sample.html.erb'' for details.		*** ''witdh'': optional parameter, specify the width of the chart, like "500px" or "80%", default is "100%". see ''render_sample.html.erb'' for details.

	====DOM ~~tree~~ in index.html.erb====		====DOM Tree Structure in index.html.erb====
	Enable nulti-chart support by specifing ''multi_chart = true'' at the beginning of the <script> section. Default value is false.		Enable nulti-chart support by specifing ''multi_chart = true'' at the beginning of the <script> section. Default value is false.

Line 206:		Line 213:

	== Controller ==		== Controller ==
			Due to the drastic redesign of the framework the original implementation of the controller is now irrelevant.

			The new implementation of controller takes the input from view through stander ruby instance variable and respond to the java-script front-end of view through json.

			The following sections gives a overview of methods in the controller and how to add new graph options without any change to the java-script front end.

	=== Method Overview ===		=== Method Overview ===

Hliu11: /* Model */

2013-05-04T23:25:28Z

Model

← Older revision		Revision as of 23:25, 4 May 2013
Line 124:		Line 124:
	==== Data Formatting ====		==== Data Formatting ====
	The original implementation of analytic have the controller handles data formatting function. In the MVC structure used in rails application, formatting the data is not a responsibility for the controller.		The original implementation of analytic have the controller handles data formatting function. In the MVC structure used in rails application, formatting the data is not a responsibility for the controller.


	=== New Implementation ===		=== New Implementation ===

Hliu11: /* Model */

2013-05-04T23:25:09Z

Model

← Older revision		Revision as of 23:25, 4 May 2013
Line 108:		Line 108:

	== Model ==		== Model ==
	~~There are two tasks~~ that analytic require the model to perform: data mining and data ~~formating~~.		The operations that analytic require the model to perform can be divided into two differences categories: data mining and data formatting.

	~~===~~ Data ~~Mining ===~~		Data mining operations gathers the analytic data requested by the controller.
	~~The data~~ mining operations ~~performed by model classes~~ gathers the data requested by the controller.

	==== Original Implementation ====		Data formatting operations take the analytic data and turn it into the format that are require by the methods used to render the charts.

			=== Original Implementation ===
			==== Data Mining ====
	In the original implementation of analytic, data mining methods use to extract the data are scattered between the assignment model class and controller. There are several problems with this method of implementation.		In the original implementation of analytic, data mining methods use to extract the data are scattered between the assignment model class and controller. There are several problems with this method of implementation.

	First, assignment model is crucial class for the correct operation of the Expertiza and the data mining methods are not related to the ~~normal~~ operation that the model performs this reduces the readability and maintainability of the model.		First, assignment model is crucial class for the correct operation of the Expertiza and the data mining methods are not related to the central operation that the model performs this reduces the readability and maintainability of the model.

	Second, the data mining methods seem to recursively traverse through the data structure hierarchy level by level (for example: to obtain average grades for assignment, the original implementation do assignment->for each teams-> for each responses->score->grade) in-order to obtain the data that they need. This design violates basic object oriented programming principle, instead the data mining methods should be layered and methods should be added to the corresponding models to avoid this behavior.		Second, the data mining methods seem to recursively traverse through the data structure hierarchy level by level (for example: to obtain average grades for assignment, the original implementation do assignment->for each teams-> for each responses->score->grade) in-order to obtain the data that they need. This design violates basic object oriented programming principle, instead the data mining methods should be layered and methods should be added to the corresponding models to avoid this behavior.

	==== New Implementation ====		==== Data Formatting ====
			The original implementation of analytic have the controller handles data formatting function. In the MVC structure used in rails application, formatting the data is not a responsibility for the controller.


			=== New Implementation ===
			==== Data Mining ====
	The new implementation of analytic the data mining methods are implemented as mixin modules for the corresponding models. The modules are gathered into the /models/analytic folder. The modules contains the analytic methods for the model that they relates to. The analytic modules only calls the methods that are defined in model that they corresponds to and methods defined in other analytic module.		The new implementation of analytic the data mining methods are implemented as mixin modules for the corresponding models. The modules are gathered into the /models/analytic folder. The modules contains the analytic methods for the model that they relates to. The analytic modules only calls the methods that are defined in model that they corresponds to and methods defined in other analytic module.

	This implementation creates a clear separation between the ~~normal~~ model operation and data mining operation; ~~abstract~~ away the complexity of the structure of the underlying databases; improves the readability for the developer.		This implementation creates a clear separation between the central model operation and data mining operation; abstracts away the complexity of the structure of the underlying databases which creates a clear separation between the controller and the underlying database implementation; improves the readability for the developer.

	~~==== Related Files ====~~
	Analytic modules and their corresponding models:		Analytic modules and their corresponding models:
	*expertiza/app/models/analytic/course_analytic.rb => expertiza/app/models/course.rb		*expertiza/app/models/analytic/course_analytic.rb => expertiza/app/models/course.rb
Line 136:		Line 142:
	*expertiza/app/models/analytic/score_analytic.rb => expertiza/app/models/score.rb		*expertiza/app/models/analytic/score_analytic.rb => expertiza/app/models/score.rb

	=== Data Formatting ~~===~~		==== Data Formatting ====
	~~The data formatting operations take the gathered data and formatted turn it into the format that are require by the methods that draws the charts that display the data.~~		In the new implementation of analytic, a Chart class was created to handle the formatting of data. The Chart class serve as a interface between the java script based front-end in view and the ruby model back-end. The controller passes the graph type and data into the Chart class and the Chart class will handle all formatting and return the data that controller can pass into view.

	~~==== Original Implementation~~ ====
	~~The original implementation of analytic have the controller handles data formatting function.~~ In the ~~MVC structure used in rails application, formatting the data is not a responsibility for the controller.~~

	~~==== New Implementation ====~~
	~~The~~ new implementation of analytic a Chart class was created to handle the formatting of data. The Chart class serve as a interface between the java script based front-end in view and the ruby model back-end. The controller passes the graph type and data into the Chart class and the Chart class will handle all formatting and return the data that controller can pass into view.

	The example for the input data format and how to use the Chart class will be provided in later section.		The example for the input data format and how to use the Chart class will be provided in a later section.

	==== Related files ====		==== Related files ====

Zwang18: /* Javascript Event Handler */

2013-04-29T11:17:37Z

Javascript Event Handler

← Older revision		Revision as of 11:17, 29 April 2013
Line 198:		Line 198:

	====Javascript Event Handler====		====Javascript Event Handler====
	Each <input> element is attached an onchange handler. When the handler is triggered, it will		Each <input> element is attached an onchange handler. When the handler is triggered, it will:

	1. check if the layout should change(i.e. the end user changes comparison scope from "assignment" to "team")		1. check if the layout should change(i.e. the end user changes comparison scope from "assignment" to "team")

	If so, trigger an AJAX request to ruby controller to fetch the new options to be displayed and erase the old layout if necessary.		If so, trigger an AJAX request to ruby controller to fetch the new options to be displayed and erase the old layout if necessary.

	2. check if the end user has specify all required input to display a chart. If so, trigger an AJAX request to ruby controller to fetch the chart object and display it; if not, erase the chart(if there's already one).		2. check if the end user has specify all required input to display a chart. If so, trigger an AJAX request to ruby controller to fetch the chart object and display it; if not, erase the chart(if there's already one).

Zwang18: /* Javascript Event Listener */

2013-04-29T11:16:57Z

Javascript Event Listener

← Older revision		Revision as of 11:16, 29 April 2013
Line 197:		Line 197:
	All charts will be in one container, selector should be '#draw_area'. Each chart and its corresponding options is in its own container with selector '.chart_X' where X is the index of that chart. Within each chart container, selector '.option' will return an container contains all end-user-specified options (chart type, comparison scope, courses, asssignments, etc. each in a container with '.tr_X' selector), selector '.chart' will give the chart container.		All charts will be in one container, selector should be '#draw_area'. Each chart and its corresponding options is in its own container with selector '.chart_X' where X is the index of that chart. Within each chart container, selector '.option' will return an container contains all end-user-specified options (chart type, comparison scope, courses, asssignments, etc. each in a container with '.tr_X' selector), selector '.chart' will give the chart container.

	====Javascript Event ~~Listener~~====		====Javascript Event Handler====
			Each <input> element is attached an onchange handler. When the handler is triggered, it will
			1. check if the layout should change(i.e. the end user changes comparison scope from "assignment" to "team")
			If so, trigger an AJAX request to ruby controller to fetch the new options to be displayed and erase the old layout if necessary.
			2. check if the end user has specify all required input to display a chart. If so, trigger an AJAX request to ruby controller to fetch the chart object and display it; if not, erase the chart(if there's already one).

	== Controller ==		== Controller ==

Zwang18: /* DOM tree in index.html.erb */

2013-04-29T11:01:46Z

DOM tree in index.html.erb

← Older revision		Revision as of 11:01, 29 April 2013
Line 193:		Line 193:
	Structure of the tree looks like this:		Structure of the tree looks like this:

			[[File:DOM Tree.PNG]]

	All charts will be in one container, selector should be '#draw_area'. Each chart and its corresponding options is in its own container with selector '.chart_X' where X is the index of that chart. Within each chart container, selector '.option' will return an container contains all end-user-specified options (chart type, comparison scope, courses, asssignments, etc), selector '.chart' will give the chart container. ~~Unless all required options are specified, chart will not be displayed.~~		All charts will be in one container, selector should be '#draw_area'. Each chart and its corresponding options is in its own container with selector '.chart_X' where X is the index of that chart. Within each chart container, selector '.option' will return an container contains all end-user-specified options (chart type, comparison scope, courses, asssignments, etc. each in a container with '.tr_X' selector), selector '.chart' will give the chart container.



	====Javascript Event Listener====		====Javascript Event Listener====

Zwang18: /* Framework Design */

2013-04-29T10:41:40Z

Framework Design

← Older revision		Revision as of 10:41, 29 April 2013
Line 104:		Line 104:
	= Framework Design =		= Framework Design =
	Architecture of the Expertiza Analytic Framework is based on the model-view-controller design pattern used in Rails application.		Architecture of the Expertiza Analytic Framework is based on the model-view-controller design pattern used in Rails application.

	[[File:Analytic_framwork_archtecture.png]]		[[File:Analytic_framwork_archtecture.png]]

Zwang18: /* javascript libraries */

2013-04-29T10:21:36Z

javascript libraries

@@ Line 164: / Line 164: @@
 For our new implementation of analytic we decided to move to jQuery and hightchart.
-jQuery is a powerful, popular, and well maintained webpage AJAX library for javascript, its documentation is available here [http://api.jquery.com/]. For the UI part, we use highchart which is a jQuery compatible chart library, the documentation: [http://api.highcharts.com/highcharts]. Licenses for these two libraries are GPL and CC by 3.0 for non-commercial usage.
+jQuery is a powerful, popular, and well maintained webpage frontend AJAX library for javascript, its documentation is available here [http://api.jquery.com/]. For the UI part, we use highchart which is a jQuery compatible chart library, the documentation: [http://api.highcharts.com/highcharts]. Licenses for these two libraries are GPL and CC by 3.0 for non-commercial usage.
 The original jQuery library used by Expertiza is version 1.4, we have it upgraded to version 1.9 in this project, locates at /public/javascripts/jquery.js and highchart is at /public/javascripts/highcharts.js.
 == Controller ==

Zwang18: /* View */

2013-04-29T07:11:21Z

View

← Older revision		Revision as of 07:11, 29 April 2013
Line 161:		Line 161:

	=== New Implementation ===		=== New Implementation ===
	===javascript libraries===		====javascript libraries====
	For our new implementation of analytic we decided to move to jQuery and hightchart.		For our new implementation of analytic we decided to move to jQuery and hightchart.