Bugfix with switching between different files and UI change for top row

Author: wenli-cai

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

@@ -54,6 +54,10 @@ public fun App(
     InfoPanel(selectedNode)
 
     // Bottom right upload button
-    UploadFile(resetSelectedNode = { selectedNode = null }, onFileSelect = { selectedFile = it })
+    val onReset = {
+      selectedNode = null
+      snapshotIndex = 0
+    }
+    UploadFile(onReset = onReset, onFileSelect = { selectedFile = it })
   }
 }

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

@@ -1,13 +1,15 @@
 package com.squareup.workflow1.traceviewer.ui
 
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import com.squareup.workflow1.traceviewer.model.WorkflowNode
@@ -21,20 +23,25 @@ public fun StateSelectTab(
 ) {
   val state = rememberLazyListState()
 
-  LazyRow(
-    modifier = modifier,
-    state = state
+  Surface(
+    modifier = modifier
+      .padding(4.dp),
+    color = Color.White,
   ) {
-    items(trace.size) { index ->
-      Button(
-        modifier = Modifier
-          .padding(10.dp),
-        onClick = { onIndexChange(index) },
-        colors = ButtonDefaults.buttonColors(
-          backgroundColor = if (index == currentIndex) Color.DarkGray else Color.LightGray
+    LazyRow(
+      modifier = Modifier
+        .padding(8.dp),
+      state = state
+    ) {
+      items(trace.size) { index ->
+        Text(
+          text = "State ${index + 1}",
+          color = if (index == currentIndex) Color.Black else Color.LightGray,
+          modifier = Modifier
+            .clip(RoundedCornerShape(16.dp))
+            .clickable { onIndexChange(index) }
+            .padding(10.dp)
         )
-      ) {
-        Text("State ${index + 1}")
       }
     }
   }

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

@@ -14,8 +14,10 @@ import androidx.compose.material.icons.Icons.AutoMirrored.Filled
 import androidx.compose.material.icons.automirrored.filled.KeyboardArrowLeft
 import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight
 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.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -35,26 +37,26 @@ public fun InfoPanel(
   modifier: Modifier = Modifier
 ) {
   Row {
-    val panelOpen = remember { mutableStateOf(false) }
+    var panelOpen by remember { mutableStateOf(false) }
 
     // based on open/close, display the node details (Column)
-    if (panelOpen.value) {
+    if (panelOpen) {
       PanelDetails(
         selectedNode,
         Modifier.fillMaxWidth(.35f)
       )
     }
 
     IconButton(
-      onClick = { panelOpen.value = !panelOpen.value },
+      onClick = { panelOpen = !panelOpen },
       modifier = Modifier
         .padding(8.dp)
         .size(30.dp)
         .align(Alignment.Top)
     ) {
       Icon(
-        imageVector = if (panelOpen.value) Filled.KeyboardArrowLeft else Filled.KeyboardArrowRight,
-        contentDescription = if (panelOpen.value) "Close Panel" else "Open Panel",
+        imageVector = if (panelOpen) Filled.KeyboardArrowLeft else Filled.KeyboardArrowRight,
+        contentDescription = if (panelOpen) "Close Panel" else "Open Panel",
         modifier = Modifier
       )
     }

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

@@ -23,7 +23,7 @@ import io.github.vinceglb.filekit.dialogs.compose.rememberFilePickerLauncher
  */
 @Composable
 public fun UploadFile(
-  resetSelectedNode: () -> Unit,
+  onReset: () -> Unit,
   onFileSelect: (PlatformFile?) -> Unit,
   modifier: Modifier = Modifier,
 ) {
@@ -36,7 +36,7 @@ public fun UploadFile(
       type = FileKitType.File(listOf("json", "txt")),
       title = "Select Workflow Trace File"
     ) {
-      resetSelectedNode()
+      onReset()
       onFileSelect(it)
     }
     Button(