From 02125412a5bb95b8bc6bdf6c1639d0d6ee1c5c68 Mon Sep 17 00:00:00 2001
From: Vladimir Agafonkin <agafonkin@gmail.com>
Date: Mon, 18 Jun 2018 15:00:42 +0300
Subject: [PATCH 1/4] upgrade supercluster to v4.0.1

---
 package.json |  2 +-
 yarn.lock    | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 87b742b0458..15c9e7d717c 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "rw": "^1.3.3",
     "shuffle-seed": "^1.1.6",
     "sort-object": "^0.3.2",
-    "supercluster": "^2.3.0",
+    "supercluster": "^4.0.1",
     "through2": "^2.0.3",
     "tinyqueue": "^1.1.0",
     "vt-pbf": "^3.0.1"
diff --git a/yarn.lock b/yarn.lock
index 94d639ea0c2..523dc51f490 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5911,9 +5911,9 @@ just-extend@^1.1.27:
   version "1.1.27"
   resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-1.1.27.tgz#ec6e79410ff914e472652abfa0e603c03d60e905"
 
-kdbush@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-1.0.1.tgz#3cbd03e9dead9c0f6f66ccdb96450e5cecc640e0"
+kdbush@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-2.0.1.tgz#90c6128e3001ac68c550d7c9e2f222c0269666f1"
 
 kebab-case@^1.0.0:
   version "1.0.0"
@@ -9695,11 +9695,11 @@ sugarss@^1.0.0:
   dependencies:
     postcss "^6.0.14"
 
-supercluster@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-2.3.0.tgz#87ab56081bbea9a1d724df5351ee9e8c3af2f48b"
+supercluster@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-4.0.1.tgz#eead7ab49f50322b265e0087859ebcabdc5c2ed8"
   dependencies:
-    kdbush "^1.0.1"
+    kdbush "^2.0.1"
 
 supports-color@^2.0.0:
   version "2.0.0"

From 07bf49dc76c9ccf170f46def1e73f93f531c79ec Mon Sep 17 00:00:00 2001
From: Vladimir Agafonkin <agafonkin@gmail.com>
Date: Mon, 18 Jun 2018 15:01:16 +0300
Subject: [PATCH 2/4] add GeoJSONSource getClusterExpansionZoom method

---
 debug/cluster.html                  | 112 ++++++++++++++--------------
 src/source/geojson_source.js        |  12 +++
 src/source/geojson_worker_source.js |   6 ++
 3 files changed, 73 insertions(+), 57 deletions(-)

diff --git a/debug/cluster.html b/debug/cluster.html
index d40092eabc3..3c409facc9d 100644
--- a/debug/cluster.html
+++ b/debug/cluster.html
@@ -18,67 +18,65 @@
 <script src='/debug/access_token_generated.js'></script>
 <script>
 
