saltlab / clematis Goto Github PK
View Code? Open in Web Editor NEWUnderstanding JavaScript event-based interactions
License: GNU General Public License v3.0
Understanding JavaScript event-based interactions
License: GNU General Public License v3.0
As a user, I want to be able to bookmark the next episode being captured when interacting with the web app. I want to be able to see this bookmarked episode on the visualization later.
Metis will be demonstrated on February 1st. During the demo Metis will be checked out from GitHub, imported into Eclipse, and executed on an example web-application. The user's actions must captured within an XML file.
Refer to wiki for description.
When viewing the visualization of previously recorded episodes, from the file view.jsp (which loads view.html in an iframe) the error messages "Source of message is an actor (not lifeline) " and "Destination of message is an actor (not lifeline)" are thrown from the file sequence.js
Visualize the DOM tree, before and after the mutations, highlight the changes.
we can use D3.js http://d3js.org
(See also how Shadow DOM is using D3.js http://updates.html5rocks.com/2013/03/Visualizing-Shadow-DOM-Concepts)
Refer to wiki for description.
Currently, when browsing to http://localhost:8080/fish-eye-zoom/capturedStories.html to view the captured stories, the stories aren't shown in order because when they are stored to disk they are stored based on alphabetical order. Sorting them out based on the date would be more intuitive and easier for the user. Below is an image that shows the issue.
3 tabs for episode source, trace and result.
Source: event type + all contextual information about the event
Trace: full trace sequence diagram + separate panel for displaying the relevant code on demand
Result: mutated DOM elements and their attributes (the whole DOM?)
3 parts for episode source, trace and result.
Source: event type + [if type==DOM then target element, else if type==XHR or TO then ID)
Trace: names of functions (and async events) in the trace
Result: names/IDs of mutated DOM elements
This is the version we should use:
http://mvnrepository.com/artifact/com.google.guava/guava/13.0.1
Refer to wiki for description.
All logs should be in valid JSON format. The JSON logs will be used to populate a data-structure using Jackson.
Between parts of timeouts and XHRs
Most of the links on the wiki page https://github.com/saltlab/clematis/wiki are broken.
Showing episode type (episode name and background color), and timeStamp (or episode #)
The REST API should be documented on the Wiki (maybe it's there somewhere but I was not able to find it).
Consider using http://code.google.com/p/google-gson/
It is also available as a maven dependency: http://mvnrepository.com/artifact/com.google.code.gson/gson
Currently the api call to get the causal links is relatively slow because it uses brute force to search for episodes that contain timeouts, then searches for their callbacks. The same method is also used for XHR events. A better method would greatly speed up the load time for the visualization. This method is called "episodesContainTimeouts" and is located in src/main/java/com/clematis/core/episode/episodeResource.java
Since the approach to instrumentation was changed, line numbers for return statements, function calls, etc. have been inaccurate.
Can later be transformed into date format on server side for more readability.
In the visualization, on the episodes, change "DOM" to "Click" or "DOM events".
It has to be clear that the episodes are DOM events.
Layout, colors, transitions, etc.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.