Taxonium React Component#

Taxonium is now available as a React component. There are a few different ways you can use this.

Note

This component is new and in flux.

Basic HTML#

<body>
  <div id="root"></div>

  <!-- Include peer dependencies -->
  <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

  <!-- Include Taxonium Component -->
  <script src="https://unpkg.com/taxonium-component"></script>

  <script>
    const nwk = `((A:0.1,B:0.2):0.3,(C:0.4,D:0.5):0.6);`;

    const metadata_text = `Node,Name,Species
A,Bob,Cow
B,Jim,Cow
C,Joe,Fish
D,John,Fish`;

    // Metadata is optional
    const metadata = {
      filename: "test.csv",
      data: metadata_text,
      status: "loaded",
      filetype: "meta_csv",
    };

    const sourceData = {
      status: "loaded",
      filename: "test.nwk",
      data: nwk,
      filetype: "nwk",
      metadata: metadata,
    };
  </script>

  <script>
    ReactDOM.render(
      React.createElement(Taxonium, { sourceData: sourceData }),
      document.getElementById("root")
    );
  </script>
</body>

In a React project#

Install Taxonium Component#

npm install taxonium-component

yarn add taxonium-component

Import and use Taxonium Component in your React jsx#

import Taxonium from "taxonium-component";

const App = () => {
  return <Taxonium backendUrl="https://api.cov2tree.org" />;
};

Properties#

In either case the following properties are available.

Property	Type	Default	Description
backendUrl	string	None	(Optional) a backend to connect to
sourceData	Javascript dictionary	None	(Optional) Tree / metadata to load locally (see section below)
configDict	Javascript dictionary	None	(Optional) configuration (see advanced)

sourceData#

The sourceData property allows you to load a tree and metadata directly into the component.

Examples:

sourceData: {
      status: "url_supplied",
      filename:
        "https://cov2tree.nyc3.cdn.digitaloceanspaces.com/ncbi/special_filtered.jsonl.gz",
      filetype: "jsonl",
}

 sourceData: {
      status: "loaded",
      filename: "test.nwk",
      data: `((A:0.1,B:0.2):0.3,C:0.4);`,
      filetype: "nwk",
    }