Show before and after of node states when selecting them

This commit introduces the idea of a NodeDiff, which stores the node's current and previous state - from the previous frame - in order to better represent what is actually changing through the UI.

If there is no previous frame (only on the first frame of the trace), there is no need to show a diff, so we plainly depict the node's states.

Author: wenli-cai

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

@@ -13,6 +13,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import com.squareup.workflow1.traceviewer.model.Node
+import com.squareup.workflow1.traceviewer.model.NodeDiff
 import com.squareup.workflow1.traceviewer.ui.FrameSelectTab
 import com.squareup.workflow1.traceviewer.ui.RenderDiagram
 import com.squareup.workflow1.traceviewer.ui.RightInfoPanel
@@ -28,7 +29,7 @@ public fun App(
   modifier: Modifier = Modifier
 ) {
   var selectedTraceFile by remember { mutableStateOf<PlatformFile?>(null) }
-  var selectedNode by remember { mutableStateOf<Node?>(null) }
+  var selectedNode by remember { mutableStateOf<NodeDiff?>(null) }
   var workflowFrames by remember { mutableStateOf<List<Node>>(emptyList()) }
   var frameIndex by remember { mutableIntStateOf(0) }
   val sandboxState = remember { SandboxState() }
@@ -49,7 +50,9 @@ public fun App(
           traceFile = selectedTraceFile!!,
           frameInd = frameIndex,
           onFileParse = { workflowFrames = it },
-          onNodeSelect = { selectedNode = it }
+          onNodeSelect = { node, prevNode  ->
+            selectedNode = NodeDiff(node, prevNode)
+          }
         )
       }
     }

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

