Skip to content

Dynamic diagram

Jump to bottom
Fernando Dodino edited this page Oct 5, 2023 · 15 revisions

Dependencies

Third-party components

Dynamic diagram uses

but in order to work offline, preinstall script downloads it inside this folder

- public
  - diagram
    - lib

So, if you do a npm install or npm i this process will occur automatically. For further explanation or if you need to upgrade the current version of these libraries, please see download-libs.sh.

Diagrama Dinámico - dependencias drawio

Fonts

We use Inter font inside the dynamic diagram page, but instead of using a CDN we have manually downloaded a WOFF which is a light version of the font. This font file is located in a special font folder:

image

This file is < 17 kb size, so it's not .gitignored, but we want to keep a minimum amount of typefaces (a.k.a. fonts) used. For now, just one is enough.

If you plan to change the typeface, keep in mind these resources:

  • 5 steps to faster web fonts
  • Google Font helper, allows you to convert a google font into a woff file (collecting only required fonts of a specific typeface, remember that bold/italic/regular is a font and Inter/Verdana/Noto/Ubuntu is the typeface name)

Running everything locally

This strategy allows us to have all dependencies in local files inside the server: you don't need Internet connection at all in order to run wollok-ts-cli and open a dynamic diagram.

Diagrama Dinámico - local 2

All files in public are accessible via localhost:3000 web server.

Interaction between REPL and Dynamic Diagram

Every time we start the REPL, we have

  • a client process (the REPL)
  • and a server process (Node web server, hosting index.html with dynamic pages)

The communication from client to server is achieved via socket.io, emitting these events:

  • initDiagram: dynamic diagram started for first time. The server will set the dark/light mode, and eventually any other configuration.
  • updateDiagram: any time there is a change in Wollok VM. We call updateDiagram 1. on start, 2. on any REPL command executed.

image

Diagram Generator

updateDiagram event is associated with getDataDiagram function in diagramGenerator.ts file.

This function gets the current frame for the interpreter, and

  • filters objects that doesn't belong to imported definitions for the current file
  • filters objects like true, false, self, that are required by Wollok VM
  • and traverses the whole graph between the objects, avoid duplicating already created nodes

This includes root references from REPL and wkos and their references.

Imported definitions: dynamic diagram vs. VM

Lets recap on "filters objects that doesn't belong to imported definitions for the current file"

Clone this wiki locally