result features : label entry after transition

axis-1d.js : if transition is used, set y (attrY_featureY) for .enter() after the transition time; also set text then because default y is (0) near the top of the axis.

d3-svg.js : add nowOrAfterTransition()

frontend/app/components/draw/axis-1d.js

@@ -38,7 +38,7 @@ import {
   dragTransition
 } from '../../utils/stacks-drag';
 import { selectAxis } from '../../utils/draw/stacksAxes';
-import { selectGroup } from '../../utils/draw/d3-svg';
+import { selectGroup, nowOrAfterTransition } from '../../utils/draw/d3-svg';
 import { breakPoint } from '../../utils/breakPoint';
 import { configureHover } from '../../utils/hover';
 import { getAttrOrCP } from '../../utils/ember-devel';
@@ -520,14 +520,20 @@ FeatureTicks.prototype.showLabels = function (featuresOfBlockLookup, setupHover,
        * For showTickLocations / <path>, the d updates, so pSM is used
        */
       pSE
-        .text(textFn)
       // positioned just left of the base of the triangles.  inherits text-anchor from axis;
         .attr('x', '-30px');
 
       let attrY_featureY = this.attrY_featureY.bind(this);
-      pSE.call(attrY_featureY);
 
       let transition = this.selectionToTransition(pS);
+      /** pass in the delay time, because transition has no duration if empty(). */
+      nowOrAfterTransition(
+        transition, () => {
+          return pSE.call(attrY_featureY)
+        .text(textFn);
+        },
+        this.axis1d.transitionTime);
+
       if (transition === pS) {
         pS.call(attrY_featureY);
       } else {

frontend/app/utils/draw/d3-svg.js

@@ -1,3 +1,5 @@
+import { later as run_later } from '@ember/runloop';
+
 /*----------------------------------------------------------------------------*/
 
 const trace = 0;
@@ -73,6 +75,22 @@ function transitionEndPromise(transition) {
   return transitionEnd;
 }
 
+/** If selection is a d3 transition, run fn after transitionTime or the transition.duration(),
+ * otherwise run it now.
+ */
+function nowOrAfterTransition(selection, fn, transitionTime) {
+  let isTransition = !!selection.duration;
+  if (isTransition) {
+    /** if selection is empty then selection.node() is null, and
+     * transition_duration() uses get$1(this.node() ) which will get an
+     * exception on node.__transition;
+     */
+    transitionTime ??= ! selection.empty() && selection.duration();
+    run_later(fn, transitionTime);
+  } else {
+    fn();
+  }
+}
 
 /*----------------------------------------------------------------------------*/
 
@@ -116,4 +134,4 @@ function ensureSvgDefs(svg)
 
 /*----------------------------------------------------------------------------*/
 
-export { I, selectGroup, transitionEndPromise, ensureSvgDefs };
+export { I, selectGroup, transitionEndPromise, nowOrAfterTransition, ensureSvgDefs };