Feat/preview adjustments

frontend/src/js/preview/Diagram.tsx

@@ -8,7 +8,6 @@ import { parseDate, parseStdDate } from "../common/helpers/dateHelper";
 import { hexToRgbA } from "../entity-history/TimeStratifiedChart";
 
 import { Theme, useTheme } from "@emotion/react";
-import { Chart } from "chart.js";
 import { useTranslation } from "react-i18next";
 import {
   formatNumber,
@@ -121,7 +120,10 @@ export default function Diagram({
       plugins: {
         title: {
           display: true,
-          font: Chart.defaults.font,
+          font: {
+            weight: "normal",
+            size: 14,
+          },
           position: "bottom",
           text: stat.label,
         },
@@ -146,6 +148,10 @@ export default function Diagram({
     const yScaleTitle = {
       display: true,
       text: t("preview.chartYLabel"),
+      font: {
+        weight: "normal",
+        size: 14,
+      },
     };
 
     if (previewStatsIsBarStats(stat)) {

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 (
     <Root>
       <SxTooltipEntries
         matchingEntities={statistics?.entities}
         matchingEntries={statistics?.total}
         dateRange={statistics?.dateRange}
+        idLabel={idLabel}
       />
     </Root>
   );

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,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 t("preview.idLabel", { primaryIdLabel, 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}
           />
-          <HeadlineStats statistics={statistics} />
+          <HeadlineStats statistics={statistics} idLabel={idLabel} />
         </Headline>
         {statistics ? (
           <SxCharts

frontend/src/js/tooltip/TooltipEntries.tsx

@@ -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";
@@ -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;
@@ -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}>

frontend/src/localization/de.json

@@ -411,7 +411,8 @@
     "name": "Name",
     "value": "Wert",
     "densityPlot": "Dichtediagramm",
-    "chartYLabel": "Anzahl"
+    "chartYLabel": "Anzahl",
+    "idLabel": "{{primaryIdLabel}} und {{secondaryIdLabel}}"
   },
   "login": {
     "headline": "Anfragen und Analyse",

frontend/src/localization/en.json

@@ -411,7 +411,8 @@
     "name": "Name",
     "value": "Value",
     "densityPlot": "Density Plot",
-    "chartYLabel": "Count"
+    "chartYLabel": "Count",
+    "idLabel": "{{primaryIdLabel}} and {{secondaryIdLabel}}"
   },
   "login": {
     "headline": "Queries and Analyses",