Improve tree label font sizes

The font size should be a function of the total number of tips on the screen ("in-view"), regardless of their visibility. Renames variables to make the distinction clearer. There are still plenty of edge-cases where these don't look great, but this is a big improvement over the current version of auspice.

src/components/tree/phyloTree/labels.js

@@ -11,27 +11,28 @@ export const updateTipLabels = function updateTipLabels(dt) {
   const tLFunc = this.callbacks.tipLabel;
   const xPad = this.params.tipLabelPadX;
   const yPad = this.params.tipLabelPadY;
-  const inViewTerminalNodes = this.nodes
+
+  const inViewTips = this.nodes
     .filter((d) => d.terminal)
-    .filter((d) => d.inView)
-    .filter((d) => d.visibility === NODE_VISIBLE);
+    .filter((d) => d.inView);
+
+  const inViewVisibleTips = inViewTips.filter((d) => d.visibility === NODE_VISIBLE);
 
-  // console.log(`there are ${inViewTerminalNodes.length} nodes in view`)
-
-  if (inViewTerminalNodes.length < this.params.tipLabelBreakL1) {
+  /* We show tip labels by checking the number of "inView & visible" tips */
+  if (inViewVisibleTips.length < this.params.tipLabelBreakL1) {
 
+    /* We calculate font size based on the total number of in view tips (both visible & non-visible) */
     let fontSize = this.params.tipLabelFontSizeL1;
-    if (inViewTerminalNodes.length < this.params.tipLabelBreakL2) {
-      fontSize = this.params.tipLabelFontSizeL2;
-    }
-    if (inViewTerminalNodes.length < this.params.tipLabelBreakL3) {
+    if (inViewTips.length < this.params.tipLabelBreakL3) {
       fontSize = this.params.tipLabelFontSizeL3;
+    } else if (inViewTips.length < this.params.tipLabelBreakL2) {
+      fontSize = this.params.tipLabelFontSizeL2;
     }
 
     window.setTimeout(() => {
       this.groups.tipLabels
         .selectAll('.tipLabel')
-        .data(inViewTerminalNodes)
+        .data(inViewVisibleTips)
         .enter()
         .append("text")
         .attr("x", (d) => d.xTip + xPad)