From 47b9a66816f66fa092f95f2b4744e12b227707c1 Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Mon, 5 Oct 2020 09:45:17 -0700
Subject: [PATCH] Working on select that selects all events in a cluster; need
 to configure UI to both zoom and select events

---
 src/common/utilities.js |  4 ++++
 src/components/Map.jsx  | 15 ++++++++++++++-
 src/store/initial.js    |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/common/utilities.js b/src/common/utilities.js
index c77377c..78d3443 100644
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -180,6 +180,10 @@ export function isLongitude(lng) {
   return !!lng && isFinite(lng) && Math.abs(lng) <= 180;
 }
 
+export function mapClustersToLocations(clusters, locations) {
+  return clusters.map(cl => locations.find(location =>  location.label === cl.properties.id))
+}
+
 export const dateMin = function () {
   return Array.prototype.slice.call(arguments).reduce(function (a, b) {
     return a < b ? a : b
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 6ce2248..8940d17 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -17,6 +17,8 @@ import SelectedEvents from './presentational/Map/SelectedEvents.jsx'
 import Narratives from './presentational/Map/Narratives'
 import DefsMarkers from './presentational/Map/DefsMarkers.jsx'
 
+import { mapClustersToLocations } from '../common/utilities' 
+
 // NB: important constants for map, TODO: make statics
 const supportedMapboxMap = ['streets', 'satellite']
 const defaultToken = 'your_token'
@@ -197,8 +199,19 @@ class Map extends React.Component {
   onClusterSelect (e) {
     const { id } = e.target
     const { longitude, latitude } = e.target.attributes
+    
+    // const clusterLeaves = this.index.getLeaves(parseInt(id), Infinity, 0)
+    // const leavesToLocations = mapClustersToLocations(clusterLeaves, this.props.domain.locations)
+
+    // const locationEvents = leavesToLocations.reduce((acc, loc) => {
+    //   loc.events.forEach(evt => acc.push(evt))
+    //   return acc
+    // }, [])
+    
     const expansionZoom = Math.max(this.index.getClusterExpansionZoom(parseInt(id)), this.index.options.minZoom)
     this.map.flyTo(new L.LatLng(latitude.value, longitude.value), expansionZoom)
+
+    // this.props.methods.onSelect(locationEvents)
   }
 
   getClientDims () {
@@ -282,7 +295,7 @@ class Map extends React.Component {
 
   renderEvents () {
     const individualClusters = this.state.clusters.filter(cl => !cl.properties.cluster)
-    const filteredLocations = individualClusters.map(cl => this.props.domain.locations.find(location => location.label === cl.properties.id))
+    const filteredLocations = mapClustersToLocations(individualClusters, this.props.domain.locations)
     return (
       <Events
         svg={this.svgRef.current}
diff --git a/src/store/initial.js b/src/store/initial.js
index a3b6bd3..9e38b0e 100644
--- a/src/store/initial.js
+++ b/src/store/initial.js
@@ -50,7 +50,7 @@ const initial = {
       anchor: [31.356397, 34.784818],
       startZoom: 11,
       minZoom: 0,
-      maxZoom: 18,
+      maxZoom: 20,
       bounds: null,
       maxBounds: [[180, -180], [-180, 180]],
       clusterRadius: 20,