fix: improve ms/ns display, waveforms now format time correctly

Author: seveibar

src/components/ControllableWave/index.js

@@ -18,6 +18,7 @@ export const ControllableWave = ({
   durationGroups,
   timestamps,
   gridLineMetrics,
+  timeFormat,
 }) => {
   let [matrix, setMatrix] = useRafState(() => {
     const mat = new Matrix()
@@ -54,6 +55,7 @@ export const ControllableWave = ({
         curves={curves}
         width={width}
         height={height}
+        timeFormat={timeFormat}
         transformMatrix={matrix}
         gridLineMetrics={gridLineMetrics}
         timestamps={timestamps}

src/components/MainLayout/index.js

@@ -198,6 +198,7 @@ export const MainLayout = ({
           gridLineMetrics={gridLineMetrics}
           topLevelMatrix={topLevelMatrix}
           setTopLevelMatrix={setTopLevelMatrix}
+          timeFormat={timeFormat}
         />
       ))}
     </Container>

src/components/Timeline/index.js

@@ -24,8 +24,8 @@ const TimeText = styled("div")(({ x, faded }) => ({
   left: x,
   borderLeft: "1px solid rgba(255,255,255,0.5)",
   paddingLeft: 4,
-  whiteSpace: "wrap",
-  opacity: faded ? 0.5 : 1,
+  whiteSpace: "pre-wrap",
+  opacity: faded ? 0.25 : 0.75,
 }))
 
 const Svg = styled("svg")({

src/components/Wave/index.js

@@ -5,7 +5,11 @@ import colorAlpha from "color-alpha"
 import useColors from "../../hooks/use-colors"
 import { formatTime } from "../../utils/format-time"
 
-const userSelectOffStyle = { userSelect: "none" }
+const userSelectOffStyle = {
+  userSelect: "none",
+  whiteSpace: "pre",
+  fontVariantNumeric: "tabular-nums",
+}
 
 const Container = styled("div")({})
 
@@ -53,6 +57,7 @@ export const Wave = ({
   width,
   height,
   transformMatrix,
+  timeFormat,
   durationGroups = [],
   timestamps = [],
   gridLineMetrics,
@@ -85,10 +90,10 @@ export const Wave = ({
           const globalTimelineIndex = Math.floor(timeAtLine / majorDuration)
 
           let textElm = null
-          if (globalTimelineIndex % 7 === 0) {
+          if (globalTimelineIndex % 1 === 0) {
             const timeLines = formatTime(
               timeAtLine,
-              "dates",
+              timeFormat,
               visibleDuration
             ).split("\n")
             textElm = timeLines.map((tl, i) => (

src/utils/format-time.js

@@ -12,13 +12,18 @@ export const formatTime = (time, format, visibleDuration) => {
       (!lessThan3DaysShown ? "" : "\n" + moment(time).format("h:mm:ss a"))
     )
   }
-  if (time < 0) return "< 00:00:00"
-  const deciSecs = Math.floor((time % 1000) / 10)
+  const showNs = visibleDuration < 5
+  const showMs = visibleDuration < 5000
+  const ns = Math.floor((time * 1000) % 1000)
+  const ms = Math.floor(time % 1000)
   const secs = Math.floor((time / 1000) % 60)
   const mins = Math.floor((time / 60000) % 60)
   const hours = Math.floor(time / (60000 * 60))
-  return [hours, mins, secs, deciSecs]
-    .map((t) => t.toString().padStart(2, "0"))
-    .join(":")
+  if (time < 0) return "< 00:00:00"
+  return (
+    [hours, mins, secs].map((t) => t.toString().padStart(2, "0")).join(":") +
+    (showMs ? `.${ms.toString().padStart(3, "0")}` : "") +
+    (showNs ? `\n+${ns.toString()} ns` : "")
+  )
 }
 export default formatTime

src/utils/get-minor-major-duration-lines.js

@@ -32,7 +32,7 @@ export const findReasonableGridDuration = (duration) => {
   let bestFittingIntervalIndex = 0
   let bestFittingIntervalScore = -Infinity
   for (const [i, [, timeInterval]] of Object.entries(timeIntervals)) {
-    const timeIntervalScore = -1 * Math.abs(duration / timeInterval - 20)
+    const timeIntervalScore = -1 * Math.abs(duration / timeInterval - 5)
     if (timeIntervalScore > bestFittingIntervalScore) {
       bestFittingIntervalIndex = i
       bestFittingIntervalScore = timeIntervalScore