Implement getPathSegAtLength in JavaScript (#434)

In SVG 2, getPathSegAtLength (which the graph explorer depends on as part of
rendering edges), is deprecated. This means that the graph explorer
would render with no edges in Chrome 62 (current in the dev channel) and
would thus be very much broken in Chrome 62.

This commit pre-empts that change by implementing the functionality of
getPathSegAtLength in the graph explorer so that the explorer still
works in Chrome 62.

I do not see alternative ways of implementing this functionality using
the native pathLength property + getTotalLength() and getPointAtLength()
methods still provided by the SVG API.

After this change goes in, we should quickly release a new pypi package
and internal version of TensorBoard so that the graph explorer is not
broken for users of Chrome 62.

Fixes #425.

Author: chihuahua

tensorboard/plugins/graph/tf_graph_common/edge.ts

@@ -152,6 +152,34 @@ export function getLabelForEdge(metaedge: Metaedge,
       getLabelForBaseEdge(metaedge.baseEdgeList[0], renderInfo);
 }
 
+/**
+ * Computes the index into a set of points that constitute a path for which the
+ * distance along the path from the initial point is as large as possible
+ * without exceeding the length. This function was introduced after the
+ * native getPathSegAtLength method got deprecated by SVG 2.
+ * @param points Array of path control points. A point has x and y properties.
+ *   Must be of length at least 2.
+ * @param length The length (float).
+ * @param lineFunc A function that takes points and returns the "d" attribute
+ *   of a path made from connecting the points.
+ * @return The index into the points array.
+ */
+function getPathSegmentIndexAtLength(
+    points: render.Point[],
+    length: number,
+    lineFunc: (points: render.Point[]) => string): number {
+  const path = document.createElementNS(tf.graph.scene.SVG_NAMESPACE, 'path');
+  for (let i = 1; i < points.length; i++) {
+    path.setAttribute("d", lineFunc(points.slice(0, i)));
+    if (path.getTotalLength() > length) {
+      // This many points has already exceeded the length.
+      return i - 1;
+    }
+  }
+  // The entire path is shorter than the specified length.
+  return points.length - 1;
+}
+
 /**
  * Shortens the path enought such that the tip of the start/end marker will
  * point to the start/end of the path. The marker can be of arbitrary size.
@@ -183,7 +211,7 @@ function adjustPathPointsForMarker(points: render.Point[],
     const point = pathNode.getPointAtLength(length);
     // Figure out how many segments of the path we need to remove in order
     // to shorten the path.
-    const segIndex = pathNode.getPathSegAtLength(length);
+    const segIndex = getPathSegmentIndexAtLength(points, length, lineFunc);
     // Update the very first segment.
     points[segIndex - 1] = {x: point.x, y: point.y};
     // Ignore every point before segIndex - 1.
@@ -197,7 +225,7 @@ function adjustPathPointsForMarker(points: render.Point[],
     const point = pathNode.getPointAtLength(length);
     // Figure out how many segments of the path we need to remove in order
     // to shorten the path.
-    const segIndex = pathNode.getPathSegAtLength(length);
+    const segIndex = getPathSegmentIndexAtLength(points, length, lineFunc);
     // Update the very last segment.
     points[segIndex] = {x: point.x, y: point.y};
     // Ignore every point after segIndex.

tensorboard/plugins/graph/tf_graph_common/scene.ts

@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 module tf.graph.scene {
-  const svgNamespace = 'http://www.w3.org/2000/svg';
+  export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 
   /** Enums element class of objects in the scene */
   export let Class = {
@@ -610,14 +610,14 @@ function _addHealthPill(
     healthPillHeight /= 2;
   }
 
-  let healthPillGroup = document.createElementNS(svgNamespace, 'g');
+  let healthPillGroup = document.createElementNS(SVG_NAMESPACE, 'g');
   healthPillGroup.classList.add('health-pill');
 
   // Define the gradient for the health pill.
-  let healthPillDefs = document.createElementNS(svgNamespace, 'defs');
+  let healthPillDefs = document.createElementNS(SVG_NAMESPACE, 'defs');
   healthPillGroup.appendChild(healthPillDefs);
   let healthPillGradient =
-      document.createElementNS(svgNamespace, 'linearGradient');
+      document.createElementNS(SVG_NAMESPACE, 'linearGradient');
 
   // Every element in a web page must have a unique ID.
   const healthPillGradientId = 'health-pill-gradient-' + healthPillId;
@@ -633,13 +633,13 @@ function _addHealthPill(
     cumulativeCount += lastHealthPillElementsBreakdown[i];
 
     // Create a color interval using 2 stop elements.
-    let stopElement0 = document.createElementNS(svgNamespace, 'stop');
+    let stopElement0 = document.createElementNS(SVG_NAMESPACE, 'stop');
     stopElement0.setAttribute('offset', previousOffset);
     stopElement0.setAttribute(
         'stop-color', healthPillEntries[i].background_color);
     healthPillGradient.appendChild(stopElement0);
 
-    let stopElement1 = document.createElementNS(svgNamespace, 'stop');
+    let stopElement1 = document.createElementNS(SVG_NAMESPACE, 'stop');
     let percent = (cumulativeCount * 100 / totalCount) + '%';
     stopElement1.setAttribute('offset', percent);
     stopElement1.setAttribute(
@@ -650,14 +650,14 @@ function _addHealthPill(
   healthPillDefs.appendChild(healthPillGradient);
 
   // Create the rectangle for the health pill.
-  let rect = document.createElementNS(svgNamespace, 'rect');
+  let rect = document.createElementNS(SVG_NAMESPACE, 'rect');
   rect.setAttribute('fill', 'url(#' + healthPillGradientId + ')');
   rect.setAttribute('width', String(healthPillWidth));
   rect.setAttribute('height', String(healthPillHeight));
   healthPillGroup.appendChild(rect);
 
   // Show a title with specific counts on hover.
-  let titleSvg = document.createElementNS(svgNamespace, 'title');
+  let titleSvg = document.createElementNS(SVG_NAMESPACE, 'title');
   titleSvg.textContent = _getHealthPillTextContent(
       healthPill, totalCount, lastHealthPillElementsBreakdown, numericStats);
   healthPillGroup.appendChild(titleSvg);
@@ -694,7 +694,7 @@ function _addHealthPill(
       }
     }
 
-    let statsSvg = document.createElementNS(svgNamespace, 'text');
+    let statsSvg = document.createElementNS(SVG_NAMESPACE, 'text');
     const minString =
         humanizeHealthPillStat(numericStats.min, shouldRoundOnesDigit);
     const maxString =