Workflow visualizer prototype

gradle/libs.versions.toml

@@ -4,6 +4,7 @@ agpVersion = "8.8.0"
 
 compileSdk = "34"
 minSdk = "24"
+moshiKotlinVersion = "1.15.2"
 targetSdk = "33"
 
 jdk-target = "1.8"
@@ -231,6 +232,7 @@ mockito-kotlin = { module = "org.mockito.kotlin:mockito-kotlin", version.ref = "
 
 mockk = { module = "io.mockk:mockk", version.ref = "mockk" }
 
+moshi-kotlin = { module = "com.squareup.moshi:moshi-kotlin", version.ref = "moshiKotlinVersion" }
 reactivestreams = "org.reactivestreams:reactive-streams:1.0.4"
 
 robolectric = { module = "org.robolectric:robolectric", version.ref = "robolectric" }

workflow-trace-viewer/build.gradle.kts

@@ -23,6 +23,7 @@ kotlin {
         implementation(compose.desktop.currentOs)
         implementation(libs.kotlinx.coroutines.swing)
         implementation(compose.materialIconsExtended)
+        implementation(libs.moshi.kotlin)
       }
     }
   }

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/App.kt

@@ -5,5 +5,12 @@ import androidx.compose.runtime.Composable
 
 @Composable
 fun App() {
-  Text("Hello world!")
+  val jsonString = object {}.javaClass.getResource("/workflow-simple.json")?.readText()
+  val root = jsonString?.let { FetchRoot(it) }
+  println(root)
+  if (root != null) {
+    DrawWorkflowTree(root)
+  } else {
+    Text("Empty data or failed to parse data") // TODO: proper handling of error
+  }
 }

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/Arrow.kt

@@ -0,0 +1,88 @@
+package com.squareup.workflow1.traceviewer
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.unit.dp
+import kotlin.math.atan2
+
+/**
+ * Since we eventually would want the ability to click into each arrow between nodes and see what
+ * state/props are being passed, having a custom composable for the arrow where an onArrowClick
+ * could be set will be helpful.
+ */
+@Composable
+public fun Arrow(
+  start: Offset,
+  end: Offset,
+) {
+  Box(
+    modifier = Modifier
+      .size(20.dp)
+      .clickable { print("clicked") }
+  ) {
+    Text("top left corner")
+    Canvas (modifier = Modifier.fillMaxSize()){
+      drawArrow(
+        start = start,
+        end = end,
+        color = Color.Black,
+        strokeWidth = 2f
+      )
+    }
+  }
+}
+
+// iterative
+// @Composable
+// public fun drawAllArrows(
+//   arrowLocations: List<Pair<NodePosition, NodePosition>>,
+// ) {
+//   Canvas(modifier = Modifier.fillMaxSize()) {
+//     arrowLocations.forEach { (start, end) ->
+//       drawArrow(
+//         start = start.position,
+//         end = end.position,
+//         color = Color.Black,
+//         strokeWidth = 2f
+//       )
+//     }
+//   }
+// }
+
+
+private fun DrawScope.drawArrow(
+  start: Offset,
+  end: Offset,
+  color: Color,
+  strokeWidth: Float
+) {
+  drawLine(
+    color = color,
+    start = start,
+    end = end,
+    strokeWidth = strokeWidth
+  )
+
+  val arrowHeadSize = 20f
+  val angle = atan2((end.y - start.y).toDouble(), (end.x - start.x).toDouble()).toFloat()
+  val arrowPoint1 = Offset(
+    x = end.x - arrowHeadSize * Math.cos(angle + Math.PI / 6).toFloat(),
+    y = end.y - arrowHeadSize * Math.sin(angle + Math.PI / 6).toFloat()
+  )
+  val arrowPoint2 = Offset(
+    x = end.x - arrowHeadSize * Math.cos(angle - Math.PI / 6).toFloat(),
+    y = end.y - arrowHeadSize * Math.sin(angle - Math.PI / 6).toFloat()
+  )
+
+  drawLine(color, end, arrowPoint1, strokeWidth)
+  drawLine(color, end, arrowPoint2, strokeWidth)
+}

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/Main.kt

