2913_Filter_SIDC_should_not_an_edit_field

client/src/Components/local/atoms/mapping-panel/helpers/icon-renderer.tsx

@@ -27,7 +27,7 @@ const IconRenderer: React.FC<IconRendererProps> = ({ feature, checked, color, on
     const health = feature.properties?.health
 
     const healthColor = calculateHealthColor(health)
-
+    
     return <div className={styles['asset-icon']}>
       {get(feature, 'properties._type') === RENDERER_CORE
         ? <FontAwesomeIcon icon={faShapes} color={color} fontSize={25} />

client/src/Components/local/atoms/mapping-panel/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import { faArrowAltCircleLeft, faWindowMaximize, faWindowMinimize } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Checkbox, FormControlLabel } from '@material-ui/core'
@@ -339,6 +340,11 @@ export const MappingPanel: React.FC<MappingPanelProps> = ({ onClose, features, r
           let filteringValue: any[] = [] // Explicitly type as an array of any[]
           if (Array.isArray(propertyValue)) {
             itemPropValue = propertyValue
+          } else if (filterKey === 'sidc') {
+            const { success, sidc } = handleSidcValue(propertyValue)
+            if (success) {
+              itemPropValue.push(sidc)
+            }
           } else {
             itemPropValue.push(propertyValue)
           }
@@ -352,13 +358,13 @@ export const MappingPanel: React.FC<MappingPanelProps> = ({ onClose, features, r
           orFoundKey[filterKey] = (filteringValueStr.includes(itemValueStr) || itemValueStr.includes(filteringValueStr)) && !!itemValueStr
         }
       })
-
+      
       return Object.values(orFoundKey).every(f => f)
     })
     const isSelectedFeatureFilterOut = cloneFeature.features.some(f => get(f, 'properties.id', '') === get(selectedFeature, 'properties.id', ''))
     if (!isSelectedFeatureFilterOut) {
       clearSelectedFeature()
-    }
+    } 
     setFilterFeatureIds(getAllFeatureIds(cloneFeature))
     setFilteredFeatures(cloneFeature)
   }, [features, selectedFiltersProps])

client/src/Components/local/molecules/sidc-generator/index.tsx

@@ -5,6 +5,7 @@ import 'leaflet/dist/leaflet.css'
 import renderDropdown from './helpers/renderDeopdown'
 import useStyles from './helpers/SidcGeneratorStyles'
 import PropsTypes from './PropsTypes/types'
+import { CUSTOM_SIDC } from 'src/config'
 import replaceNumber from './helpers/replace-number'
 import { dropdownOptions } from './helpers/SharedData'
 
@@ -26,8 +27,13 @@ const SIDCGenerator: React.FC<PropsTypes> = (props) => {
   }, [originalNumber])
 
   useEffect(() => {
-    setSymbolCode(sidcValue[4] + sidcValue[5])
-    setOriginalNumber(sidcValue)
+    if (sidcValue && sidcValue.length >= 6) {
+      setSymbolCode(sidcValue[4] + sidcValue[5])
+    } else {
+      console.warn('sidcValue is either undefined or too short')
+      setSymbolCode('')
+    }
+    setOriginalNumber(sidcValue || CUSTOM_SIDC)
   }, [sidcValue])
 
   const handleSave = () => {