ourvoiceusa / hellovoter Goto Github PK

As an administrator I need a UI to construct a query that gets ran against the database so that I can review the information with various charts.

http://localhost:3000/HelloVoterHQ/#/analytics/

The UI needs to let you:

• select which data type you want returned / aggregated
• add a new constraint to the query based on a data type (name, location, party, custom question, etc)
  • each constraint needs to define whether it's required or optional
  • each constraint needs to define whether this includes or excludes data, based on an operator (matches, doesn't match, less than, greater than, is equal, is not equal)
• select the type of chart to use on the display

For example:

• Select data type "Party"
• Add constraint of question "votes in primary elections" is equal to true
• Add constraint of question "voter ID laws help democracy" is greater than neutral (they answered "agree" or "strongly agree", but they're numerical behind the scenes)
• Select display a bar chart

On submit, send the options to an endpoint, and expect a JSON object back to display as a bar chart, for example:

Party A: 10%
Party B: 67%
Party C: 55%
Party D: 22%

As a canvasser I want to be able to scan a driver's license barcode so that data from it can be used to pre-fill fields or be used to verify information so we can implement features such as easy voter registration and voter record validation.

This feature is done when:

• A data type of something name like "id scan" exists and when selected, opens the camera and scans for a driver's license barcode
• The data from the barcode is available to be consumed by a callback function.

Proof-of-concept code uses these libraries:

import { RNCamera } from 'react-native-camera';
import { parse } from 'parse-usdl';

And references the components to capture / parse data like so:

  <RNCamera
    ref={ref => {this.camera = ref;}}
    style={{
      flex: 1,
      justifyContent: 'space-between',
    }}
    androidCameraPermissionOptions={{
      title: 'Permission to use camera',
      message: 'We need your permission to use your camera',
      buttonPositive: 'Ok',
      buttonNegative: 'Cancel',
    }}
    onBarCodeRead={(e) => console.warn(parse(e.data))}
    barCodeTypes={[RNCamera.Constants.BarCodeType.pdf417]}
  >

As a team leader, I need to see a history of who has been talked to by someone on my team, and when, so I can track the activity of my team.

This feature is done when:

• A list is available in the canvassing section of people who my team members have recorded
• Their address is readily available
• I can filter the list by which team member they spoke with

As an administrator, I need to be able to create a new form similar to how the mobile app lets you create a form so I can add, remove, and re-order the questions.

The page is here:

http://localhost:3000/HelloVoterHQ/#/forms/add

Questions can be shared across forms, so the "add item" needs an option to select an already existing question in the system, rather than having to create a new one each time.

Finally, this component also needs to be re-used in the context of viewing a form

http://localhost:3000/HelloVoterHQ/#/forms/view/test:forma

Click an "edit form" button to be given the ability to add/remove/reorder items like you do in the form create.

As a canvassing volunteer, I need certain form attributes to pre-fill based on location or other pre-defined characteristics, so that I don't have to keep track of or enter things like neighborhood polling location or prescient number.

This feature is done when:

• Based on configuration, certain form attributes have a default value determined by location.

As a campaign manager, I would like the autoturf to create a polygon turf instead of a rectangular turf so that we can reduce overlap with other turfs.

This feature is done when:

• Turf created with autoturf have more than 4 points
• Turf boarders other turf created with the same autoturf operation
• Overlap between turf is minimal

As an organizer, I want to see what turfs have had activity, and adjust the activity level based on input parameters.

This feature is done when:

• The turf screen orders turfs by canvassing activity within them
• The activity selection is adjustable by time

As a brand new volunteer, I need to use the "Connect to Server" / GOTV functionality without having to sign in twice to simplify the on-boarding process.

This feature is done when:

• The first successful sign-in on a brand new user doesn't throw an exception

The dashboard is the first screen you see when you login:

http://localhost:3000/HelloVoterHQ/#/

Right now it displays cards vertically with a lot of wasted horizontal space, and their position / existence on the dashboard are not configurable.

Need a component that lets a user move, delete, and add various cards on the dashboard, and any action is saved to a localStorage item so their changes persist in that browser.

On Android Q, when the user allows location permissions, the app crashes. Denying permissions does not crash. Logcat simply states that it’s killing the app with a message of “permissions revoked”.

As a canvasser I want to be able to call people who have a phone number on file so that I can have a follow up conversation by phone, or target those who aren't answering the door.

This feature is done when:

• A button exists on a person profile that starts a phone call with a tap, if the person has a phone number on file.

Large files throw an "allocation size overflow" error on the console when you select a large enough csv file (happening in firefox):

http://localhost:3000/#/import/

react-csv-reader under the hood uses papaparse, so probably related to this issue: mholt/PapaParse#469

The following will create a ~ 288MB large.csv file pretty quick to test this with:

echo "1,2,3,4,5,6,7,8,9" > large.csv; for i in $(seq 1 8); do cat large.csv large.csv large.csv large.csv large.csv large.csv large.csv large.csv > large.csv2; mv large.csv2 large.csv; done

A quick google query pull this up: https://stackoverflow.com/questions/31722808/how-to-papa-unparse-a-huge-json-object

It probably boils down to we have to be careful how we manage processing of a large file, and use byte streams instead of full copies in memory.

As a canvasser I need to see a list view of people so that I can focus on follow-ups by name rather than by address.

This feature is done when:

• An option on the list view toggles between list by address and list by person

As a user, I only want to see links in the left sidebar that are relevant to me so I can stay focused on my tasks.

Examples:

An unassigned volunteer would basically see only dashboard, logout, help & about.

A denied (locked) user wouldn't see a menu at all - they'd get a screen like the login page that simply says they have been locked out of the system, and have a "logout" button where the "login" button would be.

Only an administrator (for now) would see the "create X" buttons for teams, turfs, forms, etc.

Should probably role the entire repo into the HelloVoterAPI repo.

I think a good way to do this would be to move this repo into a subfolder under the HellVoterAPI repo root.

1. It would allow more streamlined development of the HQ. No need to untar or merge from another repo when new commits are made.

2. This gives the user a choice of running the API, Database and web frontend on the same instance. Since it's a react app, you could use the nodejs http module to serve the hq app. Could build a feature into the web HQ or API later on that automatically copies/moves the API into an S3 bucket(with www turned on) or a CDN.

As a canvassing volunteer, I need to be able to add a new address even though my device registers me as outside a boundary so that I can add new address when I'm close to the boarder and my device is being inaccurate with location, or I'm not near the boundary and have data to enter from some other source.

This feature is done when:

• I can tap on the map the location to drop the new address pin
• I am still not able to add an address outside the boundaries

As a campaign manager, I need to create tasks for volunteers so that we can provide clear instruction as to what needs to be done within the tool.

This feature is done when:

• A new task creation API exists
• Tasks require a form, a list ("turf" or otherwise), and a text description
• A task status API exists
• The "/hello" endpoint is updated to pull assignments from tasks if they exist

As a new volunteer I need to be able to open a link sent to me via invitation so that I can have a faster and easier on-boarding process.

This feature is done when:

• The app understands a special link format
• The app opens to the "connect to server" modal prefilled/submitted so they see the social media sign-in options
• The user ends up on the CanvassingPage after sign-in

As a canvasser, I need the multi-address screen to paginate so I'm not bogged down by high-unit addresses, and a search function so units are easier to find.

This feature is done when:

• The multi-address screen paginates with a changeable limit
• A search input exists that filters down to units matching the search

react-tooltip was used before we moved to Material UI. Need to convert to use the component native to it:

https://material-ui.com/demos/tooltips/

As a canvassing volunteer, I need a divider to show up in-between various attributes on the canvassing form so I have a visual separation of certain items.

This feature is done when:

• Based on configuration, a divider shows on the screen in-between certain attributes

The dashboard is the first screen you see when you login:

http://localhost:3000/HelloVoterHQ/#/

Need a component that lets a user delet, and add various cards on the dashboard, and any action is saved to a localStorage item so their changes persist in that browser.

This is related to #37

As a canvassing volunteer I need to filter results by distance of my position so that I don’t have doors on my list that are too far away.

This feature is done when:

• I can select a maximum distance in settings and pins further than that do not load

As a developer I want search queries on large data sets to be performant while keeping write performance so that both read and write queries happen fast.

This feature is done when:

• When an (:Attribute) is created, its corresponding Node type is created, and index created
• Each (:PersonAttribute) has a second Node that is indexed on value that corresponds to its [:ATTRIBUTE_TYPE]
• A recurring job exists that finds (:PersonAttribute) without a second Node, and sets it

As a canvassing volunteer, I need to filter on multiple attributes so I can further narrow down my walk list so I can do targeted operations and/or not feel overwhelmed by how much data I'm able to access.

This feature is done when:

• The filter key allows you to select more than one key for an AND search
• The filter value allows you to select more than one value for an OR search

Examples:

• Filter by "Party Affiliation" of "Democratic" OR "Republican" (thereby not showing other parties)
• Filter by "Party Affiliation" of "No Party Preference" AND by "Occupation" of "Homemaker" (thereby making the knock a higher likelihood of getting an answer, and only talking to non-partisan folk)

As a developer I want to document the API endpoints in-line to the code so that I can easily keep the API documentation up to date and so that people integrating with the API can do so easily.

This feature is done when:

• A framework to annotate node.js code is chosen
• Basic documentation of each endpoint is completed.

The turf creation page:

http://localhost:3000/HelloVoterHQ/#/turf/add

It currently has the select components appear in vertical sequence. It would be more visually friendly to use a stepper component so the user knows how many steps there are and which they're on:

https://material-ui.com/demos/steppers/#vertical-stepper

As a maintainer of HelloVoter I would like a neo4j plugin that contains just the few procedures we need brought into our own plugin so that we are not tied to waiting on the spatial neo4j plugins release cycle for neo4j upgrades and so we don't carry the functions we don't need that those plugins provide.

This feature is done when:

• The spatial plugins is removed with their procedures replaced by functionality from our own neo4j plugin
• Any procedure that can be done natively with neo4j or with light assistance from JavaScript is ditched in favor of that

Procedures we currently use are:
spatial.intersects
spatial.withinDistance

As a canvassing volunteer, I need the option to have the map use the camera pan/follow functions so I have a more guided canvassing experience.

This feature is done when:

• react-native-maps is upgraded to 0.23 or later
• this upgrade to maps doesn't break legacy canvassing
• the map-marker button, when centered on device position, toggles the guided camera mode

Dependencies:

• react-native-maps links against GoogleMaps version 2.5.0, and needs to be at 3.0.3 or later to work with our use of react-native-google-places

When you tap "Home Address" or "Search Address" in the app, the search dialog pops open, then immediately closes.

This is the YourRepsPage component, the openAddressModal method, using the react-native-google-places dependency. The source code for that is here (hasn't updated in 8 months): https://github.com/tolu360/react-native-google-places

In fact the developer just responded yesterday to this issue which I think is what we are experiencing: tolu360/react-native-google-places#193

This is likely due to the deprecation notice regarding the google places API as they released a new version and don't want to support the old one anymore.

So we either need to help fix the dependency to use the newer version of the API -- or find another solution.

As a canvassing volunteer, I need to be able to individually mark who was home, not home, etc so that I can keep better track of who's been contacted and I can mark to come back later and who to ask for, even if I speak with someone else at that address.

This feature is done when:

• I can individually mark a person with status
• I can see last status on that person
• More statuses are available, such as; come back later, non-English speaker, deceased
• The existing mark an address as not home/etc still functions

As a user, I need the ability to see the turf polygon drawn on the map when I go to view a specific turf so I can get a sense of where it is.

http://localhost:3000/HelloVoterHQ/#/turf/view/test:reagion

The turf object has a "geometry" property that's a geojson object.

When you go to create a turf based on a state legislative district, we currently assume "State House" and "State Senate":

http://localhost:3000/HelloVoterHQ/#/turf/add

Some states use "Assembly" instead of house, and may or may not include the word "General" in there. There's even a state that doesn't have a lower house at all. We need to define an object of what state calls each of their upper/lower legislative districts, and edit the add turf page to reflect it.

The resulting list should be an object exported in the SDK so it can be sourced from many projects:

https://github.com/OurVoiceUSA/ourvoiceusa-sdk-js

Use "sldl" as the lower house object key, and "sldu" for the upper hose object key. That library also defines "us_states" so use the same keys there to define state.

As a developer I want to create a queue job for data export so that it can be called from the API.

This feature is done when:

• A queue job exists to execute a data export
• The job accepts a search filter so only specific data is exported
• The job accepts a list of attributes to export so only certain attributes are exported
• An endpoint to retrieve exported csv files exists.

As a developer I want to create a queue job for autoturf so that it can be called from the API.

This feature is done when:

• A queue job exists to execute autoturf
• The autoturf query is modified as necessary to reflect current schema and coding conventions

As a user, I need to see a modal (or large tooltip) appear on the top (or bottom?) right when I hover over a turf to see teams, volunteers, number of addresses, etc so I have a sense of what needs to be done there.

When you select "Unassigned Volunteer" or "Denied Volunteer" -- it shouldn't load the menu on the left. We should instead show a page similar to the login page, that simply says either something like "You are in queue to be assigned, please check back later" (for unassigned) and "Access denied" to the locked user.

The data for a user is currently stored in the jwt and mocks.js stores the various values. Here's an example of the locked out user:

const mock_denied = {
  id: 'test:denied',
  locked: true,
  name: 'Denied Volunteer',
  avatar: 'https://cdn1.iconfinder.com/data/icons/users-vol-3/32/user-man-lock-block-512.png',
  homeaddress: 'Who cares?',
  ass: {
    ready: false,
    direct: false,
    turfs: [],
    teams: [],
    teamperms: [],
    forms: [],
  }
};

Notice the locked: true flag.

Unassigned is when all of turfs, teams, and forms are empty ... but we can make a boolean flag for that if it makes it easier.

As a canvasser I can be confused by the booleans, especially when they are marked read only, and I need a better visualization of it so that I understand what it means.

This feature is done when:

• A readonly boolean isn't just a toggle, it has something else to make it obvious what it is

As a volunteer, I need to see a history of who I talked to, and when, so I can easily reference and go back to people by name and not have to remember where they lived or spend time searching through the map to find them.

This feature is done when:

• A list is available in the canvassing section of people I've recorded
• Their address is readily available

On the import page:

http://localhost:3000/HelloVoterHQ/#/import/

When the "Submit" button is pressed, if no fields are mapped to "Unit" -- make a reasonable attempt to search / split out the unit from the "Street Address". Here's some POC code:

let sep = ['#', 'apt', 'unit', 'ste'];
sep.map((i) => i = new RegExp('.* '+i+' ', 'i'));

if (!unit) {
  for (let e in sep) {
    if (str.match(sep[e])) {
      unit = str.replace(sep[e], "").trim();
      break;
    }
  }
}

Only needs to run if "Unit" is not mapped.

As a canvassing volunteer, I need to filter based on time and numerical attributes so that I can follow up with only people that haven't been contacted in a while, or are above/below a certain age.

This feature is done when:

• I can filter based on age.
• I can filter based on someone not having been knocked in X number of days.

As a team leader or administrator, I need to be able to view the map and view all pins when zoomed out, but have them cluster together like they do on the mobile app, so that I have very good UI performance.

As a person who wants to import a voter file, I need a UI that asks to select a CSV file, shows me the CSV file headers, lets me map the column of data that header is associated with to a data type, and get a preview of what the import will looks like. This is so I don't have to edit the CSV file to be in a particular format to be able to import it.

This is because voter files come is a very wide range of formats.

We need to visualize the ability to select a header, and drag/drop it to assign it to a particular data type, and the ability to combine and split fields. Data type defaults to NULL if it is not present. To split apart a field, set a delimiter option of space or comma.

Not all columns need to be assigned. In fact, in the real world, most columns will be ignored. CSV file header counter can get pretty stupid long...

Data types / format we need to end up as:
Street address,City,State,Zip,Country,Name,Party,Custom1,Custom2,Custom3

This data could look like this:
First Name,Middle Initial,Last Name,Party,Street #,Street Name,City,Zip,
Joe,,Average,Unaffiliated,838,Wilshire Pl,Salt Lake City,84102

(note the street # and street name are different fields, it's missing state and country, and "Name" is split up into First Name, Middle Initial, Last Name):

Example Visual after column header assignment is done by the user:
838 Wilshire Pl,Salt Lake City,NULL,84102,NULL,Joe Average,Unaffiliated,NULL,NULL,NULL

Another format the same data could look like from the incoming CSV file:

Name,Party,Address
Joe Average,Unaffiliated,"838 Wilshire Pl, Salt Lake City, UT, 84102"

(note the full address is a single field encased in quotes)

After assignment, have a "submit" button that posts the CSV file in the new format to an endpoint.

As a regular volunteer, I still need to see assignments and such, but need the Select (and other) components to use their disabled properties so that I'm not even given the chance to try to edit them.

react-notifications was used before we moved to Material UI. Need to convert to use the native "Snackbar" component; https://material-ui.com/demos/snackbars/

As an organizer I need to be able to invite someone to canvass, and pre-assign them to turf prior to them logging in, so that I have an easier on-boarding process.

This feature is done when:

• The Volunteer screen has a button to create an invite for organizers
• The Volunteer screen shows invitees in the list
• An organizer is able to assign teams/form/turf to an invitee

The mobile app's UI is a hodge podge of componenets and rather inconsistent. Let's address that by using the Material UI. See the documentation here: https://github.com/xotahal/react-native-material-ui/blob/master/docs/GettingStarted.md

As a field organizer, I don't need to collect all the data points we have in a voter file when knocking the doors of non-voters, yet still want to see those data points on people already in the database, so that I have as much info as possible without bogging down the collection process for new people.

This feature is done when:

• Based on configuration, certain form attributes are hidden on the "Add Person" survey
• These form attributes still exist when looking at an existing person in the database

When using turf that are only digits, a search for "46" should only show turfs with "46" in them, and not anything else.

As a developer I need a simplified ecosystem to develop / deploy the mobile application so I can spend more time coding a less time dealing with dependency hell, and so non-programmers can use the latest development version of the app with very little overhead.

This feature is done when:

• All dependencies in package.json that require "react native link" (see below) are replaced with either Expo APIs, or functionality is removed
• Production bundles for the mobile app are deployed for both iPhone and Android

Currently used dependencies with native code:

• react-native-config - used for dev vs. prod google api keys
• react-native-device-info - mainly needed to get deviceId, rest of it is nice to have
• react-native-geocoder - canvassing to guess address when dropping new pin
• react-native-google-location - android only, used to get position from device
• react-native-google-places - used for search address autocomplete on 'Your Reps'
• react-native-maps - canvassing
• react-native-permissions - push notifications & location access
• react-native-rate - send the user directly to their app store to rate the app
• react-native-safari-view - iOS only, used as part of the social media oauth
• react-native-vector-icons - icons, they're everywhere!