save show tags to local storage, hotkey help texts

Author: seveibar

src/Annotator/index.js

@@ -21,6 +21,7 @@ import historyHandler from "./reducers/history-handler.js"
 
 import useEventCallback from "use-event-callback"
 import makeImmutable, { without } from "seamless-immutable"
+import getFromLocalStorage from "../utils/get-from-local-storage"
 
 type Props = {
   taskDescription?: string,
@@ -55,7 +56,7 @@ export const Annotator = ({
   selectedImage = images && images.length > 0 ? 0 : undefined,
   showPointDistances,
   pointDistancePrecision,
-  showTags = true,
+  showTags = getFromLocalStorage("showTags", true),
   enabledTools = [
     "select",
     "create-point",

src/Annotator/reducers/general-reducer.js

@@ -11,6 +11,7 @@ import fixTwisted from "./fix-twisted"
 import convertExpandingLineToPolygon from "./convert-expanding-line-to-polygon"
 import clamp from "clamp"
 import getLandmarksWithTransform from "../../utils/get-landmarks-with-transform"
+import setInLocalStorage from "../../utils/set-in-local-storage"
 
 const getRandomId = () => Math.random().toString().split(".")[1]
 
@@ -809,6 +810,7 @@ export default (state: MainLayoutState, action: Action) => {
     }
     case "SELECT_TOOL": {
       if (action.selectedTool === "show-tags") {
+        setInLocalStorage("showTags", !state.showTags)
         return setIn(state, ["showTags"], !state.showTags)
       } else if (action.selectedTool === "show-mask") {
         return setIn(state, ["showMask"], !state.showMask)

src/MainLayout/index.js

@@ -27,6 +27,7 @@ import RegionSelector from "../RegionSelectorSidebarBox"
 import ImageSelector from "../ImageSelectorSidebarBox"
 import HistorySidebarBox from "../HistorySidebarBox"
 import useEventCallback from "use-event-callback"
+import getHotkeyHelpText from "../utils/get-hotkey-help-text"
 
 const emptyArr = []
 const useStyles = makeStyles(styles)
@@ -260,17 +261,20 @@ export const MainLayout = ({
             iconSidebarItems={[
               {
                 name: "select",
-                helperText: "Select",
+                helperText: "Select" + getHotkeyHelpText("select_tool"),
                 alwaysShowing: true,
               },
               {
                 name: "pan",
-                helperText: "Drag/Pan",
+                helperText:
+                  "Drag/Pan (right or middle click)" +
+                  getHotkeyHelpText("pan_tool"),
                 alwaysShowing: true,
               },
               {
                 name: "zoom",
-                helperText: "Zoom In/Out",
+                helperText:
+                  "Zoom In/Out (scroll)" + getHotkeyHelpText("zoom_tool"),
                 alwaysShowing: true,
               },
               {
@@ -280,15 +284,16 @@ export const MainLayout = ({
               },
               {
                 name: "create-point",
-                helperText: "Add Point",
+                helperText: "Add Point" + getHotkeyHelpText("create_point"),
               },
               {
                 name: "create-box",
-                helperText: "Add Bounding Box",
+                helperText:
+                  "Add Bounding Box" + getHotkeyHelpText("create_bounding_box"),
               },
               {
                 name: "create-polygon",
-                helperText: "Add Polygon",
+                helperText: "Add Polygon" + getHotkeyHelpText("create_polygon"),
               },
               {
                 name: "create-expanding-line",

src/utils/get-from-local-storage.js

@@ -0,0 +1,7 @@
+export default (key, defaultValue) => {
+  try {
+    return JSON.parse(window.localStorage[`__REACT_IMAGE_ANNOTATE_${key}`])
+  } catch (e) {
+    return defaultValue
+  }
+}

src/utils/get-hotkey-help-text.js

@@ -0,0 +1,11 @@
+import { getApplicationKeyMap } from "react-hotkeys"
+
+export const getHotkeyHelpText = (commandName) => {
+  const firstSequence = getApplicationKeyMap()[commandName]?.sequences?.[0]
+    ?.sequence
+
+  if (!firstSequence) return ""
+  return ` (${firstSequence})`
+}
+
+export default getHotkeyHelpText

src/utils/set-in-local-storage.js

@@ -0,0 +1,6 @@
+export default (key, val) => {
+  window.localStorage.setItem(
+    `__REACT_IMAGE_ANNOTATE_${key}`,
+    JSON.stringify(val)
+  )
+}