Skip to content

Commit

Permalink
Merge pull request #1763 from nextstrain/external-links
Browse files Browse the repository at this point in the history 
Add external link-outs
  • Loading branch information
@jameshadfield
jameshadfield committed Apr 12, 2024
2 parents d38af86 + 39b4ec6 commit a40c340
Show file tree
Hide file tree
Showing 7 changed files with 403 additions and 127 deletions.
3 changes: 1 addition & 2 deletions src/actions/types.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ export const ADD_NOTIFICATION = "ADD_NOTIFICATION";
export const REMOVE_NOTIFICATION = "REMOVE_NOTIFICATION";
export const CHANGE_PANEL_LAYOUT = "CHANGE_PANEL_LAYOUT";
export const TOGGLE_PANEL_DISPLAY = "TOGGLE_PANEL_DISPLAY";
export const TRIGGER_DOWNLOAD_MODAL = "TRIGGER_DOWNLOAD_MODAL";
export const DISMISS_DOWNLOAD_MODAL = "DISMISS_DOWNLOAD_MODAL";
export const SET_MODAL = "SET_MODAL";
export const ADD_EXTRA_METADATA = "ADD_EXTRA_METADATA";
export const CHANGE_TREE_ROOT_IDX = "CHANGE_TREE_ROOT_IDX";
export const TOGGLE_NARRATIVE = "TOGGLE_NARRATIVE";
Expand Down
145 changes: 34 additions & 111 deletions src/components/download/downloadModal.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import React from "react";
import Mousetrap from "mousetrap";
import { connect } from "react-redux";
import { withTranslation } from 'react-i18next';
import { TRIGGER_DOWNLOAD_MODAL, DISMISS_DOWNLOAD_MODAL } from "../../actions/types";
import { infoPanelStyles } from "../../globalStyles";
import { stopProp } from "../tree/infoPanels/click";
import { getAcknowledgments} from "../framework/footer";
import { datasetSummary } from "../info/datasetSummary";
import { DownloadButtons } from "./downloadButtons";
Expand Down Expand Up @@ -43,7 +40,6 @@ export const publications = {

@connect((state) => ({
browserDimensions: state.browserDimensions.browserDimensions,
show: state.controls.showDownload,
colorBy: state.controls.colorBy,
distanceMeasure: state.controls.distanceMeasure,
metadata: state.metadata,
Expand All @@ -54,58 +50,7 @@ export const publications = {
panelsToDisplay: state.controls.panelsToDisplay,
panelLayout: state.controls.panelLayout
}))
class DownloadModal extends React.Component {
constructor(props) {
super(props);
this.getStyles = (bw, bh) => {
return {
behind: { /* covers the screen */
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
pointerEvents: "all",
zIndex: 2000,
backgroundColor: "rgba(80, 80, 80, .20)",
display: "flex",
justifyContent: "center",
alignItems: "center",
wordWrap: "break-word",
wordBreak: "break-word"
},
title: {
fontWeight: 500,
fontSize: 32,
marginTop: "20px",
marginBottom: "20px"
},
secondTitle: {
fontWeight: 500,
marginTop: "0px",
marginBottom: "20px"
},
modal: {
marginLeft: 200,
marginTop: 130,
width: bw - (2 * 200),
height: bh - (2 * 130),
borderRadius: 2,
backgroundColor: "rgba(250, 250, 250, 1)",
overflowY: "auto"
},
break: {
marginBottom: "10px"
}
};
};
this.dismissModal = this.dismissModal.bind(this);
}
componentDidMount() {
Mousetrap.bind('d', () => {
this.props.dispatch({type: this.props.show ? DISMISS_DOWNLOAD_MODAL : TRIGGER_DOWNLOAD_MODAL});
});
}
class DownloadModalContents extends React.Component {
getRelevantPublications() {
const x = [publications.nextstrain, publications.treetime];
if (["cTiter", "rb", "ep", "ne"].indexOf(this.props.colorBy) !== -1) {
Expand All @@ -128,75 +73,53 @@ class DownloadModal extends React.Component {
</span>
);
}
dismissModal() {
this.props.dispatch({ type: DISMISS_DOWNLOAD_MODAL });
}
render() {
const { t } = this.props;

if (!this.props.show) {
return null;
}
const panelStyle = {...infoPanelStyles.panel};
panelStyle.width = this.props.browserDimensions.width * 0.66;
panelStyle.maxWidth = panelStyle.width;
panelStyle.maxHeight = this.props.browserDimensions.height * 0.66;
panelStyle.fontSize = 14;
panelStyle.lineHeight = 1.4;

const { t, metadata } = this.props;
const relevantPublications = this.getRelevantPublications();

const meta = this.props.metadata;
return (
<div style={infoPanelStyles.modalContainer} onClick={this.dismissModal}>
<div style={panelStyle} onClick={(e) => stopProp(e)}>
<p style={infoPanelStyles.topRightMessage}>
({t("click outside this box to return to the app")})
</p>

<div style={infoPanelStyles.modalSubheading}>
{meta.title} ({t("last updated")} {meta.updated})
</div>
<>
<div style={infoPanelStyles.modalSubheading}>
{metadata.title} ({t("last updated")} {metadata.updated})
</div>

<div>
{datasetSummary({
mainTreeNumTips: this.props.metadata.mainTreeNumTips,
nodes: this.props.nodes,
visibility: this.props.visibility,
t: this.props.t
})}
</div>
<div style={infoPanelStyles.break}/>
{" " + t("A full list of sequence authors is available via the TSV files below")}
<div style={infoPanelStyles.break}/>
{getAcknowledgments({}, {preamble: {fontWeight: 300}, acknowledgments: {fontWeight: 300}})}
<div>
{datasetSummary({
mainTreeNumTips: this.props.metadata.mainTreeNumTips,
nodes: this.props.nodes,
visibility: this.props.visibility,
t: this.props.t
})}
</div>
<div style={infoPanelStyles.break}/>
{" " + t("A full list of sequence authors is available via the TSV files below")}
<div style={infoPanelStyles.break}/>
{getAcknowledgments({}, {preamble: {fontWeight: 300}, acknowledgments: {fontWeight: 300}})}

<div style={infoPanelStyles.modalSubheading}>
{t("Data usage policy")}
</div>
{t("Data usage part 1") + " " + t("Data usage part 2")}
<div style={infoPanelStyles.modalSubheading}>
{t("Data usage policy")}
</div>
{t("Data usage part 1") + " " + t("Data usage part 2")}

<div style={infoPanelStyles.modalSubheading}>
{t("Please cite the authors who contributed genomic data (where relevant), as well as")+":"}
</div>
{this.formatPublications(relevantPublications)}
<div style={infoPanelStyles.modalSubheading}>
{t("Please cite the authors who contributed genomic data (where relevant), as well as")+":"}
</div>
{this.formatPublications(relevantPublications)}


<div style={infoPanelStyles.modalSubheading}>
{t("Download data")}:
</div>
<div style={{display: "block", justifyContent: "space-around", marginLeft: "25px", width: "100%" }}>
<div style={{ width: "100%" }}>
<DownloadButtons {...this.props} relevantPublications={relevantPublications}/>
</div>
<div style={infoPanelStyles.modalSubheading}>
{t("Download data")}:
</div>
<div style={{display: "block", justifyContent: "space-around", marginLeft: "25px", width: "100%" }}>
<div style={{ width: "100%" }}>
<DownloadButtons {...this.props} relevantPublications={relevantPublications}/>
</div>
</div>
</div>
</>
);
}
}


const WithTranslation = withTranslation()(DownloadModal);
const WithTranslation = withTranslation()(DownloadModalContents);
export default WithTranslation;

29 changes: 24 additions & 5 deletions src/components/framework/fine-print.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import React, { Suspense, lazy } from "react";
import { connect } from "react-redux";
import styled from 'styled-components';
import { withTranslation } from "react-i18next";
import { FaDownload } from "react-icons/fa";
import { FaDownload, FaExternalLinkSquareAlt } from "react-icons/fa";
import { dataFont, medGrey, materialButton } from "../../globalStyles";
import { TRIGGER_DOWNLOAD_MODAL } from "../../actions/types";
import { SET_MODAL } from "../../actions/types";
import Flex from "./flex";
import { version } from "../../version";
import { publications } from "../download/downloadModal";
import { hasExtension, getExtension } from "../../util/extensions";
import { canShowLinkOuts } from "../modal/LinkOutModalContents.jsx";

const logoPNG = require("../../images/favicon.png");

Expand Down Expand Up @@ -82,10 +83,22 @@ class FinePrint extends React.Component {
return (
<button
style={Object.assign({}, materialButton, {backgroundColor: "rgba(0,0,0,0)", color: medGrey, margin: 0, padding: 0})}
onClick={() => { this.props.dispatch({ type: TRIGGER_DOWNLOAD_MODAL }); }}
onClick={() => { this.props.dispatch({ type: SET_MODAL, modal: "download" }); }}
>
<FaDownload />
<span style={{position: "relative"}}>{" "+t("Download data")}</span>
<span style={{position: "relative", paddingLeft: '3px'}}>{" "+t("Download data")}</span>
</button>
);
}
linkOutButton() {
const { t } = this.props;
return (
<button
style={Object.assign({}, materialButton, {backgroundColor: "rgba(0,0,0,0)", color: medGrey, margin: 0, padding: 0})}
onClick={() => { this.props.dispatch({ type: SET_MODAL, modal: "linkOut" }); }}
>
<FaExternalLinkSquareAlt />
<span style={{position: "relative", paddingLeft: '3px'}}>{" "+t("View in other platforms")}</span>
</button>
);
}
Expand All @@ -96,10 +109,16 @@ class FinePrint extends React.Component {
return (
<FinePrintStyles>
<div style={{width: width}}>
<Flex className='finePrint'>
<Flex className='finePrint' wrap='wrap'>
{this.getUpdated()}
{dot}
{this.downloadDataButton()}
{canShowLinkOuts() && (
<>
{dot}
{this.linkOutButton()}
</>
)}
{dot}
<a href="https://docs.nextstrain.org/projects/auspice/page/releases/changelog.html" target="_blank" rel="noreferrer noopener">
{"Auspice v" + version}
Expand Down
4 changes: 2 additions & 2 deletions src/components/main/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Tree from "../tree";
import Map from "../map/map";
import Footer from "../framework/footer";
import FinePrint from "../framework/fine-print";
import DownloadModal from "../download/downloadModal";
import Modal from "../modal/Modal.jsx";
import { analyticsNewPage } from "../../util/googleAnalytics";
import handleFilesDropped from "../../actions/filesDropped";
import { TOGGLE_SIDEBAR } from "../../actions/types";
Expand Down Expand Up @@ -134,7 +134,7 @@ class Main extends React.Component {
<AnimationController/>
<ErrorBoundary showNothing>
<ThemeProvider theme={sidebarTheme}>
<DownloadModal/>
<Modal/>
</ThemeProvider>
</ErrorBoundary>
<SidebarToggle
Expand Down

0 comments on commit a40c340

Please sign in to comment.