How to make figtree more simple to use and test?

[returnOfTheYeti]

When you clone this repository and open up the various HTML files you have generously provided, none of them work immediately due to the fact that most browsers block cross-origin requests. My second and preferred attempt is to drag this repository into a react app and import the respective libraries closer to your examples. I have managed to at least call a new FigTree instance without errors, but am still not able to visualize a phylogeny (the g element has no height/width). Is it possible to have a tutorial within your Readme file detailing how to set this library up within some sort of web framework? Probably not useful, but perhaps it might be to someone, here is what I have thus far in my React App:

import React, {Component} from 'react';
import './App.css';
import * as d3 from 'd3';
//////////you can do this, and then call each of the figtree functions below with: figtree.Tree or figtree.drawTree etc
import * as figtree from "figtree.js";
//////////
import rectangularLayout from "figtree.js";
import Tree from "figtree.js";
import drawTree from "figtree.js";
import branch from "figtree.js";
import {FigTree} from "figtree.js";
import {circle} from "figtree.js";
import internalNodeLabel from "figtree.js";
import tipLabel from "figtree.js";
import parseNewick from "figtree.js";
import rotateAtNode from "figtree.js";
import nodes from "figtree.js";

///////start react
class AppBase extends Component {
state = {
chartStay: false
};
componentDidMount() {
let component = this;
let props = this.props;
const newickString =
'((virus1:0.1,virus2:0.12):0.04,((virus3:0.011,virus4:0.0087):0.15,(virus5:0.21,((virus6:0.45,virus7:0.4):0.02,(virus8:0.4,((virus9:0.04,virus10:0.03):0.6)#old-root:0.1):0.1):0.2):0.03):0.04)#root;';
const tree = figtree.Tree.parseNewick(newickString);

    tree.annotateNode(tree.root,{root:true})

    /////////doesnt work, throws error at rotateAtNode, no matter how i import or call it
    // drawTree(document.getElementById('tree-2-svg'), tree, { top: 10, bottom: 60, left: 10, right: 150}, rotateAtNode);
    const treeSVG = document.getElementById('tree-2-svg');
    console.log(tree)
    console.log(tree.annotations)
    console.log(treeSVG)
    // console.log(typeof(figtree))
    const layout = rectangularLayout;
    const margins = { top: -100, bottom: 60, left: 100, right: 150};
    const branchSettings = figtree.branch().hilightOnHover().reRootOnClick().curve(d3.curveStepBefore);
    const figTree = new FigTree(treeSVG,margins,tree)
    console.log(figTree.layout)

       figTree.layout(rectangularLayout)
    /////   Up until here there are no errors, but
    //////////None of the below works
    // .nodes(
      // circle()
        // .attr("r",5)
    //     .hilightOnHover(10)
    //     .rotateOnClick(),
    //     tipLabel(d=>d.name),
    //     internalNodeLabel(d=>{d.label})

    // )
    // .nodeBackgrounds(
    //     circle()
    //         .attr("r",7)
    // )
}
render() {
		return (
			<div className="wrapper">
				<div>
				    <svg id="tree-2-svg"  width="500" height="300"></svg>  
				</div>
			</div>
		);
}

}