-
Notifications
You must be signed in to change notification settings - Fork 161
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c2398a6
commit 45791aa
Showing
3 changed files
with
170 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| import React from "react"; | ||
| import styled from 'styled-components'; | ||
| import { useSelector } from "react-redux"; | ||
| import { infoPanelStyles } from "../../globalStyles"; | ||
| import { dataFont, lighterGrey} from "../../globalStyles"; | ||
| import { isColorByGenotype, decodeColorByGenotype} from "../../util/getGenotype"; | ||
|
|
||
| /** | ||
| * The following value is useful for development purposes as we'll not show any | ||
| * link-outs on localhost (because external sites can't access it!) so we can | ||
| * replace it with something else such as "https://nextstrain.org" for testing | ||
| */ | ||
| const forceNextstrainHost = false; | ||
|
|
||
| const ButtonText = styled.a` | ||
| border: 1px solid ${lighterGrey}; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| padding: 4px 7px; | ||
| margin-right: 10px; | ||
| font-family: ${dataFont}; | ||
| background-color: rgba(0,0,0,0); | ||
| color: white !important; | ||
| font-weight: 400; | ||
| text-decoration: none !important; | ||
| font-size: 16px; | ||
| & :hover { | ||
| background-color: ${(props) => props.theme.selectedColor}; | ||
| } | ||
| ` | ||
|
|
||
| const ButtonDescription = styled.div` | ||
| display: inline-block; | ||
| height: 30px; | ||
| font-style: italic; | ||
| font-size: 14px; | ||
| color: white; | ||
| ` | ||
|
|
||
| const ButtonContainer = styled.div` | ||
| margin-top: 10px; | ||
| margin-bottom: 10px; | ||
| ` | ||
|
|
||
| const data = ({distanceMeasure, colorBy}) => { | ||
| const pathname = window.location.pathname; | ||
| const origin = forceNextstrainHost ? 'https://nextstrain.org' : window.location.origin; | ||
| return ([ | ||
| { | ||
| name: 'taxonium.org', | ||
| description() { | ||
| return <>{`Visualise this dataset in Taxonium. We'll try to preserve your current view settings where possible.`}</> | ||
| }, | ||
| taxoniumColoring() { | ||
| if (isColorByGenotype(colorBy)) { | ||
| /* Taxonium syntax looks like 'color={"field":"genotype","pos":485,"gene":"M"}' | ||
| Note that taxonium (I think) does't backfill bases/residues which match the root like Auspice does | ||
| */ | ||
| const subfields = ['"genotype"']; // include quoting as taxonium uses | ||
| const colorInfo = decodeColorByGenotype(colorBy); | ||
| // Multiple mutations (positions) aren't allowed | ||
| if (!colorInfo || colorInfo.positions.length>1) return null; | ||
| // The (integer) position is not enclosed in double quotes | ||
| subfields.push(`"pos":${colorInfo.positions[0]}`); | ||
| // The gene value is optional, without it we use nucleotide ("nt" in taxonium syntax) | ||
| if (colorInfo.aa) subfields.push(`"gene":"${colorInfo.gene}"`); | ||
| // Note that this string will be encoded when converted to a URL | ||
| return `{"field":${subfields.join(',')}}`; | ||
| } | ||
| return `{"field":"meta_${colorBy}"}`; | ||
| }, | ||
| url() { | ||
| /** | ||
| * Tested on genotype colors + normal colors | ||
| * TODO: tanglegrams (they'll be part of the pathname) | ||
| * TODO: /fetch URLs (won't work) | ||
| */ | ||
| const baseUrl = 'https://taxonium.org'; | ||
| const queries = { | ||
| treeUrl: `${origin}${pathname}`, // no nextstrain queries | ||
| // treeUrl: `https://nextstrain.org${pathname}`, // uncomment for development on localhost | ||
| treeType: 'nextstrain', | ||
| ladderizeTree: 'false', // keep same orientation as Auspice | ||
| xType: distanceMeasure==='num_date' ? 'x_time' : 'x_dist', | ||
| } | ||
| const color = this.taxoniumColoring(); | ||
| if (color) queries.color = color; | ||
|
|
||
| return `${baseUrl}?${Object.entries(queries).map(([k,v]) => `${k}=${encodeURIComponent(v)}`).join("&")}`; | ||
| } | ||
| } | ||
| ]) | ||
| } | ||
|
|
||
| export const LinkOutModalContents = () => { | ||
| const {distanceMeasure, colorBy} = useSelector((state) => state.controls) | ||
|
|
||
| return ( | ||
| <> | ||
| <div style={infoPanelStyles.modalSubheading}> | ||
| View this dataset in other platforms: | ||
| </div> | ||
|
|
||
| <div style={infoPanelStyles.break}/> | ||
|
|
||
| <div> | ||
| Clicking on the following links will take you to an external site which will then make requests to nextstrain.org for the data you are currently viewing | ||
| </div> | ||
|
|
||
| {window.location.hostname==='localhost' && ( | ||
| <div> | ||
| NOTE: The site is currently running on localhost and thus the following links will not work | ||
| </div> | ||
| )} | ||
|
|
||
| <div style={infoPanelStyles.break}/> | ||
|
|
||
| {data({distanceMeasure, colorBy}).map((d) => ( | ||
| <ButtonContainer key={d.name}> | ||
| <ButtonText href={d.url()} target="_blank" rel="noreferrer noopener">{d.name}</ButtonText> | ||
| <ButtonDescription>{d.description()}</ButtonDescription> | ||
| </ButtonContainer> | ||
| ))} | ||
|
|
||
| <div> | ||
| These are only gonna work with nextstrain.org (and dev, review apps etc) because it uses the RESTful API | ||
| </div> | ||
|
|
||
| </> | ||
| ); | ||
| } | ||
|
|
||
|
|
||
| export const canShowLinkOuts = () => { | ||
| // TODO XXX - additionally query an extension flag | ||
| if (window.location.hostname==='localhost' && !forceNextstrainHost) { | ||
| console.log("Link-out modal disabled while running on localhost") | ||
| return false; | ||
| } | ||
| return true; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters