This is the graphical interface that you can use to interact with sisl's visualization module.

It consists of two parts:

• Back-end: The backend is implemented in python. The most important part is the Session class which stores and manages the app state. The Session can be connected to the frontend either using pyodide (it runs directly on the browser) or through sockets (implemented with flask and flask-socketio).
• Front-end: A javascript/typescript UI, which is developed using React. The build is shipped with the python package and also available at https://pfebrer.github.io/sisl-gui/.

It is extremely simple to install sisl-gui with pip:

pip install sisl-gui

This is the simplest way, since it doesn't have any requirements. You don't even need to install it as mentioned in the previous section, just go to https://pfebrer.github.io/sisl-gui/.

You can use the sisl-gui command.

import sisl_gui

app = sisl_gui.launch()

The build branch contains the ready-to-use UI. You can download its contents and open index.html in your favorite browser to start enjoying it.

This branch is shipped automatically with the sisl-gui package and is available at https://pfebrer.github.io/sisl-gui/ (hosted by github pages).

When a commit is pushed to the master branch and files inside the frontend folder have been modified, a build is generated and this branch is automatically updated through Github Actions.

The rest of branches are sources.

If you want to develop a new feature of the UI, you'll need to have nodejs and npm installed. Then, just clone this directory, start a new branch, and run npm install inside the frontend directory. This should install all the project's dependencies as listed in the package.json file. Then just run npm start to start a development server where you can visualize your code changes in real time. If you want to generate a production build, you should run npm run build.

The same trigger that updates the build branch also pushes the new build to its location in the python package. So, any change implemented to the front-end is immediately synced to the python package if the tests pass succesfully. Therefore, don't forget to git pull to get the last build!