@@ -31,6 +31,22 @@ internal data class Node(
   override fun hashCode(): Int {
     return id.hashCode()
   }
+
+  companion object {
+    fun getNodeField(node: Node, field: String): String {
+      return when(field.lowercase()) {
+        "name" -> node.name
+        "id" -> node.id
+        "parent" -> node.parent
+        "parentid" -> node.parentId
+        "props" -> node.props
+        "state" -> node.state
+        "rendering" -> node.rendering
+        "children" -> node.children.toString()
+        else -> throw IllegalArgumentException("Unknown field: $field")
+      }
+    }
+  }
 }
 
 internal fun Node.addChild(child: Node): Node {

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

@@ -0,0 +1,12 @@
+package com.squareup.workflow1.traceviewer.model
+
+/**
+ * Represents the difference between the current and previous state of a node in the workflow trace.
+ * This will be what is passed as a state between UI to display the diff.
+ *
+ * If it's the first node in the frame, [previous] will be null and there is no difference to show.
+ */
+internal class NodeDiff(
+  val current: Node,
+  val previous: Node?,
+)

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

@@ -29,9 +29,12 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.squareup.workflow1.traceviewer.model.Node
+import com.squareup.workflow1.traceviewer.model.NodeDiff
 
 /**
  * A panel that displays information about the selected workflow node.
@@ -41,7 +44,7 @@ import com.squareup.workflow1.traceviewer.model.Node
  */
 @Composable
 internal fun RightInfoPanel(
-  selectedNode: Node?,
+  selectedNode: NodeDiff?,
   modifier: Modifier = Modifier
 ) {
   Row(
@@ -77,7 +80,7 @@ internal fun RightInfoPanel(
  */
 @Composable
 private fun NodePanelDetails(
-  node: Node?,
+  node: NodeDiff?,
   modifier: Modifier = Modifier
 ) {
   LazyColumn(
@@ -93,26 +96,20 @@ private fun NodePanelDetails(
       }
       return@LazyColumn
     }
-
-    val fields = listOf(
-      "Name" to node.name,
-      "ID" to node.id,
-      "Props" to node.props,
-      "State" to node.state,
-      "Rendering" to node.rendering
-    )
     item {
       Text(
         text = "Workflow Details",
         style = MaterialTheme.typography.h6,
         modifier = Modifier.padding(top = 8.dp, bottom = 8.dp)
       )
     }
+    val fields = listOf("Name", "Id", "Props", "State", "Rendering")
 
-    items(fields) { (label, value) ->
+    items(fields) { field ->
       DetailCard(
-        label = label,
-        value = value
+        label = field,
+        currValue = Node.getNodeField(node.current, field),
+        pastValue = if (node.previous != null) Node.getNodeField(node.previous, field) else null
       )
     }
   }
@@ -126,7 +123,8 @@ private fun NodePanelDetails(
 @Composable
 private fun DetailCard(
   label: String,
-  value: String,
+  currValue: String,
+  pastValue: String?
 ) {
   var open by remember { mutableStateOf(true) }
   Card(
@@ -145,17 +143,46 @@ private fun DetailCard(
     ) {
       Text(
         text = label,
-        style = MaterialTheme.typography.subtitle1,
+        style = MaterialTheme.typography.h6,
         color = Color.Black,
         fontWeight = FontWeight.Medium
       )
       if (!open) { return@Card }
 
       Spacer(modifier = Modifier.height(4.dp))
-      Text(
-        text = value,
-        style = MaterialTheme.typography.body1
-      )
+      if (pastValue != null) {
+        Column {
+          Text(
+            text = "Before:",
+            style = TextStyle(fontStyle = FontStyle.Italic),
+            color = Color.Black,
+            fontWeight = FontWeight.Medium
+          )
+          Text(
+            text = pastValue,
+            style = MaterialTheme.typography.body2,
+            color = Color.Black
+          )
+          Spacer(modifier = Modifier.height(8.dp))
+          Text(
+            text = "After:",
+            style = TextStyle(fontStyle = FontStyle.Italic),
+            color = Color.Black,
+            fontWeight = FontWeight.Medium
+          )
+          Text(
+            text = currValue,
+            style = MaterialTheme.typography.body2,
+            color = Color.Black
+          )
+        }
+      } else {
+        Text(
+          text = currValue,
+          style = MaterialTheme.typography.body1,
+          color = Color.Black
+        )
+      }
     }
   }
 }

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

@@ -21,6 +21,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.squareup.workflow1.traceviewer.model.Node
+import com.squareup.workflow1.traceviewer.model.NodeDiff
 import com.squareup.workflow1.traceviewer.util.ParseResult
 import com.squareup.workflow1.traceviewer.util.parseTrace
 import io.github.vinceglb.filekit.PlatformFile
@@ -34,7 +35,7 @@ internal fun RenderDiagram(
   traceFile: PlatformFile,
   frameInd: Int,
   onFileParse: (List<Node>) -> Unit,
-  onNodeSelect: (Node) -> Unit,
+  onNodeSelect: (Node, Node?) -> Unit,
   modifier: Modifier = Modifier
 ) {
   var isLoading by remember(traceFile) { mutableStateOf(true) }
@@ -67,7 +68,8 @@ internal fun RenderDiagram(
   }
 
   if (!isLoading) {
-    DrawTree(fullTree[frameInd], affectedNodes[frameInd], onNodeSelect)
+    val previousFrame = if (frameInd > 0) fullTree[frameInd - 1] else null
+    DrawTree(fullTree[frameInd], previousFrame, affectedNodes[frameInd], onNodeSelect)
   }
 }
 
@@ -78,10 +80,12 @@ internal fun RenderDiagram(
 @Composable
 private fun DrawTree(
   node: Node,
+  previousNode: Node?,
   affectedNodes: Set<Node>,
-  onNodeSelect: (Node) -> Unit,
+  onNodeSelect: (Node, Node?) -> Unit,
   modifier: Modifier = Modifier,
 ) {
+  println("Drawing node: ${node.name} with state: ${node.state}")
   Column(
     modifier
       .padding(5.dp)
@@ -90,15 +94,21 @@ private fun DrawTree(
     horizontalAlignment = Alignment.CenterHorizontally,
   ) {
     val isAffected = affectedNodes.contains(node)
-    DrawNode(node, isAffected, onNodeSelect)
+    DrawNode(node, previousNode, isAffected, onNodeSelect)
 
     // Draws the node's children recursively.
     Row(
       horizontalArrangement = Arrangement.Center,
       verticalAlignment = Alignment.Top
     ) {
-      node.children.forEach { childNode ->
-        DrawTree(childNode, affectedNodes, onNodeSelect)
+      /*
+        We pair up the current node's children with previous frame's children.
+        In the edge case that the current frame has additional children compared to the previous
+        frame, we replace with null and will check before next recursive call.
+       */
+      node.children.forEachIndexed { index, childNode ->
+        val prevChildNode = previousNode?.children?.getOrNull(index)
+        DrawTree(childNode, prevChildNode, affectedNodes, onNodeSelect)
       }
     }
   }
@@ -110,19 +120,23 @@ private fun DrawTree(
 @Composable
 private fun DrawNode(
   node: Node,
+  previousNode: Node?,
   isAffected: Boolean,
-  onNodeSelect: (Node) -> Unit,
+  onNodeSelect: (Node, Node?) -> Unit,
 ) {
   Box(
     modifier = Modifier
       .background(if (isAffected) Color.Green else Color.Transparent)
       .clickable {
         // Selecting a node will bubble back up to the main view to handle the selection
-        onNodeSelect(node)
+        onNodeSelect(node, previousNode)
       }
       .padding(10.dp)
   ) {
     Column(horizontalAlignment = Alignment.CenterHorizontally) {
+      if (node.name == "LocationServicesGateKeeper"){
+        println(node.state)
+      }
       Text(text = node.name)
       Text(text = "ID: ${node.id}")
     }

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

@@ -68,7 +68,6 @@ private fun createMoshiAdapter(): JsonAdapter<List<List<Node>>> {
  */
 private fun getFrameFromRenderPass(renderPass: List<Node>): Node {
   val childrenByParent: Map<String, List<Node>> = renderPass.groupBy { it.parentId }
-  println(childrenByParent)
   val root = childrenByParent[ROOT_ID]?.single()
   return buildTree(root!!, childrenByParent)
 }
@@ -104,7 +103,9 @@ internal fun mergeFrameIntoMainTree(
     throw IllegalArgumentException("Frame root ID does not match main tree root ID.")
   }
 
-  return frame.children.fold(main) { mergedTree, frameChild ->
+  val updatedNode = frame.copy(children = main.children)
+
+  return frame.children.fold(updatedNode) { mergedTree, frameChild ->
     val mainTreeChild = mergedTree.children.singleOrNull { it.id == frameChild.id }
     if (mainTreeChild != null) {
       mergedTree.replaceChild(mergeFrameIntoMainTree(frameChild, mainTreeChild))