Skip to content

Commit 75a22e0

Browse files
jliermannjliermann
authored
Merge pull request #394 from tilfischer/main
feat: lbe details open by default
2 parents 4845986 + 29c962e commit 75a22e0

File tree

7 files changed

+385
-149
lines changed

7 files changed

+385
-149
lines changed

‎src/components/commons/ShortenDesc.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { useState } from "react";
2+
3+
// shorten the description of the experiment up to the next blank, comma or period after 100 characters
4+
5+
function ShortenDesc({ desc, length }) {
6+
const [collapsed, setCollapsed] = useState(true);
7+
8+
if (desc.length <= length) {
9+
return <React.Fragment>{desc}</React.Fragment>;
10+
}
11+
12+
return (
13+
<React.Fragment>
14+
{collapsed ? (
15+
<span
16+
title={desc}
17+
onClick={() => setCollapsed(!collapsed)}
18+
style={{ cursor: "pointer" }}
19+
>
20+
{desc.slice(0, length) +
21+
desc.slice(length).split(/[\s,\.]/)[0] +
22+
" ..."}
23+
24+
<button className="lbe__block__author-trigger">
25+
expand &#9660;
26+
</button>
27+
</span>
28+
) : (
29+
<span
30+
onClick={() => setCollapsed(!collapsed)}
31+
style={{ cursor: "pointer" }}
32+
>
33+
{desc}
34+
<button className="lbe__block__author-trigger">
35+
collapse &#9650;
36+
</button>
37+
</span>
38+
)}
39+
</React.Fragment>
40+
);
41+
}
42+
43+
export default ShortenDesc;

‎src/components/lbe/FilterSection.js

+66-21
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,78 @@
11
import React from "react";
22

3-
43
// Custom functions
54

65
import { TextSearch, FilterButton } from "./LbeElements.js";
76

8-
97
// Assemble buttons for filtering section
108

