Skip to content

Commit 5ac6454

Browse files
ClementDreptinClementDreptin
authored
Merge pull request #203 from istex/feat/168-highlight-caption
Feat(highlight): Add tooltip with caption for highlighted elements
2 parents fb32da2 + 46173de commit 5ac6454

3 files changed

Lines changed: 126 additions & 21 deletions

File tree

‎packages/react-tei/src/i18n/locales/en.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,26 +58,47 @@ export const en: Translation = {
5858
previous: "Go to previous",
5959
next: "Go to next",
6060

61+
date_zero: "Dates",
6162
date_one: "Date ({{count}})",
6263
date_other: "Dates ({{count}})",
64+
65+
orgName_zero: "Organizations names",
6366
orgName_one: "Organization name ({{count}})",
6467
orgName_other: "Organizations names ({{count}})",
68+
69+
orgNameFunder_zero: "Funding organizations or funded projects",
6570
orgNameFunder_one: "Funding organization or funded project ({{count}})",
6671
orgNameFunder_other: "Funding organizations or funded projects ({{count}})",
72+
73+
orgNameProvider_zero: "Resource hosting organizations",
6774
orgNameProvider_one: "Resource hosting organization ({{count}})",
6875
orgNameProvider_other: "Resource hosting organizations ({{count}})",
76+
77+
persName_zero: "People names",
6978
persName_one: "Person name ({{count}})",
7079
persName_other: "People names ({{count}})",
80+
81+
placeName_zero: "Administrative places names",
7182
placeName_one: "Administrative place name ({{count}})",
7283
placeName_other: "Administrative places names ({{count}})",
84+
85+
geogName_zero: "Geographical places names",
7386
geogName_one: "Geographical place name ({{count}})",
7487
geogName_other: "Geographical places names ({{count}})",
88+
89+
ref_zero: "References",
7590
ref_one: "Reference ({{count}})",
7691
ref_other: "References ({{count}})",
92+
93+
refBibl_zero: "Citations",
7794
refBibl_one: "Citation ({{count}})",
7895
refBibl_other: "Citations ({{count}})",
96+
97+
refUrl_zero: "URLs",
7998
refUrl_one: "URL ({{count}})",
8099
refUrl_other: "URLs ({{count}})",
100+
101+
teeft_zero: "Specific terms (Teeft)",
81102
teeft_one: "Specific term (Teeft) ({{count}})",
82103
teeft_other: "Specific terms (Teeft) ({{count}})",
83104
},

‎packages/react-tei/src/i18n/locales/fr.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,27 +56,48 @@ export const fr = {
5656
previous: "Aller au précédent",
5757
next: "Aller au suivant",
5858

59+
date_zero: "Date",
5960
date_one: "Date ({{count}})",
6061
date_other: "Dates ({{count}})",
62+
63+
orgName_zero: "Nom d'organisation",
6164
orgName_one: "Nom d'organisation ({{count}})",
6265
orgName_other: "Noms d'organisations ({{count}})",
66+
67+
orgNameFunder_zero: "Organisme financeur ou projet financé",
6368
orgNameFunder_one: "Organisme financeur ou projet financé ({{count}})",
6469
orgNameFunder_other:
6570
"Organismes financeurs ou projets financés ({{count}})",
71+
72+
orgNameProvider_zero: "Organisme hébergeur de ressources",
6673
orgNameProvider_one: "Organisme hébergeur de ressources ({{count}})",
6774
orgNameProvider_other: "Organismes hébergeurs de ressources ({{count}})",
75+
76+
persName_zero: "Nom de personne",
6877
persName_one: "Nom de personne ({{count}})",
6978
persName_other: "Noms de personnes ({{count}})",
79+
80+
placeName_zero: "Nom de lieu administratif",
7081
placeName_one: "Nom de lieu administratif ({{count}})",
7182
placeName_other: "Noms de lieux administratifs ({{count}})",
83+
84+
geogName_zero: "Nom de lieu géographique",
7285
geogName_one: "Nom de lieu géographique ({{count}})",
7386
geogName_other: "Noms de lieux géographiques ({{count}})",
87+
88+
ref_zero: "Référence",
7489
ref_one: "Référence ({{count}})",
7590
ref_other: "Références ({{count}})",
91+
92+
refBibl_zero: "Citation",
7693
refBibl_one: "Citation ({{count}})",
7794
refBibl_other: "Citations ({{count}})",
95+
96+
refUrl_zero: "URL",
7897
refUrl_one: "URL ({{count}})",
7998
refUrl_other: "URLs ({{count}})",
99+
100+
teeft_zero: "Terme spécifique (Teeft)",
80101
teeft_one: "Terme spécifique (Teeft) ({{count}})",
81102
teeft_other: "Termes spécifiques (Teeft) ({{count}})",
82103
},

