updates

theosanderson · May 25, 2023 · 668421c · 668421c · vercel · May 25, 2023
1 parent ace1856
commit 668421c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/docs/component.md b/docs/component.md
@@ -9,7 +9,7 @@ Taxonium is now available as a React component. There are a few different ways y
 
 ## Basic HTML
 
-```
+```js
 <body>
  <div id="root"></div>
 
@@ -18,13 +18,38 @@ Taxonium is now available as a React component. There are a few different ways y
  <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@0.0.0/dist/taxonium-component.umd.js"></script>
-
+ <script src="https://unpkg.com/taxonium-component"></script>
+ 
  <script>
- const MyComponent = TaxoniumComponent.Taxonium;
+ 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(MyComponent, { backendUrl: 'https://api.cov2tree.org'}),
+ React.createElement(Taxonium, { sourceData: sourceData}),
  document.getElementById('root')
  );
  </script>
@@ -47,7 +72,7 @@ yarn add taxonium-component
 
 ### Import and use Taxonium Component in your React jsx
 
-```
+```js
 import Taxonium from 'taxonium-component';
 
 const App = () => {
@@ -65,24 +90,23 @@ In either case the following properties are available.
 | ---------- | --------------------- | ------- | -------------------------------------------------------------- |
 | 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 |
+| configDict | Javascript dictionary | None | (Optional) configuration (see [advanced](./advanced.md))  |
 
 ## sourceData
 
 The `sourceData` property allows you to load a tree and metadata directly into the component.
 
 Examples:
 
-```
+```js
 sourceData: {
  status: "url_supplied",
  filename:
  "https://cov2tree.nyc3.cdn.digitaloceanspaces.com/ncbi/special_filtered.jsonl.gz",
  filetype: "jsonl",
 }
 ```
-
-```
+```js
  sourceData: {
  status: "loaded",
  filename: "test.nwk",

diff --git a/taxonium_component/README.md b/taxonium_component/README.md
@@ -70,10 +70,8 @@ If you're working with basic HTML, you can include the Taxonium component using
  </script>
 
  <script>
- const MyComponent = TaxoniumComponent.Taxonium;
-
  ReactDOM.render(
- React.createElement(MyComponent, { sourceData: sourceData}),
+ React.createElement(Taxonium, { sourceData: sourceData}),
  document.getElementById('root')
  );
  </script>