{"version":3,"sources":["webpack:///./src/components/FiltersList/Bar.jsx","webpack:///./src/components/FiltersList/Filter.jsx","webpack:///./src/components/FiltersList/index.jsx","webpack:///./src/pages/compare.jsx"],"names":["Wrapper","styled","div","isExcluded","Labels","Columns","attrs","justifyContent","active","themeGet","IndicatorWrapper","Flex","flexWrap","Indicator","width","Filler","Bar","isFiltered","label","count","total","onClick","position","remainder","flex","formatNumber","defaultProps","memo","Header","Title","alignItems","ResetIcon","FaRegTimesCircle","size","visible","expandoColor","theme","colors","grey","CaretDown","FaCaretDown","color","CaretRight","FaCaretRight","Bars","Filter","field","title","description","moreInfoURL","values","labels","initIsOpen","isOpen","useState","setIsOpen","useContext","Crossfilter","state","dispatch","filterValues","get","Set","counts","Map","prev","type","SET_FILTER","payload","filterValue","clear","map","value","idx","key","has","isEmpty","delete","add","handleFilterClick","HelpText","fontSize","mb","from","to","flexDirection","px","pb","Count","ResetButton","Button","secondary","ResetButtonContents","Filters","Box","pr","filters","rawFilters","filter","internal","index","hasFilters","curFilter","length","textAlign","RESET_FILTERS","fields","Help","ExpandableParagraph","Compare","useData","data","selectedId","setSelectedId","List","PNWBounds","bounds","setBounds","Layout","SEO","Sidebar","allowScroll","EstuaryDetails","toString","toJS","onBack","onZoomTo","icon","snippet","FiltersList","selectedFeature","onSelectFeature","id","console","log"],"mappings":"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","file":"component---src-pages-compare-jsx-4119839c24fc5261c869.js","sourcesContent":["import React, { memo } from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { Flex, Columns, Column } from 'components/Grid'\r\nimport styled, { themeGet } from 'util/style'\r\nimport { formatNumber } from 'util/format'\r\n\r\nconst Wrapper = styled.div`\r\n  cursor: pointer;\r\n  line-height: 1;\r\n  margin-bottom: 1rem;\r\n\r\n  transition: opacity 300ms;\r\n  opacity: ${({ isExcluded }) => (isExcluded ? 0.25 : 1)};\r\n\r\n  &:hover {\r\n    opacity: ${({ isExcluded }) => (isExcluded ? 0.5 : 1)};\r\n  }\r\n`\r\n\r\nconst Labels = styled(Columns).attrs({\r\n  justifyContent: 'space-between',\r\n})`\r\n  color: ${({ active }) =>\r\n    active ? themeGet('colors.highlight.500') : themeGet('colors.grey.700')};\r\n  font-size: 0.8rem;\r\n`\r\n\r\nconst IndicatorWrapper = styled(Flex).attrs({\r\n  flexWrap: 'nowrap',\r\n})`\r\n  height: 0.5rem;\r\n  border-radius: 0.25rem;\r\n  background-color: ${themeGet('colors.grey.200')};\r\n  border: 1px solid ${themeGet('colors.grey.200')};\r\n  overflow: hidden;\r\n`\r\n\r\nconst Indicator = styled.div`\r\n  background-color: ${({ active }) =>\r\n    active ? themeGet('colors.highlight.500') : themeGet('colors.primary.500')};\r\n  flex-grow: ${({ width }) => width};\r\n  transition: flex-grow 300ms;\r\n`\r\n\r\nconst Filler = styled.div`\r\n  flex-grow: ${({ width }) => width};\r\n  transition: flex-grow 300ms;\r\n`\r\n\r\nconst Bar = ({ isFiltered, isExcluded, label, count, total, onClick }) => {\r\n  const position = count / total\r\n  const remainder = 1 - position\r\n\r\n  return (\r\n    <Wrapper onClick={onClick} isExcluded={isExcluded}>\r\n      <Labels active={isFiltered}>\r\n        <Column>{label}</Column>\r\n        <Column flex={0}>{formatNumber(count)}</Column>\r\n      </Labels>\r\n      <IndicatorWrapper>\r\n        {position > 0 && (\r\n          <Indicator\r\n            active={isFiltered}\r\n            isExcluded={isExcluded}\r\n            width={position}\r\n          />\r\n        )}\r\n\r\n        {remainder > 0 && <Filler width={remainder} />}\r\n      </IndicatorWrapper>\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\nBar.propTypes = {\r\n  isFiltered: PropTypes.bool, // true if filter is set on this bar\r\n  isExcluded: PropTypes.bool, // true if filters are set on others but not this one\r\n  label: PropTypes.string.isRequired,\r\n  count: PropTypes.number.isRequired,\r\n  total: PropTypes.number.isRequired,\r\n  onClick: PropTypes.func.isRequired,\r\n}\r\n\r\nBar.defaultProps = {\r\n  isFiltered: false,\r\n  isExcluded: false,\r\n}\r\n\r\n// TODO: optimize for changes to the callback\r\nexport default memo(Bar)\r\n","import React, { useState, useContext } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Map, Set } from 'immutable'\r\nimport { FaRegTimesCircle, FaCaretDown, FaCaretRight } from 'react-icons/fa'\r\n\r\nimport HelpText from 'components/elements/HelpText'\r\nimport { OutboundLink } from 'components/Link'\r\nimport { Context as Crossfilter, SET_FILTER } from 'components/Crossfilter'\r\nimport { Flex } from 'components/Grid'\r\n\r\nimport styled, { theme, themeGet } from 'util/style'\r\nimport Bar from './Bar'\r\n\r\nconst Wrapper = styled.div`\r\n  padding-top: 0.25rem;\r\n\r\n  &:not(:first-child) {\r\n    border-top: 1px solid ${themeGet('colors.grey.200')};\r\n  }\r\n`\r\n\r\nconst Header = styled(Flex).attrs({\r\n  justifyContent: 'space-between',\r\n})``\r\n\r\nconst Title = styled(Flex).attrs({ alignItems: 'center', flex: 1 })`\r\n  cursor: pointer;\r\n`\r\n\r\nconst ResetIcon = styled(FaRegTimesCircle).attrs({\r\n  size: '1rem',\r\n})`\r\n  width: 1rem;\r\n  height: 1rem;\r\n  margin-left: 1rem;\r\n  visibility: ${({ visible }) => visible};\r\n  cursor: pointer;\r\n  color: ${themeGet('colors.highlight.500')};\r\n`\r\n\r\nconst expandoColor = theme.colors.grey[800]\r\nconst expandoSize = '1.5rem'\r\n\r\nconst CaretDown = styled(FaCaretDown).attrs({\r\n  color: expandoColor,\r\n  size: expandoSize,\r\n})`\r\n  width: 1rem;\r\n  height: 1rem;\r\n  margin-right: 0.25rem;\r\n`\r\n\r\nconst CaretRight = styled(FaCaretRight).attrs({\r\n  color: expandoColor,\r\n  size: expandoSize,\r\n})`\r\n  width: 1rem;\r\n  height: 1rem;\r\n  margin-right: 0.25rem;\r\n`\r\n\r\nconst Bars = styled.div`\r\n  padding: 0.5rem 0 0 1rem;\r\n`\r\n\r\nconst Filter = ({\r\n  field,\r\n  title,\r\n  description,\r\n  moreInfoURL,\r\n  values,\r\n  labels,\r\n  isOpen: initIsOpen,\r\n}) => {\r\n  const [isOpen, setIsOpen] = useState(initIsOpen)\r\n  const { state, dispatch } = useContext(Crossfilter)\r\n\r\n  const filterValues = state.get('filters').get(field, Set())\r\n  const counts = state.get('dimensionCounts').get(field, Map())\r\n  const total = state.get('total')\r\n\r\n  const toggle = () => {\r\n    setIsOpen(prev => !prev)\r\n  }\r\n\r\n  const handleFilterClick = value => {\r\n    dispatch({\r\n      type: SET_FILTER,\r\n      payload: {\r\n        field,\r\n        filterValue: filterValues.has(value)\r\n          ? filterValues.delete(value)\r\n          : filterValues.add(value),\r\n      },\r\n    })\r\n  }\r\n\r\n  const handleReset = () => {\r\n    dispatch({\r\n      type: SET_FILTER,\r\n      payload: {\r\n        field,\r\n        filterValue: filterValues.clear(),\r\n      },\r\n    })\r\n  }\r\n\r\n  return (\r\n    <Wrapper>\r\n      <Header>\r\n        <Title onClick={toggle}>\r\n          {isOpen ? <CaretDown /> : <CaretRight />}\r\n          <div>{title}</div>\r\n        </Title>\r\n        {\r\n          <ResetIcon\r\n            onClick={handleReset}\r\n            visible={filterValues.size > 0 ? 'visible' : 'hidden'}\r\n          />\r\n        }\r\n      </Header>\r\n\r\n      {isOpen && (\r\n        <Bars>\r\n          {values.map((value, idx) => (\r\n            <Bar\r\n              key={value}\r\n              isFiltered={filterValues.has(value)}\r\n              isExcluded={!filterValues.isEmpty() && !filterValues.has(value)}\r\n              label={labels && labels[idx] ? labels[idx] : value}\r\n              count={counts.get(value, 0)}\r\n              total={total}\r\n              onClick={() => handleFilterClick(value)}\r\n            />\r\n          ))}\r\n\r\n          {description && (\r\n            <HelpText fontSize=\"smaller\" mb=\"1rem\">\r\n              {description}\r\n              {moreInfoURL && (\r\n                <>\r\n                  {' '}\r\n                  <OutboundLink from=\"/compare\" to={moreInfoURL}>\r\n                    Read more...\r\n                  </OutboundLink>\r\n                </>\r\n              )}\r\n            </HelpText>\r\n          )}\r\n        </Bars>\r\n      )}\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\nFilter.propTypes = {\r\n  field: PropTypes.string.isRequired,\r\n  title: PropTypes.string.isRequired,\r\n  description: PropTypes.string,\r\n  moreInfoURL: PropTypes.string,\r\n  values: PropTypes.array.isRequired,\r\n  labels: PropTypes.array,\r\n  isOpen: PropTypes.bool,\r\n}\r\n\r\nFilter.defaultProps = {\r\n  labels: null,\r\n  isOpen: false,\r\n  description: null,\r\n  moreInfoURL: null,\r\n}\r\n\r\nexport default Filter\r\n","import React, { useContext } from 'react'\r\nimport { FaRegTimesCircle } from 'react-icons/fa'\r\nimport { Text } from 'rebass'\r\n\r\nimport { Context as Crossfilter, RESET_FILTERS } from 'components/Crossfilter'\r\nimport { Button } from 'components/Button'\r\nimport { Flex, Box, Columns, Column } from 'components/Grid'\r\nimport styled, { themeGet } from 'util/style'\r\nimport Filter from './Filter'\r\nimport { filters as rawFilters } from '../../../config/filters'\r\n\r\nconst Wrapper = styled(Flex).attrs({\r\n  flexDirection: 'column',\r\n  flex: 1,\r\n})`\r\n  height: 100%;\r\n  overflow: hidden;\r\n`\r\n\r\nconst Header = styled(Columns).attrs({\r\n  flex: 0,\r\n  px: '1rem',\r\n  pb: '0.5rem',\r\n})`\r\n  border-bottom: 1px solid ${themeGet('colors.grey.200')};\r\n`\r\n\r\nexport const Count = styled.div`\r\n  color: ${themeGet('colors.grey.600')};\r\n  font-size: 0.8em;\r\n  line-height: 1;\r\n`\r\n\r\nconst ResetButton = styled(Button).attrs({ secondary: true })`\r\n  font-size: 0.8rem;\r\n  padding: 0.1rem 0.5rem;\r\n`\r\n\r\nconst ResetButtonContents = styled(Flex).attrs({\r\n  alignItems: 'center',\r\n  justifyContent: 'flex-end',\r\n})``\r\n\r\nconst ResetIcon = styled(FaRegTimesCircle).attrs({\r\n  size: '1em',\r\n})`\r\n  margin-right: 0.25rem;\r\n  cursor: pointer;\r\n`\r\n\r\nconst Filters = styled(Box).attrs({ flex: 1, pr: '1rem' })`\r\n  overflow-y: auto;\r\n  height: 100%;\r\n`\r\n\r\n// filter out internal filters\r\nconst filters = rawFilters.filter(({ internal }) => !internal)\r\n\r\nconst index = () => {\r\n  const { state, dispatch } = useContext(Crossfilter)\r\n\r\n  const hasFilters =\r\n    filters.filter(({ field }) => {\r\n      const curFilter = state.get('filters').get(field)\r\n      return curFilter && !curFilter.isEmpty()\r\n    }).length > 0\r\n\r\n  const handleReset = () => {\r\n    dispatch({\r\n      type: RESET_FILTERS,\r\n      payload: {\r\n        fields: filters.map(({ field }) => field),\r\n      },\r\n    })\r\n  }\r\n\r\n  return (\r\n    <Wrapper>\r\n      <Header alignItems=\"baseline\">\r\n        <Column>\r\n          <Count>\r\n            {state.get('filteredCount')} estuaries currently visible in the\r\n            current extent\r\n          </Count>\r\n        </Column>\r\n        <Column flex=\"0 0 auto\">\r\n          {hasFilters && (\r\n            <Text textAlign=\"right\">\r\n              <ResetButton onClick={handleReset}>\r\n                <ResetButtonContents>\r\n                  <ResetIcon />\r\n                  <div>reset all filters</div>\r\n                </ResetButtonContents>\r\n              </ResetButton>\r\n            </Text>\r\n          )}\r\n        </Column>\r\n      </Header>\r\n\r\n      <Filters>\r\n        {filters.map(filter => (\r\n          <Filter key={filter.field} {...filter} />\r\n        ))}\r\n      </Filters>\r\n    </Wrapper>\r\n  )\r\n}\r\n\r\nexport default index\r\n","import React, { useState, useRef } from 'react'\r\nimport { List } from 'immutable'\r\n\r\nimport { useData } from 'components/Data'\r\nimport {\r\n  Provider as CrossfilterProvider,\r\n  FilteredMap,\r\n} from 'components/Crossfilter'\r\nimport Layout from 'components/Layout'\r\nimport ExpandableParagraph from 'components/elements/ExpandableParagraph'\r\nimport SEO from 'components/SEO'\r\nimport Sidebar, { SidebarHeader } from 'components/Sidebar'\r\nimport EstuaryDetails from 'components/EstuaryDetails'\r\nimport { Box, Flex } from 'components/Grid'\r\nimport FiltersList from 'components/FiltersList'\r\nimport styled, { themeGet } from 'util/style'\r\nimport { PNWBounds } from '../../config/constants'\r\nimport { filters } from '../../config/filters'\r\n\r\nconst Wrapper = styled(Flex)`\r\n  height: 100%;\r\n`\r\n\r\n\r\nconst Help = styled(ExpandableParagraph)`\r\n  font-size: 0.8rem;\r\n  margin: 0 1rem 1rem;\r\n  color: ${themeGet('colors.grey.700')};\r\n`\r\n\r\nconst Compare = () => {\r\n  const [data, index] = useData()\r\n  const [selectedId, setSelectedId] = useState(null)\r\n  const [bounds, setBounds] = useState(List(PNWBounds))\r\n\r\n  const handleSelect = id => {\r\n    console.log('onSelect', id)\r\n    setSelectedId(id)\r\n  }\r\n\r\n  const handleZoomTo = () => {\r\n    setBounds(() => index.get(selectedId.toString()).get('bounds'))\r\n  }\r\n\r\n  const handleBack = () => {\r\n    setSelectedId(null)\r\n  }\r\n\r\n  return (\r\n    <CrossfilterProvider data={data} filters={filters}>\r\n      <Layout>\r\n        <SEO title=\"Compare\" />\r\n        <Wrapper>\r\n          <Sidebar allowScroll={false}>\r\n            {selectedId !== null ? (\r\n              <EstuaryDetails\r\n                {...index.get(selectedId.toString()).toJS()}\r\n                onBack={handleBack}\r\n                onZoomTo={handleZoomTo}\r\n              />\r\n            ) : (\r\n              <>\r\n                <Box flex={0}>\r\n                  <SidebarHeader icon=\"slidersH\" title=\"Compare Estuaries\" />\r\n                  <Help snippet=\"Use the filters below to select estuaries that meet your criteria within the map...\">\r\n                    Use the filters below to select estuaries that meet your\r\n                    criteria within the map. The filter bars show you how many\r\n                    estuaries visible in the map meet each criterion. You can\r\n                    click on one or more filter bars to select all estuaries\r\n                    that match. Filters can also be combined across groups, such\r\n                    as &quot;Riverine Estuary&quot;, &quot;0-25 acres&quot;,\r\n                    &quot;Washington&quot; to show all small riverine estuaries\r\n                    in Washington state. Select multiple categories within a\r\n                    group to show estuaries that meet any of those conditions.\r\n                    As you zoom in, the charts will update based on the extent\r\n                    of the map. Estuary boundaries will show on the map when you\r\n                    have zoomed far enough in.\r\n                    <br />\r\n                    <br />\r\n                    Click on an estuary in the map for more detailed information\r\n                    about it.\r\n                  </Help>\r\n                </Box>\r\n                <FiltersList />\r\n              </>\r\n            )}\r\n          </Sidebar>\r\n\r\n          <FilteredMap\r\n            bounds={bounds}\r\n            selectedFeature={selectedId}\r\n            onSelectFeature={handleSelect}\r\n          />\r\n        </Wrapper>\r\n      </Layout>\r\n    </CrossfilterProvider>\r\n  )\r\n}\r\n\r\nexport default Compare\r\n"],"sourceRoot":""}