Skip to content

Commit d387347

Browse files
author
Alexandra Shubenko
committed
refactor Languages in context line
1 parent dc55cbd commit d387347

5 files changed

Lines changed: 182 additions & 77 deletions

File tree

‎examples/project_website/base.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
})
6767
</script>
6868

69-
69+
7070
<link rel="stylesheet" href="../../dist/headstart.css">
7171

7272
<script>
@@ -93,7 +93,9 @@
9393
//title: "fake news",
9494
//title: "dotcom",
9595
//title: "cognitive dissonance",
96-
file: "./data/digital-education.json",
96+
// file: "./data/digital-education.json",
97+
// file: "./data/digital-education-lang.json",
98+
file: "./data/digital-education-lang[].json",
9799
//file: "./data/calcium.json",
98100
//file: "./data/production.json",
99101
//file: "./data/digital-education-sg.json",
@@ -130,4 +132,4 @@
130132
</script>
131133
<!-- End Matomo Code -->
132134

133-
</html>
135+
</html>

‎examples/project_website/data/digital-education-lang.json‎

Lines changed: 10 additions & 0 deletions
Large diffs are not rendered by default.

‎examples/project_website/data/digital-education-lang[].json‎

Lines changed: 10 additions & 0 deletions
Large diffs are not rendered by default.

‎vis/js/components/ContextLine.js‎

Lines changed: 66 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -38,76 +38,75 @@ class ContextLine extends React.Component {
3838

3939
return (
4040
<ContextLineTemplate>
41-
{params.showAuthor && (
42-
<Author
43-
bioLabel={localization.bio_link}
44-
livingDates={params.author.livingDates}
45-
link={"https://d-nb.info/gnd/" + params.author.id}
41+
{params.showAuthor && (
42+
<Author
43+
bioLabel={localization.bio_link}
44+
livingDates={params.author.livingDates}
45+
link={"https://d-nb.info/gnd/" + params.author.id}
46+
/>
47+
)}
48+
<NumArticles
49+
articlesCount={params.articlesCount}
50+
openAccessArticlesCount={params.openAccessCount}
51+
articlesCountLabel={localization.articles_label}
52+
>
53+
<Modifier popoverContainer={popoverContainer}/>
54+
</NumArticles>
55+
{defined(params.dataSource) && (
56+
<DataSource
57+
label={localization.source_label}
58+
source={params.dataSource}
59+
contentProvider={params.contentProvider}
60+
popoverContainer={this.props.popoverContainer}
61+
/>
62+
)}
63+
{defined(params.timespan) &&
64+
<Timespan>
65+
<ContextTimeFrame popoverContainer={popoverContainer} timespan={params.timespan}/>
66+
</Timespan>}
67+
<DocumentTypes
68+
documentTypes={params.documentTypes}
69+
popoverContainer={popoverContainer}
4670
/>
47-
)}
48-
<NumArticles
49-
articlesCount={params.articlesCount}
50-
openAccessArticlesCount={params.openAccessCount}
51-
articlesCountLabel={localization.articles_label}
52-
>
53-
<Modifier popoverContainer={popoverContainer} />
54-
</NumArticles>
55-
{defined(params.dataSource) && (
56-
<DataSource
57-
label={localization.source_label}
58-
source={params.dataSource}
59-
contentProvider={params.contentProvider}
60-
popoverContainer={this.props.popoverContainer}
71+
{/* was an issue to left "All Languages" as default value in the context if no lang_id in parameters */}
72+
<DocumentLang
73+
value={params.documentLang}
74+
popoverContainer={popoverContainer}
6175
/>
62-
)}
63-
{defined(params.timespan) &&
64-
<Timespan>
65-
<ContextTimeFrame popoverContainer={popoverContainer} timespan={params.timespan}/>
66-
</Timespan>}
67-
<DocumentTypes
68-
documentTypes={params.documentTypes}
69-
popoverContainer={popoverContainer}
70-
/>
71-
{/* place for document Lang */}
72-
{defined(params.documentLang) && (
73-
<DocumentLang
74-
value={params.documentLang}
75-
/>
76-
)}
77-
{defined(params.paperCount) && (
78-
<PaperCount
79-
value={params.paperCount}
80-
label={localization.paper_count_label}
76+
{defined(params.paperCount) && (
77+
<PaperCount
78+
value={params.paperCount}
79+
label={localization.paper_count_label}
80+
/>
81+
)}
82+
{defined(params.datasetCount) && (
83+
<DatasetCount
84+
value={params.datasetCount}
85+
label={localization.dataset_count_label}
86+
/>
87+
)}
88+
{defined(params.funder) && <Funder>{params.funder}</Funder>}
89+
{defined(params.projectRuntime) && (
90+
<ProjectRuntime>{params.projectRuntime}</ProjectRuntime>
91+
)}
92+
{defined(params.legacySearchLanguage) && (
93+
<LegacySearchLang>{params.legacySearchLanguage}</LegacySearchLang>
94+
)}
95+
{defined(params.timestamp) && (
96+
<Timestamp
97+
value={params.timestamp}
98+
label={localization.timestamp_label}
99+
/>
100+
)}
101+
<MetadataQuality
102+
quality={params.metadataQuality}
103+
service={service}
104+
popoverContainer={popoverContainer}
81105
/>
82-
)}
83-
{defined(params.datasetCount) && (
84-
<DatasetCount
85-
value={params.datasetCount}
86-
label={localization.dataset_count_label}
87-
/>
88-
)}
89-
{defined(params.funder) && <Funder>{params.funder}</Funder>}
90-
{defined(params.projectRuntime) && (
91-
<ProjectRuntime>{params.projectRuntime}</ProjectRuntime>
92-
)}
93-
{defined(params.legacySearchLanguage) && (
94-
<LegacySearchLang>{params.legacySearchLanguage}</LegacySearchLang>
95-
)}
96-
{defined(params.timestamp) && (
97-
<Timestamp
98-
value={params.timestamp}
99-
label={localization.timestamp_label}
100-
/>
101-
)}
102-
<MetadataQuality
103-
quality={params.metadataQuality}
104-
service={service}
105-
popoverContainer={popoverContainer}
106-
/>
107-
{defined(params.searchLanguage) && (
108-
<SearchLang>{params.searchLanguage}</SearchLang>
109-
)}
110-
<MoreInfoLink />
106+
{defined(params.searchLanguage) && (
107+
<SearchLang>{params.searchLanguage}</SearchLang>
108+
)}
109+
<MoreInfoLink/>
111110
</ContextLineTemplate>
112111
);
113112
}

