fix: add formatting for small numbers in nonetype, width layout

Author: seveibar

package.json

@@ -19,6 +19,7 @@
     "moment": "^2.29.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-measure": "^2.5.2",
     "react-scripts": "3.4.3",
     "react-select": "^3.1.0",
     "react-use": "^15.3.4",

src/components/MainLayout/index.js

@@ -17,7 +17,6 @@ const Container = styled("div")(({ themeColors, width }) => ({
   display: "flex",
   flexDirection: "column",
   backgroundColor: themeColors.bg,
-  padding: 16,
 }))
 
 export const MainLayout = ({
@@ -26,10 +25,11 @@ export const MainLayout = ({
   durationGroups,
   onChangeDurationGroups,
   timestamps,
+  width = 500,
+  graphHeight = 300,
   onChangeTimestamps,
 }) => {
   const themeColors = useColors()
-  const width = 500
   const [activeDurationGroup, setActiveDurationGroup] = useState(null)
   const [draggedDurationIndex, setDraggedDurationIndex] = useState(null)
   const [selectedDurationIndex, setSelectedDurationIndex] = useState(null)
@@ -38,7 +38,10 @@ export const MainLayout = ({
   const [topLevelMatrix, setTopLevelMatrix] = useState(() =>
     initTopLevelMatrix({ curveGroups, width })
   )
-  const { visibleTimeStart, visibleTimeEnd } = useTimeRange(topLevelMatrix, 500)
+  const { visibleTimeStart, visibleTimeEnd } = useTimeRange(
+    topLevelMatrix,
+    width
+  )
 
   const onDragDuration = useEventCallback((startTime, endTime) => {
     if (activeDurationGroup === null) return
@@ -137,7 +140,7 @@ export const MainLayout = ({
     ])
   })
 
-  const gridLineMetrics = getMinorMajorDurationLines(topLevelMatrix, 500)
+  const gridLineMetrics = getMinorMajorDurationLines(topLevelMatrix, width)
 
   return (
     <Container width={width} themeColors={themeColors}>
@@ -191,7 +194,7 @@ export const MainLayout = ({
           timestamps={timestamps}
           curves={curves}
           width={width}
-          height={200}
+          height={graphHeight}
           gridLineMetrics={gridLineMetrics}
           topLevelMatrix={topLevelMatrix}
           setTopLevelMatrix={setTopLevelMatrix}

src/components/MouseTransformHandler/index.js

@@ -4,8 +4,8 @@ import useEventCallback from "use-event-callback"
 import useToolMode from "../../hooks/use-tool-mode"
 
 const Container = styled("div")({
-  width: 500,
-  height: 200,
+  // width: 500,
+  // height: 200,
 })
 
 export const MouseTransformHandler = ({

src/components/ReactTimeSeries/ReactTimeSeries.stories.js

@@ -44,3 +44,37 @@ export const WithAudioURL = () => {
     />
   )
 }
+
+export const ReallySimple = () => {
+  return (
+    <ReactTimeSeries
+      interface={{}}
+      sample={{
+        timeData: [
+          { time: 0, value: 0 },
+          { time: 500, value: 500 },
+          { time: 1000, value: 1000 },
+        ],
+      }}
+      onModifySample={() => null}
+    />
+  )
+}
+
+export const SmallValues = () => {
+  return (
+    <ReactTimeSeries
+      interface={{
+        timeFormat: "none",
+      }}
+      sample={{
+        timeData: [
+          { time: 0, value: 0 },
+          { time: 0.02, value: 500 },
+          { time: 0.05, value: 1000 },
+        ],
+      }}
+      onModifySample={() => null}
+    />
+  )
+}

src/components/ReactTimeSeries/index.js

@@ -1,9 +1,10 @@
-import React, { useMemo } from "react"
+import React, { useMemo, useState } from "react"
 import { setIn } from "seamless-immutable"
 import useEventCallback from "use-event-callback"
 import { useAsyncMemo } from "use-async-memo"
 import { RecoilRoot } from "recoil"
 import useGetRandomColorUsingHash from "../../hooks/use-get-random-color-using-hash"
+import Measure from "react-measure"
 
 import MainLayout from "../MainLayout"
 
@@ -28,6 +29,7 @@ export const ReactTimeSeriesWithoutContext = ({
   corsProxy = defaultCorsProxy,
   interface: iface,
   sample,
+  width: widthProp,
   onModifySample,
 }) => {
   if (!iface) throw new Error(`"interface" is a required prop`)
@@ -174,6 +176,10 @@ export const ReactTimeSeriesWithoutContext = ({
   const onChangeTimestamps = useEventCallback((newTimestamps) => {
     onModifySample(setIn(sample, ["annotation", "timestamps"], newTimestamps))
   })
+  const [width, setWidth] = useState(widthProp)
+  const onResize = useEventCallback(({ bounds }) => {
+    if (!widthProp) setWidth(bounds.width)
+  })
 
   if (timeDataLoading) return "loading" // TODO real loader
 
@@ -188,14 +194,21 @@ export const ReactTimeSeriesWithoutContext = ({
   }
 
   return (
-    <MainLayout
-      curveGroups={curveGroups}
-      timeFormat={timeFormat}
-      durationGroups={durationGroups}
-      onChangeDurationGroups={onChangeDurationGroups}
-      timestamps={timestamps}
-      onChangeTimestamps={onChangeTimestamps}
-    />
+    <Measure bounds onResize={onResize}>
+      {({ measureRef }) => (
+        <div ref={measureRef}>
+          <MainLayout
+            width={width}
+            curveGroups={curveGroups}
+            timeFormat={timeFormat}
+            durationGroups={durationGroups}
+            onChangeDurationGroups={onChangeDurationGroups}
+            timestamps={timestamps}
+            onChangeTimestamps={onChangeTimestamps}
+          />
+        </div>
+      )}
+    </Measure>
   )
 }
 

src/components/Timeline/index.js

@@ -1,10 +1,11 @@
 import React from "react"
 import range from "lodash/range"
 import { styled } from "@material-ui/core/styles"
-import moment from "moment"
 import useColors from "../../hooks/use-colors"
 import TimeStamp from "../TimeStamp"
 
+import { formatTime } from "../../utils/format-time"
+
 const Container = styled("div")(({ width, themeColors }) => ({
   width,
   overflow: "hidden",
@@ -14,7 +15,7 @@ const Container = styled("div")(({ width, themeColors }) => ({
   color: themeColors.fg,
 }))
 
-const TimeText = styled("div")(({ x }) => ({
+const TimeText = styled("div")(({ x, faded }) => ({
   display: "inline-block",
   width: 80,
   fontSize: 12,
@@ -24,6 +25,7 @@ const TimeText = styled("div")(({ x }) => ({
   borderLeft: "1px solid rgba(255,255,255,0.5)",
   paddingLeft: 4,
   whiteSpace: "wrap",
+  opacity: faded ? 0.5 : 1,
 }))
 
 const Svg = styled("svg")({
@@ -32,25 +34,6 @@ const Svg = styled("svg")({
   bottom: 0,
 })
 
-export const formatTime = (time, format, visibleDuration) => {
-  const lessThan3DaysShown = visibleDuration < 1000 * 60 * 60 * 24 * 3
-  if (format === "none") return time
-  if (format === "dates") {
-    return (
-      moment(time).format("L") +
-      (!lessThan3DaysShown ? "" : "\n" + moment(time).format("h:mm:ss a"))
-    )
-  }
-  if (time < 0) return ""
-  const deciSecs = Math.floor((time % 1000) / 10)
-  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(":")
-}
-
 export const Timeline = ({
   timeFormat,
   visibleTimeStart,
@@ -81,6 +64,7 @@ export const Timeline = ({
         <TimeText
           key={timeTextIndex}
           x={(timeTextIndex / timeTextCount) * width}
+          faded={timeTextTimes[timeTextIndex] < 0}
         >
           {formatTime(
             timeTextTimes[timeTextIndex],

src/components/Wave/index.js

@@ -3,7 +3,7 @@ import range from "lodash/range"
 import { styled } from "@material-ui/core/styles"
 import colorAlpha from "color-alpha"
 import useColors from "../../hooks/use-colors"
-import { formatTime } from "../Timeline"
+import { formatTime } from "../../utils/format-time"
 
 const userSelectOffStyle = { userSelect: "none" }
 

src/utils/format-time.js

@@ -0,0 +1,24 @@
+import moment from "moment"
+
+export const formatTime = (time, format, visibleDuration) => {
+  const lessThan3DaysShown = visibleDuration < 1000 * 60 * 60 * 24 * 3
+  if (format === "none")
+    return visibleDuration > 10
+      ? Math.round(time)
+      : time.toFixed(2 - Math.log(visibleDuration) / Math.log(10))
+  if (format === "dates") {
+    return (
+      moment(time).format("L") +
+      (!lessThan3DaysShown ? "" : "\n" + moment(time).format("h:mm:ss a"))
+    )
+  }
+  if (time < 0) return "< 00:00:00"
+  const deciSecs = Math.floor((time % 1000) / 10)
+  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(":")
+}
+export default formatTime

yarn.lock

@@ -1990,6 +1990,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.2.0":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
+  integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -8372,6 +8379,11 @@ get-caller-file@^2.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-node-dimensions@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz#fb7b4bb57060fb4247dd51c9d690dfbec56b0823"
+  integrity sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ==
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -13379,6 +13391,16 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-measure@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/react-measure/-/react-measure-2.5.2.tgz#4ffc410e8b9cb836d9455a9ff18fc1f0fca67f89"
+  integrity sha512-M+rpbTLWJ3FD6FXvYV6YEGvQ5tMayQ3fGrZhRPHrE9bVlBYfDCLuDcgNttYfk8IqfOI03jz6cbpqMRTUclQnaA==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    get-node-dimensions "^1.2.1"
+    prop-types "^15.6.2"
+    resize-observer-polyfill "^1.5.0"
+
 react-popper-tooltip@^2.11.0:
   version "2.11.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"
@@ -13945,7 +13967,7 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
-resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==