probmods / webppl-editor Goto Github PK

View Code? Open in Web Editor NEW

8.0 13.0 1.0 2.39 MB

Browser-based editor for WebPPL

License: Other

CSS 5.41% JavaScript 94.59%

webppl editor

webppl-editor's Introduction

A browser-based code editor for WebPPL (requires version 0.9.0 or higher)

Demo: https://probmods.github.io/webppl-editor

Usage:

<html>
<head>
<meta charset="UTF-8"> <!-- tell the browser that editor.js contains unicode -->
<script src="webppl.js"></script> <!-- compiled webppl library; get this from https://github.com/probmods/webppl -->
<script src="webppl-editor.js"></script>
<link rel="stylesheet" href="webppl-editor.css">
</head>
<body>
...
</body>
<script>
// find all <pre> elements and set up the editor on them
var preEls = Array.prototype.slice.call(document.querySelectorAll("pre"));
preEls.map(function(el) { editor.setup(el, {language: 'webppl'}); });
</script>
</html>

webppl-editor installs these functions in the global namespace:

editor.setup(): converts a DOM element into an editor
editor.makeResultContainer(): used to insert custom output into the results section of the editor
editor.put([key,] object): supports working across multiple code boxes. Stores an object (using an optional key) for use in other code boxes. If no key is specified, you'll get an automatically generated one.
editor.get([key]): retrieves the object with key key. When called with no key, returns the entire store.
editor.MCMCProgress(): displays a progress bar during MCMC inference (work in progress).
print prints an object the results section (works both in WebPPL and vanilla Javascript).

We also ship the editor as editor.ReactComponent.

Development:

grunt browserify # makes webppl-editor.js
grunt css        # makes webppl-editor.css
grunt uglify     # makes webppl-editor.min.js
grunt bundle     # = browserify + css
grunt watch-js   # reruns browserify when it detects file changes
grunt watch-css  # reruns css when it detects file changes

webppl-editor's People

Contributors

Stargazers

Watchers

Forkers

vtange

webppl-editor's Issues

Provide wpEditor.print for printing to results box from Javascript

This is needed for the Javascript boxes on dippl. I tried the following workaround, but it doesn't reliably print to the correct results box (and instead adds to the results for a previous webppl box):

var printResult = function(x){
  var container = wpEditor.makeResultContainer();
  container.appendChild(document.createTextNode(x));
}

Check if WebPPL is available; while it is not, disable the run button

WebPPL is a big library and takes a while to load (and, in the current version, to compile packages as well). Pages that include code boxes would look better if the code blocks could immediately be transformed into CodeMirror boxes, even if WebPPL isn't available yet.

Fix React propType warning

webppl-editor.min.js:14 Warning: Failed propType: Invalid prop `codeMirrorInstance` of type `function` supplied to `CodeMirror`, expected `object`. Check the render method of `CodeEditor`

Integrate with literate webppl/markdown editor

Results minHeight should go back to 0 at some point

So that the result box is always appropriately sized to the content.

This provides additional motivation for refactoring viz to pass React elements back to editor, rather than viz rendering them itself.

(Other libraries might not be so considerate, though, so I think I need to think harder about this)

Cursor jumps to start of textbox

We're using a WebPPL editor for class assignments, and some students have complained that the cursor is jumping back to the start of the textbox while they're editing.

This only happens after webppl has thrown an error. I've tracked it down, and commenting out this line fixes it for us:

webppl-editor/src/index.js

Line 551 in c9cd579

