Edit composables to align with their responsibilities

The order of the main content being displayed was from parsing -> rendering, which would lead to complexity when adding in tabbing functionality.
Having the order be Renderer -> parsing -> rendering was more clear.
This commit also introduces the idea of a "trace", where we have input a json array instead of a singular json

Author: wenli-cai

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

@@ -4,13 +4,15 @@ 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.Modifier
 import com.squareup.workflow1.traceviewer.model.WorkflowNode
 import com.squareup.workflow1.traceviewer.ui.InfoPanel
-import com.squareup.workflow1.traceviewer.utils.LoadWorkflowContent
+import com.squareup.workflow1.traceviewer.ui.RenderDiagram
 import com.squareup.workflow1.traceviewer.utils.SandboxBackground
 import com.squareup.workflow1.traceviewer.utils.UploadFile
 import io.github.vinceglb.filekit.PlatformFile
@@ -24,23 +26,28 @@ public fun App(
 ) {
   var selectedFile by remember { mutableStateOf<PlatformFile?>(null) }
   var selectedNode by remember { mutableStateOf<WorkflowNode?>(null) }
+  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 {
-        LoadWorkflowContent(selectedFile) {
-          selectedNode = it
-        }
+        RenderDiagram(
+          file = selectedFile,
+          traceInd = snapshotIndex,
+          onNodeSelect = { selectedNode = it }
+        )
       }
     }
 
+    // Top trace selector row
+    // TraceSelectRow { snapshotIndex.value = it }
+
     // Left side information panel
-    InfoPanel(
-      selectedNode
-    )
+    InfoPanel(selectedNode)
 
     // Bottom right upload button
     UploadFile(resetSelectedNode, { selectedFile = it })

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

@@ -1,4 +1,4 @@
-package com.squareup.workflow1.traceviewer
+package com.squareup.workflow1.traceviewer.ui
 
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -14,18 +14,46 @@ 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
 import androidx.compose.ui.unit.dp
 import com.squareup.workflow1.traceviewer.model.WorkflowNode
+import com.squareup.workflow1.traceviewer.utils.fetchTrace
+import io.github.vinceglb.filekit.PlatformFile
+
+/**
+ * Access point for drawing the main content of the app. It will load the trace for given files and
+ * tabs. This will also all errors related to errors parsing a given trace JSON file.
+ */
+@Composable
+public fun RenderDiagram(
+  file: PlatformFile?,
+  traceInd: Int,
+  onNodeSelect: (WorkflowNode) -> Unit,
+) {
+  var workflowNodes by remember { mutableStateOf<List<WorkflowNode>>(emptyList()) }
+  var isLoading by remember { mutableStateOf(true) }
+
+  LaunchedEffect(file) {
+    workflowNodes = fetchTrace(file)
+    isLoading = false
+  }
+
+  if (!isLoading) {
+    DrawTree(workflowNodes[traceInd], onNodeSelect)
+  }
+
+  // TODO: catch errors and display UI here
+}
 
 /**
  * Since the workflow nodes present a tree structure, we utilize a recursive function to draw the tree
  * The Column holds a subtree of nodes, and the Row holds all the children of the current node
  */
 @Composable
-public fun DrawWorkflowTree(
+private fun DrawTree(
   node: WorkflowNode,
   onNodeSelect: (WorkflowNode) -> Unit,
   modifier: Modifier = Modifier,
@@ -46,7 +74,7 @@ public fun DrawWorkflowTree(
       verticalAlignment = Alignment.Top
     ) {
       node.children.forEach { childNode ->
-        DrawWorkflowTree(childNode, onNodeSelect)
+        DrawTree(childNode, onNodeSelect)
       }
     }
   }
@@ -60,13 +88,10 @@ private fun DrawNode(
   node: WorkflowNode,
   onNodeSelect: (WorkflowNode) -> Unit,
 ) {
-  var open by remember { mutableStateOf(false) }
   Box(
     modifier = Modifier
       .clickable {
-        // open.value = !open.value
-
-        // selection will bubble back up to the main view to handle the selection
+        // Selecting a node will bubble back up to the main view to handle the selection
         onNodeSelect(node)
       }
       .padding(10.dp)

workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/utils/WorkflowTreeLoader.kt renamed to workflow-trace-viewer/src/jvmMain/kotlin/com/squareup/workflow1/traceviewer/utils/JsonParser.kt

@@ -1,40 +1,25 @@
 package com.squareup.workflow1.traceviewer.utils
 
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import com.squareup.moshi.JsonAdapter
 import com.squareup.moshi.JsonDataException
 import com.squareup.moshi.Moshi
+import com.squareup.moshi.Types
 import com.squareup.moshi.kotlin.reflect.KotlinJsonAdapterFactory
 import com.squareup.workflow1.traceviewer.model.WorkflowNode
-import com.squareup.workflow1.traceviewer.ui.DrawWorkflowTree
 import io.github.vinceglb.filekit.PlatformFile
 import io.github.vinceglb.filekit.readString
 import java.io.IOException
 
 /**
  * Parses the data from the given file and initiates the workflow tree
  */
-@Composable
-public fun LoadWorkflowContent(
+public suspend fun fetchTrace(
   file: PlatformFile?,
-  onNodeSelect: (WorkflowNode) -> Unit,
   modifier: Modifier = Modifier
-) {
-  val jsonString = remember { mutableStateOf<String?>(null) }
-  LaunchedEffect(file) {
-    jsonString.value = file?.readString()
-  }
-  val root = jsonString.value?.let { fetchRoot(it) }
-
-  if (root != null) {
-    DrawWorkflowTree(root, onNodeSelect)
-  } else {
-    Text("Empty data or failed to parse data") // TODO: proper handling of error
-  }
+): List<WorkflowNode> {
+  val jsonString = file?.readString()
+  return jsonString?.let { parseTrace(it) } ?: emptyList()
 }
 
 /**
@@ -43,15 +28,17 @@ public fun LoadWorkflowContent(
  * All the caught exceptions should be handled by the caller, and appropriate UI feedback should be
  * provided to user
  */
-public fun fetchRoot(
+public fun parseTrace(
   json: String
-): WorkflowNode? {
+): List<WorkflowNode> {
   return try {
     val moshi = Moshi.Builder()
       .add(KotlinJsonAdapterFactory())
       .build()
-    val workflowAdapter = moshi.adapter(WorkflowNode::class.java)
-    val root = workflowAdapter.fromJson(json)
+
+    val workflowList = Types.newParameterizedType(List::class.java, WorkflowNode::class.java)
+    val workflowAdapter: JsonAdapter<List<WorkflowNode>> = moshi.adapter(workflowList)
+    val root = workflowAdapter.fromJson(json) ?: emptyList()
     root
   } catch (e: JsonDataException) {
     throw JsonDataException("Failed to parse JSON: ${e.message}", e)

workflow-trace-viewer/src/jvmMain/resources/workflow-20.json

@@ -1,3 +1,4 @@
+[
 {
   "id": 1,
   "name": "root",
@@ -102,4 +103,5 @@
       ]
     }
   ]
-}
+}
+]

workflow-trace-viewer/src/jvmMain/resources/workflow-300.json

@@ -1,3 +1,4 @@
+[
 {
   "id": 1,
   "name": "root",
@@ -2595,4 +2596,5 @@
       ]
     }
   ]
-}
+}
+]