wolframresearch / wolfram-notebook-embedder Goto Github PK
View Code? Open in Web Editor NEWJavaScript embedder for Wolfram Cloud notebooks
Home Page: https://wolfr.am/NotebookEmbedder
License: MIT License
JavaScript embedder for Wolfram Cloud notebooks
Home Page: https://wolfr.am/NotebookEmbedder
License: MIT License
Using https://codepen.io/nporto/pen/poJQoaz from #5
The value changes anyway but to something that is not expected:
Say I publish a notebook called "note.nb" to the cloud. Then I embed it on my website and play with it (e.g. http://www.fmt.if.usp.br/~gtlandi/qulib.html). Then I make some changes to "note.nb" and publish it again.
Then, when I open the website, I get something strange: first, I see the embed of the new notebook. But then after 1 second or so, it switches back to the old save. This seem to be only a viewing issue (maybe cookie related), since if I try to download the notebook, it download the correct version.
Currently to get the value of a DynamicModule variable in a notebook, you have to explicitly set the name
of the variable.
This is a huge limitation when it comes to deeper integrating the WL Notebooks within 3rd party platforms.
Ideally you can expose a method to discover all the "available" dynamic module variables in the embedded notebook which in turn will allow the creation of notebook agnostic functionalities such as "save and resume"**
**By exporting the current internal state of a Notebook (using getDynamicModuleVariable) and re-importing it (using setDynamicModuleVariable) at a later point in time to introduce advanced "save and resume" capabilities, especially in somewhat larger notebooks with multiple cells.
Hello and thanks for this library.
I 've been experimenting with the official examples regarding the Notebook API but
i can't seem to make the getDynamicModuleVariable
work.
Looking at the docs: the params of the method should be cellId
and name
of the variable but this keeps throwing UnknownVariableName
error.
The setDynamicModuleVariable
method is working fine.
I am using v0.1.5
Here is a modified example from the official manipulate example.
https://codepen.io/nporto/pen/poJQoaz
value โ The new value of the variable in JSON expression representation (see below).
There's nothing below that explains it.
Additionaly setDynamicModuleVariables
works with value : "True"
which means there's more to say than 'it is ExpressionJSON' because representation of True
is "true"
.
Please make this clear.
Are there any possible or near future workarounds to use the notebook-embedder with non-public notebooks?
Or is something like this planned?
This is to inform people who use webpack in their apps.
Webpack build configs with the default jsonpFunction name will not be able to use this library.
You will see something like this:
Solution
Modify your webpack output config like this:
{
"output":{
"jsonpFunction":"myAppJSONPcallback",
"library":"myApp"
}
}
Recommendation for Wolfram
You could apply the same config at your end so that this won't be an issue for others
Could someone write example code to show how to use the dynamic javascript control of a notebook using promises.
embedding.then(function (nb) {
// This will reset the DynamicModule variable x$$
// in the first cell of the notebook.
return nb.getCells().then(function (cells) {
nb.setDynamicModuleVariable({
cellId: cells[0].id,
name: 'x$$',
value: 0
});
});
})
and preferably could someone show to get the code working using async, await. I don't mind submitting the async, await code but need to get the promises working first
Here is my working demo code The file is saved as demo.html
<script crossorigin src="https://unpkg.com/[email protected]"></script>
<div id="notebookContainer">...</div>
<script>
var embedding = WolframNotebookEmbedder.embed('https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb', document.getElementById('notebookContainer'));
</script>
When using setDynamicModuleVariables
method one may face an unsafe expression warning:
Rejected unsafe expression bar during evaluation of ExecuteInDynamicModules[{HoldComplete[FE`x$$...]}, {}, {AsynchronousEvaluate["uuid", Set[FE`x$$..., bar[2]]]}, {}]
But that warning is a side effect and it can't be captured neither in then/catch for the method nor as an 'error' event of the notebook. What is the proper way to handle this?
In some cases the import fails when trying to use the default export so its better if you also include aliases in the docs.
import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder'
A feature request
While in majority of cases DynamicModule[{x},..
will be typeset to
DynamicModuleBox[{ $CellContext`x$$ }, ...
the majority of users will not know that. So if the UI creator used x
the name
should remain "x"
But since
We need to meet middle way.
So I propose the name
to be user friendly and trying to match fullName
being strict full name for an explicit match only and for a full control for edge cases.
I'm using the wolfram-notebook-embedder
within a react application to render some notebooks for a class (see e.g. here by clicking the 3rd Wolfram Language
tab on the top of the page).
I was wondering how best to style the various sections using css selectors?
Inspecting an embedded dummy notebook with various styles, it seems to load various style tags directly (e.g. for a 'Title' section):
<style type="text/css" data-is-wolfram-notebook-style="true">
.cc11 {
font-family: 'Source Sans Pro','Lucida Sans',Arial,sans-serif;
font-size: 44px;
font-weight: 400;
font-style: normal;
color: rgba(204,10,2,1);
}
</style>
Presumably one could overwrite these using something like:
.cc11 {
color: rgba(0,255,0,1) !important;
}
My problem is that the class naming does not appear to be consistent. Even within the same notebook, if I reload a bunch of times the class name for 'Title' jumps around from .cc11
to .cc7
, .cc8
etc.
Any ideas on how to proceed?
I don't see events evaluation-start/stop
fired when the slider is released in e.g. Manipulate[Sin[x], {x,0,1}]
.
From api description dynamic triggered evaluation should be announced too, or?
As far as i understand, when a notebook is deployed/published the cloud generates a /statichtml/ version of the specific notebook.
Can this process be triggered manually on the client?
This is helpful when we need to take a "static" snapshot of the current progress of a notebook for archiving or versioning purposes and cannot use any rasterized image format which will result in losing the content (unsearchable, low res preview etc).
Is any other WL method available for such use?
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.