runClockId = setInterval(function() {

What's the run clock for? Is there a reason we shouldn't comment this line out?

Cheers,
Luke

Use parameterized pausy trampoline runner

After probmods/webppl#425 is merged, make a reified runner by calling util.trampolineRunners.web on an error-handling function.

Better syntax highlighting

Add a console.mute method

For manually suppressing things like the beta underflow / overflow

Alternatively, we could only intercept the info, warn, and error methods (this would require going into webppl and changing some logs to infos)

Should include webppl as devDependency

Currently, it is a gitignore'd symlink inside the compiled directory, which is brittle.

MCMC progress bar is janky in Safari

Add a clear button for results

Handle errors thrown as strings

The editor shows a readable error message for code that calls this function:

window.foo = function() { throw new Error('foo') };

However, it doesn't show any message for code that calls this function:

window.bar = function() { throw 'bar' };

In various places in webppl (and probably also in its dependencies), errors are thrown as strings, so it's important to handle this case.

Investigate autocomplete

for, e.g., parameters of erps and inference algorithms.

Inference progress interface

I've added callbacks to webppl's MCMC method will allow us to experiment with an inference progress interface at some point.

As a proof of concept, I made an example of using these callbacks to drive a progress bar in node.

The interface for this is very similar to the one we discussed earlier.

Add run-time clock for jobs that take longer than 1 second

This gives the user some assurance that things are still working

Repeat counter for console.log is broken

console.log(1)
console.log(1)
console.log(1)
console.log(2)
console.log(2)
console.log(2)
console.log(3)

Move visualization functions to webppl-viz

Throttle React updates

non-performant example added in 9a33aff:

repeat(1000, function() { console.log(uniform(0,1))})

Pretty print ad values

Errors not always caught

The ReferenceError is successfully caught here:

print('start 2');
meh
hist(repeat(1e5, flip))
print('end 2')

But not here:

print('start 2');
hist(repeat(1e5, flip))
meh
print('end 2')

Use official react-codemirror

My PR just got merged (here), so as soon the version on npm is updated, you can switch from using my fork to the official react-codemirror node module.

Add a more flexible fold syntax

e.g.,

var objectWithComplexDefinition = /*<fold>*/complexStuff({
  thatStretchesOverMultipleLines: true,
  ...
})/*</fold>*/

Code with ///fold sections are not folded after editor is initialized

Add a persistence option

Like on probmods.org, use localStorage to store user modifications of code boxes and allow them to revert back to the default.

(Particularly helpful if the browser crashes -- you don't lose all your work)

Merge Codemirror CSS with our bespoke CSS

Hook up syntax errors to the editor

This came up during summer school planning. I'm not sure exactly what can be done, but I think the idea is to make use of the extra information we'll get from probmods/webppl#292 and probmods/webppl#314.

Add keyboard shortcut for running code

Heuristically rotate axis tick labels so they don't overlap

Syntax error formatting

Once probmods/webppl#675 is merged, program code will no longer be parsed by sweet.js. I've tested this change with the editor to make sure that the bit where you parse exception text for syntax errors hasn't broken. As far as I can see (though you may want to check) it still basically works, although there may be a small problem with formatting:

(Update: I've just noticed that the line number reported for syntax errors differs by 1 following this change. See the example in the webppl PR.)

On the plus side, it looks like this PR fixes your 'syntax - hanging dot' todo from the editor demo page.

console info, warn, error icons hidden

icon absent:

console.info('foo')

but it's present if we do it twice:

console.info('foo')
console.info('foo')

Error highlighting broken in non-Chrome browsers

We need to implement custom stack parsers to handle non-Chrome

Detect language from CodeMirror value, not React prop

A code box that looks like this should be evaluated as Javascript:

// language: javascript

...

Add a results metadata drawer

That shows the seed that was used and the runtime (hidden by default but pops out when you click an icon in the upper right hand side of the results box)

Drawer should show package versions

Editing slows down for larger code boxes

For a model with ~3800 characters (~500 words), there is already a small but noticeable delay between typing and characters appearing.

Should probably keep a reference to wrapped runner, not base

Reproducing a Slack conversation:

andreas: on recent dev, we've changed how the trampolineRunner can be accessed (because we needed it for the mongodb params store and the old way would have made accessing it there complicated): https://github.com/probmods/webppl/blob/7df4adce7e057b34a2e634f2af1a27a042e51ad0/src/main.js#L231 — i think this means that the editor needs to adapt as well. can you take a look? i think it might be a very small change. if it looks like a bigger deal, let me know

long: i suspect that this doesn't matter. but for a somewhat bad reason. the editor creates a base runner and passes that into prepare. and then editor keeps a reference to the base runner around for things like resuming trampolining. i think that what the editor should do is keep a reference to the wrapped runner. in which case the recent access changes would matter. and i'm surprised that keeping only a ref to the base runner hasn't surfaced more errors

Provide a way for users to stop long-running computations

Runtime clock isn't stopped on errors

The 'tricky reference error' demo doesn't work in Safari

The error isn't displayed beneath the code box as expected. The following error is logged to the console:

TypeError: undefined is not an object (evaluating 'e.message')
onerror - editor.js:71806

I'm not sure which browsers you're targeting, but I thought I should mention it.

Markdown editor should support drag & drop

parser.setReadtable is not a function (Jupyter)

I'm attempting to add webppl to a (python) Jupyter notebook using an admittedly hacky method.

Unfortunately I get the following error from webppl: TypeError: parser.setReadtable is not a function. Any thoughts or an alternate suggested method? Thanks!

Cleanup happening too early in some models?

If I run the following model on the editor test page...

var myDraw1 = Draw(200, 200, true);
loadImage(myDraw1, "http://dippl.org/assets/img/the_scream.jpg");

var myDraw2 = Draw(200, 200, true);
loadImage(myDraw2, "http://dippl.org/assets/img/box.png");

...I observe this error in the console:

Uncaught TypeError: resumeTrampoline is not a function
Obj.onload @ draw.js:116

Add warn and info helper functions

So that, e.g., webppl util.warn results show up in the results box.

By default, trim code for setup()

By default, we should trim the output for code blocks with formatting whitespace before and after:

<pre><code>
var a = 'foo';
</code>
</pre>

Unobvious stack error for model with 128 flips

I get a call stack error for a model that consists of just 128 lines, each line a flip() call.

The error happens on the line in the compiled code right before we start running the trampoline:

var t = p(s, k, a);

This appears to work okay on the command line.

probmods / webppl-editor Goto Github PK

webppl-editor's Introduction

webppl-editor's People

Contributors

Stargazers

Watchers

Forkers

webppl-editor's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs