Skip to content

Commit 6dddf94

Browse files
committed
Add legend for the colors used in the frame
1 parent b5d3b16 commit 6dddf94

File tree

3 files changed

+77
-9
lines changed

3 files changed

+77
-9
lines changed

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,15 @@ import androidx.compose.runtime.LaunchedEffect
66
import androidx.compose.runtime.getValue
77
import androidx.compose.runtime.mutableFloatStateOf
88
import androidx.compose.runtime.mutableIntStateOf
9-
import androidx.compose.runtime.mutableStateListOf
109
import androidx.compose.runtime.mutableStateOf
1110
import androidx.compose.runtime.remember
1211
import androidx.compose.runtime.setValue
1312
import androidx.compose.runtime.snapshotFlow
1413
import androidx.compose.ui.Alignment
1514
import androidx.compose.ui.Modifier
1615
import androidx.compose.ui.geometry.Offset
17-
import com.squareup.workflow1.traceviewer.model.Node
1816
import com.squareup.workflow1.traceviewer.model.NodeUpdate
17+
import com.squareup.workflow1.traceviewer.ui.ColorLegend
1918
import com.squareup.workflow1.traceviewer.ui.FrameSelectTab
2019
import com.squareup.workflow1.traceviewer.ui.RenderTrace
2120
import com.squareup.workflow1.traceviewer.ui.RightInfoPanel
@@ -40,6 +39,7 @@ internal fun App(
4039
// Default to File mode, and can be toggled to be in Live mode.
4140
var traceMode by remember { mutableStateOf<TraceMode>(TraceMode.File(null)) }
4241
var selectedTraceFile by remember { mutableStateOf<PlatformFile?>(null) }
42+
var active by remember(traceMode) { mutableStateOf(false) }
4343
val socket = remember { SocketClient() }
4444

4545
Runtime.getRuntime().addShutdownHook(
@@ -74,6 +74,7 @@ internal fun App(
7474
val readyForLiveTrace = traceMode is TraceMode.Live
7575

7676
if (readyForFileTrace || readyForLiveTrace) {
77+
active = true
7778
RenderTrace(
7879
traceSource = traceMode,
7980
frameInd = frameIndex,
@@ -91,12 +92,6 @@ internal fun App(
9192
modifier = Modifier.align(Alignment.TopCenter)
9293
)
9394

94-
RightInfoPanel(
95-
selectedNode = selectedNode,
96-
modifier = Modifier
97-
.align(Alignment.TopEnd)
98-
)
99-
10095
TraceModeToggleSwitch(
10196
onToggle = {
10297
resetStates()
@@ -129,6 +124,18 @@ internal fun App(
129124
modifier = Modifier.align(Alignment.BottomStart)
130125
)
131126
}
127+
128+
if (active) {
129+
ColorLegend(
130+
modifier = Modifier.align(Alignment.BottomEnd)
131+
)
132+
}
133+
134+
RightInfoPanel(
135+
selectedNode = selectedNode,
136+
modifier = Modifier
137+
.align(Alignment.TopEnd)
138+
)
132139
}
133140
}
134141

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
package com.squareup.workflow1.traceviewer.ui
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.border
5+
import androidx.compose.foundation.layout.Arrangement
6+
import androidx.compose.foundation.layout.Box
7+
import androidx.compose.foundation.layout.Column
8+
import androidx.compose.foundation.layout.Row
9+
import androidx.compose.foundation.layout.padding
10+
import androidx.compose.foundation.layout.size
11+
import androidx.compose.material.Text
12+
import androidx.compose.runtime.Composable
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.graphics.Color
16+
import androidx.compose.ui.text.font.FontStyle
17+
import androidx.compose.ui.unit.dp
18+
import com.squareup.workflow1.traceviewer.model.NodeState
19+
20+
/**
21+
* Simple UI displaying the color legend for the different node states in the trace
22+
*/
23+
@Composable
24+
fun ColorLegend(
25+
modifier: Modifier = Modifier
26+
) {
27+
Box(
28+
modifier = modifier
29+
) {
30+
Column(
31+
verticalArrangement = Arrangement.spacedBy(4.dp),
32+
modifier = Modifier.padding(8.dp)
33+
) {
34+
NodeState.entries.forEach { state ->
35+
Row(
36+
horizontalArrangement = Arrangement.spacedBy(8.dp),
37+
verticalAlignment = Alignment.CenterVertically,
38+
modifier = Modifier.padding(vertical = 2.dp)
39+
) {
40+
Box(
41+
modifier = Modifier
42+
.size(16.dp)
43+
.background(
44+
color = state.color,
45+
)
46+
.then(
47+
if (state.color == Color.Transparent) {
48+
modifier.border(1.dp, Color.Gray)
49+
} else {
50+
modifier
51+
}
52+
)
53+
)
54+
Text(
55+
text = state.name,
56+
fontStyle = FontStyle.Italic,
57+
)
58+
}
59+
}
60+
}
61+
}
62+
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import androidx.compose.ui.graphics.Color
1717
import androidx.compose.ui.input.pointer.PointerEventType
1818
import androidx.compose.ui.input.pointer.pointerInput
1919
import androidx.compose.ui.unit.dp
20-
import com.squareup.workflow1.traceviewer.model.Node
2120
import kotlinx.coroutines.coroutineScope
2221
import kotlinx.coroutines.launch
2322

0 commit comments

Comments
 (0)