Skip to content

Commit

Permalink
Merge pull request #77: Add file picker to splash page
Browse files Browse the repository at this point in the history
  • Loading branch information
@victorlin
victorlin authored Dec 28, 2023
2 parents 8415153 + 0db85e4 commit 4c2b79f
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 107 deletions.
206 changes: 99 additions & 107 deletions auspice_client_customisation/splash.js
View file
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
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

0 comments on commit 4c2b79f

Please sign in to comment.