display timings in packet list

microsoft · Jan 5, 2024 · 063e0fb · 063e0fb
1 parent 4649db4
commit 063e0fb
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 7 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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>
     )