devuxd / seecoderun Goto Github PK

Offers the users a textbox where they can enter text. Below the textbox is a display of the execution trace. As users type in the input textbox, the execution trace is filtered to matching entries in the execution trace.

Add a combobox that lets users select a specific column that they are searching. Each entry in the combo corresponds to a column in the table. In addition there's an extra entry that searches across "All".
User can search over either expression text, expression values.

SeeCodeRun has separate panes for editing js/css/html, viewing the resulting html output, and viewing console output. The panes should grow and shrink proportionally as the browser window is resized. Dragging the border between panes should change the relative size of panes.

Try to remove the CSS code in this pastebin. You will notice that the CSS code still in the DOM (in the head tag to be more specific) this also applies to JS code. The bug seems to be related to the appending behavior in which the code adds any CSS/JS code without removing the old one.

Sequentially highlight each expression as it executes. Show the value in a tooltip. Let the user scrub through the history through a slider. Or go back or go forward one step through a button.

Given a source location (e.g., row and column in editor coordinates), determine the corresponding expression and return the expression.

The corresponding expression should be the expression node lowest in the AST tree. For example, consider the following code.

var x = (y * 7) / z.

If the source location is the *, the corresponding expression will be (y * 7), as * is not an expression and (y * 7) / z is above (y * 7) in the expression tree.

When seecode.run first loads, the UI components are quickly rendered. Shortly after (but not immediately), the content in the ACE editor loads. Approximately 1 - 2 seconds later, the code in the ACE editor is executed, updating the output console.

Reducing the time from loading the page to when the code is first run will make seecode.run feel more responsive to the user. It may be sufficient simply to make sure that as soon as the page loads the process to beginning running the code begins.

A scatter plot visualization depicts the value of one or more data series over time. For example, a scatter plot might plot the value of j through each iteration of a loop:

User should be able to select a variable in code and then invoke a visualization using that variable.

For example, in the following code

(1) for (var x = 0; x < 5; x++)
(2) y = x + 2;

The user might select the expression x in line 2. This can then be used as an index into the Execution trace to get the values that the variable has through each iteration of the loop.

Hovering over the value of an expression in the code editor should display a popup with its value. If the expression executed multiple times (i.e., in a loop or in a function invoked multiple times), the popup should let the user select which to display.

Mockup:

Trace API should offer functionality for indexing the trace and letting clients search for matching expressions. For example, the user might search for all calls to JQuery methods that manipulate the DOM on the DOM element 'button5'. Support should be provided for querying based on both identifiers and runtime values.

Populate the code editor gutter with the value of the corresponding line provided by the Trace.

Index the execution trace to get a value summarizing each value. For a given line, first determine the corresponding statement. The value then depends on the type of statement.

assignment statements: value of variable being assigned
conditional statements: true or false
loops: total number of times loop executed
function invocations: return value of function

On the right edge of the code editor is a resizable gutter that can be used to display arbitrary text. Scrolling the code editor causes the corresponding sections of the gutter to scroll. Gutter text is populated by a visualization, which can access the gutter to write text for each line.

The gutter could be used to implement a visualization similar to Xcode's Playgrounds:

Or it might be used by a visualization to display other content.

This sample code under the html tab works fine in JSbin: http://jsbin.com/yiqodilaho/edit?html,js,output But generates an error in seeCode.run: https://seecode.run/#-KAbCyh8F6SpHiTVpOfq

I found that its not working as iframe tag has some set of restrictions and so doesn't allow scripts, API's, form submissions etc. So, I have used "Sandbox" attribute . "sandbox="allow-modals allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts" and it's working fine.

It doesn't work aurelia version. Aurelia Discussion Group says: "Instead of putting the attribute directly in the iframe tag, Try adding the attribute and its values dynamically using java script, might help. But, that doesn't work either. This dynamic implemantation code when tried in non aurelia version works fine again!

This feature is already existed in Seeconde.run. However, it seems the way it is currently implemented does not work properly in Aurelia.

Some execution visualizations may create standalone diagrams of execution state separate from the code. There should be a designated div where these can be displayed, perhaps as a separate tab at the location of the HTML output iFrame.

1. Alex and Steph merge into master
2. Sean and Brandon merge into master
3. Merge ExecTrace into master
4. Merge Abdulaziz's branch into master

