Merge pull request #237 from caktus/develop

Production release v1.12.0
caktus · Oct 12, 2023 · 237fc95 · 237fc95
2 parents 535fd18 + f8b6d49
commit 237fc95
Show file tree

Hide file tree

Showing 38 changed files with 26,290 additions and 90 deletions.
diff --git a/.gitignore b/.gitignore
@@ -54,4 +54,6 @@ deploy/roles
 docker-compose.override.yml
 htmlcov
 nc/notebooks/**/**.html
+nc/notebooks/2023-07-raleigh-contraband/input/Contraband.txt
+nc/notebooks/2023-07-raleigh-contraband/input/Contraband.txt.zip
 acs*.json
diff --git a/docs/dev-setup.rst b/docs/dev-setup.rst
@@ -76,11 +76,11 @@ To use ``psql`` locally, make sure you have the following env variables loaded
 
     export DJANGO_SETTINGS_MODULE=traffic_stops.settings.local
     export PGHOST=127.0.0.1
-    export PGPORT=54344
+    export PGPORT=9051
     export PGUSER=postgres
-    export PGDATABASE=traffic_stops
-    export DATABASE_URL=postgres://127.0.0.1:54344/traffic_stops
-    export DATABASE_URL_NC=postgres://127.0.0.1:54344/traffic_stops_nc
+    export PGDATABASE=traffic_stops_nc
+    export DATABASE_URL=postgres://127.0.0.1:${PGPORT}/traffic_stops
+    export DATABASE_URL_NC=postgres://127.0.0.1:${PGPORT}/traffic_stops_nc
 
 To setup your local environment you should create a virtualenv and install the
 necessary requirements::
@@ -107,7 +107,6 @@ Migrate the project databases::
 
     (traffic-stops)$ ./migrate_all_dbs.sh
 
-
 Frontend setup::
 
   (traffic-stops)$ cd frontend

diff --git a/frontend/src/Components/AgencyData/AgencyData.styled.js b/frontend/src/Components/AgencyData/AgencyData.styled.js
@@ -9,6 +9,7 @@ export const ContentWrapper = styled.div`
   display: flex;
   flex-direction: ${(props) => (props.showCompare ? 'column' : 'row')};
   width: 100%;
+  height: 100%;
   scroll-behavior: smooth;
   @media (${smallerThanTabletLandscape}) {
     flex-direction: column;

diff --git a/frontend/src/Components/AgencyData/AgencyHeader.js b/frontend/src/Components/AgencyData/AgencyHeader.js
@@ -50,7 +50,7 @@ function AgencyHeader({
       {agencyHeaderOpen && (
         <S.AgencyHeader>
           <S.SubHeaderNavRow>{!showCompareDepartments && <BackButton />}</S.SubHeaderNavRow>
-          <S.SubHeaderContentRow>
+          <S.SubHeaderContentRow flexDirection={showCompareDepartments ? 'column' : 'row'}>
             <S.EntityDetails>
               {officerId ? (
                 <>
@@ -93,7 +93,7 @@ function AgencyHeader({
             />
           </S.SubHeaderContentRow>
           {!showCloseButton && (
-            <S.ShowDepartmentsButton>
+            <S.AgencyHeaderButton>
               <Button
                 variant="positive"
                 border={`2px solid ${theme.colors.primary}`}
@@ -108,10 +108,10 @@ function AgencyHeader({
                 />
                 Compare Departments
               </Button>
-            </S.ShowDepartmentsButton>
+            </S.AgencyHeaderButton>
           )}
           {showCloseButton && (
-            <div style={{ display: 'block' }}>
+            <S.AgencyHeaderButton>
               <Button
                 variant="positive"
                 border={`2px solid ${theme.colors.primary}`}
@@ -126,7 +126,7 @@ function AgencyHeader({
                 />
                 Close
               </Button>
-            </div>
+            </S.AgencyHeaderButton>
           )}
         </S.AgencyHeader>
       )}

diff --git a/frontend/src/Components/AgencyData/AgencyHeader.styled.js b/frontend/src/Components/AgencyData/AgencyHeader.styled.js
@@ -53,7 +53,7 @@ export const SubHeaderNavRow = styled.div`
 export const SubHeaderContentRow = styled.div`
   display: flex;
   flex: 1;
-  flex-direction: row;
+  flex-direction: ${(props) => props.flexDirection || 'row'};
   @media (${smallerThanDesktop}) {
     flex-direction: column;
   }
@@ -77,7 +77,7 @@ export const Other = styled(P)`
   font-size: 14px;
 `;
 
-export const ShowDepartmentsButton = styled.div`
+export const AgencyHeaderButton = styled.div`
   display: block;
   margin: 10px 0;
 `;
