diff --git a/frontend/src/js/preview/HeadlineStats.tsx b/frontend/src/js/preview/HeadlineStats.tsx index 45f4420a43..33edc810cc 100644 --- a/frontend/src/js/preview/HeadlineStats.tsx +++ b/frontend/src/js/preview/HeadlineStats.tsx @@ -17,15 +17,20 @@ const SxTooltipEntries = styled(TooltipEntries)` export type HeadlineStatsProps = { statistics: PreviewStatisticsResponse | null; + idLabel: string; }; -export default function HeadlineStats({ statistics }: HeadlineStatsProps) { +export default function HeadlineStats({ + statistics, + idLabel, +}: HeadlineStatsProps) { return ( ); diff --git a/frontend/src/js/preview/Preview.tsx b/frontend/src/js/preview/Preview.tsx index 9339722bcf..7f1726d2b2 100644 --- a/frontend/src/js/preview/Preview.tsx +++ b/frontend/src/js/preview/Preview.tsx @@ -1,12 +1,12 @@ import styled from "@emotion/styled"; -import { useState } from "react"; +import { useMemo, useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { useTranslation } from "react-i18next"; import { useDispatch, useSelector } from "react-redux"; import { StateT } from "../app/reducers"; -import { PreviewStatistics } from "../api/types"; +import { PreviewStatistics, SecondaryId } from "../api/types"; import { TransparentButton } from "../button/TransparentButton"; import FaIcon from "../icon/FaIcon"; @@ -79,6 +79,9 @@ const SxSelectBox = styled(SelectBox)` export default function Preview() { const preview = useSelector((state) => state.preview); + const loadedSecondaryIds = useSelector( + (state) => state.conceptTrees.secondaryIds, + ); const dispatch = useDispatch(); const { t } = useTranslation(); const [selectBoxOpen, setSelectBoxOpen] = useState(false); @@ -86,6 +89,17 @@ export default function Preview() { const [popOver, setPopOver] = useState(null); const onClose = () => dispatch(closePreview()); const statistics = preview.statisticsData; + const idLabel = useMemo(() => { + const primaryIdLabel = t("tooltip.entitiesFound", { count: 2 }); + if (preview.queryData?.secondaryId) { + const secondaryIdLabel = loadedSecondaryIds.find( + (x) => x.id === preview.queryData?.secondaryId, + )?.label; + return `${primaryIdLabel} und ${secondaryIdLabel}`; + } else { + return `${t("queryEditor.secondaryIdStandard")} (${primaryIdLabel})`; + } + }, [preview.queryData, loadedSecondaryIds, t]); useHotkeys("esc", () => { if (!selectBoxOpen && !popOver) onClose(); @@ -110,7 +124,7 @@ export default function Preview() { isOpen={selectBoxOpen} setIsOpen={setSelectBoxOpen} /> - + {statistics ? ( { matchingEntries?: number | null; matchingEntities?: number | null; dateRange?: DateRangeT; + idLabel?: string; } const TooltipEntries = (props: Props) => { const { t } = useTranslation(); - const { matchingEntries, matchingEntities, dateRange } = props; + const { matchingEntries, matchingEntities, dateRange, idLabel } = props; const isZero = props.matchingEntries === 0; const isZeroEntities = props.matchingEntities === 0; @@ -101,6 +103,15 @@ const TooltipEntries = (props: Props) => { return ( + {idLabel && ( + <> + + + {idLabel} + {t("queryEditor.secondaryId")} + + + )}