Merge pull request #214 from cfpb/filter-leis-by-geography

Filter leis by geography

Author: wpears

src/api.js

@@ -1,5 +1,7 @@
 import { isNationwide } from '../src/geo/selectUtils'
 
+const API_BASE_URL = '/v2/data-browser-api/view'
+
 export function addVariableParams(obj={}) {
   let qs = ''
   const vars = obj.variables
@@ -25,45 +27,53 @@ export function addYears(url='') {
 }
 
 export function createItemQuerystring(obj = {}) {
-  const nationwide = isNationwide(obj.category)
-  const category = nationwide ? 'leis' : obj.category
-  const items = nationwide ? obj.leis : obj.items
-
-  if (items && items.length) return `?${category}=${items.join(',')}`
-
+  if (isNationwide(obj.category)) return ''
+  if (obj.items && obj.items.length)
+    return createQueryString(obj.category, obj.items, true)
   return ''
 }
 
+export function createQueryString(category, items, first=false){
+  let qs = first ? '?' : '&'
+  return `${qs}${category}=${items.join(',')}`
+}
+
 export function makeUrl(obj, isCSV, includeVariables=true) {
   if(!obj) return ''
-  let url = '/v2/data-browser-api/view'
+  let url = API_BASE_URL
 
   const nationwide = isNationwide(obj.category)
   const hasItems = obj.items && obj.items.length
   const hasLeis = obj.leis && obj.leis.length
 
+  if (!nationwide && !hasItems) return ''
   if (nationwide && !hasLeis) url += '/nationwide'
 
   if(isCSV) url += '/csv'
   else url += '/aggregations'
 
-  if(nationwide){
-    url += createItemQuerystring(obj)
-    if(includeVariables && obj.variables) {
-      url += hasLeis ? '&' : '?'
-      url += addVariableParams(obj).slice(1)
-    }
-  }else {
-    if(!hasItems) return ''
-    url += createItemQuerystring(obj)
-    if(includeVariables) url += addVariableParams(obj)
-  }
+  if(hasItems) url += createQueryString(obj.category, obj.items, hasItems)
+  if(hasLeis) url += createQueryString('leis', obj.leis, !hasItems)
+  if(!hasItems && !hasLeis) url += '?'
+  if(includeVariables) url += addVariableParams(obj)
 
   url += addYears(url)
 
   return url
 }
 
+export function makeFilersUrl(obj){
+  if(!obj) return ''
+  let url = API_BASE_URL + '/filers'
+
+  if(isNationwide(obj.category)) 
+    return url + addYears(url)
+
+  url += createItemQuerystring(obj)
+  url += addYears(url)
+  return url 
+}
+
 export function runFetch(url) {
 
   let headers = { Accept: 'application/json' }

src/api.test.js

@@ -3,12 +3,13 @@ import {
   addYears,
   createItemQuerystring,
   makeUrl,
+  makeFilersUrl,
   runFetch,
   makeCSVName,
   getSubsetDetails,
   getCSV,
   getItemCSV,
-  getSubsetCSV
+  getSubsetCSV,
 } from './api.js'
 
 it('adds variable params from an object', () => {
@@ -42,9 +43,9 @@ it('creates an empty item qs', () => {
   expect(qs).toBe('')
 })
 
-it('creates a qs with LEIs for nationwide', () => {
-  const qs = createItemQuerystring({ leis: ['a', 'b'], category: 'nationwide' })
-  expect(qs).toBe('?leis=a,b')
+it('creates a qs with for nationwide', () => {
+  const qs = createItemQuerystring({ items: ['a', 'b'], category: 'nationwide' })
+  expect(qs).toBe('')
 })
 
 it('makes a url', () => {
@@ -191,3 +192,13 @@ it('calls getCSV on makeURL and makeCSVName on getSubsetCSV call', () => {
   expect(setAttribute.mock.calls[1][1]).toBe('abc-a.csv')
   expect(a.href).toBe('/v2/data-browser-api/view/csv?states=abc&a=b&years=2018')
 })
+
+describe('makeFilersUrl', () => {
+  it('request all for nationwide', () => {
+    expect(makeFilersUrl({category: 'nationwide'})).toBe('/v2/data-browser-api/view/filers?years=2018');
+  })
+
+  it('request geo-specific for non-nationwide', () => {
+    expect(makeFilersUrl({category: 'states', items: ['CA', 'WA']})).toBe('/v2/data-browser-api/view/filers?states=CA,WA&years=2018');
+  })
+})

src/constants/leiCounts.js

@@ -2,10 +2,10 @@ import React from 'react'
 import STATEOBJ from '../constants/stateObj.js'
 import MSATONAME from '../constants/msaToName.js'
 import COUNTIES from '../constants/counties.js'
-import LEIS from '../constants/leis.js'
 import VARIABLES from '../constants/variables.js'
 import DocLink from './DocLink.jsx'
 import { formatWithCommas } from './selectUtils.js'
+import LoadingIcon from '../common/LoadingIcon'
 
 function buildRows(aggregations, orderedVariables) {
   return aggregations.map((row, i) => {
@@ -19,13 +19,14 @@ function buildRows(aggregations, orderedVariables) {
   })
 }
 
-function makeHeader(params, orderedVariables, year) {
+function makeHeader(params, orderedVariables, year, leis) {
   const list = []
   if(params.state) list.push(<li key="0"><h4>State:</h4><ul className="sublist"><li>{params.state.split(',').map(v => STATEOBJ[v]).join(', ')}</li></ul></li>)
   else if(params.msamd) list.push(<li key="0"><h4>MSA/MD:</h4><ul className="sublist"><li>{params.msamd.split(',').map(v => `${v}\u00A0-\u00A0${MSATONAME[v]}`).join(', ')}</li></ul></li>)
   else if(params.county) list.push(<li key="0"><h4>County:</h4><ul className="sublist"><li>{params.county.split(',').map(v => COUNTIES[v]).join(', ')}</li></ul></li>)
-  else if(params.lei) list.push(<li key="0"><h4>Institutions:</h4><ul className="sublist"><li>{params.lei.split(',').map(v => LEIS[v]).join(', ')}</li></ul></li>)
-
+  
+  if(params.lei) list.push(<li key="1"><h4>Institutions:</h4><ul className="sublist"><li>{institutionsOrLoading(params.lei, leis)}</li></ul></li>)
+  
   orderedVariables.forEach((variable) => {
     list.push(
       <li key={variable}>
@@ -40,10 +41,15 @@ function makeHeader(params, orderedVariables, year) {
       </li>
     )
   })
-
+  
   return <ul>{list}</ul>
 }
 
+function institutionsOrLoading(selected, details){
+  if(details.loading) return <LoadingIcon className="LoadingInline" />
+  return selected.split(',').map(v => details.leis[v].name).join(', ')
+}
+
 // eslint-disable-next-line
 const Aggregations = React.forwardRef((props, ref) => {
   const { aggregations, parameters } = props.details
@@ -57,7 +63,7 @@ const Aggregations = React.forwardRef((props, ref) => {
   return (
     <div ref={ref} className="Aggregations">
       <h2>Data Summary</h2>
-      {makeHeader(parameters, ordered, props.year)}
+      {makeHeader(parameters, ordered, props.year, props.leis)}
       <table>
         <thead>
           <tr>

src/constants/leis.js

@@ -88,34 +88,31 @@ svg {
   border: 1px solid #0071bc;
 }
 
-.QueryButton:hover {
-  background-color: #205493;
-}
-
-.QueryButton:active {
-  background-color: #112e51;
-}
-
-.QueryButton.disabled {
-  background-color: #888;
-  cursor: not-allowed;
-}
-
 .QueryButton.secondary {
   color:#254b87;
   color:#002d72;
   background:#d6e8fa;
   border-color:#254b87;
 }
 
+.QueryButton:hover {
+  background-color: #205493;
+}
+
 .QueryButton.secondary:hover {
-  background: #afd2f2
+  background-color: #afd2f2
 }
 
+.QueryButton:active {
+  background-color: #112e51;
+}
+
+.QueryButton.disabled,
 .QueryButton.secondary.disabled {
-  color: #000;
-  border-color: #000;
-  background: #e7ddd7
+  color: #fff;
+  background-color: #888;
+  border-color: #888;
+  cursor: not-allowed;
 }
 
 .Aggregations h2 {

src/geo/Aggregations.jsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
+import { isEqual } from 'lodash'
 import { getItemCSV, getSubsetCSV, getSubsetDetails } from '../api.js'
 import Header from '../common/Header.jsx'
-import LEI_COUNTS from '../constants/leiCounts.js'
 import MSAMD_COUNTS from '../constants/msamdCounts.js'
 import STATE_COUNTS from '../constants/stateCounts.js'
 import { makeSearchFromState, makeStateFromSearch } from '../query.js'
@@ -11,6 +11,7 @@ import Aggregations from './Aggregations.jsx'
 import './Geography.css'
 import InstitutionSelect from './InstitutionSelect'
 import ItemSelect from './ItemSelect.jsx'
+import { fetchLeis, filterLeis } from './leiUtils'
 import {
   createItemOptions,
   createVariableOptions,
@@ -36,6 +37,8 @@ class Geography extends Component {
     this.setStateAndRoute = this.setStateAndRoute.bind(this)
     this.updateSearch = this.updateSearch.bind(this)
     this.scrollToTable = this.scrollToTable.bind(this)
+    this.fetchLeis = fetchLeis.bind(this)
+    this.filterLeis = filterLeis.bind(this)
 
     this.itemOptions = createItemOptions(props)
     this.variableOptions = createVariableOptions()
@@ -55,7 +58,12 @@ class Geography extends Component {
       orderedVariables: [],
       details: {},
       loadingDetails: false,
-      error: null
+      error: null,
+      leiDetails: {
+        loading: true,
+        counts: {},
+        leis: {}
+      }
     }
 
     const newState = makeStateFromSearch(this.props.location.search, defaultState, this.requestSubset, this.updateSearch)
@@ -64,6 +72,22 @@ class Geography extends Component {
     return newState
   }
 
+  componentDidMount(){
+    this.fetchLeis()
+    this.filterLeis()
+    this.setState({ isLargeFile: this.checkIfLargeFile(this.state.category, this.state.items) })
+  }
+
+  componentDidUpdate(prevProps, prevState){
+    const geographyChanged = !isEqual(prevState.items, this.state.items)
+    const leisReloaded = prevState.leiDetails.loading && !this.state.leiDetails.loading
+
+    if(geographyChanged) this.fetchLeis()
+    if(geographyChanged || leisReloaded) this.filterLeis()
+    if(leisReloaded)
+      this.setState({ isLargeFile: this.checkIfLargeFile(this.state.category, this.state.items) })
+  }
+
   updateSearch() {
     this.props.history.replace({search: makeSearchFromState(this.state)})
   }
@@ -115,9 +139,21 @@ class Geography extends Component {
   }
 
   checkIfLargeFile(category, items) {
-    if(isNationwide(category) && !items.length) return true
-    if(isNationwide(category) || category === 'leis') 
-      return this.checkIfLargeCount(items, LEI_COUNTS)
+    const leisSelected = this.state && this.state.leis.length 
+    const leisFetched = this.state && !this.state.leiDetails.loading
+
+    if(category === 'leis'){
+      if(items.length && leisFetched) 
+        return this.checkIfLargeCount(items, this.state.leiDetails.counts)
+    
+      if(!items.length) 
+        return this.checkIfLargeFile(this.state.category, this.state.items)
+    }
+    
+    if(leisSelected && leisFetched) 
+      return this.checkIfLargeCount(this.state.leis, this.state.leiDetails.counts)
+
+    if(isNationwide(category)) return true
     if(category === 'states') return this.checkIfLargeCount(items, STATE_COUNTS)
     if(category === 'msamds') return this.checkIfLargeCount(items, MSAMD_COUNTS)
     return false
@@ -133,7 +169,6 @@ class Geography extends Component {
     this.setStateAndRoute({
       category: catObj.value,
       items: [],
-      leis: [],
       details: {},
       isLargeFile: this.checkIfLargeFile(catObj.value, []),
     })
@@ -147,18 +182,17 @@ class Geography extends Component {
     return this.setStateAndRoute({
       items,
       details: {},
-      isLargeFile: this.checkIfLargeFile(this.state.category, items)
     })
   }
 
   onInstitutionChange(selectedLEIs = []){
     let leis = selectedLEIs.map(l => l.value)
     if(leis.includes('all')) leis = []
 
-    return this.setStateAndRoute({
-      leis,
-      details: {},
-      isLargeFile: this.checkIfLargeFile(this.state.category, leis)
+    return this.setState({leis, details: {}}, () => {
+      return this.setStateAndRoute({ 
+        isLargeFile: this.checkIfLargeFile('leis', this.state.leis) 
+      })
     })
   }
 
@@ -219,7 +253,7 @@ class Geography extends Component {
     const total = formatWithCommas(this.makeTotal(details))
     return (
       <>
-        <Aggregations ref={this.tableRef} details={details} orderedVariables={orderedVariables} year={this.props.match.params.year}/>
+        <Aggregations ref={this.tableRef} details={details} orderedVariables={orderedVariables} year={this.props.match.params.year} leis={this.state.leiDetails} />
         <div className="CSVButtonContainer">
           {this.renderTotal(total)}
         </div>
@@ -228,7 +262,8 @@ class Geography extends Component {
   }
 
   render() {
-    const { category, items, leis, isLargeFile, variables, orderedVariables, details, loadingDetails, error } = this.state
+    const { category, details, error, isLargeFile, items, leiDetails, leis, 
+      loadingDetails, orderedVariables, variables } = this.state
 
     const nationwide = isNationwide(category)
     const enabled = nationwide || items.length
@@ -269,8 +304,7 @@ class Geography extends Component {
         <InstitutionSelect
           items={leis}
           onChange={this.onInstitutionChange}
-          options={this.itemOptions}
-          nationwide={nationwide}
+          leiDetails={leiDetails}
         />
         <VariableSelect
           options={this.variableOptions}
@@ -286,7 +320,7 @@ class Geography extends Component {
         <ActionsWarningsErrors 
           downloadEnabled={enabled}
           downloadCallback={checksExist ? this.requestSubsetCSV : this.requestItemCSV}
-          showSummaryButton={!details.aggregations || !this.makeTotal(details)}
+          showSummaryButton={!details.aggregations}
           summaryEnabled={enabled && checksExist}
           loadingDetails={loadingDetails}
           requestSubset={this.requestSubset}