feat(composeui): scaffold first interactions with graphql

Author: Tbaile

alchemist-composeui/build.gradle.kts

@@ -1,3 +1,4 @@
+import Libs.alchemist
 import Util.devServer
 import Util.webCommonConfiguration
 import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
@@ -35,6 +36,17 @@ kotlin {
                 implementation(compose.foundation)
                 implementation(compose.material)
                 implementation(compose.components.resources)
+                implementation(libs.androidx.lifecycle.runtime.compose)
+                implementation(libs.androidx.lifecycle.viewmodel.compose)
+                implementation(libs.apollo.runtime)
+                api(alchemist("graphql"))
+            }
+        }
+
+        val jvmMain by getting {
+            dependencies {
+                implementation(compose.desktop.currentOs)
+                implementation(libs.kotlin.coroutines.swing)
             }
         }
     }

alchemist-composeui/src/commonMain/kotlin/it/unibo/alchemist/boundary/composeui/App.kt

@@ -9,37 +9,45 @@
 
 package it.unibo.alchemist.boundary.composeui
 
-import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.Button
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.compose.collectAsStateWithLifecycle
+import androidx.lifecycle.viewmodel.compose.viewModel
+import it.unibo.alchemist.boundary.composeui.viewmodels.SimulationStatusViewModel
 
 /**
  * Application entry point, this will be rendered the same in all the platforms.
  */
 @Composable
 fun app() {
     MaterialTheme {
-        var showContent by remember { mutableStateOf(false) }
         Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
-            Button(onClick = { showContent = !showContent }) {
-                Text("Click me!")
-            }
-            AnimatedVisibility(showContent) {
-                val greeting = remember { getPlatform() }
-                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
-                    Text("Compose: $greeting")
-                }
-            }
+            simulationStatus()
+        }
+    }
+}
+
+@Composable
+fun simulationStatus(viewModel: SimulationStatusViewModel = viewModel { SimulationStatusViewModel() }) {
+    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
+    Text("Simulation status: ${uiState.status}")
+    Text("Simulation time: ${uiState.time}")
+    Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+        Button(onClick = { viewModel.pause() }) {
+            Text("Pause")
+        }
+        Button(onClick = { viewModel.play() }) {
+            Text("Play")
         }
     }
 }

alchemist-composeui/src/commonMain/kotlin/it/unibo/alchemist/boundary/composeui/viewmodels/SimulationStatusViewModel.kt

@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2010-2025, Danilo Pianini and contributors
+ * listed, for each module, in the respective subproject's build.gradle.kts file.
+ *
+ * This file is part of Alchemist, and is distributed under the terms of the
+ * GNU General Public License, with a linking exception,
+ * as described in the file LICENSE in the Alchemist distribution's top directory.
+ */
+
+package it.unibo.alchemist.boundary.composeui.viewmodels
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import it.unibo.alchemist.boundary.graphql.client.GraphQLClientFactory
+import it.unibo.alchemist.boundary.graphql.client.NodesSubscription
+import it.unibo.alchemist.boundary.graphql.client.PauseSimulationMutation
+import it.unibo.alchemist.boundary.graphql.client.PlaySimulationMutation
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.update
+import kotlinx.coroutines.launch
+
+data class SimulationState(val status: String = "Loading", val time: Double = 0.0)
+
+class SimulationStatusViewModel : ViewModel() {
+    private val _uiState = MutableStateFlow(SimulationState())
+    val uiState = _uiState.asStateFlow()
+
+    // TODO: parameterize the host and port and separate client in different file
+    private val client = GraphQLClientFactory.subscriptionClient(
+        "127.0.0.1",
+        3000,
+    )
+
+    fun pause() {
+        viewModelScope.launch {
+            client.mutation(PauseSimulationMutation()).execute()
+        }
+    }
+
+    fun play() {
+        viewModelScope.launch {
+            client.mutation(PlaySimulationMutation()).execute()
+        }
+    }
+
+    init {
+        viewModelScope.launch {
+            client.subscription(NodesSubscription())
+                .toFlow()
+                .collect { res ->
+                    _uiState.update {
+                        val data = res.dataOrThrow()
+                        SimulationState(
+                            status = data.simulation.status,
+                            time = data.simulation.time,
+                        )
+                    }
+                }
+        }
+    }
+}

alchemist-composeui/src/jvmMain/kotlin/it/unibo/alchemist/boundary/composeui/ComposeMonitor.kt

@@ -10,21 +10,33 @@
 package it.unibo.alchemist.boundary.composeui
 
 import androidx.compose.ui.window.Window
-import androidx.compose.ui.window.application
+import androidx.compose.ui.window.awaitApplication
 import it.unibo.alchemist.boundary.OutputMonitor
 import it.unibo.alchemist.model.Environment
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.runBlocking
+import kotlin.concurrent.thread
 
 /**
  * Monitor extension that uses JVM Compose UI to display the simulation.
  */
 class ComposeMonitor : OutputMonitor<Any, Nothing> {
     override fun initialized(environment: Environment<Any, Nothing>) {
-        application {
-            Window(
-                onCloseRequest = { },
-                title = "Alchemist",
-            ) {
-                app()
+        thread(
+            name = "ComposeMonitor",
+            isDaemon = true,
+        ) {
+            runBlocking {
+                launch {
+                    awaitApplication {
+                        Window(
+                            onCloseRequest = ::exitApplication,
+                            title = "Alchemist",
+                        ) {
+                            app()
+                        }
+                    }
+                }
             }
         }
     }

gradle/libs.versions.toml

@@ -23,6 +23,7 @@ scalacache = "0.28.0"
 
 [libraries]
 androidx-lifecycle-runtime-compose = { group = "org.jetbrains.androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "androidx-lifecycle" }
+androidx-lifecycle-viewmodel-compose = { group = "org.jetbrains.androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "androidx-lifecycle" }
 antlr4 = { module = "org.antlr:antlr4", version.ref = "antlr4" }
 antlr4-runtime = { module = "org.antlr:antlr4-runtime", version.ref = "antlr4" }
 apache-commons-cli = "commons-cli:commons-cli:1.9.0"
@@ -73,6 +74,7 @@ kotest-framework-engine = { module = "io.kotest:kotest-framework-engine", versio
 kotest-runner = { module = "io.kotest:kotest-runner-junit5-jvm", version.ref = "kotest" }
 kotlin-cli = "org.jetbrains.kotlinx:kotlinx-cli:0.3.6"
 kotlin-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlinx-coroutines" }
+kotlin-coroutines-swing = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-swing", version.ref = "kotlinx-coroutines" }
 kotlin-coroutines-test = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-test", version.ref = "kotlinx-coroutines" }
 kotlin-jvm-plugin = { module = "org.jetbrains.kotlin.jvm:org.jetbrains.kotlin.jvm.gradle.plugin", version.ref = "kotlin" }
 kotlin-multiplatform-plugin = { module = "org.jetbrains.kotlin.multiplatform:org.jetbrains.kotlin.multiplatform.gradle.plugin", version.ref = "kotlin" }