Graphical Analysis Work - devuxd/SeeCodeRun GitHub Wiki

One of SeeCodeRun's features that began development in the 2017 was a graphical analysis module. This module would enable developers To view code and output relationships by using hovers. For example, if a user has some code in the JS portion of SeeCodeRun, each unique graphical element which the Javascript interacts with has it's lines shown with a colored dashed box. Hovering over a line will enable the user to see all of those objects that are being affected by the line. Additionally, if a user hovers over the graphical output and the output highlights in a color that has been used to highlight lines, the output will highlight in that color (see diagrams toward the end of this page for an example) This will enable users to find strong relationships between individual lines of code and the output that they generate, and further development on the feature can give developers insight about how certain elements were modified, when they were modified, by what library, etc.

The module utilizes the event aggregator to publish several events and each of those events was responded to in a different manner.

Files Used

graphical-analyzer.js: The main parent of all graphical analysis work. Subscribes to all events that are based on user interaction with either the text editor or the output panel. Contains all the logic and events that are performed as part of user interaction
visualAnalyzer.js: This is a small helper class which subscribes to one event from the aggregator: highlightVisualElement. It will check if any output element was hovered and if it is associated with a color as defined in graphical-analyzer.js and will highlight the output element with that corresponding color. If output element doesn't have a color, it highlights the default blue. It also unhighlights the element when it is hovered off
html-viewer.js: This file publishes all the graphical and non-graphical references when the code is run. We add an event to the aggregator called uniqueGraphicalReferencesCalculated. What this event does is it runs through all references from the user code. If the reference is graphical, it adds it to an array called uniqueReferences unless this array already has the reference in it, in which case nothing happens. This is then analyzed by graphical-analyzer.js to determine how many highlight colors are needed. Another event that is used as part of Graphical Analysis is outputGraphicalElementHovered. This checks whether the user has hovered over a graphical output element and, if so, sends the element to graphical-analyzer.js. If the element has lines of code in JS which are marked by a specific color, it publishes highlightVisualElement, which is responded in visualAnalyzer.js as detailed above.

html-viewer.js's outputGraphicalElementHovered had one more implementation that was begun in 2017 Summer but was not finished. It is detailed below

Work to be done:

As described above, we have an event outputGraphicalElementHovered that will give the user what graphical element was hovered in the output. The scenario that we want to tackle further is whether said element was manipulated multiple times. An example scenario is if the message "Hello" had the text "world" appended 3 times, we want to track what happened in each of the times it was appended.

The work had began to recognize all calls to a certain element, however the code began to get complicated and either returned no instances where multiple calls were made, or a very high number of instances (e.g. for a group of 4-5 functions called 2 times, there were over 1000 instances returned, which did not make sense). There is a todo line in one of the files that shows the location of this problem, so it may be an issue to tackle for anyone planning to work on this portion of the project

Pictures from poster:

Normal Developer workflow
New Features implemented

Cheers and I hope this gave some insight on the current state of this branch ~Varun Kulkarni, ASSIP Class of 2017