updated code, to update options for regionclslist when new cls is added

Author: sreevardhanreddi

src/Annotator/index.js

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

src/Annotator/reducers/history-handler.js

@@ -26,6 +26,15 @@ export default (reducer) => {
     const prevState = state
     const nextState = reducer(state, 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
+    }
+
     if (action.type === "RESTORE_HISTORY") {
       if (state.history.length > 0) {
         return setIn(

src/ImageCanvas/index.js

@@ -79,6 +79,7 @@ type Props = {
     duration?: number,
   }) => any,
   onChangeVideoTime: (number) => any,
+  onRegionLabelAdded: () => {},
 }
 
 const getDefaultMat = () => Matrix.from(1, 0, 0, 1, -10, -10)
@@ -118,6 +119,7 @@ export default ({
   onDeleteRegion,
   onChangeVideoTime,
   onChangeVideoPlaying,
+  onRegionLabelAdded,
 }: Props) => {
   const classes = useStyles()
 
@@ -441,6 +443,7 @@ export default ({
             layoutParams={layoutParams}
             imageSrc={imageSrc}
             RegionEditLabel={RegionEditLabel}
+            onRegionLabelAdded={onRegionLabelAdded}
           />
         </PreventScrollToParents>
       )}

src/MainLayout/index.js

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

src/RegionLabel/index.js

@@ -29,6 +29,7 @@ type Props = {
   onChange: (Region) => null,
   onClose: (Region) => null,
   onOpen: (Region) => null,
+  onRegionLabelAdded: () => {},
 }
 
 export const RegionLabel = ({
@@ -40,6 +41,7 @@ export const RegionLabel = ({
   onChange,
   onClose,
   onOpen,
+  onRegionLabelAdded,
 }: Props) => {
   const classes = useStyles()
 
@@ -104,12 +106,15 @@ export const RegionLabel = ({
             <div style={{ marginTop: 6 }}>
               <CreatableSelect
                 placeholder="Classification"
-                onChange={(o) =>
-                  onChange({
+                onChange={(o, actionMeta) => {
+                  if (actionMeta.action == "create-option") {
+                    onRegionLabelAdded(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,
+  onRegionLabelAdded,
 }) => {
   const RegionLabel =
     RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel
@@ -115,6 +116,7 @@ export const RegionTags = ({
               region={region}
               regions={regions}
               imageSrc={imageSrc}
+              onRegionLabelAdded={onRegionLabelAdded}
             />
           </div>
         </div>