fix: allow seeing values of points on hover

Author: seveibar

src/components/ControllableWave/index.js

@@ -19,6 +19,7 @@ export const ControllableWave = ({
   timestamps,
   gridLineMetrics,
   timeFormat,
+  showValues,
 }) => {
   let [matrix, setMatrix] = useRafState(() => {
     const mat = new Matrix()
@@ -61,6 +62,7 @@ export const ControllableWave = ({
         gridLineMetrics={gridLineMetrics}
         timestamps={timestamps}
         durationGroups={durationGroups}
+        showValues={showValues}
       />
     </MouseTransformHandler>
   )

src/components/HighlightValueLabels/index.js

@@ -0,0 +1,56 @@
+import React, { Fragment, useState, useCallback } from "react"
+import useThemeColors from "../../hooks/use-colors"
+
+const HOV_SIZE = 50
+export const Point = ({ x, y, value, t, color, width }) => {
+  const [showPoint, setShowPoint] = useState(false)
+  const onShow = useCallback(() => setShowPoint(true), [setShowPoint])
+  const onHide = useCallback(() => setShowPoint(false), [setShowPoint])
+  return (
+    <g onMouseEnter={onShow} onMouseLeave={onHide}>
+      {showPoint && (
+        <Fragment>
+          <text x={x + 10} y={y - 10} fill={color}>
+            {value}
+          </text>
+          <circle cx={x} cy={y} r={5} fill={color} />
+        </Fragment>
+      )}
+      <rect
+        x={x - width / 2}
+        y={y - HOV_SIZE / 2}
+        width={width}
+        height={HOV_SIZE}
+        fill="transparent"
+        // If you're debugging the hover region, uncomment the following
+        // fill="rgba(0,0,0,0.5)"
+      ></rect>
+    </g>
+  )
+}
+
+export const HighlightValueLabels = ({
+  visibleTransformedPointsOnCurves = [],
+  curveColors = [],
+}) => {
+  return (
+    <g>
+      {visibleTransformedPointsOnCurves.flatMap((points, curveIndex) =>
+        points.map((p, i) => (
+          <Point
+            key={`${curveIndex},${i}`}
+            color={curveColors[curveIndex]}
+            width={
+              i === 0 || i === points.length - 1
+                ? HOV_SIZE
+                : (points[i + 1].x - points[i - 1].x) / 2
+            }
+            {...p}
+          />
+        ))
+      )}
+    </g>
+  )
+}
+
+export default HighlightValueLabels

src/components/MainLayout/index.js

@@ -41,6 +41,7 @@ export const MainLayout = ({
   graphHeight = 300,
   onChangeTimestamps,
   enabledTools = defaultEnabledTools,
+  showValues = false,
 }) => {
   const themeColors = useColors()
   const [activeDurationGroup, setActiveDurationGroup] = useState(null)
@@ -207,6 +208,7 @@ export const MainLayout = ({
       {curveGroups.map((curves, i) => (
         <ControllableWave
           key={i}
+          showValues={showValues}
           durations={durationGroups[activeDurationGroup]}
           onDragDuration={onDragDuration}
           onDragDurationStart={onDragDurationStart}

src/components/ReactTimeSeries/index.js

@@ -35,15 +35,17 @@ export const ReactTimeSeriesWithoutContext = ({
   if (!iface) throw new Error(`"interface" is a required prop`)
   if (!sample) throw new Error(`"sample" is a required prop`)
   const getRandomColorUsingHash = useGetRandomColorUsingHash()
-  const {
+  let {
     timeFormat,
     enabledTools = defaultEnabledTools,
     durationLabels = emptyAr,
     timestampLabels = emptyAr,
     graphs = defaultGraphs,
     allowCustomLabels,
+    showValues,
   } = iface
   let { timeData: sampleTimeData, audioUrl, csvUrl, annotation } = sample
+  if (showValues === undefined && !audioUrl) showValues = true
 
   const timeDataAvailable = [sampleTimeData, audioUrl, csvUrl].some(Boolean)
 
@@ -210,6 +212,7 @@ export const ReactTimeSeriesWithoutContext = ({
             durationLabels={durationLabels}
             allowCustomLabels={allowCustomLabels}
             enabledTools={enabledTools}
+            showValues={showValues}
           />
         </div>
       )}

src/components/Wave/index.js

@@ -4,6 +4,7 @@ import { styled } from "@material-ui/core/styles"
 import colorAlpha from "color-alpha"
 import useColors from "../../hooks/use-colors"
 import { formatTime } from "../../utils/format-time"
+import HighlightValueLabels from "../HighlightValueLabels"
 
 const userSelectOffStyle = {
   userSelect: "none",
@@ -62,6 +63,7 @@ export const Wave = ({
   durationGroups = [],
   timestamps = [],
   gridLineMetrics,
+  showValues = false,
 }) => {
   const colors = useColors()
 
@@ -86,9 +88,11 @@ export const Wave = ({
           startTimeOnGraph,
           visibleDuration,
           width
-        ).map(([t, y]) => {
-          return transformMatrix.applyToPoint(t, y)
-        })
+        ).map(([t, y]) => ({
+          ...transformMatrix.applyToPoint(t, y),
+          t,
+          value: y,
+        }))
       )
     }
     return visibleTransformedPointsOnCurves
@@ -200,6 +204,12 @@ export const Wave = ({
           />
         )
       })}
+      {showValues && (
+        <HighlightValueLabels
+          visibleTransformedPointsOnCurves={visibleTransformedPointsOnCurves}
+          curveColors={curves.map((c) => c.color)}
+        />
+      )}
     </svg>
   )
 }