add Relative Time display mode in Transport Timeline

Author: sunny-chung

src/jvmMain/kotlin/com/sunnychung/application/multiplatform/hellohttp/model/UserResponse.kt

@@ -4,8 +4,9 @@ import com.sunnychung.application.multiplatform.hellohttp.annotation.Persisted
 import com.sunnychung.application.multiplatform.hellohttp.document.Identifiable
 import com.sunnychung.application.multiplatform.hellohttp.extension.endWithNewLine
 import com.sunnychung.application.multiplatform.hellohttp.util.uuidString
-import com.sunnychung.lib.multiplatform.kdatetime.KInstant
+import com.sunnychung.lib.multiplatform.kdatetime.KDateTimeFormattable
 import com.sunnychung.lib.multiplatform.kdatetime.KZoneOffset
+import com.sunnychung.lib.multiplatform.kdatetime.KZonedInstant
 import com.sunnychung.lib.multiplatform.kdatetime.serializer.KInstantAsLong
 import kotlinx.serialization.Serializable
 import kotlinx.serialization.Transient
@@ -237,21 +238,32 @@ Duration: ${String.format("%.3f", (endAt!! - startAt!!).millis / 1000.0)}s
     else -> throw UnsupportedOperationException()
 }
 
-fun UserResponse.describeTransportLayer() = buildString {
+fun UserResponse.describeTransportLayer(isRelativeTimeDisplay: Boolean) = buildString {
     val events = synchronized(rawExchange.exchanges) {
         rawExchange.exchanges.toList()
     }
+    val startInstant = events.firstOrNull()?.instant ?: run {
+        appendLine("No transportation")
+        return@buildString
+    }
     val titles = listOf(
         "Time",
         "Dir",
         "Stream",
         "Detail"
     )
+    fun KZonedInstant.formatAbsTimeOrRelativeTime(): String =
+        if (isRelativeTimeDisplay) {
+            (this - startInstant).format("HH:mm:ss.lll")
+        } else {
+            this.format(TIME_FORMAT)
+        }
+
     val exportedData = events.map {
         listOf(
-            it.instant.atZoneOffset(KZoneOffset.local()).format(TIME_FORMAT) +
+            it.instant.atZoneOffset(KZoneOffset.local()).formatAbsTimeOrRelativeTime() +
                 if (it.lastUpdateInstant != null && it.lastUpdateInstant != it.instant) {
-                    " ~ " + it.lastUpdateInstant!!.atZoneOffset(KZoneOffset.local()).format(TIME_FORMAT)
+                    " ~ " + it.lastUpdateInstant!!.atZoneOffset(KZoneOffset.local()).formatAbsTimeOrRelativeTime()
                 } else {
                     ""
                 },

src/jvmMain/kotlin/com/sunnychung/application/multiplatform/hellohttp/ux/TransportTimelineView.kt

@@ -2,6 +2,7 @@ package com.sunnychung.application.multiplatform.hellohttp.ux
 
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
@@ -70,6 +71,8 @@ fun TransportTimelineView(modifier: Modifier = Modifier, protocol: ProtocolVersi
     val density = LocalDensity.current
     val clipboardManager = LocalClipboardManager.current
 
+    var isRelativeTimeDisplay by remember { mutableStateOf(false) }
+
     log.d { "TransportTimelineView recompose" }
 
     val streamDigits = if (protocol?.isHttp2() == true) {
@@ -205,12 +208,23 @@ fun TransportTimelineView(modifier: Modifier = Modifier, protocol: ProtocolVersi
     // --- for copy button end
 
     Column(modifier = modifier) {
-        Box(modifier = Modifier.fillMaxWidth()) {
+        Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp)) {
+            AppCheckbox(
+                checked = isRelativeTimeDisplay,
+                onCheckedChange = { isRelativeTimeDisplay = it },
+                size = 24.dp,
+                modifier = Modifier.padding(end = 4.dp)
+            )
+            AppText(
+                text = "Relative Time Display",
+                modifier = Modifier.clickable { isRelativeTimeDisplay = !isRelativeTimeDisplay },
+            )
+            Spacer(modifier = Modifier.weight(1f))
             AppTextButton(
                 text = "Copy All",
-                modifier = Modifier.align(Alignment.CenterEnd).padding(vertical = 4.dp, horizontal = 8.dp),
+                modifier = Modifier.padding(vertical = 4.dp),
             ) {
-                val textToCopy = response.describeTransportLayer()
+                val textToCopy = response.describeTransportLayer(isRelativeTimeDisplay = isRelativeTimeDisplay)
                 clipboardManager.setText(AnnotatedString(textToCopy))
                 AppContext.ErrorMessagePromptViewModel.showSuccessMessage("Copied text")
             }
@@ -297,6 +311,7 @@ fun TransportTimelineView(modifier: Modifier = Modifier, protocol: ProtocolVersi
                                 numCharsInALine = numCharsInALine,
                                 protocol = protocol,
                                 streamDigits = streamDigits,
+                                isRelativeTimeDisplay = isRelativeTimeDisplay,
                                 onMeasureContentWidth = { contentWidthInPx = it },
                                 onMeasureContentLines = { totalNumLines = it.totalNumLines },
                                 onPrepareComposable = {},
@@ -328,6 +343,7 @@ fun TransportTimelineView(modifier: Modifier = Modifier, protocol: ProtocolVersi
                                 numCharsInALine = numCharsInALine,
                                 protocol = protocol,
                                 streamDigits = streamDigits,
+                                isRelativeTimeDisplay = isRelativeTimeDisplay,
                                 onMeasureContentWidth = { contentWidthInPx = it },
                                 onMeasureContentLines = { totalNumLines = it.totalNumLines },
                                 onPrepareComposable = { composables += it },
@@ -372,6 +388,7 @@ private fun TransportTimelineContentView(
     numCharsInALine: Int,
     protocol: ProtocolVersion?,
     streamDigits: Int,
+    isRelativeTimeDisplay: Boolean,
     onMeasureContentWidth: (Int) -> Unit,
     onMeasureContentLines: (TransportTimelineContentMeasureResult) -> Unit,
     onPrepareComposable: (@Composable () -> Unit) -> Unit,
@@ -434,6 +451,8 @@ private fun TransportTimelineContentView(
                             TimestampColumn(
                                 createTime = it.instant,
                                 lastUpdateTime = it.lastUpdateInstant,
+                                isRelativeTimeDisplay = isRelativeTimeDisplay,
+                                startInstant = exchange.exchanges.first().instant,
                                 modifier = Modifier.width(TIMESTAMP_COLUMN_WIDTH_DP)
                                     .padding(end = 1.dp)
                             )
@@ -545,10 +564,17 @@ fun lazyOrNormalItem(
 }
 
 @Composable
-fun TimestampColumn(modifier: Modifier = Modifier, createTime: KInstant, lastUpdateTime: KInstant?) {
-    var text = DATE_TIME_FORMAT.format(createTime.atZoneOffset(KZoneOffset.local()))
+fun TimestampColumn(modifier: Modifier = Modifier, createTime: KInstant, lastUpdateTime: KInstant?, isRelativeTimeDisplay: Boolean, startInstant: KInstant) {
+    var text = DATE_TIME_FORMAT.format(
+        createTime.atZoneOffset(KZoneOffset.local()).let { if (isRelativeTimeDisplay) it - startInstant else it }
+    )
     if (lastUpdateTime != null && lastUpdateTime != createTime) {
-        text = "$text ~ ${DATE_TIME_FORMAT.format(lastUpdateTime.atZoneOffset(KZoneOffset.local()))}"
+        text = "$text ~ ${
+            DATE_TIME_FORMAT.format(
+                lastUpdateTime.atZoneOffset(KZoneOffset.local())
+                    .let { if (isRelativeTimeDisplay) it - startInstant else it }
+            )
+        }"
     }
 
     // sometimes copy button is not working, due to Compose bug: