fix: Merge pull request #118 from UniversalDataTool/various-fixes

Update Layout, Add Hotkey Help Text, Remember Show Tags

Author: seveibar

package.json

@@ -19,7 +19,7 @@
     "react-hotkeys": "^2.0.0",
     "react-json-view": "^1.19.1",
     "react-markdown": "^4.0.6",
-    "react-material-workspace-layout": "^0.1.17",
+    "react-material-workspace-layout": "^1.0.4",
     "react-monaco-editor": "^0.25.1",
     "react-remove-scroll": "^2.0.4",
     "react-select": "^3.0.8",

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/SidebarBoxContainer/index.js

@@ -81,27 +81,6 @@ export const SidebarBoxContainer = ({
       {children}
     </SidebarBox>
   )
-
-  return (
-    <Paper className={classes.container}>
-      <div className={classes.header}>
-        {icon}
-        <div className={classes.title}>
-          {title} <span>{subTitle}</span>
-        </div>
-        <IconButton onClick={toggleExpanded} className={classes.expandButton}>
-          <ExpandIcon className={classnames("icon", expanded && "expanded")} />
-        </IconButton>
-      </div>
-      {noScroll ? (
-        expanded ? (
-          content
-        ) : null
-      ) : (
-        <Collapse in={expanded}>{content}</Collapse>
-      )}
-    </Paper>
-  )
 }
 
 export default memo(

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)
+  )
+}

yarn.lock

@@ -5597,6 +5597,11 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+cash-dom@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/cash-dom/-/cash-dom-4.1.5.tgz#0ef0cf205bc7603aa4e2dfada5808442a7a0e6ca"
+  integrity sha512-E6MO0A6ms5iZPtexznQXWRkFEvqdPqCmdx/SiJr2PnhOQNhZNfALkLG5t83Hk3J5JELzED7PJuzhMoS2tT64XA==
+
 ccount@^1.0.3:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
@@ -14551,15 +14556,16 @@ react-markdown@^4.0.6:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
-react-material-workspace-layout@^0.1.17:
-  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-0.1.17.tgz#98a997e7d8671444fafe53caa4298b6643d1b9cb"
-  integrity sha512-GY+jFZ14IYKyzIW/KI8/R0Mttb5dTRdYDKdj++YAU/Z3HSQ7kZJ678mv5Nl7X0o081IpMFg5CRiBvvdozUmBtQ==
+react-material-workspace-layout@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/react-material-workspace-layout/-/react-material-workspace-layout-1.0.4.tgz#ff1ade3b322bdc99d62eb2f1da3080555f07b4e6"
+  integrity sha512-EJjmun16OxRcbNnYX+49LZBTcYhLAlHRa38wC1S5BZi0TKQkh+d4FN/Xs60pnLLQeoJ7nEyEjQgNCLQu9ESVbw==
   dependencies:
     "@material-ui/core" "^4.10.0"
     "@material-ui/icons" "^4.9.1"
     classnames "^2.2.6"
     react "^16.13.1"
+    react-resize-panel "^0.3.5"
     react-use-dimensions "^1.2.1"
     use-event-callback "^0.1.0"
 
@@ -14610,6 +14616,16 @@ react-remove-scroll@^2.0.4:
     tslib "^1.0.0"
     use-sidecar "^1.0.1"
 
+react-resize-panel@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/react-resize-panel/-/react-resize-panel-0.3.5.tgz#43aa3450bf5b5a2566b40c4201445ced96c2a905"
+  integrity sha512-iyHOFTrSt+WV4Ilzi81x6KH3FU7VsGP736rmxepwGrgAEATmCvXzZdluTm3NpsptP7aC3hLODmXwnxusyA393A==
+  dependencies:
+    cash-dom "^4.1.5"
+    classnames "^2.2.6"
+    lodash.debounce "^4.0.8"
+    react-draggable "^4.0.3"
+
 react-scripts@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"