From b7df31b747899e22553d69cd0eb51d4ed727128f Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Fri, 22 Jun 2018 15:31:05 -0400
Subject: [PATCH] Update styles, reenter bubbles with new key when sequences
 connected

---
 modules/services/streetside.js | 15 +++++++++------
 modules/svg/streetside.js      | 18 ++++++++++++++----
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/modules/services/streetside.js b/modules/services/streetside.js
index 869aa4650..9d421befa 100644
--- a/modules/services/streetside.js
+++ b/modules/services/streetside.js
@@ -75,7 +75,7 @@ function localeTimestamp(s) {
  * Using d3.geo.tiles.js from lib, gets tile extents for each grid tile in a grid created from
  * an area around (and including) the current map view extents.
  */
-function getTiles(projection) {
+function getTiles(projection, margin) {
     // s is the current map scale
     // z is the 'Level of Detail', or zoom-level, where Level 1 is far from the earth, and Level 23 is close to the ground.
     // ts ('tile size') here is the formula for determining the width/height of the map in pixels, but with a modification.
@@ -94,7 +94,7 @@ function getTiles(projection) {
         .scale(s)
         .size(projection.clipExtent()[1])
         .translate(projection.translate())
-        .margin(1);   // request nearby tiles so we can connect sequences.
+        .margin(margin || 0);   // request nearby tiles so we can connect sequences.
 
     return tiler()
         .map(function(tile) {
@@ -114,12 +114,12 @@ function getTiles(projection) {
 /**
  * loadTiles() wraps the process of generating tiles and then fetching image points for each tile.
  */
-function loadTiles(which, url, projection) {
+function loadTiles(which, url, projection, margin) {
     var s = projection.scale() * 2 * Math.PI;
     var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
 
     // breakup the map view into tiles
-    var tiles = getTiles(projection).filter(function (t) {
+    var tiles = getTiles(projection, margin).filter(function (t) {
         return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]);
     });
 
@@ -447,8 +447,11 @@ export default {
     /**
      * loadBubbles()
      */
-    loadBubbles: function (projection) {
-        loadTiles('bubbles', bubbleApi, projection);
+    loadBubbles: function (projection, margin) {
+        // by default: request 2 nearby tiles so we can connect sequences.
+        if (margin === undefined) margin = 2;
+
+        loadTiles('bubbles', bubbleApi, projection, margin);
     },
 
 
diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js
index f081f574b..8acfd3cff 100644
--- a/modules/svg/streetside.js
+++ b/modules/svg/streetside.js
@@ -12,6 +12,7 @@ export function svgStreetside(projection, context, dispatch) {
     var layer = d3_select(null);
     var _viewerYaw = 0;
     var _selectedSequence = null;
+    var _hoveredBubble = null;
     var _streetside;
 
     /**
@@ -120,7 +121,8 @@ export function svgStreetside(projection, context, dispatch) {
      */
     function mouseover(d) {
         var service = getService();
-        if (service) service.setStyles(d);
+        _hoveredBubble = d;
+        if (service) service.setStyles(d, true);
     }
 
     /**
@@ -128,7 +130,8 @@ export function svgStreetside(projection, context, dispatch) {
      */
     function mouseout() {
         var service = getService();
-        if (service) service.setStyles(null);
+        _hoveredBubble = null;
+        if (service) service.setStyles(null, true);
     }
 
     /**
@@ -193,7 +196,10 @@ export function svgStreetside(projection, context, dispatch) {
 
 
         var groups = layer.selectAll('.markers').selectAll('.viewfield-group')
-            .data(bubbles, function(d) { return d.key; });
+            .data(bubbles, function(d) {
+                // force reenter once bubbles are attached to a sequence
+                return d.key + (d.sequenceKey ? 'v1' : 'v0');
+            });
 
         // exit
         groups.exit()
@@ -246,6 +252,11 @@ export function svgStreetside(projection, context, dispatch) {
             .attr('d', viewfieldPath);
 
 
+        if (service) {
+            service.setStyles(_hoveredBubble, true);
+        }
+
+
         function viewfieldPath() {
             var d = this.parentNode.__data__;
             if (d.pano) {
@@ -292,7 +303,6 @@ export function svgStreetside(projection, context, dispatch) {
             if (service && ~~context.map().zoom() >= minZoom) {
                 editOn();
                 update();
-
                 service.loadBubbles(projection);
             } else {
                 editOff();