Graphical Analysis Work

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. 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.