Enumerate the specific changes for each node and color them accordingly

Author: wenli-cai

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

@@ -78,9 +78,7 @@ internal fun App(
           traceSource = traceMode,
           frameInd = frameIndex,
           onFileParse = { workflowFrames.addAll(it) },
-          onNodeSelect = { node, prevNode ->
-            selectedNode = NodeUpdate(node, prevNode)
-          },
+          onNodeSelect = { selectedNode = it },
           onNewFrame = { frameIndex += 1 }
         )
       }

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

@@ -1,12 +1,38 @@
 package com.squareup.workflow1.traceviewer.model
 
+import androidx.compose.ui.graphics.Color
+
 /**
  * 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.
+ * This will be what is passed as a state between UI to display the diff. The states all have an
+ * associated color
  *
- * If it's the first node in the frame, [previous] will be null and there is no difference to show.
+ * If it's the first node in the frame, [past] will be null and there is no difference to show.
  */
-internal class NodeUpdate(
+internal data class NodeUpdate(
   val current: Node,
-  val previous: Node?,
-)
+  val past: Node?,
+  val state: NodeState
+) {
+  companion object {
+    fun create(current: Node, past: Node?, isAffected: Boolean): NodeUpdate {
+      val state = when {
+        !isAffected -> NodeState.UNCHANGED
+        past == null -> NodeState.NEW
+        current.props != past.props -> NodeState.PROPS_CHANGED
+        current.state != past.state -> NodeState.STATE_CHANGED
+        else -> NodeState.CHILDREN_CHANGED
+      }
+
+      return NodeUpdate(current, past, state)
+    }
+  }
+}
+
+enum class NodeState(val color: Color) {
+  NEW(Color(0x804CAF50)), // green
+  STATE_CHANGED(Color(0xFFE57373)), // red
+  PROPS_CHANGED(Color(0xFFFF8A65)), // orange
+  CHILDREN_CHANGED(Color(0x802196F3)), // blue
+  UNCHANGED(Color.Transparent),
+}

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

@@ -107,7 +107,7 @@ private fun NodePanelDetails(
     val fields = Node::class.memberProperties
     for (field in fields) {
       val currVal = field.get(node.current).toString()
-      val pastVal = if (node.previous != null) field.get(node.previous).toString() else null
+      val pastVal = if (node.past != null) field.get(node.past).toString() else null
       item {
         DetailCard(
           label = field.name,

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

@@ -29,6 +29,7 @@ import androidx.compose.ui.unit.dp
 import com.squareup.moshi.JsonAdapter
 import com.squareup.workflow1.traceviewer.TraceMode
 import com.squareup.workflow1.traceviewer.model.Node
+import com.squareup.workflow1.traceviewer.model.NodeUpdate
 import com.squareup.workflow1.traceviewer.util.ParseResult
 import com.squareup.workflow1.traceviewer.util.createMoshiAdapter
 import com.squareup.workflow1.traceviewer.util.parseFileTrace
@@ -47,7 +48,7 @@ internal fun RenderTrace(
   traceSource: TraceMode,
   frameInd: Int,
   onFileParse: (List<Node>) -> Unit,
-  onNodeSelect: (Node, Node?) -> Unit,
+  onNodeSelect: (NodeUpdate) -> Unit,
   onNewFrame: () -> Unit,
   modifier: Modifier = Modifier
 ) {
@@ -145,7 +146,7 @@ private fun DrawTree(
   previousFrameNode: Node?,
   affectedNodes: Set<Node>,
   expandedNodes: MutableMap<String, Boolean>,
-  onNodeSelect: (Node, Node?) -> Unit,
+  onNodeSelect: (NodeUpdate) -> Unit,
   modifier: Modifier = Modifier,
 ) {
   Column(
@@ -207,15 +208,21 @@ private fun DrawNode(
   nodePast: Node?,
   isAffected: Boolean,
   isExpanded: Boolean,
-  onNodeSelect: (Node, Node?) -> Unit,
+  onNodeSelect: (NodeUpdate) -> Unit,
   onExpandToggle: (Node) -> Unit,
 ) {
+  val nodeUpdate = NodeUpdate.create(
+    current = node,
+    past = nodePast,
+    isAffected = isAffected
+  )
+
   Box(
     modifier = Modifier
-      .background(if (isAffected) Color.Green else Color.Transparent)
+      .background(nodeUpdate.state.color)
       .onPointerEvent(PointerEventType.Press) {
         if (it.buttons.isPrimaryPressed) {
-          onNodeSelect(node, nodePast)
+          onNodeSelect(nodeUpdate)
         } else if (it.buttons.isSecondaryPressed) {
           onExpandToggle(node)
         }