Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update reference list view component #878

Merged
merged 19 commits into from Sep 8, 2023
Merged

update reference list view component #878

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
b2fb62b
update reference component
caseyhans Aug 14, 2023
cbc6f22
style updates
caseyhans Aug 14, 2023
147a21e
updates
caseyhans Aug 14, 2023
9676963
regex fix
caseyhans Aug 16, 2023
cb5bafe
updates
caseyhans Aug 16, 2023
00f869a
updates
caseyhans Aug 16, 2023
ad44782
add test for regex escaping
caseyhans Aug 17, 2023
38d64e1
remove duplicate class
caseyhans Aug 22, 2023
23d3495
simplify some css?
shapiromatron Aug 22, 2023
c781313
updates
caseyhans Aug 22, 2023
07171bf
Merge branch 'main' into update-ref-comp
shapiromatron Sep 8, 2023
0d140a0
actions button on modal list
shapiromatron Sep 8, 2023
3d725d8
rename Imports to Source (may be search)
shapiromatron Sep 8, 2023
ca4fcfb
add journal to django reference template
shapiromatron Sep 8, 2023
c16a08b
open external links in new tabs; internal in same tab
shapiromatron Sep 8, 2023
f9639a9
css updates
shapiromatron Sep 8, 2023
1da726d
Merge branch 'main' into update-ref-comp
shapiromatron Sep 8, 2023
7ed9d88
lint
shapiromatron Sep 8, 2023
9f49dc7
Merge commit '1da726d524caabbee16e54cb9789799090cd8e5c' into update-r…
shapiromatron Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions frontend/lit/ReferenceTreeBrowse/Main.js
View file
Open in desktop
Expand Up @@ -60,21 +60,23 @@ class ReferenceTreeMain extends Component {

return (
<div className="row">
<div className="col-md-12 pb-2">
<div className="col-md-12 pb-3">
{store.untaggedReferencesSelected === true ? (
<h4>Untagged references</h4>
) : store.selectedTag === null ? (
<h4>Available references</h4>
) : (
<div className="d-flex">
<h4>
<h4 className="mb-0 align-self-center">
<span>
{selectedReferences && selectedReferences.length > 0
? `${filteredReferences.length} references tagged:`
: "References tagged:"}
</span>
</h4>
<span className="ml-2 refTag">{store.selectedTag.get_full_name()}</span>
<span className="mb-0 ml-2 refTag">
{store.selectedTag.get_full_name()}
</span>
<span>{yearText}</span>
<TagActions
assessmentId={store.config.assessment_id}
Expand Down
1 change: 1 addition & 0 deletions frontend/lit/TagReferences/Main.js
View file
Open in desktop
Expand Up @@ -182,6 +182,7 @@ class TagReferencesMain extends Component {
showTags={false}
showActionsTagless={true}
actionsBtnClassName={"btn-sm btn-secondary"}
expanded={true}
extraActions={[
<div
className="dropdown-item cursor-pointer"
Expand Down
6 changes: 3 additions & 3 deletions frontend/lit/components/PaginatedReferenceList.js
View file
Open in desktop
Expand Up @@ -67,15 +67,15 @@ class PaginatedReferenceList extends Component {
return (
<>
<div className="d-flex">
{formattedReferences ? (
<ReferenceTable references={formattedReferences} showActions={false} />
) : null}
<TagActions
assessmentId={settings.assessment_id}
tagId={settings.tag_id}
canEdit={canEdit}
/>
</div>
{formattedReferences ? (
<ReferenceTable references={formattedReferences} showActions={false} />
) : null}
<Paginator page={currentPage} onChangePage={fetchPage} />
</>
);
Expand Down
231 changes: 137 additions & 94 deletions frontend/lit/components/Reference.js
View file
Open in desktop
Expand Up @@ -7,21 +7,27 @@
import Hero from "shared/utils/Hero";
import {getReferenceTagListUrl} from "shared/utils/urls";

import ReferenceButton from "./ReferenceButton";

class Reference extends Component {
renderIdentifiers(data) {
state = {abstractExpanded: false};
toggleAbstract = () => {
this.setState({abstractExpanded: !this.state.abstractExpanded});
};
renderIdentifiers(data, study_url, expanded) {
const nodes = [];

const btn_size = expanded ? "" : "btn-tny";
if (data.full_text_url) {
nodes.push(
<ReferenceButton
<a
target="_blank"
rel="noopener noreferrer"
className="outline-btn mr-1 mb-1 flex-shrink-0"
href={data.full_text_url}
key={h.randomString()}
className={"btn btn-sm btn-primary"}
url={data.full_text_url}
displayText={"Full text link"}
textToCopy={data.full_text_url}
/>
rel="noreferrer">

Check failure on line 27 in frontend/lit/components/Reference.js

View workflow job for this annotation

GitHub Actions / frontend 

No duplicate props allowed
Full Text&nbsp;
<i className="fa fa-external-link" aria-hidden="true"></i>
</a>
);
}

Expand All @@ -30,44 +36,70 @@
.sortBy(v => v.database_id)
.each(v => {
nodes.push(
<ReferenceButton
key={h.randomString()}
className={"btn btn-sm btn-success"}
url={v.database === "HERO" ? Hero.getUrl(v.id) : v.url}
displayText={v.database}
textToCopy={v.id}
/>
<div className="btn-group mr-1 mb-1 flex-shrink-0" key={h.randomString()}>
<a
target="_blank"
rel="noopener noreferrer"
className={`btn outline-btn ${btn_size} rounded-left`}
href={v.database === "HERO" ? Hero.getUrl(v.id) : v.url}>
{v.database}
</a>
<div
className={`outline-btn ${btn_size} rounded-right font-weight-normal border-left-0`}>
{v.id}
</div>
</div>
);
})
.value();

nodes.push(
<ReferenceButton
key={h.randomString()}
className={"btn btn-sm btn-warning"}
url={data.url}
displayText={"HAWC"}
textToCopy={data.pk.toString()}
/>
<div className="btn-group mr-1 mb-1 flex-shrink-0" key={h.randomString()}>
<a className={`btn outline-btn ${btn_size} rounded-left`} href={data.url}>
<i className="fa fa-file-text" aria-hidden="true"></i>&nbsp;HAWC
</a>
<div
className={`outline-btn ${btn_size} ${
data.has_study ? "border-right-0" : "rounded-right"
} font-weight-normal border-left-0`}>
{data.pk.toString()}
</div>
{data.has_study ? (
<a
className={`btn outline-btn ${btn_size} rounded-right`}
href={study_url}
key={h.randomString()}>
<i className="fa fa-book" aria-hidden="true"></i>&nbsp;Study
</a>
) : null}
</div>
);

_.chain(data.identifiers)
.reject(v => v.url.length > 0 || v.database === "External link")
.sortBy(v => v.database_id)
.each(v => {
nodes.push(
<ReferenceButton
key={h.randomString()}
className={"btn btn-sm btn-secondary"}
url={v.url}
displayText={v.database}
textToCopy={v.id}
/>
);
})
.value();

return <div>{nodes}</div>;
if (data.searches.length) {
nodes.push(
<div
style={{minWidth: 85}}
className="d-flex dropdown flex-shrink-0"
key={h.randomString()}>
<a
className={`btn dropdown-toggle ${btn_size} outline-btn`}
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i className="fa fa-cloud-download" aria-hidden="true"></i>
&nbsp;Source
</a>
<div className="dropdown-menu dropdown-menu-right">
{data.searches.map((d, i) => (
<a className="dropdown-item small" key={h.randomString()} href={d.url}>
{d.title}
</a>
))}
</div>
</div>
);
}
return <div className={expanded ? "d-flex my-1 flex-wrap" : "d-flex my-1"}>{nodes}</div>;
}

render() {
Expand All @@ -80,56 +112,83 @@
actionsBtnClassName,
extraActions,
keywordDict,
expanded,
} = this.props,
{data, tags} = reference,
authors = data.authors || data.authors_short || reference.NO_AUTHORS_TEXT,
authors = !expanded
? data.authors_short || data.authors || reference.NO_AUTHORS_TEXT
: data.authors || data.authors_short || reference.NO_AUTHORS_TEXT,
year = data.year || "",
actionItems = [
<ActionLink key={0} label="Edit reference tags" href={data.editTagUrl} />,
<ActionLink key={1} label="Edit reference" href={data.editReferenceUrl} />,
<ActionLink key={2} label="Delete reference" href={data.deleteReferenceUrl} />,
<ActionLink key={3} label="Tag status" href={data.tagStatusUrl} />,
].concat(extraActions);
].concat(extraActions),
{abstractExpanded} = this.state;

return (
<div className="referenceDetail pb-2">
<div className={expanded ? "referenceDetail expanded" : "referenceDetail"}>
<div className="sticky-offset-anchor" id={`referenceId${data.pk}`}></div>
{
<div className="d-flex ref_small">
<span>
{authors}&nbsp;{year}
</span>
{showActionsTagless ? (
<ActionsButton
dropdownClasses={actionsBtnClassName}
items={actionItems.slice(1)}
/>
) : null}
{showActions ? (
<ActionsButton
dropdownClasses={actionsBtnClassName}
items={actionItems}
/>
) : null}
<div>
<div className="d-flex ref_small">
<div className="vw75 mb-2">
<span title={expanded ? null : data.authors}>
{authors}&nbsp;{year}
{year != "" && data.journal && !expanded ? ". " : ""}
<i>{data.journal && !expanded ? data.journal : null}</i>
</span>
</div>
{showActionsTagless ? (
<ActionsButton
dropdownClasses={actionsBtnClassName}
items={actionItems.slice(1)}
/>
) : null}
{showActions ? (
<ActionsButton
dropdownClasses={actionsBtnClassName}
items={actionItems}
/>
) : null}
</div>
<div className="vw75">
{data.title ? (
keywordDict ? (
<p
style={{lineHeight: 1.25, marginTop: "-5px"}}
className="ref_title mb-1"
dangerouslySetInnerHTML={{
__html: markKeywords(data.title, keywordDict),
}}
/>
) : (
<p
className="ref_title mb-1"
style={{lineHeight: 1.25, marginTop: "-5px"}}>
{data.title}
</p>
)
) : null}
{data.journal && expanded ? (
<p className="ref_small">{data.journal}</p>
) : null}
</div>
</div>
}
{data.title ? (
keywordDict ? (
<p
className="ref_title py-1"
dangerouslySetInnerHTML={{
__html: markKeywords(data.title, keywordDict),
}}
/>
) : (
<p className="ref_title py-1">{data.title}</p>
)
) : null}
{data.journal ? <p className="ref_small">{data.journal}</p> : null}
<div className="d-flex vw75">
{this.renderIdentifiers(data, reference.get_study_url(), expanded)}
</div>
{data.abstract ? (
<div
className="abstracts resize-y p-2"
style={data.abstract.length > 1500 ? {height: "45vh"} : null}
onClick={!expanded ? this.toggleAbstract : null}
className={
abstractExpanded
? "abstracts vw75"
: "abstracts abstract-collapsed vw75"
}
style={expanded ? {} : {}}
dangerouslySetInnerHTML={
keywordDict
? {__html: markKeywords(data.abstract, keywordDict)}
Expand All @@ -141,33 +200,15 @@
<p>
{tags.map((tag, i) => (
<a
style={{color: "white"}}
key={i}
href={getReferenceTagListUrl(data.assessment_id, tag.data.pk)}
className="refTag mt-1">
className="refTag tagLink mt-1">
{tag.get_full_name()}
</a>
))}
</p>
) : null}
{data.searches.length > 0 ? (
<p className="my-1">
<strong>HAWC searches/imports:</strong>
{data.searches.map((d, i) => (
<span className="badge badge-light mr-1" key={i}>
&nbsp;<a href={d.url}>{d.title}</a>
</span>
))}
</p>
) : null}
{data.has_study ? (
<p className="my-1">
<strong>HAWC study details:&nbsp;</strong>
<a href={reference.get_study_url()}>{data.study_short_citation}</a>
</p>
) : null}
{this.renderIdentifiers(data)}
{showHr ? <hr /> : null}
{showHr ? <hr className="my-4" /> : null}
</div>
);
}
Expand All @@ -182,6 +223,7 @@
showActionsTagless: PropTypes.bool,
extraActions: PropTypes.arrayOf(PropTypes.element),
keywordDict: PropTypes.object,
expanded: PropTypes.bool,
};

Reference.defaultProps = {
Expand All @@ -192,6 +234,7 @@
showActionsTagsless: false,
extraActions: null,
keywordDict: null,
expanded: false,
};

export default Reference;
25 changes: 0 additions & 25 deletions frontend/lit/components/ReferenceButton.js
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions frontend/lit/index.js
View file
Open in desktop
Expand Up @@ -27,6 +27,7 @@ export default {
options = {
showActions: config.canEdit,
actionsBtnClassName: "btn-primary",
expanded: true,
};

ReactDOM.render(<ReferenceComponent reference={ref} {...options} />, el);
Expand Down