Expertiza_Wiki - User contributions [en]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-05-01T19:25:59Z

Jviswan: /* Mentor Details */

== '''Background Information''' ==
This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the [https://www.techopedia.com/definition/792/bitmap-bmp| ImageBitmap].

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to [https://en.wikipedia.org/wiki/Canvas_element| HTML canvas elements]. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

== '''About ImageBitMap and Motivation behind the project''' ==
We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

== '''Steps for implementation''' ==

'''Initial Phase'''
* '''Step 1: '''Add a ImageBitmap WebIDL interface to ''components/script/dom/webidl''s and Rust implementation in components/script/dom/imagebitmap.rs
* '''Step 2: ''' Add the ''createImageBitmap'' method that takes no extra x/y/w/h parameters in ''component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and implement the method in ''component/script/dom/window.rs'', handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

'''Subsequent phase'''
* '''Step 1: '''Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
* '''Step 2: '''Implement the ''createImageBitmap'' overload that accepts x/y/w/h parameters
* '''Step 3: '''Implement support for ImageBitmaps as canvas image sources in ''components/script/canvas_state.rs''
[[File:AllSteps.jpg]]

== '''Previous Implementation''' ==
The steps that have been implemented so far in this project by the previous batch are:

'''Step 1:''' Added the ImageBitmap interface to ''components/script/dom/webidls'' that represents a bitmap image which can be drawn to a <canvas> without undue latency. The interface contains height and weight as its attributes which are read only unsigned long integers.
<pre>
//[Exposed=(Window,Worker), Serializable, Transferable]
[Exposed=(Window,Worker)]
interface ImageBitmap {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
//void close();
};

typedef (CanvasImageSource or
Blob or
ImageData) ImageBitmapSource;

enum ImageOrientation { "none", "flipY" };
enum PremultiplyAlpha { "none", "premultiply", "default" };
enum ColorSpaceConversion { "none", "default" };
enum ResizeQuality { "pixelated", "low", "medium", "high" };

dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "none";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange] unsigned long resizeWidth;
[EnforceRange] unsigned long resizeHeight;
ResizeQuality resizeQuality = "low";
};
</pre>

The ImageBitmap webidl also defines a dictionary for various ImageBitmap Options that can be used to modify the ImageBitmap object.

'''Step 2:''' Implemented the rust code for the webidl interface at ''components/script/dom/imagebitmap.rs''. For more details on the code [https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API#Implementation visit]
<pre>
use crate::dom::bindings::cell::DomRefCell;

use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::root::DomRoot;
use crate::dom::globalscope::GlobalScope;

use crate::dom::bindings::error::Fallible;
use crate::dom::bindings::reflector::{reflect_dom_object, Reflector};
use dom_struct::dom_struct;

use std::vec::Vec;

#[dom_struct]
pub struct ImageBitmap {
reflector_: Reflector,
width: u32,
height: u32,
bitmap_data: DomRefCell<Vec<u8>>,
}

impl ImageBitmap {
fn new_inherited(width_arg: u32, height_arg: u32) -> ImageBitmap {
ImageBitmap {
reflector_: Reflector::new(),
width: width_arg,
height: height_arg,
bitmap_data: DomRefCell::new(vec![]),
}
}

#[allow(dead_code)]
pub fn new(global: &GlobalScope, width: u32, height: u32) -> Fallible<DomRoot<ImageBitmap>> {
//assigning to a variable the return object of new_inherited
let imagebitmap = Box::new(ImageBitmap::new_inherited(width, height));

Ok(reflect_dom_object(imagebitmap, global))
}
}
</pre>

The code also implements the getter methods for height and width attribute of an ImageBitmap object.
<pre>
impl ImageBitmapMethods for ImageBitmap {
// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-height
fn Height(&self) -> u32 {
//to do: add a condition for checking detached internal slot
//and return 0 if set to true
self.height
}

// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-width
fn Width(&self) -> u32 {
//to do: add a condition to check detached internal slot
////and return 0 if set to true
self.width
}
}
</pre>

== '''Proposed Implementation''' ==
Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

;Implementing createImageBitmap web API

:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
:*This web interface is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/globalscope.rs''. It is then called in ''components/script/dom/window.rs'' and ''components/script/dom/workerglobalscope.rs''
:*The syntax of the method looks like
:::const imageBitmapPromise = createImageBitmap(image[, options]);
:::const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
::where the parameters indicate:
:::'''image:''' an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.
:::'''sx, sy, sw, sh:''' if given, source image is cropped to the given pixels.
:::'''options (Optional):''' the ImageBitmap object's bitmap data is modified according to options. Available options are:
:::*imageOrientation
:::*premultiplyAlpha
:::*colorSpaceConversion
:::*resizeWidth
:::*resizeHeight
:::*resizeQuality
:::: You can read more about these options [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap here]
::The return value is a Promise that is resolved when a new ImageBitmap is created.
:* As a first step, we will be implementing the method to handle canvas elements. Subsequently, we will be enhancing the method to handle other image sources and the x/y/w/h parameters.

;Implementing close() method from previous work

:* close() is a method in the ImageBitmap interface. It is implemented in ''components/script/dom/imagebitmap.rs'' file.
:* This method disposes of all graphical resources associated with an ImageBitmap.

== '''Current Progress''' ==

* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/globalscope.rs''' file. The comments in the following code will explain the functionality that it carries out.

<pre>
// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
pub fn create_image_bitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let in_realm_proof = AlreadyInRealm::assert(&self);
// Created a new promise object p
let p = Promise::new_in_current_realm(&self, InRealm::Already(&in_realm_proof));

// If resizewidth is present and is equal to 0, reject p with InvalidState error
if options.resizeWidth.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// If resizeheight is present and is equal to 0, reject p with InvalidState error
if options.resizeHeight.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// match the image to different types of image source and return the resolved p
let promise = match image {
// check if image source is HTMLCanvasElement
ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
// check if image source is OffscreenCanvas
ImageBitmapSource::OffscreenCanvas(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
_ => {
// if the image source is not HTMLCanvasElement or OffscreenCanvas, reject p with NotSupported Error
p.reject_error(Error::NotSupported);
return p;
},
};
promise
}
</pre>

* Then we called the above method inside '''components/script/dom/window.rs''' and '''components/script/dom/workerglobalscope.rs'''.
<pre>
fn CreateImageBitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let p = self
.upcast::<GlobalScope>()
.create_image_bitmap(image, options);
p
}
</pre>

* We created setters for bitmap_data and origin_clean attributes in '''components/script/dom/imagebitmap.rs'''.
<pre>
pub fn set_bitmap_data(&self, data: Vec<u8>) {
*self.bitmap_data.borrow_mut() = data;
}

pub fn set_origin_clean(&self, origin_is_clean: bool) {
self.origin_clean.set(origin_is_clean);
}
</pre>
* Updated wpt(Web Platform Tests) tests results to include createImageBitmap API and reject non-canvas image source elements.

* For this implementation, we followed the DRY principle and strategy pattern.

== '''Design of the createImageBitmap() method''' ==

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

[[File:fig1.png|border]]

Switching on the "image" argument the following is the sequence of actions

=== If the image is an SVGImage===
[[File:fig2.png|border]]

=== If the image is a video===
[[File:ReFigure3.png|border]]

=== If the image is a canvas===
[[File:ReFigure4.png|border]]

=== If the image is an ImageBitmap===
[[File:ImageBitmap.jpg|border]]

=== If the image is an ImageData===
[[File:ImageData.jpg|border]]

=='''Test Plan'''==
The following are the respective steps in testing:
* Servo mach check test
The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
<pre>
For Linux or macOS:
./mach check
</pre>
<pre>
For Windows:
mach.bat check
</pre>

[[File:machCheck.png]]

* Servo mach build test
The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
<pre>
For Linux or macOS:
./mach build --dev
</pre>
<pre>
For Windows:
mach.bat build --dev
</pre>
[[File:machBuild.png]]

* Check for the file tidiness (following standards of servo) using the command:
<pre>
For Linux or macOS:
./mach test-tidy
./mach fmt
</pre>
<pre>
For Windows:
mach.bat test-tidy
mach.bat fmt
</pre>

[[File:machTestTidy.png]]

*Servo automated Unit-testing
Running the following commands will run all the unit-tests
<pre>
For Linux or macOS:
./mach test-unit
</pre>
<pre>
For Windows:
mach.bat test-unit
</pre>
Note: A log file can be maintained to make keep a check on the tests that are passing.
* Update the automated servo Web Platform tests(wpt):
For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run. We ran the following command:
<pre>
wget https://community.taskcluster-artifacts.net/KqQWr_VwQDe55wGO_T193Q/0/public/test-wpt.log
https://community.taskcluster-artifacts.net/PhPboOqiSa-gdhzBMJbL_w/0/public/test-wpt.log
https://community.taskcluster-artifacts.net/Fzvx31ovS6GPF4eGGBl8rA/0/public/test-wpt.log
https://community.taskcluster-artifacts.net/EfQsJZaXTBSTmct0hy3scw/0/public/test-wpt.log
</pre>

Once log is saved, then we ran the following command to update the test expectations
<pre>
./mach update-wpt test-wpt.log test-wpt.log.1 test-wpt.log.2 test-wpt.log.3
</pre>

This updated the test results in 73 test files to include the createImageBitmap API.

* Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:
<pre>
For Linux or macOS:
./mach run https://www.google.com
</pre>
<pre>
For Windows:
mach.bat run https://www.google.com
</pre>

[[File:machRun.png]]

== '''Future Work ''' ==
The createImageBitmap() method can be extended to support the subsequent steps as shown in the steps for implementation.
1. The method can be extended to support other image sources such as SVGImage, video sources, ImageData source, and so on.
2. Overload the createImageBitmap() method to accept the s/y/w/h parameters
3. Also implement support for ImageBitmaps as canvas image sources in the canvas_state.rs file

=='''Code submission and Pull request'''==

'''Code: '''[https://github.com/ramyananth/servo] 
'''Pull Request: '''[https://github.com/servo/servo/pull/26296]

== '''Team Details''' ==

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Sandeep Kundala (skundal@ncsu.edu)

== '''Mentor Details''' ==
Jay Modi (jmodi3@ncsu.edu)

== '''References''' ==

* [https://en.wikipedia.org/wiki/Servo_(software)| What is servo?]
* [https://en.wikipedia.org/wiki/Rust_(programming_language)| what is RUST programming?]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-05-01T19:24:29Z

Jviswan: /* Current Progress */

== '''Background Information''' ==
This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the [https://www.techopedia.com/definition/792/bitmap-bmp| ImageBitmap].

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to [https://en.wikipedia.org/wiki/Canvas_element| HTML canvas elements]. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

== '''About ImageBitMap and Motivation behind the project''' ==
We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

== '''Steps for implementation''' ==

'''Initial Phase'''
* '''Step 1: '''Add a ImageBitmap WebIDL interface to ''components/script/dom/webidl''s and Rust implementation in components/script/dom/imagebitmap.rs
* '''Step 2: ''' Add the ''createImageBitmap'' method that takes no extra x/y/w/h parameters in ''component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and implement the method in ''component/script/dom/window.rs'', handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

'''Subsequent phase'''
* '''Step 1: '''Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
* '''Step 2: '''Implement the ''createImageBitmap'' overload that accepts x/y/w/h parameters
* '''Step 3: '''Implement support for ImageBitmaps as canvas image sources in ''components/script/canvas_state.rs''
[[File:AllSteps.jpg]]

== '''Previous Implementation''' ==
The steps that have been implemented so far in this project by the previous batch are:

'''Step 1:''' Added the ImageBitmap interface to ''components/script/dom/webidls'' that represents a bitmap image which can be drawn to a <canvas> without undue latency. The interface contains height and weight as its attributes which are read only unsigned long integers.
<pre>
//[Exposed=(Window,Worker), Serializable, Transferable]
[Exposed=(Window,Worker)]
interface ImageBitmap {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
//void close();
};

typedef (CanvasImageSource or
Blob or
ImageData) ImageBitmapSource;

enum ImageOrientation { "none", "flipY" };
enum PremultiplyAlpha { "none", "premultiply", "default" };
enum ColorSpaceConversion { "none", "default" };
enum ResizeQuality { "pixelated", "low", "medium", "high" };

dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "none";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange] unsigned long resizeWidth;
[EnforceRange] unsigned long resizeHeight;
ResizeQuality resizeQuality = "low";
};
</pre>

The ImageBitmap webidl also defines a dictionary for various ImageBitmap Options that can be used to modify the ImageBitmap object.

'''Step 2:''' Implemented the rust code for the webidl interface at ''components/script/dom/imagebitmap.rs''. For more details on the code [https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API#Implementation visit]
<pre>
use crate::dom::bindings::cell::DomRefCell;

use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::root::DomRoot;
use crate::dom::globalscope::GlobalScope;

use crate::dom::bindings::error::Fallible;
use crate::dom::bindings::reflector::{reflect_dom_object, Reflector};
use dom_struct::dom_struct;

use std::vec::Vec;

#[dom_struct]
pub struct ImageBitmap {
reflector_: Reflector,
width: u32,
height: u32,
bitmap_data: DomRefCell<Vec<u8>>,
}

impl ImageBitmap {
fn new_inherited(width_arg: u32, height_arg: u32) -> ImageBitmap {
ImageBitmap {
reflector_: Reflector::new(),
width: width_arg,
height: height_arg,
bitmap_data: DomRefCell::new(vec![]),
}
}

#[allow(dead_code)]
pub fn new(global: &GlobalScope, width: u32, height: u32) -> Fallible<DomRoot<ImageBitmap>> {
//assigning to a variable the return object of new_inherited
let imagebitmap = Box::new(ImageBitmap::new_inherited(width, height));

Ok(reflect_dom_object(imagebitmap, global))
}
}
</pre>

The code also implements the getter methods for height and width attribute of an ImageBitmap object.
<pre>
impl ImageBitmapMethods for ImageBitmap {
// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-height
fn Height(&self) -> u32 {
//to do: add a condition for checking detached internal slot
//and return 0 if set to true
self.height
}

// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-width
fn Width(&self) -> u32 {
//to do: add a condition to check detached internal slot
////and return 0 if set to true
self.width
}
}
</pre>

== '''Proposed Implementation''' ==
Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

;Implementing createImageBitmap web API

:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
:*This web interface is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/globalscope.rs''. It is then called in ''components/script/dom/window.rs'' and ''components/script/dom/workerglobalscope.rs''
:*The syntax of the method looks like
:::const imageBitmapPromise = createImageBitmap(image[, options]);
:::const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
::where the parameters indicate:
:::'''image:''' an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.
:::'''sx, sy, sw, sh:''' if given, source image is cropped to the given pixels.
:::'''options (Optional):''' the ImageBitmap object's bitmap data is modified according to options. Available options are:
:::*imageOrientation
:::*premultiplyAlpha
:::*colorSpaceConversion
:::*resizeWidth
:::*resizeHeight
:::*resizeQuality
:::: You can read more about these options [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap here]
::The return value is a Promise that is resolved when a new ImageBitmap is created.
:* As a first step, we will be implementing the method to handle canvas elements. Subsequently, we will be enhancing the method to handle other image sources and the x/y/w/h parameters.

;Implementing close() method from previous work

:* close() is a method in the ImageBitmap interface. It is implemented in ''components/script/dom/imagebitmap.rs'' file.
:* This method disposes of all graphical resources associated with an ImageBitmap.

== '''Current Progress''' ==

* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/globalscope.rs''' file. The comments in the following code will explain the functionality that it carries out.

<pre>
// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
pub fn create_image_bitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let in_realm_proof = AlreadyInRealm::assert(&self);
// Created a new promise object p
let p = Promise::new_in_current_realm(&self, InRealm::Already(&in_realm_proof));

// If resizewidth is present and is equal to 0, reject p with InvalidState error
if options.resizeWidth.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// If resizeheight is present and is equal to 0, reject p with InvalidState error
if options.resizeHeight.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// match the image to different types of image source and return the resolved p
let promise = match image {
// check if image source is HTMLCanvasElement
ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
// check if image source is OffscreenCanvas
ImageBitmapSource::OffscreenCanvas(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
_ => {
// if the image source is not HTMLCanvasElement or OffscreenCanvas, reject p with NotSupported Error
p.reject_error(Error::NotSupported);
return p;
},
};
promise
}
</pre>

* Then we called the above method inside '''components/script/dom/window.rs''' and '''components/script/dom/workerglobalscope.rs'''.
<pre>
fn CreateImageBitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let p = self
.upcast::<GlobalScope>()
.create_image_bitmap(image, options);
p
}
</pre>

* We created setters for bitmap_data and origin_clean attributes in '''components/script/dom/imagebitmap.rs'''.
<pre>
pub fn set_bitmap_data(&self, data: Vec<u8>) {
*self.bitmap_data.borrow_mut() = data;
}

pub fn set_origin_clean(&self, origin_is_clean: bool) {
self.origin_clean.set(origin_is_clean);
}
</pre>
* Updated wpt(Web Platform Tests) tests results to include createImageBitmap API and reject non-canvas image source elements.

* For this implementation, we followed the DRY principle and strategy pattern.

== '''Design of the createImageBitmap() method''' ==

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

[[File:fig1.png|border]]

Switching on the "image" argument the following is the sequence of actions

=== If the image is an SVGImage===
[[File:fig2.png|border]]

=== If the image is a video===
[[File:ReFigure3.png|border]]

=== If the image is a canvas===
[[File:ReFigure4.png|border]]

=== If the image is an ImageBitmap===
[[File:ImageBitmap.jpg|border]]

=== If the image is an ImageData===
[[File:ImageData.jpg|border]]

=='''Test Plan'''==
The following are the respective steps in testing:
* Servo mach check test
The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
<pre>
For Linux or macOS:
./mach check
</pre>
<pre>
For Windows:
mach.bat check
</pre>

[[File:machCheck.png]]

* Servo mach build test
The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
<pre>
For Linux or macOS:
./mach build --dev
</pre>
<pre>
For Windows:
mach.bat build --dev
</pre>
[[File:machBuild.png]]

* Check for the file tidiness (following standards of servo) using the command:
<pre>
For Linux or macOS:
./mach test-tidy
./mach fmt
</pre>
<pre>
For Windows:
mach.bat test-tidy
mach.bat fmt
</pre>

[[File:machTestTidy.png]]

*Servo automated Unit-testing
Running the following commands will run all the unit-tests
<pre>
For Linux or macOS:
./mach test-unit
</pre>
<pre>
For Windows:
mach.bat test-unit
</pre>
Note: A log file can be maintained to make keep a check on the tests that are passing.
* Update the automated servo Web Platform tests(wpt):
For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run. We ran the following command:
<pre>
wget https://community.taskcluster-artifacts.net/KqQWr_VwQDe55wGO_T193Q/0/public/test-wpt.log
https://community.taskcluster-artifacts.net/PhPboOqiSa-gdhzBMJbL_w/0/public/test-wpt.log
https://community.taskcluster-artifacts.net/Fzvx31ovS6GPF4eGGBl8rA/0/public/test-wpt.log
https://community.taskcluster-artifacts.net/EfQsJZaXTBSTmct0hy3scw/0/public/test-wpt.log
</pre>

Once log is saved, then we ran the following command to update the test expectations
<pre>
./mach update-wpt test-wpt.log test-wpt.log.1 test-wpt.log.2 test-wpt.log.3
</pre>

This updated the test results in 73 test files to include the createImageBitmap API.

* Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:
<pre>
For Linux or macOS:
./mach run https://www.google.com
</pre>
<pre>
For Windows:
mach.bat run https://www.google.com
</pre>

[[File:machRun.png]]

== '''Future Work ''' ==
The createImageBitmap() method can be extended to support the subsequent steps as shown in the steps for implementation.
1. The method can be extended to support other image sources such as SVGImage, video sources, ImageData source, and so on.
2. Overload the createImageBitmap() method to accept the s/y/w/h parameters
3. Also implement support for ImageBitmaps as canvas image sources in the canvas_state.rs file

=='''Code submission and Pull request'''==

