bug fixed: widget is breaking when default array has wrong enteries (#5649)

frontend/src/Editor/Components/BoundedBox/BoundedBox.jsx

@@ -5,12 +5,19 @@ import defaultStyles from '@/_ui/Select/styles';
 import { RenderSelector } from './RenderSelector';
 import { RenderEditor } from './RenderEditor';
 import { RenderHighlight } from './RenderHighlight';
+import _ from 'lodash';
 
 export const BoundedBox = ({ properties, fireEvent, darkMode, setExposedVariable, height, styles }) => {
   const [annotationState, setAnnotation] = useState({});
   const [annotationsState, setAnnotations] = useState([]);
   const [typeState, setType] = useState(properties.selector);
-
+  const labels = _.isArray(properties.labels)
+    ? [
+        ...properties.labels.map((label) => {
+          return { name: label, value: label };
+        }),
+      ]
+    : [];
   useEffect(() => {
     let selector = undefined;
     switch (properties.selector) {
@@ -79,7 +86,7 @@ export const BoundedBox = ({ properties, fireEvent, darkMode, setExposedVariable
     <div
       onMouseDown={(e) => e.stopPropagation()}
       style={{ display: styles.visibility ? 'block' : 'none', height: height }}
-      className="bounded-box"
+      className="bounded-box relative"
     >
       <Annotation
         src={`${properties.imageUrl}`}
@@ -94,7 +101,7 @@ export const BoundedBox = ({ properties, fireEvent, darkMode, setExposedVariable
           return (
             <RenderEditor
               annotation={annotation}
-              labels={properties.labels}
+              labels={labels}
               setAnnotation={setAnnotation}
               setAnnotations={setAnnotations}
               setExposedVariable={setExposedVariable}
@@ -113,7 +120,7 @@ export const BoundedBox = ({ properties, fireEvent, darkMode, setExposedVariable
             fireEvent={fireEvent}
             darkMode={darkMode}
             selectElementStyles={selectElementStyles}
-            labels={properties.labels}
+            labels={labels}
             getExposedAnnotations={getExposedAnnotations}
           />
         )}

frontend/src/Editor/Components/BoundedBox/RenderEditor.jsx

@@ -21,10 +21,6 @@ export const RenderEditor = ({
   }, []);
   const { geometry } = annotation;
   if (!geometry) return null;
-  const selectOptions = labels.map((label) => {
-    return { name: label, value: label };
-  });
-
   return (
     <div
       style={{
@@ -38,7 +34,7 @@ export const RenderEditor = ({
       className="col"
     >
       <Select
-        options={selectOptions}
+        options={labels}
         onChange={(value) => {
           setAnnotation({});
           setAnnotations((prevState) => {
@@ -56,7 +52,7 @@ export const RenderEditor = ({
         }}
         className={`${darkMode ? 'select-search-dark' : 'select-search'}`}
         useCustomStyles={true}
-        useMenuPortal={true}
+        useMenuPortal={false}
         styles={selectElementStyles(darkMode, '100%')}
       />
     </div>

frontend/src/Editor/Components/BoundedBox/RenderHighlight.jsx

@@ -18,9 +18,7 @@ export const RenderHighlight = ({
   }
   if (!geometry) return null;
   const { data } = annotation;
-  const selectOptions = labels.map((label) => {
-    return { name: label, value: label };
-  });
+
   return (
     <div>
       <Box
@@ -82,7 +80,7 @@ export const RenderHighlight = ({
         </span>
         <div className="col">
           <Select
-            options={selectOptions}
+            options={labels}
             onChange={(value) => {
               setAnnotations((prevState) => {
                 const annotations = prevState.reduce((acc, annotation) => {