Epic 1 testing findings

[RLC-DCPPC]

From @carlkesselman:

• [x] the C2M2 link on this page is bad: https://cfde-published-documentation.readthedocs-hosted.com/en/latest/ the link in the menu bar is ok.

• [x] the labels on the bottom of the bar chart are cut off if the X-Axis is assay and label on Samples by Anatomy and CF Program protrudes into the chart to the left.

• [x] The labeling on the Subjects by Assay and Anatomy chart is wanky... the order should be such that the line

• a side note, the style on the menu bar in the documentation is not consistent with the dashboard/portal... something to add to the list....

  • this will be handled outside of this issue

[jonathancrabtree]

The last item above is truncated, but the issue is that the lines between the labels and the corresponding donut slices can cross one another (usually in cases where there are multiple adjacent small slices):

There are also two issues with the mouse hover popups. The first popup issue is that the popup box is a fixed size and the label doesn't always fit:

The second popup issue is that the relative position of the popup div doesn't change when you're near the top and/or left edge of the graph and so part of the popup can be missing. In the following example (which actually illustrates both issues) the label should say "16s ribosomal..." not just "ribosomal":

[jonathancrabtree]

Committed some initial steps to address the label overflows:

• Reduced whitespace and changed angle of labels.
• The last/rightmost label is truncated sooner than the rest due to the reduced space (could be improved further by reducing left margin and adding space between the graph and the color legend.)
• Labels are now explicitly truncated with "..." used to indicate incompleteness.
• Title elements have been added to enable full label display on mouseover (see 2nd screenshot below)

[jonathancrabtree]

As the preceding screenshots show, there's quite a bit of variability in the amount of vertical whitespace between the graph and the form controls below. This should be standardized and then the labels allowed to extend as far as possible into that space.

[victor73]

Made some commits to address issues with the tooltips going out-of-bounds in some cases and dynamically truncating/ellipsizing long category names to fit inside the tooltip borders.

[jonathancrabtree]

Switched donut charts to use a color legend instead of attaching labels. Also fixed problems with the donut chart color assignments and tooltip label overruns:

[jonathancrabtree]

One more addition to the donut chart, which is to enable mouse hover on the legend as well as the chart itself:

We can revisit the use of direct labels with connecting lines if this approach proves inadequate.