SQL Frames REPL
The REPL component is the easiest way to directly embed view-only or interactive SQL Frames low-code API based scripts.
The REPL provides auto-suggest for the SQL Frames API making it super easy to create highly interactive tables and charts in minutes.
By default the
REPL component hides the source code. For example, the user by
default sees a date below which is the result of executing some piece of code.
It is possible to unhide the code using the control on the side.
Using Docusaurus Pages, Documents and even Blog posts can be created using pure markdown (.md) or markdown extensions (.mdx). The later allows embedding custom tags that provide custom markup via React components.
Within the MDX files, the markdown for the above
would be as follows
return new Date();
Ideally the ```js and ``` lines along with blank lines shouldn't have been there
but MDX seems to require them. They are not required when
REPL is included directly
within other React components (although, for multiple line scipts, they have to be provided
as a string as shown in the
Caching & Sharing Data
Since all the data transformations happen on the client-side, only the raw-datasets need to be loaded into the browser. These datasets can be large and may take more time to load from the network. However, it is possible to cache and also share objects across REPL instances. Data can be shared with session scope or page scope.
It is possible to share across pages using
S (session scope).
Having many pages using the session scope each storing their own potentially large datasets can cause memory problems as these objects are not cleared till the user completely leaves the site. Hence, use the session scope carefully.
This is shown below with two REPL instances.
It is possible to share within the same page using
P (page scope).
Leaving the page frees up this data. Use this scope for large datasets
so the memory is freed upon leaving the page. This results in reloading
the data upon revisting the page.
The page scope behavior can be challenging to work with large data sets.
Hence, in development mode, the page scope
P points to the session scope
Updates to the page will hot reload the page (retaining the session scope)
and the large datasets are still in memory and helps iterate faster.
Notice how both the REPL instances display the same time and random value.
In addition, the time and random number change with each visit to the page.
Had the data been stored in
S then only the first visit would have set the
values and subsequent visits to the page show the initial values.
This difference is noticeable only in the production mode since the page and session scopes are same in development mode for rapid prototyping with larger datasets.