Clean up

Improve UI and clean up code

Author: wenli-cai

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

@@ -64,8 +64,8 @@ internal fun App(
       sandboxState = sandboxState,
     ) {
       // if there is not a file selected and trace mode is live, then don't render anything.
-      val readyForFileTrace = validateFileMode(traceMode)
-      val readyForLiveTrace = validateLiveMode(traceMode)
+      val readyForFileTrace = TraceMode.validateFileMode(traceMode)
+      val readyForLiveTrace = TraceMode.validateLiveMode(traceMode)
 
       if (readyForFileTrace || readyForLiveTrace) {
         active = true
@@ -121,7 +121,7 @@ internal fun App(
     if (traceMode is TraceMode.Live) {
       if ((traceMode as TraceMode.Live).device == null) {
         DisplayDevices(
-          onDeviceSelected = { selectedDevice ->
+          onDeviceSelect = { selectedDevice ->
             traceMode = TraceMode.Live(selectedDevice)
           },
           devices = listDevices(),
@@ -161,6 +161,16 @@ internal class SandboxState {
 internal sealed interface TraceMode {
   data class File(val file: PlatformFile?) : TraceMode
   data class Live(val device: String? = null) : TraceMode
+
+  companion object {
+    fun validateLiveMode(traceMode: TraceMode): Boolean {
+      return traceMode is Live && traceMode.device != null
+    }
+
+    fun validateFileMode(traceMode: TraceMode): Boolean {
+      return traceMode is File && traceMode.file != null
+    }
+  }
 }
 
 /**
@@ -172,11 +182,3 @@ internal fun listDevices(): List<String> {
   // We drop the header "List of devices attached"
   return process.inputStream.bufferedReader().readLines().drop(1).dropLast(1)
 }
-
-internal fun validateLiveMode(traceMode: TraceMode): Boolean {
-  return traceMode is TraceMode.Live && traceMode.device != null
-}
-
-internal fun validateFileMode(traceMode: TraceMode): Boolean {
-  return traceMode is TraceMode.File && traceMode.file != null
-}

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

@@ -34,5 +34,5 @@ enum class NodeState(val color: Color) {
   STATE_CHANGED(Color(0xFFE57373)), // red
   PROPS_CHANGED(Color(0xFFFF8A65)), // orange
   CHILDREN_CHANGED(Color(0x802196F3)), // blue
-  UNCHANGED(Color.Transparent),
+  UNCHANGED(Color.LightGray.copy(alpha = 0.3f)),
 }

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

@@ -18,7 +18,7 @@ import androidx.compose.ui.unit.dp
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
 internal fun DisplayDevices(
-  onDeviceSelected: (String) -> Unit,
+  onDeviceSelect: (String) -> Unit,
   devices: List<String>,
   modifier: Modifier = Modifier,
 ) {
@@ -29,7 +29,7 @@ internal fun DisplayDevices(
   ) {
     if (devices.isEmpty()) {
       Text(
-        text = "No device available",
+        text = "No device available. Boot up a new device and restart the visualizer",
         modifier = Modifier.align(Alignment.Center)
       )
       return@Box
@@ -40,8 +40,9 @@ internal fun DisplayDevices(
       devices.forEach { device ->
         Card(
           onClick = {
+            // Only give back the specific emulator device, i.e. "emulator-5554"
             emulatorRegex.find(device)?.value?.let { emulator ->
-              onDeviceSelected(emulator)
+              onDeviceSelect(emulator)
             }
           },
           shape = RoundedCornerShape(16.dp),

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

@@ -2,6 +2,7 @@ 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.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -18,7 +19,6 @@ import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.PointerEventType
-import androidx.compose.ui.input.pointer.isPrimaryPressed
 import androidx.compose.ui.input.pointer.isSecondaryPressed
 import androidx.compose.ui.input.pointer.onPointerEvent
 import androidx.compose.ui.unit.dp
@@ -45,8 +45,10 @@ internal fun DrawTree(
   Column(
     modifier
       .padding(6.dp)
-      .border(3.dp, Color.Black)
-      .fillMaxSize(),
+      .fillMaxSize()
+      .then(
+        if (node.children.isNotEmpty()) Modifier.border(3.dp, Color.Black) else Modifier
+      ),
     horizontalAlignment = Alignment.CenterHorizontally,
   ) {
     val isAffected = affectedNodes.contains(node)
@@ -93,8 +95,8 @@ internal fun DrawTree(
  * Draws the group of unaffected children, which can be open and closed to expand/collapse them.
  *
  * If an unaffected children also has other children, it cannot be opened since the this group
- * treats all nodes as one entity. The onClick for the whole group overrides the onClick for the
- * individual nodes.
+ * treats all nodes as one entity. The right click for the whole group overrides the right click for
+ * the individual nodes.
  */
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
@@ -141,8 +143,7 @@ private fun UnaffectedChildrenGroup(
       Column(
         modifier = Modifier
           .fillMaxWidth()
-          .padding(6.dp)
-          .border(3.dp, Color.Black),
+          .padding(6.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
       ) {
         DrawChildrenInGroups(
@@ -279,10 +280,11 @@ private fun DrawNode(
   Box(
     modifier = Modifier
       .background(nodeUpdate.state.color)
+      .clickable {
+        onNodeSelect(nodeUpdate)
+      }
       .onPointerEvent(PointerEventType.Press) {
-        if (it.buttons.isPrimaryPressed) {
-          onNodeSelect(nodeUpdate)
-        } else if (it.buttons.isSecondaryPressed) {
+        if (it.buttons.isSecondaryPressed) {
           onExpandToggle(node)
         }
       }