Improve workflow visualizer functionality #1343
+2,539
−197
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| package com.squareup.workflow1.traceviewer.model | ||
|
|
||
| /** | ||
| * Since the logic of Workflow is hierarchical (where each workflow may have parent workflows and/or | ||
| * children workflows, a tree structure is most appropriate for representing the data rather than | ||
| * using flat data structures like an array. | ||
| * | ||
| * TBD what more metadata should be involved with each node, e.g. (props, states, # of render passes) | ||
| */ | ||
| public class Node( | ||
| val id: String, | ||
| val name: String, | ||
| val children: List<Node> | ||
| ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| 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.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.Node | ||
|
|
||
| /** | ||
| * A trace tab selector that allows devs to switch between different states within the provided trace. | ||
| */ | ||
| @Composable | ||
| public fun StateSelectTab( | ||
| frames: List<Node>, | ||
| currentIndex: Int, | ||
| onIndexChange: (Int) -> Unit, | ||
| modifier: Modifier = Modifier | ||
| ) { | ||
| val state = rememberLazyListState() | ||
|
|
||
| Surface( | ||
| modifier = modifier | ||
| .padding(4.dp), | ||
| color = Color.White, | ||
| ) { | ||
| LazyRow( | ||
| modifier = Modifier | ||
| .padding(8.dp), | ||
| state = state | ||
| ) { | ||
| items(frames.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) | ||
| ) | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| package com.squareup.workflow1.traceviewer.ui | ||
|
|
||
| import androidx.compose.foundation.background | ||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.foundation.layout.Spacer | ||
| import androidx.compose.foundation.layout.fillMaxHeight | ||
| import androidx.compose.foundation.layout.fillMaxWidth | ||
| import androidx.compose.foundation.layout.padding | ||
| import androidx.compose.foundation.layout.size | ||
| import androidx.compose.material.Icon | ||
| import androidx.compose.material.IconButton | ||
| import androidx.compose.material.Text | ||
| 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 | ||
| import androidx.compose.ui.unit.dp | ||
| import androidx.compose.ui.unit.sp | ||
| import com.squareup.workflow1.traceviewer.model.Node | ||
|
|
||
| /** | ||
| * A panel that displays information about the selected workflow node. | ||
| * It can be toggled open or closed, and resets when the user selects a new file | ||
| * | ||
| * @param selectedNode The currently selected workflow node, or null if no node is selected. | ||
| */ | ||
| @Composable | ||
| public fun InfoPanel( | ||
| selectedNode: Node?, | ||
| modifier: Modifier = Modifier | ||
| ) { | ||
| // This row is ordered RTL | ||
|
There was a problem hiding this comment. What is causing this row to be ordered right to left? There was a problem hiding this comment. I think RTL was the wrong description, I've changed it now to say The full-width spacer pushes everything to the end. |
||
| Row { | ||
| Spacer(modifier = Modifier.weight(1f)) | ||
|
|
||
| var panelOpen by remember { mutableStateOf(false) } | ||
|
|
||
| IconButton( | ||
| onClick = { panelOpen = !panelOpen }, | ||
| modifier = Modifier | ||
| .padding(8.dp) | ||
| .size(30.dp) | ||
| .align(Alignment.Top) | ||
| ) { | ||
| Icon( | ||
| imageVector = if (panelOpen) Filled.KeyboardArrowLeft else Filled.KeyboardArrowRight, | ||
| contentDescription = if (panelOpen) "Close Panel" else "Open Panel", | ||
| modifier = Modifier | ||
| ) | ||
| } | ||
|
|
||
| // based on open/close, display the node details (Column) | ||
|
There was a problem hiding this comment. This code was already really easy to understand so good job! No need for the comment. |
||
| if (panelOpen) { | ||
| PanelDetails( | ||
| selectedNode, | ||
| Modifier.fillMaxWidth(.35f) | ||
| ) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * The text details of the selected node. This should be closely coupled with the [Node] | ||
| * data class to see what information should be displayed. | ||
| */ | ||
| @Composable | ||
| private fun PanelDetails( | ||
|
There was a problem hiding this comment. nit: Instead of the comment perhaps |
||
| node: Node?, | ||
| modifier: Modifier = Modifier | ||
| ) { | ||
| Column( | ||
| modifier = modifier | ||
| .fillMaxHeight() | ||
| .background(Color.LightGray) | ||
| .padding(8.dp), | ||
| horizontalAlignment = Alignment.CenterHorizontally | ||
| ) { | ||
| if (node == null) { | ||
| Text("No node selected") | ||
| return@Column | ||
| } | ||
|
|
||
| Text("only visible with a node selected") | ||
|
There was a problem hiding this comment. Yeah just for now, it would be first to go once actual data starts coming in. |
||
| Text( | ||
| text = "This is a node panel for ${node.name}", | ||
| fontSize = 20.sp, | ||
| modifier = Modifier.padding(8.dp) | ||
| ) | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Set some standard for naming terminology in this project. Open to changing it though!