feat: Add Creatable Classifications

changed select to creatableselect for classification

Author: seveibar

src/Annotator/index.js

@@ -132,6 +132,13 @@ export const Annotator = ({
     dispatchToReducer(action)
   })
 
+  const onRegionClassAdded = useEventCallback((cls) => {
+    dispatchToReducer({
+      type: "ON_CLS_ADDED",
+      cls: cls,
+    })
+  })
+
   useEffect(() => {
     if (!selectedImage) return
     dispatchToReducer({
@@ -148,6 +155,7 @@ export const Annotator = ({
         alwaysShowPrevButton={Boolean(onPrevImage)}
         state={state}
         dispatch={dispatch}
+        onRegionClassAdded={onRegionClassAdded}
       />
     </SettingsProvider>
   )

src/Annotator/reducers/general-reducer.js

@@ -13,6 +13,15 @@ import convertExpandingLineToPolygon from "./convert-expanding-line-to-polygon"
 const getRandomId = () => Math.random().toString().split(".")[1]
 
 export default (state: MainLayoutState, action: Action) => {
+  if (action.type === "ON_CLS_ADDED" && action.cls && action.cls !== "") {
+    const oldRegionClsList = state.regionClsList
+    const newState = {
+      ...state,
+      regionClsList: oldRegionClsList.concat(action.cls),
+    }
+    return newState
+  }
+
   // Throttle certain actions
   if (action.type === "MOUSE_MOVE") {
     if (Date.now() - ((state: any).lastMouseMoveCall || 0) < 16) return state

src/ImageCanvas/index.js

@@ -65,6 +65,7 @@ type Props = {
     duration?: number,
   }) => any,
   onChangeVideoTime: (number) => any,
+  onRegionClassAdded: () => {},
   onChangeVideoPlaying?: Function,
 }
 
@@ -106,6 +107,7 @@ export const ImageCanvas = ({
   onDeleteRegion,
   onChangeVideoTime,
   onChangeVideoPlaying,
+  onRegionClassAdded,
 }: Props) => {
   const classes = useStyles()
 
@@ -322,6 +324,7 @@ export const ImageCanvas = ({
             layoutParams={layoutParams}
             imageSrc={imageSrc}
             RegionEditLabel={RegionEditLabel}
+            onRegionClassAdded={onRegionClassAdded}
           />
         </PreventScrollToParents>
       )}

src/MainLayout/index.js

@@ -34,6 +34,7 @@ type Props = {
   dispatch: (Action) => any,
   alwaysShowNextButton?: boolean,
   alwaysShowPrevButton?: boolean,
+  onRegionClassAdded: () => {},
 }
 
 export const MainLayout = ({
@@ -42,6 +43,7 @@ export const MainLayout = ({
   alwaysShowNextButton = false,
   alwaysShowPrevButton = false,
   RegionEditLabel,
+  onRegionClassAdded,
 }: Props) => {
   const classes = useStyles()
   const settings = useSettings()
@@ -223,6 +225,7 @@ export const MainLayout = ({
                     "CHANGE_VIDEO_PLAYING",
                     "isPlaying"
                   )}
+                  onRegionClassAdded={onRegionClassAdded}
                 />
               </div>
             )}

src/RegionLabel/index.js

@@ -12,6 +12,8 @@ import TrashIcon from "@material-ui/icons/Delete"
 import CheckIcon from "@material-ui/icons/Check"
 import UndoIcon from "@material-ui/icons/Undo"
 import Select from "react-select"
+import CreatableSelect from "react-select/creatable"
+
 import { asMutable } from "seamless-immutable"
 
 const useStyles = makeStyles(styles)
@@ -27,6 +29,7 @@ type Props = {
   onChange: (Region) => null,
   onClose: (Region) => null,
   onOpen: (Region) => null,
+  onRegionClassAdded: () => {},
 }
 
 export const RegionLabel = ({
@@ -38,6 +41,7 @@ export const RegionLabel = ({
   onChange,
   onClose,
   onOpen,
+  onRegionClassAdded,
 }: Props) => {
   const classes = useStyles()
 
@@ -100,14 +104,17 @@ export const RegionLabel = ({
           </div>
           {(allowedClasses || []).length > 0 && (
             <div style={{ marginTop: 6 }}>
-              <Select
+              <CreatableSelect
                 placeholder="Classification"
-                onChange={(o) =>
-                  onChange({
+                onChange={(o, actionMeta) => {
+                  if (actionMeta.action == "create-option") {
+                    onRegionClassAdded(o.value)
+                  }
+                  return onChange({
                     ...(region: any),
                     cls: o.value,
                   })
-                }
+                }}
                 value={
                   region.cls ? { label: region.cls, value: region.cls } : null
                 }

src/RegionTags/index.js

@@ -26,6 +26,7 @@ export const RegionTags = ({
   layoutParams,
   imageSrc,
   RegionEditLabel,
+  onRegionClassAdded,
 }) => {
   const RegionLabel =
     RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel
@@ -116,6 +117,7 @@ export const RegionTags = ({
               region={region}
               regions={regions}
               imageSrc={imageSrc}
+              onRegionClassAdded={onRegionClassAdded}
             />
           </div>
         </div>