Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@theosanderson
theosanderson committed Oct 26, 2024
1 parent 6ff4a1e commit 5e60713
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 119 deletions.
190 changes: 71 additions & 119 deletions taxonium_website/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,113 @@
import React, { useState, Suspense, useRef, useEffect } from "react";
import AboutOverlay from "./components/AboutOverlay";
import TaxoniumBit from "./components/TaxoniumBit";

import { CgListTree } from "react-icons/cg";
import { BsInfoSquare } from "react-icons/bs";
import { FaGithub } from "react-icons/fa";
import { HiOutlineBookOpen } from "react-icons/hi";
import useQueryAsState from "./hooks/useQueryAsState";
import classNames from "classnames";
import { useInputHelper } from "./hooks/useInputHelper";

import InputSupplier from "./components/InputSupplier";
import treeConfig from './trees.json';

import { HiOutlineBookOpen } from "react-icons/hi";

const default_query = {};

default_query.backend = null;
if (window.location.hostname.includes("viridian.taxonium.org")) {
default_query.backend = "https://viridian-api.cov2tree.org";
}
if (window.location.hostname.includes("cov2tree.org")) {
default_query.backend = "https://api.cov2tree.org";
}

if (window.location.hostname.includes("mpx.taxonium.org")) {
default_query.protoUrl = "https://mpx-tree.vercel.app/mpx.jsonl.gz";
default_query.configUrl = "https://mpx-tree.vercel.app/config.json";
}

