Overview of changes in the WLJS Notebook
WLJS Notebook – this is an application similar to Jupyter And Mathematica. The user interface is made on Electronand the server runs on the Wolfram Language. That is, it is not another shell for Jupyter, but a completely independent application. You can read more about the project in the previous articles: Wolfram Language JavaScript Frontend and Open-source Wolfram Language Notebook or How to recreate the minimal Mathematica kernel in Javascript. In this article, I will try to tell you about what we have achieved recently. We have added new functionality, fixed many errors, optimized interaction with the server and accelerated code execution in the interface. And of course, we have made many changes to the user interface and improved graphics. More about all this under the cut!
General style of the application
We are constantly working on the style of the application and adding various new effects and here it is better to see once and compare with the old version than to describe it for a long time (all examples will be for Windows 11):
The window title is now active. It contains controls from left to right:
Main menu
Open folder
Hide/Show Left Navigation Area
Save document
Share link
Command menu
Leave the calculations
Reconnect the core
Changed default fonts and element scaling
The settings menu is now in the lower left corner. Previously, it was in the standard menu for any window
New icons for different file types
The active editor area is now highlighted with a frame
The style of highlighting the current cell has changed – instead of a dotted frame, the cell is now highlighted in color
Pop-up buttons for cell control are now more compactly located and do not take up space in the window
Added transparency effects
Our inattention to the HTML version
During development, we encountered one problem that was not obvious to us. We use a custom template engine, which is somewhat similar to JSXbut instead of JS it uses WL – that is, we call it WLX. And when forming pages, for a very long time we ignored the correct use of the first line of HTML documents:
<!DOCTYPE html>As a result, because we didn't use the doctype hint, our application thought that all pages needed to be rendered according to the HTML v1 specification. Because of this, we couldn't figure out for a long time why many things didn't work when styling CSS styles, such as shadows or different types of headings in Markdown markup. But the biggest problem for me personally was the font scale. Below is an example where I compared the display of the same document before and after enabling DOCTYPE:
As you can see from the screenshot above, line spacing has become more convenient, the standard scale has increased, and headings of level 2 and higher are now displayed correctly.
New charts
In Mathematica and the Wolfram Language, everything the user sees is an “expression.” And the user interface can display it depending on the form of the expression. Almost the same as HTML, only expressions in WL can also be calculated. Mathematics is famous for its variety of different graphs. We can't just display them as a picture, because our main goal is to reproduce the principles of Mathematica using the web stack, which means that expressions must also be hidden behind our graphs. Gradually, we add more and more graphics that already exist in Mathematica. For example, in the first versions, charts were not available to users, and 3D graphs were very poor. In the current version, we have added a lot of new things.
As you can see from the example above, there are now more options for styling 3D graphs. We've also added a grid and axis labels, which have been requested for a long time. None of this was available before. In addition, users now have access to charts and a larger number of primitives that can be used in Graphics.
And now you can customize the lighting on the graphs (without RTX):
And with ray tracing of course:
Dynamics and animations
We have added several custom functions that are automatically imported when the application starts. The first function is ManipulatePlot. This is a slightly simpler option. Manipulate + Plot from Mathmatica, which works well in WLJS and is suitable for simple interactive graphs. For example, like this one:
Another similar function is AnimatePlotwhich immediately creates “animation” without sliders and buttons:
All front-end dynamics are based on event handling. Most functions for creating animated and dynamic graphs are some form of event handler. EventHandler. After the function is executed, an object is created on the UI that can generate some events, for example, by timer. It sends them to the server and the server responds with messages that tell the client what and where to change.
But in this review I will not dwell in great detail on this particular aspect, as it deserves a separate large article.
Command input field
The application window header now has a separate input field for pre-prepared commands. The principle of this input field is as follows: the user selects the desired command with the mouse or keyboard, and the application inserts a special object at the current cursor position that implements what the user wants. Then, by “activating” this object, an expression is inserted into the cell with the code. It is best to show this with a specific example. For example, in the list of commands there is an image capture from a camera:
Another useful example is a function options table. You first need to write a function, then execute the “show option” command. Then a table of options with default values will be inserted in the block under the current cell. You can select any options from the table:
After the user clicks the check mark in the upper right corner of the table, all selected options will be inserted into the function arguments:
What commands are currently available:
Create/Rename Notebook
Show options
Insert a gizmo into the chart for navigation
Format text/code
Insert matrix/data file/camera image/special character
Open terminal
Chat with LLM
But if suddenly the user wrote something in the command input field that is not in the prepared list of commands, then the application creates a chat with a large language model. By default, this is the GPT of the current public version, but you can always configure any other model that supports the OpenAI API. Yes, you will need a VPN if there is no access to openai.com for the current IP and, of course, a key. You can configure the parameters of queries to the language model in the settings menu in the AI Assistant section:
Well, here's what it looks like in action:
Mixing Code and Markdown
Now when formatting .md cells, you can use not only the standard syntax, but also Wolfram language expressions using WLX syntax. That is, if I create a cell like this:
.md
# Current date is <DateString></DateString>Then I get the following result:
You can read more about WLX in the documentation, but in short, standard HTML is converted into markup, and all tags with a capital letter are converted into expressions:
<div> // обычный HTML
<$MyVariable /> // Одиночнй тег превращается в вызов переменной
<MyFunction>arg1 arg2</MyFunction> // парный тег превращается в вызов функции
// MyFunction["arg1", "arg2"]
</div>Drawing in MD
Now you can draw some block diagram right on the spot (by the way, I did this for KDPV). To do this, you need to enter in the .md cell !![] execute the cell and then you can draw in a separate Excalidraw block:
After the user has finished the drawing process, you can again place the cursor in the text part of the cell, press the key combination Shift+Enter and insert the final image into the output cell like this:
Documentation
All built-in functions now have an extra button in the corner of their tooltip that opens the function's documentation page directly from the Wolfram Research website:
Terminal
Now, using commands, you can launch a separate terminal window that will allow you to execute commands on the main server core. For example, you can get direct access to servers that process events:
Optimization
One of the bottlenecks in the interaction between the client and the server is serialization and masking of data when transmitting expressions via the WebSocket protocol. Among other things, we are trying to reduce the server response delay and increase the speed of transferring large amounts of data. We managed to optimize masking and unmasking of data for WebSocket, which I wrote about in my previous article. And also serialization in JSON. Thanks to these optimizations, the server can stream data with a fairly high frame rate. For example, below is a demonstration of real-time calculations:
Tables and datasets
Now there are special ways to display TabView and Dataset objects on the frontend:
Conclusion
In fact, these are far from all the changes that have occurred with the WLJS Notebook project. There are many more, but in this article we tried to tell you about the most noticeable and useful ones. You can always read more in list of releases, documentationV project blogas well as in the examples folder (on all screenshots it is on the left). Thank you all for your attention, see you in the next article!