-var style = {
-    "version": 8,
-    "metadata": {
-        "test": {
-            "native": false,
-            "width": 512,
-            "height": 512
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 0,
+    center: [0, 0],
+    style: 'mapbox://styles/mapbox/cjf4m44iw0uza2spb3q0a7s41',
+    hash: true
+});
+
+map.on('load', () => {
+    map.addSource('geojson', {
+        "type": "geojson",
+        "data": "/test/integration/data/places.geojson",
+        "cluster": true,
+        "clusterRadius": 50
+    });
+    map.addLayer({
+        "id": "cluster",
+        "type": "circle",
+        "source": "geojson",
+        "filter": ["==", "cluster", true],
+        "paint": {
+            "circle-color": "rgba(0, 200, 0, 1)",
+            "circle-radius": 20
         }
-    },
-    "center": [0, 0],
-    "zoom": 0,
-    "sources": {
-        "geojson": {
-            "type": "geojson",
-            "data": "/test/integration/data/places.geojson",
-            "cluster": true,
-            "clusterRadius": 25
+    });
+    map.addLayer({
+        "id": "cluster_label",
+        "type": "symbol",
+        "source": "geojson",
+        "filter": ["==", "cluster", true],
+        "layout": {
+            "text-field": "{point_count}",
+            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+            "text-size": 12,
+            "text-allow-overlap": true,
+            "text-ignore-placement": true
         }
-    },
-    "glyphs": "/test/integration/glyphs/{fontstack}/{range}.pbf",
-    "layers": [
-        {
-            "id": "cluster",
-            "type": "circle",
-            "source": "geojson",
-            "filter": ["==", "cluster", true],
-            "paint": {
-                "circle-color": "rgba(0, 200, 0, 1)",
-                "circle-radius": 20
-            }
-        },
-        {
-            "id": "cluster_label",
-            "type": "symbol",
-            "source": "geojson",
-            "filter": ["==", "cluster", true],
-            "layout": {
-                "text-field": "{point_count}",
-                "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
-                "text-size": 12,
-                "text-allow-overlap": true,
-                "text-ignore-placement": true
-            }
-        },
-        {
-            "id": "unclustered_point",
-            "type": "circle",
-            "source": "geojson",
-            "filter": ["!=", "cluster", true],
-            "paint": {
-                "circle-color": "rgba(0, 0, 200, 1)",
-                "circle-radius": 10
-            }
+    });
+    map.addLayer({
+        "id": "unclustered_point",
+        "type": "circle",
+        "source": "geojson",
+        "filter": ["!=", "cluster", true],
+        "paint": {
+            "circle-color": "rgba(0, 0, 200, 1)",
+            "circle-radius": 10
         }
-    ]
-};
+    });
 
-var map = window.map = new mapboxgl.Map({
-    container: 'map',
-    style: style,
-    hash: true
+    map.on('click', 'cluster', (e) => {
+        var feature = e.features[0];
+        map.getSource('geojson').getClusterExpansionZoom(feature.properties.cluster_id, (err, zoom) => {
+            if (err) throw err;
+            map.easeTo({
+                center: feature.geometry.coordinates,
+                zoom: zoom
+            });
+        });
+    });
 });
 
 map.addControl(new mapboxgl.NavigationControl());
diff --git a/src/source/geojson_source.js b/src/source/geojson_source.js
index 0d9a9291743..b2d0059f800 100644
--- a/src/source/geojson_source.js
+++ b/src/source/geojson_source.js
@@ -189,6 +189,18 @@ class GeoJSONSource extends Evented implements Source {
         return this;
     }
 
+    /**
+     * For clustered sources, fetches the zoom at which the given cluster expands.
+     *
+     * @param clusterId the value of the cluster's `cluster_id` property.
+     * @param callback A callback to be called when the zoom value is retrieved (`(error, zoom) => { ... }`).
+     * @returns {GeoJSONSource} this
+     */
+    getClusterExpansionZoom(clusterId: number, callback: Function) {
+        this.dispatcher.send('geojson.getClusterExpansionZoom', { clusterId, source: this.id }, callback, this.workerID);
+        return this;
+    }
+
     /*
      * Responsible for invoking WorkerSource's geojson.loadData target, which
      * handles loading the geojson data and preparing to serve it up as tiles,
diff --git a/src/source/geojson_worker_source.js b/src/source/geojson_worker_source.js
index ed0d55a1141..4eaeb057b27 100644
--- a/src/source/geojson_worker_source.js
+++ b/src/source/geojson_worker_source.js
@@ -37,6 +37,8 @@ export type LoadGeoJSONParameters = {
 export type LoadGeoJSON = (params: LoadGeoJSONParameters, callback: Callback<mixed>) => void;
 
 export interface GeoJSONIndex {
+    getTile(z: number, x: number, y: number): GeoJSON;
+    getClusterExpansionZoom(clusterId: number): number;
 }
 
 function loadGeoJSONTile(params: WorkerTileParameters, callback: LoadVectorDataCallback) {
@@ -274,6 +276,10 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
         }
         callback();
     }
+
+    getClusterExpansionZoom(params: {clusterId: number}, callback: Callback<mixed>) {
+        callback(null, this._geoJSONIndex.getClusterExpansionZoom(params.clusterId));
+    }
 }
 
 export default GeoJSONWorkerSource;

From ccd115738c9875da83b65d5bd7c817d077e07964 Mon Sep 17 00:00:00 2001
From: Vladimir Agafonkin <agafonkin@gmail.com>
Date: Mon, 18 Jun 2018 16:44:37 +0300
Subject: [PATCH 3/4] add getClusterChildren and getClusterLeaves methods

---
 debug/cluster.html                  | 42 ++++++++++++++++++++++++++++-
 src/source/geojson_source.js        | 33 ++++++++++++++++++++++-
 src/source/geojson_worker_source.js | 12 +++++++++
 3 files changed, 85 insertions(+), 2 deletions(-)

diff --git a/debug/cluster.html b/debug/cluster.html
index 3c409facc9d..c9223d972b0 100644
--- a/debug/cluster.html
+++ b/debug/cluster.html
@@ -62,21 +62,61 @@
         "source": "geojson",
         "filter": ["!=", "cluster", true],
         "paint": {
-            "circle-color": "rgba(0, 0, 200, 1)",
+            "circle-color": "rgb(0, 0, 200)",
             "circle-radius": 10
         }
     });
 
+    var hoverData = {
+        "type": "FeatureCollection",
+        "features": []
+    };
+
+    map.addSource('cluster_children', {
+        "type": "geojson",
+        "data": hoverData
+    });
+
+    map.addLayer({
+        "id": "cluster_children",
+        "type": "circle",
+        "source": "cluster_children",
+        "paint": {
+            "circle-color": "rgb(0, 150, 0)",
+            "circle-radius": 7
+        }
+    });
+
+    function updateHover(features) {
+        hoverData.features = features;
+        map.getSource('cluster_children').setData(hoverData);
+    }
+
     map.on('click', 'cluster', (e) => {
         var feature = e.features[0];
         map.getSource('geojson').getClusterExpansionZoom(feature.properties.cluster_id, (err, zoom) => {
             if (err) throw err;
+            updateHover([]);
             map.easeTo({
                 center: feature.geometry.coordinates,
                 zoom: zoom
             });
         });
     });
+
+    map.on('mouseenter', 'cluster', (e) => {
+        map.getCanvas().style.cursor = 'pointer';
+
+        map.getSource('geojson').getClusterLeaves(e.features[0].properties.cluster_id, Infinity, 0, (err, features) => {
+            if (err) throw err;
+            updateHover(features);
+        });
+    });
+
+    map.on('mouseleave', 'cluster', (e) => {
+        map.getCanvas().style.cursor = '';
+        updateHover([]);
+    });
 });
 
 map.addControl(new mapboxgl.NavigationControl());
diff --git a/src/source/geojson_source.js b/src/source/geojson_source.js
index b2d0059f800..d2c0a24a703 100644
--- a/src/source/geojson_source.js
+++ b/src/source/geojson_source.js
@@ -192,7 +192,7 @@ class GeoJSONSource extends Evented implements Source {
     /**
      * For clustered sources, fetches the zoom at which the given cluster expands.
      *
-     * @param clusterId the value of the cluster's `cluster_id` property.
+     * @param clusterId The value of the cluster's `cluster_id` property.
      * @param callback A callback to be called when the zoom value is retrieved (`(error, zoom) => { ... }`).
      * @returns {GeoJSONSource} this
      */
@@ -201,6 +201,37 @@ class GeoJSONSource extends Evented implements Source {
         return this;
     }
 
+    /**
+     * For clustered sources, fetches the children of the given cluster on the next zoom level (as an array of GeoJSON features).
+     *
+     * @param clusterId The value of the cluster's `cluster_id` property.
+     * @param callback A callback to be called when the features are retrieved (`(error, features) => { ... }`).
+     * @returns {GeoJSONSource} this
+     */
+    getClusterChildren(clusterId: number, callback: Function) {
+        this.dispatcher.send('geojson.getClusterChildren', { clusterId, source: this.id }, callback, this.workerID);
+        return this;
+    }
+
+    /**
+     * For clustered sources, fetches the original points that belong to the cluster (as an array of GeoJSON features).
+     *
+     * @param clusterId The value of the cluster's `cluster_id` property.
+     * @param limit The maximum number of features to return.
+     * @param offset The number of features to skip (e.g. for pagination).
+     * @param callback A callback to be called when the features are retrieved (`(error, features) => { ... }`).
+     * @returns {GeoJSONSource} this
+     */
+    getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Function) {
+        this.dispatcher.send('geojson.getClusterLeaves', {
+            source: this.id,
+            clusterId,
+            limit,
+            offset
+        }, callback, this.workerID);
+        return this;
+    }
+
     /*
      * Responsible for invoking WorkerSource's geojson.loadData target, which
      * handles loading the geojson data and preparing to serve it up as tiles,
diff --git a/src/source/geojson_worker_source.js b/src/source/geojson_worker_source.js
index 4eaeb057b27..e48e94ca709 100644
--- a/src/source/geojson_worker_source.js
+++ b/src/source/geojson_worker_source.js
@@ -38,7 +38,11 @@ export type LoadGeoJSON = (params: LoadGeoJSONParameters, callback: Callback<mix
 
 export interface GeoJSONIndex {
     getTile(z: number, x: number, y: number): GeoJSON;
+
+    // supercluster methods
     getClusterExpansionZoom(clusterId: number): number;
+    getChildren(clusterId: number): GeoJSON[];
+    getLeaves(clusterId: number, limit: number, offset: number): GeoJSON[];
 }
 
 function loadGeoJSONTile(params: WorkerTileParameters, callback: LoadVectorDataCallback) {
@@ -280,6 +284,14 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
     getClusterExpansionZoom(params: {clusterId: number}, callback: Callback<mixed>) {
         callback(null, this._geoJSONIndex.getClusterExpansionZoom(params.clusterId));
     }
+
+    getClusterChildren(params: {clusterId: number}, callback: Callback<mixed>) {
+        callback(null, this._geoJSONIndex.getChildren(params.clusterId));
+    }
+
+    getClusterLeaves(params: {clusterId: number, limit: number, offset: number}, callback: Callback<mixed>) {
+        callback(null, this._geoJSONIndex.getLeaves(params.clusterId, params.limit, params.offset));
+    }
 }
 
 export default GeoJSONWorkerSource;

From 49038cd66645e146cb592352b172cb7a6e95c5bd Mon Sep 17 00:00:00 2001
From: Vladimir Agafonkin <agafonkin@gmail.com>
Date: Thu, 21 Jun 2018 18:24:27 +0300
Subject: [PATCH 4/4] improve flow typings

---
 src/source/geojson_source.js        | 11 ++++++-----
 src/source/geojson_worker_source.js | 14 ++++++--------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/source/geojson_source.js b/src/source/geojson_source.js
index d2c0a24a703..a63e5fcac4f 100644
--- a/src/source/geojson_source.js
+++ b/src/source/geojson_source.js
@@ -175,7 +175,8 @@ class GeoJSONSource extends Evented implements Source {
         this.fire(new Event('dataloading', {dataType: 'source'}));
         this._updateWorkerData((err) => {
             if (err) {
-                return this.fire(new ErrorEvent(err));
+                this.fire(new ErrorEvent(err));
+                return;
             }
 
             const data: Object = { dataType: 'source', sourceDataType: 'content' };
@@ -196,7 +197,7 @@ class GeoJSONSource extends Evented implements Source {
      * @param callback A callback to be called when the zoom value is retrieved (`(error, zoom) => { ... }`).
      * @returns {GeoJSONSource} this
      */
-    getClusterExpansionZoom(clusterId: number, callback: Function) {
+    getClusterExpansionZoom(clusterId: number, callback: Callback<number>) {
         this.dispatcher.send('geojson.getClusterExpansionZoom', { clusterId, source: this.id }, callback, this.workerID);
         return this;
     }
@@ -208,7 +209,7 @@ class GeoJSONSource extends Evented implements Source {
      * @param callback A callback to be called when the features are retrieved (`(error, features) => { ... }`).
      * @returns {GeoJSONSource} this
      */
-    getClusterChildren(clusterId: number, callback: Function) {
+    getClusterChildren(clusterId: number, callback: Callback<Array<GeoJSONFeature>>) {
         this.dispatcher.send('geojson.getClusterChildren', { clusterId, source: this.id }, callback, this.workerID);
         return this;
     }
@@ -222,7 +223,7 @@ class GeoJSONSource extends Evented implements Source {
      * @param callback A callback to be called when the features are retrieved (`(error, features) => { ... }`).
      * @returns {GeoJSONSource} this
      */
-    getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Function) {
+    getClusterLeaves(clusterId: number, limit: number, offset: number, callback: Callback<Array<GeoJSONFeature>>) {
         this.dispatcher.send('geojson.getClusterLeaves', {
             source: this.id,
             clusterId,
@@ -237,7 +238,7 @@ class GeoJSONSource extends Evented implements Source {
      * handles loading the geojson data and preparing to serve it up as tiles,
      * using geojson-vt or supercluster as appropriate.
      */
-    _updateWorkerData(callback: Function) {
+    _updateWorkerData(callback: Callback<void>) {
         const options = extend({}, this.workerOptions);
         const data = this._data;
         if (typeof data === 'string') {
diff --git a/src/source/geojson_worker_source.js b/src/source/geojson_worker_source.js
index e48e94ca709..97117b40530 100644
--- a/src/source/geojson_worker_source.js
+++ b/src/source/geojson_worker_source.js
@@ -23,8 +23,6 @@ import type {LoadVectorDataCallback} from './vector_tile_worker_source';
 import type {RequestParameters} from '../util/ajax';
 import type { Callback } from '../types/callback';
 
-export type GeoJSON = Object;
-
 export type LoadGeoJSONParameters = {
     request?: RequestParameters,
     data?: string,
@@ -37,12 +35,12 @@ export type LoadGeoJSONParameters = {
 export type LoadGeoJSON = (params: LoadGeoJSONParameters, callback: Callback<mixed>) => void;
 
 export interface GeoJSONIndex {
-    getTile(z: number, x: number, y: number): GeoJSON;
+    getTile(z: number, x: number, y: number): Object;
 
     // supercluster methods
     getClusterExpansionZoom(clusterId: number): number;
-    getChildren(clusterId: number): GeoJSON[];
-    getLeaves(clusterId: number, limit: number, offset: number): GeoJSON[];
+    getChildren(clusterId: number): Array<GeoJSONFeature>;
+    getLeaves(clusterId: number, limit: number, offset: number): Array<GeoJSONFeature>;
 }
 
 function loadGeoJSONTile(params: WorkerTileParameters, callback: LoadVectorDataCallback) {
@@ -281,15 +279,15 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
         callback();
     }
 
-    getClusterExpansionZoom(params: {clusterId: number}, callback: Callback<mixed>) {
+    getClusterExpansionZoom(params: {clusterId: number}, callback: Callback<number>) {
         callback(null, this._geoJSONIndex.getClusterExpansionZoom(params.clusterId));
     }
 
-    getClusterChildren(params: {clusterId: number}, callback: Callback<mixed>) {
+    getClusterChildren(params: {clusterId: number}, callback: Callback<Array<GeoJSONFeature>>) {
         callback(null, this._geoJSONIndex.getChildren(params.clusterId));
     }
 
-    getClusterLeaves(params: {clusterId: number, limit: number, offset: number}, callback: Callback<mixed>) {
+    getClusterLeaves(params: {clusterId: number, limit: number, offset: number}, callback: Callback<Array<GeoJSONFeature>>) {
         callback(null, this._geoJSONIndex.getLeaves(params.clusterId, params.limit, params.offset));
     }
 }