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

Add file picker to splash page #77

Merged
merged 4 commits into from
Dec 28, 2023
Merged

Add file picker to splash page #77

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
3ce34c4
Use consistent code style
victorlin Dec 26, 2023
9329e0f
Remove unused datasetLink function
victorlin Dec 14, 2023
47e07a8
splash: Convert to a functional component
victorlin Dec 14, 2023
0db85e4
Add file picker to splash page
victorlin Dec 14, 2023
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
206 changes: 99 additions & 107 deletions auspice_client_customisation/splash.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,124 +1,116 @@
import React from "react";
import { handleDroppedFiles } from "./handleDroppedFiles";
import { P, Bold, Title, NextstrainTitle, CenterContent, Line, GitHub } from './styles';
import { P, Bold, Title, UploadBox, UploadButton, CenterContent, Line, NextstrainTitle, GitHub } from './styles';
import pkg from "../package.json";


class SplashContent extends React.Component {
constructor(props) {
super(props);
this.handleDrop = this.handleDrop.bind(this);
}
componentDidMount() {
document.addEventListener("dragover", this.handleDragover, false);
document.addEventListener("drop", this.handleDrop, false);
}
const SplashContent = (props) => {
React.useEffect(() => {
document.addEventListener("dragover", handleDragover, false);
document.addEventListener("drop", handleDrop, false);

componentWillUnmount() {
console.log("Removing auspice.us event listeners");
document.removeEventListener("dragover", this.handleDragover, false);
document.removeEventListener("drop", this.handleDrop, false);
}
return () => {
console.log("Removing auspice.us event listeners");
document.removeEventListener("dragover", handleDragover, false);
document.removeEventListener("drop", handleDrop, false);
};
}, []);

handleDragover (event) {
function handleDragover(event) {
event.preventDefault();
}

handleDrop (event) {
function handleDrop(event) {
event.preventDefault();
handleDroppedFiles(this.props.dispatch, event.dataTransfer.files);
handleDroppedFiles(props.dispatch, event.dataTransfer.files);
}

datasetLink(path) {
return (
<div
style={{color: "#5097BA", textDecoration: "none", cursor: "pointer", fontWeight: "400", fontSize: "94%"}}
onClick={() => this.props.dispatch(this.props.changePage({path, push: true}))}
>
{path}
</div>
);
}
render() {
return (
<div className="static container">

<CenterContent>
<Title>auspice.us</Title>
<P>
<Bold>
{`auspice.us allows interactive exploration of phylogenomic datasets by simply dragging & dropping them onto this page.`}
</Bold>
</P>
<P>
<Bold>Privacy: </Bold>
{`Your dataset is visualised client-side in the browser -- no data is transmitted, and no tracking cookies are used.
The only data downloaded from the internet is the visualisation (JavaScript) code, fonts and any map tiles needed.
This makes auspice.us appropriate to view datasets with sensitive information.`}
</P>
</CenterContent>

<CenterContent>
<Line/>
<h2 style={{color: "#30353f", fontSize: 24}}>{`Drag & Drop a dataset on here to view`}</h2>
<Line/>
</CenterContent>


<CenterContent>
<P>
Currently supported files:
<ul>
<li>Auspice datasets (a main JSON plus any sidecars). See the
<a href="https://nextstrain.org/docs/bioinformatics/introduction-to-augur"> Nextstrain docs </a>
for how to run the bioinformatics tools to generate these datasets.
Note that it's possible to drag on multiple datasets, however at most two will be loaded, and it's not possible to control the ordering of these datasets!
</li>
<li>A nextstrain narrative and associated datasets (JSONs) - see the
<a href="https://docs.nextstrain.org/en/latest/tutorials/narratives-how-to-write.html"> Nextstrain docs </a>
for how author a narrative. Each dataset the narrative references should have a filename which is the
<a href="https://en.wikipedia.org/wiki/URL"> URL path</a> but with forward slashes replaced with underscores ("/"→"_") and a ".json" suffix.
Only one narrative can be dropped on at a time!
</li>
<li>
A phylogenetic tree in
<a href="https://en.wikipedia.org/wiki/Newick_format"> Newick format</a>
</li>
<li>
Additional metadata as a CSV/TSV (drop this on once the tree has loaded).
<a href="https://nextstrain.github.io/auspice/advanced-functionality/drag-drop-csv-tsv"> See here for details.</a>
</li>
</ul>
</P>

<P>
{`auspice.us is part of `}
<Bold>Nextstrain</Bold>
{`, an open-source project to harness the scientific and public health potential of pathogen genome data. `}
{` For more information about the software which powers these visualisations please see `}
<a href="https://nextstrain.github.io/auspice/">the Auspice documentation</a>.
</P><P>
{` For any bugs, comments or questions, please either `}
<a href="https://github.com/nextstrain/auspice.us/issues/new/choose">make a GitHub issue</a>
{` or create a post on the `}
<a href="https://discussion.nextstrain.org">Nextstrain discussion forum</a>
{`. Thanks!`}
</P>

<Line/>

<P>
{`auspice.us ${pkg.version} (Auspice ${pkg.dependencies.auspice})`}
</P>
<NextstrainTitle/>
<GitHub/>
</CenterContent>

</div>
);
function handlePicked(event) {
event.preventDefault();
handleDroppedFiles(props.dispatch, event.target.files);
}

return (
<div className="static container">

<CenterContent>
<Title>auspice.us</Title>
<P>
<Bold>
{`auspice.us allows interactive exploration of phylogenomic datasets by simply dragging & dropping them onto this page.`}
</Bold>
</P>
<P>
<Bold>Privacy: </Bold>
{`Your dataset is visualised client-side in the browser -- no data is transmitted, and no tracking cookies are used.
The only data downloaded from the internet is the visualisation (JavaScript) code, fonts and any map tiles needed.
This makes auspice.us appropriate to view datasets with sensitive information.`}
</P>
</CenterContent>

<CenterContent>
<Line/>
<UploadBox>
<input type="file" multiple onChange={handlePicked} style={{display: "none"}} />
<h2 style={{color: "#30353f", fontSize: 24}}>{`Drag & Drop a dataset on here to view`}</h2>
<div style={{marginTop: "14px"}}></div>
<UploadButton>Select files</UploadButton>
</UploadBox>
<Line/>
</CenterContent>


<CenterContent>
<P>
Currently supported files:
<ul>
<li>Auspice datasets (a main JSON plus any sidecars). See the
<a href="https://nextstrain.org/docs/bioinformatics/introduction-to-augur"> Nextstrain docs </a>
for how to run the bioinformatics tools to generate these datasets.
Note that it's possible to drag on multiple datasets, however at most two will be loaded, and it's not possible to control the ordering of these datasets!
</li>
<li>A nextstrain narrative and associated datasets (JSONs) - see the
<a href="https://docs.nextstrain.org/en/latest/tutorials/narratives-how-to-write.html"> Nextstrain docs </a>
for how author a narrative. Each dataset the narrative references should have a filename which is the
<a href="https://en.wikipedia.org/wiki/URL"> URL path</a> but with forward slashes replaced with underscores ("/"→"_") and a ".json" suffix.
Only one narrative can be dropped on at a time!
</li>
<li>
A phylogenetic tree in
<a href="https://en.wikipedia.org/wiki/Newick_format"> Newick format</a>
</li>
<li>
Additional metadata as a CSV/TSV (drop this on once the tree has loaded).
<a href="https://nextstrain.github.io/auspice/advanced-functionality/drag-drop-csv-tsv"> See here for details.</a>
</li>
</ul>
</P>

<P>
{`auspice.us is part of `}
<Bold>Nextstrain</Bold>
{`, an open-source project to harness the scientific and public health potential of pathogen genome data. `}
{` For more information about the software which powers these visualisations please see `}
<a href="https://nextstrain.github.io/auspice/">the Auspice documentation</a>.
</P><P>
{` For any bugs, comments or questions, please either `}
<a href="https://github.com/nextstrain/auspice.us/issues/new/choose">make a GitHub issue</a>
{` or create a post on the `}
<a href="https://discussion.nextstrain.org">Nextstrain discussion forum</a>
{`. Thanks!`}
</P>

<Line/>

<P>
{`auspice.us ${pkg.version} (Auspice ${pkg.dependencies.auspice})`}
</P>
<NextstrainTitle/>
<GitHub/>
</CenterContent>

</div>
);
}

export default SplashContent;


13 changes: 13 additions & 0 deletions auspice_client_customisation/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,19 @@ export const Bold = styled.span`
font-weight: 500;
`;

export const UploadBox = styled.label`
cursor: pointer;
text-align: center;
`;

export const UploadButton = styled.span`
display: inline-block;
border-radius: 4px;
padding: 10px 20px;
color: white;
background-color: #63AC9A;
`;


export const CenterContent = (props) => (
<div className="row">
Expand Down