Replace color legend with tooltip display on node hover

Author: wenli-cai

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

@@ -20,7 +20,6 @@ import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.unit.IntSize
 import com.squareup.workflow1.traceviewer.model.Node
 import com.squareup.workflow1.traceviewer.model.NodeUpdate
-import com.squareup.workflow1.traceviewer.ui.ColorLegend
 import com.squareup.workflow1.traceviewer.ui.RightInfoPanel
 import com.squareup.workflow1.traceviewer.ui.control.DisplayDevices
 import com.squareup.workflow1.traceviewer.ui.control.FileDump
@@ -39,7 +38,7 @@ import io.github.vinceglb.filekit.PlatformFile
 internal fun App(
   modifier: Modifier = Modifier
 ) {
-  var appWindowSize by remember { mutableStateOf(IntSize(0,0)) }
+  var appWindowSize by remember { mutableStateOf(IntSize(0, 0)) }
   var selectedNode by remember { mutableStateOf<NodeUpdate?>(null) }
   var frameSize by remember { mutableIntStateOf(0) }
   var rawRenderPass by remember { mutableStateOf("") }
@@ -178,12 +177,6 @@ internal fun App(
       )
     }
 
-    if (active) {
-      ColorLegend(
-        modifier = Modifier.align(Alignment.BottomEnd)
-      )
-    }
-
     RightInfoPanel(
       selectedNode = selectedNode,
       modifier = Modifier

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

@@ -3,6 +3,9 @@ package com.squareup.workflow1.traceviewer.ui
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.hoverable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsHoveredAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -14,9 +17,12 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.PointerEventType
@@ -27,6 +33,7 @@ import androidx.compose.ui.layout.positionInRoot
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.squareup.workflow1.traceviewer.model.Node
+import com.squareup.workflow1.traceviewer.model.NodeState
 import com.squareup.workflow1.traceviewer.model.NodeUpdate
 
 /**
@@ -286,44 +293,81 @@ private fun DrawNode(
   onExpandToggle: (Node) -> Unit,
   storeNodeLocation: (Node, Offset) -> Unit
 ) {
+  val interactionSource = remember { MutableInteractionSource() }
+  val isHovered by interactionSource.collectIsHoveredAsState()
+
   val nodeUpdate = NodeUpdate.create(
     current = node,
     past = nodePast,
     isAffected = isAffected
   )
 
-  Box(
-    modifier = Modifier
-      .background(nodeUpdate.state.color)
-      .clickable {
-        onNodeSelect(nodeUpdate)
-      }
-      .onPointerEvent(PointerEventType.Press) {
-        if (it.buttons.isSecondaryPressed) {
-          onExpandToggle(node)
+  Box {
+    Box(
+      modifier = Modifier
+        .hoverable(interactionSource)
+        .background(nodeUpdate.state.color)
+        .clickable {
+          onNodeSelect(nodeUpdate)
         }
-      }
-      .padding(16.dp)
-      .onGloballyPositioned { coords ->
-        val offsetToTopLeft = coords.positionInRoot()
-        val offsetToCenter = Offset(
-          x = offsetToTopLeft.x + coords.size.width / 2,
-          y = offsetToTopLeft.y + coords.size.height / 2
-        )
-        storeNodeLocation(node, offsetToCenter)
-      }
-  ) {
-    Column(horizontalAlignment = Alignment.CenterHorizontally) {
-      Row(
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(4.dp)
-      ) {
-        if (node.children.isNotEmpty()) {
-          Text(text = if (isExpanded) "▼" else "▶")
+        .onPointerEvent(PointerEventType.Press) {
+          if (it.buttons.isSecondaryPressed) {
+            onExpandToggle(node)
+          }
         }
-        Text(text = node.name)
+        .padding(16.dp)
+        .onGloballyPositioned { coords ->
+          val offsetToTopLeft = coords.positionInRoot()
+          val offsetToCenter = Offset(
+            x = offsetToTopLeft.x + coords.size.width / 2,
+            y = offsetToTopLeft.y + coords.size.height / 2
+          )
+          storeNodeLocation(node, offsetToCenter)
+        }
+    ) {
+      Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        Row(
+          verticalAlignment = Alignment.CenterVertically,
+          horizontalArrangement = Arrangement.spacedBy(4.dp)
+        ) {
+          if (node.children.isNotEmpty()) {
+            Text(text = if (isExpanded) "▼" else "▶")
+          }
+          Text(text = node.name)
+        }
+        Text(text = "ID: ${node.id}")
       }
-      Text(text = "ID: ${node.id}")
     }
+
+    if (isHovered) {
+      NodeTooltip(
+        nodeState = nodeUpdate.state,
+        modifier = Modifier
+          .align(Alignment.TopEnd)
+          .background(nodeUpdate.state.color)
+      )
+    }
+  }
+}
+
+/**
+ * A tooltip that appears on hover showing the node state type
+ */
+@Composable
+private fun NodeTooltip(
+  nodeState: NodeState,
+  modifier: Modifier = Modifier
+) {
+  Box(
+    modifier = modifier
+      .clip(RoundedCornerShape(4.dp))
+      .background(Color.Black.copy(alpha = 0.3f))
+      .padding(horizontal = 8.dp, vertical = 4.dp)
+  ) {
+    Text(
+      text = nodeState.name,
+      color = Color.White,
+      fontSize = 12.sp
+    )
   }
 }

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

@@ -9,7 +9,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.PointerEventType
 import androidx.compose.ui.input.pointer.pointerInput
@@ -48,7 +47,7 @@ internal fun SandboxBackground(
             val pointerInput = event.changes.first()
             val pointerOffsetToCenter = Offset(
               // For some reason using 1.5 made zooming more natural than 2
-              x = pointerInput.position.x - appWindowSize.width / (3/2),
+              x = pointerInput.position.x - appWindowSize.width / (3 / 2),
               y = pointerInput.position.y - appWindowSize.height / 2
             )
             val scrollDelta = pointerInput.scrollDelta.y