fix: support disabling custom labels

Author: seveibar

src/components/MainLayout/index.js

@@ -24,6 +24,9 @@ export const MainLayout = ({
   timeFormat,
   durationGroups,
   onChangeDurationGroups,
+  timestampLabels = [],
+  durationLabels = [],
+  allowCustomLabels,
   timestamps,
   width = 500,
   graphHeight = 300,
@@ -147,11 +150,14 @@ export const MainLayout = ({
     <Container width={width} themeColors={themeColors}>
       <Toolbar
         timestamps={timestamps}
+        timestampLabels={timestampLabels}
+        durationLabels={durationLabels}
         selectedTimestampIndex={selectedTimestampIndex}
         onChangeSelectedItemLabel={onChangeSelectedItemLabel}
         selectedDurationGroupIndex={activeDurationGroup}
         selectedDurationIndex={selectedDurationIndex}
         durationGroups={durationGroups}
+        allowCustomLabels={allowCustomLabels}
       />
       <Timeline
         timeFormat={timeFormat}

src/components/ReactTimeSeries/ReactTimeSeries.stories.js

@@ -24,7 +24,7 @@ export const SimpleTimeSeries = () => {
   })
   return (
     <ReactTimeSeries
-      interface={{}}
+      interface={{ allowCustomLabels: true }}
       sample={sample}
       onModifySample={setSample}
     />
@@ -38,7 +38,7 @@ export const WithAudioURL = () => {
   })
   return (
     <ReactTimeSeries
-      interface={{}}
+      interface={{ allowCustomLabels: true }}
       sample={sample}
       onModifySample={setSample}
     />
@@ -48,7 +48,7 @@ export const WithAudioURL = () => {
 export const ReallySimple = () => {
   return (
     <ReactTimeSeries
-      interface={{}}
+      interface={{ allowCustomLabels: true }}
       sample={{
         timeData: [
           { time: 0, value: 0 },
@@ -66,6 +66,7 @@ export const SmallValues = () => {
     <ReactTimeSeries
       interface={{
         timeFormat: "none",
+        allowCustomLabels: true,
       }}
       sample={{
         timeData: [
@@ -78,3 +79,20 @@ export const SmallValues = () => {
     />
   )
 }
+
+export const PredefinedLabelsOnly = () => {
+  const [sample, setSample] = useState({
+    audioUrl:
+      "https://s3.amazonaws.com/datasets.workaround.online/voice-samples/001/voice.mp3",
+  })
+  return (
+    <ReactTimeSeries
+      interface={{
+        durationLabels: ["duration1", "duration2"],
+        timestampLabels: ["ts1", "ts2"],
+      }}
+      sample={sample}
+      onModifySample={setSample}
+    />
+  )
+}

src/components/ReactTimeSeries/index.js

@@ -39,12 +39,9 @@ export const ReactTimeSeriesWithoutContext = ({
     timeFormat,
     // eslint-disable-next-line
     enabledTools = defaultEnabledTools,
-    // eslint-disable-next-line
     durationLabels = emptyAr,
-    // eslint-disable-next-line
     timestampLabels = emptyAr,
     graphs = defaultGraphs,
-    // eslint-disable-next-line
     allowCustomLabels,
   } = iface
   let { timeData: sampleTimeData, audioUrl, csvUrl, annotation } = sample
@@ -205,6 +202,9 @@ export const ReactTimeSeriesWithoutContext = ({
             onChangeDurationGroups={onChangeDurationGroups}
             timestamps={timestamps}
             onChangeTimestamps={onChangeTimestamps}
+            timestampLabels={timestampLabels}
+            durationLabels={durationLabels}
+            allowCustomLabels={allowCustomLabels}
           />
         </div>
       )}

src/components/Toolbar/index.js

@@ -14,6 +14,7 @@ import useEventCallback from "use-event-callback"
 import { useSetRecoilState } from "recoil"
 import { themeAtom } from "../../hooks/use-colors"
 import CreatableSelect from "react-select/creatable"
+import NormalSelect from "react-select"
 import LocationOnIcon from "@material-ui/icons/LocationOn"
 import TimelapseIcon from "@material-ui/icons/Timelapse"
 import ZoomInIcon from "@material-ui/icons/ZoomIn"
@@ -89,22 +90,20 @@ export const Toolbar = ({
   timestamps = [],
   selectedTimestampIndex,
   durationGroups = [],
+  durationLabels = [],
+  timestampLabels = [],
   selectedDurationGroupIndex,
   selectedDurationIndex,
   onChangeSelectedItemLabel,
+  allowCustomLabels = false,
 }) => {
   const themeColors = useColors()
   const [mode, setToolMode] = useToolMode()
   const setTheme = useSetRecoilState(themeAtom)
 
-  const [labelSet, labelColorMap] = useMemo(() => {
-    const labelSet = new Set()
+  const [durationLabelSet, durationLabelColorMap] = useMemo(() => {
+    const labelSet = new Set(durationLabels)
     const labelColorMap = {}
-    for (const timestamp of timestamps) {
-      if (!timestamp.label) continue
-      labelSet.add(timestamp.label)
-      labelColorMap[timestamp.label] = timestamp.color
-    }
     for (const dg of durationGroups) {
       for (const duration of dg.durations) {
         if (!duration.label) continue
@@ -116,7 +115,18 @@ export const Toolbar = ({
       labelColorMap[dg.label] = dg.color
     }
     return [labelSet, labelColorMap]
-  }, [timestamps, durationGroups])
+  }, [timestamps, durationGroups, durationLabels])
+
+  const [timestampLabelSet, timestampLabelColorMap] = useMemo(() => {
+    const labelSet = new Set(timestampLabels)
+    const labelColorMap = {}
+    for (const timestamp of timestamps) {
+      if (!timestamp.label) continue
+      labelSet.add(timestamp.label)
+      labelColorMap[timestamp.label] = timestamp.color
+    }
+    return [labelSet, labelColorMap]
+  }, [timestamps, durationGroups, timestampLabels])
 
   const onSelectCreateTool = useEventCallback(() => setToolMode("create"))
   const onSelectPanTool = useEventCallback(() => setToolMode("pan"))
@@ -134,12 +144,18 @@ export const Toolbar = ({
     const { label } = newValue || {}
     onChangeSelectedItemLabel({
       label,
-      color: labelColorMap[label],
+      color: durationLabelColorMap[label] || timestampLabelColorMap[label],
     })
   })
-  const creatableSelectOptions = useMemo(
-    () => Array.from(labelSet).map((label) => ({ label, value: label })),
-    [labelSet]
+  const timestampCreatableSelectOptions = useMemo(
+    () =>
+      Array.from(timestampLabelSet).map((label) => ({ label, value: label })),
+    [timestampLabelSet]
+  )
+  const durationCreatableSelectOptions = useMemo(
+    () =>
+      Array.from(durationLabelSet).map((label) => ({ label, value: label })),
+    [durationLabelSet]
   )
 
   const selectedTimestamp =
@@ -159,6 +175,8 @@ export const Toolbar = ({
     return { label, value: label }
   }, [selectedTimestamp, selectedDuration])
 
+  const SelectComponent = allowCustomLabels ? CreatableSelect : NormalSelect
+
   return (
     <Container themeColors={themeColors}>
       <Box
@@ -186,13 +204,17 @@ export const Toolbar = ({
       </Box>
       <Box display="block" height={40} flexGrow={1} paddingRight={2}>
         {(selectedTimestamp || selectedDuration) && (
-          <CreatableSelect
+          <SelectComponent
             isClearable
             value={selectedItemValue}
             formatCreateLabel={formatCreateLabel}
             styles={selectFieldStyles}
             onChange={onChangeSelectedLabel}
-            options={creatableSelectOptions}
+            options={
+              selectedTimestamp
+                ? timestampCreatableSelectOptions
+                : durationCreatableSelectOptions
+            }
           />
         )}
       </Box>