Skip to content

Commit

Permalink
feat: add secondaryId to preview headline
Browse files Browse the repository at this point in the history
  • Loading branch information
MarcoKorinth committed May 2, 2024
1 parent 6dcf7f3 commit 026d872
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 5 deletions.
7 changes: 6 additions & 1 deletion frontend/src/js/preview/HeadlineStats.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Root>
<SxTooltipEntries
matchingEntities={statistics?.entities}
matchingEntries={statistics?.total}
dateRange={statistics?.dateRange}
idLabel={idLabel}
/>
</Root>
);
Expand Down
20 changes: 17 additions & 3 deletions frontend/src/js/preview/Preview.tsx
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -79,13 +79,27 @@ const SxSelectBox = styled(SelectBox)`

export default function Preview() {
const preview = useSelector<StateT, PreviewStateT>((state) => state.preview);
const loadedSecondaryIds = useSelector<StateT, SecondaryId[]>(
(state) => state.conceptTrees.secondaryIds,
);
const dispatch = useDispatch();
const { t } = useTranslation();
const [selectBoxOpen, setSelectBoxOpen] = useState<boolean>(false);
const [page, setPage] = useState<number>(0);
const [popOver, setPopOver] = useState<PreviewStatistics | null>(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();
Expand All @@ -110,7 +124,7 @@ export default function Preview() {
isOpen={selectBoxOpen}
setIsOpen={setSelectBoxOpen}
/>
<HeadlineStats statistics={statistics} />
<HeadlineStats statistics={statistics} idLabel={idLabel} />
</Headline>
{statistics ? (
<SxCharts
Expand Down
13 changes: 12 additions & 1 deletion frontend/src/js/tooltip/TooltipEntries.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import styled from "@emotion/styled";
import {
faArrowsLeftRightToLine,
faHashtag,
faMicroscope,
faUser,
} from "@fortawesome/free-solid-svg-icons";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -75,11 +76,12 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
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;
Expand All @@ -101,6 +103,15 @@ const TooltipEntries = (props: Props) => {

return (
<Root {...props}>
{idLabel && (
<>
<StyledFaIcon icon={faMicroscope} />
<Info>
<Date>{idLabel}</Date>
<Text zero={isZero}>{t("queryEditor.secondaryId")}</Text>
</Info>
</>
)}
<StyledFaIcon icon={faHashtag} />
<Info>
<Number zero={isZero}>
Expand Down

0 comments on commit 026d872

Please sign in to comment.