Trait Distribution Plot: Quantitative (Violin)

[laceysanderson]

Metadata

• Issue #32

• [x] I feel this PR is ready to be merged.
• [ ] This PR is dependent upon nothing

Documentation:

• [x] My code follows the code style of this project.
• [x] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
  • NOTE: I will update the documentation once both charts are complete. This is the first of two with the second being vertical histogram for qualitative data.

Description

This PR changes the existing trait distribution plot to a violin plot. For example,

When you first go to the trait distribution plot, you are faced with a form for selecting the dataset. Trait, experiment, method and unit are all required. The order in which you select trait and experiment is controlled by the "Select Dataset by" field and the order fields should be filled out is indicated by highlighting in green and disabling fields which are not ready for entry.

Testing?

• [x] I tested on a generic Tripal Site
• [ ] I tested on a KnowPulse Clone
• [ ] This PR includes automated testing

1. Uninstall Analyzed phenotypes completely if it was already installed in your test site. (Needed to get new materialized views). Enable Analyzed Phenotypes
2. Configure Module. Go to Admin > Tripal > Extensions > Analyzed Phenotypes > Configuration and click "Save Term Configuration". Also configure at least one species.
3. Load a data file at Admin > Tripal > Extensions > Analyzed Phenotypes > Upload Data using the species you configured.
4. Go to "Navigation Menu > Phenotypes > Trait Distribution Plot

[reynoldtan]

Testing it on /B and I'm not getting any visualization... looking at browser's console log it shows that the it is pulling required data from a hard-coded host /tripal in d3.json().

[laceysanderson]

🤦‍♀️ Ooops, fixed now.

[reynoldtan]

The chart is beautiful 😍😍🕺 .... 😿 sad for the bean plot it got booted out before it can taste real data.

Comments: 1. The top figure wants to close the gap but I think it did not have any more room to do so it got clipped. I have encountered something similar working with heatmap and histogram and solved it by adding another increment to the max value (extra tick mark). This extras will become a padding/gutter around the chart. The same with the lowest value, but I am not really sure how this visualization operates so ignore this if this is how it works.

2. In select dataset introduction: a. typo error seperate - separate b. I think this line " This allows you to compare values across site-years." can be incorporated to the 2nd sentence so that it reads : "Since it is not always statistically correct to combine data across sites and years, this summary keeps the data seperate to allow you to compare values across site-years."

3. Help text for Experiment field uses the word "project" instead of experiment.

4. The AJAX dies when selecting all field then switching "dataset by", but not so critical issue. Otherwise, 👍 @laceysanderson

[laceysanderson]

Thanks for the review @reynoldtan! I've fixed problems 1-3. In respect to problem 4, the AJAX actually works as expected (the select options change as they are supposed to) so the problem lies in the UI not being very intuitive. With this and the timeline in mind, I think we call this resolved.