hotkeys can be enabled or disabled

seveibar · seveibar · commit 52ac1fe264c4 · 2020-05-29T17:57:51.000-04:00
diff --git a/src/components/Container/index.js b/src/components/Container/index.js
@@ -7,6 +7,8 @@ import Workspace from "react-material-workspace-layout/Workspace"
 
 export default ({
   children,
+  onNext,
+  onPrev,
   currentSampleIndex = 0,
   numberOfSamples = 1,
   titleContent,
@@ -15,8 +17,11 @@ export default ({
   const headerItems = useMemo(
     () =>
       [
-        currentSampleIndex > 0 && { name: "Prev" },
-        numberOfSamples > currentSampleIndex + 1 && { name: "Next" },
+        (currentSampleIndex > 0 || onPrev) && { name: "Prev", onClick: onPrev },
+        (numberOfSamples > currentSampleIndex + 1 || onNext) && {
+          name: "Next",
+          onClick: onNext
+        },
         { name: "Done" }
       ].filter(Boolean),
     [currentSampleIndex, numberOfSamples]
diff --git a/src/components/Container/index.story.js b/src/components/Container/index.story.js
@@ -6,7 +6,11 @@ import { action } from "@storybook/addon-actions"
 import Container from "./"
 
 storiesOf("Container", module).add("Basic", () => (
-  <Container onClickHeaderItem={action("onClickHeaderItem")}>
+  <Container
+    onNext={action("onNext")}
+    onPrev={action("onPrev")}
+    onClickHeaderItem={action("onClickHeaderItem")}
+  >
     Some inner content
   </Container>
 ))
diff --git a/src/components/DocumentLabeler/index.js b/src/components/DocumentLabeler/index.js
@@ -19,8 +19,10 @@ export default function DocumentLabeler(props: LabelDocumentProps) {
     <div>
       <div>
         <LabelSelector
+          hotkeysEnabled={props.hotkeysEnabled}
           labels={props.labels}
           onSelectLabel={(labelId: string) => {
+            console.log({ labelId })
             if (props.multipleLabels) {
               changeSelectedLabels(selectedLabels.concat([labelId]))
               props.onChange(selectedLabels.concat([labelId]))
@@ -38,6 +40,7 @@ export default function DocumentLabeler(props: LabelDocumentProps) {
             if (!label) return
             return (
               <LabelButton
+                key={labelId}
                 {...label}
                 small
                 deletable
diff --git a/src/components/DocumentLabeler/index.story.js b/src/components/DocumentLabeler/index.story.js
@@ -11,6 +11,7 @@ import DocumentLabeler from "./"
 storiesOf("DocumentLabeler", module)
   .add("Basic", () => (
     <DocumentLabeler
+      hotkeysEnabled
       type="label-document"
       document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
       labels={[
@@ -25,10 +26,12 @@ storiesOf("DocumentLabeler", module)
           displayName: "Proper Noun"
         }
       ]}
+      onChange={action("onChange")}
     />
   ))
   .add("Basic with Initial Label", () => (
     <DocumentLabeler
+      hotkeysEnabled
       type="label-document"
       initialLabel="noun"
       document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
@@ -44,10 +47,12 @@ storiesOf("DocumentLabeler", module)
           displayName: "Proper Noun"
         }
       ]}
+      onChange={action("onChange")}
     />
   ))
   .add("Basic Multi Label", () => (
     <DocumentLabeler
+      hotkeysEnabled
       type="label-document"
       document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
       multipleLabels
@@ -64,10 +69,12 @@ storiesOf("DocumentLabeler", module)
           displayName: "Proper Noun"
         }
       ]}
+      onChange={action("onChange")}
     />
   ))
   .add("Basic Nested Labels", () => (
     <DocumentLabeler
+      hotkeysEnabled
       type="label-document"
       document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
       labels={[
@@ -124,5 +131,67 @@ storiesOf("DocumentLabeler", module)
           parent: "subject"
         }
       ]}
+      onChange={action("onChange")}
+    />
+  ))
+  .add("Basic Nested Labels without hotkeys", () => (
+    <DocumentLabeler
+      type="label-document"
+      document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
+      labels={[
+        {
+          color: colors[0],
+          id: "intent",
+          displayName: "Intent"
+        },
+        {
+          color: colors[1],
+          id: "subject",
+          displayName: "Subject"
+        },
+        {
+          color: colors[6],
+          id: "desire",
+          displayName: "Desire",
+          parent: "intent"
+        },
+        {
+          color: colors[7],
+          id: "informative-desire",
+          displayName: "Informative Desire",
+          parent: "desire"
+        },
+        {
+          color: colors[2],
+          id: "wants-information",
+          displayName: "Wants More Information",
+          parent: "informative-desire"
+        },
+        {
+          color: colors[3],
+          id: "cancel",
+          displayName: "Wants To Cancel",
+          parent: "desire"
+        },
+        {
+          color: colors[4],
+          id: "continue",
+          displayName: "Wants To Continue",
+          parent: "desire"
+        },
+        {
+          color: colors[5],
+          id: "person",
+          displayName: "Person",
+          parent: "subject"
+        },
+        {
+          color: colors[6],
+          id: "object",
+          displayName: "Object",
+          parent: "subject"
+        }
+      ]}
+      onChange={action("onChange")}
     />
   ))
diff --git a/src/components/LabelButton/index.js b/src/components/LabelButton/index.js
@@ -53,7 +53,7 @@ const Label = (props: {
   ...$Exact<LabelType>,
   hasChildren?: boolean,
   small?: boolean,
-  hotkey?: string,
+  hotkey?: ?string,
   deletable?: boolean,
   onClick: string => any
 }) => {
diff --git a/src/components/LabelSelector/index.js b/src/components/LabelSelector/index.js
@@ -16,7 +16,8 @@ const findRouteFromParents = (labelId, labels) => {
 
 export default ({
   labels,
-  onSelectLabel
+  onSelectLabel,
+  hotkeysEnabled = false
 }: {
   labels: Array<LabelType>,
   onSelectLabel: string => any
@@ -40,6 +41,7 @@ export default ({
   }
 
   useEffect(() => {
+    if (!hotkeysEnabled) return
     const eventFunc = e => {
       if (hotkeyLabelMap[e.key]) {
         const labelId = hotkeyLabelMap[e.key]
@@ -59,7 +61,7 @@ export default ({
     return () => {
       window.removeEventListener("keydown", eventFunc)
     }
-  }, [changeParents, onSelectLabel])
+  }, [changeParents, onSelectLabel, hotkeysEnabled])
 
   return (
     <div>
@@ -104,7 +106,7 @@ export default ({
             <LabelButton
               key={l.id}
               {...l}
-              hotkey={labelHotkeyMap[l.id]}
+              hotkey={hotkeysEnabled ? labelHotkeyMap[l.id] : null}
               onClick={
                 !l.hasChildren
                   ? onSelectLabel
diff --git a/src/components/LabelSelector/index.story.js b/src/components/LabelSelector/index.story.js
@@ -8,22 +8,44 @@ import colors from "../../colors"
 
 import LabelSelector from "./"
 
-storiesOf("LabelSelector", module).add("Basic", () => (
-  <LabelSelector
-    labels={[
-      {
-        displayName: "Label One",
-        id: "label_one",
-        description: "The first label",
-        color: colors[0]
-      },
-      {
-        displayName: "Label Two",
-        id: "label_two",
-        description: "The second label",
-        color: colors[1]
-      }
-    ]}
-    onSelectLabel={action("onSelectLabel")}
-  />
-))
+storiesOf("LabelSelector", module)
+  .add("Basic", () => (
+    <LabelSelector
+      hotkeysEnabled
+      labels={[
+        {
+          displayName: "Label One",
+          id: "label_one",
+          description: "The first label",
+          color: colors[0]
+        },
+        {
+          displayName: "Label Two",
+          id: "label_two",
+          description: "The second label",
+          color: colors[1]
+        }
+      ]}
+      onSelectLabel={action("onSelectLabel")}
+    />
+  ))
+  .add("Hotkeys Off", () => (
+    <LabelSelector
+      hotkeysEnabled={false}
+      labels={[
+        {
+          displayName: "Label One",
+          id: "label_one",
+          description: "The first label",
+          color: colors[0]
+        },
+        {
+          displayName: "Label Two",
+          id: "label_two",
+          description: "The second label",
+          color: colors[1]
+        }
+      ]}
+      onSelectLabel={action("onSelectLabel")}
+    />
+  ))
diff --git a/src/components/NLPAnnotator/index.js b/src/components/NLPAnnotator/index.js
@@ -33,7 +33,7 @@ export default function NLPAnnotator(props: NLPAnnotatorProps) {
     return () => {
       window.removeEventListener("keydown", eventFunc)
     }
-  }, [props.onFinish])
+  }, [props.onFinish, output])
 
   const onChange = (newOutput: any) => {
     if (props.onChange) props.onChange(newOutput)
@@ -51,12 +51,14 @@ export default function NLPAnnotator(props: NLPAnnotatorProps) {
     return labels
   }, [props.labels])
 
-  const isPassingValidation = validator(output).some(msg =>
+  const isPassingValidation = !validator(output).some(msg =>
     msg.toLowerCase().includes("error")
   )
 
+  console.log({ output })
   const onFinish = useEventCallback(() => {
     if (!isPassingValidation) return
+    console.log("onFinish", output)
     props.onFinish(output)
   })
 
@@ -90,7 +92,12 @@ export default function NLPAnnotator(props: NLPAnnotatorProps) {
   }
 
   return (
-    <Container onClickHeaderItem={onClickHeaderItem}>
+    <Container
+      titleContent={props.titleContent}
+      onNext={props.onNext}
+      onPrev={props.onPrev}
+      onClickHeaderItem={onClickHeaderItem}
+    >
       <div>{annotator}</div>
     </Container>
   )
diff --git a/src/components/NLPAnnotator/index.story.js b/src/components/NLPAnnotator/index.story.js
@@ -11,7 +11,11 @@ import NLPAnnotator from "./"
 storiesOf("NLPAnnotator", module)
   .add("Sequence Labeler", () => (
     <NLPAnnotator
+      hotkeysEnabled
       onChange={action("onChange")}
+      onFinish={action("onFinish")}
+      onNext={action("onNext")}
+      onPrev={action("onPrev")}
       type="label-sequence"
       document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
       labels={[
@@ -30,7 +34,9 @@ storiesOf("NLPAnnotator", module)
   ))
   .add("Document Labeler", () => (
     <NLPAnnotator
+      hotkeysEnabled
       onChange={action("onChange")}
+      onFinish={action("onFinish")}
       type="label-document"
       document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
       labels={[
@@ -49,7 +55,9 @@ storiesOf("NLPAnnotator", module)
   ))
   .add("Transcriber", () => (
     <NLPAnnotator
+      hotkeysEnabled
       onChange={action("onChange")}
+      onFinish={action("onFinish")}
       type="transcribe"
       audio="https://html5tutorial.info/media/vincent.mp3"
       document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
@@ -58,13 +66,15 @@ storiesOf("NLPAnnotator", module)
   ))
   .add("Transcriber with Finish Handler", () => (
     <NLPAnnotator
+      hotkeysEnabled
       type="transcribe"
       audio="https://html5tutorial.info/media/vincent.mp3"
       document={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra ipsum tristique ligula venenatis placerat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce mollis velit nec tellus sollicitudin aliquam. In velit erat, iaculis id consectetur et, tincidunt sit amet mauris. Quisque ultricies, purus eleifend congue malesuada, ipsum erat molestie dolor, in pellentesque lacus purus vel nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sed vestibulum magna. Quisque ut lorem imperdiet, aliquam velit nec, dictum felis.`}
       initialTranscriptionText="Starry starry knight."
       validator={(t = "") =>
         t.length === 0 ? ["Error: Must be some text"] : []
       }
+      onChange={action("onChange")}
       onFinish={action("onFinish")}
     />
   ))
diff --git a/src/components/SequenceAnnotator/index.js b/src/components/SequenceAnnotator/index.js
@@ -31,6 +31,7 @@ export default function SequenceAnnotator(props: SequenceAnnotatorProps) {
     <div>
       <div>
         <LabelSelector
+          hotkeysEnabled={props.hotkeysEnabled}
           labels={props.labels}
           onSelectLabel={(label: string) => {
             const { color } = props.labels.find(({ id }) => label === id) || {}
diff --git a/src/components/Transcriber/index.story.js b/src/components/Transcriber/index.story.js
@@ -13,6 +13,7 @@ const externalWordBank =
 storiesOf("Transcriber", module)
   .add("Basic", () => (
     <Transcriber
+      hotkeysEnabled
       onChange={action("onChange")}
       type="transcribe"
       audio="https://html5tutorial.info/media/vincent.mp3"
@@ -21,6 +22,7 @@ storiesOf("Transcriber", module)
   ))
   .add("Validator & Phrase Bank", () => (
     <Transcriber
+      hotkeysEnabled
       onChange={action("onChange")}
       type="transcribe"
       audio="https://html5tutorial.info/media/vincent.mp3"
@@ -46,6 +48,7 @@ storiesOf("Transcriber", module)
   ))
   .add("External Phrase Bank", () => (
     <Transcriber
+      hotkeysEnabled
       onChange={action("onChange")}
       type="transcribe"
       audio="https://html5tutorial.info/media/vincent.mp3"
diff --git a/src/types.js b/src/types.js
