Blue Witness: A Lambda Labs Story
“America is strongest when our policies and actions match our values.” — Human Rights First
Humans Rights First (HRF) is an American organization that fights for and demands change that represents the best interest of the people. They stand for accountability, reform, and justice.
One facet of this initiative is that of excessive use of police force, often coined under the name of “police brutality”. A common issue with discerning reports of possible police-use-of-force is that of validity, and the world lacks a platform that acts as a single source of truth for these reports where data can be viewed and exported intuitively.
Enter Blue Witness, the newest addition to HRF’s growing lineup of projects, where reports of police-use-of-force are aggregated using a twitter bot and other tools to provide an intuitive, easy to digest library of information on the topic. The twitter bot scours twitter for possible incidents, asks for more information, and if the received info manages to score a confidence rating of 90% or more, it is then staged for manual approval by the Blue Witness administrative team.
Before my time with the project, my primary concern was that of objectivity. I was worried that the information received and then subsequently displayed would be biased, and that the whole truth would be missing. However, as time has been spent with my team and with the stakeholder of the project, I have never been given any indication that the goals and motivations of those involved has been anything other than the pursuit of aforementioned objectivity.
Below lie some screenshots of the HRF website.
Let’s Get Technical
My primary contribution to this project comes in the form of the about page, where the entire design was refactored and the contents changed to better reflect the mission and goal of the website. This refactor was done in conjunction with Ant Design (AntD), a popular React UI library that takes much of the guesswork out of styling and designing. Although no AntD components themselves were used in the refactor, the AntD guidelines were still used as a heavy reference for what we wanted the page to look like, as the rest of the site is built almost exclusively with AntD components.
Aside from the about page, I worked on several other UI/UX features across the site in addition to an extensive deep dive into the sorting functions used to sort incidents by date. The filtering functionality itself was exceptionally tricky, as its implementation by previous teams spanned several different components that all shared similar naming conventions, making any issues or bugs difficult to track down.
The biggest issue here was that the default data of the site was not ordered properly by date, meaning that users might move on to new filters without knowing they missed information that was still applicable to their initial viewing. To fix this, we implemented a filtering function that sorted the default data by date in descending order, starting with the most recent.
The above code works by creating an array of objects that include an ID and date of the report, then ordering those objects by date. We start by mapping over an array of ID’s (pulled from the Redux store) that each correspond to an incident report. All this function is doing is creating a new object for each ID that contains that ID in addition to the date of the incident, allowing for easy sorting. We take the result of that function, sort it using a simple sort function, then once it is sorted we return the ID by itself so it can be properly understood and rendered by the rest of the components that interpret the data.
The Current State of Blue Witness
As of writing this, Blue Witness is in really solid shape. My team members and I have effectively redesigned the entire UI of the site and added several quality of life features. This includes but is not limited to a redesign of the following:
- About Page (shown above)
- Home Page (shown segmented)
- Incident Reports Page
- Graphs page (segmented)
- Nav Bar (shown in first screenshot)
- Footer
In addition to UI/UX, various other tweaks have been made to filtering, rendering, and the like, such as:
- Filtering functionality that shares state in both the map and the incident reports dropdown on the home page, allowing for a cohesive experience
- Easier to use exportation of data in the incident reports page
- Logos that are clickable and redirect to places that makes sense
- Various map updates
The future
Blue Witness is nearing the final stages of its development, but there are still things that need to ironed out by future labs teams. I foresee the filtering issues continuing to be prevalent for future teams, as its problems are fundamentally rooted in the structure of the code. In addition, here is a short list of potential features/fixes that may need to be implemented before the project is to be considered completed:
- A more extensive/accurate confidence rating system
- A potential rehash of the filtering system, there are edge cases where it’s functionality fails
- More comprehensive, fleshed out media queries
- General UI tweaks and fixes
I have received very good feedback from peers regarding my time with this project, the most prevalent being that effective communication fixes almost every non-technical problem foreseeable. Over-communication will squash many issues before they arise.
Overall, I believe my time with this project will pay dividends towards the betterment of myself as a developer and as a professional. I have learned how to work in a team, how to work on a codebase that has already had several iterations implemented before me with technologies unfamiliar to me, and most of all I have learned to analyze myself in an objective yet kind way utilizing all of the amazing information I have learned throughout my time in Labs.
