Feature: biomass loss widget + woody biomass analysis

.gitignore

@@ -38,6 +38,7 @@ jstest/SpecRunner.html
 package-lock.json
 /cypress/videos
 /cypress/screenshots
+.swp
 
 # Ignore Vagrant
 .vagrant

app/javascript/components/charts/composed-chart/composed-chart-component.js

@@ -106,7 +106,7 @@ class CustomComposedChart extends PureComponent {
                 fontSize: simple ? '10px' : '12px',
                 fill: '#555555'
               }}
-              interval={0}
+              interval="preserveStartEnd"
               {...xAxis}
             />
             {!simple && (

app/javascript/components/map-v2/components/analysis/actions.js

@@ -44,7 +44,8 @@ export const getAnalysis = createThunkAction(
     fetchUmdLossGain(location)
       .then(responses => dispatch(setAnalysisData(responses)))
       .catch(error => {
-        const slug = error.config.url.split('/')[4];
+        const slugUrl = error.config.url.split('/')[4];
+        const slug = slugUrl.split('?')[0];
         const layerName = endpoints.find(e => e.slug === slug).name;
         const { response } = error;
         const errors =

app/javascript/components/map-v2/components/analysis/component.jsx

@@ -22,9 +22,11 @@ class AnalysisComponent extends PureComponent {
       handleFetchAnalysis,
       setSubscribeSettings,
       endpoints,
+      widgetLayers,
       embed
     } = this.props;
     const hasLayers = endpoints && !!endpoints.length;
+    const hasWidgets = widgetLayers && !!widgetLayers.length;
 
     return (
       <Fragment>
@@ -59,6 +61,8 @@ class AnalysisComponent extends PureComponent {
               clearAnalysis={clearAnalysis}
               goToDashboard={goToDashboard}
               hasLayers={hasLayers}
+              hasWidgets={hasWidgets}
+              analysis
             />
           ) : (
             <ChoseAnalysis />
@@ -99,6 +103,7 @@ AnalysisComponent.propTypes = {
   clearAnalysis: PropTypes.func,
   className: PropTypes.string,
   endpoints: PropTypes.array,
+  widgetLayers: PropTypes.array,
   loading: PropTypes.bool,
   location: PropTypes.object,
   goToDashboard: PropTypes.func,

app/javascript/components/map-v2/components/analysis/components/draw-analysis/component.jsx

@@ -74,12 +74,12 @@ class DrawAnalysis extends PureComponent {
       loading,
       fullLocationName,
       error,
-      showWidgets,
       setModalSources,
       handleShowDownloads,
       showDownloads,
       downloadUrls,
       hasLayers,
+      hasWidgets,
       zoomLevel
     } = this.props;
 
@@ -138,10 +138,12 @@ class DrawAnalysis extends PureComponent {
         </div>
         <div className="results">
           {hasLayers &&
+            !hasWidgets &&
             !loading &&
             !error &&
             isEmpty(data) && <NoContent message="No analysis data available" />}
           {!hasLayers &&
+            !hasWidgets &&
             !loading && (
               <NoContent>
                 Select a{' '}
@@ -158,14 +160,14 @@ class DrawAnalysis extends PureComponent {
                 data layer to analyze.
               </NoContent>
             )}
-          {hasLayers &&
+          {(hasLayers || hasWidgets) &&
             !loading &&
-            !isEmpty(data) && (
+            !error && (
               <Fragment>
                 <ul className="draw-stats">
-                  {data.map(d => this.renderStatItem(d))}
+                  {data && data.map(d => this.renderStatItem(d))}
                 </ul>
-                {showWidgets && <Widgets simple analysis />}
+                <Widgets simple analysis />
                 <div className="disclaimers">
                   {zoomLevel < 11 && (
                     <p>
@@ -204,7 +206,6 @@ class DrawAnalysis extends PureComponent {
 }
 
 DrawAnalysis.propTypes = {
-  showWidgets: PropTypes.bool,
   data: PropTypes.array,
   setShareModal: PropTypes.func,
   clearAnalysis: PropTypes.func,
@@ -216,6 +217,7 @@ DrawAnalysis.propTypes = {
   setMenuSettings: PropTypes.func,
   showDownloads: PropTypes.bool,
   hasLayers: PropTypes.bool,
+  hasWidgets: PropTypes.bool,
   downloadUrls: PropTypes.array,
   zoomLevel: PropTypes.number
 };

app/javascript/components/map-v2/components/analysis/components/draw-analysis/selectors.js

@@ -1,11 +1,9 @@
 import { createSelector, createStructuredSelector } from 'reselect';
-import isEmpty from 'lodash/isEmpty';
-import flatMap from 'lodash/flatMap';
 
 import { buildLocationName, buildFullLocationName } from 'utils/format';
 
 import { getActiveLayers, getMapZoom } from 'components/map-v2/selectors';
-import { filterWidgetsByCategoryAndLayers } from 'components/widgets/selectors';
+import { getWidgetLayers } from 'components/map-v2/components/analysis/selectors';
 
 const selectLocation = state => state.location && state.location.payload;
 const selectLoading = state =>
@@ -15,11 +13,7 @@ const selectError = state => state.analysis.error;
 const selectAdmins = state => state.countryData.countries;
 const selectAdmin1s = state => state.countryData.regions;
 const selectAdmin2s = state => state.countryData.subRegions;
-
-export const getShowWidgets = createSelector(
-  [selectLocation],
-  location => location && location.type === 'country'
-);
+const selectGeostore = state => state.geostore.geostore;
 
 export const getLocationName = createSelector(
   [selectLocation, selectAdmins, selectAdmin1s, selectAdmin2s],
@@ -54,32 +48,23 @@ export const getDataFromLayers = createSelector(
     selectData,
     getLocationName,
     selectLocation,
-    filterWidgetsByCategoryAndLayers
+    getWidgetLayers,
+    selectGeostore
   ],
-  (layers, data, locationName, location, widgets) => {
-    if (!layers || !layers.length || isEmpty(data)) return null;
+  (layers, data, locationName, location, widgetLayers, geostore) => {
+    if (!layers || !layers.length) return null;
 
-    const activeWidgets =
-      widgets &&
-      widgets.filter(
-        w => w.config.analysis && w.config.layers && w.config.layers.length
-      );
-    const widgetLayers =
-      activeWidgets && flatMap(activeWidgets.map(w => w.config.layers));
     const { type } = location;
     const routeType = type === 'country' ? 'admin' : type;
-    const firstDataObj = data[Object.keys(data)[0]];
-    const area =
-      firstDataObj.areaHa ||
-      (firstDataObj.totals && firstDataObj.totals.areaHa);
+    const { areaHa } = geostore;
 
     return [
       {
         label:
           location.type !== 'geostore'
             ? `${locationName} total area`
             : 'selected area',
-        value: area || 0,
+        value: areaHa || 0,
         unit: 'ha'
       }
     ].concat(
@@ -96,16 +81,24 @@ export const getDataFromLayers = createSelector(
           if (!analysisConfig) {
             analysisConfig = l.analysisConfig.find(a => a.type === 'geostore');
           }
-          const { subKey, key, service, unit } = analysisConfig || {};
+          const { subKey, key, keys, service, unit } = analysisConfig || {};
           const dataByService = data[service] || {};
           const value = subKey
             ? dataByService[key] && dataByService[key][subKey]
             : dataByService[key];
           const { params, decodeParams } = l;
 
+          const keysValue =
+            keys &&
+            keys.map(k => ({
+              label: k.title,
+              value: dataByService[k.key],
+              unit: k.unit
+            }));
+
           return {
             label: l.name,
-            value: value || 0,
+            value: keysValue || value || 0,
             downloadUrls: dataByService && dataByService.downloadUrls,
             unit,
             color: l.color,
@@ -155,6 +148,5 @@ export const getDrawAnalysisProps = createStructuredSelector({
   layers: getActiveLayers,
   downloadUrls: getDownloadLinks,
   error: selectError,
-  showWidgets: getShowWidgets,
   zoomLevel: getMapZoom
 });

app/javascript/components/map-v2/components/analysis/selectors.js

@@ -1,12 +1,14 @@
 import { createSelector, createStructuredSelector } from 'reselect';
 import compact from 'lodash/compact';
 import groupBy from 'lodash/groupBy';
+import flatMap from 'lodash/flatMap';
 
 import {
   getAllBoundaries,
   getActiveBoundaryDatasets,
   getAllLayers
 } from 'components/map-v2/selectors';
+import { filterWidgetsByCategoryAndLayers } from 'components/widgets/selectors';
 
 import layersIcon from 'assets/icons/layers.svg';
 import analysisIcon from 'assets/icons/analysis.svg';
@@ -50,40 +52,53 @@ export const getShowDraw = createSelector(
   settings => settings.showDraw
 );
 
+export const getWidgetLayers = createSelector(
+  filterWidgetsByCategoryAndLayers,
+  widgets => {
+    const activeWidgets =
+      widgets &&
+      widgets.filter(
+        w => w.config.analysis && w.config.layers && w.config.layers.length
+      );
+    return activeWidgets && flatMap(activeWidgets.map(w => w.config.layers));
+  }
+);
+
 export const getLayerEndpoints = createSelector(
-  [getAllLayers, selectLocation],
-  (layers, location) => {
+  [getAllLayers, selectLocation, getWidgetLayers],
+  (layers, location, widgetLayers) => {
     if (!layers || !layers.length) return null;
     const { type, adm2 } = location;
     const routeType = type === 'country' ? 'admin' : type;
     const lossLayer = layers.find(l => l.metadata === 'tree_cover_loss');
-
     const endpoints = compact(
-      layers.filter(l => l.analysisConfig).map(l => {
-        const analysisConfig =
-          l.analysisConfig.find(
-            a =>
-              a.type === routeType ||
-              ((routeType === 'use' || routeType === 'wdpa') &&
-                a.type === 'geostore')
-          ) || {};
-        const { params, decodeParams } = l;
-
-        return {
-          name: l.name,
-          version: analysisConfig.version || 'v1',
-          slug: analysisConfig.service,
-          params: {
-            ...(analysisConfig.service === 'umd-loss-gain' &&
-              lossLayer && {
-                ...lossLayer.decodeParams
-              }),
-            ...decodeParams,
-            ...params,
-            query: analysisConfig.query
-          }
-        };
-      })
+      layers
+        .filter(l => l.analysisConfig && !widgetLayers.includes(l.id))
+        .map(l => {
+          const analysisConfig =
+            l.analysisConfig.find(
+              a =>
+                a.type === routeType ||
+                ((routeType === 'use' || routeType === 'wdpa') &&
+                  a.type === 'geostore')
+            ) || {};
+          const { params, decodeParams } = l;
+
+          return {
+            name: l.name,
+            version: analysisConfig.version || 'v1',
+            slug: analysisConfig.service,
+            params: {
+              ...(analysisConfig.service === 'umd-loss-gain' &&
+                lossLayer && {
+                  ...lossLayer.decodeParams
+                }),
+              ...decodeParams,
+              ...params,
+              query: analysisConfig.query
+            }
+          };
+        })
     );
 
     const groupedEndpoints = groupBy(endpoints, 'slug');
@@ -135,5 +150,6 @@ export const getAnalysisProps = createStructuredSelector({
   activeBoundary: getActiveBoundaryDatasets,
   location: selectLocation,
   hidden: getHidden,
-  embed: selectEmbed
+  embed: selectEmbed,
+  widgetLayers: getWidgetLayers
 });

app/javascript/components/map-v2/components/data-analysis-menu/component.jsx

@@ -56,7 +56,7 @@ class DataAnalysisMenu extends PureComponent {
               <MapLegend />
             </div>
           )}
-        {!hidden && showAnalysis && <Analysis className="analysis" />}
+        {!hidden && showAnalysis && <Analysis className="analysis" analysis />}
       </div>
     );
   }

app/javascript/components/ui/dropdown/themes/dropdown-dark.scss

@@ -18,7 +18,7 @@ $dd-dark-font-size: rem(40px);
       top: 0;
       left: 0;
       right: 0;
-      padding-right: 0;
+      padding-right: rem(25px);
 
       &.no-value {
         color: rgba($white, 0.5);

app/javascript/components/widgets/components/widget/index.js

@@ -41,7 +41,8 @@ class WidgetContainer extends Component {
       'activeData',
       'weeks',
       'page',
-      'highlighted'
+      'highlighted',
+      'unit'
     ];
     let changedSetting = '';
     if (settings && prevProps.settings) {

app/javascript/components/widgets/components/widget/selectors.js

@@ -68,16 +68,18 @@ export const getRangeYears = createSelector(
     const { startYears, endYears, yearsRange } = config.options || {};
     if (!startYears || !endYears || isEmpty(data)) return null;
     const flatData = flattenObj(data);
-    let years = [];
-    Object.keys(flatData).forEach(key => {
-      if (key.includes('year')) {
-        years = years.concat(flatData[key]);
-      }
-    });
-    years = uniq(years);
-    years = yearsRange
-      ? years.filter(y => y >= yearsRange[0] && y <= yearsRange[1])
-      : years;
+    let years = data.years || [];
+    if (years.length) {
+      Object.keys(flatData).forEach(key => {
+        if (key.includes('year')) {
+          years = years.concat(flatData[key]);
+        }
+      });
+      years = uniq(years);
+      years = yearsRange
+        ? years.filter(y => y >= yearsRange[0] && y <= yearsRange[1])
+        : years;
+    }
 
     return sortBy(
       years.map(y => ({