11-
function LbeButtons( {repos, subdiscs, journals, lbeState, setLbeState} ) {
12-
return(
13-
<React.Fragment>
14-
<div className="lbe__searchfilter__section"><h4>Filter by repositories</h4><p>{repos.map((props, idx) => <FilterButton key={idx} name={props} type="repo" numbered={true} {...{lbeState, setLbeState}} />)}</p></div>
15-
<div className="lbe__searchfilter__section"><h4>Filter by subdisciplines</h4><p>{subdiscs.map((props, idx) => <FilterButton key={idx} name={props} type="subd" numbered={true} {...{lbeState, setLbeState}} />)}</p></div>
16-
<div className="lbe__searchfilter__section"><h4>Filter by journals</h4><p>{journals.map((props, idx) => <FilterButton key={idx} name={props} type="journal" numbered={true} {...{lbeState, setLbeState}} />)}</p></div>
17-
</React.Fragment>
18-
)
9+
function LbeButtons({ repos, subdiscs, journals, lbeState, setLbeState }) {
10+
return (
11+
<React.Fragment>
12+
<div className="lbe__searchfilter__section">
13+
<h4>Filter by repositories</h4>
14+
<p>
15+
{repos.map((props, idx) => (
16+
<FilterButton
17+
key={idx}
18+
name={props}
19+
type="repo"
20+
numbered={true}
21+
{...{ lbeState, setLbeState }}
22+
/>
23+
))}
24+
</p>
25+
</div>
26+
<div className="lbe__searchfilter__section">
27+
<h4>Filter by subdisciplines</h4>
28+
<p>
29+
{subdiscs.map((props, idx) => (
30+
<FilterButton
31+
key={idx}
32+
name={props}
33+
type="subd"
34+
numbered={true}
35+
{...{ lbeState, setLbeState }}
36+
/>
37+
))}
38+
</p>
39+
</div>
40+
<div className="lbe__searchfilter__section">
41+
<h4>Filter by journals</h4>
42+
<p>
43+
{journals.map((props, idx) => (
44+
<FilterButton
45+
key={idx}
46+
name={props}
47+
type="journal"
48+
numbered={true}
49+
{...{ lbeState, setLbeState }}
50+
/>
51+
))}
52+
</p>
53+
</div>
54+
</React.Fragment>
55+
);
1956
}
2057

21-
function FilterSection( {repos, subdiscs, journals, lbeState, setLbeState, resultOutput} ) {
22-
23-
return(
24-
<div className="lbe__searchfilter">
25-
<div className="lbe__searchfilter__container">
26-
<TextSearch {...{lbeState,setLbeState,resultOutput}} />
27-
<LbeButtons {...{repos, subdiscs, journals, lbeState, setLbeState}} />
28-
</div>
29-
</div>
30-
)
58+
function FilterSection({
59+
repos,
60+
subdiscs,
61+
journals,
62+
lbeState,
63+
setLbeState,
64+
resultOutput,
65+
}) {
66+
return (
67+
<div className="lbe__searchfilter">
68+
<div className="lbe__searchfilter__container">
69+
<TextSearch {...{ lbeState, setLbeState, resultOutput }} />
70+
<LbeButtons
71+
{...{ repos, subdiscs, journals, lbeState, setLbeState }}
72+
/>
73+
</div>
74+
</div>
75+
);
3176
}
3277

33-
export default FilterSection;
78+
export default FilterSection;

‎src/components/lbe/LbeBody.js

+76-35
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,107 @@
11
import React from "react";
22

3-
43
// Custom functions
54

65
import { RepoButton, FilterButton } from "./LbeElements.js";
76
import Authors from "./Authors.js";
8-
7+
import ShortenDesc from "../commons/ShortenDesc.js";
8+
import ShortenButtons from "./ShortenButtons.js";
99

1010
// Function for single lbe dataset block
1111

12-
function LbeBlock( { title, authors, journal, pubyear, linkpub, linkdata, linkcomment, description, lbeState, setLbeState } ) {
13-
12+
function LbeBlock({
13+
title,
14+
authors,
15+
journal,
16+
pubyear,
17+
linkpub,
18+
linkdata,
19+
linkcomment,
20+
description,
21+
lbeState,
22+
setLbeState,
23+
}) {
1424
// Extract DOI from link by cutting right of "doi.org"
15-
var doi = linkpub.slice(linkpub.indexOf("doi.org")+8);
25+
var doi = linkpub.slice(linkpub.indexOf("doi.org") + 8);
1626

1727
// Define set of repos in this dataset
18-
var myRepos = Array.from(new Set(linkdata.map(obj => obj.name))).flat().sort((a, b) => a.localeCompare(b, undefined, {sensitivity: 'base'}));
28+
var myRepos = Array.from(new Set(linkdata.map((obj) => obj.name)))
29+
.flat()
30+
.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
1931

20-
return (
32+
return (
2133
<div className="lbe__block">
2234
<div className="lbe__block__header">
23-
<div className="lbe__block__header__title"><h3>{title}</h3></div>
24-
<div className="lbe__block__header__link"><RepoButton name="Permalink" url={"./?doi=".concat(doi)} /></div>
35+
<div className="lbe__block__header__title">
36+
<h3>{title}</h3>
37+
</div>
38+
<div className="lbe__block__header__link">
39+
<RepoButton name="Permalink" url={"./?doi=".concat(doi)} />
40+
</div>
2541
</div>
2642

27-
<p><em><Authors {...{authors}} length={10} /></em></p>
43+
<p>
44+
<em>
45+
<Authors {...{ authors }} length={10} />
46+
</em>
47+
</p>
2848

29-
<p><em>{journal}</em> <strong>{pubyear}</strong>, DOI: <a href={linkpub} target="_blank">{doi}</a>.</p>
49+
<p>
50+
<em>{journal}</em> <strong>{pubyear}</strong>, DOI:{" "}
51+
<a href={linkpub} target="_blank">
52+
{doi}
53+
</a>
54+
.
55+
</p>
3056

31-
<p>{myRepos.map((m,idx) =>
32-
<FilterButton key={idx} name={m} type="repo" numbered={false} {...{lbeState, setLbeState}} />
33-
)}
57+
<p>
58+
{myRepos.map((m, idx) => (
59+
<FilterButton
60+
key={idx}
61+
name={m}
62+
type="repo"
63+
numbered={false}
64+
funnel
65+
title={"Filter datasets from " + m}
66+
{...{ lbeState, setLbeState }}
67+
/>
68+
))}
3469
</p>
3570

36-
<details className="lbe__details">
37-
<summary>Details</summary>
38-
<div className="lbe__details--collapsible">
39-
<h4>Description</h4>
40-
<p>{description}</p>
71+
<hr className="lbe__block__hr" />
4172

42-
<h4>Links to datasets</h4>
43-
<p>{linkdata.map((props, idx) => (
73+
<details className="lbe__details" open={description.length <= 100}>
74+
<summary>Description</summary>
75+
<p>{description}</p>
76+
</details>
77+
78+
<hr className="lbe__block__hr" />
79+
80+
<details className="lbe__details" open={linkdata.length <= 3}>
81+
<summary>Links to datasets</summary>
82+
<p>
83+
{linkdata.map((props, idx) => (
4484
<RepoButton key={idx} {...props} />
45-
))}</p>
46-
<p><em>{linkcomment}</em></p>
47-
</div>
85+
))}
86+
</p>
87+
<p>
88+
<em>{linkcomment}</em>
89+
</p>
4890
</details>
4991
</div>
50-
);
92+
);
5193
}
5294

53-
5495
// Render LBE entry list
5596

56-
function LbeBody( { list, lbeState, setLbeState } ) {
57-
return(
58-
<div className="lbe__body">
59-
{list.map((props, idx) => (
60-
<LbeBlock key={idx} {...props} {...{lbeState, setLbeState}} />
61-
))}
62-
</div>
63-
)
97+
function LbeBody({ list, lbeState, setLbeState }) {
98+
return (
99+
<div className="lbe__body">
100+
{list.map((props, idx) => (
101+
<LbeBlock key={idx} {...props} {...{ lbeState, setLbeState }} />
102+
))}
103+
</div>
104+
);
64105
}
65106

66-
export default LbeBody;
107+
export default LbeBody;

0 commit comments

Comments
 (0)