fix: Merge pull request #124 from UniversalDataTool/classification-hotkeys

add classification hotkeys

Author: seveibar

src/Annotator/reducers/general-reducer.js

@@ -124,6 +124,9 @@ export default (state: MainLayoutState, action: Action) => {
     case "SELECT_IMAGE": {
       return setNewImage(action.image, action.imageIndex)
     }
+    case "SELECT_CLASSIFICATION": {
+      return setIn(state, ["selectedCls"], action.cls)
+    }
     case "CHANGE_REGION": {
       const regionIndex = getRegionIndex(action.region)
       if (regionIndex === null) return state
@@ -132,6 +135,7 @@ export default (state: MainLayoutState, action: Action) => {
         state = saveToHistory(state, "Change Region Classification")
         const clsIndex = state.regionClsList.indexOf(action.region.cls)
         if (clsIndex !== -1) {
+          state = setIn(state, ["selectedCls"], action.region.cls)
           action.region.color = colors[clsIndex % colors.length]
         }
       }
@@ -498,14 +502,12 @@ export default (state: MainLayoutState, action: Action) => {
       }
 
       let newRegion
-      let defaultRegionCls = undefined,
+      let defaultRegionCls = state.selectedCls,
         defaultRegionColor = "#ff0000"
-      if (activeImage && (activeImage.regions || []).length > 0) {
-        defaultRegionCls = activeImage.regions.slice(-1)[0].cls
-        const clsIndex = (state.regionClsList || []).indexOf(defaultRegionCls)
-        if (clsIndex !== -1) {
-          defaultRegionColor = colors[clsIndex % colors.length]
-        }
+
+      const clsIndex = (state.regionClsList || []).indexOf(defaultRegionCls)
+      if (clsIndex !== -1) {
+        defaultRegionColor = colors[clsIndex % colors.length]
       }
 
       switch (state.selectedTool) {

src/ClassSelectionMenu/index.js

@@ -0,0 +1,102 @@
+import React, { useEffect } from "react"
+import { styled } from "@material-ui/core/styles"
+import Box from "@material-ui/core/Box"
+import * as muiColors from "@material-ui/core/colors"
+import SidebarBoxContainer from "../SidebarBoxContainer"
+import colors from "../colors"
+import BallotIcon from "@material-ui/icons/Ballot"
+import capitalize from "lodash/capitalize"
+import classnames from "classnames"
+
+const LabelContainer = styled("div")({
+  display: "flex",
+  paddingTop: 4,
+  paddingBottom: 4,
+  paddingLeft: 16,
+  paddingRight: 16,
+  alignItems: "center",
+  cursor: "pointer",
+  opacity: 0.7,
+  backgroundColor: "#fff",
+  "&:hover": {
+    opacity: 1,
+  },
+  "&.selected": {
+    opacity: 1,
+    fontWeight: "bold",
+  },
+})
+const Circle = styled("div")({
+  width: 12,
+  height: 12,
+  borderRadius: 12,
+  marginRight: 8,
+})
+const Label = styled("div")({
+  fontSize: 11,
+})
+const DashSep = styled("div")({
+  flexGrow: 1,
+  borderBottom: `2px dotted ${muiColors.grey[300]}`,
+  marginLeft: 8,
+  marginRight: 8,
+})
+const Number = styled("div")({
+  fontSize: 11,
+  textAlign: "center",
+  minWidth: 14,
+  paddingTop: 2,
+  paddingBottom: 2,
+  fontWeight: "bold",
+  color: muiColors.grey[700],
+})
+
+export const ClassSelectionMenu = ({
+  selectedCls,
+  regionClsList,
+  onSelectCls,
+}) => {
+  useEffect(() => {
+    const keyMapping = {}
+    for (let i = 0; i < 9 && i < regionClsList.length; i++) {
+      keyMapping[i + 1] = () => onSelectCls(regionClsList[i])
+    }
+    const onKeyDown = (e) => {
+      if (keyMapping[e.key]) {
+        keyMapping[e.key]()
+        e.preventDefault()
+        e.stopPropagation()
+      }
+    }
+    window.addEventListener("keydown", onKeyDown)
+    return () => window.removeEventListener("keydown", onKeyDown)
+  }, [regionClsList, selectedCls])
+
+  return (
+    <SidebarBoxContainer
+      title="Classifications"
+      subTitle=""
+      icon={<BallotIcon style={{ color: muiColors.grey[700] }} />}
+      expandedByDefault
+    >
+      {regionClsList.map((label, index) => (
+        <LabelContainer
+          className={classnames({ selected: label === selectedCls })}
+          onClick={() => onSelectCls(label)}
+        >
+          <Circle style={{ backgroundColor: colors[index % colors.length] }} />
+          <Label className={classnames({ selected: label === selectedCls })}>
+            {capitalize(label)}
+          </Label>
+          <DashSep />
+          <Number className={classnames({ selected: label === selectedCls })}>
+            {index < 9 ? `Key [${index + 1}]` : ""}
+          </Number>
+        </LabelContainer>
+      ))}
+      <Box pb={2} />
+    </SidebarBoxContainer>
+  )
+}
+
+export default ClassSelectionMenu

src/MainLayout/index.js

@@ -28,6 +28,7 @@ import ImageSelector from "../ImageSelectorSidebarBox"
 import HistorySidebarBox from "../HistorySidebarBox"
 import useEventCallback from "use-event-callback"
 import getHotkeyHelpText from "../utils/get-hotkey-help-text"
+import ClassSelectionMenu from "../ClassSelectionMenu"
 
 const emptyArr = []
 const useStyles = makeStyles(styles)
@@ -332,6 +333,13 @@ export const MainLayout = ({
               state.taskDescription && (
                 <TaskDescription description={state.taskDescription} />
               ),
+              state.regionClsList && (
+                <ClassSelectionMenu
+                  selectedCls={state.selectedCls}
+                  regionClsList={state.regionClsList}
+                  onSelectCls={action("SELECT_CLASSIFICATION", "cls")}
+                />
+              ),
               state.labelImages && (
                 <TagsSidebarBox
                   currentImage={activeImage}

src/MainLayout/types.js

@@ -69,6 +69,7 @@ export type MainLayoutStateBase = {|
   showPointDistances?: boolean,
   pointDistancePrecision?: number,
   selectedTool: ToolEnum,
+  selectedCls?: string,
   mode: Mode,
   taskDescription: string,
   allowedArea?: { x: number, y: number, w: number, h: number },
@@ -152,3 +153,4 @@ export type Action =
   | {| type: "HEADER_BUTTON_CLICKED", buttonName: string |}
   | {| type: "SELECT_TOOL", selectedTool: ToolEnum |}
   | {| type: "CANCEL" |}
+  | {| type: "SELECT_CLASSIFICATION", cls: string |}