Implement phylotree

[alancleary]

This is basically a second attempt at #10. @rispop is going to implement a phylotree component in an iterative manner. See the list below for steps and details:

• [x] Fork repository
• [x] Add a new phylotree component under src/
• [x] Have the component draw a tree from an input (i.e. @property) Newick tree using TnT (don't install TnT with npm; just include its scripts in the head of the page)
• [x] Implement a test for the component in the dev/ directory
• [x] Declare and export a Phylotree type before the LisPhylotree class that describes a phytotree object
• [x] Add a private _data state to the LisPhylotree class
• [x] Replace the input property with a tree property that has type string|Phylotree and implement a setter for the property that saves the tree in the _data state; you'll need to check if the tree is a string and parse it as Newick first
• [x] Update the tree drawing code to use the tree object in the _data state
• [x] Create a second <lis-phylotree> element in the dev/ example and set its tree property to a Phylotree object programmatically inside a <script> tag
• [x] Add an optional color string attribute to the Phylotree type
• [x] Update the tree drawing code to color nodes using their color attribute if they have it
• [x] Update your Phylotree object in the dev/ example to color some, but not all, nodes
• [x] Add a ResizeObserver to the phylotree that calls the tree drawing method when the component's size chages
• [x] Update the tree drawing code to make the tree as wide as the component element
• [x] Update the tree drawing code to clear the component content before drawing the tree
• [ ] Add a scale bar to the tree
• [x] Add a layout property to the component with type "vertical"|"radial" with "vertical" as the default value.
• [x] Update the tree drawing code to draw the tree in a vertical or radial layout based on the layout property
• [x] Add a new scale boolean property that's false by default
• [x] Use this as the value for the TnT .scale method
• [x] Run the GraphQL Server and use its Apollo Explorer (localhost:4000) to build a geneFamilies query to fetch the Newick string for 1 phylotree. Be sure to set the page and pageSize variables to 1 or else it's going to return results for all phylotrees in the database!
• [x] Using dev/lis-linkout-element.html as an example, use your GraphQL query from the previous step to update dev/lis-phylotree.html to get a phylotree with the graphqlQuery function
• [x] Update dev/lis-phylotree.html to set the tree property of the lis-phylotree-element programmatically
• [x] Once all other tasks are complete, open a Pull Request (PR) to add your phylotree code to the phylotree branch in the legumeinfo/web-components repo

[rispop]

Forked the web-components repo --> https://github.com/rispop/web-components

[rispop]

Just added the lis-phylotree.ts file --> https://github.com/rispop/web-components/blob/main/src/lis-phylotree.ts. Would this be the correct format and have the correct dependencies?

[alancleary]

Just added the lis-phylotree.ts file --> https://github.com/rispop/web-components/blob/main/src/lis-phylotree.ts. Would this be the correct format and have the correct dependencies?

Good progress @rispop. I've emailed you about the format and whatnot.

[rispop]

Created a test in /dev directory and have almost completed the component. One error regarding data still remains while compiling. Also fixed src/controllers/lis-cancel-promise-controller.ts as you said in email.

[alancleary]

Created a test in /dev directory and have almost completed the component. One error regarding data still remains while compiling. Also fixed src/controllers/lis-cancel-promise-controller.ts as you said in email.

Sounds good. Let me know when you're ready for me try out your code.

[rispop]

Finished component and test. The component prompts the user to enter a newick tree and then displays it.

[alancleary]

Great! I've added more items to the task list.

[rispop]

Declared and exported Phylotree type

[rispop]

Added the private _data state to LisPhylotree class

[rispop]

Replaced input with tree and new type, implemented setter with conditions if tree is a string or a Phylotree.

[rispop]

Also changed the drawing tree code to use _data, but for some reason, the tree doesn't display properly afterward.

[rispop]

Fixed the tree display error by modifying the setter for the tree. Also fixed a couple of compile errors.

[rispop]

Added 2nd <lis-phylotree> component which uses the Phylotree object.

[rispop]

Added optional color attribute

[rispop]

Updated tree drawing code to color the nodes based on their attributes and updated Phylotree object to include some nodes with colors. Also made the default color of the nodes gray. If any color attribute is an empty string or null, the color will be gray.

[alancleary]

Updated tree drawing code to color the nodes based on their attributes and updated Phylotree object to include some nodes with colors. Also made the default color of the nodes gray. If any color attribute is an empty string or null, the color will be gray.

Mind making the default color white? That's what the Funnotate implementation does and we want to replicate that.

[rispop]

Yup, done.

[rispop]

Adjusted width in drawing code to use screen.availWidth rather than a set value.

[rispop]

Nevermind it looks like window.innerWidth is better to use as it makes the tree viewable in a windowed browser tab as well.

[svengato]

The Funnotate implementation is at https://github.com/legumeinfo/Funnotate/blob/main/static/js/phylogram.js

[rispop]

The layout property has been added and is used in the tree drawing code.

[alancleary]

The layout property has been added and is used in the tree drawing code.

Works great! Very cool that the tree automatically redraws if you change this property on an existing element.

[rispop]

Added scale property and used in .scale method

[rispop]

Clears the previous tree whenever it is redrawn using this.innerHTML = "";

[rispop]

Built query query GeneFamilies($page: Int, $pageSize: Int) { geneFamilies(page: $page, pageSize: $pageSize) { results { phylotree { newick } } } }

And variables { "pageSize": 1, "page": 1 }

Sorry the formating doesn't look right.

[rispop]

Updated /dev/lis-phylotree.html with query and displaying it in the Tree object.

[rispop]

Completed GraphQL query and made pull-request.