'''Code: '''[https://github.com/ramyananth/servo] 
'''Pull Request: '''[https://github.com/servo/servo/pull/26296]

== '''Team Details''' ==

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Sandeep Kundala (skundal@ncsu.edu)

== '''Mentor Details''' ==
Jay Modi

== '''References''' ==

* [https://en.wikipedia.org/wiki/Servo_(software)| What is servo?]
* [https://en.wikipedia.org/wiki/Rust_(programming_language)| what is RUST programming?]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-05-01T19:16:09Z

Jviswan: /* Test Plan */

== '''Background Information''' ==
This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the [https://www.techopedia.com/definition/792/bitmap-bmp| ImageBitmap].

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to [https://en.wikipedia.org/wiki/Canvas_element| HTML canvas elements]. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

== '''About ImageBitMap and Motivation behind the project''' ==
We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

== '''Steps for implementation''' ==

'''Initial Phase'''
* '''Step 1: '''Add a ImageBitmap WebIDL interface to ''components/script/dom/webidl''s and Rust implementation in components/script/dom/imagebitmap.rs
* '''Step 2: ''' Add the ''createImageBitmap'' method that takes no extra x/y/w/h parameters in ''component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and implement the method in ''component/script/dom/window.rs'', handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

'''Subsequent phase'''
* '''Step 1: '''Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
* '''Step 2: '''Implement the ''createImageBitmap'' overload that accepts x/y/w/h parameters
* '''Step 3: '''Implement support for ImageBitmaps as canvas image sources in ''components/script/canvas_state.rs''
[[File:AllSteps.jpg]]

== '''Previous Implementation''' ==
The steps that have been implemented so far in this project by the previous batch are:

'''Step 1:''' Added the ImageBitmap interface to ''components/script/dom/webidls'' that represents a bitmap image which can be drawn to a <canvas> without undue latency. The interface contains height and weight as its attributes which are read only unsigned long integers.
<pre>
//[Exposed=(Window,Worker), Serializable, Transferable]
[Exposed=(Window,Worker)]
interface ImageBitmap {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
//void close();
};

typedef (CanvasImageSource or
Blob or
ImageData) ImageBitmapSource;

enum ImageOrientation { "none", "flipY" };
enum PremultiplyAlpha { "none", "premultiply", "default" };
enum ColorSpaceConversion { "none", "default" };
enum ResizeQuality { "pixelated", "low", "medium", "high" };

dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "none";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange] unsigned long resizeWidth;
[EnforceRange] unsigned long resizeHeight;
ResizeQuality resizeQuality = "low";
};
</pre>

The ImageBitmap webidl also defines a dictionary for various ImageBitmap Options that can be used to modify the ImageBitmap object.

'''Step 2:''' Implemented the rust code for the webidl interface at ''components/script/dom/imagebitmap.rs''. For more details on the code [https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API#Implementation visit]
<pre>
use crate::dom::bindings::cell::DomRefCell;

use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::root::DomRoot;
use crate::dom::globalscope::GlobalScope;

use crate::dom::bindings::error::Fallible;
use crate::dom::bindings::reflector::{reflect_dom_object, Reflector};
use dom_struct::dom_struct;

use std::vec::Vec;

#[dom_struct]
pub struct ImageBitmap {
reflector_: Reflector,
width: u32,
height: u32,
bitmap_data: DomRefCell<Vec<u8>>,
}

impl ImageBitmap {
fn new_inherited(width_arg: u32, height_arg: u32) -> ImageBitmap {
ImageBitmap {
reflector_: Reflector::new(),
width: width_arg,
height: height_arg,
bitmap_data: DomRefCell::new(vec![]),
}
}

#[allow(dead_code)]
pub fn new(global: &GlobalScope, width: u32, height: u32) -> Fallible<DomRoot<ImageBitmap>> {
//assigning to a variable the return object of new_inherited
let imagebitmap = Box::new(ImageBitmap::new_inherited(width, height));

Ok(reflect_dom_object(imagebitmap, global))
}
}
</pre>

The code also implements the getter methods for height and width attribute of an ImageBitmap object.
<pre>
impl ImageBitmapMethods for ImageBitmap {
// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-height
fn Height(&self) -> u32 {
//to do: add a condition for checking detached internal slot
//and return 0 if set to true
self.height
}

// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-width
fn Width(&self) -> u32 {
//to do: add a condition to check detached internal slot
////and return 0 if set to true
self.width
}
}
</pre>

== '''Proposed Implementation''' ==
Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

;Implementing createImageBitmap web API

:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
:*This web interface is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/globalscope.rs''. It is then called in ''components/script/dom/window.rs'' and ''components/script/dom/workerglobalscope.rs''
:*The syntax of the method looks like
:::const imageBitmapPromise = createImageBitmap(image[, options]);
:::const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
::where the parameters indicate:
:::'''image:''' an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.
:::'''sx, sy, sw, sh:''' if given, source image is cropped to the given pixels.
:::'''options (Optional):''' the ImageBitmap object's bitmap data is modified according to options. Available options are:
:::*imageOrientation
:::*premultiplyAlpha
:::*colorSpaceConversion
:::*resizeWidth
:::*resizeHeight
:::*resizeQuality
:::: You can read more about these options [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap here]
::The return value is a Promise that is resolved when a new ImageBitmap is created.
:* As a first step, we will be implementing the method to handle canvas elements. Subsequently, we will be enhancing the method to handle other image sources and the x/y/w/h parameters.

;Implementing close() method from previous work

:* close() is a method in the ImageBitmap interface. It is implemented in ''components/script/dom/imagebitmap.rs'' file.
:* This method disposes of all graphical resources associated with an ImageBitmap.

== '''Current Progress''' ==

* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/globalscope.rs''' file. The comments in the following code will explain the functionality that it carries out.

<pre>
// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
pub fn create_image_bitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let in_realm_proof = AlreadyInRealm::assert(&self);
// Created a new promise object p
let p = Promise::new_in_current_realm(&self, InRealm::Already(&in_realm_proof));

// If resizewidth is present and is equal to 0, reject p with InvalidState error
if options.resizeWidth.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// If resizeheight is present and is equal to 0, reject p with InvalidState error
if options.resizeHeight.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// match the image to different types of image source and return the resolved p
let promise = match image {
// check if image source is HTMLCanvasElement
ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
// check if image source is OffscreenCanvas
ImageBitmapSource::OffscreenCanvas(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
_ => {
// if the image source is not HTMLCanvasElement or OffscreenCanvas, reject p with NotSupported Error
p.reject_error(Error::NotSupported);
return p;
},
};
promise
}
</pre>
* Updated wpt(Web Platform Tests) tests results to include createImageBitmap API and reject non-canvas image source elements.

* For this implementation, we followed the DRY principle and strategy pattern.

== '''Design of the createImageBitmap() method''' ==

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

[[File:fig1.png|border]]

Switching on the "image" argument the following is the sequence of actions

=== If the image is an SVGImage===
[[File:fig2.png|border]]

=== If the image is a video===
[[File:ReFigure3.png|border]]

=== If the image is a canvas===
[[File:ReFigure4.png|border]]

=== If the image is an ImageBitmap===
[[File:ImageBitmap.jpg|border]]

=== If the image is an ImageData===
[[File:ImageData.jpg|border]]

=='''Test Plan'''==
The following are the respective steps in testing:
* Servo mach check test
The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
<pre>
For Linux or macOS:
./mach check
</pre>
<pre>
For Windows:
mach.bat check
</pre>

[[File:machCheck.png]]

* Servo mach build test
The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
<pre>
For Linux or macOS:
./mach build --dev
</pre>
<pre>
For Windows:
mach.bat build --dev
</pre>
[[File:machBuild.png]]

* Check for the file tidiness (following standards of servo) using the command:
<pre>
For Linux or macOS:
./mach test-tidy
./mach fmt
</pre>
<pre>
For Windows:
mach.bat test-tidy
mach.bat fmt
</pre>

[[File:machTestTidy.png]]

*Servo automated Unit-testing
Running the following commands will run all the unit-tests
<pre>
For Linux or macOS:
./mach test-unit
</pre>
<pre>
For Windows:
mach.bat test-unit
</pre>
Note: A log file can be maintained to make keep a check on the tests that are passing.
* Update the automated servo Web Platform tests(wpt):
For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run. We ran the following command:
<pre>
wget https://community.taskcluster-artifacts.net/KqQWr_VwQDe55wGO_T193Q/0/public/test-wpt.log
https://community.taskcluster-artifacts.net/PhPboOqiSa-gdhzBMJbL_w/0/public/test-wpt.log
https://community.taskcluster-artifacts.net/Fzvx31ovS6GPF4eGGBl8rA/0/public/test-wpt.log
https://community.taskcluster-artifacts.net/EfQsJZaXTBSTmct0hy3scw/0/public/test-wpt.log
</pre>

Once log is saved, then we ran the following command to update the test expectations
<pre>
./mach update-wpt test-wpt.log test-wpt.log.1 test-wpt.log.2 test-wpt.log.3
</pre>

This updated the test results in 73 test files to include the createImageBitmap API.

* Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:
<pre>
For Linux or macOS:
./mach run https://www.google.com
</pre>
<pre>
For Windows:
mach.bat run https://www.google.com
</pre>

[[File:machRun.png]]

== '''Future Work ''' ==
The createImageBitmap() method can be extended to support the subsequent steps as shown in the steps for implementation.
1. The method can be extended to support other image sources such as SVGImage, video sources, ImageData source, and so on.
2. Overload the createImageBitmap() method to accept the s/y/w/h parameters
3. Also implement support for ImageBitmaps as canvas image sources in the canvas_state.rs file

=='''Code submission and Pull request'''==

'''Code: '''[https://github.com/ramyananth/servo] 
'''Pull Request: '''[https://github.com/servo/servo/pull/26296]

== '''Team Details''' ==

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Sandeep Kundala (skundal@ncsu.edu)

== '''Mentor Details''' ==
Jay Modi

== '''References''' ==

* [https://en.wikipedia.org/wiki/Servo_(software)| What is servo?]
* [https://en.wikipedia.org/wiki/Rust_(programming_language)| what is RUST programming?]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-05-01T14:42:34Z

Jviswan: /* Current Progress */

== '''Background Information''' ==
This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the [https://www.techopedia.com/definition/792/bitmap-bmp| ImageBitmap].

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to [https://en.wikipedia.org/wiki/Canvas_element| HTML canvas elements]. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

== '''About ImageBitMap and Motivation behind the project''' ==
We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

== '''Steps for implementation''' ==

'''Initial Phase'''
* '''Step 1: '''Add a ImageBitmap WebIDL interface to ''components/script/dom/webidl''s and Rust implementation in components/script/dom/imagebitmap.rs
* '''Step 2: ''' Add the ''createImageBitmap'' method that takes no extra x/y/w/h parameters in ''component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and implement the method in ''component/script/dom/window.rs'', handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

'''Subsequent phase'''
* '''Step 1: '''Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
* '''Step 2: '''Implement the ''createImageBitmap'' overload that accepts x/y/w/h parameters
* '''Step 3: '''Implement support for ImageBitmaps as canvas image sources in ''components/script/canvas_state.rs''
[[File:AllSteps.jpg]]

== '''Previous Implementation''' ==
The steps that have been implemented so far in this project by the previous batch are:

'''Step 1:''' Added the ImageBitmap interface to ''components/script/dom/webidls'' that represents a bitmap image which can be drawn to a <canvas> without undue latency. The interface contains height and weight as its attributes which are read only unsigned long integers.
<pre>
//[Exposed=(Window,Worker), Serializable, Transferable]
[Exposed=(Window,Worker)]
interface ImageBitmap {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
//void close();
};

typedef (CanvasImageSource or
Blob or
ImageData) ImageBitmapSource;

enum ImageOrientation { "none", "flipY" };
enum PremultiplyAlpha { "none", "premultiply", "default" };
enum ColorSpaceConversion { "none", "default" };
enum ResizeQuality { "pixelated", "low", "medium", "high" };

dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "none";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange] unsigned long resizeWidth;
[EnforceRange] unsigned long resizeHeight;
ResizeQuality resizeQuality = "low";
};
</pre>

The ImageBitmap webidl also defines a dictionary for various ImageBitmap Options that can be used to modify the ImageBitmap object.

'''Step 2:''' Implemented the rust code for the webidl interface at ''components/script/dom/imagebitmap.rs''. For more details on the code [https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API#Implementation visit]
<pre>
use crate::dom::bindings::cell::DomRefCell;

use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::root::DomRoot;
use crate::dom::globalscope::GlobalScope;

use crate::dom::bindings::error::Fallible;
use crate::dom::bindings::reflector::{reflect_dom_object, Reflector};
use dom_struct::dom_struct;

use std::vec::Vec;

#[dom_struct]
pub struct ImageBitmap {
reflector_: Reflector,
width: u32,
height: u32,
bitmap_data: DomRefCell<Vec<u8>>,
}

impl ImageBitmap {
fn new_inherited(width_arg: u32, height_arg: u32) -> ImageBitmap {
ImageBitmap {
reflector_: Reflector::new(),
width: width_arg,
height: height_arg,
bitmap_data: DomRefCell::new(vec![]),
}
}

#[allow(dead_code)]
pub fn new(global: &GlobalScope, width: u32, height: u32) -> Fallible<DomRoot<ImageBitmap>> {
//assigning to a variable the return object of new_inherited
let imagebitmap = Box::new(ImageBitmap::new_inherited(width, height));

Ok(reflect_dom_object(imagebitmap, global))
}
}
</pre>

The code also implements the getter methods for height and width attribute of an ImageBitmap object.
<pre>
impl ImageBitmapMethods for ImageBitmap {
// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-height
fn Height(&self) -> u32 {
//to do: add a condition for checking detached internal slot
//and return 0 if set to true
self.height
}

// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-width
fn Width(&self) -> u32 {
//to do: add a condition to check detached internal slot
////and return 0 if set to true
self.width
}
}
</pre>

== '''Proposed Implementation''' ==
Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

;Implementing createImageBitmap web API

:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
:*This web interface is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/globalscope.rs''. It is then called in ''components/script/dom/window.rs'' and ''components/script/dom/workerglobalscope.rs''
:*The syntax of the method looks like
:::const imageBitmapPromise = createImageBitmap(image[, options]);
:::const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
::where the parameters indicate:
:::'''image:''' an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.
:::'''sx, sy, sw, sh:''' if given, source image is cropped to the given pixels.
:::'''options (Optional):''' the ImageBitmap object's bitmap data is modified according to options. Available options are:
:::*imageOrientation
:::*premultiplyAlpha
:::*colorSpaceConversion
:::*resizeWidth
:::*resizeHeight
:::*resizeQuality
:::: You can read more about these options [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap here]
::The return value is a Promise that is resolved when a new ImageBitmap is created.
:* As a first step, we will be implementing the method to handle canvas elements. Subsequently, we will be enhancing the method to handle other image sources and the x/y/w/h parameters.

;Implementing close() method from previous work

:* close() is a method in the ImageBitmap interface. It is implemented in ''components/script/dom/imagebitmap.rs'' file.
:* This method disposes of all graphical resources associated with an ImageBitmap.

== '''Current Progress''' ==

* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/globalscope.rs''' file. The comments in the following code will explain the functionality that it carries out.

<pre>
// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
pub fn create_image_bitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let in_realm_proof = AlreadyInRealm::assert(&self);
// Created a new promise object p
let p = Promise::new_in_current_realm(&self, InRealm::Already(&in_realm_proof));

// If resizewidth is present and is equal to 0, reject p with InvalidState error
if options.resizeWidth.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// If resizeheight is present and is equal to 0, reject p with InvalidState error
if options.resizeHeight.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// match the image to different types of image source and return the resolved p
let promise = match image {
// check if image source is HTMLCanvasElement
ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
// check if image source is OffscreenCanvas
ImageBitmapSource::OffscreenCanvas(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
_ => {
// if the image source is not HTMLCanvasElement or OffscreenCanvas, reject p with NotSupported Error
p.reject_error(Error::NotSupported);
return p;
},
};
promise
}
</pre>
* Updated wpt(Web Platform Tests) tests results to include createImageBitmap API and reject non-canvas image source elements.

* For this implementation, we followed the DRY principle and strategy pattern.

== '''Design of the createImageBitmap() method''' ==

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

[[File:fig1.png|border]]

Switching on the "image" argument the following is the sequence of actions

=== If the image is an SVGImage===
[[File:fig2.png|border]]

=== If the image is a video===
[[File:ReFigure3.png|border]]

=== If the image is a canvas===
[[File:ReFigure4.png|border]]

=== If the image is an ImageBitmap===
[[File:ImageBitmap.jpg|border]]

=== If the image is an ImageData===
[[File:ImageData.jpg|border]]

=='''Test Plan'''==
The following are the respective steps in testing:
* Servo check should be successful.
The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
<pre>
For Linux or macOS:
./mach check
</pre>
<pre>
For Windows:
mach.bat check
</pre>

[[File:machCheck.png]]

* Servo building test should be successful.
The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
<pre>
For Linux or macOS:
./mach build --dev
</pre>
<pre>
For Windows:
mach.bat build --dev
</pre>
[[File:machBuild.png]]

* Check for the file tidiness (following standards of servo) using the command:
<pre>
For Linux or macOS:
./mach test-tidy
./mach fmt
</pre>
<pre>
For Windows:
mach.bat test-tidy
mach.bat fmt
</pre>

[[File:machTestTidy.png]]

*Servo automated Unit-testing should be successful.
Running the following commands will run all the unit-tests
<pre>
For Linux or macOS:
./mach test-unit
</pre>
<pre>
For Windows:
mach.bat test-unit
</pre>
Note: A log file can be maintained to make keep a check on the tests that are passing.
* Update the automated servo Web Platform tests(wpt):
For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run, for example by running
<pre>
./mach test-wpt --log-raw /path/for/storing/log/file/<filename>.log
</pre>

Once log is saved, then run to update test expectations
<pre>
./mach update-wpt /path/to/logfile/<filename>.log
</pre>

* Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:
<pre>
For Linux or macOS:
./mach run https://www.google.com
</pre>
<pre>
For Windows:
mach.bat run https://www.google.com
</pre>

[[File:machRun.png]]

== '''Future Work ''' ==
The createImageBitmap() method can be extended to support the subsequent steps as shown in the steps for implementation.
1. The method can be extended to support other image sources such as SVGImage, video sources, ImageData source, and so on.
2. Overload the createImageBitmap() method to accept the s/y/w/h parameters
3. Also implement support for ImageBitmaps as canvas image sources in the canvas_state.rs file

=='''Code submission and Pull request'''==

'''Code: '''[https://github.com/ramyananth/servo] 
'''Pull Request: '''[https://github.com/servo/servo/pull/26296]

== '''Team Details''' ==

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Sandeep Kundala (skundal@ncsu.edu)

== '''Mentor Details''' ==
Jay Modi

== '''References''' ==

* [https://en.wikipedia.org/wiki/Servo_(software)| What is servo?]
* [https://en.wikipedia.org/wiki/Rust_(programming_language)| what is RUST programming?]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-05-01T14:32:52Z

Jviswan: /* Current Progress */

== '''Background Information''' ==
This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the [https://www.techopedia.com/definition/792/bitmap-bmp| ImageBitmap].

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to [https://en.wikipedia.org/wiki/Canvas_element| HTML canvas elements]. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

== '''About ImageBitMap and Motivation behind the project''' ==
We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

== '''Steps for implementation''' ==

'''Initial Phase'''
* '''Step 1: '''Add a ImageBitmap WebIDL interface to ''components/script/dom/webidl''s and Rust implementation in components/script/dom/imagebitmap.rs
* '''Step 2: ''' Add the ''createImageBitmap'' method that takes no extra x/y/w/h parameters in ''component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and implement the method in ''component/script/dom/window.rs'', handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

'''Subsequent phase'''
* '''Step 1: '''Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
* '''Step 2: '''Implement the ''createImageBitmap'' overload that accepts x/y/w/h parameters
* '''Step 3: '''Implement support for ImageBitmaps as canvas image sources in ''components/script/canvas_state.rs''
[[File:AllSteps.jpg]]

== '''Previous Implementation''' ==
The steps that have been implemented so far in this project by the previous batch are:

'''Step 1:''' Added the ImageBitmap interface to ''components/script/dom/webidls'' that represents a bitmap image which can be drawn to a <canvas> without undue latency. The interface contains height and weight as its attributes which are read only unsigned long integers.
<pre>
//[Exposed=(Window,Worker), Serializable, Transferable]
[Exposed=(Window,Worker)]
interface ImageBitmap {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
//void close();
};

typedef (CanvasImageSource or
Blob or
ImageData) ImageBitmapSource;

enum ImageOrientation { "none", "flipY" };
enum PremultiplyAlpha { "none", "premultiply", "default" };
enum ColorSpaceConversion { "none", "default" };
enum ResizeQuality { "pixelated", "low", "medium", "high" };

dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "none";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange] unsigned long resizeWidth;
[EnforceRange] unsigned long resizeHeight;
ResizeQuality resizeQuality = "low";
};
</pre>

The ImageBitmap webidl also defines a dictionary for various ImageBitmap Options that can be used to modify the ImageBitmap object.

'''Step 2:''' Implemented the rust code for the webidl interface at ''components/script/dom/imagebitmap.rs''. For more details on the code [https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API#Implementation visit]
<pre>
use crate::dom::bindings::cell::DomRefCell;

use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::root::DomRoot;
use crate::dom::globalscope::GlobalScope;

use crate::dom::bindings::error::Fallible;
use crate::dom::bindings::reflector::{reflect_dom_object, Reflector};
use dom_struct::dom_struct;

use std::vec::Vec;

#[dom_struct]
pub struct ImageBitmap {
reflector_: Reflector,
width: u32,
height: u32,
bitmap_data: DomRefCell<Vec<u8>>,
}

impl ImageBitmap {
fn new_inherited(width_arg: u32, height_arg: u32) -> ImageBitmap {
ImageBitmap {
reflector_: Reflector::new(),
width: width_arg,
height: height_arg,
bitmap_data: DomRefCell::new(vec![]),
}
}

#[allow(dead_code)]
pub fn new(global: &GlobalScope, width: u32, height: u32) -> Fallible<DomRoot<ImageBitmap>> {
//assigning to a variable the return object of new_inherited
let imagebitmap = Box::new(ImageBitmap::new_inherited(width, height));

Ok(reflect_dom_object(imagebitmap, global))
}
}
</pre>

The code also implements the getter methods for height and width attribute of an ImageBitmap object.
<pre>
impl ImageBitmapMethods for ImageBitmap {
// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-height
fn Height(&self) -> u32 {
//to do: add a condition for checking detached internal slot
//and return 0 if set to true
self.height
}

// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-width
fn Width(&self) -> u32 {
//to do: add a condition to check detached internal slot
////and return 0 if set to true
self.width
}
}
</pre>

== '''Proposed Implementation''' ==
Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

;Implementing createImageBitmap web API

:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
:*This web interface is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/globalscope.rs''. It is then called in ''components/script/dom/window.rs'' and ''components/script/dom/workerglobalscope.rs''
:*The syntax of the method looks like
:::const imageBitmapPromise = createImageBitmap(image[, options]);
:::const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
::where the parameters indicate:
:::'''image:''' an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.
:::'''sx, sy, sw, sh:''' if given, source image is cropped to the given pixels.
:::'''options (Optional):''' the ImageBitmap object's bitmap data is modified according to options. Available options are:
:::*imageOrientation
:::*premultiplyAlpha
:::*colorSpaceConversion
:::*resizeWidth
:::*resizeHeight
:::*resizeQuality
:::: You can read more about these options [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap here]
::The return value is a Promise that is resolved when a new ImageBitmap is created.
:* As a first step, we will be implementing the method to handle canvas elements. Subsequently, we will be enhancing the method to handle other image sources and the x/y/w/h parameters.

;Implementing close() method from previous work

:* close() is a method in the ImageBitmap interface. It is implemented in ''components/script/dom/imagebitmap.rs'' file.
:* This method disposes of all graphical resources associated with an ImageBitmap.

== '''Current Progress''' ==

* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/globalscope.rs''' file. The comments in the following code will explain the functionality that it carries out.

<pre>
// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
pub fn create_image_bitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let in_realm_proof = AlreadyInRealm::assert(&self);
// Created a new promise object p
let p = Promise::new_in_current_realm(&self, InRealm::Already(&in_realm_proof));

// If resizewidth is present and is equal to 0, reject p with InvalidState error
if options.resizeWidth.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// If resizeheight is present and is equal to 0, reject p with InvalidState error
if options.resizeHeight.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// match the image to different types of image source and return the resolved p
let promise = match image {
// check if image source is HTMLCanvasElement
ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
// check if image source is OffscreenCanvas
ImageBitmapSource::OffscreenCanvas(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
_ => {
// if the image source is not HTMLCanvasElement or OffscreenCanvas, reject p with NotSupported Error
p.reject_error(Error::NotSupported);
return p;
},
};
promise
}
</pre>
* Updated wpt tests results to include createImageBitmap API and reject non-canvas image source elements.

== '''Design of the createImageBitmap() method''' ==

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

[[File:fig1.png|border]]

Switching on the "image" argument the following is the sequence of actions

=== If the image is an SVGImage===
[[File:fig2.png|border]]

=== If the image is a video===
[[File:ReFigure3.png|border]]

=== If the image is a canvas===
[[File:ReFigure4.png|border]]

=== If the image is an ImageBitmap===
[[File:ImageBitmap.jpg|border]]

=== If the image is an ImageData===
[[File:ImageData.jpg|border]]

=='''Test Plan'''==
The following are the respective steps in testing:
* Servo check should be successful.
The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
<pre>
For Linux or macOS:
./mach check
</pre>
<pre>
For Windows:
mach.bat check
</pre>

[[File:machCheck.png]]

* Servo building test should be successful.
The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
<pre>
For Linux or macOS:
./mach build --dev
</pre>
<pre>
For Windows:
mach.bat build --dev
</pre>
[[File:machBuild.png]]

* Check for the file tidiness (following standards of servo) using the command:
<pre>
For Linux or macOS:
./mach test-tidy
./mach fmt
</pre>
<pre>
For Windows:
mach.bat test-tidy
mach.bat fmt
</pre>

[[File:machTestTidy.png]]

*Servo automated Unit-testing should be successful.
Running the following commands will run all the unit-tests
<pre>
For Linux or macOS:
./mach test-unit
</pre>
<pre>
For Windows:
mach.bat test-unit
</pre>
Note: A log file can be maintained to make keep a check on the tests that are passing.
* Update the automated servo Web Platform tests(wpt):
For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run, for example by running
<pre>
./mach test-wpt --log-raw /path/for/storing/log/file/<filename>.log
</pre>

Once log is saved, then run to update test expectations
<pre>
./mach update-wpt /path/to/logfile/<filename>.log
</pre>

* Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:
<pre>
For Linux or macOS:
./mach run https://www.google.com
</pre>
<pre>
For Windows:
mach.bat run https://www.google.com
</pre>

[[File:machRun.png]]

== '''Future Work ''' ==
The createImageBitmap() method can be extended to support the subsequent steps as shown in the steps for implementation.
1. The method can be extended to support other image sources such as SVGImage, video sources, ImageData source, and so on.
2. Overload the createImageBitmap() method to accept the s/y/w/h parameters
3. Also implement support for ImageBitmaps as canvas image sources in the canvas_state.rs file

=='''Code submission and Pull request'''==

'''Code: '''[https://github.com/ramyananth/servo] 
'''Pull Request: '''[https://github.com/servo/servo/pull/26296]

== '''Team Details''' ==

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Sandeep Kundala (skundal@ncsu.edu)

== '''Mentor Details''' ==
Jay Modi

== '''References''' ==

* [https://en.wikipedia.org/wiki/Servo_(software)| What is servo?]
* [https://en.wikipedia.org/wiki/Rust_(programming_language)| what is RUST programming?]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-05-01T14:14:24Z

Jviswan: /* Current Progress */

== '''Background Information''' ==
This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the [https://www.techopedia.com/definition/792/bitmap-bmp| ImageBitmap].

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to [https://en.wikipedia.org/wiki/Canvas_element| HTML canvas elements]. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

== '''About ImageBitMap and Motivation behind the project''' ==
We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

== '''Steps for implementation''' ==

'''Initial Phase'''
* '''Step 1: '''Add a ImageBitmap WebIDL interface to ''components/script/dom/webidl''s and Rust implementation in components/script/dom/imagebitmap.rs
* '''Step 2: ''' Add the ''createImageBitmap'' method that takes no extra x/y/w/h parameters in ''component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and implement the method in ''component/script/dom/window.rs'', handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

'''Subsequent phase'''
* '''Step 1: '''Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
* '''Step 2: '''Implement the ''createImageBitmap'' overload that accepts x/y/w/h parameters
* '''Step 3: '''Implement support for ImageBitmaps as canvas image sources in ''components/script/canvas_state.rs''
[[File:AllSteps.jpg]]

== '''Previous Implementation''' ==
The steps that have been implemented so far in this project by the previous batch are:

'''Step 1:''' Added the ImageBitmap interface to ''components/script/dom/webidls'' that represents a bitmap image which can be drawn to a <canvas> without undue latency. The interface contains height and weight as its attributes which are read only unsigned long integers.
<pre>
//[Exposed=(Window,Worker), Serializable, Transferable]
[Exposed=(Window,Worker)]
interface ImageBitmap {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
//void close();
};

typedef (CanvasImageSource or
Blob or
ImageData) ImageBitmapSource;

enum ImageOrientation { "none", "flipY" };
enum PremultiplyAlpha { "none", "premultiply", "default" };
enum ColorSpaceConversion { "none", "default" };
enum ResizeQuality { "pixelated", "low", "medium", "high" };

dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "none";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange] unsigned long resizeWidth;
[EnforceRange] unsigned long resizeHeight;
ResizeQuality resizeQuality = "low";
};
</pre>

The ImageBitmap webidl also defines a dictionary for various ImageBitmap Options that can be used to modify the ImageBitmap object.

'''Step 2:''' Implemented the rust code for the webidl interface at ''components/script/dom/imagebitmap.rs''. For more details on the code [https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API#Implementation visit]
<pre>
use crate::dom::bindings::cell::DomRefCell;

use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::root::DomRoot;
use crate::dom::globalscope::GlobalScope;

use crate::dom::bindings::error::Fallible;
use crate::dom::bindings::reflector::{reflect_dom_object, Reflector};
use dom_struct::dom_struct;

use std::vec::Vec;

#[dom_struct]
pub struct ImageBitmap {
reflector_: Reflector,
width: u32,
height: u32,
bitmap_data: DomRefCell<Vec<u8>>,
}

impl ImageBitmap {
fn new_inherited(width_arg: u32, height_arg: u32) -> ImageBitmap {
ImageBitmap {
reflector_: Reflector::new(),
width: width_arg,
height: height_arg,
bitmap_data: DomRefCell::new(vec![]),
}
}

#[allow(dead_code)]
pub fn new(global: &GlobalScope, width: u32, height: u32) -> Fallible<DomRoot<ImageBitmap>> {
//assigning to a variable the return object of new_inherited
let imagebitmap = Box::new(ImageBitmap::new_inherited(width, height));

Ok(reflect_dom_object(imagebitmap, global))
}
}
</pre>

The code also implements the getter methods for height and width attribute of an ImageBitmap object.
<pre>
impl ImageBitmapMethods for ImageBitmap {
// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-height
fn Height(&self) -> u32 {
//to do: add a condition for checking detached internal slot
//and return 0 if set to true
self.height
}

// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-width
fn Width(&self) -> u32 {
//to do: add a condition to check detached internal slot
////and return 0 if set to true
self.width
}
}
</pre>

== '''Proposed Implementation''' ==
Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

;Implementing createImageBitmap web API

:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
:*This web interface is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/globalscope.rs''. It is then called in ''components/script/dom/window.rs'' and ''components/script/dom/workerglobalscope.rs''
:*The syntax of the method looks like
:::const imageBitmapPromise = createImageBitmap(image[, options]);
:::const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
::where the parameters indicate:
:::'''image:''' an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.
:::'''sx, sy, sw, sh:''' if given, source image is cropped to the given pixels.
:::'''options (Optional):''' the ImageBitmap object's bitmap data is modified according to options. Available options are:
:::*imageOrientation
:::*premultiplyAlpha
:::*colorSpaceConversion
:::*resizeWidth
:::*resizeHeight
:::*resizeQuality
:::: You can read more about these options [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap here]
::The return value is a Promise that is resolved when a new ImageBitmap is created.
:* As a first step, we will be implementing the method to handle canvas elements. Subsequently, we will be enhancing the method to handle other image sources and the x/y/w/h parameters.

;Implementing close() method from previous work

:* close() is a method in the ImageBitmap interface. It is implemented in ''components/script/dom/imagebitmap.rs'' file.
:* This method disposes of all graphical resources associated with an ImageBitmap.

== '''Current Progress''' ==

* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/globalscope.rs''' file. The comments in the following code will explain the functionality that it carries out.

<pre>
// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
pub fn create_image_bitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let in_realm_proof = AlreadyInRealm::assert(&self);
// Created a new promise object p
let p = Promise::new_in_current_realm(&self, InRealm::Already(&in_realm_proof));

// If resizewidth is present and is equal to 0, reject p with InvalidState error
if options.resizeWidth.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// If resizeheight is present and is equal to 0, reject p with InvalidState error
if options.resizeHeight.map_or(false, |w| w == 0) {
p.reject_error(Error::InvalidState);
return p;
}

// match the image to different types of image source and return the resolved p
let promise = match image {
// check if image source is HTMLCanvasElement
ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
// check if image source is OffscreenCanvas
ImageBitmapSource::OffscreenCanvas(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
// check if the image source is valid
if !canvas.is_valid() {
p.reject_error(Error::InvalidState);
return p;
}

// the fetch_all_data() method returns the bitmap data and size of the image
if let Some((data, size)) = canvas.fetch_all_data() {
// convert the data to a <vec> type
let data = data
.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]);
//create imageBitmap object using the height and width of the image
let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

// copy the data to bitmap_data of imageBitmap object
image_bitmap.set_bitmap_data(data);
// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// resolve p with imageBitmap object
p.resolve_native(&(image_bitmap));
}
p
},
_ => {
// if the image source is not HTMLCanvasElement or OffscreenCanvas, reject p with NotSupported Error
p.reject_error(Error::NotSupported);
return p;
},
};
promise
}
</pre>
* Tested the build using ‘mach’ commands

== '''Design of the createImageBitmap() method''' ==

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

[[File:fig1.png|border]]

Switching on the "image" argument the following is the sequence of actions

=== If the image is an SVGImage===
[[File:fig2.png|border]]

=== If the image is a video===
[[File:ReFigure3.png|border]]

=== If the image is a canvas===
[[File:ReFigure4.png|border]]

=== If the image is an ImageBitmap===
[[File:ImageBitmap.jpg|border]]

=== If the image is an ImageData===
[[File:ImageData.jpg|border]]

=='''Test Plan'''==
The following are the respective steps in testing:
* Servo check should be successful.
The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
<pre>
For Linux or macOS:
./mach check
</pre>
<pre>
For Windows:
mach.bat check
</pre>

[[File:machCheck.png]]

* Servo building test should be successful.
The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
<pre>
For Linux or macOS:
./mach build --dev
</pre>
<pre>
For Windows:
mach.bat build --dev
</pre>
[[File:machBuild.png]]

* Check for the file tidiness (following standards of servo) using the command:
<pre>
For Linux or macOS:
./mach test-tidy
./mach fmt
</pre>
<pre>
For Windows:
mach.bat test-tidy
mach.bat fmt
</pre>

[[File:machTestTidy.png]]

*Servo automated Unit-testing should be successful.
Running the following commands will run all the unit-tests
<pre>
For Linux or macOS:
./mach test-unit
</pre>
<pre>
For Windows:
mach.bat test-unit
</pre>
Note: A log file can be maintained to make keep a check on the tests that are passing.
* Update the automated servo Web Platform tests(wpt):
For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run, for example by running
<pre>
./mach test-wpt --log-raw /path/for/storing/log/file/<filename>.log
</pre>

Once log is saved, then run to update test expectations
<pre>
./mach update-wpt /path/to/logfile/<filename>.log
</pre>

* Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:
<pre>
For Linux or macOS:
./mach run https://www.google.com
</pre>
<pre>
For Windows:
mach.bat run https://www.google.com
</pre>

[[File:machRun.png]]

=='''Code submission and Pull request'''==

'''Code: '''[https://github.com/ramyananth/servo] 
'''Pull Request: '''[https://github.com/servo/servo/pull/26296]

== '''Team Details''' ==

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Sandeep Kundala (skundal@ncsu.edu)

== '''Mentor Details''' ==
Jay Modi

== '''References''' ==

* [https://en.wikipedia.org/wiki/Servo_(software)| What is servo?]
* [https://en.wikipedia.org/wiki/Rust_(programming_language)| what is RUST programming?]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-05-01T13:41:36Z

Jviswan: /* Current Progress */

== '''Background Information''' ==
This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the [https://www.techopedia.com/definition/792/bitmap-bmp| ImageBitmap].

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to [https://en.wikipedia.org/wiki/Canvas_element| HTML canvas elements]. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

== '''About ImageBitMap and Motivation behind the project''' ==
We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

== '''Steps for implementation''' ==

'''Initial Phase'''
* '''Step 1: '''Add a ImageBitmap WebIDL interface to ''components/script/dom/webidl''s and Rust implementation in components/script/dom/imagebitmap.rs
* '''Step 2: ''' Add the ''createImageBitmap'' method that takes no extra x/y/w/h parameters in ''component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and implement the method in ''component/script/dom/window.rs'', handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

'''Subsequent phase'''
* '''Step 1: '''Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
* '''Step 2: '''Implement the ''createImageBitmap'' overload that accepts x/y/w/h parameters
* '''Step 3: '''Implement support for ImageBitmaps as canvas image sources in ''components/script/canvas_state.rs''
[[File:AllSteps.jpg]]

== '''Previous Implementation''' ==
The steps that have been implemented so far in this project by the previous batch are:

'''Step 1:''' Added the ImageBitmap interface to ''components/script/dom/webidls'' that represents a bitmap image which can be drawn to a <canvas> without undue latency. The interface contains height and weight as its attributes which are read only unsigned long integers.
<pre>
//[Exposed=(Window,Worker), Serializable, Transferable]
[Exposed=(Window,Worker)]
interface ImageBitmap {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
//void close();
};

typedef (CanvasImageSource or
Blob or
ImageData) ImageBitmapSource;

enum ImageOrientation { "none", "flipY" };
enum PremultiplyAlpha { "none", "premultiply", "default" };
enum ColorSpaceConversion { "none", "default" };
enum ResizeQuality { "pixelated", "low", "medium", "high" };

dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "none";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange] unsigned long resizeWidth;
[EnforceRange] unsigned long resizeHeight;
ResizeQuality resizeQuality = "low";
};
</pre>

The ImageBitmap webidl also defines a dictionary for various ImageBitmap Options that can be used to modify the ImageBitmap object.

'''Step 2:''' Implemented the rust code for the webidl interface at ''components/script/dom/imagebitmap.rs''. For more details on the code [https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API#Implementation visit]
<pre>
use crate::dom::bindings::cell::DomRefCell;

use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::root::DomRoot;
use crate::dom::globalscope::GlobalScope;

use crate::dom::bindings::error::Fallible;
use crate::dom::bindings::reflector::{reflect_dom_object, Reflector};
use dom_struct::dom_struct;

use std::vec::Vec;

#[dom_struct]
pub struct ImageBitmap {
reflector_: Reflector,
width: u32,
height: u32,
bitmap_data: DomRefCell<Vec<u8>>,
}

impl ImageBitmap {
fn new_inherited(width_arg: u32, height_arg: u32) -> ImageBitmap {
ImageBitmap {
reflector_: Reflector::new(),
width: width_arg,
height: height_arg,
bitmap_data: DomRefCell::new(vec![]),
}
}

#[allow(dead_code)]
pub fn new(global: &GlobalScope, width: u32, height: u32) -> Fallible<DomRoot<ImageBitmap>> {
//assigning to a variable the return object of new_inherited
let imagebitmap = Box::new(ImageBitmap::new_inherited(width, height));

Ok(reflect_dom_object(imagebitmap, global))
}
}
</pre>

The code also implements the getter methods for height and width attribute of an ImageBitmap object.
<pre>
impl ImageBitmapMethods for ImageBitmap {
// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-height
fn Height(&self) -> u32 {
//to do: add a condition for checking detached internal slot
//and return 0 if set to true
self.height
}

// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-width
fn Width(&self) -> u32 {
//to do: add a condition to check detached internal slot
////and return 0 if set to true
self.width
}
}
</pre>

== '''Proposed Implementation''' ==
Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

;Implementing createImageBitmap web API

:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
:*This web interface is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/globalscope.rs''. It is then called in ''components/script/dom/window.rs'' and ''components/script/dom/workerglobalscope.rs''
:*The syntax of the method looks like
:::const imageBitmapPromise = createImageBitmap(image[, options]);
:::const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
::where the parameters indicate:
:::'''image:''' an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.
:::'''sx, sy, sw, sh:''' if given, source image is cropped to the given pixels.
:::'''options (Optional):''' the ImageBitmap object's bitmap data is modified according to options. Available options are:
:::*imageOrientation
:::*premultiplyAlpha
:::*colorSpaceConversion
:::*resizeWidth
:::*resizeHeight
:::*resizeQuality
:::: You can read more about these options [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap here]
::The return value is a Promise that is resolved when a new ImageBitmap is created.
:* As a first step, we will be implementing the method to handle canvas elements. Subsequently, we will be enhancing the method to handle other image sources and the x/y/w/h parameters.

;Implementing close() method from previous work

:* close() is a method in the ImageBitmap interface. It is implemented in ''components/script/dom/imagebitmap.rs'' file.
:* This method disposes of all graphical resources associated with an ImageBitmap.

== '''Current Progress''' ==

* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/globalscope.rs''' file. The comments in the following code will explain the functionality that it carries out.

<pre>
// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
fn CreateImageBitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let global = self.global();
let in_realm_proof = AlreadyInRealm::assert(&global);
// The following line creates promise element which is to be returned
let p = Promise::new_in_current_realm(&global, InRealm::Already(&in_realm_proof));
if options.resizeWidth.unwrap() == 0 {
p.reject_error(Error::InvalidState)
}

if options.resizeHeight.unwrap() == 0 {
p.reject_error(Error::InvalidState)
}

let image_bitmap = ImageBitmap::new(&global, 0, 0).unwrap();

// match the image type to promise element
let promise = match image {
// Check if the imageBitmapSource is of HTMLCanvasElement type
ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
if !canvas.is_valid() {
p.reject_error(Error::InvalidState)
}

// Use fetch_all_data() from canvas_state.rs to return the image data and its size and assign it to a DomRefCell as a vector
if let Some((data, size)) = canvas.fetch_all_data() {
let data = DomRefCell::new(
data.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]),
);
// Set imageBitmap's bitmap data to a copy of image's bitmap data
image_bitmap.set_bitmap_data(data);
// Set the origin-clean flag of the imageBitmap's bitmap to the same value as the origin-clean flag of image's bitmap
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// Resolve p with imageBitmap
p.resolve_native(&(image_bitmap));
}
p
},
// Check if the imageBitmapSource is of OffscreenCanvas type
ImageBitmapSource::OffscreenCanvas(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
if !canvas.is_valid() {
p.reject_error(Error::InvalidState)
}
// Use fetch_all_data() from canvas_state.rs to return the image data and its size and assign it to a DomRefCell as a vector
if let Some((data, size)) = canvas.fetch_all_data() {
let data = DomRefCell::new(
data.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]), // set value as 0 if image data is null
);
// Set imageBitmap's bitmap data to a copy of image's bitmap data
image_bitmap.set_bitmap_data(data);
// Set the origin-clean flag of the imageBitmap's bitmap to the same value as the origin-clean flag of image's bitmap
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// Resolve p with imageBitmap
p.resolve_native(&(image_bitmap));
}
p
},
_ => p,
};
promise
}
</pre>
* Tested the build using ‘mach’ commands

== '''Design of the createImageBitmap() method''' ==

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

[[File:fig1.png|border]]

Switching on the "image" argument the following is the sequence of actions

=== If the image is an SVGImage===
[[File:fig2.png|border]]

=== If the image is a video===
[[File:ReFigure3.png|border]]

=== If the image is a canvas===
[[File:ReFigure4.png|border]]

=== If the image is an ImageBitmap===
[[File:ImageBitmap.jpg|border]]

=== If the image is an ImageData===
[[File:ImageData.jpg|border]]

=='''Test Plan'''==
The following are the respective steps in testing:
* Servo check should be successful.
The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
<pre>
For Linux or macOS:
./mach check
</pre>
<pre>
For Windows:
mach.bat check
</pre>

[[File:machCheck.png]]

* Servo building test should be successful.
The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
<pre>
For Linux or macOS:
./mach build --dev
</pre>
<pre>
For Windows:
mach.bat build --dev
</pre>
[[File:machBuild.png]]

* Check for the file tidiness (following standards of servo) using the command:
<pre>
For Linux or macOS:
./mach test-tidy
./mach fmt
</pre>
<pre>
For Windows:
mach.bat test-tidy
mach.bat fmt
</pre>

[[File:machTestTidy.png]]

*Servo automated Unit-testing should be successful.
Running the following commands will run all the unit-tests
<pre>
For Linux or macOS:
./mach test-unit
</pre>
<pre>
For Windows:
mach.bat test-unit
</pre>
Note: A log file can be maintained to make keep a check on the tests that are passing.
* Update the automated servo Web Platform tests(wpt):
For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run, for example by running
<pre>
./mach test-wpt --log-raw /path/for/storing/log/file/<filename>.log
</pre>

Once log is saved, then run to update test expectations
<pre>
./mach update-wpt /path/to/logfile/<filename>.log
</pre>

* Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:
<pre>
For Linux or macOS:
./mach run https://www.google.com
</pre>
<pre>
For Windows:
mach.bat run https://www.google.com
</pre>

[[File:machRun.png]]

=='''Code submission and Pull request'''==

'''Code: '''[https://github.com/ramyananth/servo] 
'''Pull Request: '''[https://github.com/servo/servo/pull/26296]

== '''Team Details''' ==

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Sandeep Kundala (skundal@ncsu.edu)

== '''Mentor Details''' ==
Jay Modi

== '''References''' ==

* [https://en.wikipedia.org/wiki/Servo_(software)| What is servo?]
* [https://en.wikipedia.org/wiki/Rust_(programming_language)| what is RUST programming?]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-05-01T13:40:26Z

Jviswan: /* Proposed Implementation */

== '''Background Information''' ==
This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the [https://www.techopedia.com/definition/792/bitmap-bmp| ImageBitmap].

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to [https://en.wikipedia.org/wiki/Canvas_element| HTML canvas elements]. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

== '''About ImageBitMap and Motivation behind the project''' ==
We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

== '''Steps for implementation''' ==

'''Initial Phase'''
* '''Step 1: '''Add a ImageBitmap WebIDL interface to ''components/script/dom/webidl''s and Rust implementation in components/script/dom/imagebitmap.rs
* '''Step 2: ''' Add the ''createImageBitmap'' method that takes no extra x/y/w/h parameters in ''component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and implement the method in ''component/script/dom/window.rs'', handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

'''Subsequent phase'''
* '''Step 1: '''Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
* '''Step 2: '''Implement the ''createImageBitmap'' overload that accepts x/y/w/h parameters
* '''Step 3: '''Implement support for ImageBitmaps as canvas image sources in ''components/script/canvas_state.rs''
[[File:AllSteps.jpg]]

== '''Previous Implementation''' ==
The steps that have been implemented so far in this project by the previous batch are:

'''Step 1:''' Added the ImageBitmap interface to ''components/script/dom/webidls'' that represents a bitmap image which can be drawn to a <canvas> without undue latency. The interface contains height and weight as its attributes which are read only unsigned long integers.
<pre>
//[Exposed=(Window,Worker), Serializable, Transferable]
[Exposed=(Window,Worker)]
interface ImageBitmap {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
//void close();
};

typedef (CanvasImageSource or
Blob or
ImageData) ImageBitmapSource;

enum ImageOrientation { "none", "flipY" };
enum PremultiplyAlpha { "none", "premultiply", "default" };
enum ColorSpaceConversion { "none", "default" };
enum ResizeQuality { "pixelated", "low", "medium", "high" };

dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "none";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange] unsigned long resizeWidth;
[EnforceRange] unsigned long resizeHeight;
ResizeQuality resizeQuality = "low";
};
</pre>

The ImageBitmap webidl also defines a dictionary for various ImageBitmap Options that can be used to modify the ImageBitmap object.

'''Step 2:''' Implemented the rust code for the webidl interface at ''components/script/dom/imagebitmap.rs''. For more details on the code [https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API#Implementation visit]
<pre>
use crate::dom::bindings::cell::DomRefCell;

use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::root::DomRoot;
use crate::dom::globalscope::GlobalScope;

use crate::dom::bindings::error::Fallible;
use crate::dom::bindings::reflector::{reflect_dom_object, Reflector};
use dom_struct::dom_struct;

use std::vec::Vec;

#[dom_struct]
pub struct ImageBitmap {
reflector_: Reflector,
width: u32,
height: u32,
bitmap_data: DomRefCell<Vec<u8>>,
}

impl ImageBitmap {
fn new_inherited(width_arg: u32, height_arg: u32) -> ImageBitmap {
ImageBitmap {
reflector_: Reflector::new(),
width: width_arg,
height: height_arg,
bitmap_data: DomRefCell::new(vec![]),
}
}

#[allow(dead_code)]
pub fn new(global: &GlobalScope, width: u32, height: u32) -> Fallible<DomRoot<ImageBitmap>> {
//assigning to a variable the return object of new_inherited
let imagebitmap = Box::new(ImageBitmap::new_inherited(width, height));

Ok(reflect_dom_object(imagebitmap, global))
}
}
</pre>

The code also implements the getter methods for height and width attribute of an ImageBitmap object.
<pre>
impl ImageBitmapMethods for ImageBitmap {
// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-height
fn Height(&self) -> u32 {
//to do: add a condition for checking detached internal slot
//and return 0 if set to true
self.height
}

// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-width
fn Width(&self) -> u32 {
//to do: add a condition to check detached internal slot
////and return 0 if set to true
self.width
}
}
</pre>

== '''Proposed Implementation''' ==
Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

;Implementing createImageBitmap web API

:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
:*This web interface is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/globalscope.rs''. It is then called in ''components/script/dom/window.rs'' and ''components/script/dom/workerglobalscope.rs''
:*The syntax of the method looks like
:::const imageBitmapPromise = createImageBitmap(image[, options]);
:::const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
::where the parameters indicate:
:::'''image:''' an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.
:::'''sx, sy, sw, sh:''' if given, source image is cropped to the given pixels.
:::'''options (Optional):''' the ImageBitmap object's bitmap data is modified according to options. Available options are:
:::*imageOrientation
:::*premultiplyAlpha
:::*colorSpaceConversion
:::*resizeWidth
:::*resizeHeight
:::*resizeQuality
:::: You can read more about these options [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap here]
::The return value is a Promise that is resolved when a new ImageBitmap is created.
:* As a first step, we will be implementing the method to handle canvas elements. Subsequently, we will be enhancing the method to handle other image sources and the x/y/w/h parameters.

;Implementing close() method from previous work

:* close() is a method in the ImageBitmap interface. It is implemented in ''components/script/dom/imagebitmap.rs'' file.
:* This method disposes of all graphical resources associated with an ImageBitmap.

== '''Current Progress''' ==

* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/workerglobalscope.rs''' and '''components/script/dom/window.rs''' files. The comments in the following code will explain the functionality that it carries out.

<pre>
// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
fn CreateImageBitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let global = self.global();
let in_realm_proof = AlreadyInRealm::assert(&global);
// The following line creates promise element which is to be returned
let p = Promise::new_in_current_realm(&global, InRealm::Already(&in_realm_proof));
if options.resizeWidth.unwrap() == 0 {
p.reject_error(Error::InvalidState)
}

if options.resizeHeight.unwrap() == 0 {
p.reject_error(Error::InvalidState)
}

let image_bitmap = ImageBitmap::new(&global, 0, 0).unwrap();

// match the image type to promise element
let promise = match image {
// Check if the imageBitmapSource is of HTMLCanvasElement type
ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
if !canvas.is_valid() {
p.reject_error(Error::InvalidState)
}

// Use fetch_all_data() from canvas_state.rs to return the image data and its size and assign it to a DomRefCell as a vector
if let Some((data, size)) = canvas.fetch_all_data() {
let data = DomRefCell::new(
data.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]),
);
// Set imageBitmap's bitmap data to a copy of image's bitmap data
image_bitmap.set_bitmap_data(data);
// Set the origin-clean flag of the imageBitmap's bitmap to the same value as the origin-clean flag of image's bitmap
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// Resolve p with imageBitmap
p.resolve_native(&(image_bitmap));
}
p
},
// Check if the imageBitmapSource is of OffscreenCanvas type
ImageBitmapSource::OffscreenCanvas(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
if !canvas.is_valid() {
p.reject_error(Error::InvalidState)
}
// Use fetch_all_data() from canvas_state.rs to return the image data and its size and assign it to a DomRefCell as a vector
if let Some((data, size)) = canvas.fetch_all_data() {
let data = DomRefCell::new(
data.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]), // set value as 0 if image data is null
);
// Set imageBitmap's bitmap data to a copy of image's bitmap data
image_bitmap.set_bitmap_data(data);
// Set the origin-clean flag of the imageBitmap's bitmap to the same value as the origin-clean flag of image's bitmap
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// Resolve p with imageBitmap
p.resolve_native(&(image_bitmap));
}
p
},
_ => p,
};
promise
}
</pre>
* Tested the build using ‘mach’ commands

== '''Design of the createImageBitmap() method''' ==

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

[[File:fig1.png|border]]

Switching on the "image" argument the following is the sequence of actions

=== If the image is an SVGImage===
[[File:fig2.png|border]]

=== If the image is a video===
[[File:ReFigure3.png|border]]

=== If the image is a canvas===
[[File:ReFigure4.png|border]]

=== If the image is an ImageBitmap===
[[File:ImageBitmap.jpg|border]]

=== If the image is an ImageData===
[[File:ImageData.jpg|border]]

=='''Test Plan'''==
The following are the respective steps in testing:
* Servo check should be successful.
The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
<pre>
For Linux or macOS:
./mach check
</pre>
<pre>
For Windows:
mach.bat check
</pre>

[[File:machCheck.png]]

* Servo building test should be successful.
The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
<pre>
For Linux or macOS:
./mach build --dev
</pre>
<pre>
For Windows:
mach.bat build --dev
</pre>
[[File:machBuild.png]]

* Check for the file tidiness (following standards of servo) using the command:
<pre>
For Linux or macOS:
./mach test-tidy
./mach fmt
</pre>
<pre>
For Windows:
mach.bat test-tidy
mach.bat fmt
</pre>

[[File:machTestTidy.png]]

*Servo automated Unit-testing should be successful.
Running the following commands will run all the unit-tests
<pre>
For Linux or macOS:
./mach test-unit
</pre>
<pre>
For Windows:
mach.bat test-unit
</pre>
Note: A log file can be maintained to make keep a check on the tests that are passing.
* Update the automated servo Web Platform tests(wpt):
For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run, for example by running
<pre>
./mach test-wpt --log-raw /path/for/storing/log/file/<filename>.log
</pre>

Once log is saved, then run to update test expectations
<pre>
./mach update-wpt /path/to/logfile/<filename>.log
</pre>

* Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:
<pre>
For Linux or macOS:
./mach run https://www.google.com
</pre>
<pre>
For Windows:
mach.bat run https://www.google.com
</pre>

[[File:machRun.png]]

=='''Code submission and Pull request'''==

'''Code: '''[https://github.com/ramyananth/servo] 
'''Pull Request: '''[https://github.com/servo/servo/pull/26296]

== '''Team Details''' ==

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Sandeep Kundala (skundal@ncsu.edu)

== '''Mentor Details''' ==
Jay Modi

== '''References''' ==

* [https://en.wikipedia.org/wiki/Servo_(software)| What is servo?]
* [https://en.wikipedia.org/wiki/Rust_(programming_language)| what is RUST programming?]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-05-01T13:36:48Z

Jviswan: /* Current Implementation */

== '''Background Information''' ==
This project aims to contribute to Mozilla's experimental browser engine called Servo, which is implemented in a language called RUST(useful for implementing features that need concurrency and memory safety).

Many of the components of Servo are still under development and one such feature is the [https://www.techopedia.com/definition/792/bitmap-bmp| ImageBitmap].

Major browsers support the ImageBitmap standard which can be used to create images that are ready to be drawn efficiently to [https://en.wikipedia.org/wiki/Canvas_element| HTML canvas elements]. Servo is a new, experimental browser that supports these canvas APIs.

The goal of and motivation behind this project is to implement support for image bitmaps and improve our canvas automated test coverage as a result.

== '''About ImageBitMap and Motivation behind the project''' ==
We usually decode images for a use with canvas to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

But the createImageBitmap() method allows us to decode the image in the background and get access to a new ImageBitmap primitive, which you can draw into a canvas in the same way you would an <img> element, another canvas, or a video.

The aim of this project is to develop the ImageBitmap for the servo environment.

This can be done in the steps mentioned in the following section.

== '''Steps for implementation''' ==

'''Initial Phase'''
* '''Step 1: '''Add a ImageBitmap WebIDL interface to ''components/script/dom/webidl''s and Rust implementation in components/script/dom/imagebitmap.rs
* '''Step 2: ''' Add the ''createImageBitmap'' method that takes no extra x/y/w/h parameters in ''component/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and implement the method in ''component/script/dom/window.rs'', handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources

'''Subsequent phase'''
* '''Step 1: '''Implement several remaining image source types (HTMLImageElement, ImageData, ImageBitmap)
* '''Step 2: '''Implement the ''createImageBitmap'' overload that accepts x/y/w/h parameters
* '''Step 3: '''Implement support for ImageBitmaps as canvas image sources in ''components/script/canvas_state.rs''
[[File:AllSteps.jpg]]

== '''Previous Implementation''' ==
The steps that have been implemented so far in this project by the previous batch are:

'''Step 1:''' Added the ImageBitmap interface to ''components/script/dom/webidls'' that represents a bitmap image which can be drawn to a <canvas> without undue latency. The interface contains height and weight as its attributes which are read only unsigned long integers.
<pre>
//[Exposed=(Window,Worker), Serializable, Transferable]
[Exposed=(Window,Worker)]
interface ImageBitmap {
readonly attribute unsigned long width;
readonly attribute unsigned long height;
//void close();
};

typedef (CanvasImageSource or
Blob or
ImageData) ImageBitmapSource;

enum ImageOrientation { "none", "flipY" };
enum PremultiplyAlpha { "none", "premultiply", "default" };
enum ColorSpaceConversion { "none", "default" };
enum ResizeQuality { "pixelated", "low", "medium", "high" };

dictionary ImageBitmapOptions {
ImageOrientation imageOrientation = "none";
PremultiplyAlpha premultiplyAlpha = "default";
ColorSpaceConversion colorSpaceConversion = "default";
[EnforceRange] unsigned long resizeWidth;
[EnforceRange] unsigned long resizeHeight;
ResizeQuality resizeQuality = "low";
};
</pre>

The ImageBitmap webidl also defines a dictionary for various ImageBitmap Options that can be used to modify the ImageBitmap object.

'''Step 2:''' Implemented the rust code for the webidl interface at ''components/script/dom/imagebitmap.rs''. For more details on the code [https://expertiza.csc.ncsu.edu/index.php/CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API#Implementation visit]
<pre>
use crate::dom::bindings::cell::DomRefCell;

use crate::dom::bindings::codegen::Bindings::ImageBitmapBinding::ImageBitmapMethods;
use crate::dom::bindings::root::DomRoot;
use crate::dom::globalscope::GlobalScope;

use crate::dom::bindings::error::Fallible;
use crate::dom::bindings::reflector::{reflect_dom_object, Reflector};
use dom_struct::dom_struct;

use std::vec::Vec;

#[dom_struct]
pub struct ImageBitmap {
reflector_: Reflector,
width: u32,
height: u32,
bitmap_data: DomRefCell<Vec<u8>>,
}

impl ImageBitmap {
fn new_inherited(width_arg: u32, height_arg: u32) -> ImageBitmap {
ImageBitmap {
reflector_: Reflector::new(),
width: width_arg,
height: height_arg,
bitmap_data: DomRefCell::new(vec![]),
}
}

#[allow(dead_code)]
pub fn new(global: &GlobalScope, width: u32, height: u32) -> Fallible<DomRoot<ImageBitmap>> {
//assigning to a variable the return object of new_inherited
let imagebitmap = Box::new(ImageBitmap::new_inherited(width, height));

Ok(reflect_dom_object(imagebitmap, global))
}
}
</pre>

The code also implements the getter methods for height and width attribute of an ImageBitmap object.
<pre>
impl ImageBitmapMethods for ImageBitmap {
// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-height
fn Height(&self) -> u32 {
//to do: add a condition for checking detached internal slot
//and return 0 if set to true
self.height
}

// https://html.spec.whatwg.org/multipage/#dom-imagebitmap-width
fn Width(&self) -> u32 {
//to do: add a condition to check detached internal slot
////and return 0 if set to true
self.width
}
}
</pre>

== '''Proposed Implementation''' ==
Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

;Starting with createImageBitmap()

:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
:*This method is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/window.rs''.
:*The syntax of the method looks like
:::const imageBitmapPromise = createImageBitmap(image[, options]);
:::const imageBitmapPromise = createImageBitmap(image, sx, sy, sw, sh[, options]);
::where the parameters indicate:
:::'''image:''' an image source, which can be an img element, a SVG image element, a video element, a canvas element, a blob object, an ImageData object or another ImageBitmap object.
:::'''sx, sy, sw, sh:''' if given, source image is cropped to the given pixels.
:::'''options (Optional):''' the ImageBitmap object's bitmap data is modified according to options. Available options are:
:::*imageOrientation
:::*premultiplyAlpha
:::*colorSpaceConversion
:::*resizeWidth
:::*resizeHeight
:::*resizeQuality
:::: You can read more about these options [https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap here]
::The return value is a Promise that is resolved when a new ImageBitmap is created.
:* As a first step, we will be implementing the method to handle canvas elements. Subsequently, we will be enhancing the method to handle other image sources and the x/y/w/h parameters.

;Implementing close() method from previous work

:* close() is a method in the ImageBitmap interface. It is implemented in ''components/script/dom/imagebitmap.rs'' file.
:* This method disposes of all graphical resources associated with an ImageBitmap.

== '''Current Progress''' ==

* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/workerglobalscope.rs''' and '''components/script/dom/window.rs''' files. The comments in the following code will explain the functionality that it carries out.

<pre>
// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
fn CreateImageBitmap(
&self,
image: ImageBitmapSource,
options: &ImageBitmapOptions,
) -> Rc<Promise> {
let global = self.global();
let in_realm_proof = AlreadyInRealm::assert(&global);
// The following line creates promise element which is to be returned
let p = Promise::new_in_current_realm(&global, InRealm::Already(&in_realm_proof));
if options.resizeWidth.unwrap() == 0 {
p.reject_error(Error::InvalidState)
}

if options.resizeHeight.unwrap() == 0 {
p.reject_error(Error::InvalidState)
}

let image_bitmap = ImageBitmap::new(&global, 0, 0).unwrap();

// match the image type to promise element
let promise = match image {
// Check if the imageBitmapSource is of HTMLCanvasElement type
ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
if !canvas.is_valid() {
p.reject_error(Error::InvalidState)
}

// Use fetch_all_data() from canvas_state.rs to return the image data and its size and assign it to a DomRefCell as a vector
if let Some((data, size)) = canvas.fetch_all_data() {
let data = DomRefCell::new(
data.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]),
);
// Set imageBitmap's bitmap data to a copy of image's bitmap data
image_bitmap.set_bitmap_data(data);
// Set the origin-clean flag of the imageBitmap's bitmap to the same value as the origin-clean flag of image's bitmap
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// Resolve p with imageBitmap
p.resolve_native(&(image_bitmap));
}
p
},
// Check if the imageBitmapSource is of OffscreenCanvas type
ImageBitmapSource::OffscreenCanvas(ref canvas) => {
// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
if !canvas.is_valid() {
p.reject_error(Error::InvalidState)
}
// Use fetch_all_data() from canvas_state.rs to return the image data and its size and assign it to a DomRefCell as a vector
if let Some((data, size)) = canvas.fetch_all_data() {
let data = DomRefCell::new(
data.map(|data| data.to_vec())
.unwrap_or_else(|| vec![0; size.area() as usize * 4]), // set value as 0 if image data is null
);
// Set imageBitmap's bitmap data to a copy of image's bitmap data
image_bitmap.set_bitmap_data(data);
// Set the origin-clean flag of the imageBitmap's bitmap to the same value as the origin-clean flag of image's bitmap
image_bitmap.set_origin_clean(canvas.origin_is_clean());
// Resolve p with imageBitmap
p.resolve_native(&(image_bitmap));
}
p
},
_ => p,
};
promise
}
</pre>
* Tested the build using ‘mach’ commands

== '''Design of the createImageBitmap() method''' ==

On invoking the createImageBitmap(image, options) or the createImageBitmap(image sx, sy, sw, sh, options) the following in the sequence of actions

[[File:fig1.png|border]]

Switching on the "image" argument the following is the sequence of actions

=== If the image is an SVGImage===
[[File:fig2.png|border]]

=== If the image is a video===
[[File:ReFigure3.png|border]]

=== If the image is a canvas===
[[File:ReFigure4.png|border]]

=== If the image is an ImageBitmap===
[[File:ImageBitmap.jpg|border]]

=== If the image is an ImageData===
[[File:ImageData.jpg|border]]

=='''Test Plan'''==
The following are the respective steps in testing:
* Servo check should be successful.
The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
<pre>
For Linux or macOS:
./mach check
</pre>
<pre>
For Windows:
mach.bat check
</pre>

[[File:machCheck.png]]

* Servo building test should be successful.
The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
<pre>
For Linux or macOS:
./mach build --dev
</pre>
<pre>
For Windows:
mach.bat build --dev
</pre>
[[File:machBuild.png]]

* Check for the file tidiness (following standards of servo) using the command:
<pre>
For Linux or macOS:
./mach test-tidy
./mach fmt
</pre>
<pre>
For Windows:
mach.bat test-tidy
mach.bat fmt
</pre>

[[File:machTestTidy.png]]

*Servo automated Unit-testing should be successful.
Running the following commands will run all the unit-tests
<pre>
For Linux or macOS:
./mach test-unit
</pre>
<pre>
For Windows:
mach.bat test-unit
</pre>
Note: A log file can be maintained to make keep a check on the tests that are passing.
* Update the automated servo Web Platform tests(wpt):
For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

This first requires storing the log in raw format from a test run, for example by running
<pre>
./mach test-wpt --log-raw /path/for/storing/log/file/<filename>.log
</pre>

Once log is saved, then run to update test expectations
<pre>
./mach update-wpt /path/to/logfile/<filename>.log
</pre>

* Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:
<pre>
For Linux or macOS:
./mach run https://www.google.com
</pre>
<pre>
For Windows:
mach.bat run https://www.google.com
</pre>

[[File:machRun.png]]

=='''Code submission and Pull request'''==

'''Code: '''[https://github.com/ramyananth/servo] 
'''Pull Request: '''[https://github.com/servo/servo/pull/26296]

== '''Team Details''' ==

Jayalakshmi Vishwanathan (jviswan@ncsu.edu)

Nita Radhakrishnan (nradhak2@ncsu.edu)

Ramya Ananth (rananth2@ncsu.edu)

Sandeep Kundala (skundal@ncsu.edu)

== '''Mentor Details''' ==
Jay Modi

== '''References''' ==

* [https://en.wikipedia.org/wiki/Servo_(software)| What is servo?]
* [https://en.wikipedia.org/wiki/Rust_(programming_language)| what is RUST programming?]

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T03:35:56Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T03:31:50Z

Jviswan: /* Details about previous work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T03:27:18Z

Jviswan: /* Details about previous work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T03:17:58Z

Jviswan: /* Details about previous work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T03:13:10Z

Jviswan: /* Details about previous work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T02:48:54Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T02:45:14Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T02:34:06Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T02:27:41Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T02:25:35Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T01:46:27Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T00:37:06Z

Jviswan: /* Test Plan */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-14T00:18:02Z

Jviswan: /* Test Plan */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-13T23:16:17Z

Jviswan: /* Steps for implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-13T23:13:59Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-13T23:09:10Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-13T23:06:37Z

Jviswan: /* Details about current work on implementation */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-13T22:46:04Z

Jviswan: /* Algorithm to design the createImageBitmap() method */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-13T22:19:33Z

Jviswan: /* Algorithm to design the createImageBitmap() method */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-13T22:18:34Z

Jviswan: /* Algorithm to design the createImageBitmap() method */

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-13T22:17:50Z

Jviswan: /* Algorithm to design the createImageBitmap() method */

File:ImageData.jpg

2020-04-13T22:11:46Z

Jviswan:

File:ImageBitmap.jpg

2020-04-13T22:11:27Z

Jviswan:

File:ReFigure4.png

2020-04-13T22:11:02Z

Jviswan:

File:ReFigure3.png

2020-04-13T22:10:44Z

Jviswan:

File:Fig2.png

2020-04-13T22:10:26Z

Jviswan: Jviswan uploaded a new version of File:Fig2.png

File:Fig1.png

2020-04-13T22:10:06Z

Jviswan: Jviswan uploaded a new version of File:Fig1.png

CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI

2020-04-09T00:46:22Z

Jviswan:

File:Status of steps.jpg

2020-04-09T00:43:32Z

Jviswan:

File:AllSteps.jpg

2020-04-09T00:43:01Z

Jviswan:

CSC/ECE 517 Spring 2020 - Project E2008. Refactor summary helper.rb

2020-03-31T20:04:45Z

Jviswan: /* Refactor - summarize_reviews_by_reviewees */

=='''About Expertiza'''==
[http://expertiza.ncsu.edu/ Expertiza] is a web application developed using Ruby on Rails Framework whose creation and maintenance are taken care of by students as well as the faculty of NCSU. Its code is available on Github [https://github.com/expertiza/expertiza Expertiza on GitHub]. Expertiza allows the instructor to create and edit new as well as existing assignments. This also includes creating a wide range of topics under each assignment that students can sign up for. They can also publish surveys and reviews, view statistical results, set deadlines for assignments and make announcements. It provides a platform for students to signup for topics, form teams, view and submit assignments and give peer reviews and feedback.

=='''Problem Statement'''==
'''Background:''' In Expertiza students can review each other’s projects and even each other as teammates. Students can view their project scores and instructors can view student's teammate review scores on the view scores page. This Summary helper aids in calculating these scores and rendering the results on the view scores section of an assignment. Summary helper is a helper module that consists of methods used to calculate scores for these reviews. This is for the use of instructors.

'''Requirement:'''
E2008 is an Expertiza OSS project which deals basically with refactoring app/helpers/summary_helper.rb to reduce the code climate issues such as

* [http://wiki.c2.com/?AbcMetric Assignment Branch Condition]
* [https://en.wikipedia.org/wiki/Cognitive_complexity Cognitive Complexity]
* Method/line too long
* Unused variables / access modifiers

'''A good method should have:'''
* Assignment Branch Condition size <= 15
* Cognitive Complexity <= 6
* No. of lines in a method <= 25

=='''Issues found'''==
The following are issues which were found in the code:

==='''Assignment Branch Condition'''===
{| class="wikitable"
|-
! Method
! ABC Size
|-
| summarize_reviews_by_reviewee
| 44.61
|-
| summarize_reviews_by_criterion
| 42.34
|-
| summarize_reviews_by_reviewees
| 89.93
|-
| get_questions_by_assignment
| 16.43
|-
| calculate_avg_score_by_round
| 18.57
|}

==='''Cognitive Complexity'''===
{| class="wikitable"
|-
! Method
! Cognitive Complexity
|-
| summarize_reviews_by_criterion
| 16
|-
| summarize_reviews_by_reviewees
| 17
|-
| get_questions_by_assignment
| 11
|-
| break_up_comments_to_sentences
| 6
|}

==='''Method/line too long'''===
{| class="wikitable"
|-
! Method/Line too long
! Comments
|-
|'''Method:''' summarize_reviews_by_reviewees
|'''Lines of Code:'''39
|-
|'''Method:''' summarize_reviews_by_criterion
|'''Lines of Code:'''27
|-
|'''Line:''' 145
|self.avg_scores_by_round[reviewee.name][round] too long (162/160)
|}

==='''Unused variables / access modifiers'''===
{| class="wikitable"
|-
! Vaiable/Access Modifier
! Comments
|-
|'''Variable:''' summary
|'''Method:''' summarize_sentences
|-
|'''Variable:''' included_question_counter
|'''Method:''' summarize_reviews_by_reviewee
|-
|'''Access Modifier:''' module_function
|'''Class:''' Summary
|}

=='''Solution Implemented'''==
==='''Refactor - summarize_reviews_by_reviewee'''===
:This method is used to summarize reviews by a reviewer for each question.

:'''Changes Made:'''
:This method could be refactored into smaller methods namely ''summarize_reviews_by_reviewee'' and ''summarize_reviews_by_reviewee_assign'' where ''summarize_reviews_by_reviewee'' calls ''summarize_reviews_by_reviewee_assign'' to get average scores and summary for each question.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewee(questions, assignment, r_id, summary_ws_url)
self.summary = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})

# get all answers for each question and send them to summarization WS
questions.keys.each do |round|
self.summary[round.to_s] = {}
self.avg_scores_by_criterion[round.to_s] = {}
self.avg_scores_by_round[round.to_s] = 0.0
included_question_counter = 0

questions[round].each do |q|
next if q.type.eql?("SectionHeader")

self.summary[round.to_s][q.txt] = ""
self.avg_scores_by_criterion[round.to_s][q.txt] = 0.0

question_answers = Answer.answers_by_question_for_reviewee(assignment.id, r_id, q.id)

max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)

# get the avg scores for this question
self.avg_scores_by_criterion[round.to_s][q.txt] = calculate_avg_score_by_criterion(question_answers, max_score)
# get the summary of answers to this question
self.summary[round.to_s][q.txt] = summarize_sentences(comments, summary_ws_url)
end
self.avg_scores_by_round[round.to_s] = calculate_avg_score_by_round(self.avg_scores_by_criterion[round.to_s], questions[round])
end
self
end
</pre>

:'''After:'''
<pre>
# produce average score and summary of comments for reviews by a reviewer for each question
def summarize_reviews_by_reviewee(questions, assignment, reviewee_id, summary_ws_url)
self.summary = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.summary_ws_url = summary_ws_url

# get all answers for each question and send them to summarization WS
questions.each_key do |round|
self.summary[round.to_s] = {}
self.avg_scores_by_criterion[round.to_s] = {}
self.avg_scores_by_round[round.to_s] = 0.0
questions[round].each do |question|
next if question.type.eql?("SectionHeader")
summarize_reviews_by_reviewee_question(assignment, reviewee_id, question, round)
end
self.avg_scores_by_round[round.to_s] = calculate_avg_score_by_round(self.avg_scores_by_criterion[round.to_s], questions[round])
end
self
end

# get average scores and summary for each question in a review by a reviewer
def summarize_reviews_by_reviewee_question(assignment, reviewee_id, question, round)
question_answers = Answer.answers_by_question_for_reviewee(assignment.id, reviewee_id, question.id)

self.avg_scores_by_criterion[round.to_s][question.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(question))

self.summary[round.to_s][question.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
</pre>

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_reviewee is reduced from 44.61 to 20.64.

==='''Refactor - summarize_reviews_by_criterion'''===
:This method is used to summarize the review for each questions

:'''Changes Made:'''

:This method was refactored into 3 smaller methods namely ''summarize_reviews_by_criterion'', ''summarize_reviews_by_criterion_questions'' and ''end_threads''.

:The method ''summarize_reviews_by_criterion'' calls ''summarize_reviews_by_criterion_questions'' to get answers of each question in the rubric.

:The method ''summarize_reviews_by_criterion_questions'' starts many threads to process each question and closes it by calling the function ''end_threads''.

:'''Before:'''
<pre>
# produce summaries for instructor. it merges all feedback given to all reviewees, and summarize them by criterion
def summarize_reviews_by_criterion(assignment, summary_ws_url)
# @summary[reviewee][round][question]
# @avg_score_round[reviewee][round]
# @avg_scores_by_criterion[reviewee][round][criterion]
nround = assignment.rounds_of_reviews
self.summary = Array.new(nround)
self.avg_scores_by_criterion = Array.new(nround)
self.avg_scores_by_round = Array.new(nround)
threads = []
rubric = get_questions_by_assignment(assignment)

(0..nround - 1).each do |round|
self.avg_scores_by_round[round] = 0.0
self.summary[round] = {}
self.avg_scores_by_criterion[round] = {}

questions_used_in_round = rubric[assignment.varying_rubrics_by_round? ? round : 0]
# get answers of each question in the rubric
questions_used_in_round.each do |question|
next if question.type.eql?("SectionHeader")
answers_questions = Answer.answers_by_question(assignment.id, question.id)

max_score = get_max_score_for_question(question)
# process each question in a seperate thread
threads << Thread.new do
comments = break_up_comments_to_sentences(answers_questions)
# store each avg in a hashmap and use the question as the key
self.avg_scores_by_criterion[round][question.txt] = calculate_avg_score_by_criterion(answers_questions, max_score)
self.summary[round][question.txt] = summarize_sentences(comments, summary_ws_url) unless comments.empty?
end
# Wait for all threads to end
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end
self.avg_scores_by_round[round] = calculate_avg_score_by_round(avg_scores_by_criterion[round], questions_used_in_round)
end
self
end
</pre>

:'''After:'''
<pre>
# produce summaries for instructor. it merges all feedback given to all reviewees, and summarize them by criterion
def summarize_reviews_by_criterion(assignment, summary_ws_url)
self.summary = self.avg_scores_by_criterion = self.avg_scores_by_round = Array.new(assignment.rounds_of_reviews)
rubric = get_questions_by_assignment(assignment)

# get question in each round and summarize them all
(0..assignment.rounds_of_reviews - 1).each do |round|
questions_used_in_round = rubric[assignment.varying_rubrics_by_round? ? round : 0]
questions_used_in_round.each do |question|
next if question.type.eql?("SectionHeader")
summarize_reviews_by_criterion_question(assignment, summary_ws_url, round, question)
end
self.avg_scores_by_round[round] = calculate_avg_score_by_round(avg_scores_by_criterion[round], questions_used_in_round)
end
self
end

# get summary of answers of each question in the rubric
def summarize_reviews_by_criterion_question(assignment, summary_ws_url, round, question)
threads = []
answers_questions = Answer.answers_by_question(assignment.id, question.id)

threads << Thread.new do
self.avg_scores_by_criterion[round][question.txt] = calculate_avg_score_by_criterion(answers_questions, get_max_score_for_question(question))
self.summary[round][question.txt] = summarize_sentences(break_up_comments_to_sentences(answers_questions), summary_ws_url)
end
# Wait for all threads to end
end_threads(threads)
end

# Wait for threads to end
def end_threads(threads)
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end
</pre>

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_criterion is reduced from 42.34 to 17.2
:* Cognitive complexity is reduced from 16 to 7

==='''Refactor - summarize_reviews_by_reviewees'''===
:This method is used to produce summaries for instructor and students. It sums up the feedback by criterion for each reviewer

:'''Changes Made:'''

:This method was refactored into 4 smaller methods namely ''summarize_reviews_by_reviewees'', ''summarize_reviews_by_teams'', ''summarize_by_rounds'' and ''end_threads''.

:The method ''summarize_reviews_by_reviewees'' calls ''summarize_reviews_by_teams'' which inturn calls ''summarize_by_rounds'' to get answers of each reviewer by rubric.

:The method ''summarize_by_rounds'' starts many threads to create requests to summarize the comments and closes the threads by calling the function ''end_threads''.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
# @summary[reviewee][round][question]
# @reviewers[team][reviewer]
# @avg_scores_by_reviewee[team]
# @avg_score_round[reviewee][round]
# @avg_scores_by_criterion[reviewee][round][criterion]
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
threads = []

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = []
self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}

# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")
summary[reviewee.name][round][q.txt] = ""
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = 0.0

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)
# get max score of this rubric
q_max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)
# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, q_max_score)

# summarize the comments by calling the summarization Web Service

# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
summary[reviewee.name][round][q.txt] = summarize_sentences(comments, summary_ws_url) unless comments.empty?
end
end
self.avg_scores_by_round[reviewee.name][round] = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
end
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

# Wait for all threads to end
threads.each do |t|
t.join if t != Thread.current
end

self
end

</pre>
:'''After:'''
<pre>
# produce summaries for instructor and students. It sum up the feedback by criterion for each reviewee
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
self.summary_ws_url = summary_ws_url

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

self
end

# get answers and average scores for each team
def summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers and average scores of each round by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}
summarize_by_reviewee_round(assignment, reviewee, round, rubric)
end
end

# get answers and averge score for each question in a round
def summarize_by_reviewee_round(assignment, reviewee, round, rubric)
threads = []
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)

# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(q))

threads << Thread.new do
self.summary[reviewee.name][round][q.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
end
avg_scores_by_round = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
self.avg_scores_by_round[reviewee.name][round] = avg_scores_by_round
# Wait for all threads to end
end_threads(threads)
end

</pre>
:'''Impact:'''

:* Assignment Branch Condition size for summarize_reviews_by_reviewees is reduced from 89.93 to 16.64
:* Cognitive Complexity is reduced from 17 to 7

==='''Refactor - summarize_sentence'''===
:This method calls web service to store each summary in a hashmap and use the question as the key.

:'''Changes Made:'''

:Removed variable ''summary''

:[[File:e2008_8.jpg]]

==='''Refactor - break_up_comments_to_sentences'''===
: This method adds the comment to an array to be converted as a json request.

:'''Changes Made:'''

:The method is broken down into 2 smaller methods namely ''break_up_comments_to_sentences'' and ''get_sentences'' where ''get_sentences'' is called by ''break_up_comments_to_sentences'' to get sentences in desired format.

:[[File:e2008_9.jpg]]

:'''Impact''':
:*The Cognitive complexity of break_up_comments_to_sentences reduced from 6 to <5

==='''Refactor - get_questions_by_assignment'''===
:This method returns the rubric for given assignment

:'''Changes Made:'''
:*In IF CONDITION: Removed unnecessary use of variable which was being used only once (questionaire_id) and replaced the variable with its assignment (assignment.review_questionnaire_id(round + 1)
:*In ELSE CONDITION: Removed unnecessary ternary operation for variable ''questionaire_id'' and replaced the variable with its assignment (assignment.review_questionnaire_id)

:[[File:e2008_10.jpg]]

==='''Refactor - calculate_avg_score_by_round'''===
:This method is used to calculate average round score for each question.

:'''Changes Made:'''

:Refactored the method into 2 smaller methods namely ''calculate_avg_score_by_round'' and ''calculate_round_score'' where ''calculate_avg_score_by_round'' calls ''calculate_round_score'' to calculate average round score and ''calculate_avg_score_by_round'' rounds the round_score upto 2 decimal places.

:'''Before:'''
<pre>
def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = 0.0
sum_weight = 0

criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0

round_score.round(2)
end
</pre>

:'''After:'''
<pre>
def calculate_round_score(avg_scores_by_criterion, criteria)
round_score = sum_weight = 0.0
criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0
round_score
end

def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = calculate_round_score(avg_scores_by_criterion, criteria)
round_score.round(2)
end
</pre>

:'''Impact:'''
:*Assignment Branch Condition size for calculate_avg_score_by_round is reduced from 18.57 to <15.

==='''Coverage'''===
Coverage increased (+17.1%) to 41.407%

==='''Pull request'''===
https://github.com/expertiza/expertiza/pull/1685

=='''Test Plan'''==
==='''Manual Testing'''===
:'''Login Details:''' '''USERNAME:''' instructor6 '''PASSWORD:''' password
:Click '''Assignment''' >> Click the '''View Submissions''' of '''Madeup problem''' >> Click on any student >> Click on '''Madeup problem''' >> Click on '''Your Scores'''
:[[File:expertiza2008-1.png]]
:[[File:expertiza2008-2.png]]
:[[File:expertiza2008-3.png]]
:[[File:expertiza2008-4.png]]
:The 3 main functions of the Summary helper are summarize review by reviewees, summarize review by reviewee and summarize reviews by criterion.
:To check ''summarize reviews by reviewees'' is working we should get the output similar to the one shown below. This function summarizes all the reviews and displays average score.
:[[File:expertiza2008-5.png]]

:To check ''summarize reviews by reviewee'' is working, click on any review.
:[[File:expertiza2008-6a.png]]
:A new webpage pops up with all the reviews and scores given by an individual.
:[[File:expertiza2008-6b.png]]

: To check ''summarize reviews by criterion'' is working, click on any criterion. This should display summarized reviews and scores for a particular question in the questionnaire.
:[[File:expertiza2008-7.png]]

=='''Future improvement'''==
* Modularize ''summarize_by_rounds'' to even smaller modules so that Assignment Branch Condition size is reduced from 36.73 to 15.00.
* Create more test cases for the new modularized methods.

=='''Contributors'''==
* [mailto:jviswan@ncsu.edu Jayalakshmi Viswanathan]
* [mailto:skundal@ncsu.edu Sandeep Kundala]
* [mailto:spal3@ncsu.edu Sumitosh Pal]

CSC/ECE 517 Spring 2020 - Project E2008. Refactor summary helper.rb

2020-03-31T20:02:41Z

Jviswan: /* Refactor - summarize_reviews_by_criterion */

=='''About Expertiza'''==
[http://expertiza.ncsu.edu/ Expertiza] is a web application developed using Ruby on Rails Framework whose creation and maintenance are taken care of by students as well as the faculty of NCSU. Its code is available on Github [https://github.com/expertiza/expertiza Expertiza on GitHub]. Expertiza allows the instructor to create and edit new as well as existing assignments. This also includes creating a wide range of topics under each assignment that students can sign up for. They can also publish surveys and reviews, view statistical results, set deadlines for assignments and make announcements. It provides a platform for students to signup for topics, form teams, view and submit assignments and give peer reviews and feedback.

=='''Problem Statement'''==
'''Background:''' In Expertiza students can review each other’s projects and even each other as teammates. Students can view their project scores and instructors can view student's teammate review scores on the view scores page. This Summary helper aids in calculating these scores and rendering the results on the view scores section of an assignment. Summary helper is a helper module that consists of methods used to calculate scores for these reviews. This is for the use of instructors.

'''Requirement:'''
E2008 is an Expertiza OSS project which deals basically with refactoring app/helpers/summary_helper.rb to reduce the code climate issues such as

* [http://wiki.c2.com/?AbcMetric Assignment Branch Condition]
* [https://en.wikipedia.org/wiki/Cognitive_complexity Cognitive Complexity]
* Method/line too long
* Unused variables / access modifiers

'''A good method should have:'''
* Assignment Branch Condition size <= 15
* Cognitive Complexity <= 6
* No. of lines in a method <= 25

=='''Issues found'''==
The following are issues which were found in the code:

==='''Assignment Branch Condition'''===
{| class="wikitable"
|-
! Method
! ABC Size
|-
| summarize_reviews_by_reviewee
| 44.61
|-
| summarize_reviews_by_criterion
| 42.34
|-
| summarize_reviews_by_reviewees
| 89.93
|-
| get_questions_by_assignment
| 16.43
|-
| calculate_avg_score_by_round
| 18.57
|}

==='''Cognitive Complexity'''===
{| class="wikitable"
|-
! Method
! Cognitive Complexity
|-
| summarize_reviews_by_criterion
| 16
|-
| summarize_reviews_by_reviewees
| 17
|-
| get_questions_by_assignment
| 11
|-
| break_up_comments_to_sentences
| 6
|}

==='''Method/line too long'''===
{| class="wikitable"
|-
! Method/Line too long
! Comments
|-
|'''Method:''' summarize_reviews_by_reviewees
|'''Lines of Code:'''39
|-
|'''Method:''' summarize_reviews_by_criterion
|'''Lines of Code:'''27
|-
|'''Line:''' 145
|self.avg_scores_by_round[reviewee.name][round] too long (162/160)
|}

==='''Unused variables / access modifiers'''===
{| class="wikitable"
|-
! Vaiable/Access Modifier
! Comments
|-
|'''Variable:''' summary
|'''Method:''' summarize_sentences
|-
|'''Variable:''' included_question_counter
|'''Method:''' summarize_reviews_by_reviewee
|-
|'''Access Modifier:''' module_function
|'''Class:''' Summary
|}

=='''Solution Implemented'''==
==='''Refactor - summarize_reviews_by_reviewee'''===
:This method is used to summarize reviews by a reviewer for each question.

:'''Changes Made:'''
:This method could be refactored into smaller methods namely ''summarize_reviews_by_reviewee'' and ''summarize_reviews_by_reviewee_assign'' where ''summarize_reviews_by_reviewee'' calls ''summarize_reviews_by_reviewee_assign'' to get average scores and summary for each question.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewee(questions, assignment, r_id, summary_ws_url)
self.summary = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})

# get all answers for each question and send them to summarization WS
questions.keys.each do |round|
self.summary[round.to_s] = {}
self.avg_scores_by_criterion[round.to_s] = {}
self.avg_scores_by_round[round.to_s] = 0.0
included_question_counter = 0

questions[round].each do |q|
next if q.type.eql?("SectionHeader")

self.summary[round.to_s][q.txt] = ""
self.avg_scores_by_criterion[round.to_s][q.txt] = 0.0

question_answers = Answer.answers_by_question_for_reviewee(assignment.id, r_id, q.id)

max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)

# get the avg scores for this question
self.avg_scores_by_criterion[round.to_s][q.txt] = calculate_avg_score_by_criterion(question_answers, max_score)
# get the summary of answers to this question
self.summary[round.to_s][q.txt] = summarize_sentences(comments, summary_ws_url)
end
self.avg_scores_by_round[round.to_s] = calculate_avg_score_by_round(self.avg_scores_by_criterion[round.to_s], questions[round])
end
self
end
</pre>

:'''After:'''
<pre>
# produce average score and summary of comments for reviews by a reviewer for each question
def summarize_reviews_by_reviewee(questions, assignment, reviewee_id, summary_ws_url)
self.summary = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.summary_ws_url = summary_ws_url

# get all answers for each question and send them to summarization WS
questions.each_key do |round|
self.summary[round.to_s] = {}
self.avg_scores_by_criterion[round.to_s] = {}
self.avg_scores_by_round[round.to_s] = 0.0
questions[round].each do |question|
next if question.type.eql?("SectionHeader")
summarize_reviews_by_reviewee_question(assignment, reviewee_id, question, round)
end
self.avg_scores_by_round[round.to_s] = calculate_avg_score_by_round(self.avg_scores_by_criterion[round.to_s], questions[round])
end
self
end

# get average scores and summary for each question in a review by a reviewer
def summarize_reviews_by_reviewee_question(assignment, reviewee_id, question, round)
question_answers = Answer.answers_by_question_for_reviewee(assignment.id, reviewee_id, question.id)

self.avg_scores_by_criterion[round.to_s][question.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(question))

self.summary[round.to_s][question.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
</pre>

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_reviewee is reduced from 44.61 to 20.64.

==='''Refactor - summarize_reviews_by_criterion'''===
:This method is used to summarize the review for each questions

:'''Changes Made:'''

:This method was refactored into 3 smaller methods namely ''summarize_reviews_by_criterion'', ''summarize_reviews_by_criterion_questions'' and ''end_threads''.

:The method ''summarize_reviews_by_criterion'' calls ''summarize_reviews_by_criterion_questions'' to get answers of each question in the rubric.

:The method ''summarize_reviews_by_criterion_questions'' starts many threads to process each question and closes it by calling the function ''end_threads''.

:'''Before:'''
<pre>
# produce summaries for instructor. it merges all feedback given to all reviewees, and summarize them by criterion
def summarize_reviews_by_criterion(assignment, summary_ws_url)
# @summary[reviewee][round][question]
# @avg_score_round[reviewee][round]
# @avg_scores_by_criterion[reviewee][round][criterion]
nround = assignment.rounds_of_reviews
self.summary = Array.new(nround)
self.avg_scores_by_criterion = Array.new(nround)
self.avg_scores_by_round = Array.new(nround)
threads = []
rubric = get_questions_by_assignment(assignment)

(0..nround - 1).each do |round|
self.avg_scores_by_round[round] = 0.0
self.summary[round] = {}
self.avg_scores_by_criterion[round] = {}

questions_used_in_round = rubric[assignment.varying_rubrics_by_round? ? round : 0]
# get answers of each question in the rubric
questions_used_in_round.each do |question|
next if question.type.eql?("SectionHeader")
answers_questions = Answer.answers_by_question(assignment.id, question.id)

max_score = get_max_score_for_question(question)
# process each question in a seperate thread
threads << Thread.new do
comments = break_up_comments_to_sentences(answers_questions)
# store each avg in a hashmap and use the question as the key
self.avg_scores_by_criterion[round][question.txt] = calculate_avg_score_by_criterion(answers_questions, max_score)
self.summary[round][question.txt] = summarize_sentences(comments, summary_ws_url) unless comments.empty?
end
# Wait for all threads to end
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end
self.avg_scores_by_round[round] = calculate_avg_score_by_round(avg_scores_by_criterion[round], questions_used_in_round)
end
self
end
</pre>

:'''After:'''
<pre>
# produce summaries for instructor. it merges all feedback given to all reviewees, and summarize them by criterion
def summarize_reviews_by_criterion(assignment, summary_ws_url)
self.summary = self.avg_scores_by_criterion = self.avg_scores_by_round = Array.new(assignment.rounds_of_reviews)
rubric = get_questions_by_assignment(assignment)

# get question in each round and summarize them all
(0..assignment.rounds_of_reviews - 1).each do |round|
questions_used_in_round = rubric[assignment.varying_rubrics_by_round? ? round : 0]
questions_used_in_round.each do |question|
next if question.type.eql?("SectionHeader")
summarize_reviews_by_criterion_question(assignment, summary_ws_url, round, question)
end
self.avg_scores_by_round[round] = calculate_avg_score_by_round(avg_scores_by_criterion[round], questions_used_in_round)
end
self
end

# get summary of answers of each question in the rubric
def summarize_reviews_by_criterion_question(assignment, summary_ws_url, round, question)
threads = []
answers_questions = Answer.answers_by_question(assignment.id, question.id)

threads << Thread.new do
self.avg_scores_by_criterion[round][question.txt] = calculate_avg_score_by_criterion(answers_questions, get_max_score_for_question(question))
self.summary[round][question.txt] = summarize_sentences(break_up_comments_to_sentences(answers_questions), summary_ws_url)
end
# Wait for all threads to end
end_threads(threads)
end

# Wait for threads to end
def end_threads(threads)
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end
</pre>

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_criterion is reduced from 42.34 to 17.2
:* Cognitive complexity is reduced from 16 to 7

==='''Refactor - summarize_reviews_by_reviewees'''===
:This method is used to produce summaries for instructor and students. It sums up the feedback by criterion for each reviewer

:'''Changes Made:'''

:This method was refactored into 4 smaller methods namely ''summarize_reviews_by_reviewees'', ''summarize_reviews_by_teams'', ''summarize_by_rounds'' and ''end_threads''.

:The method ''summarize_reviews_by_reviewees'' calls ''summarize_reviews_by_teams'' which inturn calls ''summarize_by_rounds'' to get answers of each reviewer by rubric.

:The method ''summarize_by_rounds'' starts many threads to create requests to summarize the comments and closes the threads by calling the function ''end_threads''.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
# @summary[reviewee][round][question]
# @reviewers[team][reviewer]
# @avg_scores_by_reviewee[team]
# @avg_score_round[reviewee][round]
# @avg_scores_by_criterion[reviewee][round][criterion]
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
threads = []

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = []
self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}

# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")
summary[reviewee.name][round][q.txt] = ""
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = 0.0

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)
# get max score of this rubric
q_max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)
# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, q_max_score)

# summarize the comments by calling the summarization Web Service

# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
summary[reviewee.name][round][q.txt] = summarize_sentences(comments, summary_ws_url) unless comments.empty?
end
end
self.avg_scores_by_round[reviewee.name][round] = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
end
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

# Wait for all threads to end
threads.each do |t|
t.join if t != Thread.current
end

self
end

</pre>
:'''After:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
self.summary_ws_url = summary_ws_url

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

self
end

def summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}
summarize_by_reviewee_round(assignment, reviewee, round, rubric)
end
end

def summarize_by_reviewee_round(assignment, reviewee, round, rubric)
threads = []
# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)

# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(q))

# summarize the comments by calling the summarization Web Service
# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
self.summary[reviewee.name][round][q.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
end
avg_scores_by_round = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
self.avg_scores_by_round[reviewee.name][round] = avg_scores_by_round
# Wait for all threads to end
end_threads(threads)
end

def end_threads(threads)
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end

</pre>
:'''Impact:'''

:* Assignment Branch Condition size for summarize_reviews_by_reviewees is reduced from 89.93 to 16.64
:* Cognitive Complexity is reduced from 17 to 7

==='''Refactor - summarize_sentence'''===
:This method calls web service to store each summary in a hashmap and use the question as the key.

:'''Changes Made:'''

:Removed variable ''summary''

:[[File:e2008_8.jpg]]

==='''Refactor - break_up_comments_to_sentences'''===
: This method adds the comment to an array to be converted as a json request.

:'''Changes Made:'''

:The method is broken down into 2 smaller methods namely ''break_up_comments_to_sentences'' and ''get_sentences'' where ''get_sentences'' is called by ''break_up_comments_to_sentences'' to get sentences in desired format.

:[[File:e2008_9.jpg]]

:'''Impact''':
:*The Cognitive complexity of break_up_comments_to_sentences reduced from 6 to <5

==='''Refactor - get_questions_by_assignment'''===
:This method returns the rubric for given assignment

:'''Changes Made:'''
:*In IF CONDITION: Removed unnecessary use of variable which was being used only once (questionaire_id) and replaced the variable with its assignment (assignment.review_questionnaire_id(round + 1)
:*In ELSE CONDITION: Removed unnecessary ternary operation for variable ''questionaire_id'' and replaced the variable with its assignment (assignment.review_questionnaire_id)

:[[File:e2008_10.jpg]]

==='''Refactor - calculate_avg_score_by_round'''===
:This method is used to calculate average round score for each question.

:'''Changes Made:'''

:Refactored the method into 2 smaller methods namely ''calculate_avg_score_by_round'' and ''calculate_round_score'' where ''calculate_avg_score_by_round'' calls ''calculate_round_score'' to calculate average round score and ''calculate_avg_score_by_round'' rounds the round_score upto 2 decimal places.

:'''Before:'''
<pre>
def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = 0.0
sum_weight = 0

criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0

round_score.round(2)
end
</pre>

:'''After:'''
<pre>
def calculate_round_score(avg_scores_by_criterion, criteria)
round_score = sum_weight = 0.0
criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0
round_score
end

def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = calculate_round_score(avg_scores_by_criterion, criteria)
round_score.round(2)
end
</pre>

:'''Impact:'''
:*Assignment Branch Condition size for calculate_avg_score_by_round is reduced from 18.57 to <15.

==='''Coverage'''===
Coverage increased (+17.1%) to 41.407%

==='''Pull request'''===
https://github.com/expertiza/expertiza/pull/1685

=='''Test Plan'''==
==='''Manual Testing'''===
:'''Login Details:''' '''USERNAME:''' instructor6 '''PASSWORD:''' password
:Click '''Assignment''' >> Click the '''View Submissions''' of '''Madeup problem''' >> Click on any student >> Click on '''Madeup problem''' >> Click on '''Your Scores'''
:[[File:expertiza2008-1.png]]
:[[File:expertiza2008-2.png]]
:[[File:expertiza2008-3.png]]
:[[File:expertiza2008-4.png]]
:The 3 main functions of the Summary helper are summarize review by reviewees, summarize review by reviewee and summarize reviews by criterion.
:To check ''summarize reviews by reviewees'' is working we should get the output similar to the one shown below. This function summarizes all the reviews and displays average score.
:[[File:expertiza2008-5.png]]

:To check ''summarize reviews by reviewee'' is working, click on any review.
:[[File:expertiza2008-6a.png]]
:A new webpage pops up with all the reviews and scores given by an individual.
:[[File:expertiza2008-6b.png]]

: To check ''summarize reviews by criterion'' is working, click on any criterion. This should display summarized reviews and scores for a particular question in the questionnaire.
:[[File:expertiza2008-7.png]]

=='''Future improvement'''==
* Modularize ''summarize_by_rounds'' to even smaller modules so that Assignment Branch Condition size is reduced from 36.73 to 15.00.
* Create more test cases for the new modularized methods.

=='''Contributors'''==
* [mailto:jviswan@ncsu.edu Jayalakshmi Viswanathan]
* [mailto:skundal@ncsu.edu Sandeep Kundala]
* [mailto:spal3@ncsu.edu Sumitosh Pal]

CSC/ECE 517 Spring 2020 - Project E2008. Refactor summary helper.rb

2020-03-31T19:59:06Z

Jviswan: /* Refactor - summarize_reviews_by_reviewee */

=='''About Expertiza'''==
[http://expertiza.ncsu.edu/ Expertiza] is a web application developed using Ruby on Rails Framework whose creation and maintenance are taken care of by students as well as the faculty of NCSU. Its code is available on Github [https://github.com/expertiza/expertiza Expertiza on GitHub]. Expertiza allows the instructor to create and edit new as well as existing assignments. This also includes creating a wide range of topics under each assignment that students can sign up for. They can also publish surveys and reviews, view statistical results, set deadlines for assignments and make announcements. It provides a platform for students to signup for topics, form teams, view and submit assignments and give peer reviews and feedback.

=='''Problem Statement'''==
'''Background:''' In Expertiza students can review each other’s projects and even each other as teammates. Students can view their project scores and instructors can view student's teammate review scores on the view scores page. This Summary helper aids in calculating these scores and rendering the results on the view scores section of an assignment. Summary helper is a helper module that consists of methods used to calculate scores for these reviews. This is for the use of instructors.

'''Requirement:'''
E2008 is an Expertiza OSS project which deals basically with refactoring app/helpers/summary_helper.rb to reduce the code climate issues such as

* [http://wiki.c2.com/?AbcMetric Assignment Branch Condition]
* [https://en.wikipedia.org/wiki/Cognitive_complexity Cognitive Complexity]
* Method/line too long
* Unused variables / access modifiers

'''A good method should have:'''
* Assignment Branch Condition size <= 15
* Cognitive Complexity <= 6
* No. of lines in a method <= 25

=='''Issues found'''==
The following are issues which were found in the code:

==='''Assignment Branch Condition'''===
{| class="wikitable"
|-
! Method
! ABC Size
|-
| summarize_reviews_by_reviewee
| 44.61
|-
| summarize_reviews_by_criterion
| 42.34
|-
| summarize_reviews_by_reviewees
| 89.93
|-
| get_questions_by_assignment
| 16.43
|-
| calculate_avg_score_by_round
| 18.57
|}

==='''Cognitive Complexity'''===
{| class="wikitable"
|-
! Method
! Cognitive Complexity
|-
| summarize_reviews_by_criterion
| 16
|-
| summarize_reviews_by_reviewees
| 17
|-
| get_questions_by_assignment
| 11
|-
| break_up_comments_to_sentences
| 6
|}

==='''Method/line too long'''===
{| class="wikitable"
|-
! Method/Line too long
! Comments
|-
|'''Method:''' summarize_reviews_by_reviewees
|'''Lines of Code:'''39
|-
|'''Method:''' summarize_reviews_by_criterion
|'''Lines of Code:'''27
|-
|'''Line:''' 145
|self.avg_scores_by_round[reviewee.name][round] too long (162/160)
|}

==='''Unused variables / access modifiers'''===
{| class="wikitable"
|-
! Vaiable/Access Modifier
! Comments
|-
|'''Variable:''' summary
|'''Method:''' summarize_sentences
|-
|'''Variable:''' included_question_counter
|'''Method:''' summarize_reviews_by_reviewee
|-
|'''Access Modifier:''' module_function
|'''Class:''' Summary
|}

=='''Solution Implemented'''==
==='''Refactor - summarize_reviews_by_reviewee'''===
:This method is used to summarize reviews by a reviewer for each question.

:'''Changes Made:'''
:This method could be refactored into smaller methods namely ''summarize_reviews_by_reviewee'' and ''summarize_reviews_by_reviewee_assign'' where ''summarize_reviews_by_reviewee'' calls ''summarize_reviews_by_reviewee_assign'' to get average scores and summary for each question.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewee(questions, assignment, r_id, summary_ws_url)
self.summary = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})

# get all answers for each question and send them to summarization WS
questions.keys.each do |round|
self.summary[round.to_s] = {}
self.avg_scores_by_criterion[round.to_s] = {}
self.avg_scores_by_round[round.to_s] = 0.0
included_question_counter = 0

questions[round].each do |q|
next if q.type.eql?("SectionHeader")

self.summary[round.to_s][q.txt] = ""
self.avg_scores_by_criterion[round.to_s][q.txt] = 0.0

question_answers = Answer.answers_by_question_for_reviewee(assignment.id, r_id, q.id)

max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)

# get the avg scores for this question
self.avg_scores_by_criterion[round.to_s][q.txt] = calculate_avg_score_by_criterion(question_answers, max_score)
# get the summary of answers to this question
self.summary[round.to_s][q.txt] = summarize_sentences(comments, summary_ws_url)
end
self.avg_scores_by_round[round.to_s] = calculate_avg_score_by_round(self.avg_scores_by_criterion[round.to_s], questions[round])
end
self
end
</pre>

:'''After:'''
<pre>
# produce average score and summary of comments for reviews by a reviewer for each question
def summarize_reviews_by_reviewee(questions, assignment, reviewee_id, summary_ws_url)
self.summary = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.summary_ws_url = summary_ws_url

# get all answers for each question and send them to summarization WS
questions.each_key do |round|
self.summary[round.to_s] = {}
self.avg_scores_by_criterion[round.to_s] = {}
self.avg_scores_by_round[round.to_s] = 0.0
questions[round].each do |question|
next if question.type.eql?("SectionHeader")
summarize_reviews_by_reviewee_question(assignment, reviewee_id, question, round)
end
self.avg_scores_by_round[round.to_s] = calculate_avg_score_by_round(self.avg_scores_by_criterion[round.to_s], questions[round])
end
self
end

# get average scores and summary for each question in a review by a reviewer
def summarize_reviews_by_reviewee_question(assignment, reviewee_id, question, round)
question_answers = Answer.answers_by_question_for_reviewee(assignment.id, reviewee_id, question.id)

self.avg_scores_by_criterion[round.to_s][question.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(question))

self.summary[round.to_s][question.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
</pre>

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_reviewee is reduced from 44.61 to 20.64.

==='''Refactor - summarize_reviews_by_criterion'''===
:This method is used to summarize the review for each questions

:'''Changes Made:'''

:This method was refactored into 3 smaller methods namely ''summarize_reviews_by_criterion'', ''summarize_reviews_by_criterion_questions'' and ''end_threads''.

:The method ''summarize_reviews_by_criterion'' calls ''summarize_reviews_by_criterion_questions'' to get answers of each question in the rubric.

:The method ''summarize_reviews_by_criterion_questions'' starts many threads to process each question and closes it by calling the function ''end_threads''.

:[[File:e2008_3.jpg]]
:[[File:e2008_4.jpg]]

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_criterion is reduced from 42.34 to 17.2
:* Cognitive complexity is reduced from 16 to 7

==='''Refactor - summarize_reviews_by_reviewees'''===
:This method is used to produce summaries for instructor and students. It sums up the feedback by criterion for each reviewer

:'''Changes Made:'''

:This method was refactored into 4 smaller methods namely ''summarize_reviews_by_reviewees'', ''summarize_reviews_by_teams'', ''summarize_by_rounds'' and ''end_threads''.

:The method ''summarize_reviews_by_reviewees'' calls ''summarize_reviews_by_teams'' which inturn calls ''summarize_by_rounds'' to get answers of each reviewer by rubric.

:The method ''summarize_by_rounds'' starts many threads to create requests to summarize the comments and closes the threads by calling the function ''end_threads''.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
# @summary[reviewee][round][question]
# @reviewers[team][reviewer]
# @avg_scores_by_reviewee[team]
# @avg_score_round[reviewee][round]
# @avg_scores_by_criterion[reviewee][round][criterion]
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
threads = []

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = []
self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}

# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")
summary[reviewee.name][round][q.txt] = ""
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = 0.0

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)
# get max score of this rubric
q_max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)
# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, q_max_score)

# summarize the comments by calling the summarization Web Service

# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
summary[reviewee.name][round][q.txt] = summarize_sentences(comments, summary_ws_url) unless comments.empty?
end
end
self.avg_scores_by_round[reviewee.name][round] = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
end
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

# Wait for all threads to end
threads.each do |t|
t.join if t != Thread.current
end

self
end

</pre>
:'''After:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
self.summary_ws_url = summary_ws_url

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

self
end

def summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}
summarize_by_reviewee_round(assignment, reviewee, round, rubric)
end
end

def summarize_by_reviewee_round(assignment, reviewee, round, rubric)
threads = []
# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)

# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(q))

# summarize the comments by calling the summarization Web Service
# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
self.summary[reviewee.name][round][q.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
end
avg_scores_by_round = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
self.avg_scores_by_round[reviewee.name][round] = avg_scores_by_round
# Wait for all threads to end
end_threads(threads)
end

def end_threads(threads)
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end

</pre>
:'''Impact:'''

:* Assignment Branch Condition size for summarize_reviews_by_reviewees is reduced from 89.93 to 16.64
:* Cognitive Complexity is reduced from 17 to 7

==='''Refactor - summarize_sentence'''===
:This method calls web service to store each summary in a hashmap and use the question as the key.

:'''Changes Made:'''

:Removed variable ''summary''

:[[File:e2008_8.jpg]]

==='''Refactor - break_up_comments_to_sentences'''===
: This method adds the comment to an array to be converted as a json request.

:'''Changes Made:'''

:The method is broken down into 2 smaller methods namely ''break_up_comments_to_sentences'' and ''get_sentences'' where ''get_sentences'' is called by ''break_up_comments_to_sentences'' to get sentences in desired format.

:[[File:e2008_9.jpg]]

:'''Impact''':
:*The Cognitive complexity of break_up_comments_to_sentences reduced from 6 to <5

==='''Refactor - get_questions_by_assignment'''===
:This method returns the rubric for given assignment

:'''Changes Made:'''
:*In IF CONDITION: Removed unnecessary use of variable which was being used only once (questionaire_id) and replaced the variable with its assignment (assignment.review_questionnaire_id(round + 1)
:*In ELSE CONDITION: Removed unnecessary ternary operation for variable ''questionaire_id'' and replaced the variable with its assignment (assignment.review_questionnaire_id)

:[[File:e2008_10.jpg]]

==='''Refactor - calculate_avg_score_by_round'''===
:This method is used to calculate average round score for each question.

:'''Changes Made:'''

:Refactored the method into 2 smaller methods namely ''calculate_avg_score_by_round'' and ''calculate_round_score'' where ''calculate_avg_score_by_round'' calls ''calculate_round_score'' to calculate average round score and ''calculate_avg_score_by_round'' rounds the round_score upto 2 decimal places.

:'''Before:'''
<pre>
def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = 0.0
sum_weight = 0

criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0

round_score.round(2)
end
</pre>

:'''After:'''
<pre>
def calculate_round_score(avg_scores_by_criterion, criteria)
round_score = sum_weight = 0.0
criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0
round_score
end

def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = calculate_round_score(avg_scores_by_criterion, criteria)
round_score.round(2)
end
</pre>

:'''Impact:'''
:*Assignment Branch Condition size for calculate_avg_score_by_round is reduced from 18.57 to <15.

==='''Coverage'''===
Coverage increased (+17.1%) to 41.407%

==='''Pull request'''===
https://github.com/expertiza/expertiza/pull/1685

=='''Test Plan'''==
==='''Manual Testing'''===
:'''Login Details:''' '''USERNAME:''' instructor6 '''PASSWORD:''' password
:Click '''Assignment''' >> Click the '''View Submissions''' of '''Madeup problem''' >> Click on any student >> Click on '''Madeup problem''' >> Click on '''Your Scores'''
:[[File:expertiza2008-1.png]]
:[[File:expertiza2008-2.png]]
:[[File:expertiza2008-3.png]]
:[[File:expertiza2008-4.png]]
:The 3 main functions of the Summary helper are summarize review by reviewees, summarize review by reviewee and summarize reviews by criterion.
:To check ''summarize reviews by reviewees'' is working we should get the output similar to the one shown below. This function summarizes all the reviews and displays average score.
:[[File:expertiza2008-5.png]]

:To check ''summarize reviews by reviewee'' is working, click on any review.
:[[File:expertiza2008-6a.png]]
:A new webpage pops up with all the reviews and scores given by an individual.
:[[File:expertiza2008-6b.png]]

: To check ''summarize reviews by criterion'' is working, click on any criterion. This should display summarized reviews and scores for a particular question in the questionnaire.
:[[File:expertiza2008-7.png]]

=='''Future improvement'''==
* Modularize ''summarize_by_rounds'' to even smaller modules so that Assignment Branch Condition size is reduced from 36.73 to 15.00.
* Create more test cases for the new modularized methods.

=='''Contributors'''==
* [mailto:jviswan@ncsu.edu Jayalakshmi Viswanathan]
* [mailto:skundal@ncsu.edu Sandeep Kundala]
* [mailto:spal3@ncsu.edu Sumitosh Pal]

CSC/ECE 517 Spring 2020 - Project E2008. Refactor summary helper.rb

2020-03-31T19:57:43Z

Jviswan: /* Refactor - summarize_reviews_by_reviewee */

=='''About Expertiza'''==
[http://expertiza.ncsu.edu/ Expertiza] is a web application developed using Ruby on Rails Framework whose creation and maintenance are taken care of by students as well as the faculty of NCSU. Its code is available on Github [https://github.com/expertiza/expertiza Expertiza on GitHub]. Expertiza allows the instructor to create and edit new as well as existing assignments. This also includes creating a wide range of topics under each assignment that students can sign up for. They can also publish surveys and reviews, view statistical results, set deadlines for assignments and make announcements. It provides a platform for students to signup for topics, form teams, view and submit assignments and give peer reviews and feedback.

=='''Problem Statement'''==
'''Background:''' In Expertiza students can review each other’s projects and even each other as teammates. Students can view their project scores and instructors can view student's teammate review scores on the view scores page. This Summary helper aids in calculating these scores and rendering the results on the view scores section of an assignment. Summary helper is a helper module that consists of methods used to calculate scores for these reviews. This is for the use of instructors.

'''Requirement:'''
E2008 is an Expertiza OSS project which deals basically with refactoring app/helpers/summary_helper.rb to reduce the code climate issues such as

* [http://wiki.c2.com/?AbcMetric Assignment Branch Condition]
* [https://en.wikipedia.org/wiki/Cognitive_complexity Cognitive Complexity]
* Method/line too long
* Unused variables / access modifiers

'''A good method should have:'''
* Assignment Branch Condition size <= 15
* Cognitive Complexity <= 6
* No. of lines in a method <= 25

=='''Issues found'''==
The following are issues which were found in the code:

==='''Assignment Branch Condition'''===
{| class="wikitable"
|-
! Method
! ABC Size
|-
| summarize_reviews_by_reviewee
| 44.61
|-
| summarize_reviews_by_criterion
| 42.34
|-
| summarize_reviews_by_reviewees
| 89.93
|-
| get_questions_by_assignment
| 16.43
|-
| calculate_avg_score_by_round
| 18.57
|}

==='''Cognitive Complexity'''===
{| class="wikitable"
|-
! Method
! Cognitive Complexity
|-
| summarize_reviews_by_criterion
| 16
|-
| summarize_reviews_by_reviewees
| 17
|-
| get_questions_by_assignment
| 11
|-
| break_up_comments_to_sentences
| 6
|}

==='''Method/line too long'''===
{| class="wikitable"
|-
! Method/Line too long
! Comments
|-
|'''Method:''' summarize_reviews_by_reviewees
|'''Lines of Code:'''39
|-
|'''Method:''' summarize_reviews_by_criterion
|'''Lines of Code:'''27
|-
|'''Line:''' 145
|self.avg_scores_by_round[reviewee.name][round] too long (162/160)
|}

==='''Unused variables / access modifiers'''===
{| class="wikitable"
|-
! Vaiable/Access Modifier
! Comments
|-
|'''Variable:''' summary
|'''Method:''' summarize_sentences
|-
|'''Variable:''' included_question_counter
|'''Method:''' summarize_reviews_by_reviewee
|-
|'''Access Modifier:''' module_function
|'''Class:''' Summary
|}

=='''Solution Implemented'''==
==='''Refactor - summarize_reviews_by_reviewee'''===
:This method is used to summarize reviews by a reviewer for each question.

:'''Changes Made:'''
:This method could be refactored into smaller methods namely ''summarize_reviews_by_reviewee'' and ''summarize_reviews_by_reviewee_assign'' where ''summarize_reviews_by_reviewee'' calls ''summarize_reviews_by_reviewee_assign'' to get average scores and summary for each question.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewee(questions, assignment, r_id, summary_ws_url)
self.summary = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})

# get all answers for each question and send them to summarization WS
questions.keys.each do |round|
self.summary[round.to_s] = {}
self.avg_scores_by_criterion[round.to_s] = {}
self.avg_scores_by_round[round.to_s] = 0.0
included_question_counter = 0

questions[round].each do |q|
next if q.type.eql?("SectionHeader")

self.summary[round.to_s][q.txt] = ""
self.avg_scores_by_criterion[round.to_s][q.txt] = 0.0

question_answers = Answer.answers_by_question_for_reviewee(assignment.id, r_id, q.id)

max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)

# get the avg scores for this question
self.avg_scores_by_criterion[round.to_s][q.txt] = calculate_avg_score_by_criterion(question_answers, max_score)
# get the summary of answers to this question
self.summary[round.to_s][q.txt] = summarize_sentences(comments, summary_ws_url)
end
self.avg_scores_by_round[round.to_s] = calculate_avg_score_by_round(self.avg_scores_by_criterion[round.to_s], questions[round])
end
self
end
</pre>

:'''After:'''
<pre>
# produce average score and summary of comments for reviews by a reviewer for each question
def summarize_reviews_by_reviewee(questions, assignment, reviewee_id, summary_ws_url)
self.summary = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.summary_ws_url = summary_ws_url

# get all answers for each question and send them to summarization WS
questions.each_key do |round|
self.summary[round.to_s] = {}
self.avg_scores_by_criterion[round.to_s] = {}
self.avg_scores_by_round[round.to_s] = 0.0
questions[round].each do |question|
next if question.type.eql?("SectionHeader")
summarize_reviews_by_reviewee_question(assignment, reviewee_id, question, round)
end
self.avg_scores_by_round[round.to_s] = calculate_avg_score_by_round(self.avg_scores_by_criterion[round.to_s], questions[round])
end
self
end

# get average scores and summary for each question in a review by a reviewer
def summarize_reviews_by_reviewee_question(assignment, reviewee_id, question, round)
question_answers = Answer.answers_by_question_for_reviewee(assignment.id, reviewee_id, question.id)

self.avg_scores_by_criterion[round.to_s][question.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(question))

self.summary[round.to_s][question.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end

# Wait for threads to end
def end_threads(threads)
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end
</pre>

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_reviewee is reduced from 44.61 to 20.64.

==='''Refactor - summarize_reviews_by_criterion'''===
:This method is used to summarize the review for each questions

:'''Changes Made:'''

:This method was refactored into 3 smaller methods namely ''summarize_reviews_by_criterion'', ''summarize_reviews_by_criterion_questions'' and ''end_threads''.

:The method ''summarize_reviews_by_criterion'' calls ''summarize_reviews_by_criterion_questions'' to get answers of each question in the rubric.

:The method ''summarize_reviews_by_criterion_questions'' starts many threads to process each question and closes it by calling the function ''end_threads''.

:[[File:e2008_3.jpg]]
:[[File:e2008_4.jpg]]

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_criterion is reduced from 42.34 to 17.2
:* Cognitive complexity is reduced from 16 to 7

==='''Refactor - summarize_reviews_by_reviewees'''===
:This method is used to produce summaries for instructor and students. It sums up the feedback by criterion for each reviewer

:'''Changes Made:'''

:This method was refactored into 4 smaller methods namely ''summarize_reviews_by_reviewees'', ''summarize_reviews_by_teams'', ''summarize_by_rounds'' and ''end_threads''.

:The method ''summarize_reviews_by_reviewees'' calls ''summarize_reviews_by_teams'' which inturn calls ''summarize_by_rounds'' to get answers of each reviewer by rubric.

:The method ''summarize_by_rounds'' starts many threads to create requests to summarize the comments and closes the threads by calling the function ''end_threads''.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
# @summary[reviewee][round][question]
# @reviewers[team][reviewer]
# @avg_scores_by_reviewee[team]
# @avg_score_round[reviewee][round]
# @avg_scores_by_criterion[reviewee][round][criterion]
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
threads = []

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = []
self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}

# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")
summary[reviewee.name][round][q.txt] = ""
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = 0.0

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)
# get max score of this rubric
q_max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)
# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, q_max_score)

# summarize the comments by calling the summarization Web Service

# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
summary[reviewee.name][round][q.txt] = summarize_sentences(comments, summary_ws_url) unless comments.empty?
end
end
self.avg_scores_by_round[reviewee.name][round] = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
end
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

# Wait for all threads to end
threads.each do |t|
t.join if t != Thread.current
end

self
end

</pre>
:'''After:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
self.summary_ws_url = summary_ws_url

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

self
end

def summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}
summarize_by_reviewee_round(assignment, reviewee, round, rubric)
end
end

def summarize_by_reviewee_round(assignment, reviewee, round, rubric)
threads = []
# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)

# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(q))

# summarize the comments by calling the summarization Web Service
# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
self.summary[reviewee.name][round][q.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
end
avg_scores_by_round = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
self.avg_scores_by_round[reviewee.name][round] = avg_scores_by_round
# Wait for all threads to end
end_threads(threads)
end

def end_threads(threads)
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end

</pre>
:'''Impact:'''

:* Assignment Branch Condition size for summarize_reviews_by_reviewees is reduced from 89.93 to 16.64
:* Cognitive Complexity is reduced from 17 to 7

==='''Refactor - summarize_sentence'''===
:This method calls web service to store each summary in a hashmap and use the question as the key.

:'''Changes Made:'''

:Removed variable ''summary''

:[[File:e2008_8.jpg]]

==='''Refactor - break_up_comments_to_sentences'''===
: This method adds the comment to an array to be converted as a json request.

:'''Changes Made:'''

:The method is broken down into 2 smaller methods namely ''break_up_comments_to_sentences'' and ''get_sentences'' where ''get_sentences'' is called by ''break_up_comments_to_sentences'' to get sentences in desired format.

:[[File:e2008_9.jpg]]

:'''Impact''':
:*The Cognitive complexity of break_up_comments_to_sentences reduced from 6 to <5

==='''Refactor - get_questions_by_assignment'''===
:This method returns the rubric for given assignment

:'''Changes Made:'''
:*In IF CONDITION: Removed unnecessary use of variable which was being used only once (questionaire_id) and replaced the variable with its assignment (assignment.review_questionnaire_id(round + 1)
:*In ELSE CONDITION: Removed unnecessary ternary operation for variable ''questionaire_id'' and replaced the variable with its assignment (assignment.review_questionnaire_id)

:[[File:e2008_10.jpg]]

==='''Refactor - calculate_avg_score_by_round'''===
:This method is used to calculate average round score for each question.

:'''Changes Made:'''

:Refactored the method into 2 smaller methods namely ''calculate_avg_score_by_round'' and ''calculate_round_score'' where ''calculate_avg_score_by_round'' calls ''calculate_round_score'' to calculate average round score and ''calculate_avg_score_by_round'' rounds the round_score upto 2 decimal places.

:'''Before:'''
<pre>
def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = 0.0
sum_weight = 0

criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0

round_score.round(2)
end
</pre>

:'''After:'''
<pre>
def calculate_round_score(avg_scores_by_criterion, criteria)
round_score = sum_weight = 0.0
criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0
round_score
end

def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = calculate_round_score(avg_scores_by_criterion, criteria)
round_score.round(2)
end
</pre>

:'''Impact:'''
:*Assignment Branch Condition size for calculate_avg_score_by_round is reduced from 18.57 to <15.

==='''Coverage'''===
Coverage increased (+17.1%) to 41.407%

==='''Pull request'''===
https://github.com/expertiza/expertiza/pull/1685

=='''Test Plan'''==
==='''Manual Testing'''===
:'''Login Details:''' '''USERNAME:''' instructor6 '''PASSWORD:''' password
:Click '''Assignment''' >> Click the '''View Submissions''' of '''Madeup problem''' >> Click on any student >> Click on '''Madeup problem''' >> Click on '''Your Scores'''
:[[File:expertiza2008-1.png]]
:[[File:expertiza2008-2.png]]
:[[File:expertiza2008-3.png]]
:[[File:expertiza2008-4.png]]
:The 3 main functions of the Summary helper are summarize review by reviewees, summarize review by reviewee and summarize reviews by criterion.
:To check ''summarize reviews by reviewees'' is working we should get the output similar to the one shown below. This function summarizes all the reviews and displays average score.
:[[File:expertiza2008-5.png]]

:To check ''summarize reviews by reviewee'' is working, click on any review.
:[[File:expertiza2008-6a.png]]
:A new webpage pops up with all the reviews and scores given by an individual.
:[[File:expertiza2008-6b.png]]

: To check ''summarize reviews by criterion'' is working, click on any criterion. This should display summarized reviews and scores for a particular question in the questionnaire.
:[[File:expertiza2008-7.png]]

=='''Future improvement'''==
* Modularize ''summarize_by_rounds'' to even smaller modules so that Assignment Branch Condition size is reduced from 36.73 to 15.00.
* Create more test cases for the new modularized methods.

=='''Contributors'''==
* [mailto:jviswan@ncsu.edu Jayalakshmi Viswanathan]
* [mailto:skundal@ncsu.edu Sandeep Kundala]
* [mailto:spal3@ncsu.edu Sumitosh Pal]

CSC/ECE 517 Spring 2020 - Project E2008. Refactor summary helper.rb

2020-03-31T19:55:49Z

Jviswan: /* Refactor - summarize_reviews_by_reviewee */

=='''About Expertiza'''==
[http://expertiza.ncsu.edu/ Expertiza] is a web application developed using Ruby on Rails Framework whose creation and maintenance are taken care of by students as well as the faculty of NCSU. Its code is available on Github [https://github.com/expertiza/expertiza Expertiza on GitHub]. Expertiza allows the instructor to create and edit new as well as existing assignments. This also includes creating a wide range of topics under each assignment that students can sign up for. They can also publish surveys and reviews, view statistical results, set deadlines for assignments and make announcements. It provides a platform for students to signup for topics, form teams, view and submit assignments and give peer reviews and feedback.

=='''Problem Statement'''==
'''Background:''' In Expertiza students can review each other’s projects and even each other as teammates. Students can view their project scores and instructors can view student's teammate review scores on the view scores page. This Summary helper aids in calculating these scores and rendering the results on the view scores section of an assignment. Summary helper is a helper module that consists of methods used to calculate scores for these reviews. This is for the use of instructors.

'''Requirement:'''
E2008 is an Expertiza OSS project which deals basically with refactoring app/helpers/summary_helper.rb to reduce the code climate issues such as

* [http://wiki.c2.com/?AbcMetric Assignment Branch Condition]
* [https://en.wikipedia.org/wiki/Cognitive_complexity Cognitive Complexity]
* Method/line too long
* Unused variables / access modifiers

'''A good method should have:'''
* Assignment Branch Condition size <= 15
* Cognitive Complexity <= 6
* No. of lines in a method <= 25

=='''Issues found'''==
The following are issues which were found in the code:

==='''Assignment Branch Condition'''===
{| class="wikitable"
|-
! Method
! ABC Size
|-
| summarize_reviews_by_reviewee
| 44.61
|-
| summarize_reviews_by_criterion
| 42.34
|-
| summarize_reviews_by_reviewees
| 89.93
|-
| get_questions_by_assignment
| 16.43
|-
| calculate_avg_score_by_round
| 18.57
|}

==='''Cognitive Complexity'''===
{| class="wikitable"
|-
! Method
! Cognitive Complexity
|-
| summarize_reviews_by_criterion
| 16
|-
| summarize_reviews_by_reviewees
| 17
|-
| get_questions_by_assignment
| 11
|-
| break_up_comments_to_sentences
| 6
|}

==='''Method/line too long'''===
{| class="wikitable"
|-
! Method/Line too long
! Comments
|-
|'''Method:''' summarize_reviews_by_reviewees
|'''Lines of Code:'''39
|-
|'''Method:''' summarize_reviews_by_criterion
|'''Lines of Code:'''27
|-
|'''Line:''' 145
|self.avg_scores_by_round[reviewee.name][round] too long (162/160)
|}

==='''Unused variables / access modifiers'''===
{| class="wikitable"
|-
! Vaiable/Access Modifier
! Comments
|-
|'''Variable:''' summary
|'''Method:''' summarize_sentences
|-
|'''Variable:''' included_question_counter
|'''Method:''' summarize_reviews_by_reviewee
|-
|'''Access Modifier:''' module_function
|'''Class:''' Summary
|}

=='''Solution Implemented'''==
==='''Refactor - summarize_reviews_by_reviewee'''===
:This method is used to summarize reviews by a reviewer for each question.

:'''Changes Made:'''
:This method could be refactored into smaller methods namely ''summarize_reviews_by_reviewee'' and ''summarize_reviews_by_reviewee_assign'' where ''summarize_reviews_by_reviewee'' calls ''summarize_reviews_by_reviewee_assign'' to get average scores and summary for each question.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewee(questions, assignment, r_id, summary_ws_url)
self.summary = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})

# get all answers for each question and send them to summarization WS
questions.keys.each do |round|
self.summary[round.to_s] = {}
self.avg_scores_by_criterion[round.to_s] = {}
self.avg_scores_by_round[round.to_s] = 0.0
included_question_counter = 0

questions[round].each do |q|
next if q.type.eql?("SectionHeader")

self.summary[round.to_s][q.txt] = ""
self.avg_scores_by_criterion[round.to_s][q.txt] = 0.0

question_answers = Answer.answers_by_question_for_reviewee(assignment.id, r_id, q.id)

max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)

# get the avg scores for this question
self.avg_scores_by_criterion[round.to_s][q.txt] = calculate_avg_score_by_criterion(question_answers, max_score)
# get the summary of answers to this question
self.summary[round.to_s][q.txt] = summarize_sentences(comments, summary_ws_url)
end
self.avg_scores_by_round[round.to_s] = calculate_avg_score_by_round(self.avg_scores_by_criterion[round.to_s], questions[round])
end
self
end
</pre>

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_reviewee is reduced from 44.61 to 20.64.

==='''Refactor - summarize_reviews_by_criterion'''===
:This method is used to summarize the review for each questions

:'''Changes Made:'''

:This method was refactored into 3 smaller methods namely ''summarize_reviews_by_criterion'', ''summarize_reviews_by_criterion_questions'' and ''end_threads''.

:The method ''summarize_reviews_by_criterion'' calls ''summarize_reviews_by_criterion_questions'' to get answers of each question in the rubric.

:The method ''summarize_reviews_by_criterion_questions'' starts many threads to process each question and closes it by calling the function ''end_threads''.

:[[File:e2008_3.jpg]]
:[[File:e2008_4.jpg]]

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_criterion is reduced from 42.34 to 17.2
:* Cognitive complexity is reduced from 16 to 7

==='''Refactor - summarize_reviews_by_reviewees'''===
:This method is used to produce summaries for instructor and students. It sums up the feedback by criterion for each reviewer

:'''Changes Made:'''

:This method was refactored into 4 smaller methods namely ''summarize_reviews_by_reviewees'', ''summarize_reviews_by_teams'', ''summarize_by_rounds'' and ''end_threads''.

:The method ''summarize_reviews_by_reviewees'' calls ''summarize_reviews_by_teams'' which inturn calls ''summarize_by_rounds'' to get answers of each reviewer by rubric.

:The method ''summarize_by_rounds'' starts many threads to create requests to summarize the comments and closes the threads by calling the function ''end_threads''.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
# @summary[reviewee][round][question]
# @reviewers[team][reviewer]
# @avg_scores_by_reviewee[team]
# @avg_score_round[reviewee][round]
# @avg_scores_by_criterion[reviewee][round][criterion]
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
threads = []

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = []
self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}

# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")
summary[reviewee.name][round][q.txt] = ""
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = 0.0

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)
# get max score of this rubric
q_max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)
# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, q_max_score)

# summarize the comments by calling the summarization Web Service

# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
summary[reviewee.name][round][q.txt] = summarize_sentences(comments, summary_ws_url) unless comments.empty?
end
end
self.avg_scores_by_round[reviewee.name][round] = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
end
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

# Wait for all threads to end
threads.each do |t|
t.join if t != Thread.current
end

self
end

</pre>
:'''After:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
self.summary_ws_url = summary_ws_url

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

self
end

def summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}
summarize_by_reviewee_round(assignment, reviewee, round, rubric)
end
end

def summarize_by_reviewee_round(assignment, reviewee, round, rubric)
threads = []
# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)

# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(q))

# summarize the comments by calling the summarization Web Service
# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
self.summary[reviewee.name][round][q.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
end
avg_scores_by_round = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
self.avg_scores_by_round[reviewee.name][round] = avg_scores_by_round
# Wait for all threads to end
end_threads(threads)
end

def end_threads(threads)
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end

</pre>
:'''Impact:'''

:* Assignment Branch Condition size for summarize_reviews_by_reviewees is reduced from 89.93 to 16.64
:* Cognitive Complexity is reduced from 17 to 7

==='''Refactor - summarize_sentence'''===
:This method calls web service to store each summary in a hashmap and use the question as the key.

:'''Changes Made:'''

:Removed variable ''summary''

:[[File:e2008_8.jpg]]

==='''Refactor - break_up_comments_to_sentences'''===
: This method adds the comment to an array to be converted as a json request.

:'''Changes Made:'''

:The method is broken down into 2 smaller methods namely ''break_up_comments_to_sentences'' and ''get_sentences'' where ''get_sentences'' is called by ''break_up_comments_to_sentences'' to get sentences in desired format.

:[[File:e2008_9.jpg]]

:'''Impact''':
:*The Cognitive complexity of break_up_comments_to_sentences reduced from 6 to <5

==='''Refactor - get_questions_by_assignment'''===
:This method returns the rubric for given assignment

:'''Changes Made:'''
:*In IF CONDITION: Removed unnecessary use of variable which was being used only once (questionaire_id) and replaced the variable with its assignment (assignment.review_questionnaire_id(round + 1)
:*In ELSE CONDITION: Removed unnecessary ternary operation for variable ''questionaire_id'' and replaced the variable with its assignment (assignment.review_questionnaire_id)

:[[File:e2008_10.jpg]]

==='''Refactor - calculate_avg_score_by_round'''===
:This method is used to calculate average round score for each question.

:'''Changes Made:'''

:Refactored the method into 2 smaller methods namely ''calculate_avg_score_by_round'' and ''calculate_round_score'' where ''calculate_avg_score_by_round'' calls ''calculate_round_score'' to calculate average round score and ''calculate_avg_score_by_round'' rounds the round_score upto 2 decimal places.

:'''Before:'''
<pre>
def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = 0.0
sum_weight = 0

criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0

round_score.round(2)
end
</pre>

:'''After:'''
<pre>
def calculate_round_score(avg_scores_by_criterion, criteria)
round_score = sum_weight = 0.0
criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0
round_score
end

def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = calculate_round_score(avg_scores_by_criterion, criteria)
round_score.round(2)
end
</pre>

:'''Impact:'''
:*Assignment Branch Condition size for calculate_avg_score_by_round is reduced from 18.57 to <15.

==='''Coverage'''===
Coverage increased (+17.1%) to 41.407%

==='''Pull request'''===
https://github.com/expertiza/expertiza/pull/1685

=='''Test Plan'''==
==='''Manual Testing'''===
:'''Login Details:''' '''USERNAME:''' instructor6 '''PASSWORD:''' password
:Click '''Assignment''' >> Click the '''View Submissions''' of '''Madeup problem''' >> Click on any student >> Click on '''Madeup problem''' >> Click on '''Your Scores'''
:[[File:expertiza2008-1.png]]
:[[File:expertiza2008-2.png]]
:[[File:expertiza2008-3.png]]
:[[File:expertiza2008-4.png]]
:The 3 main functions of the Summary helper are summarize review by reviewees, summarize review by reviewee and summarize reviews by criterion.
:To check ''summarize reviews by reviewees'' is working we should get the output similar to the one shown below. This function summarizes all the reviews and displays average score.
:[[File:expertiza2008-5.png]]

:To check ''summarize reviews by reviewee'' is working, click on any review.
:[[File:expertiza2008-6a.png]]
:A new webpage pops up with all the reviews and scores given by an individual.
:[[File:expertiza2008-6b.png]]

: To check ''summarize reviews by criterion'' is working, click on any criterion. This should display summarized reviews and scores for a particular question in the questionnaire.
:[[File:expertiza2008-7.png]]

=='''Future improvement'''==
* Modularize ''summarize_by_rounds'' to even smaller modules so that Assignment Branch Condition size is reduced from 36.73 to 15.00.
* Create more test cases for the new modularized methods.

=='''Contributors'''==
* [mailto:jviswan@ncsu.edu Jayalakshmi Viswanathan]
* [mailto:skundal@ncsu.edu Sandeep Kundala]
* [mailto:spal3@ncsu.edu Sumitosh Pal]

CSC/ECE 517 Spring 2020 - Project E2008. Refactor summary helper.rb

2020-03-31T19:54:04Z

Jviswan: /* Refactor - summarize_reviews_by_reviewee */

=='''About Expertiza'''==
[http://expertiza.ncsu.edu/ Expertiza] is a web application developed using Ruby on Rails Framework whose creation and maintenance are taken care of by students as well as the faculty of NCSU. Its code is available on Github [https://github.com/expertiza/expertiza Expertiza on GitHub]. Expertiza allows the instructor to create and edit new as well as existing assignments. This also includes creating a wide range of topics under each assignment that students can sign up for. They can also publish surveys and reviews, view statistical results, set deadlines for assignments and make announcements. It provides a platform for students to signup for topics, form teams, view and submit assignments and give peer reviews and feedback.

=='''Problem Statement'''==
'''Background:''' In Expertiza students can review each other’s projects and even each other as teammates. Students can view their project scores and instructors can view student's teammate review scores on the view scores page. This Summary helper aids in calculating these scores and rendering the results on the view scores section of an assignment. Summary helper is a helper module that consists of methods used to calculate scores for these reviews. This is for the use of instructors.

'''Requirement:'''
E2008 is an Expertiza OSS project which deals basically with refactoring app/helpers/summary_helper.rb to reduce the code climate issues such as

* [http://wiki.c2.com/?AbcMetric Assignment Branch Condition]
* [https://en.wikipedia.org/wiki/Cognitive_complexity Cognitive Complexity]
* Method/line too long
* Unused variables / access modifiers

'''A good method should have:'''
* Assignment Branch Condition size <= 15
* Cognitive Complexity <= 6
* No. of lines in a method <= 25

=='''Issues found'''==
The following are issues which were found in the code:

==='''Assignment Branch Condition'''===
{| class="wikitable"
|-
! Method
! ABC Size
|-
| summarize_reviews_by_reviewee
| 44.61
|-
| summarize_reviews_by_criterion
| 42.34
|-
| summarize_reviews_by_reviewees
| 89.93
|-
| get_questions_by_assignment
| 16.43
|-
| calculate_avg_score_by_round
| 18.57
|}

==='''Cognitive Complexity'''===
{| class="wikitable"
|-
! Method
! Cognitive Complexity
|-
| summarize_reviews_by_criterion
| 16
|-
| summarize_reviews_by_reviewees
| 17
|-
| get_questions_by_assignment
| 11
|-
| break_up_comments_to_sentences
| 6
|}

==='''Method/line too long'''===
{| class="wikitable"
|-
! Method/Line too long
! Comments
|-
|'''Method:''' summarize_reviews_by_reviewees
|'''Lines of Code:'''39
|-
|'''Method:''' summarize_reviews_by_criterion
|'''Lines of Code:'''27
|-
|'''Line:''' 145
|self.avg_scores_by_round[reviewee.name][round] too long (162/160)
|}

==='''Unused variables / access modifiers'''===
{| class="wikitable"
|-
! Vaiable/Access Modifier
! Comments
|-
|'''Variable:''' summary
|'''Method:''' summarize_sentences
|-
|'''Variable:''' included_question_counter
|'''Method:''' summarize_reviews_by_reviewee
|-
|'''Access Modifier:''' module_function
|'''Class:''' Summary
|}

=='''Solution Implemented'''==
==='''Refactor - summarize_reviews_by_reviewee'''===
:This method is used to summarize reviews by a reviewer for each question.

:'''Changes Made:'''
:This method could be refactored into smaller methods namely ''summarize_reviews_by_reviewee'' and ''summarize_reviews_by_reviewee_assign'' where ''summarize_reviews_by_reviewee'' calls ''summarize_reviews_by_reviewee_assign'' to get average scores and summary for each question.

:'''Before:'''
<pre>

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_reviewee is reduced from 44.61 to 20.64.

==='''Refactor - summarize_reviews_by_criterion'''===
:This method is used to summarize the review for each questions

:'''Changes Made:'''

:This method was refactored into 3 smaller methods namely ''summarize_reviews_by_criterion'', ''summarize_reviews_by_criterion_questions'' and ''end_threads''.

:The method ''summarize_reviews_by_criterion'' calls ''summarize_reviews_by_criterion_questions'' to get answers of each question in the rubric.

:The method ''summarize_reviews_by_criterion_questions'' starts many threads to process each question and closes it by calling the function ''end_threads''.

:[[File:e2008_3.jpg]]
:[[File:e2008_4.jpg]]

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_criterion is reduced from 42.34 to 17.2
:* Cognitive complexity is reduced from 16 to 7

==='''Refactor - summarize_reviews_by_reviewees'''===
:This method is used to produce summaries for instructor and students. It sums up the feedback by criterion for each reviewer

:'''Changes Made:'''

:This method was refactored into 4 smaller methods namely ''summarize_reviews_by_reviewees'', ''summarize_reviews_by_teams'', ''summarize_by_rounds'' and ''end_threads''.

:The method ''summarize_reviews_by_reviewees'' calls ''summarize_reviews_by_teams'' which inturn calls ''summarize_by_rounds'' to get answers of each reviewer by rubric.

:The method ''summarize_by_rounds'' starts many threads to create requests to summarize the comments and closes the threads by calling the function ''end_threads''.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
# @summary[reviewee][round][question]
# @reviewers[team][reviewer]
# @avg_scores_by_reviewee[team]
# @avg_score_round[reviewee][round]
# @avg_scores_by_criterion[reviewee][round][criterion]
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
threads = []

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = []
self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}

# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")
summary[reviewee.name][round][q.txt] = ""
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = 0.0

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)
# get max score of this rubric
q_max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)
# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, q_max_score)

# summarize the comments by calling the summarization Web Service

# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
summary[reviewee.name][round][q.txt] = summarize_sentences(comments, summary_ws_url) unless comments.empty?
end
end
self.avg_scores_by_round[reviewee.name][round] = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
end
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

# Wait for all threads to end
threads.each do |t|
t.join if t != Thread.current
end

self
end

</pre>
:'''After:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
self.summary_ws_url = summary_ws_url

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

self
end

def summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}
summarize_by_reviewee_round(assignment, reviewee, round, rubric)
end
end

def summarize_by_reviewee_round(assignment, reviewee, round, rubric)
threads = []
# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)

# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(q))

# summarize the comments by calling the summarization Web Service
# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
self.summary[reviewee.name][round][q.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
end
avg_scores_by_round = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
self.avg_scores_by_round[reviewee.name][round] = avg_scores_by_round
# Wait for all threads to end
end_threads(threads)
end

def end_threads(threads)
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end

</pre>
:'''Impact:'''

:* Assignment Branch Condition size for summarize_reviews_by_reviewees is reduced from 89.93 to 16.64
:* Cognitive Complexity is reduced from 17 to 7

==='''Refactor - summarize_sentence'''===
:This method calls web service to store each summary in a hashmap and use the question as the key.

:'''Changes Made:'''

:Removed variable ''summary''

:[[File:e2008_8.jpg]]

==='''Refactor - break_up_comments_to_sentences'''===
: This method adds the comment to an array to be converted as a json request.

:'''Changes Made:'''

:The method is broken down into 2 smaller methods namely ''break_up_comments_to_sentences'' and ''get_sentences'' where ''get_sentences'' is called by ''break_up_comments_to_sentences'' to get sentences in desired format.

:[[File:e2008_9.jpg]]

:'''Impact''':
:*The Cognitive complexity of break_up_comments_to_sentences reduced from 6 to <5

==='''Refactor - get_questions_by_assignment'''===
:This method returns the rubric for given assignment

:'''Changes Made:'''
:*In IF CONDITION: Removed unnecessary use of variable which was being used only once (questionaire_id) and replaced the variable with its assignment (assignment.review_questionnaire_id(round + 1)
:*In ELSE CONDITION: Removed unnecessary ternary operation for variable ''questionaire_id'' and replaced the variable with its assignment (assignment.review_questionnaire_id)

:[[File:e2008_10.jpg]]

==='''Refactor - calculate_avg_score_by_round'''===
:This method is used to calculate average round score for each question.

:'''Changes Made:'''

:Refactored the method into 2 smaller methods namely ''calculate_avg_score_by_round'' and ''calculate_round_score'' where ''calculate_avg_score_by_round'' calls ''calculate_round_score'' to calculate average round score and ''calculate_avg_score_by_round'' rounds the round_score upto 2 decimal places.

:'''Before:'''
<pre>
def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = 0.0
sum_weight = 0

criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0

round_score.round(2)
end
</pre>

:'''After:'''
<pre>
def calculate_round_score(avg_scores_by_criterion, criteria)
round_score = sum_weight = 0.0
criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0
round_score
end

def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = calculate_round_score(avg_scores_by_criterion, criteria)
round_score.round(2)
end
</pre>

:'''Impact:'''
:*Assignment Branch Condition size for calculate_avg_score_by_round is reduced from 18.57 to <15.

==='''Coverage'''===
Coverage increased (+17.1%) to 41.407%

==='''Pull request'''===
https://github.com/expertiza/expertiza/pull/1685

=='''Test Plan'''==
==='''Manual Testing'''===
:'''Login Details:''' '''USERNAME:''' instructor6 '''PASSWORD:''' password
:Click '''Assignment''' >> Click the '''View Submissions''' of '''Madeup problem''' >> Click on any student >> Click on '''Madeup problem''' >> Click on '''Your Scores'''
:[[File:expertiza2008-1.png]]
:[[File:expertiza2008-2.png]]
:[[File:expertiza2008-3.png]]
:[[File:expertiza2008-4.png]]
:The 3 main functions of the Summary helper are summarize review by reviewees, summarize review by reviewee and summarize reviews by criterion.
:To check ''summarize reviews by reviewees'' is working we should get the output similar to the one shown below. This function summarizes all the reviews and displays average score.
:[[File:expertiza2008-5.png]]

:To check ''summarize reviews by reviewee'' is working, click on any review.
:[[File:expertiza2008-6a.png]]
:A new webpage pops up with all the reviews and scores given by an individual.
:[[File:expertiza2008-6b.png]]

: To check ''summarize reviews by criterion'' is working, click on any criterion. This should display summarized reviews and scores for a particular question in the questionnaire.
:[[File:expertiza2008-7.png]]

=='''Future improvement'''==
* Modularize ''summarize_by_rounds'' to even smaller modules so that Assignment Branch Condition size is reduced from 36.73 to 15.00.
* Create more test cases for the new modularized methods.

=='''Contributors'''==
* [mailto:jviswan@ncsu.edu Jayalakshmi Viswanathan]
* [mailto:skundal@ncsu.edu Sandeep Kundala]
* [mailto:spal3@ncsu.edu Sumitosh Pal]

CSC/ECE 517 Spring 2020 - Project E2008. Refactor summary helper.rb

2020-03-31T19:52:48Z

Jviswan: /* Refactor - summarize_reviews_by_reviewees */

=='''About Expertiza'''==
[http://expertiza.ncsu.edu/ Expertiza] is a web application developed using Ruby on Rails Framework whose creation and maintenance are taken care of by students as well as the faculty of NCSU. Its code is available on Github [https://github.com/expertiza/expertiza Expertiza on GitHub]. Expertiza allows the instructor to create and edit new as well as existing assignments. This also includes creating a wide range of topics under each assignment that students can sign up for. They can also publish surveys and reviews, view statistical results, set deadlines for assignments and make announcements. It provides a platform for students to signup for topics, form teams, view and submit assignments and give peer reviews and feedback.

=='''Problem Statement'''==
'''Background:''' In Expertiza students can review each other’s projects and even each other as teammates. Students can view their project scores and instructors can view student's teammate review scores on the view scores page. This Summary helper aids in calculating these scores and rendering the results on the view scores section of an assignment. Summary helper is a helper module that consists of methods used to calculate scores for these reviews. This is for the use of instructors.

'''Requirement:'''
E2008 is an Expertiza OSS project which deals basically with refactoring app/helpers/summary_helper.rb to reduce the code climate issues such as

* [http://wiki.c2.com/?AbcMetric Assignment Branch Condition]
* [https://en.wikipedia.org/wiki/Cognitive_complexity Cognitive Complexity]
* Method/line too long
* Unused variables / access modifiers

'''A good method should have:'''
* Assignment Branch Condition size <= 15
* Cognitive Complexity <= 6
* No. of lines in a method <= 25

=='''Issues found'''==
The following are issues which were found in the code:

==='''Assignment Branch Condition'''===
{| class="wikitable"
|-
! Method
! ABC Size
|-
| summarize_reviews_by_reviewee
| 44.61
|-
| summarize_reviews_by_criterion
| 42.34
|-
| summarize_reviews_by_reviewees
| 89.93
|-
| get_questions_by_assignment
| 16.43
|-
| calculate_avg_score_by_round
| 18.57
|}

==='''Cognitive Complexity'''===
{| class="wikitable"
|-
! Method
! Cognitive Complexity
|-
| summarize_reviews_by_criterion
| 16
|-
| summarize_reviews_by_reviewees
| 17
|-
| get_questions_by_assignment
| 11
|-
| break_up_comments_to_sentences
| 6
|}

==='''Method/line too long'''===
{| class="wikitable"
|-
! Method/Line too long
! Comments
|-
|'''Method:''' summarize_reviews_by_reviewees
|'''Lines of Code:'''39
|-
|'''Method:''' summarize_reviews_by_criterion
|'''Lines of Code:'''27
|-
|'''Line:''' 145
|self.avg_scores_by_round[reviewee.name][round] too long (162/160)
|}

==='''Unused variables / access modifiers'''===
{| class="wikitable"
|-
! Vaiable/Access Modifier
! Comments
|-
|'''Variable:''' summary
|'''Method:''' summarize_sentences
|-
|'''Variable:''' included_question_counter
|'''Method:''' summarize_reviews_by_reviewee
|-
|'''Access Modifier:''' module_function
|'''Class:''' Summary
|}

=='''Solution Implemented'''==
==='''Refactor - summarize_reviews_by_reviewee'''===
:This method is used to summarize reviews by a reviewer for each question.

:'''Changes Made:'''
:This method could be refactored into smaller methods namely ''summarize_reviews_by_reviewee'' and ''summarize_reviews_by_reviewee_assign'' where ''summarize_reviews_by_reviewee'' calls ''summarize_reviews_by_reviewee_assign'' to get average scores and summary for each question.

:[[File:e2008_1.jpg]]

:[[File:e2008_2.jpg]]

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_reviewee is reduced from 44.61 to 20.64.

==='''Refactor - summarize_reviews_by_criterion'''===
:This method is used to summarize the review for each questions

:'''Changes Made:'''

:This method was refactored into 3 smaller methods namely ''summarize_reviews_by_criterion'', ''summarize_reviews_by_criterion_questions'' and ''end_threads''.

:The method ''summarize_reviews_by_criterion'' calls ''summarize_reviews_by_criterion_questions'' to get answers of each question in the rubric.

:The method ''summarize_reviews_by_criterion_questions'' starts many threads to process each question and closes it by calling the function ''end_threads''.

:[[File:e2008_3.jpg]]
:[[File:e2008_4.jpg]]

:'''Impact:'''
:* Assignment Branch Condition size for summarize_reviews_by_criterion is reduced from 42.34 to 17.2
:* Cognitive complexity is reduced from 16 to 7

==='''Refactor - summarize_reviews_by_reviewees'''===
:This method is used to produce summaries for instructor and students. It sums up the feedback by criterion for each reviewer

:'''Changes Made:'''

:This method was refactored into 4 smaller methods namely ''summarize_reviews_by_reviewees'', ''summarize_reviews_by_teams'', ''summarize_by_rounds'' and ''end_threads''.

:The method ''summarize_reviews_by_reviewees'' calls ''summarize_reviews_by_teams'' which inturn calls ''summarize_by_rounds'' to get answers of each reviewer by rubric.

:The method ''summarize_by_rounds'' starts many threads to create requests to summarize the comments and closes the threads by calling the function ''end_threads''.

:'''Before:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
# @summary[reviewee][round][question]
# @reviewers[team][reviewer]
# @avg_scores_by_reviewee[team]
# @avg_score_round[reviewee][round]
# @avg_scores_by_criterion[reviewee][round][criterion]
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
threads = []

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = []
self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}

# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")
summary[reviewee.name][round][q.txt] = ""
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = 0.0

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)
# get max score of this rubric
q_max_score = get_max_score_for_question(q)

comments = break_up_comments_to_sentences(question_answers)
# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, q_max_score)

# summarize the comments by calling the summarization Web Service

# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
summary[reviewee.name][round][q.txt] = summarize_sentences(comments, summary_ws_url) unless comments.empty?
end
end
self.avg_scores_by_round[reviewee.name][round] = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
end
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

# Wait for all threads to end
threads.each do |t|
t.join if t != Thread.current
end

self
end

</pre>
:'''After:'''
<pre>
def summarize_reviews_by_reviewees(assignment, summary_ws_url)
self.summary = ({})
self.avg_scores_by_reviewee = ({})
self.avg_scores_by_round = ({})
self.avg_scores_by_criterion = ({})
self.reviewers = ({})
self.summary_ws_url = summary_ws_url

# get all criteria used in each round
rubric = get_questions_by_assignment(assignment)

# get all teams in this assignment
teams = Team.select(:id, :name).where(parent_id: assignment.id).order(:name)

teams.each do |reviewee|
summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.avg_scores_by_reviewee[reviewee.name] = calculate_avg_score_by_reviewee(self.avg_scores_by_round[reviewee.name], assignment.rounds_of_reviews)
end

self
end

def summarize_reviews_by_team_reviewee(assignment, reviewee, rubric)
self.summary[reviewee.name] = []
self.avg_scores_by_reviewee[reviewee.name] = 0.0
self.avg_scores_by_round[reviewee.name] = self.avg_scores_by_criterion[reviewee.name] = []

# get the name of reviewers for display only
self.reviewers[reviewee.name] = get_reviewers_by_reviewee_and_assignment(reviewee, assignment.id)

# get answers of each reviewer by rubric
(0..assignment.rounds_of_reviews - 1).each do |round|
self.summary[reviewee.name][round] = {}
self.avg_scores_by_round[reviewee.name][round] = 0.0
self.avg_scores_by_criterion[reviewee.name][round] = {}
summarize_by_reviewee_round(assignment, reviewee, round, rubric)
end
end

def summarize_by_reviewee_round(assignment, reviewee, round, rubric)
threads = []
# iterate each round and get answers
# if use the same rubric, only use rubric[0]
rubric_questions_used = rubric[assignment.varying_rubrics_by_round? ? round : 0]
rubric_questions_used.each do |q|
next if q.type.eql?("SectionHeader")

# get all answers to this question
question_answers = Answer.answers_by_question_for_reviewee_in_round(assignment.id, reviewee.id, q.id, round + 1)

# get score and summary of answers for each question
self.avg_scores_by_criterion[reviewee.name][round][q.txt] = calculate_avg_score_by_criterion(question_answers, get_max_score_for_question(q))

# summarize the comments by calling the summarization Web Service
# since it'll do a lot of request, do this in seperate threads
threads << Thread.new do
self.summary[reviewee.name][round][q.txt] = summarize_sentences(break_up_comments_to_sentences(question_answers), self.summary_ws_url)
end
end
avg_scores_by_round = calculate_avg_score_by_round(self.avg_scores_by_criterion[reviewee.name][round], rubric_questions_used)
self.avg_scores_by_round[reviewee.name][round] = avg_scores_by_round
# Wait for all threads to end
end_threads(threads)
end

def end_threads(threads)
threads.each do |t|
# Wait for the thread to finish if it isn't this thread (i.e. the main thread).
t.join if t != Thread.current
end
end

</pre>
:'''Impact:'''

:* Assignment Branch Condition size for summarize_reviews_by_reviewees is reduced from 89.93 to 16.64
:* Cognitive Complexity is reduced from 17 to 7

==='''Refactor - summarize_sentence'''===
:This method calls web service to store each summary in a hashmap and use the question as the key.

:'''Changes Made:'''

:Removed variable ''summary''

:[[File:e2008_8.jpg]]

==='''Refactor - break_up_comments_to_sentences'''===
: This method adds the comment to an array to be converted as a json request.

:'''Changes Made:'''

:The method is broken down into 2 smaller methods namely ''break_up_comments_to_sentences'' and ''get_sentences'' where ''get_sentences'' is called by ''break_up_comments_to_sentences'' to get sentences in desired format.

:[[File:e2008_9.jpg]]

:'''Impact''':
:*The Cognitive complexity of break_up_comments_to_sentences reduced from 6 to <5

==='''Refactor - get_questions_by_assignment'''===
:This method returns the rubric for given assignment

:'''Changes Made:'''
:*In IF CONDITION: Removed unnecessary use of variable which was being used only once (questionaire_id) and replaced the variable with its assignment (assignment.review_questionnaire_id(round + 1)
:*In ELSE CONDITION: Removed unnecessary ternary operation for variable ''questionaire_id'' and replaced the variable with its assignment (assignment.review_questionnaire_id)

:[[File:e2008_10.jpg]]

==='''Refactor - calculate_avg_score_by_round'''===
:This method is used to calculate average round score for each question.

:'''Changes Made:'''

:Refactored the method into 2 smaller methods namely ''calculate_avg_score_by_round'' and ''calculate_round_score'' where ''calculate_avg_score_by_round'' calls ''calculate_round_score'' to calculate average round score and ''calculate_avg_score_by_round'' rounds the round_score upto 2 decimal places.

:'''Before:'''
<pre>
def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = 0.0
sum_weight = 0

criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0

round_score.round(2)
end
</pre>

:'''After:'''
<pre>
def calculate_round_score(avg_scores_by_criterion, criteria)
round_score = sum_weight = 0.0
criteria.each do |q|
# include this score in the average round score if the weight is valid & q is criterion
if !q.weight.nil? and q.weight > 0 and q.type.eql?("Criterion")
round_score += avg_scores_by_criterion[q.txt] * q.weight
sum_weight += q.weight
end
end

round_score /= sum_weight if sum_weight > 0 and round_score > 0
round_score
end

def calculate_avg_score_by_round(avg_scores_by_criterion, criteria)
round_score = calculate_round_score(avg_scores_by_criterion, criteria)
round_score.round(2)
end
</pre>

:'''Impact:'''
:*Assignment Branch Condition size for calculate_avg_score_by_round is reduced from 18.57 to <15.

==='''Coverage'''===
Coverage increased (+17.1%) to 41.407%

==='''Pull request'''===
https://github.com/expertiza/expertiza/pull/1685

=='''Test Plan'''==
==='''Manual Testing'''===
:'''Login Details:''' '''USERNAME:''' instructor6 '''PASSWORD:''' password
:Click '''Assignment''' >> Click the '''View Submissions''' of '''Madeup problem''' >> Click on any student >> Click on '''Madeup problem''' >> Click on '''Your Scores'''
:[[File:expertiza2008-1.png]]
:[[File:expertiza2008-2.png]]
:[[File:expertiza2008-3.png]]
:[[File:expertiza2008-4.png]]
:The 3 main functions of the Summary helper are summarize review by reviewees, summarize review by reviewee and summarize reviews by criterion.
:To check ''summarize reviews by reviewees'' is working we should get the output similar to the one shown below. This function summarizes all the reviews and displays average score.
:[[File:expertiza2008-5.png]]

:To check ''summarize reviews by reviewee'' is working, click on any review.
:[[File:expertiza2008-6a.png]]
:A new webpage pops up with all the reviews and scores given by an individual.
:[[File:expertiza2008-6b.png]]

: To check ''summarize reviews by criterion'' is working, click on any criterion. This should display summarized reviews and scores for a particular question in the questionnaire.
:[[File:expertiza2008-7.png]]

=='''Future improvement'''==
* Modularize ''summarize_by_rounds'' to even smaller modules so that Assignment Branch Condition size is reduced from 36.73 to 15.00.
* Create more test cases for the new modularized methods.

=='''Contributors'''==
* [mailto:jviswan@ncsu.edu Jayalakshmi Viswanathan]
* [mailto:skundal@ncsu.edu Sandeep Kundala]
* [mailto:spal3@ncsu.edu Sumitosh Pal]