The jQueryUI functions are no longer working with the transition to Aurelia framework. Have tried a workaround to use a constructor to get the element ID and then use that to make the draggable and resizable calls, but that didn't work. Need to find a solution that works without using jQueryUI.

SeeCodeRun currently does not have a title or header section of the webpage. Possible enhancements to this will be a Help/FAQ section, Contact section, or About Us.

This code works fine in jsbin:
http://jsbin.com/yiqodilaho/edit?html,js,output

But generates an error in seeCode.run
https://seecode.run/#-KAbCyh8F6SpHiTVpOfq
"Uncaught Error: ace.edit can't find div #editor"

The issue seems to be that ace is looking for a div that exists but is unable to find it. Perhaps the issue is with JQuery somehow not being included correctly?

When inspecting an object, developers often have a specific property they wish to see or a particular value they seek. For example, to debug a button that is apparently missing a label, a developer might first inspect the button object to find the button's label text.

Offer developers a search box at the top of the object browser. Typing text in the search box recursively searches through all properties and nested properties, matching both property names and property values. The resulting tree is then filtered, displaying only those properties that match the search (with nesting still indicated where applicable), with the matching text highlighted to indicate where it matched.

A data table view displays how a set of values (e.g., an array) changes over time.

For example, a data table might display 3 columns, showing for each invocation of a priority queue method the element inserted (if any), the element popped (if any), and the current contents of the priority queue.

SeeCodeRun enables multiple users to synchronously work on the same pastebin at the same time simply by sharing the pastebin's URL, seeing code changes in realtime. Users should be able to chat with others in the pastebin through a chat window, which is persistent between sessions.

There is already a Firebase backend, with a separate node for each pastebin. A Firebase-based chat can be built simply by adding a new node listing chat messages, as in the example code here:
https://www.firebase.com/tutorial/#session/j3v3r219xav

Using source rewriting with a Esprima / Escodegen, rewrite the user's JS code before execution to automatically insert autolog calls wrapping every JS expression.

e.g.,
var position = { x: oldPos.x, y: oldPos.y };
var newVal = foo(position);
if (newVal == param)
{

}
-->
var position = autolog({ x: log(oldPos.x, { PosData } ), y: autolog(oldPos.y, { PosData } ) });
var newVal = autolog(foo(autolog(position, { PosData } ), { PosData } ));
if (autolog(autolog(newVal, { PosData } ) == autolog(param, { PosData } ), { PosData } ))
{

}

The second parameter is an object encoding the location of the expression. Esprima provides information on the source location for every node in the abstract syntax tree. In this way, autolog records both the runtime value of each expression and the location of the expression in the original program text.

The trace should also record the order in which each autolog statement is called. In this way, information about the execution path, whether statements did or did not execute, and which statements are executing on each iteration of a loop can be recorded.

The content for the homepage on Github is currently taken from readme.md. Rather than describe the Aurelia skeleton, it should describe seeCode.run.

Offer a tree view for recursively exploring properties of objects. Invoking the component on an object displays a list of all of the objects properties in a propertyName: propertyValue format for primitives and propertyName: propertyValue format for properties that are themselves objects. Properties that are themselves objects display the type of the object and have a signifier denoting that they can be expanded (i.e., a dropdown arrow). Clicking on the arrow recursively expands the next level of the tree, showing the property objects properties.

Note that this issue encompasses only creating the object browser component, not invoking it from the seecode.run UI. There may be existing libraries that provide all or some of this functionality (certainly there exist JS tree view controls).

Here's an example of such a view from Google Chrome's Developer Tools:

Creating a new pastebine causes the page to freeze. There is a corrupted pastebin's data that is retrieved every time a new pastebine is accessed for the first time. It seems that refreshing the page fixes the issue. Please see this screencast that shows the bug in action
.

In browsers, all of the UI runs in a single thread (HTML5 webworkers support multiple threads, but only for threads that do not access the DOM). Writing JS code with an infinite loop will cause the browser window to crash.

To prevent this, one common approach is to rewrite Javascript to automatically insert timeouts. For example, this library will rewrite loops to check how long they have been executing and stop execution if a timeout has been exceeded: https://github.com/jsbin/loop-protect .

Hovering over an object value in the gutter brings up the object browser component in a popup window.