if (window.location.hostname.includes("taxonomy.taxonium.org")) {
default_query.treeUrl =
"https://cov2tree.nyc3.digitaloceanspaces.com/ncbi/tree.nwk.gz";
// Hardcoded list of paths to show in the showcase
const SHOWCASE_PATHS = [
"sars-cov-2/cov2tree",
"visual-tree-of-life",
"taxonomy",
"mpx"
];

default_query.metaUrl =
"https://cov2tree.nyc3.digitaloceanspaces.com/ncbi/metadata.tsv.gz";

default_query.configUrl =
"https://cov2tree.nyc3.digitaloceanspaces.com/ncbi/config.json";

default_query.ladderizeTree = "true";
function checkLegacyHostname() {
const currentHostname = window.location.hostname;

// Look through all configurations for matching legacy hostnames
for (const [path, config] of Object.entries(treeConfig)) {
if (config.legacyHostnames && config.legacyHostnames.includes(currentHostname)) {
// If we find a match, redirect to the new path
// Preserve any query parameters
const newPath = `${window.location.protocol}//${window.location.host}/${path}${window.location.search}`;

// Only redirect if we're not already on the correct path
if (!window.location.pathname.startsWith(`/${path}`)) {
window.location.href = newPath;
return true;
}
}
}

return false;
}

if (window.location.hostname.includes("visualtreeoflife.taxonium.org")) {
default_query.protoUrl =
"https://cov2tree.nyc3.digitaloceanspaces.com/wikidata/out.jsonl.gz";
function getConfigFromPath() {
// First check for legacy hostname redirects
if (checkLegacyHostname()) {
return null; // Return null as we're about to redirect
}

// Remove leading slash and get full path
const path = window.location.pathname.substring(1);

// Return the configuration for this path, if it exists
return treeConfig[path] || null;
}

function App() {
useEffect(() => {
import("taxonium-component");
}, []);

const pathConfig = getConfigFromPath();
const default_query = pathConfig || {};

const [uploadedData, setUploadedData] = useState(null);

// check if .epicov.org is in the URL

const [query, updateQuery] = useQueryAsState(default_query);

const [title, setTitle] = useState(null);
const [beingDragged, setBeingDragged] = useState(false);
const [aboutEnabled, setAboutEnabled] = useState(false);
const [overlayContent, setOverlayContent] = useState(null);

const dragTimeout = useRef(null);
const isGisaid = window.location.toString().includes("epicov.org");

const inputHelper = useInputHelper({
setUploadedData,
updateQuery,
query,
uploadedData,
});
const [title, setTitle] = useState(null);
const [beingDragged, setBeingDragged] = useState(false);

const dragTimeout = useRef(null);

function onDrop(ev) {
console.log("File(s) dropped");
setBeingDragged(false);

// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();

if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
// If dropped items aren't files, reject them
if (ev.dataTransfer.items[i].kind === "file") {
var file = ev.dataTransfer.items[i].getAsFile();
inputHelper.readFile(file);
}
}
} else {
// Use DataTransfer interface to access the file(s)
inputHelper.readFile(ev.dataTransfer.files[0]);
}
}

function onDragOver(ev) {
if (
uploadedData &&
(uploadedData.status === "loaded" || uploadedData.status === "loading")
) {
if (uploadedData && (uploadedData.status === "loaded" || uploadedData.status === "loading")) {
ev.preventDefault();
return;
}
console.log("File(s) in drop zone");
setBeingDragged(true);
if (dragTimeout.current) {
clearTimeout(dragTimeout.current);
}

// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}

function onDragLeave(ev) {
//debounce:
if (dragTimeout.current) {
clearTimeout(dragTimeout.current);
}
Expand All @@ -117,62 +116,19 @@ function App() {
}, 500);
}

const [aboutEnabled, setAboutEnabled] = useState(false);

const protoUrl = query.protoUrl;
if (protoUrl && protoUrl.includes(".pb")) {
const url_parts = window.location.href.split("?", 2);
if (url_parts[1]) {
console.log(url_parts, "parts");
// V1 format
if (!window.redirecting) {
window.alert(
"It looks like you are trying to load a Taxonium V1 proto. We will now redirect you to the V1 site. "
);
}
window.redirecting = 1;
// split url into before question mark and after

window.location.href =
"https://cov2tree-git-v1-theosanderson.vercel.app/?" + url_parts[1];
} else {
if (!window.redirecting) {
window.alert(
"It looks like you are trying to load a Taxonium V1 proto. We will now redirect you to the V1 site. "
);
}
window.redirecting = 1;
window.location.href =
"https://cov2tree-git-v1-theosanderson.vercel.app/?protoUrl=" +
protoUrl;
// Generate showcase items from hardcoded list
const showCase = SHOWCASE_PATHS.map(path => {
const config = treeConfig[path];
if (!config) {
console.warn(`No configuration found for showcase path: ${path}`);
return null;
}
}
const [overlayContent, setOverlayContent] = useState(null);
// does the window location contain epicov anywhere
const isGisaid = window.location.toString().includes("epicov.org");

const showCase = [
{
title: "SARS-CoV-2",
url: "/?backend=https://api.cov2tree.org",
desc: "All seven million public sequences of SARS-CoV-2 from the INSDC databases",
},
{
title: "Wikidata visual tree of life",
url: "/?configUrl=https%3A%2F%2Fcov2tree.nyc3.digitaloceanspaces.com%2Fncbi%2Fconfig_special2.json&protoUrl=https%3A%2F%2Fcov2tree.nyc3.cdn.digitaloceanspaces.com%2Fncbi%2Fspecial_filtered.jsonl.gz&xType=x_dist",
desc: "The tree of life, showing species from Wikidata with images. Links to Wikipedia.",
},
{
title: "NCBI Taxonomy (full)",
url: "https://taxonomy.taxonium.org",
desc: "Full 2.2M NCBI Taxonomy of species",
},
{
title: "Mpox",
url: "https://mpx.taxonium.org",
desc: "Mpox sequences from GenBank",
},
];
return {
title: config.title,
url: `/${path}`,
desc: config.description
};
}).filter(Boolean); // Remove any null entries from missing configs

return (
<>
Expand Down Expand Up @@ -203,12 +159,11 @@ function App() {
<>
{window.screen.width < 600 && (
<>
{" "}
<span className="font-medium pr-2">{title}</span>
<span className="flex flex-col text-center">
<span className="text-xs">visualised with</span>
<a
href="//taxonium.org"
href="/"
className="underline hover:no-underline text-sm flex items-center"
target="_top"
>
Expand All @@ -225,7 +180,7 @@ function App() {
<CgListTree className="h- ml-1 w-4 mr-1" />
<span className="text-xs ml-1">visualised with </span>
<a
href="//taxonium.org"
href="/"
className="underline hover:no-underline text-xs ml-0.5"
target="_top"
>
Expand All @@ -237,7 +192,7 @@ function App() {
</>
) : (
<a
href="//taxonium.org"
href="/"
className="hover:underline"
target="_top"
>
Expand All @@ -246,7 +201,7 @@ function App() {
</a>
)}
</h1>
<div className="flex ">
<div className="flex">
<button
onClick={() => setAboutEnabled(true)}
className="text-white font-bold hover:underline flex items-center"
Expand All @@ -260,7 +215,7 @@ function App() {
title="Source code"
target="_top"
>
<FaGithub className="w-6 h-6 opacity-80 mr-2 " />
<FaGithub className="w-6 h-6 opacity-80 mr-2" />
</a>
</div>
</div>
Expand All @@ -287,15 +242,13 @@ function App() {
</p>
<InputSupplier inputHelper={inputHelper} />
<div className="flex flex-col space-y-3 pt-6">
{/* Horizontal separator and text "or load an existing tree:"*/}
<div className="flex flex-row items-center">
<div className="flex-1 border-t border-gray-300"></div>
<div className="px-2 text-gray-500 text-sm">
or load an existing tree:
</div>
<div className="flex-1 border-t border-gray-300"></div>
</div>
{/* Showcases */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{showCase.map((item, i) => (
<div key={i} className="border border-gray-300 rounded p-3">
Expand All @@ -311,14 +264,13 @@ function App() {
))}
</div>
</div>
{/* documentation link, centered with react-icons*/}
<div className="flex justify-center pt-5">
<a
href="//docs.taxonium.org"
className="text-gray-500 hover:underline"
target="_top"
>
<HiOutlineBookOpen className="w-6 h-4 opacity-80 mr-2 inline-block " />
<HiOutlineBookOpen className="w-6 h-4 opacity-80 mr-2 inline-block" />
Read the Taxonium documentation
</a>
</div>
Expand All @@ -330,4 +282,4 @@ function App() {
);
}

export default App;
export default App;
36 changes: 36 additions & 0 deletions taxonium_website/src/trees.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"sars-cov-2/cov2tree": {
"backend": "https://api.cov2tree.org",
"title": "SARS-CoV-2",
"description": "All seven million public sequences of SARS-CoV-2 from the INSDC databases",
"legacyHostnames": ["cov2tree.org"]
},
"sars-cov-2/viridian": {
"backend": "https://viridian-api.cov2tree.org",
"title": "SARS-CoV-2 Viridian",
"description": "SARS-CoV-2 sequences processed through Viridian pipeline",
"legacyHostnames": ["viridian.taxonium.org"]
},
"mpx": {
"protoUrl": "https://mpx-tree.vercel.app/mpx.jsonl.gz",
"configUrl": "https://mpx-tree.vercel.app/config.json",
"title": "Mpox",
"description": "Mpox sequences from GenBank",
"legacyHostnames": ["mpx.taxonium.org"]
},
"taxonomy": {
"treeUrl": "https://cov2tree.nyc3.digitaloceanspaces.com/ncbi/tree.nwk.gz",
"metaUrl": "https://cov2tree.nyc3.digitaloceanspaces.com/ncbi/metadata.tsv.gz",
"configUrl": "https://cov2tree.nyc3.digitaloceanspaces.com/ncbi/config.json",
"ladderizeTree": true,
"title": "NCBI Taxonomy (full)",
"description": "Full 2.2M NCBI Taxonomy of species",
"legacyHostnames": ["taxonomy.taxonium.org"]
},
"visual-tree-of-life": {
"protoUrl": "https://cov2tree.nyc3.digitaloceanspaces.com/wikidata/out.jsonl.gz",
"title": "Wikidata visual tree of life",
"description": "The tree of life, showing species from Wikidata with images. Links to Wikipedia.",
"legacyHostnames": ["visualtreeoflife.taxonium.org"]
}
}

0 comments on commit 5e60713

Please sign in to comment.