Treenome Browser v1 integration

Dockerfile.frontend

@@ -7,7 +7,8 @@ COPY taxonium_data_handling ./taxonium_data_handling
 WORKDIR /app/taxonium_web_client
 
 # Install dependencies for node-gyp from lzma-native
-RUN apk add --no-cache python3 make g++
+RUN apk add --no-cache python3 make g++ jpeg-dev cairo-dev giflib-dev pango-dev
+RUN npm_config_build_from_source=true yarn add canvas
 RUN yarn --frozen-lockfile
 RUN yarn build
 

docs/index.md

@@ -7,6 +7,7 @@
 index.md
 taxoniumtools.md
 advanced.md
+treenome.md
 ```
 
 Taxonium is a tool for exploring phylogenetic trees. The web interface can be accessed at [taxonium.org](https://taxonium.org/) and the source code repository at [https:/theosanderson/taxonium](https:/theosanderson/taxonium).

docs/treenome.md

@@ -0,0 +1,49 @@
+# Treenome Browser
+
+The Treenome Browser allows simultaneous exploration of a reference genome, phylogeny, and the genetic variation within a tree.
+
+#### Getting Started
+
+<iframe width="560" height="315" src="https://user-images.githubusercontent.com/6502785/182259439-0435263f-fa8d-4304-b3a3-b867e0edd175.mp4" frameborder="0" allowfullscreen></iframe>
+
+#### Enabling the Treenome Browser
+
+:::{note}
+Currently, only jsonl trees that have been created with `usher_to_taxonium` using a protobuf and an associated Genbank file work with the Treenome Browser. E.g., `usher_to_taxonium -i input.pb -o output.jsonl.gz --genbank gbfile.gb`
+:::
+
+If your supplied tree file is supported, enable Treenome Browser in the right-hand panel.
+
+```{image} https://user-images.githubusercontent.com/6502785/182260804-29e238a0-fe18-4e07-8f45-0046ee47a4c3.png
+:width: 40em
+:class: no-scaled-link
+```
+
+#### Navigating the Treenome Browser
+
+To explore the tree, see the main Taxonium [documentation](./index.md)
+
+To explore the genome, click and drag (or scroll) left or right in the top (JBrowse) panel. Zoom into a region by entering coordinates or by dragging across a section of the genome. Hover over mutations to view details.
+
+```{image} https://user-images.githubusercontent.com/6502785/182264410-eb760791-3d16-4162-bc94-1c83515a64fd.png
+:width: 30em
+:class: no-scaled-link
+```
+
+Amino acid mutations are enabled by default. You can also enable nucleotide mutations in the settings menu.
+
+```{image} https://user-images.githubusercontent.com/6502785/182264641-d732e67d-cccd-4186-b40b-3a37a2cecffe.png
+:width: 30em
+:class: no-scaled-link
+```
+
+#### Loading annotations
+
+Load annotations by clicking the track selector button in the browser panel.
+
+```{image} https://user-images.githubusercontent.com/6502785/182264983-c62d6f13-2323-46ba-872a-2db2ac864ca5.png
+:width: 20em
+:class: no-scaled-link
+```
+
+If you are viewing the public SARS-CoV-2 tree ([cov2tree.org](https://cov2tree.org/)), annotation tracks are loaded automatically from the [UCSC Genome Browser](https://genome.ucsc.edu/covid19.html). Otherwise, annotations are currently limited to a reference sequence track.

taxonium_web_client/package.json

@@ -4,6 +4,8 @@
  "private": true,
  "dependencies": {
  "@craco/craco": "^6.1.2",
+ "@fontsource/roboto": "^4.5.5",
+ "@jbrowse/react-linear-genome-view": "^1.7.6",
  "@tailwindcss/forms": "^0.5.2",
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",

taxonium_web_client/src/App.css

@@ -7,7 +7,66 @@
  @apply outline-none ring-offset-0 ring-1 ring-gray-800 border-gray-800;
 }
 
+/* JBrowse customization */
+.MuiPaper-root.MuiPaper-rounded {
+ box-shadow: none !important;
+ padding: 0px !important;
+ margin: 0px !important;
+}
+
+#view-browser-axis > div > span > div > div > div > div:nth-child(1) {
+ display: none !important;
+}
+
+.jss2 {
+ margin: 0px !important;
+}
+
+p[data-testid="refLabel-NC_045512v2"] {
+ display: none !important;
+}
+
+[class*="PrivateSwitchBase-input-"] + svg {
+ color: "#2463eb" !important;
+}
+
+.sidebar-toggle {
+ border: 2px solid rgb(136, 135, 135) !important;
+ border-radius: 3px;
+ margin: 10px;
+}
+
+.sidebar-open {
+ transition: right 0.3s ease-in-out !important;
+}
+
+.sidebar-closed {
+ transition: right 0.3s ease-in-out !important;
+
+ position: absolute;
+ width: 60px;
+ right: 0px;
+}
+
+.search-panel {
+ width: 100% !important;
+}
+
 select,
 input {
  border-color: #c7ccd8 !important;
 }
+
+.infoTooltip {
+ max-width: 200px;
+ font-size: 12pt !important;
+ pointer-events: auto !important;
+}
+.infoTooltip :hover {
+ visibility: visible !important;
+ opacity: 1 !important;
+}
+.tooltipLink {
+ color: #2563eb;
+ text-decoration: underline;
+}

taxonium_web_client/src/App.jsx

@@ -30,6 +30,7 @@ const default_query = {
  backend: DEFAULT_BACKEND,
  xType: "x_dist",
  mutationTypesEnabled: JSON.stringify({ aa: true, nt: false }),
+ treenomeEnabled: false,
 };
 
 if (window.location.hostname.includes("mpx.taxonium.org")) {

taxonium_web_client/src/Deck.jsx

@@ -1,7 +1,9 @@
 /// app.js
 import React, { useState, useCallback, useRef } from "react";
 import DeckGL from "@deck.gl/react";
+import { View } from "@deck.gl/core";
 import useLayers from "./hooks/useLayers";
+import JBrowsePanel from "./components/JBrowsePanel";
 import { ClipLoader } from "react-spinners";
 import {
  CircularProgressbarWithChildren,
@@ -11,14 +13,15 @@ import "react-circular-progressbar/dist/styles.css";
 
 import useSnapshot from "./hooks/useSnapshot";
 import NodeHoverTip from "./components/NodeHoverTip";
+import MutationHoverTip from "./components/MutationHoverTip";
 import { DeckButtons } from "./components/DeckButtons";
 import DeckSettingsModal from "./components/DeckSettingsModal";
 import FirefoxWarning from "./components/FirefoxWarning";
 
 function Deck({
  data,
  search,
-
+ treenomeState,
  view,
  colorHook,
  colorBy,
@@ -31,8 +34,9 @@ function Deck({
  setDeckSize,
  deckSize,
  isCurrentlyOutsideBounds,
+ deckRef,
+ jbrowseRef,
 }) {
- const deckRef = useRef();
  const snapshot = useSnapshot(deckRef);
  const [deckSettingsOpen, setDeckSettingsOpen] = useState(false);
 
@@ -51,6 +55,13 @@ function Deck({
  xzoom,
  } = view;
 
+ // Treenome state
+ const setMouseXY = useCallback(
+ (info) => view.setMouseXY([info.x, info.y]),
+ [view]
+ );
+ const [reference, setReference] = useState(null);
+
  const [mouseDownIsMinimap, setMouseDownIsMinimap] = useState(false);
 
  const mouseDownPos = useRef();
@@ -122,7 +133,14 @@ function Deck({
  });
  }
  },
- [selectedDetails, mouseDownIsMinimap, viewState, onViewStateChange, xzoom]
+ [
+ selectedDetails,
+ mouseDownIsMinimap,
+ viewState,
+ onViewStateChange,
+ xzoom,
+ deckRef,
+ ]
  );
 
  const [hoverInfo, setHoverInfoRaw] = useState(null);
@@ -158,6 +176,9 @@ function Deck({
  settings,
  isCurrentlyOutsideBounds,
  config,
+ treenomeState,
+ reference,
+ setReference,
  });
  // console.log("deck refresh");
 
@@ -235,8 +256,12 @@ function Deck({
  onViewStateChange={onViewStateChange}
  layerFilter={layerFilter}
  layers={layers}
+ onHover={setMouseXY}
  onResize={(size) => {
  setDeckSize(size);
+ window.setTimeout(() => {
+ treenomeState.handleResize();
+ }, 50);
  console.log("resize", size);
  }}
  onAfterRender={(event) => {
@@ -245,23 +270,49 @@ function Deck({
  }
  }}
  >
- <NodeHoverTip
- hoverInfo={hoverInfo}
- hoverDetails={hoverDetails}
- colorHook={colorHook}
- colorBy={colorBy}
- config={config}
- filterMutations={settings.filterMutations}
- deckSize={deckSize}
- />
- <DeckButtons
- zoomIncrement={zoomIncrement}
- zoomAxis={zoomAxis}
- setZoomAxis={setZoomAxis}
- snapshot={snapshot}
- loading={data.status === "loading"}
- requestOpenSettings={() => setDeckSettingsOpen(true)}
- />
+ <View id="browser-axis">
+ <div
+ style={{
+ width: "100%",
+ height: "100%",
+ border: "1px solid black",
+ position: "relative",
+ zIndex: 1,
+ }}
+ >
+ <span ref={jbrowseRef}>
+ <JBrowsePanel treenomeState={treenomeState} settings={settings} />
+ </span>
+ </div>
+ </View>
+ <View id="main">
+ <NodeHoverTip
+ hoverInfo={hoverInfo}
+ hoverDetails={hoverDetails}
+ colorHook={colorHook}
+ colorBy={colorBy}
+ config={config}
+ filterMutations={settings.filterMutations}
+ deckSize={deckSize}
+ />
+ <MutationHoverTip
+ hoverInfo={hoverInfo}
+ hoverDetails={hoverDetails}
+ colorHook={colorHook}
+ colorBy={colorBy}
+ config={config}
+ reference={reference}
+ />
+ <DeckButtons
+ zoomIncrement={zoomIncrement}
+ zoomAxis={zoomAxis}
+ setZoomAxis={setZoomAxis}
+ snapshot={snapshot}
+ loading={data.status === "loading"}
+ requestOpenSettings={() => setDeckSettingsOpen(true)}
+ settings={settings}
+ />
+ </View>
  </DeckGL>
  </div>
  );