Fix fatal error on time series

.prettierrc

@@ -0,0 +1 @@
+{ "semi": false }

README.md

@@ -20,5 +20,3 @@ See [demos and example code here](https://universaldatatool.com/react-time-serie
 
 ![](https://user-images.githubusercontent.com/1910070/97049707-2821d080-154a-11eb-8a58-fa6446e38ef6.png)
 ![](https://user-images.githubusercontent.com/1910070/97049705-2821d080-154a-11eb-87eb-97e3506d6e1b.png)
-
-

src/components/BackgroundContainer/index.js

@@ -2,13 +2,13 @@ import React from "react"
 import { styled } from "@material-ui/core/styles"
 import useColors from "../../hooks/use-colors"
 
-const Container = styled("div")(({ themeColors }) => ({
-  backgroundColor: themeColors.bg,
+const Container = styled("div")(({ themecolors }) => ({
+  backgroundColor: themecolors.bg,
 }))
 
 export const BackgroundContainer = ({ children }) => {
-  const themeColors = useColors()
-  return <Container themeColors={themeColors}>{children}</Container>
+  const themecolors = useColors()
+  return <Container themecolors={themecolors}>{children}</Container>
 }
 
 export default BackgroundContainer

src/components/DurationBoxes/index.js

@@ -60,9 +60,13 @@ export const DurationBox = ({
   const [toolMode] = useToolMode()
   const colors = useColors()
   const visibleDuration = visibleTimeEnd - visibleTimeStart
-
   return (
-    <Container onClick={onClick} width={width} color={color} active={active}>
+    <Container
+      onClick={onClick}
+      width={width}
+      color={color}
+      active={active.toString()}
+    >
       {durations.map(
         (
           {

src/components/HighlightValueLabels/index.js

@@ -1,5 +1,4 @@
 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 }) => {

src/components/MainLayout/index.js

@@ -12,11 +12,11 @@ import initTopLevelMatrix from "../../utils/init-top-level-matrix"
 import Toolbar from "../Toolbar"
 import useGetRandomColorUsingHash from "../../hooks/use-get-random-color-using-hash"
 
-const Container = styled("div")(({ themeColors, width }) => ({
+const Container = styled("div")(({ themecolors, width }) => ({
   width: width,
   display: "flex",
   flexDirection: "column",
-  backgroundColor: themeColors.bg,
+  backgroundColor: themecolors.bg,
   padding: 16,
   boxSizing: "border-box",
 }))
@@ -46,7 +46,7 @@ export const MainLayout = ({
   onStopPlayback,
   isPlayingMedia,
 }) => {
-  const themeColors = useColors()
+  const themecolors = useColors()
   const [activeDurationGroup, setActiveDurationGroup] = useState(null)
   const [draggedDurationIndex, setDraggedDurationIndex] = useState(null)
   const [selectedDurationIndex, setSelectedDurationIndex] = useState(null)
@@ -165,7 +165,7 @@ export const MainLayout = ({
   const gridLineMetrics = getMinorMajorDurationLines(topLevelMatrix, width)
 
   return (
-    <Container width={width} themeColors={themeColors}>
+    <Container width={width} themecolors={themecolors}>
       <Toolbar
         timestamps={timestamps}
         timestampLabels={timestampLabels}

src/components/MouseTransformHandler/index.js

@@ -21,7 +21,6 @@ export const MouseTransformHandler = ({
   const [middleMouseDown, setMiddleMouseDown] = useState(false)
   const [toolMode] = useToolMode()
   const containerRef = useRef()
-
   useEffect(() => {
     const onKeyDown = (e) => {
       if (e.key === "Shift") {
@@ -149,9 +148,11 @@ export const MouseTransformHandler = ({
   const containerMountCallback = useCallback((ref) => {
     if (ref === null) {
       containerRef.current.removeEventListener("wheel", onWheel)
+      containerRef.current = ref
+    } else {
+      containerRef.current = ref
+      ref.addEventListener("wheel", onWheel, { passive: false })
     }
-    containerRef.current = ref
-    ref.addEventListener("wheel", onWheel, { passive: false })
   }, [])
 
   return (

src/components/Timeline/index.js

@@ -12,14 +12,14 @@ import useEventCallback from "use-event-callback"
 
 import { formatTime } from "../../utils/format-time"
 
-const Container = styled("div")(({ width, themeColors }) => ({
+const Container = styled("div")(({ width, themecolors }) => ({
   width,
   overflow: "hidden",
   position: "relative",
   height: 64,
   cursor: "pointer",
-  borderBottom: `1px solid ${themeColors.Selection}`,
-  color: themeColors.fg,
+  borderBottom: `1px solid ${themecolors.Selection}`,
+  color: themecolors.fg,
 }))
 
 const TimeText = styled("div")(({ x, faded }) => ({
@@ -36,15 +36,15 @@ const TimeText = styled("div")(({ x, faded }) => ({
   opacity: faded ? 0.25 : 0.75,
 }))
 
-const TimeCursor = styled("div")(({ left, themeColors }) => ({
+const TimeCursor = styled("div")(({ left, themecolors }) => ({
   position: "absolute",
   width: 0,
   height: 0,
   top: 0,
   left: left - 6,
   borderLeft: "8px solid transparent",
   borderRight: "8px solid transparent",
-  borderTop: `12px solid ${themeColors.green}`,
+  borderTop: `12px solid ${themecolors.green}`,
 }))
 
 const Svg = styled("svg")({
@@ -64,7 +64,7 @@ export const Timeline = ({
   onRemoveTimestamp,
   timeCursorTime: timeCursorTimeProp,
 }) => {
-  const themeColors = useColors()
+  const themecolors = useColors()
   const visibleDuration = visibleTimeEnd - visibleTimeStart
   // TODO compute tick count using width
   const timeTextCount = Math.ceil(width / 100)
@@ -100,15 +100,15 @@ export const Timeline = ({
   return (
     <Container
       ref={containerRef}
-      themeColors={themeColors}
+      themecolors={themecolors}
       width={width}
       onClick={rootAudioElm ? onClickTimeline : undefined}
     >
       {range(timeTextCount).map((timeTextIndex) => (
         <TimeText
           key={timeTextIndex}
           x={(timeTextIndex / timeTextCount) * width}
-          faded={timeTextTimes[timeTextIndex] < 0}
+          faded={(timeTextTimes[timeTextIndex] < 0).toString()}
         >
           {formatTime(
             timeTextTimes[timeTextIndex],
@@ -128,7 +128,7 @@ export const Timeline = ({
               x2={x}
               y1={0}
               y2={12}
-              stroke={themeColors.base01}
+              stroke={themecolors.base01}
             />
           )
         })}
@@ -148,7 +148,7 @@ export const Timeline = ({
       })}
       {timeCursorTime !== undefined && (
         <TimeCursor
-          themeColors={themeColors}
+          themecolors={themecolors}
           left={((timeCursorTime - visibleTimeStart) / visibleDuration) * width}
         />
       )}

src/components/Toolbar/index.js

@@ -22,64 +22,64 @@ import PlayCircleOutlineIcon from "@material-ui/icons/PlayCircleOutline"
 import PauseCircleOutlineIcon from "@material-ui/icons/PauseCircleOutline"
 import Color from "color"
 
-const Container = styled("div")(({ themeColors }) => ({
+const Container = styled("div")(({ themecolors }) => ({
   display: "flex",
   paddingBottom: 16,
   "&&& .MuiButtonBase-root": {
-    borderColor: themeColors.fg,
+    borderColor: themecolors.fg,
   },
   "&&& .MuiButton-label": {
-    color: themeColors.fg,
+    color: themecolors.fg,
     textTransform: "none",
   },
   "&&& .active.MuiButtonBase-root": {
-    backgroundColor: themeColors.fg,
+    backgroundColor: themecolors.fg,
   },
   "&&& .active .MuiButton-label": {
-    color: themeColors.bg,
+    color: themecolors.bg,
   },
   "&&& .MuiSvgIcon-root": {
     width: 16,
     height: 16,
   },
 }))
 
-const getSelectFieldStyles = (themeColors) => ({
+const getSelectFieldStyles = (themecolors) => ({
   control: (styles) => ({
     ...styles,
     border: `1px solid ${
-      themeColors.dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)"
+      themecolors.dark ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.5)"
     }`,
     boxShadow: "none",
-    backgroundColor: themeColors.bg,
-    borderColor: themeColors.base1,
+    backgroundColor: themecolors.bg,
+    borderColor: themecolors.base1,
     userSelect: "none",
     "&:hover": {
-      backgroundColor: Color(themeColors.bg).darken(0.2).string(),
+      backgroundColor: Color(themecolors.bg).darken(0.2).string(),
     },
   }),
   input: (styles) => ({
     ...styles,
-    color: themeColors.fg,
+    color: themecolors.fg,
   }),
   option: (styles) => ({
     ...styles,
-    backgroundColor: themeColors.base02,
-    color: themeColors.fg,
+    backgroundColor: themecolors.base02,
+    color: themecolors.fg,
     "&:hover": {
-      backgroundColor: Color(themeColors.bg).darken(0.2).string(),
+      backgroundColor: Color(themecolors.bg).darken(0.2).string(),
     },
     "&:focus": {
-      backgroundColor: Color(themeColors.bg).darken(0.2).string(),
+      backgroundColor: Color(themecolors.bg).darken(0.2).string(),
     },
   }),
   singleValue: (styles) => ({
     ...styles,
-    color: themeColors.fg,
+    color: themecolors.fg,
   }),
   menu: (styles) => ({
     ...styles,
-    backgroundColor: themeColors.base02,
+    backgroundColor: themecolors.base02,
   }),
 })
 
@@ -102,7 +102,7 @@ export const Toolbar = ({
   onStopPlayback,
   isPlayingMedia = false,
 }) => {
-  const themeColors = useColors()
+  const themecolors = useColors()
   const [mode, setToolMode] = useToolMode()
   const setTheme = useSetRecoilState(themeAtom)
 
@@ -138,11 +138,11 @@ export const Toolbar = ({
   const onSelectZoomTool = useEventCallback(() => setToolMode("zoom"))
   const onSelectCloseTool = useEventCallback(() => setToolMode("delete"))
   const toggleTheme = useEventCallback(() =>
-    setTheme(themeColors.dark ? "light" : "dark")
+    setTheme(themecolors.dark ? "light" : "dark")
   )
   const selectFieldStyles = useMemo(
-    () => getSelectFieldStyles(themeColors, selectedTimestampIndex),
-    [themeColors, selectedTimestampIndex]
+    () => getSelectFieldStyles(themecolors, selectedTimestampIndex),
+    [themecolors, selectedTimestampIndex]
   )
   const formatCreateLabel = useEventCallback((s) => `Add "${s}"`)
   const onChangeSelectedLabel = useEventCallback((newValue) => {
@@ -183,9 +183,9 @@ export const Toolbar = ({
   const SelectComponent = allowCustomLabels ? CreatableSelect : NormalSelect
 
   return (
-    <Container themeColors={themeColors}>
+    <Container themecolors={themecolors}>
       <Box
-        color={themeColors.fg}
+        color={themecolors.fg}
         display="flex"
         alignItems="center"
         justifyContent="center"
@@ -195,14 +195,14 @@ export const Toolbar = ({
           <LocationOnIcon
             style={{
               ...iconStyle,
-              color: selectedTimestamp.color || themeColors.fg,
+              color: selectedTimestamp.color || themecolors.fg,
             }}
           />
         ) : selectedDuration ? (
           <TimelapseIcon
             style={{
               ...iconStyle,
-              color: selectedDuration.color || themeColors.fg,
+              color: selectedDuration.color || themecolors.fg,
             }}
           />
         ) : null}

src/hooks/use-get-random-color-using-hash.js

@@ -13,13 +13,13 @@ const colorsToCycle = [
 ]
 
 export default () => {
-  const themeColors = useColors()
+  const themecolors = useColors()
   return useEventCallback((label) => {
-    if (!label) return themeColors.fg
+    if (!label) return themecolors.fg
     let hashNumber = 0
     for (let i = 0; i < label.length; i++) {
       hashNumber += label.charCodeAt(i)
     }
-    return themeColors[colorsToCycle[hashNumber % colorsToCycle.length]]
+    return themecolors[colorsToCycle[hashNumber % colorsToCycle.length]]
   })
 }

src/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import React from "react"
+import ReactDOM from "react-dom"
+import "./index.css"
+import App from "./App"
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-);
+  document.getElementById("root")
+)

src/utils/fetch-audio-data.js

@@ -16,7 +16,10 @@ export default async (audioUrl) => {
       channel.slice(i, i + samplesPerBlock).reduce((acc, a) => acc + a, 0) /
       samplesPerBlock
 
-    timeData.push({ time: i * (1 / audioBuffer.sampleRate) * 1000, value: avg })
+    timeData.push({
+      time: i * (1 / audioBuffer.sampleRate) * 1000,
+      value: avg,
+    })
   }
 
   return timeData

yarn.lock

@@ -15438,11 +15438,6 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
-transformation-matrix-js@^2.7.6:
-  version "2.7.6"
-  resolved "https://registry.yarnpkg.com/transformation-matrix-js/-/transformation-matrix-js-2.7.6.tgz#25c7ff055c99b8528ffbd4c4a2684be6c9d5ef60"
-  integrity sha512-1CxDIZmCQ3vA0GGnkdMQqxUXVm3xXAFmglPYRS1hr37LzSg22TC7QAWOT38OmdUvMEs/rqcnkFoAsqvzdiluDg==
-
 trim-repeated@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21"