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

Add external links #1763

Merged
merged 4 commits into from
Apr 12, 2024
Merged

Add external links #1763

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fd77a61
Separate Modal component from modal contents
jameshadfield Apr 8, 2024
343ca32
Add link-out modal UI
jameshadfield Apr 9, 2024
767be39
Add Taxonium link-out
jameshadfield Apr 9, 2024
39b4ec6
Add MicrobeTrace linkout
jameshadfield Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/actions/types.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading
Loading