‎packages/react-tei/src/tags/Highlight.tsx‎

Lines changed: 84 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,104 @@
1-
import { Box } from "@mui/material";
1+
import { Box, Stack, Tooltip } from "@mui/material";
2+
import { useState } from "react";
3+
import { useTranslation } from "react-i18next";
24
import { chipColors } from "../SidePanel/enrichmentTerm/enrichmentTermAnnotationBlocks";
35
import {
46
useFormatHighlightValue,
57
type useFormatHighlightValueParams,
68
} from "./enrichment/useFormatHighlightValue";
79
import { Value } from "./Value";
810

11+
function HightlightCaption({ groups }: { groups: string[] }) {
12+
const { t } = useTranslation();
13+
return (
14+
<Stack direction="column" spacing={1}>
15+
{groups.map((group) => (
16+
<Stack key={group} direction="row" spacing={1} alignItems="center">
17+
<Box
18+
sx={{
19+
width: 24,
20+
height: 16,
21+
backgroundColor: chipColors[group as keyof typeof chipColors],
22+
border: (theme) => `1px solid ${theme.palette.divider}`,
23+
}}
24+
/>
25+
<Box>
26+
{t(`termEnrichment.${group}`, {
27+
count: 0,
28+
})}
29+
</Box>
30+
</Stack>
31+
))}
32+
</Stack>
33+
);
34+
}
35+
936
export const Highlight = ({ data }: HighlightProps) => {
1037
const { groups, displayedGroups, value } = useFormatHighlightValue({ data });
38+
const [tooltipOpen, setTooltipOpen] = useState(false);
1139

1240
if (displayedGroups.length === 0) {
1341
return <Value data={value} />;
1442
}
1543

1644
return (
17-
<Box
18-
component="mark"
19-
data-term={data?.attributes?.term}
20-
data-group={groups.join(" ")}
21-
data-underlined-group={displayedGroups.join(" ")}
22-
role="mark"
23-
sx={{
24-
color: "inherit",
25-
backgroundColor: "transparent",
26-
}}
27-
style={{
28-
boxShadow: displayedGroups
29-
.map((g, index) =>
30-
index === 0
31-
? `inset 0 -3px 0 ${chipColors[g as keyof typeof chipColors]}`
32-
: `0 ${index * 3}px 0 ${chipColors[g as keyof typeof chipColors]}`,
33-
)
34-
.join(", "),
45+
<Tooltip
46+
title={<HightlightCaption groups={displayedGroups} />}
47+
placement="top"
48+
slotProps={{
49+
tooltip: {
50+
sx: {
51+
backgroundColor: "white",
52+
color: "text.primary",
53+
padding: 2,
54+
border: (theme) => `1px solid ${theme.palette.divider}`,
55+
},
56+
},
3557
}}
58+
open={tooltipOpen}
3659
>
37-
<Value data={value} />
38-
</Box>
60+
<Box
61+
component="mark"
62+
data-term={data?.attributes?.term}
63+
data-group={groups.join(" ")}
64+
data-underlined-group={displayedGroups.join(" ")}
65+
role="mark"
66+
sx={{
67+
color: "inherit",
68+
backgroundColor: "transparent",
69+
}}
70+
style={{
71+
boxShadow: displayedGroups
72+
.map((g, index) =>
73+
index === 0
74+
? `inset 0 -3px 0 ${chipColors[g as keyof typeof chipColors]}`
75+
: `0 ${index * 3}px 0 ${chipColors[g as keyof typeof chipColors]}`,
76+
)
77+
.join(", "),
78+
}}
79+
onMouseOver={(e) => {
80+
e.stopPropagation();
81+
const target = e.target;
82+
if (!(target instanceof Element)) {
83+
return;
84+
}
85+
86+
// enters delay is not support in controlled state tooltips, so we implement it manually
87+
setTimeout(() => {
88+
if (!target.matches(":hover")) {
89+
return;
90+
}
91+
92+
setTooltipOpen(true);
93+
}, 500);
94+
}}
95+
onMouseOut={() => {
96+
setTooltipOpen(false);
97+
}}
98+
>
99+
<Value data={value} />
100+
</Box>
101+
</Tooltip>
39102
);
40103
};
41104

0 commit comments

Comments
 (0)