codeforpittsburgh / food-access-map Goto Github PK

We'll need a view that displays the information and actions attached to a particular location.

Listing things like name, location, and the various scores and such attached to it.

Actions may include navigation.

Please comment with any suggestions.

we have a demo dropdown to auto-focus the map on different neighborhoods or towns. based on either client input or just trends in the towns appearing in our data table we should update the set of town names from the 2 demo names to an actual set

We need a standardized way to collect user submitted info on any new location that is missing from the map. This could be a google form or similar.

The headings from the merged dataset can be the questions to answer- some should be choose from a list (e.g. Type), some should be check boxes (e.g. open days Sun Mon Tue etc) and others type in like address.

once back end api is set up:

if there are multiple endpoints (i.e. we can get summary data about a lot of food sites or we can also get detailed object data about an individual food site) then tear out redux/saga, etc to keep the app more lightweight, we don't need these tools for something this size and native react state management is sufficient

if there is one main api call that pulls in all data, make sure it is on a central wrapping component we always hit no matter what url might be bookmarked, have it run only once on load. Investigate if 'react hooks' can suit our purposes (sharing data between map page/table page, as well as individual food site detail page template) or set up redux in the app to share this state

When a lot of markers are on the map, it updates very slowly.

I think we may have too many markers to use the react-map-gl <Marker/> component.

The one solution I can think of is to render the markers server-side (on mapbox). This would involve reflecting the state of our app in a Mapbox style object and passing it to the Map component's mapStyle prop.

The current navbar gets squished when in mobile demensions.

We should make the menu collapse into a dropdown on small screens.

Observed Behavior: When entering a search term, the results in the dropdown change based upon the map extents
Expected Behavior: When entering a search term, results will represent any records in the dataset that meet the search parameters

The primary map script ( script.js ) includes the following code to add the search to the map

var search = new L.esri.BootstrapGeocoder.search({
  inputTag: 'searchInput',
  placeholder: 'ex. Bloomfield',
}).addTo(map);

bootstrap-geocoder.js defines the following code at line 70 which is a clue to the behavior issue. I believe this code is responsible for navigating to the selected item on the suggested results, but it points to some inner workings that I think are relevant

            h.DomEvent.addListener(this._suggestions, "mousedown", function(e) {
                var t = e.target || e.srcElement;
                this._geosearchCore._geocode(t.innerHTML, t["data-magic-key"], t.provider),
                this.clear()
            }, this),

GeosearchCore.js defines the following code at line 110 that populates the suggested items

    for (var i = 0; i < this._providers.length; i++) {
      var provider = this._providers[i];
      var request = provider.suggestions(text, this._searchBounds(), createCallback(text, provider));
      this._pendingSuggestions.push(request);
    }

This code references this.searchBounds(), which among other things relies on an options object to make a decision about what to return.

I suspect if we can set the GeosearchCore this.options.useMapBounds to false, the system will search across the breadth of the dataset - although I could be wrong-o! It has happened before :D

we have a table with a couple of random sample props. using either client input or our own logic we should determine which props from our dataset belong on the easy access table and reconfigure our table to display those props

PFPC would like us to have different icons for different food sites. E.g. a grocery cart icon for a supermarket, a can (like canned goods) for a food pantry, etc. The icon types should match the location types in the dataset.
https://github.com/CodeForPittsburgh/food-access-map-data/blob/master/merged_datasets.csv

Icons should be simple, easy to understand, ideally different colors, and free of restrictions so we can use them without copyright issues.

The map/table needs filters for users to input their criteria:

• "Open now" compares current day/time to open days/hours
• "Accepts SNAP"
• "Accepts WIC"
  Other filterable items might be added but this will be good to start.

We also need a dropdown for users to select the type of store they are looking for: Supermarket, convenience store, farmers market, or summer food site. This should be a "check all that apply" filter type.

move 'navebar' type items to their own shareable component

style navbar

add navigation link to the map-pin popup that appears for each food site which can take you to the details page template for that food site

The same filters/search functionality on the table should also be a feature for the map side- e.g. a user should be able to filter for supermarkets, accepts WIC, open now.

This one is open for discussion on how best to implement:

PFPC would like there to be a way for users to search for certain criteria/keywords that may not correspond to something in the dataset. For example, if someone searches "free food" then we should show only food pantries and summer food sites. If someone searches "produce" we should only show places with produce.

Not sure if this will entail us trying to guess every combination of search terms someone might use? Maybe we can add some tags or keywords to the food sites, like "free", "families", "produce"?

might be good if table items can be clicked to go to details page for that food site

Just checking out this project to see if there was anything I could help with. I figured I'd run tests before getting started, and I'm getting some linter errors regarding lines 169-192 in foodSiteDetail. ESLint wants to add 2 spaces, but then when you do that Prettier wants you to take them away.

From my understanding eslint-config-prettier is supposed to prevent this, but I think the indent rule in eslintrc is overriding that. When I remove that prettier handles indentation just fine.

node_modules in the production bundle is nearly 7mb. It looks like something is going wrong during the build step and the prod bundle is getting dev packages. Once that is taken care of there is room for some tree-shaking and other optimization (like lazy loading LocationTable since material-table is pretty big)

Steps to reproduce

npm run build
npm run analyze

• Drag stats.json to http://chrisbateman.github.io/webpack-visualizer/
• See that the bundle is using dev packages like react-dom.development.js and lodash is over 500kb whereas I think it is <80kb when minified.