From 063e0fb12bbfc47123e3d2034933bca9d3a114a6 Mon Sep 17 00:00:00 2001
From: Peli de Halleux <pelikhan@users.noreply.github.com>
Date: Fri, 5 Jan 2024 21:53:55 +0000
Subject: [PATCH] display timings in packet list

---
 .vscode/settings.json                               |  1 +
 jacdac-ts                                           |  2 +-
 src/components/PacketListItem.tsx                   |  2 +-
 src/components/tools/PacketInspector.tsx            | 13 ++++++++++---
 src/components/trace/TraceTimeFilterRangeSlider.tsx |  6 ++++--
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 477405b1519b..bbceb1a36d21 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -52,6 +52,7 @@
         "microbit",
         "microcontroller",
         "microcontrollers",
+        "millis",
         "pbuf",
         "pixdata",
         "qwiic",
diff --git a/jacdac-ts b/jacdac-ts
index 58dab9d439a9..05942b313f42 160000
--- a/jacdac-ts
+++ b/jacdac-ts
@@ -1 +1 @@
-Subproject commit 58dab9d439a92398aab9dc540a610d5a0cfbc70c
+Subproject commit 05942b313f425637782734841c6c740855b2779c
diff --git a/src/components/PacketListItem.tsx b/src/components/PacketListItem.tsx
index 206a35bb984f..d5c03e026ad9 100644
--- a/src/components/PacketListItem.tsx
+++ b/src/components/PacketListItem.tsx
@@ -69,7 +69,7 @@ export default function PacketListItem(props: {
                 : ""
         }`
     const secondary = `${
-        showTime ? `${prettyDuration(packet.timestamp)}: ` : ""
+        showTime ? `${prettyDuration(packet.timestamp, true)}: ` : ""
     }${packet.isCommand ? "to" : "from"} ${packet.friendlyDeviceName}/${
         packet.friendlyServiceName
     }${notImplemented ? `, not implemented` : ""}`
diff --git a/src/components/tools/PacketInspector.tsx b/src/components/tools/PacketInspector.tsx
index 2530fd01fda0..ded482df7197 100644
--- a/src/components/tools/PacketInspector.tsx
+++ b/src/components/tools/PacketInspector.tsx
@@ -3,9 +3,9 @@ import Alert from "../ui/Alert"
 import PacketsContext from "../PacketsContext"
 // tslint:disable-next-line: no-submodule-imports match-default-export-name
 import HistoryIcon from "@mui/icons-material/History"
-import { Box, Chip, Tooltip, useTheme } from "@mui/material"
+import { Box, Chip, Tooltip, Typography, useTheme } from "@mui/material"
 import PacketSpecification from "../specification/PacketSpecification"
-import { printPacket } from "../../../jacdac-ts/src/jdom/pretty"
+import { prettyDuration, printPacket } from "../../../jacdac-ts/src/jdom/pretty"
 import PacketHeaderLayout from "../PacketHeaderLayout"
 import {
     META_ACK,
@@ -67,7 +67,14 @@ export default function PacketInspector() {
                 {`${name} ${packet.isCommand ? "to" : "from"} ${
                     packet.friendlyDeviceName
                 }/${packet.friendlyServiceName}`}
-
+                <Chip
+                    sx={{ mr: 0.25 }}
+                    aria-label={`timestamp: ${prettyDuration(
+                        packet.timestamp,
+                        true
+                    )}`}
+                    label={prettyDuration(packet.timestamp, true)}
+                />
                 {packet.sender && (
                     <Chip
                         aria-label={`sender: ${packet.sender}`}
diff --git a/src/components/trace/TraceTimeFilterRangeSlider.tsx b/src/components/trace/TraceTimeFilterRangeSlider.tsx
index f2f45d8960d1..00c7b43cc380 100644
--- a/src/components/trace/TraceTimeFilterRangeSlider.tsx
+++ b/src/components/trace/TraceTimeFilterRangeSlider.tsx
@@ -36,6 +36,8 @@ export default function TraceTimeFilterRangeSlider() {
 
     if (!minMax || !debouncedValue) return <></>
 
+    const d = (ms: number) => prettyDuration(ms)
+
     return (
         <Box display="flex" pl={theme.spacing(0.25)} pr={theme.spacing(0.25)}>
             <Slider
@@ -44,8 +46,8 @@ export default function TraceTimeFilterRangeSlider() {
                 value={value}
                 onChange={handleChange}
                 valueLabelDisplay="auto"
-                getAriaValueText={prettyDuration}
-                valueLabelFormat={prettyDuration}
+                getAriaValueText={d}
+                valueLabelFormat={d}
             />
         </Box>
     )