Add scroll bar functionality to allow indexing different states within trace

Author: wenli-cai

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

@@ -2,17 +2,17 @@ package com.squareup.workflow1.traceviewer
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableIntStateOf
-import androidx.compose.runtime.mutableIntStateOf
 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 com.squareup.workflow1.traceviewer.model.WorkflowNode
 import com.squareup.workflow1.traceviewer.ui.InfoPanel
 import com.squareup.workflow1.traceviewer.ui.RenderDiagram
+import com.squareup.workflow1.traceviewer.ui.StateSelectTab
 import com.squareup.workflow1.traceviewer.utils.SandboxBackground
 import com.squareup.workflow1.traceviewer.utils.UploadFile
 import io.github.vinceglb.filekit.PlatformFile
@@ -26,30 +26,34 @@ public fun App(
 ) {
   var selectedFile by remember { mutableStateOf<PlatformFile?>(null) }
   var selectedNode by remember { mutableStateOf<WorkflowNode?>(null) }
+  var workflowTrace by remember { mutableStateOf<List<WorkflowNode>>(emptyList()) }
   var snapshotIndex by remember { mutableIntStateOf(0) }
 
-  // Used when user selects a new file in [UploadFile]
-  val resetSelectedNode = { selectedNode = null }
-
   Box {
     // Main content
     if (selectedFile != null) {
       SandboxBackground {
         RenderDiagram(
-          file = selectedFile,
+          file = selectedFile!!,
           traceInd = snapshotIndex,
+          onFileParse = { workflowTrace = it },
           onNodeSelect = { selectedNode = it }
         )
       }
     }
 
     // Top trace selector row
-    // TraceSelectRow { snapshotIndex.value = it }
+    StateSelectTab(
+      trace = workflowTrace,
+      currentIndex = snapshotIndex,
+      onIndexChange = { snapshotIndex = it },
+      modifier = Modifier.align(Alignment.TopCenter)
+    )
 
     // Left side information panel
     InfoPanel(selectedNode)
 
     // Bottom right upload button
-    UploadFile(resetSelectedNode, { selectedFile = it })
+    UploadFile(resetSelectedNode = { selectedNode = null }, onFileSelect = { selectedFile = it })
   }
 }

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

@@ -0,0 +1,41 @@
+package com.squareup.workflow1.traceviewer.ui
+
+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.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.squareup.workflow1.traceviewer.model.WorkflowNode
+
+@Composable
+public fun StateSelectTab(
+  trace: List<WorkflowNode>,
+  currentIndex: Int,
+  onIndexChange: (Int) -> Unit,
+  modifier: Modifier = Modifier
+) {
+  val state = rememberLazyListState()
+
+  LazyRow(
+    modifier = modifier,
+    state = state
+  ) {
+    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
+        )
+      ) {
+        Text("State ${index + 1}")
+      }
+    }
+  }
+}

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

@@ -10,11 +10,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -29,15 +29,17 @@ import io.github.vinceglb.filekit.PlatformFile
  */
 @Composable
 public fun RenderDiagram(
-  file: PlatformFile?,
+  file: PlatformFile,
   traceInd: Int,
+  onFileParse: (List<WorkflowNode>) -> Unit,
   onNodeSelect: (WorkflowNode) -> Unit,
 ) {
   var workflowNodes by remember { mutableStateOf<List<WorkflowNode>>(emptyList()) }
   var isLoading by remember { mutableStateOf(true) }
 
   LaunchedEffect(file) {
     workflowNodes = fetchTrace(file)
+    onFileParse(workflowNodes)
     isLoading = false
   }
 

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

@@ -38,7 +38,7 @@ public fun SandboxBackground(
       .fillMaxSize()
       .pointerInput(Unit) {
         // Panning capabilities: watches for drag gestures and applies the translation
-        detectDragGestures { _, translation->
+        detectDragGestures { _, translation ->
           offset += translation
         }
       }