Include a detailed view of node via side panel

- This will provide a lot more information about each workflow node that's clicked, especially when it could contain a lot of information

Author: wenli-cai

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

@@ -1,6 +1,18 @@
 package com.squareup.workflow1.traceviewer
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -19,28 +31,90 @@ import io.github.vinceglb.filekit.readString
 public fun App(
   modifier: Modifier = Modifier
 ) {
-  Box {
-    var selectedFile by remember { mutableStateOf<PlatformFile?>(null) }
+  var selectedFile by remember { mutableStateOf<PlatformFile?>(null) }
+  var selectedNode by remember { mutableStateOf<WorkflowNode?>(null) }
+  // Used when user selects a new file in [UploadFile]
+  val resetSelectedNode = { selectedNode = null }
 
+  Box {
+    // Main content
     if (selectedFile != null) {
-      SandboxBackground { WorkflowContent(selectedFile!!) }
+      SandboxBackground {
+        LoadWorkflowContent(selectedFile) {
+          selectedNode = it
+        }
+      }
     }
 
-    UploadFile(onFileSelect = { selectedFile = it })
+    // Left side information panel
+    InfoPanel(
+      selectedNode.value
+    )
+
+    // Bottom right upload button
+    UploadFile(resetSelectedNode, { selectedFile.value = it })
   }
 }
 
+
+
 @Composable
-private fun WorkflowContent(file: PlatformFile) {
-  var jsonString by remember { mutableStateOf<String?>(null) }
-  LaunchedEffect(file) {
-    jsonString = file.readString()
+private fun InfoPanel(
+  selectedNode: WorkflowNode?
+) {
+  Row {
+    val panelOpen = remember { mutableStateOf(false) }
+
+    // based on open/close, display the node details (Column)
+    if (panelOpen.value) {
+      PanelDetails(
+        selectedNode,
+        Modifier.fillMaxWidth(.35f)
+      )
+    }
+
+    IconButton(
+      onClick = { panelOpen.value = !panelOpen.value },
+      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",
+        modifier = Modifier
+      )
+    }
   }
-  val root = jsonString?.let { parseTrace(it) }
+}
+
+@Composable
+private fun PanelDetails(
+  node: WorkflowNode?,
+  modifier: Modifier = Modifier
+) {
+  Column(
+    modifier
+      .fillMaxHeight()
+      .background(Color.LightGray)
+  ) {
+    if (node == null) {
+      Text("No node selected")
+      return@Column
+    }
 
-  if (root != null) {
-    DrawWorkflowTree(root)
-  } else {
-    Text("Empty data or failed to parse data") // TODO: proper handling of error
+    Column(
+      modifier = Modifier
+        .padding(8.dp),
+      horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+      Text("only visible with a node selected")
+      Text(
+        text = "This is a node panel for ${node.name}",
+        fontSize = 20.sp,
+        modifier = Modifier.padding(8.dp)
+      )
+    }
   }
 }

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

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