Merge pull request #198 from ihmeuw/update-disputed-map-handling

Update how disputed locations are matched in map.jsx
ihmeuw · Apr 24, 2020 · 31b6b51 · 31b6b51
2 parents ccd015b + c0a6cc9
commit 31b6b51
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 9 deletions.
diff --git a/src/ui/compositions/map/demo/app.jsx b/src/ui/compositions/map/demo/app.jsx
@@ -9,6 +9,7 @@ import {
   get as getValue,
   reduce,
   xor,
+  uniqueId,
 } from 'lodash';
 
 import Map from '../';
@@ -151,6 +152,47 @@ class App extends React.Component {
     });
   }
 
+  filterGeometries(key) {
+    return (geometries, feature) => {
+      const { claimants = [], admins = [] } = feature.properties;
+
+      if (key === 'disputes') {
+        geometries.push({
+          ...feature,
+          properties: {
+            disputed: true,
+            claimants,
+            admins,
+            loc_id: uniqueId('dispute'),
+          },
+        });
+      } else {
+        geometries.push({
+          ...feature,
+        });
+      }
+
+      return geometries;
+    };
+  }
+
+  prepTopology(topology) {
+    const { objects, ...restTopology } = topology;
+    return {
+      ...restTopology,
+      objects: reduce(objects, (results, { geometries, ...restObject }, key) => {
+        const filteredGeometries = geometries.reduce(this.filterGeometries(key), []);
+        if (filteredGeometries.length || key === 'disputes') {
+          results[key] = {
+            ...restObject,
+            geometries: filteredGeometries,
+          };
+        }
+        return results;
+      }, {}),
+    };
+  }
+
   render() {
     const { topology } = this.props;
     const { colorAccessor, data, mapLevel, range, selections, selectedChoroplethDomain } = this.state;
@@ -167,6 +209,7 @@ class App extends React.Component {
           focus={this.state.focus}
           geometryKeyField={`properties.${keyField}`}
           colorAccessor={colorAccessor}
+          layerStyle={layer => (layer === 'disputes') ? { fill: 'transparent' } : {}}
           keyField={keyField}
           onClick={this.onClick}
           onMouseOver={this.onMouseOver}
@@ -176,7 +219,7 @@ class App extends React.Component {
           selectedLocations={selections}
           sliderHandleFormat={numberFormat}
           topojsonObjects={MapLevel[mapLevel]}
-          topology={topology}
+          topology={this.prepTopology(topology)}
           unit="Probability of death"
           valueField={valueField}
         />

diff --git a/src/ui/compositions/map/demo/world.topo.json b/src/ui/compositions/map/demo/world.topo.json
diff --git a/src/ui/compositions/map/src/map.jsx b/src/ui/compositions/map/src/map.jsx
@@ -86,13 +86,11 @@ export default class Map extends React.Component {
     matches.forEach((feature) => {
       const { properties } = feature;
       const locId = propResolver(feature, geometryKeyField);
-
-      // If a locId exists the feature is not disputed.
-      if (locId) {
+      if (properties.claimants || properties.admins) {
+        claimants.addEach(properties.claimants || []);
+        admins.addEach(properties.admins || []);
+      } else if (locId) {
         nonDisputedLocations.add(locId);
-      } else {
-        claimants.addEach(properties.claimants);
-        admins.addEach(properties.admins);
       }
     });
 
@@ -208,13 +206,21 @@ export default class Map extends React.Component {
     return meshType === Map.classifyArc(geometryKeyField, matches, keysOfSelectedLocations);
   }
 
+  layerStyle(layer) {
+    const { layerStyle } = this.props;
+    const styleReset = { stroke: 'none' };
+    if (typeof layerStyle === 'function') return { ...styleReset, ...layerStyle(layer) };
+    if (typeof layerStyle === 'object') return { ...styleReset, ...layerStyle };
+    return styleReset;
+  }
+
   createLayers(layers) {
     const styleReset = { stroke: 'none' };
     const features = map(layers, layer => (
       {
         name: layer,
         object: layer,
-        style: styleReset,
+        style: this.layerStyle(layer),
         selectedStyle: styleReset,
         type: 'feature',
       }
@@ -493,6 +499,13 @@ Map.propTypes = {
     PropTypes.func,
   ]).isRequired,
 
+  /**
+   * inline styles applied to layer
+   * if a function, passed layer;
+   * signature: (layer) => style object
+   */
+  layerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+
   /**
    * classname applied to div containing choropleth legend
    */