udt format bindings

Author: seveibar

package.json

@@ -20,6 +20,7 @@
     "recoil": "^0.0.13",
     "seamless-immutable": "^7.1.4",
     "transformation-matrix-js": "^2.7.6",
+    "use-async-memo": "^1.2.2",
     "use-event-callback": "^0.1.0"
   },
   "scripts": {

src/components/DurationBox/index.js

@@ -33,6 +33,7 @@ const Box = styled("div")(({ x, width, color }) => ({
 }))
 const Label = styled("div")(({ colors }) => ({
   position: "absolute",
+  pointerEvents: "none",
   left: 4,
   top: 0,
   ...(colors.dark
@@ -53,7 +54,7 @@ export const DurationBox = ({
   onClick,
   onRemoveBox,
   onClickBox,
-  label = "testing label",
+  label = "",
 }) => {
   const [toolMode] = useToolMode()
   const colors = useColors()

src/components/MainLayout/index.stories.js

@@ -61,3 +61,36 @@ export const Primary = () => {
     />
   )
 }
+
+export const ExampleMiscLayer = () => {
+  const [durationGroups, setDurationGroups] = useState([
+    {
+      color: solarized.cyan,
+      durations: [
+        {
+          start: 1537416000000 - 1000 * 60 * 60 * 24 * 40,
+          end: 1539316800000 - 1000 * 60 * 60 * 24 * 40,
+          label: "one",
+        },
+        {
+          start: 1537416000000,
+          end: 1539316800000,
+          label: "two",
+        },
+      ],
+    },
+  ])
+  return (
+    <MainLayout
+      timeFormat="dates"
+      curveGroups={[[{ data: tesla.curve2018, color: solarized.yellow }]]}
+      timestamps={[]}
+      durationGroups={durationGroups}
+      onChangeTimestamps={() => null}
+      onChangeDurationGroups={(newDurationGroups) => {
+        console.log(newDurationGroups.asMutable())
+        setDurationGroups(newDurationGroups)
+      }}
+    />
+  )
+}

src/components/MouseTransformHandler/index.js

@@ -68,7 +68,6 @@ export const MouseTransformHandler = ({
         .scale(1 + (shiftKeyDown ? 0 : scroll), 1 + (shiftKeyDown ? scroll : 0))
         .translate(-px, -py)
     )
-    e.preventDefault()
   })
 
   const onMouseMove = useEventCallback((e) => {

src/components/ReactTimeSeries/ReactTimeSeries.stories.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react"
+import ReactTimeSeries from "./"
+
+export default {
+  title: "ReactTimeSeries",
+  component: ReactTimeSeries,
+}
+
+export const Primary = () => {
+  const [sample, setSample] = useState({
+    timeData: [
+      { time: 0, value: 0 },
+      { time: 500, value: 1 },
+      { time: 1000, value: 0 },
+    ],
+    annotation: {
+      timestamps: [{ time: 250, label: "example timestamp" }],
+      durations: [
+        { start: 0, end: 100, label: "example duration" },
+        { start: 200, end: 300, label: "example duration" },
+        { start: 800, end: 1000, label: "byeeee" },
+      ],
+    },
+  })
+  return (
+    <ReactTimeSeries
+      interface={{}}
+      sample={sample}
+      onModifySample={setSample}
+    />
+  )
+}

src/components/ReactTimeSeries/index.js

@@ -1,5 +1,9 @@
 import React, { useState, useMemo } 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 MainLayout from "../MainLayout"
 
@@ -17,12 +21,15 @@ const defaultEnabledTools = [
 ]
 const defaultGraphs = [{ keyName: "value" }]
 
-export const ReactTimeSeries = ({
+export const ReactTimeSeriesWithoutContext = ({
   corsProxy = defaultCorsProxy,
   interface: iface,
   sample,
   onModifySample,
 }) => {
+  if (!iface) throw new Error(`"interface" is a required prop`)
+  if (!sample) throw new Error(`"sample" is a required prop`)
+  const getRandomColorUsingHash = useGetRandomColorUsingHash()
   const {
     timeFormat,
     enabledTools = defaultEnabledTools,
@@ -33,27 +40,137 @@ export const ReactTimeSeries = ({
   } = iface
   let { timeData: sampleTimeData, audioUrl, csvUrl, annotation } = sample
 
-  const timeData = useMemo(() => {
-    if (sampleTimeData) return sampleTimeData
-    // TODO load audioUrl
-    // TODO load csvUrl
-  }, [sampleTimeData, audioUrl, csvUrl])
+  const timeDataAvailable = [sampleTimeData, audioUrl, csvUrl].some(Boolean)
 
-  const curveGroups = useMemo(() => {}, [timeData, graphs])
+  const timeData = useAsyncMemo(
+    async () => {
+      if (sampleTimeData) return sampleTimeData
+      // TODO load audioUrl
+      // TODO load csvUrl
+    },
+    [sampleTimeData, audioUrl, csvUrl],
+    null
+  )
+
+  const timeDataLoading = !timeData && timeDataAvailable
+
+  const curveGroups = useMemo(() => {
+    if (!timeData) return []
+    const anonRows = []
+    const namedRows = {}
+    for (const graph of graphs) {
+      const curveData = timeData
+        .filter(
+          (a) => a[graph.keyName] !== undefined && a[graph.keyName] !== null
+        )
+        .map((a) => [a.time, a[graph.keyName]])
+      if (graph.row === undefined || graph.row === null) {
+        const curveGroup = [
+          {
+            data: curveData,
+            color: graph.color || getRandomColorUsingHash(graph.keyName),
+          },
+        ]
+        anonRows.push(curveGroup)
+      } else {
+        if (!namedRows[graph.row]) {
+          namedRows[graph.row] = []
+        }
+        namedRows[graph.row].push({
+          data: curveData,
+          color: graph.color || getRandomColorUsingHash(graph.keyName),
+        })
+      }
+    }
+    return anonRows.concat(
+      Object.entries(namedRows).sort((a, b) => a[0].localeCompare(b[0]))
+    )
+  }, [timeData, graphs, getRandomColorUsingHash])
 
-  const [timestamps, setTimestamps] = useState(() => {
+  const timestamps = useMemo(() => {
     if (!annotation?.timestamps) return []
-    // TODO derive timestamps
-    return []
-  })
-  const [durationGroups, setDurationGroups] = useState(() => {
+    return annotation?.timestamps.map((ts) => ({
+      time: ts.time,
+      label: ts.label,
+      color: ts.color || getRandomColorUsingHash(ts.label),
+    }))
+    // eslint-disable-next-line
+  }, [annotation?.timestamps, getRandomColorUsingHash])
+
+  const durationGroups = useMemo(() => {
     if (!annotation?.durations) return []
-    // TODO derive timestamps
-    return []
+
+    const availableLabels = Array.from(
+      new Set(
+        annotation.durations.flatMap((d) => [d.label, d.layer]).filter(Boolean)
+      )
+    )
+    availableLabels.sort()
+
+    // TODO no more than 5 layers, after 5 layers start reusing layers
+
+    let durationGroups = availableLabels
+      .map((label) => {
+        return {
+          label,
+          color: getRandomColorUsingHash(label),
+          durations: annotation.durations
+            .filter((d) => d.label === label)
+            .map((d) => ({
+              start: d.start,
+              end: d.end,
+              label: d.label,
+            })),
+        }
+      })
+      .filter((dg) => dg.durations.length > 0)
+
+    durationGroups.push({
+      color: "#888888",
+      misc: true,
+      durations: durationGroups
+        .filter((dg) => dg.durations.length === 1)
+        .flatMap((dg) => dg.durations)
+        .concat(annotation.durations.filter((d) => !d.label))
+        .map((d) => ({ ...d, color: getRandomColorUsingHash(d.label) })),
+    })
+    durationGroups = durationGroups.filter(
+      (dg) => dg.misc || dg.durations.length > 1
+    )
+
+    return durationGroups
+    // eslint-disable-next-line
+  }, [annotation?.durations])
+
+  const onChangeDurationGroups = useEventCallback((newDurationGroups) => {
+    onModifySample(
+      setIn(
+        sample,
+        ["annotation", "durations"],
+        newDurationGroups.flatMap((dg) =>
+          dg.durations.map((d) => ({
+            ...(d.label && dg.label !== d.label ? {} : { label: dg.label }),
+            ...d,
+          }))
+        )
+      )
+    )
+  })
+  const onChangeTimestamps = useEventCallback((newTimestamps) => {
+    onModifySample(setIn(sample, ["annotation", "timestamps"], newTimestamps))
   })
 
-  const onChangeDurationGroups = useEventCallback(() => {})
-  const onChangeTimestamps = useEventCallback(() => {})
+  if (timeDataLoading) return "loading" // TODO real loader
+
+  if (!timeData) {
+    throw new Error(
+      `No time data provided. Try sample={{timeData: [{time: 0, value: 1}, ...]}} or sample={{audioUrl:"https://..."}}`
+    )
+  }
+
+  if (curveGroups.length === 0) {
+    throw new Error(`For some reason, no curves are able to be displayed.`)
+  }
 
   return (
     <MainLayout
@@ -67,4 +184,12 @@ export const ReactTimeSeries = ({
   )
 }
 
+export const ReactTimeSeries = (props) => {
+  return (
+    <RecoilRoot>
+      <ReactTimeSeriesWithoutContext {...props} />
+    </RecoilRoot>
+  )
+}
+
 export default ReactTimeSeries

src/components/ReactTimeSeries/index.story.js

@@ -20,7 +20,6 @@ export default () => {
     for (let i = 0; i < label.length; i++) {
       hashNumber += label.charCodeAt(i)
     }
-
-    return colorsToCycle[hashNumber % colorsToCycle.length]
+    return themeColors[colorsToCycle[hashNumber % colorsToCycle.length]]
   })
 }

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

@@ -5,6 +5,8 @@ const weeks = 7 * days
 const months = 30 * days
 const years = 12 * months
 const timeIntervals = [
+  ["1 ns", 0.000001],
+  ["1 us", 0.001],
   ["1 ms", 1],
   ["5 ms", 5],
   ["50 ms", 50],

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

@@ -15240,6 +15240,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-async-memo@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/use-async-memo/-/use-async-memo-1.2.2.tgz#6549579335c00afc0fff6f18eafc4a9d29596ece"
+  integrity sha512-xJ6a+yE7l8rtCKYDEhIS4S1lQF5mNPHF5nD2bLFVh9eTePuWuOCMHZBNv5S8Jy0Mj9mYVBJWUzBiIoKNBE71eA==
+
 use-composed-ref@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.0.0.tgz#bb13e8f4a0b873632cde4940abeb88b92d03023a"