diff --git a/frontend/src/Components/AgencyData/CensusData.js b/frontend/src/Components/AgencyData/CensusData.js
@@ -3,26 +3,33 @@ import { ABOUT_SLUG } from '../../Routes/slugs';
 import { calculatePercentage, RACES } from '../Charts/chartUtils';
 import { COLORS, SIZES } from '../../styles/StyledComponents/Typography';
 import toTitleCase from '../../util/toTitleCase';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';
 
 export default function CensusData({ agencyDetails, showCompareDepartments }) {
   const history = useHistory();
   const [referenceElement, setReferenceElement] = useState(null);
   const [popperElement, setPopperElement] = useState(null);
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'top',
+  const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
+    placement: 'top-start',
     modifiers: [
       {
         name: 'offset',
         options: {
-          offset: [showCompareDepartments ? 0 : -300, 10],
+          offset: [0, 10],
         },
       },
     ],
   });
 
+  useEffect(() => {
+    if (popperElement) {
+      // Force updating the position of the census tooltip when showing/hiding compare departments
+      update();
+    }
+  }, [showCompareDepartments]);
+
   const showTooltip = () => {
     popperElement.setAttribute('data-show', true);
   };

diff --git a/frontend/src/Components/AgencyList/AgencyList.js b/frontend/src/Components/AgencyList/AgencyList.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import * as S from './AgencyList.styled';
 
 // Router
-import { Link, useRouteMatch } from 'react-router-dom';
+import { Link, useHistory, useRouteMatch } from 'react-router-dom';
 
 // AJAX
 import axios from '../../Services/Axios';
@@ -15,19 +15,28 @@ import { FETCH_START, FETCH_SUCCESS, FETCH_FAILURE } from '../../Context/root-re
 // Components
 import ListSkeleton from '../Elements/ListSkeleton';
 import { H1, P } from '../../styles/StyledComponents/Typography';
