refactor task clustering toggles and limits (#2333)

* refactor task clustering toggles and limits * reconfigure cluster toggle conditions * allow cluster toggle on challenge browse map and bundling widget * add allowClusterToggle to active bundle map
maproulette · May 13, 2024 · 47ca2d1 · 47ca2d1
1 parent 58a1ca4
commit 47ca2d1
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 7 deletions.
diff --git a/src/components/ChallengeDetail/ChallengeDetail.js b/src/components/ChallengeDetail/ChallengeDetail.js
@@ -454,7 +454,7 @@ export class ChallengeDetail extends Component {
         }
         showMarkerPopup={showMarkerPopup}
         challenge={challenge}
-        allowClusterToggle={false}
+        allowClusterToggle
         criteria={{
           boundingBox: fromLatLngBounds(this.state.bounds),
           zoom: this.state.zoom,

diff --git a/src/components/HOCs/WithChallengeTaskClusters/WithChallengeTaskClusters.js b/src/components/HOCs/WithChallengeTaskClusters/WithChallengeTaskClusters.js
@@ -114,7 +114,7 @@ export const WithChallengeTaskClusters = function(WrappedComponent, storeTasks=f
             // (unless we are zoomed all the way in already)
             if (results.totalCount > UNCLUSTER_THRESHOLD &&
                 _get(this.props, 'criteria.zoom', 0) < MAX_ZOOM) {
-              this.props.fetchTaskClusters(challengeId, searchCriteria, 500, overrideDisable
+              this.props.fetchTaskClusters(challengeId, searchCriteria, 25, overrideDisable
               ).then(results => {
                 const clusters = results.clusters
                 if (currentFetchId >= this.state.fetchId) {
@@ -135,7 +135,7 @@ export const WithChallengeTaskClusters = function(WrappedComponent, storeTasks=f
         })
       }
       else {
-        this.props.fetchTaskClusters(challengeId, searchCriteria, 500, overrideDisable
+        this.props.fetchTaskClusters(challengeId, searchCriteria, 25, overrideDisable
         ).then(results => {
           const clusters = results.clusters
           if (currentFetchId >= this.state.fetchId) {

diff --git a/src/components/TaskClusterMap/TaskClusterMap.js b/src/components/TaskClusterMap/TaskClusterMap.js
@@ -66,7 +66,7 @@ export const UNCLUSTER_THRESHOLD = 1000 // max number of tasks
 /**
  * The number of clusters to show.
  */
-export const CLUSTER_POINTS = 250
+export const CLUSTER_POINTS = 25
 
 /**
  * The size of cluster marker icons in pixels
@@ -191,6 +191,10 @@ export class TaskClusterMap extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
+    if(!this.props.showAsClusters && this.props.totalTaskCount > UNCLUSTER_THRESHOLD) {
+      this.props.toggleShowAsClusters()
+    }
+
     if (this.props.taskMarkers && !this.props.delayMapLoad &&
        (!_isEqual(this.props.taskMarkers, prevProps.taskMarkers) ||
         this.props.selectedClusters !== prevProps.selectedClusters)) {
@@ -676,10 +680,12 @@ export class TaskClusterMap extends Component {
       }).reverse()
     }
 
-    const canClusterToggle = !!this.props.allowClusterToggle &&
+    const canClusterToggle = (
+      this.props.allowClusterToggle &&
       this.props.totalTaskCount <= UNCLUSTER_THRESHOLD &&
       this.props.totalTaskCount > CLUSTER_POINTS &&
       this.currentZoom < MAX_ZOOM
+    )
 
     if (!this.currentBounds && this.state.mapMarkers) {
       // Set Current Bounds to the minimum bounding box of our markers

diff --git a/src/components/Widgets/TaskBundleWidget/TaskBundleWidget.js b/src/components/Widgets/TaskBundleWidget/TaskBundleWidget.js
@@ -333,6 +333,7 @@ const ActiveBundle = props => {
       taskCenter={AsMappableTask(props.task).calculateCenterPoint()}
       boundingBox={_get(props, boundingBoxData)}
       initialBounds={toLatLngBounds(_get(props, boundingBoxData, []))}
+      allowClusterToggle
       hideSearchControl
       allowSpidering
       selectedTasks={props.selectedTasks}
@@ -514,7 +515,7 @@ const BuildBundle = props => {
       initialBounds={toLatLngBounds(_get(props, 'criteria.boundingBox', []))}
       onBulkTaskSelection={props.selectTasks}
       onBulkTaskDeselection={props.deselectTasks}
-      allowClusterToggle={false}
+      allowClusterToggle
       hideSearchControl
       allowSpidering
       showScaleControl

diff --git a/src/services/Task/TaskClusters.js b/src/services/Task/TaskClusters.js
@@ -47,7 +47,7 @@ export const clearTaskClusters = function() {
  * boundingBox string -- see Search.generateSearchParametersString for details
  * of supported filters
  */
-export const fetchTaskClusters = function(challengeId, criteria, points=250, overrideDisable=false) {
+export const fetchTaskClusters = function(challengeId, criteria, points=25, overrideDisable=false) {
   return function(dispatch) {
     if (process.env.REACT_APP_DISABLE_TASK_CLUSTERS === 'true' && !overrideDisable) {
       return new Promise((resolve) => resolve());