Add file dump functionality from live tracing mode

Author: wenli-cai

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

@@ -19,6 +19,7 @@ import com.squareup.workflow1.traceviewer.ui.FrameSelectTab
 import com.squareup.workflow1.traceviewer.ui.RenderTrace
 import com.squareup.workflow1.traceviewer.ui.RightInfoPanel
 import com.squareup.workflow1.traceviewer.ui.TraceModeToggleSwitch
+import com.squareup.workflow1.traceviewer.util.FileDump
 import com.squareup.workflow1.traceviewer.util.SandboxBackground
 import com.squareup.workflow1.traceviewer.util.SocketClient
 import com.squareup.workflow1.traceviewer.util.UploadFile
@@ -33,6 +34,7 @@ internal fun App(
 ) {
   var selectedNode by remember { mutableStateOf<NodeUpdate?>(null) }
   var frameSize by remember { mutableIntStateOf(0) }
+  var rawRenderPass by remember { mutableStateOf("")}
   var frameIndex by remember { mutableIntStateOf(0) }
   val sandboxState = remember { SandboxState() }
 
@@ -80,7 +82,8 @@ internal fun App(
           frameInd = frameIndex,
           onFileParse = { frameSize += it },
           onNodeSelect = { selectedNode = it },
-          onNewFrame = { frameIndex += 1 }
+          onNewFrame = { frameIndex += 1 },
+          onNewData = { rawRenderPass += "$it," },
         )
       }
     }
@@ -125,6 +128,13 @@ internal fun App(
       )
     }
 
+    if (traceMode is TraceMode.Live) {
+      FileDump(
+        trace = rawRenderPass,
+        modifier = Modifier.align(Alignment.BottomStart)
+      )
+    }
+
     if (active) {
       ColorLegend(
         modifier = Modifier.align(Alignment.BottomEnd)

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

@@ -53,6 +53,7 @@ internal fun RenderTrace(
   onFileParse: (Int) -> Unit,
   onNodeSelect: (NodeUpdate) -> Unit,
   onNewFrame: () -> Unit,
+  onNewData: (String) -> Unit,
   modifier: Modifier = Modifier
 ) {
   var isLoading by remember(traceSource) { mutableStateOf(true) }
@@ -79,6 +80,7 @@ internal fun RenderTrace(
   // for when a new frame is received.
   fun handleParseResult(
     parseResult: ParseResult,
+    rawRenderPass: String? = null,
     onNewFrame: (() -> Unit)? = null
   ): Boolean {
     return when (parseResult) {
@@ -94,6 +96,8 @@ internal fun RenderTrace(
           affected = parseResult.affectedNodes
         )
         onNewFrame?.invoke()
+        // Only for live tracing, we want to store raw render pass data to be able to file dump.
+        rawRenderPass?.let { onNewData(it) }
         true
       }
     }
@@ -117,7 +121,7 @@ internal fun RenderTrace(
           for (renderPass in socket.renderPassChannel) {
             val currentTree = if (fullTree.isEmpty()) null else fullTree.last()
             val parseResult = parseLiveTrace(renderPass, adapter, currentTree)
-            handleParseResult(parseResult, onNewFrame)
+            handleParseResult(parseResult, renderPass, onNewFrame)
           }
         }
       }
@@ -148,7 +152,6 @@ internal fun RenderTrace(
  * A mutable map is used to persist the expansion state of the nodes, allowing them to be open and
  * closed from user clicks.
  */
-@OptIn(ExperimentalComposeUiApi::class)
 @Composable
 private fun DrawTree(
   node: Node,

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

@@ -0,0 +1,62 @@
+package com.squareup.workflow1.traceviewer.util
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults.buttonColors
+import androidx.compose.material.Text
+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.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import okio.FileSystem
+import okio.Path.Companion.toPath
+import okio.buffer
+import java.time.LocalDateTime
+import java.time.format.DateTimeFormatter
+
+@Composable
+internal fun FileDump(
+  trace: String,
+  modifier: Modifier
+) {
+  var clicked by remember { mutableStateOf(false) }
+  Button (
+    modifier = modifier.padding(16.dp),
+    shape = CircleShape,
+    colors = buttonColors(Color.Black),
+    onClick = {
+      clicked = true
+      writeToFile(trace)
+    }
+  ) {
+    val text = if (clicked) {
+      "Trace saved to Downloads"
+    } else {
+      "Save trace to file"
+    }
+    Text(
+      text = text,
+      color = Color.White
+    )
+  }
+}
+
+private fun writeToFile(trace: String) {
+  val timestamp = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyyMMdd_HHmmss"))
+  val home = System.getProperty("user.home")
+  val path = "$home/Downloads/workflow-trace_$timestamp.json".toPath()
+
+  FileSystem.SYSTEM.sink(path).use { sink ->
+    sink.buffer().use { bufferedSink ->
+      bufferedSink.writeUtf8("[")
+      bufferedSink.writeUtf8(trace.dropLast(1)) // Fenceposting final comma
+      bufferedSink.writeUtf8("]")
+    }
+  }
+}
+