Feature/map variables metadata endpoint

html/flows.ejs

@@ -69,7 +69,7 @@
           Loading...
         </div>
         <div class="js-sankey-tooltip c-sankey-tooltip">
-          
+
         </div>
         <svg class="js-sankey-canvas sankey">
           <defs>

public/jsonMockups/get_map_variables_metadata.json

@@ -0,0 +1,131 @@
+{
+  "folders": [
+    {
+      "id": 0,
+      "name": "Trading"
+    },
+    {
+      "id": 1,
+      "name": "Environment"
+    },
+    {
+      "id": 2,
+      "name": "Economy"
+    },
+    {
+      "id": 3,
+      "name": "Conflicts"
+    }
+  ],
+  "default_selection": [17, 15],
+  "variables": [
+    {
+      "id": 17,
+      "name": "Production of soy",
+      "type": "quant",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 0,
+      "unit": "Tn"
+    },
+    {
+      "id": 14,
+      "name": "% soy of total farming land",
+      "type": "ind",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 0,
+      "unit": "%"
+    },
+    {
+      "id": 15,
+      "name": "Deforestation rate",
+      "type": "ind",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 1,
+      "unit": "ha/yr"
+    },
+    {
+      "id": 16,
+      "name": "Water scarcity",
+      "type": "ind",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 1,
+      "unit": "/7"
+    },
+    {
+      "id": 19,
+      "name": "Biodiversity",
+      "type": "quant",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 1,
+      "unit": "-"
+    },
+    {
+      "id": 17,
+      "name": "Human development index",
+      "type": "ind",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 2,
+      "unit": "/1"
+    },
+    {
+      "id": 18,
+      "name": "GDP per capita",
+      "type": "ind",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 2,
+      "unit": "USD/capita"
+    },
+    {
+      "id": 19,
+      "name": "% GDP from agriculture",
+      "type": "ind",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 2,
+      "unit": "%"
+    },
+    {
+      "id": 20,
+      "name": "Smallholder dominance",
+      "type": "ind",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 2,
+      "unit": "%"
+    },
+    {
+      "id": 21,
+      "name": "Reported cases of forced labour (2014)",
+      "type": "quant",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 3,
+      "unit": "individuals with lawsuits"
+    },
+    {
+      "id": 22,
+      "name": "Land conflicts (2014)",
+      "type": "quant",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 3,
+      "unit": "land conflicts"
+    },
+    {
+      "id": 23,
+      "name": "Number of environmental embargos (2015)",
+      "type": "quant",
+      "buckets3": ["<1k", "1.5k", ">2k"],
+      "buckets5": ["<1k", "1.25k", "1.5k", "1.75k", ">2k"],
+      "folder_id": 3,
+      "unit": "fines & embargoes"
+    }
+  ]
+}

scripts/actions/flows.actions.js

@@ -7,7 +7,7 @@ import getNodeIdFromGeoId from './helpers/getNodeIdFromGeoId';
 import getNodesSelectionAction from './helpers/getNodesSelectionAction';
 import getSelectedNodesStillVisible from './helpers/getSelectedNodesStillVisible';
 import setGeoJSONMeta from './helpers/setGeoJSONMeta';
-
+import getNodeMetaUid from 'reducers/helpers/getNodeMetaUid';
 
 export function resetState() {
   return (dispatch) => {
@@ -74,7 +74,7 @@ export function selectYears(years) {
   };
 }
 
-export function selectMapVariables(variableData) {
+export function selectMapVariable(variableData) {
   return dispatch => {
     dispatch({
       type: actions.SELECT_MAP_VARIABLES,
@@ -146,16 +146,35 @@ export function loadNodes() {
       // column_id: 2
     };
 
-    const url = getURLFromParams('/v1/get_nodes', params);
+    const getNodesURL = getURLFromParams('/v1/get_nodes', params);
+    const getMapVariablesMetadataURL = 'jsonMockups/get_map_variables_metadata.json';
 
-    fetch(url)
-      .then(res => res.text())
-      .then(payload => {
-        dispatch({
-          type: actions.GET_NODES,
-          payload
-        });
+    Promise.all([getNodesURL, getMapVariablesMetadataURL].map(url =>
+      fetch(url).then(resp => resp.text())
+    )).then(rawPayload => {
+      const payload = {
+        nodesJSON: JSON.parse(rawPayload[0]),
+        mapVariablesMetaJSON: JSON.parse(rawPayload[1])
+      };
+
+      dispatch({
+        type: actions.GET_NODES,
+        payload
       });
+
+      const selection = payload.mapVariablesMetaJSON.default_selection;
+      if (selection !== undefined) {
+        selection.forEach((selection, index) => {
+          const direction = (index === 0) ? 'vertical' : 'horizontal';
+          const selectedVariable = getState().flows.mapVariables.find(variable => variable.id === selection);
+          dispatch(selectMapVariable({
+            direction,
+            title: selectedVariable.name,
+            uid: getNodeMetaUid(selectedVariable.type, selectedVariable.id)
+          }));
+        });
+      }
+    });
   };
 }
 

scripts/components/map-variables.component.js

@@ -1,7 +1,7 @@
 import 'styles/components/map/map-layers.scss';
 import 'styles/components/shared/radio-btn.scss';
 import 'styles/components/shared/switcher.scss';
-import MapVariableTemplate from 'ejs!templates/mapVariable.ejs';
+import MapVariablesTemplate from 'ejs!templates/mapVariables.ejs';
 
 export default class {
 
@@ -11,8 +11,9 @@ export default class {
     this.tooltip = document.querySelector('.tooltip-layout');
   }
 
-  loadMapVariables(variables) {
-    this.layerList.innerHTML = variables.map(layer => MapVariableTemplate(layer)).join('');
+  loadMapVariables(variablesByFolder) {
+    // this.layerList.innerHTML = variables.map(layer => MapVariablesTemplate(layer)).join('');
+    this.layerList.innerHTML = MapVariablesTemplate({folders: variablesByFolder});
 
     this._setVars();
     this._setEventListeners();

scripts/containers/map-variables.container.js

@@ -1,15 +1,25 @@
 import connect from 'connect';
-import { selectMapVariables } from 'actions/flows.actions';
+import { selectMapVariable } from 'actions/flows.actions';
 import { toggleModal } from 'actions/app.actions';
 import MapVariables from 'components/map-variables.component';
 
 const mapMethodsToState = (state) => ({
-  loadMapVariables: state.flows.mapVariables,
+  loadMapVariables: {
+    _comparedValue: (state) => state.flows.mapVariables,
+    _returnedValue: (state) => {
+      return state.flows.mapVariablesFolders.map(folder => {
+        return {
+          folder,
+          variables: state.flows.mapVariables.filter(variable => variable.folder_id === folder.id)
+        };
+      });
+    }
+  },
   selectMapVariables: state.flows.selectedMapVariables,
 });
 
 const mapViewCallbacksToActions = () => ({
-  onMapVariablesSelected: variableData => selectMapVariables(variableData),
+  onMapVariablesSelected: variableData => selectMapVariable(variableData),
   onToggleModal: (visibility, data) => toggleModal(visibility, data)
 });
 

scripts/reducers/flows.reducer.js

@@ -55,16 +55,18 @@ export default function (state = {}, action) {
     break;
 
   case actions.GET_NODES: {
-    const jsonPayload = JSON.parse(action.payload);
-    const nodesMeta = jsonPayload.data;
-    const rawMapVariables = jsonPayload.include.includedLayers;
+    const nodesMeta = action.payload.nodesJSON.data;
 
+    const mapVariablesMeta = action.payload.mapVariablesMetaJSON;
+    const rawMapVariables = mapVariablesMeta.variables;
     const mapVariables = getMapVariables(rawMapVariables);
 
+    const mapVariablesFolders = mapVariablesMeta.folders;
+
     // store layer values in nodesDict as uid: layerValue
     const nodesDictWithMeta = setNodesMeta(state.nodesDict, nodesMeta, mapVariables);
 
-    newState = Object.assign({}, state, { mapVariables, nodesDictWithMeta });
+    newState = Object.assign({}, state, { mapVariables, mapVariablesFolders, nodesDictWithMeta });
     break;
   }
 

scripts/reducers/helpers/getMapVariables.js

@@ -1,8 +1,8 @@
 import getNodeMetaUid from './getNodeMetaUid';
 
 export default function(mapVariables) {
-  mapVariables.forEach(layer => {
-    layer.uid = getNodeMetaUid(layer.type, layer.id);
+  mapVariables.forEach(variable => {
+    variable.uid = getNodeMetaUid(variable.type, variable.id);
   });
 
   return mapVariables;

scripts/templates/mapVariables.ejs

@@ -0,0 +1,37 @@
+<% folders.forEach(function(folder) { %>
+  <li>
+    <div class="folder-title">
+      <%= folder.folder.name %>
+    </div>
+    <ul>
+      <% folder.variables.forEach(function(variable) { %>
+        <li
+          class="layer-item"
+          data-layer-uid="<%= variable.uid %>"
+        >
+          <label class="layer-name">
+            <%= variable.name %>
+            <% if (variable.unit) { %>
+              (<%= variable.unit %>)
+            <% } %>
+            <ul class="layer-options-list">
+              <!--<li class="layer-option c-tooltip">-->
+                <!--<svg class="icon icon-layer-info js-layer-info" data-description="description/tooltip goes here">-->
+                  <!--<use xlink:href="#icon-layer-info">-->
+                <!--</use>-->
+              <!--</svg>-->
+              <!--</li>-->
+              <!--<li class="layer-option">-->
+                <!--<svg class="icon icon-layer-download js-layer-download"><use xlink:href="#icon-layer-download"></use></svg>-->
+              <!--</li>-->
+            </ul>
+          </label>
+          <div class="radios">
+            <div class="c-radio-btn" data-group="vertical" value="<%= variable.uid %>"></div>
+            <div class="c-radio-btn" data-group="horizontal" value="<%= variable.uid %>"></div>
+          </div>
+        </li>
+      <% }) %>
+    </ul>
+  </li>
+<% }) %>

styles/_settings.scss

@@ -23,7 +23,7 @@ $charcoal-grey: #34444c;
 $charcoal-grey-faded: rgba($charcoal-grey, .6);
 $gray: #ebebeb;
 $medium-pink: #ea6869;
-$medium-pink-faded: lighten(#ea6869, 20%);
+$medium-pink-faded: lighten($medium-pink, 20%);
 $manilla: #ffeb8b;
 $orange: #ffa500;
 $pale-grey: #e0e4e8;

styles/components/map/map-layers.scss

@@ -71,9 +71,18 @@
     }
   }
 
-  > .layer-list {
+
+  .layer-list {
     margin: 20px 0 40px;
 
+    .folder-title {
+      margin: 30px 0 20px;
+      color: $charcoal-grey;
+      font-family: $font-family-1;
+      font-size: $font-size-small;
+      text-transform: uppercase;
+    }
+
     &:not(:last-child) {
       &::after {
         display: inline-block;
@@ -87,7 +96,7 @@
       }
     }
 
-    > .layer-item {
+    .layer-item {
       display: flex;
       justify-content: space-between;
       height: 18px;