‎vis/js/templates/contextfeatures/DocumentLang.jsx‎

Lines changed: 91 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,101 @@
11
import React from "react";
22
import {LangOptions} from "../../lang/lang_options.js";
3+
import useMatomo from "../../utils/useMatomo";
4+
import HoverPopover from "../HoverPopover";
35

4-
const DocumentLang = ({value}) => {
56

6-
const lang = LangOptions.filter((item) => item.id === value && item)[0].label
7+
const DocumentLang = ({value, popoverContainer}) => {
8+
9+
const {trackEvent} = useMatomo();
10+
11+
// was an issue to left "All Languages" as default value in the context if no lang_id in parameters
12+
value = value || 'all-lang' // Default value for value parameter
13+
14+
// popover messages
15+
const allLangMessage = "All languages were taken into consideration in the creation of this visualisation. Please note " +
16+
"that not all of them may appear in the visualisation. ";
17+
const multLangMessage = "The following languages were taken into consideration in the creation of this visualisation. " +
18+
"Please note that not all of them may appear in the visualisation: ";
19+
20+
21+
let lang = ''
22+
let lang_list = null
23+
let popoverText = ''
24+
25+
// exists 2 types: string and object in lang_id parameter
26+
if (typeof value === 'string') {
27+
const selectedLangOption = LangOptions.find(langOption => langOption.id === value);
28+
lang = selectedLangOption ? selectedLangOption.label : '';
29+
popoverText = (value === 'all-lang') ? allLangMessage : (lang.length > 10 && selectedLangOption?.label) || '';
30+
if (lang.length > 10) {
31+
lang = cutString(lang, 10);
32+
}
33+
}
34+
35+
if (Array.isArray(value)) {
36+
if (value.length === 1 && value[0] === 'all-lang') {
37+
popoverText = allLangMessage;
38+
lang = LangOptions.filter((item) => item.id === value[0] && item)[0].label
39+
} else if (value.length === 1) {
40+
lang = LangOptions.filter((item) => item.id === value[0] && item)[0].label
41+
popoverText = lang.length > 10 ? lang : '';
42+
if (lang.length > 10) {
43+
lang = cutString(lang, 10);
44+
}
45+
} else {
46+
lang = "Languages";
47+
lang_list = value
48+
.map(langId => LangOptions.find(langOption => langOption.id === langId)?.label)
49+
.join(', ');
50+
popoverText = multLangMessage;
51+
}
52+
}
53+
54+
const trackMouseEnter = () =>
55+
trackEvent("Title & Context line", "Hover languages", "Context line");
756

857
return (
9-
// html template starts here
10-
<span id="document_lang" className="context_item">
11-
{lang}
12-
</span>
13-
// html template ends here
58+
<>
59+
{popoverText
60+
// if multiple languages were selected, then show popover
61+
? <span
62+
id="document_types"
63+
className="context_item"
64+
onMouseEnter={trackMouseEnter}
65+
>
66+
<HoverPopover
67+
id="lang-popover"
68+
size="wide"
69+
container={popoverContainer}
70+
content={
71+
<>
72+
{popoverText}
73+
{lang_list ?
74+
<div style={{marginTop: '15px'}}>{lang_list}</div>
75+
: null
76+
}
77+
</>
78+
}
79+
>
80+
<span className="context_moreinfo">{lang}</span>
81+
</HoverPopover>
82+
</span>
83+
84+
// if only one language with label length < 10 was selected, show it without popover
85+
: <span id="document_lang" className="context_item">
86+
{lang}
87+
</span>
88+
}
89+
</>
1490
);
1591
};
1692

1793
export default DocumentLang;
94+
95+
// cutString function for shortening long language names
96+
export function cutString(str, length) {
97+
if (str.length > length) {
98+
return str.substring(0, length) + '...';
99+
}
100+
return str;
101+
}

0 commit comments

Comments
 (0)