Merge pull request #20 from GFDRR/rdl-0.2-hazard_type_filter

Add hazard type sidebar filter

datasets.html

@@ -17,6 +17,9 @@ <h3>Countries</h3>
     <h3>Geographical Scale</h3>
     <div class="list-group" data-component="rdl-geographical-scale-filter" data-show="5"></div>
 
+    <h3>Hazard Type</h3>
+    <div class="list-group" data-component="rdl-hazard-type-filter" data-show="5"></div>
+
     <h3>Licenses</h3>
     <div class="list-group" data-component="rdl-license-filter" data-show="5"></div>
 

rdl-datasets.json

@@ -11,6 +11,18 @@
         {% endfor %}]
       {% else %} {{ "None" | jsonify }}
     {% endif %},
+    "hazard_type": {% if dataset.risk_data_type[0] %}
+        [{% for cat in dataset.risk_data_type %}
+        {% assign hazard_type_code = dataset[cat]["hazard_type"] %}
+          {% if hazard_type_code and site.data.rdl-hazard_type[hazard_type_code] %}
+            {{ site.data.rdl-hazard_type[hazard_type_code] | jsonify }}{% unless forloop.last %}, {% endunless %}
+          {% else %}
+            {{ "None" | jsonify }}
+          {% endif %}
+        {% endfor %}]
+      {% else %}
+        {{ "None" | jsonify }}
+    {% endif %},
     {% if site.data.rdl-license-name[dataset.license] %}
       "license_display": {{ site.data.rdl-license-name[dataset.license] | jsonify }},
     {% else %}

scripts/src/components/rdl-datasets-list.js

@@ -30,8 +30,8 @@ export default class {
     }
 
     // Filter datasets and render in items container
-    const paramFilters = pick(opts.params, ['category', 'geo_coverage', 'geo_scale', 'license_display','project'])
-    const attributeFilters = pick(opts.el.data(), ['category', 'geo_coverage', 'geo_scale', 'license_display','project'])
+    const paramFilters = pick(opts.params, ['category', 'geo_coverage', 'geo_scale', 'license_display', 'project', 'hazard_type'])
+    const attributeFilters = pick(opts.el.data(), ['category', 'geo_coverage', 'geo_scale', 'license_display', 'project', 'hazard_type'])
     const filters = createDatasetFilters(defaults(paramFilters, attributeFilters))
 
     const filteredDatasets = filter(opts.datasets, filters)

scripts/src/components/rdl-hazard-type-filter.js

@@ -0,0 +1,51 @@
+import $ from 'jquery'
+import {chain, omit, defaults} from 'lodash'
+
+import TmplListGroupItem from '../templates/list-group-item'
+import {setContent, slugify, collapseListGroup} from '../util'
+
+
+function prep_hazard_type(hazard_type, params, datasetsForHazardType) {
+  const hazardTypeSlug = slugify(hazard_type)
+  const selected = params.hazard_type && params.hazard_type === hazardTypeSlug
+  const itemParams = selected ? omit(params, 'hazard_type') : defaults({hazard_type: hazardTypeSlug}, params)
+
+  return {
+    title: hazard_type,
+    url: '?' + $.param(itemParams),
+    count: datasetsForHazardType.length,
+    unfilteredCount: params.length,
+    selected: selected
+  }
+}
+
+export default class {
+  constructor (opts) {
+    const hazardTypes = this._hazardTypesWithCount(opts.datasets, opts.params)
+
+    const hazardTypesMarkup = hazardTypes.sort((a,b) => {
+      // ignore upper and lowercase
+      const titleA = a.title.toUpperCase();
+      const titleB = b.title.toUpperCase();
+      if (titleA < titleB) return -1;
+      if (titleA > titleB) return 1;
+      return 0;
+    }).map(TmplListGroupItem)
+    setContent(opts.el, hazardTypesMarkup)
+    collapseListGroup(opts.el)
+  }
+
+  _hazardTypesWithCount (datasets, params) {
+    const exposureDatasets = datasets.filter(d => d.category.includes('Exposure'))
+    return chain(datasets)
+      .groupBy('hazard_type')
+      .flatMap(function (datasetsForHazardType, hazard_type) {
+        var hazardTypes = hazard_type.split(",")
+        var collated = hazardTypes.map(c => prep_hazard_type(c, params, [...datasetsForHazardType,...exposureDatasets]))
+
+        return collated
+      })
+      .orderBy('unfilteredCount', 'desc')
+      .value()
+  }
+}

scripts/src/index.js

@@ -9,6 +9,7 @@ import Navigation from './components/navigation'
 import RDLDatasetsList from './components/rdl-datasets-list'
 import CategoriesFilter from './components/categories-filter'
 import RDLCountryFilter from './components/rdl-country-filter'
+import RDLHazardTypeFilter from './components/rdl-hazard-type-filter'
 import RDLLicenseFilter from './components/rdl-license-filter'
 import RDLProjectFilter from './components/rdl-project-filter'
 import RDLGeographicalScaleFilter from './components/rdl-geographical-scale-filter'
@@ -44,9 +45,10 @@ const components = [
   {tag: 'rdl-datasets-list', class: RDLDatasetsList, usesDatasets: true},
   {tag: 'categories-filter', class: CategoriesFilter, usesDatasets: true},
   {tag: 'rdl-country-filter', class: RDLCountryFilter, usesDatasets: true},
+  {tag: 'rdl-geographical-scale-filter', class: RDLGeographicalScaleFilter, usesDatasets: true},
+  {tag: 'rdl-hazard-type-filter', class: RDLHazardTypeFilter, usesDatasets: true},
   {tag: 'rdl-license-filter', class: RDLLicenseFilter, usesDatasets: true},
   {tag: 'rdl-project-filter', class: RDLProjectFilter, usesDatasets: true},
-  {tag: 'rdl-geographical-scale-filter', class: RDLGeographicalScaleFilter, usesDatasets: true},
 ]
 for (let component of components) {
   const els = queryByComponent(component.tag)

scripts/src/util.js

@@ -57,6 +57,9 @@ export function createDatasetFilters (filters) {
     if (filters.project) {
       conditions.push(dataset.project && slugify(dataset.project).indexOf(filters.project) !== -1)
     }
+    if (filters.hazard_type) {
+      conditions.push(dataset.category.includes('Exposure') || dataset.hazard_type && slugify(dataset.hazard_type).indexOf(filters.hazard_type) !== -1)
+    }
 
     return conditions.every(function (value) { return !! value })
   }