Overview of changes in the WLJS Notebook

Very briefly what the application consists of

Very briefly what the application consists of

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):

Was

Was

It became

It became

  • 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:

Left "to"and on the right "after". This is not the current version, but the version at the time of the fix.

On the left is “before” and on the right is “after”. This is not the current version, but the version at the time of the correction.

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.

3D graphs are still WL expressions that can be copied, pasted, parsed, etc.

3D graphs are still WL expressions that can be copied, pasted, parsed, etc.

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):

3 light sources illuminate the ball and the cube

3 light sources illuminate the ball and the cube

And with ray tracing of course:

Sphere and cylinder with "plausible" reflections

Sphere and cylinder with “realistic” reflections

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:

Interactive sine graph

Interactive sine graph

Another similar function is AnimatePlotwhich immediately creates “animation” without sliders and buttons:

Looping animation

Looping animation

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:

Taking an image from a camera and turning it into a Wolfram Image object

Taking an image from a camera and turning it into a Wolfram Image object

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:

Options table

Options 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:

Selected options are highlighted in green.

Selected options are highlighted in green.

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:

In the settings you can change the base address, model name, temperature, context size and of course change the access key

In the settings you can change the base address, model name, temperature, context size and of course change the access key

Well, here's what it looks like in action:

The assistant can change the document structure and execute code

The assistant can change the document structure and execute code

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:

Current date in title

Current date in title

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:

Drawing block based on Excalidraw

Drawing block based on Excalidraw

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:

Output cell with the resulting image

Output cell with the resulting image

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:

New Electron window with official documentation page

New Electron window with official documentation page

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:

Terminal with access to master kernel

Terminal with access to master kernel

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:

The animation weighed more than 8 MB, so here you can give a medal for JPEG compression

The animation weighed more than 8 MB, so here you can give a medal for JPEG compression

Tables and datasets

Now there are special ways to display TabView and Dataset objects on the frontend:

Displaying tables

Displaying tables

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!

"Atom" with backlight

“Atom” with backlight

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *