fix: Merge pull request #179 from UniversalDataTool/feat/keyboard-sho…

…rtcut-manager Storybook and Hotkey Fixes
UniversalDataTool · May 26, 2020 · 23bc1ab · 23bc1ab
2 parents a6ce5f8 + 49abf64
commit 23bc1ab
Show file tree

Hide file tree

Showing 13 changed files with 1,780 additions and 2,386 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,10 +49,10 @@
     "@babel/core": "^7.5.4",
     "@material-ui/core": "^4.9.5",
     "@material-ui/icons": "^4.9.1",
-    "@storybook/addon-actions": "^5.3.14",
-    "@storybook/addon-links": "^5.3.14",
-    "@storybook/addons": "^5.3.14",
-    "@storybook/react": "^5.3.14",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addons": "^5.3.19",
+    "@storybook/react": "^5.3.19",
     "@testing-library/react-hooks": "^3.2.1",
     "ava": "^3.7.0",
     "chroma-js": "^2.0.4",
@@ -99,7 +99,7 @@
     "react-dropzone": "^10.1.8",
     "react-hotkeys": "^2.0.0",
     "react-icons": "^3.9.0",
-    "react-image-annotate": "^1.0.6",
+    "react-image-annotate": "^1.0.15",
     "react-scripts": "^3.4.1",
     "react-select": "^3.0.8",
     "rfc6902": "^3.0.4",

diff --git a/src/components/AdvancedOptionsView/index.js b/src/components/AdvancedOptionsView/index.js
@@ -16,7 +16,7 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
   const forceUpdate = useUpdate()
   const posthog = usePosthog()
   const { fromConfig, setInConfig } = useAppConfig()
-  const { hotkeys, changeHotkey } = useHotkeyStorage()
+  const { hotkeys, changeHotkey, clearHotkeys } = useHotkeyStorage()
   const [hotkeyDialogOpen, setHotkeyDialogOpen] = useState(false)
 
   return (
@@ -105,6 +105,7 @@ export const AdvancedOptionsView = ({ onClickEditJSON, onClearLabelData }) => {
         open={hotkeyDialogOpen}
         hotkeyList={hotkeys}
         onClose={() => setHotkeyDialogOpen(false)}
+        onClearHotkeys={clearHotkeys}
         onChangeHotkey={(hotkey, newBinding) =>
           changeHotkey(hotkey.id, newBinding)
         }

diff --git a/src/components/DatasetEditor/index.js b/src/components/DatasetEditor/index.js
@@ -20,6 +20,7 @@ import classnames from "classnames"
 import LabelView from "../LabelView"
 import useIsLabelOnlyMode from "../../utils/use-is-label-only-mode"
 import { HotKeys } from "react-hotkeys"
+import { useHotkeyStorage } from "../HotkeyStorage"
 
 import "brace/mode/javascript"
 import "brace/theme/github"
@@ -121,8 +122,10 @@ export default ({
     [changeMode]
   )
 
+  const { keyMap } = useHotkeyStorage()
+
   return (
-    <HotKeys handlers={shortcutHandlers}>
+    <HotKeys allowChanges handlers={shortcutHandlers} keyMap={keyMap}>
       <div className={classnames(c.container, "universaldatatool")}>
         <Header
           title={

diff --git a/src/components/DatasetEditor/index.story.js b/src/components/DatasetEditor/index.story.js
@@ -4,51 +4,91 @@ import React, { useState } from "react"
 
 import { storiesOf } from "@storybook/react"
 import { action } from "@storybook/addon-actions"
+import { HotKeys } from "react-hotkeys"
 
 import DatasetEditor from "./"
 
 const Controller = (props) => {
-  const [dataset, changeOHA] = useState(props.initialOHA)
+  const [dataset, changeDataset] = useState(props.initialDataset)
   return (
     <DatasetEditor
       dataset={dataset}
       onChangeDataset={(...props) => {
-        changeOHA(...props)
+        changeDataset(...props)
         action("onChangeDataset")(...props)
       }}
       {...props}
     />
   )
 }
 
-storiesOf("DatasetEditor", module).add("Basic", () => (
-  <Controller
-    initialOHA={{
-      interface: {
-        type: "image_segmentation",
-        labels: ["valid", "invalid"],
-        regionTypesAllowed: ["bounding-box", "polygon", "point"],
-      },
-      samples: [
-        {
-          imageUrl:
-            "https://s3.amazonaws.com/asset.workaround.online/example-jobs/sticky-notes/image1.jpg",
+storiesOf("DatasetEditor", module)
+  .add("Basic", () => (
+    <Controller
+      initialDataset={{
+        interface: {
+          type: "image_segmentation",
+          labels: ["valid", "invalid"],
+          regionTypesAllowed: ["bounding-box", "polygon", "point"],
         },
-        {
-          imageUrl:
-            "https://s3.amazonaws.com/asset.workaround.online/example-jobs/sticky-notes/image2.jpg",
-        },
-      ],
-      taskOutput: [
-        {
-          regionType: "bounding-box",
-          centerX: 0.5,
-          centerY: 0.5,
-          width: 0.25,
-          height: 0.25,
-        },
-      ],
-    }}
-    onChangeFileName={action("onChangeFileName")}
-  />
-))
+        samples: [
+          {
+            imageUrl:
+              "https://s3.amazonaws.com/asset.workaround.online/example-jobs/sticky-notes/image1.jpg",
+          },
+          {
+            imageUrl:
+              "https://s3.amazonaws.com/asset.workaround.online/example-jobs/sticky-notes/image2.jpg",
+          },
+        ],
+        taskOutput: [
+          {
+            regionType: "bounding-box",
+            centerX: 0.5,
+            centerY: 0.5,
+            width: 0.25,
+            height: 0.25,
+          },
+        ],
+      }}
+      onChangeFileName={action("onChangeFileName")}
+    />
+  ))
+  .add("Basic with Hotkeys", () => (
+    <HotKeys
+      keyMap={{
+        zoom_tool: "z",
+        pan_tool: "p",
+      }}
+    >
+      <Controller
+        initialDataset={{
+          interface: {
+            type: "image_segmentation",
+            labels: ["valid", "invalid"],
+            regionTypesAllowed: ["bounding-box", "polygon", "point"],
+          },
+          samples: [
+            {
+              imageUrl:
+                "https://s3.amazonaws.com/asset.workaround.online/example-jobs/sticky-notes/image1.jpg",
+            },
+            {
+              imageUrl:
+                "https://s3.amazonaws.com/asset.workaround.online/example-jobs/sticky-notes/image2.jpg",
+            },
+          ],
+          taskOutput: [
+            {
+              regionType: "bounding-box",
+              centerX: 0.5,
+              centerY: 0.5,
+              width: 0.25,
+              height: 0.25,
+            },
+          ],
+        }}
+        onChangeFileName={action("onChangeFileName")}
+      />
+    </HotKeys>
+  ))
diff --git a/src/components/FileContext/use-active-dataset.js b/src/components/FileContext/use-active-dataset.js
@@ -4,7 +4,7 @@ import { setIn } from "seamless-immutable"
 
 export const useActiveDataset = () => {
   const { file, setFile } = useFileContext()
-  return useMemo(
+  const result = useMemo(
     () =>
       !file || !file.content
         ? null
@@ -16,4 +16,5 @@ export const useActiveDataset = () => {
           },
     [file, setFile]
   )
+  return result || {}
 }
diff --git a/src/components/HotkeyStorage/default-hotkeys.js b/src/components/HotkeyStorage/default-hotkeys.js
@@ -0,0 +1,68 @@
+export const defaultHotkeys = [
+  {
+    id: "switch_to_label",
+    description: "Go to Labels Tab",
+    binding: "shift+3",
+  },
+  {
+    id: "switch_to_setup",
+    description: "Go to Setup Tab",
+    binding: "shift+1",
+  },
+  {
+    id: "switch_to_samples",
+    description: "Go to Samples Tab",
+    binding: "shift+2",
+  },
+  {
+    id: "select_tool",
+    description: "Switch to the Select Tool",
+    binding: "escape",
+  },
+  {
+    id: "zoom_tool",
+    description: "Select the Zoom Tool",
+    binding: "z",
+  },
+  {
+    id: "create_point",
+    description: "Create a point",
+  },
+  {
+    id: "create_bounding_box",
+    description: "Create a bounding box",
+    binding: "b",
+  },
+  {
+    id: "pan_tool",
+    description: "Select the Pan Tool",
+    binding: "p",
+  },
+  {
+    id: "create_polygon",
+    description: "Create a Polygon",
+  },
+  {
+    id: "create_pixel",
+    description: "Create a Pixel Mask",
+  },
+  {
+    id: "save_and_previous_sample",
+    description: "Save and go to previous sample",
+    binding: "a",
+  },
+  {
+    id: "save_and_next_sample",
+    description: "Save and go to next sample",
+    binding: "d",
+  },
+  {
+    id: "save_and_exit_sample",
+    description: "Save and exit current sample",
+  },
+  {
+    id: "exit_sample",
+    description: "Exit sample without saving",
+  },
+]
+export default defaultHotkeys
diff --git a/src/components/HotkeyStorage/index.js b/src/components/HotkeyStorage/index.js
@@ -1,66 +1,6 @@
 import React, { createContext, useContext, useMemo } from "react"
+import { defaultHotkeys } from "./default-hotkeys"
 import { useAppConfig } from "../AppConfig"
-import { HotKeys } from "react-hotkeys"
-
-export const defaultHotkeys = [
-  {
-    id: "switch_to_label",
-    description: "Go to Labels Tab",
-    binding: "shift+3",
-  },
-  {
-    id: "switch_to_setup",
-    description: "Go to Setup Tab",
-    binding: "shift+1",
-  },
-  {
-    id: "switch_to_samples",
-    description: "Go to Samples Tab",
-    binding: "shift+2",
-  },
-  {
-    id: "select_tool",
-    description: "Switch to the Select Tool",
-    binding: "escape",
-  },
-  {
-    id: "zoom_tool",
-    description: "Select the Zoom Tool",
-    binding: "z",
-  },
-  {
-    id: "create_point",
-    description: "Create a point",
-  },
-  {
-    id: "pan_tool",
-    description: "Select the Pan Tool",
-  },
-  {
-    id: "create_polygon",
-    description: "Create a Polygon",
-  },
-  {
-    id: "create_pixel",
-    description: "Create a Pixel Mask",
-  },
-  {
-    id: "save_and_previous_sample",
-    description: "Save and go to previous sample",
-  },
-  {
-    id: "save_and_next_sample",
-    description: "Save and go to next sample",
-  },
-  {
-    id: "save_and_exit_sample",
-    description: "Save and exit current sample",
-  },
-  {
-    id: "exit_sample",
-    description: "Exit sample without saving",
-  },
-]
 
 export const HotkeyContext = createContext({
   hotkeys: defaultHotkeys,
@@ -84,24 +24,35 @@ export const HotkeyStorageProvider = ({ children }) => {
     [fromConfig]
   )
 
+  const keyMap = useMemo(() => {
+    const keyMap = {}
+    for (const { id, binding } of hotkeys) {
+      if (!binding) continue
+      keyMap[id] = binding
+    }
+    return keyMap
+  }, [hotkeys])
+
   const contextValue = useMemo(
     () => ({
       hotkeys,
+      keyMap,
+      clearHotkeys: () => {
+        for (const { id } of hotkeys) {
+          setInConfig(`hotkeys.${id}`, null)
+        }
+      },
       changeHotkey: (id, newBinding) =>
         setInConfig(`hotkeys.${id}`, newBinding),
     }),
-    [setInConfig, hotkeys]
+    [setInConfig, hotkeys, keyMap]
   )
 
-  const keyMap = useMemo(() => {
-    const keyMap = {}
-    for (const { id, binding } of hotkeys) keyMap[id] = binding
-    return keyMap
-  }, [hotkeys])
-
   return (
     <HotkeyContext.Provider value={contextValue}>
-      <HotKeys keyMap={keyMap}>{children}</HotKeys>
+      {children}
     </HotkeyContext.Provider>
   )
 }
+
+export { defaultHotkeys }