## Goal Build a web application based on [next.js](https://nextjs.org/) that visualizes runs from Distributed Summary Synthesis (DSS) based on the results data available in a database. ## Issue Currently, we have a [a Python script](https://gitlab.com/sosy-lab/software/distributed-summary-synthesis/-/blob/main/contrib/visualization/visualize.py) that connects to [the database of our analysis results](https://gitlab.com/sosy-lab/software/distributed-summary-synthesis/-/blob/main/contrib/visualization/visualize.py?ref_type=heads#L25) and renders the information from [a hard-coded run](https://gitlab.com/sosy-lab/software/distributed-summary-synthesis/-/blob/main/contrib/visualization/visualize.py?ref_type=heads#L26) into a HTML page. It then starts a web server that serves this page. This script has two main caveats: - To visualize a different run, it must be re-executed. This means that the script can not be deployed standalone. - Python is a subpar choice for designing a web-based visualization, especially because IDEs provide little support for the Python-based styling ([example code](https://gitlab.com/sosy-lab/software/distributed-summary-synthesis/-/blob/main/contrib/visualization/visualize.py?ref_type=heads#L283)). This means that maintenance of the visualization is unnecessarily difficult. ## Technical Details DSS writes its analysis results into a database ([reference](https://gitlab.com/sosy-lab/software/distributed-summary-synthesis/-/blob/main/doc/reference/Database-Tables.adoc?ref_type=heads)). The existing script ([mainly lines 27-117](https://gitlab.com/sosy-lab/software/distributed-summary-synthesis/-/blob/main/contrib/visualization/visualize.py?ref_type=heads#L27-117)) can be used as a reference on how to process this data. It would be good to have the visualization webapp as a continuously running service that can be queried for different runs. Probably a resource-based web app makes sense, with routes like `http://visualization/runs/Run%2F1` to display the visualization for the run with name 'Run/1'. Wireframe for prototype: https://www.figma.com/board/gaq1doKvw5QERuniqQhBIB/DSS-Run-Visualization-Wireframe?node-id=0-1&t=7ZkngaK4OI3m7wsN-1 ## First Steps First, install [skaffold](https://skaffold.dev/) and [minikube](https://minikube.sigs.k8s.io/docs/) (or Docker Desktop with a running Kubernetes instance, or some other distribution of kubernetes). Then [build and run](https://gitlab.com/sosy-lab/software/distributed-summary-synthesis/-/tree/main/doc/how-to) a first instance of DSS; please create an issue in this repository if you encounter any errors. The first run should create the SQLite database `/tmp/messages.db` in the docker container of the service `scheduler`. You can use this for initial development, so save it. Then initialize a new next.js project in directory `visualization` in the root of this repository. **Important: The project must use the app router, not the page router.** Then build a first server-side route `/api/runs`. When called with a HTTP GET request, this route should fetch all distinct run ids from a configured DSS database and return them. Then build a frontend component to display these run ids to the user. The user should be able to select one run id. This routes him to a new page `/app/runs/[runId]/`. This page can just show 'Hello World' for now. As soon as you have this, please open a merge request so that we can talk about the next steps.