@@ -4,6 +4,6 @@ import androidx.compose.ui.window.singleWindowApplication
 
 fun main() {
   singleWindowApplication(title = "Workflow Trace Viewer") {
-    App()
+    SandboxBackground { App() }
   }
 }

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/SandboxBackground.kt

@@ -0,0 +1,72 @@
+package com.squareup.workflow1.traceviewer
+
+import androidx.compose.foundation.gestures.awaitEachGesture
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.wrapContentSize
+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.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.input.pointer.PointerEventType
+import androidx.compose.ui.input.pointer.pointerInput
+
+/**
+ * This is the backdrop for the whole app. Since there can be hundreds of modules at a time, there
+ * is not realistic way to fit everything on the screen at once. Having the liberty to pan across
+ * the whole tree as well as zoom into specific subtrees means there's a lot more control when
+ * analyzing the traces.
+ *
+ */
+@Composable
+public fun SandboxBackground(content: @Composable () -> Unit) {
+  var scale by remember { mutableStateOf(1f) }
+  var offset by remember { mutableStateOf(Offset.Zero) }
+
+  Box(
+    modifier = Modifier
+      .wrapContentSize(unbounded = true) // this allows the content to be larger than the initial screen of the app
+      .pointerInput(Unit) { // this allows for user's panning to view different parts of content
+        awaitEachGesture {
+          val event = awaitPointerEvent()
+
+          // zooming
+          if (event.type == PointerEventType.Scroll) {
+            val scrollDelta = event.changes.first().scrollDelta.y
+            scale *= if (scrollDelta < 0) 1.1f else 0.9f
+            scale = scale.coerceIn(0.1f, 10f)
+            event.changes.forEach { it.consume() }
+          }
+
+          // panning: this tracks multiple events within one gesture to see what the user is doing, then calculates the offset and pans the screen accordingly
+          val drag = event.changes.firstOrNull()
+          if (drag != null && drag.pressed) {
+            var prev = drag.position
+            while (true) {
+              val nextEvent = awaitPointerEvent()
+              val nextDrag = nextEvent.changes.firstOrNull() ?: break
+              if (!nextDrag.pressed) break
+
+              val delta = nextDrag.position - prev
+              offset += delta
+              prev = nextDrag.position
+              nextDrag.consume()
+            }
+          }
+        }
+      }
+      .graphicsLayer {
+        translationX = offset.x
+        translationY = offset.y
+        scaleX = scale
+        scaleY = scale
+      }
+  ) {
+    Box {
+      content() // this is main content
+    }
+  }
+}

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/WorkflowJsonParser.kt

@@ -0,0 +1,27 @@
+package com.squareup.workflow1.traceviewer
+
+import com.squareup.moshi.JsonDataException
+import com.squareup.moshi.Moshi
+import com.squareup.moshi.kotlin.reflect.KotlinJsonAdapterFactory
+import java.io.IOException
+
+/**
+ * Parses a JSON string into [WorkflowNode] with Moshi adapters
+ * All the caught exceptions should be handled by the caller, and appropriate UI feedback should be provided to user
+ *
+ */
+public fun FetchRoot(json: String): WorkflowNode? {
+  return try{
+    val moshi = Moshi.Builder()
+      .add(KotlinJsonAdapterFactory())
+      .build()
+    val workflowAdapter = moshi.adapter(WorkflowNode::class.java)
+    val root = workflowAdapter.fromJson(json)
+    root
+  } catch (e: JsonDataException) {
+    throw JsonDataException("Failed to parse JSON: ${e.message}", e)
+  } catch (e: IOException){
+    throw IOException("Malformed JSON: ${e.message}", e)
+  }
+}
+