+import FjButton from '../Elements/Button';
+import * as ChartHeaderStyles from '../Charts/ChartSections/ChartHeader.styled';
+import { STATEWIDE_DATA } from '../../Routes/slugs';
+import { ICONS } from '../../img/icons/Icon';
+import { useTheme } from 'styled-components';
 
 const DATA_SET = 'AGENCIES_LIST';
 
 function AgencyList() {
   const match = useRouteMatch();
+  const theme = useTheme();
+  const history = useHistory();
 
   const [state, dispatch] = useRootContext();
   const [sortedAgencies, setSortedAgencies] = useState({});
 
   async function _fetchAgencyList() {
     try {
       const { data } = await axios.get(getAgenciesURL());
-      dispatch({ type: FETCH_SUCCESS, dataSet: DATA_SET, payload: data });
+      // Removing NC Statewide link from list and instead have dedicated button above list
+      const agencies = data.filter((d) => d.id !== -1);
+      dispatch({ type: FETCH_SUCCESS, dataSet: DATA_SET, payload: agencies });
     } catch (error) {
       dispatch({ type: FETCH_FAILURE, dataSet: DATA_SET, payload: error.message });
     }
@@ -76,6 +85,22 @@ function AgencyList() {
               passengers involved in traffic stops.
             </P>
           </S.HeadingAndDescription>
+          <S.ButtonWrapper>
+            <FjButton
+              variant="positive"
+              border={`2px solid ${theme.colors.primary}`}
+              {...ChartHeaderStyles.ButtonInlines}
+              onClick={() => history.push(`${STATEWIDE_DATA}`)}
+            >
+              <ChartHeaderStyles.Icon
+                icon={ICONS.info}
+                height={25}
+                width={25}
+                fill={theme.colors.white}
+              />
+              View all statewide data
+            </FjButton>
+          </S.ButtonWrapper>
         </S.UpperContent>
         {state.loading[DATA_SET] && <ListSkeleton />}
         {state.data[DATA_SET] && (

diff --git a/frontend/src/Components/AgencyList/AgencyList.styled.js b/frontend/src/Components/AgencyList/AgencyList.styled.js
@@ -1,6 +1,11 @@
 import styled from 'styled-components';
-import { phoneOnly, smallerThanDesktop } from '../../styles/breakpoints';
+import {
+  phoneOnly,
+  smallerThanDesktop,
+  smallerThanTabletLandscape,
+} from '../../styles/breakpoints';
 import FullWidthPage from '../../styles/StyledComponents/FullWidthPage';
+import FJIcon from '../../img/icons/Icon';
 
 export const AgencyList = styled(FullWidthPage)``;
 
@@ -76,3 +81,24 @@ export const AutoSuggestForm = styled.form`
   flex-direction: row;
   align-items: center;
 `;
+
+export const ButtonWrapper = styled.div`
+  width: 360px;
+  margin: 2em 0;
+  @media (${smallerThanTabletLandscape}) {
+    width: 90%;
+    margin: 2em auto;
+  }
+`;
+
+export const ButtonInner = styled.span`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: auto;
+  width: 85%;
+  font-size: 22px;
+`;
+
+export const ButtonIcon = styled(FJIcon)``;
diff --git a/frontend/src/Components/Charts/ChartSections/ChartHeader.styled.js b/frontend/src/Components/Charts/ChartSections/ChartHeader.styled.js
@@ -30,12 +30,15 @@ export const ChartTitle = styled(H2)`
 export const ButtonsWrapper = styled.div`
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: 30px;
 
   @media (${phoneOnly}) {
     width: 90%;
     margin: 0 auto;
+    flex-direction: column;
+    gap: 0;
 
     & button {
       margin: 0.5em 0;

diff --git a/frontend/src/Components/Charts/ChartSections/ChartPageBase.styled.js b/frontend/src/Components/Charts/ChartSections/ChartPageBase.styled.js
@@ -7,10 +7,12 @@ export const ChartPageBase = styled(motion.article)`
   height: 100%;
   overflow-y: hidden;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 `;
 
 export const ChartPageContent = styled.div`
-  margin: 0 auto;
   padding: 1.5em 6em 3em 4em;
   overflow: hidden;
 

diff --git a/frontend/src/Components/Charts/ChartSections/Legend/Legend.js b/frontend/src/Components/Charts/ChartSections/Legend/Legend.js
@@ -5,13 +5,13 @@ import * as S from './Legend.styled';
 import { ICONS } from '../../../../img/icons/Icon';
 import { WEIGHTS } from '../../../../styles/StyledComponents/Typography';
 
-function Legend({ keys, onKeySelect, isStatic, showNonHispanic, heading, row }) {
+function Legend({ keys, onKeySelect, isStatic, showNonHispanic, heading, direction = 'row' }) {
   const theme = useTheme();
 
   return (
-    <S.Legend row={row}>
+    <S.Legend>
       {heading && <S.LegendHeading weight={WEIGHTS[1]}>{heading}</S.LegendHeading>}
-      <S.KeysList row={row}>
+      <S.KeysList direction={direction}>
         {keys?.map((key) => {
           const fill = key.selected ? theme.colors.ethnicGroup[key.value] : theme.colors.grey;
           const iconProps = {
@@ -60,13 +60,13 @@ Legend.propTypes = {
   onKeySelect: PropTypes.func,
   showNonHispanic: PropTypes.bool,
   heading: PropTypes.string,
-  row: PropTypes.bool,
+  direction: PropTypes.string,
 };
 
 Legend.defaultProps = {
   isStatic: false,
   showNonHispanic: false,
-  row: false,
+  direction: 'row',
 };
 
 export default Legend;
diff --git a/frontend/src/Components/Charts/ChartSections/Legend/Legend.styled.js b/frontend/src/Components/Charts/ChartSections/Legend/Legend.styled.js
@@ -21,14 +21,14 @@ export const LegendHeading = styled(P)`
 
 export const KeysList = styled.ul`
   display: flex;
-  flex-direction: ${(props) => (props.row ? 'row' : 'column')};
+  flex-direction: ${(props) => props.direction};
   list-style: none;
   padding: 0;
   margin: 0;
+  flex-wrap: wrap;
 
   @media (${smallerThanDesktop}) {
     flex-direction: row;
-    flex-wrap: wrap;
     justify-content: space-between;
   }
 `;

diff --git a/frontend/src/Components/Charts/ChartSections/ShareList.js b/frontend/src/Components/Charts/ChartSections/ShareList.js
@@ -2,8 +2,8 @@ import React from 'react';
 import * as S from './ShareList.styled';
 
 // Deps
-import TwitterLogo from '../../../img/twitter_logo_blue.png';
-import FacebookLogo from '../../../img/f_logo_RGB-Blue_58.png';
+import TwitterLogo from '../../../img/x-logo-black.png';
+import FacebookLogo from '../../../img/meta_logo_primary.svg';
 
 function ShareList({ shareUrl, twitterTitle, onPressHandler }) {
   return (

diff --git a/frontend/src/Components/Charts/ChartSections/ShareList.styled.js b/frontend/src/Components/Charts/ChartSections/ShareList.styled.js
@@ -6,24 +6,24 @@ export const ShareList = styled.div`
   flex-direction: row;
   align-items: center;
   margin-right: 1.5em;
+  gap: 15px;
 
   @media (${phoneOnly}) {
     margin: 0;
     justify-content: center;
-    margin-top: 1.5em;
   }
 `;
 
 export const ShareItem = styled.a`
-  margin: 0 1.5em;
+  margin: 0;
 `;
 
 export const FBLogo = styled.img`
-  height: 32px;
-  width: 32px;
+  height: 75px;
+  width: 150px;
 `;
 
 export const TWLogo = styled.img`
-  height: 32px;
-  width: 32px;
+  height: 25px;
+  width: 25px;
 `;
diff --git a/frontend/src/Components/Charts/Contraband/Contraband.js b/frontend/src/Components/Charts/Contraband/Contraband.js
@@ -121,7 +121,8 @@ function SearchRate(props) {
         <ChartHeader chartTitle='Contraband "Hit Rate"' handleViewData={handleViewData} />
         <S.ChartDescription>
           <P>
-            Shows what percentage of searches discovered contraband for a given race / ethnic group
+            Shows what percentage of searches discovered illegal items for a given race / ethnic
+            group.
           </P>
         </S.ChartDescription>
         <S.ChartSubsection showCompare={showCompare}>