diff --git a/src/SubjectPopup/index.js b/src/SubjectPopup/index.js index 325b04f26..d0fca5b0a 100644 --- a/src/SubjectPopup/index.js +++ b/src/SubjectPopup/index.js @@ -23,6 +23,15 @@ const STORAGE_KEY = 'showSubjectDetailsByDefault'; const SubjectPopup = ({ data }) => { const { t } = useTranslation('subjects', { keyPrefix: 'subjectPopup' }); const isTimeSliderActive = useSelector((state) => state.view.timeSliderState.active); + // Select only the title string so we don't re-render on every store update (avoids update loops) + const popupTitleFromStore = useSelector((state) => { + if (!data?.properties?.id) return null; + const subject = state.data?.subjectStore?.[data.properties.id]; + if (!subject) return null; + const manufacturer = subject.additional?.manufacturer; + const name = calcDisplayNameForSubject(subject); + return manufacturer ? `${manufacturer}: ${name}` : name; + }); const [additionalPropsToggledOn, toggleAdditionalPropsVisibility] = useState( window.localStorage.getItem(STORAGE_KEY) === 'true' @@ -48,10 +57,10 @@ const SubjectPopup = ({ data }) => { const showAdditionalProps = hasAdditionalDeviceProps && (additionalPropsShouldBeToggleable ? additionalPropsToggledOn : true); + // Prefer title from store so manufacturer and name/serial are always shown; fallback to layer properties const buoyManufacturer = properties?.additional?.manufacturer; const displayName = calcDisplayNameForSubject(properties); - - const popupTitle = buoyManufacturer ? `${buoyManufacturer}: ${displayName}` : displayName; + const popupTitle = popupTitleFromStore ?? (buoyManufacturer ? `${buoyManufacturer}: ${displayName}` : displayName); const toggleShowAdditionalProperties = useCallback(() => { toggleAdditionalPropsVisibility(!additionalPropsToggledOn); @@ -65,7 +74,7 @@ const SubjectPopup = ({ data }) => {