Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/SubjectPopup/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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);
Expand All @@ -65,7 +74,7 @@ const SubjectPopup = ({ data }) => {
<div className={styles.defaultStatusProperty} data-testid="subject-popup-name">
{properties.default_status_value && <>
{properties.image && <img
alt={t('subjectIconAlt', { name: calcDisplayNameForSubject(properties) })}
alt={t('subjectIconAlt', { name: popupTitle })}
src={properties.image}
/>}

Expand Down
Loading