14 |
21 | )
22 | }
23 |
24 | export default PageBody
--------------------------------------------------------------------------------
/src/components/sidebar/right-sidebar/datepicker/Track.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { SliderItem } from "react-compound-slider";
3 |
4 | interface TrackProps {
5 | source: SliderItem;
6 | target: SliderItem;
7 | disabled?: Boolean;
8 | getTrackProps: () => object;
9 | }
10 |
11 | export default function Track({
12 | source,
13 | target,
14 | getTrackProps,
15 | disabled = false
16 | }: TrackProps) {
17 | return (
18 |
27 | );
28 | }
--------------------------------------------------------------------------------
/src/components/pages/Explore/Explore.scss:
--------------------------------------------------------------------------------
1 | @import '../../../sass/variables.scss';
2 |
3 | @mixin icon-container {
4 | position: absolute;
5 | z-index: 3000;
6 | background-color: white;
7 | border-radius: 3px;
8 | box-shadow: 0 3px 3px 0 #646464;
9 | height: 30px;
10 | width: 30px;
11 | }
12 |
13 | .explore {
14 | .sidebar {
15 | &__info-btn {
16 | @include icon-container;
17 | top: 45px;
18 | left: 10px;
19 | }
20 |
21 | &__filter-btn {
22 | @include icon-container;
23 | top: 10px;
24 | left: 10px;
25 | }
26 |
27 | &__map-btn {
28 | @include icon-container;
29 | bottom: 10px;
30 | right: 10px;
31 | }
32 | }
33 | }
--------------------------------------------------------------------------------
/src/components/pages/PrivacyPolicy.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useMediaQuery } from "react-responsive";
3 | import { mobileDeviceOrTabletWidth } from "../../constants";
4 | import Translate from "../../utils/translate/translateService";
5 | import './static.css';
6 |
7 | export default function PrivacyPolicy() {
8 | const isMobileDeviceOrTablet = useMediaQuery({ maxDeviceWidth: mobileDeviceOrTabletWidth })
9 |
10 | return (
11 |
15 |
19 | {props.includeMaintenanceModal &&
16 | {props.children}
17 |
18 |
12 |
13 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/assets/images/airtable-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/PartnershipsConfig.ts:
--------------------------------------------------------------------------------
1 | import { Partnership } from './types';
2 | import { CANADA_URLS } from "./constants";
3 |
4 | const PartnershipsConfig: Partnership[] = [
5 | {
6 | iso3: 'CAN',
7 | routeName: "Canada",
8 | tableauKey: "CanadianTableau",
9 | tableauUrl: CANADA_URLS,
10 | mapboxMapOptions: {
11 | bounds: [
12 | [-148, 39], // Southwest coordinates
13 | [-50, 75] // Northeast coordinates
14 | ],
15 | /*
16 | maxBounds: [
17 | [-147, 37], // Southwest coordinates
18 | [-48, 86] // Northeast coordinates
19 | ]
20 | */
21 | }
22 | }
23 | ]
24 |
25 | export default PartnershipsConfig;
--------------------------------------------------------------------------------
/src/sass/_animations.scss:
--------------------------------------------------------------------------------
1 | .pulse {
2 | cursor: pointer;
3 | box-shadow: 0 0 0 #65BEE9;
4 | animation: pulse 1s;
5 | animation-iteration-count: 5;
6 | }
7 | .pulse:hover {
8 | animation: none;
9 | }
10 |
11 | @-webkit-keyframes pulse {
12 | 0% {
13 | -webkit-box-shadow: 0 0 0 0 rgba(101, 190, 233, 0.8);
14 | }
15 | 70% {
16 | -webkit-box-shadow: 0 0 0 14px rgba(101, 190, 233, 0.4);
17 | }
18 | 100% {
19 | -webkit-box-shadow: 0 0 0 0 rgba(101, 190, 233, 0);
20 | }
21 | }
22 | @keyframes pulse {
23 | 0% {
24 | -moz-box-shadow: 0 0 0 0 rgba(101, 190, 233, 0.8);
25 | box-shadow: 0 0 0 0 rgba(101, 190, 233, 0.4);
26 | }
27 | 70% {
28 | -moz-box-shadow: 0 0 0 14px rgba(101, 190, 233, 0.4);
29 | box-shadow: 0 0 0 14px rgba(101, 190, 233, 0);
30 | }
31 | 100% {
32 | -moz-box-shadow: 0 0 0 0 rgba(101, 190, 233, 0);
33 | box-shadow: 0 0 0 0 rgba(101, 190, 233, 0);
34 | }
35 | }
--------------------------------------------------------------------------------
/src/assets/images/two-tone-dark.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/assets/images/two-tone-light.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/components/shared/MaintenanceModal.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Modal } from "semantic-ui-react";
3 | import 'sass/components/shared.scss';
4 | import Translate from "../../utils/translate/translateService";
5 |
6 | interface MaintenanceModalProps {
7 | isOpen: boolean,
8 | headerText: string // specifies if analysis or explore page
9 | }
10 |
11 | export default function MaintenanceModal(props: MaintenanceModalProps) {
12 |
13 | const { isOpen, headerText } = props;
14 |
15 | return (
16 | {Translate('TemporaryMaintenanceDescription')}
25 |
15 |
21 |
32 | );
33 | }
--------------------------------------------------------------------------------
/.github/workflows/deploy-gh-pages.yml:
--------------------------------------------------------------------------------
1 | name: Deploy
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 | repository_dispatch:
8 | types: manual-trigger
9 |
10 | jobs:
11 | build:
12 | runs-on: ubuntu-latest
13 | steps:
14 | - name: Checkout
15 | uses: actions/checkout@v1
16 | - name: Setup Node
17 | uses: actions/setup-node@v2
18 | with:
19 | node-version: "12.16.0"
20 | - name: Build
21 | run: |
22 | npm install
23 | npm run build
24 | env:
25 | REACT_APP_MAPBOX_API_KEY: ${{ secrets.MAPBOX_API_KEY }}
26 | REACT_APP_ROUTE: ${{ secrets.ROUTE }}
27 | REACT_APP_GA_TRACKERID: ${{ secrets.GA_TRACKERID }}
28 | CI: false
29 | - name: Deploy
30 | uses: JamesIves/github-pages-deploy-action@releases/v3
31 | with:
32 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
33 | BRANCH: gh-pages
34 | FOLDER: build
35 |
--------------------------------------------------------------------------------
/src/components/static/Auth/auth.css:
--------------------------------------------------------------------------------
1 | .staticrypt-form {
2 | position: relative;
3 | z-index: 1;
4 | background: #FFFFFF;
5 | max-width: 360px;
6 | margin: 0 auto 100px;
7 | padding: 45px;
8 | text-align: center;
9 | box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
10 | }
11 |
12 | .staticrypt-form input {
13 | outline: 0;
14 | background: #f2f2f2;
15 | width: 100%;
16 | border: 0;
17 | margin: 0 0 15px;
18 | padding: 15px;
19 | box-sizing: border-box;
20 | font-size: 0.875em;
21 | }
22 |
23 | .staticrypt-form .staticrypt-decrypt-button {
24 | text-transform: uppercase;
25 | outline: 0;
26 | background: #4CAF50;
27 | width: 100%;
28 | border: 0;
29 | padding: 15px;
30 | color: #FFFFFF;
31 | font-size: 0.875em;
32 | cursor: pointer;
33 | }
34 |
35 | .staticrypt-form .staticrypt-decrypt-button:hover, .staticrypt-form .staticrypt-decrypt-button:active, .staticrypt-form .staticrypt-decrypt-button:focus {
36 | background: #43A047;
37 | }
--------------------------------------------------------------------------------
/src/components/sidebar/right-sidebar/SectionHeader.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "react-datepicker/dist/react-datepicker.css";
3 | import InformationIcon from "../../shared/InformationIcon";
4 |
5 | interface SectionHeaderProps {
6 | header_text: string,
7 | tooltip_text?: string | React.ReactNode,
8 | tooltip_header?: string
9 | }
10 |
11 | export default function SectionHeader({header_text, tooltip_text, tooltip_header}: SectionHeaderProps){
12 | return (
13 |
29 | {format(tick.value)}
30 |
31 |
14 |
28 | )
29 | }
--------------------------------------------------------------------------------
/src/components/map/ArbotrackerBanner.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { faTimes} from "@fortawesome/free-solid-svg-icons";
4 |
5 | export const ArboTrackerBanner = () => {
6 | const [visible, setVisible]= useState{header_text}
15 | {tooltip_text && (
16 |
17 |
26 | )}
27 |
19 |
22 |
28 | );
29 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 SeroTracker contributors
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/sidebar/right-sidebar/LanguageSelector.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from "react";
2 | import { CheckboxProps, Radio } from "semantic-ui-react";
3 | import { AppContext } from "../../../context";
4 | import { LanguageType } from "../../../types";
5 | import Translate from "../../../utils/translate/translateService";
6 |
7 |
8 | export default function LanguageSelector() {
9 | const [state, dispatch] = useContext(AppContext);
10 | const [checked, setChecked] = useState(state.language !== LanguageType.english)
11 | const handleChange = (event: React.SyntheticEvent
23 |
26 |
27 |
23 |
27 | )
28 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import 'sass/index.scss';
5 | import * as serviceWorker from './serviceWorker';
6 | import { AppContextProvider } from './context'
7 | import {Router} from 'react-router-dom';
8 | import GAListener from "./utils/analyticsUtils";
9 | import {createBrowserHistory} from 'history';
10 | import ReactGA from 'react-ga';
11 |
12 | // Initialize ReactGA
13 | const isDev = process.env.NODE_ENV === "development";
14 | ReactGA.initialize(process.env.REACT_APP_GA_TRACKERID, {
15 | titleCase: false,
16 | debug: isDev,
17 | gaOptions: {
18 | cookieDomain: isDev ? 'none' : 'auto'
19 | }
20 | });
21 |
22 | const history = createBrowserHistory()
23 |
24 | ReactDOM.render(
25 | {Translate('English')}
24 | < Radio toggle checked={checked} onChange={handleChange} onClick={(e, ea) => { e.preventDefault() }}>
25 | {Translate('French')}
26 |
24 |
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/utils/GeoJsonGenerator.tsx:
--------------------------------------------------------------------------------
1 | import { AirtableRecord } from "../types";
2 |
3 | // Please refer to GeoJSON spec rfc7946 if adding addiontal members: https://tools.ietf.org/html/rfc7946#section-3.1.1
4 | function recordsToGeoJsonFeatures(records: AirtableRecord[]): GeoJSON.Feature[] {
5 | return records.flatMap((record) => {
6 | if (!record.pin_latitude && !record.pin_longitude){
7 | return [];
8 | }
9 | return {
10 | type: "Feature",
11 | properties: { // We can add any properties here to modify how we want to render the pin - helpful for WHO data
12 | estimate_grade: record.estimate_grade,
13 | source_id: record.source_id ?? undefined
14 | },
15 | geometry: {
16 | type: "Point",
17 | coordinates: [record.pin_longitude, record.pin_latitude],
18 | },
19 | };
20 | });
21 | }
22 |
23 | export default function generateSourceFromRecords(records: AirtableRecord[]): mapboxgl.GeoJSONSourceRaw {
24 | const f = recordsToGeoJsonFeatures(records);
25 | const source = {
26 | type: "geojson",
27 | promoteId: 'source_id',
28 | data: {
29 | type: "FeatureCollection",
30 | features: f,
31 | },
32 | } as mapboxgl.GeoJSONSourceRaw;
33 |
34 | return source;
35 | }
--------------------------------------------------------------------------------
/src/components/shared/NewsletterPopup.tsx:
--------------------------------------------------------------------------------
1 | import React, {useEffect, useState} from "react";
2 | import {Button, Icon} from "semantic-ui-react";
3 |
4 | export default function NewsletterPopup() {
5 | const [hidden, setHidden] = useState(true)
6 |
7 | useEffect(() => {
8 | if (!localStorage.getItem("SubscribePopupSeen")){
9 | if(localStorage.getItem("returnUser") === "true") {
10 | setTimeout(function () {
11 | setHidden(false)
12 | localStorage.setItem("SubscribePopupSeen", "true")
13 | }, 30000) // 30 seconds in ms
14 | }
15 | }
16 | }, [])
17 |
18 | const onClickHandle = () => {
19 | setHidden(true)
20 | }
21 |
22 | return (
23 |
24 |
27 |
34 |
35 | )
36 | }
--------------------------------------------------------------------------------
/src/components/shared/WhoLogo.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react";
2 | import { AppContext } from "context";
3 | import { LanguageType } from "types";
4 | import WhoLogoEn from "assets/images/WHO-EN-C-H.png";
5 | import WhoLogoFr from "assets/images/WHO-FR-C-H.png";
6 |
7 | // Note: Consider abstracting this component into a generic TranslationImage and passing the image resource in as props if
8 | // more images need to be translated in the future.
9 |
10 | interface WhoLogoProps {
11 | className?: string | undefined;
12 | height?: string;
13 | }
14 |
15 | const WhoLogo = (props : WhoLogoProps) => {
16 | const [state] = useContext(AppContext);
17 | const [imgLanguageResource, setImgLanguageResource] = useState
24 |
35 | );
36 | }
--------------------------------------------------------------------------------
/src/components/shared/CookieBanner.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { Button } from 'semantic-ui-react'
4 | import { AppContext } from '../../context'
5 | import Translate from '../../utils/translate/translateService'
6 | import { withLocaleUrl } from '../../utils/utils'
7 | import "sass/components/shared.scss"
8 |
9 | export const CookieBanner = () => {
10 | const [state, dispatch] = useContext(AppContext)
11 |
12 | const acceptCookes = () => {
13 | localStorage.setItem('acceptedCookies', 'true');
14 | dispatch({ type: 'CLOSE_COOKIE_BANNER' })
15 | }
16 |
17 | if (!localStorage.getItem('acceptedCookies') && !state.showCookieBanner) {
18 | dispatch({ type: 'OPEN_COOKIE_BANNER' })
19 | }
20 |
21 | return (
22 | state.showCookieBanner ?
23 |
25 | 
26 |
34 | {Translate("NotFound", ["PartOne"])}
27 |{Translate("NotFound", ["PartTwo"])}
28 | 33 |
24 |
36 | : null
37 | )
38 | }
--------------------------------------------------------------------------------
/src/components/pages/Publications/PrivateReportsCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Translate from "../../../utils/translate/translateService";
3 | import { Card } from "semantic-ui-react";
4 | import {PublicationProps} from "./PublicationsConstants"
5 |
6 | export function PrivateReportsCard(props: PublicationProps) {
7 | return (
8 |
25 |
35 |
26 |
34 |
27 | {Translate('CookiePolicyBody', null, null, [false, true])}
28 | {Translate('CookiePolicy')}
29 |
30 |
31 |
32 |
33 |
9 |
10 |
11 |
17 | {props.date}
18 |
19 |
20 | Authored by: {props.authors}
21 |
22 |
23 | Collected by: {props.collection}
24 |
25 |
26 |
27 |
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/sidebar/left-sidebar/AnalysisMethods.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Translate from "../../../utils/translate/translateService";
3 | import InformationText from "../../shared/InformationText";
4 |
5 | const MIN_DENOMINATOR = 100
6 | export default function AnalysisMethods() {
7 | return (
8 |
12 |
13 | {props.italicize ? {props.italicize} : null}{Translate(props.titleKey1, props.titleKey2)}
14 |
15 |
16 |
9 |
29 | 10 | {Translate("AnalysisMethods", ["Title"])} 11 |
12 |
13 |
28 |
14 | {Translate("AnalysisMethods", ["FirstParagraph", "FirstSentence"], null, [false, true])}
15 |
18 |
22 | }
23 | text={Translate("Aggregating").toLowerCase()}
24 | offset={-12}
25 | />
26 | {Translate("AnalysisMethods", ["FirstParagraph", "SecondSentence"], null, [true, false])}
27 | 19 | {Translate("AnalysisMethods", ["Tooltip"], { "MIN_DENOMINATOR": MIN_DENOMINATOR })} 20 |
21 |30 | {Translate("AnalysisMethods", ["SecondParagraph"], null)} 31 |
32 |33 | {Translate("AnalysisMethods", ["ThirdParagraph"], null)} 34 |
35 | 36 | ) 37 | } -------------------------------------------------------------------------------- /src/components/shared/Footer/Footer.scss: -------------------------------------------------------------------------------- 1 | @import '../../../sass/variables.scss'; 2 | 3 | .whoDisclaimer { 4 | font-size: 16px; 5 | 6 | } 7 | 8 | .ui.styled.accordion.footer-accordion { 9 | border-radius: 0; 10 | background: none; 11 | box-shadow: none; 12 | } 13 | 14 | .title.footer.accordion__title{ 15 | color: white !important; 16 | } 17 | 18 | .footer { 19 | background-color: $sero-dark-blue; 20 | font-size: 16px; 21 | font-weight: 300; 22 | color: white !important; 23 | 24 | .updated-at-bold { 25 | font-weight: 600; 26 | } 27 | 28 | a:hover { 29 | color: white !important; 30 | text-decoration: underline; 31 | } 32 | 33 | &--mobile { 34 | flex-direction: column; 35 | justify-content: flex-start; 36 | } 37 | 38 | &__item { 39 | font-size: 1em; 40 | color: white; 41 | display: flex; 42 | align-items: center; 43 | } 44 | 45 | &__link { 46 | color: white; 47 | } 48 | 49 | &__image-wrapper { 50 | display: flex; 51 | margin-top: 15px; 52 | margin-bottom: 15px; 53 | } 54 | 55 | &__image { 56 | object-fit: contain; 57 | width: 100%; 58 | height: 100%; 59 | max-width: 120px; 60 | } 61 | 62 | &__sponsers-pill { 63 | padding: 1em; 64 | background-color: white; 65 | border-radius: 10px; 66 | } 67 | 68 | &__visible-section { 69 | height: 50px; 70 | white-space: nowrap; 71 | } 72 | 73 | h3 { 74 | font-weight: 600; 75 | } 76 | } -------------------------------------------------------------------------------- /src/components/shared/InformationText.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Popup } from "semantic-ui-react"; 3 | import { sendAnalyticsEvent } from "../../utils/analyticsUtils"; 4 | import 'sass/components/shared.scss'; 5 | 6 | interface InformationTextProps { 7 | position?: "top left" | "top right" | "bottom right" | "bottom left" | "right center" | "left center" | "top center" | "bottom center" | undefined, 8 | tooltip: string | React.ReactNode; 9 | tooltipHeader?: string; 10 | offset: string | number; 11 | popupSize?: "mini" | "tiny" | "small" | "large" | "huge"; 12 | text: string; 13 | } 14 | 15 | export default function InformationText(props: InformationTextProps) { 16 | const { text, tooltip, tooltipHeader, offset, position, popupSize = "small" } = props; 17 | return ( 18 | setShowSettings(!showSettings)}>{Translate('Settings')}
}
19 | open={showSettings}
20 | selectOnBlur={false}
21 | onChange={() => { }}
22 | onClose={(event: React.SyntheticEvent
9 | -
10 |
11 |
12 | {props.publicationName && props.publicationName}
13 |
14 |
15 |
21 | {
22 | //Could potentially add a description in the hover state if we feel like we need it.
23 | }
24 |
25 | {props.date && (
26 |
34 |
35 |
36 |
37 | )
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/sidebar/right-sidebar/datepicker/TooltipRail.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | const { Component, Fragment } = React;
4 |
5 | interface TooltipRailProps {
6 | activeHandleID: string;
7 | getRailProps: (props: object) => object;
8 | getEventData: (e: Event) => object;
9 | }
10 |
11 | export default class TooltipRail extends Component16 | 17 | {props.italicize ? {props.italicize} : null}{Translate(props.titleKey1, props.titleKey2)} 18 | 19 |
20 |
27 | {TranslateDate(props.date + "T00:00:00")}
28 |
29 | )}
30 |
31 | {props.authors ? Translate("Authors: ") + props.authors : ""}
32 |
33 |
53 |
57 | ) : null}
58 |
65 |
66 |
54 | Value: {value}
55 |
56 |
26 |
27 |
28 | 
29 |
30 |
31 |
42 |
43 |
44 |
45 | )
46 | }
--------------------------------------------------------------------------------
/src/components/map/Legend.css:
--------------------------------------------------------------------------------
1 | .legend {
2 | font-size: 12px;
3 | line-height: 12px;
4 | position: absolute;
5 | width: 180px;
6 | bottom: 10px;
7 | right: 10px;
8 | z-index: 500;
9 | }
10 |
11 | .legend-container {
12 | flex-direction: column;
13 | align-items: flex-start;
14 | padding: 5px;
15 | }
16 |
17 | .legend-item {
18 | display: flex;
19 | justify-content: flex-start;
20 | align-items: center;
21 | margin: 0.2em;
22 | width: 95%;
23 | }
24 |
25 | label {
26 | margin: 0;
27 | padding: 5px;
28 | /*white-space: nowrap;*/
29 | overflow: hidden;
30 | }
31 |
32 | .legend-icon {
33 | margin-right: 3px;
34 | flex-shrink: 0 !important;
35 | height: 15px !important;
36 | width: 15px !important;
37 | }
38 |
39 | .legend-checkbox {
40 | margin-left: auto;
41 | }
42 |
43 | .legend-label {
44 | margin-right: 1em;
45 | }
46 |
47 | .mobile-text {
48 | text-align: start;
49 | margin-left: -5px;
50 | font-size: 12px;
51 | }
52 |
53 | .legend i,
54 | .legend-mobile i {
55 | /* width: 6vw; */
56 | width: 20px;
57 | height: 20px;
58 | float: left;
59 | opacity: 0.7;
60 | }
61 |
62 | .bin {
63 | width: 14.2857%;
64 | }
65 |
66 | .circleBase {
67 | border-radius: 50%;
68 | }
69 |
70 | h4.legend-title:hover {
71 | position: relative;
72 | }
73 | h4.legend-title span {
74 | display: none;
75 | }
76 | h4.legend-title:hover span {
77 | display: flex;
78 | margin: 10px;
79 | position: absolute;
80 | width: 300px;
81 | border-radius: 5px;
82 | bottom: 10px;
83 | padding: 1em;
84 | font-weight: 400;
85 | display: flex;
86 | padding: 0.5em 0;
87 | font-size: 0.875em;
88 | background-color: #fff;
89 | color: #000;
90 | -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
91 | box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
92 | }
--------------------------------------------------------------------------------
/src/components/pages/TermsOfUse.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useMediaQuery } from "react-responsive";
3 | import { mobileDeviceOrTabletWidth } from "../../constants";
4 | import Translate from "../../utils/translate/translateService";
5 | import './static.css';
6 |
7 | export default function TermsOfUse() {
8 | const isMobileDeviceOrTablet = useMediaQuery({ maxDeviceWidth: mobileDeviceOrTabletWidth })
9 |
10 | return (
11 | SeroTracker
12 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/pages/Analyze.tsx:
--------------------------------------------------------------------------------
1 |
2 | import React, { useContext } from "react";
3 | import { AppContext } from "context";
4 | import { ANALYZE_URLS, PAGE_HASHES, mobileDeviceOrTabletWidth } from "../../constants";
5 | import { useMediaQuery } from "react-responsive";
6 | import TableauEmbed from "components/shared/TableauEmbed/TableauEmbed";
7 | import "./static.css";
8 |
9 | const ANALYZE_MOBILE_HEIGHT = 2900;
10 | const ANALYZE_DESKTOP_HEIGHT = 5000;
11 | const NUM_ANALYZE_CHARTS = 8;
12 |
13 | export default function Analyze() {
14 | const isMobileDeviceOrTablet = useMediaQuery({
15 | maxWidth: mobileDeviceOrTabletWidth,
16 | });
17 | const [{ language }] = useContext(AppContext);
18 |
19 | // function to calculate the number of pixels from the top of the page
20 | // the nth chart (0-indexed) is
21 | // note: this assumes that charts are the same height
22 | const getOffsetForGraphNum = (n: number) => {
23 | return 20 + (isMobileDeviceOrTablet ? ANALYZE_MOBILE_HEIGHT/NUM_ANALYZE_CHARTS : ANALYZE_DESKTOP_HEIGHT/NUM_ANALYZE_CHARTS)*n;
24 | }
25 |
26 | return (
27 |
13 |
49 | 14 | {Translate('TermsOfUse')} 15 |
16 |
17 |
21 |
22 | {Translate('WhoSerotrackAndPartnersDisclaimer1')}
18 |{Translate('WhoSerotrackAndPartnersDisclaimer2')}
19 |{Translate('WhoSerotrackAndPartnersDisclaimer3')}
20 |23 | {Translate('DisclaimerListHeader')} 24 |
25 |-
26 |
- 27 | {Translate('DisclaimerList1')} 28 | 29 |
- 30 | {Translate('DisclaimerList2')} 31 | 32 |
- 33 | {Translate('DisclaimerList3')} 34 | 35 |
- 36 | {Translate('DisclaimerList4')} 37 | 38 |
- 39 | {Translate('DisclaimerList5')} 40 | 41 |
- 42 | {Translate('DisclaimerList6')} 43 | 44 |
46 | {Translate('DisclaimerFooter')}
47 |
48 |
28 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/utils/stateUpdateUtils.tsx:
--------------------------------------------------------------------------------
1 | import httpClient from '../httpClient'
2 | import { FiltersConfig, FilterType } from '../types'
3 | import { sendFiltersAnalyticsEvent } from "../utils/analyticsUtils";
4 | import { getEmptyFilters} from "../context";
5 |
6 | export const updateFilters = async (
7 | dispatch: any,
8 | filters: FiltersConfig,
9 | filterType: FilterType,
10 | filterValue: any,
11 | page: string) => {
12 | dispatch({
13 | type: 'UPDATE_FILTER',
14 | payload: {
15 | filterType,
16 | filterValue,
17 | pageStateEnum: page
18 | }
19 | });
20 |
21 | const updatedFilters: FiltersConfig = Object.assign({}, filters);
22 | updatedFilters[filterType] = filterValue;
23 | sendFiltersAnalyticsEvent(updatedFilters);
24 |
25 | fetchExploreData(dispatch, updatedFilters, page);
26 | }
27 |
28 | export const clearFilters = async (
29 | dispatch: any,
30 | page: string) => {
31 | dispatch({
32 | type: 'CLEAR_ALL_FILTERS',
33 | payload: {
34 | pageStateEnum: page
35 | }
36 | });
37 |
38 | fetchExploreData(dispatch, getEmptyFilters(), page);
39 | }
40 |
41 | export const fetchExploreData = async (dispatch: any, filters: FiltersConfig, page: string) => {
42 |
43 | const api = new httpClient()
44 |
45 | dispatch({
46 | type: "CHANGE_LOADING",
47 | payload: {
48 | pageStateEnum: page,
49 | isLoading: true
50 | }
51 | })
52 |
53 | const { records, estimateGradePrevalences } = await api.getExploreData(filters, true);
54 |
55 | dispatch({
56 | type: 'GET_AIRTABLE_RECORDS',
57 | payload: { pageStateEnum: page, records }
58 | });
59 | dispatch({
60 | type: 'UPDATE_ESTIMATE_PREVALENCES',
61 | payload: { pageStateEnum: page, estimateGradePrevalences }
62 | });
63 |
64 | dispatch({
65 | type: "CHANGE_LOADING",
66 | payload: {
67 | pageStateEnum: page,
68 | isLoading: false
69 | }
70 | })
71 | }
--------------------------------------------------------------------------------
/src/components/shared/InformationIcon.tsx:
--------------------------------------------------------------------------------
1 | import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import React from "react";
4 | import { Popup } from "semantic-ui-react";
5 | import { sendAnalyticsEvent } from "../../utils/analyticsUtils";
6 |
7 | interface InformationIconProps {
8 | color: string;
9 | size: "xs" | "lg" | "sm" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x" | undefined,
10 | position?: "top left" | "top right" | "bottom right" | "bottom left" | "right center" | "left center" | "top center" | "bottom center" | undefined,
11 | tooltip: string | React.ReactNode;
12 | tooltipHeader?: string;
13 | offset: string | number;
14 | popupSize?: "mini" | "tiny" | "small" | "large" | "huge";
15 | }
16 |
17 | export default function InformationIcon(props: InformationIconProps) {
18 | const { color, size, tooltip, tooltipHeader, offset, position, popupSize = "small" } = props;
19 |
20 | return (
21 |
22 | {
29 | sendAnalyticsEvent({
30 | category: 'Tooltip',
31 | action: 'opening',
32 | label: tooltipHeader || "Unknown tooltip"
33 | })
34 | }}
35 | //fix for janky popup positioning due to overflow styling
36 | popperModifiers={{ preventOverflow: { boundariesElement: "window" } }}
37 | trigger={
38 | {tooltipHeader}
45 | )}
46 | {tooltip}
47 |
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/sidebar/right-sidebar/datepicker/Handle.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { SliderItem } from "react-compound-slider";
3 |
4 |
5 | const { Component, Fragment } = React;
6 |
7 | interface HandleProps {
8 | key: string;
9 | handle: SliderItem;
10 | isActive: Boolean;
11 | disabled?: Boolean;
12 | domain: number[];
13 | getHandleProps: (id: string, config: object) => object;
14 | }
15 |
16 | export default class Handle extends Component
52 |
56 | ) : null}
57 |
72 |
53 | Value: {value}
54 |
55 |
11 |
12 | {props.img && (
13 |
14 |
33 | )}
34 |
35 |
46 |
47 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/map/MapboxMap.scss:
--------------------------------------------------------------------------------
1 | .mapContainer {
2 | position: absolute;
3 | top: 0;
4 | right: 0;
5 | left: 0;
6 | bottom: 0;
7 | }
8 |
9 | .map {
10 | flex: 1 1;
11 | position: relative;
12 | }
13 |
14 | .map:focus {
15 | outline:0;
16 | }
17 |
18 | body {
19 | margin: 0px;
20 | }
21 |
22 | .info {
23 | border: 1px solid rgba(34,36,38,.15);
24 | border-radius: 4px;
25 | background: #fff;
26 | }
27 |
28 | div.slide-pane__content {
29 | z-index: 100;
30 | }
31 |
32 | div.ReactModal__Content.ReactModal__Content--after-open.slide-pane.slide-pane_from_right.some-custom-class {
33 | z-index: 100;
34 | }
35 |
36 | div.slide-pane__header {
37 | z-index: 100;
38 | }
39 |
40 | div.ReactModal__Overlay.ReactModal__Overlay--after-open.slide-pane__overlay.some-custom-overlay-class {
41 | z-index: 100;
42 | }
43 |
44 | .map-wrapper {
45 | position: relative;
46 | }
47 |
48 | .pin-popup {
49 | outline: none;
50 | }
51 |
52 | .popup-content {
53 | width: 460px;
54 | @media screen and (max-width: 1200px){
55 | width: 300px;
56 | }
57 |
58 | font-family: 'Open Sans', sans-serif;
59 | font-size: 14px;
60 | background: #fff;
61 | font-style: normal;
62 | text-align: start;
63 | }
64 |
65 | .mapboxgl-popup-content {
66 | padding: 0 !important;
67 | }
68 |
69 | .country-popup {
70 | &-content {
71 | width: 350px;
72 | @media screen and (max-width: 1200px){
73 | width: 300px;
74 | }
75 | font-family: 'Open Sans', sans-serif;
76 | font-size: 14px;
77 | background: #fff;
78 | font-style: normal;
79 | text-align: start;
80 | }
81 |
82 | &-title {
83 | font-weight: bold;
84 | font-size: 18px;
85 | flex: 1;
86 | width: 100%;
87 |
88 | }
89 |
90 | &-heading {
91 | font-weight: 600;
92 | font-size: 12px;
93 | width: 62%;
94 | }
95 |
96 | &-text {
97 | font-weight: normal;
98 | font-size: 12px;
99 | width: 34.75%;
100 |
101 | }
102 |
103 | &-header {
104 | font-weight: bold;
105 | font-size: 14px;
106 | width: 100%;
107 | }
108 | }
109 |
110 | .disable-popup {
111 | display:none !important;
112 | }
--------------------------------------------------------------------------------
/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const mobileDeviceOrTabletWidth = 1200;
2 | export const mobileDeviceWidth = 600;
3 | export const isMaintenanceMode = false;
4 | export const mapZIndex = {
5 | CountriesTileLayer: 50,
6 | DisputedAreasAndBorders: 70,
7 | Labels: 800
8 | }
9 |
10 | export const ANALYZE_URLS = {
11 | "en": "https://public.tableau.com/views/SeroTrackerAnalyzeEN/GlobalAnalyze?:language=en-US&:display_count=n&:origin=viz_share_link",
12 | "fr": "https://public.tableau.com/views/SeroTrackerAnalyseFR/GlobalAnalyse?:language=en-US&publish=yes&:display_count=n&:origin=viz_share_link",
13 | "de": "https://public.tableau.com/views/SeroTrackerAnalyseDE/GlobalAnalyse?:language=de-DE&publish=yes&:display_count=n&:origin=viz_share_link"
14 | }
15 | export const CANADA_URLS = {
16 | "en": "https://public.tableau.com/views/CanadaEN/Canadiancharts?:language=en-US&publish=yes&:display_count=n&:origin=viz_share_link",
17 | "fr": "https://public.tableau.com/views/CanadaFR/Canadiancharts?:language=en-US&:display_count=n&:origin=viz_share_link"
18 | }
19 |
20 |
21 | export const PAGES = {
22 | Explore: "Explore",
23 | Analyze: "Analyze",
24 | Data: "Data",
25 | Publications: "Publications",
26 | About: "About"
27 | }
28 |
29 | export const PAGE_HASHES = {
30 | [PAGES.Explore]: {
31 | Map: "Map",
32 | },
33 | [PAGES.Analyze]: {
34 | ByCountry: "ByCountry",
35 | ByPopulation: "ByPopulation",
36 | AdditionalGraphs: "AdditionalGraphs"
37 | },
38 | [PAGES.Data]: {
39 | DataDictionary: "DataDictionary",
40 | ChangeLog: "ChangeLog",
41 | SubmitSource: "SubmitSource",
42 | DownloadCsv: "DownloadCsv",
43 | AccessGithub: "AccessGithub",
44 | FAQ: "FAQ",
45 | DataTable: "DataTable"
46 |
47 | },
48 | [PAGES.Publications]: {
49 | ResearchArticles: "ResearchArticles",
50 | GeneralSerotrackerCommunications: "GeneralSerotrackerCommunications",
51 | BiblioDigests: "BiblioDigests",
52 | PrivateSectorReports: "PrivateSectorReports",
53 | MediaMentions: "MediaMentions"
54 | },
55 | [PAGES.About]: {
56 | ContactUs: "ContactUs",
57 | Team: "Team"
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/pages/Partnerships/CanadaPartnership.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext } from "react";
2 | import { Partnership } from "types";
3 | import { AppContext } from "../../../context";
4 | import TableauEmbed from "components/shared/TableauEmbed/TableauEmbed";
5 | import Translate, { getCountryName } from "utils/translate/translateService";
6 | import PartnerShipsMap from "components/partnerships/PartnershipsMap";
7 |
8 | type CanadaPartnershipProps = {
9 | partnershipConfig: Partnership;
10 | };
11 |
12 | export default function CanadaPartnership({partnershipConfig}:CanadaPartnershipProps) {
13 | const [state] = useContext(AppContext);
14 | console.log(partnershipConfig.tableauKey + state.language)
15 |
16 | return (
17 | <>
18 |
15 | 
16 |
20 |
32 |
21 |
30 |
31 | {Translate('ViewFile')}
22 |
23 |
29 |
36 |
37 | {props.italicize ? {props.italicize} : null}{Translate(props.titleKey1, props.titleKey2)}
38 |
39 |
40 | {(props.date) && (
41 |
42 | {TranslateDate(props.date + "T00:00:00")}
43 |
44 | )}
45 | {Translate("PartnershipsPageTitle", [partnershipConfig.routeName])}
19 |
20 | {Translate("PartnershipsPageDescription", [partnershipConfig.routeName, "PartOne"], null, [false, true])}
21 |
22 | {Translate("PartnershipsPageDescription", [partnershipConfig.routeName, "PartTwo"], null, [false, true])}
23 |
24 | {Translate("PartnershipsPageDescription", [partnershipConfig.routeName, "PartThree"], null, [false, true])}
25 |
26 | {Translate("PartnershipsPageDescription", [partnershipConfig.routeName, "PartFour"], null, [false, true])}
27 |
28 |
29 |
30 |
36 | 31 | {Translate("SeroprevalenceEstimatesInRegion", null, { 32 | NAME: getCountryName(partnershipConfig.routeName, state.language, "CountryOptions"), 33 | })} 34 |
35 |{"SEROTRACKER NEWSLETTER"}
44 |Monthly summaries of recent seroprevalence literature and product updates
45 | setNewsletterEmail(event.target.value)} 53 | /> 54 | 55 | ) 56 | } -------------------------------------------------------------------------------- /src/utils/utils.tsx: -------------------------------------------------------------------------------- 1 | import { formatISO, add } from "date-fns"; 2 | import Translate from 'utils/translate/translateService'; 3 | import { LanguageType } from "../types"; 4 | import { compareAsc } from "date-fns"; 5 | import mapboxgl from "mapbox-gl"; 6 | 7 | let language = LanguageType.english; 8 | 9 | export const setLanguage = (newLanguage: LanguageType) => { 10 | language = newLanguage; 11 | } 12 | 13 | export const formatDates = (dates: Array
31 |
60 | )
61 | }
62 |
--------------------------------------------------------------------------------
/src/assets/images/SerotrackerLogo.svg:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/assets/images/colored-icon.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/src/components/sidebar/left-sidebar/TotalStats.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react";
2 | import { AppContext } from "../../../context";
3 | import { State, PageState } from "../../../types";
4 | import Translate from "../../../utils/translate/translateService";
5 | import "./TotalStats.css";
6 |
7 | interface TotalStatsProps {
8 | page: string;
9 | }
10 |
11 | export default function TotalStats({ page }: TotalStatsProps) {
12 | const [state] = useContext(AppContext);
13 | const [countries, setNumCountries] = useState(0);
14 | const [numStudies, setNumStudies] = useState(0);
15 | const [n, setN] = useState(0);
16 | const pageState = state[page as keyof State] as PageState;
17 |
18 | useEffect(() => {
19 | const updateCountryPrevalence = async () => {
20 | setNumCountries(pageState.estimateGradePrevalences.length);
21 | setN(
22 | pageState.estimateGradePrevalences
23 | .map((o: Record
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | { hideLayers ? null : null }
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
37 |
65 |
82 | );
83 | }
--------------------------------------------------------------------------------
/src/utils/analyticsUtils.tsx:
--------------------------------------------------------------------------------
1 | import { Location, LocationListener, UnregisterCallback } from 'history'
2 | import { useEffect } from 'react'
3 | import ReactGA from 'react-ga'
4 | import { useHistory } from 'react-router-dom'
5 | import _ from "lodash";
6 | import { FiltersConfig, FilterType } from "../types";
7 | import { getEmptyFilters } from "../context"
8 |
9 | const sendPageView: LocationListener = (location: Location): void => {
10 | ReactGA.set({ page: location.pathname })
11 | ReactGA.pageview(location.pathname)
12 | }
13 | interface eventSenderProps {
14 | /** Typically the object that was interacted with (e.g. 'Video') */
15 | category: string,
16 | /** The type of interaction (e.g. 'play') */
17 | label: string,
18 | /** Useful for categorizing events (e.g. 'Fall Campaign') */
19 | action: string
20 | }
21 |
22 | export const sendAnalyticsEvent = (props: eventSenderProps) => {
23 | const cookieAcceptance = localStorage.getItem('acceptedCookies');
24 | if (cookieAcceptance) {
25 | ReactGA.event(props);
26 | }
27 | }
28 |
29 | // Send filters analytics event if filters have been updated
30 | export const sendFiltersAnalyticsEvent = (newFilters: FiltersConfig) => {
31 | // Only send event if they are
32 | const defaultFilters = getEmptyFilters();
33 | if(!_.isEqual(newFilters, defaultFilters)){
34 | // Construct label string
35 | // Format: "FilterTypeA - OptionA,OptionB; FilterTypeB - OptionA,OptionB"
36 | // Filter types and options within filter types should be listed in alpha order
37 | // to ensure that the same filter combination always shows up as the same event on GA
38 | let labelString = "";
39 | Object.keys(newFilters).sort().forEach(key => {
40 | const filterOptions = newFilters[key as FilterType];
41 | // Handle single/multi select filters
42 | if(Array.isArray(filterOptions)){
43 | if(!_.isEqual(filterOptions, defaultFilters[key as FilterType])){
44 | labelString += `${key.toString()} - ${filterOptions.sort()};`
45 | }
46 | }
47 | // Handle checkbox filters
48 | // we only want to log that a checkbox filter was used
49 | // if it = true (i.e. it was applied)
50 | else if(filterOptions === true){
51 | labelString += `${key.toString()};`
52 | }
53 | });
54 | sendAnalyticsEvent({
55 | category: 'Filter',
56 | action: 'selection',
57 | label: labelString
58 | })
59 | }
60 | }
61 |
62 | // `sendFilterAnalyticsEvent` will overreport the number of times
63 | // the Unity filter was applied (it gets called whenever any of the filters change)
64 | // so we need to track when the Unity filter was hit specifically through another event
65 | export const sendUnityAnalyticsEvent = () => {
66 | sendAnalyticsEvent({
67 | category: 'WHO Unity Filter',
68 | action: 'checked',
69 | label: ""
70 | })
71 | }
72 |
73 | interface Props {
74 | children: JSX.Element;
75 | }
76 | const GAListener = ({ children }: Props): JSX.Element => {
77 | const isDev = process.env.NODE_ENV === "development";
78 | const history = useHistory()
79 | useEffect((): UnregisterCallback | void => {
80 | sendPageView(history.location, 'REPLACE')
81 | return history.listen(sendPageView)
82 | }, [history, isDev])
83 |
84 | return children
85 | }
86 |
87 | export default GAListener
--------------------------------------------------------------------------------
/src/utils/MappingUtil.tsx:
--------------------------------------------------------------------------------
1 | import mapboxgl, { LngLat } from "mapbox-gl";
2 | import httpClient from "../httpClient";
3 | import { Expressions } from "components/map/MapConfig"
4 |
5 | // Params: url - to an esri vector tile service
6 | // Returns: Modified style object with attributes for Mapbox GL JS compatability
7 | async function prepare(url: string) {
8 |
9 | const styleUrl = url + "/resources/styles/root.json";
10 |
11 | const api = new httpClient()
12 |
13 | let fetchedStyle = await api.getStyles(styleUrl);
14 | fetchedStyle.sprite = url + "/resources/sprites/sprite";
15 | fetchedStyle.glyphs = url + "/resources/fonts/{fontstack}/{range}.pbf";
16 | fetchedStyle.sources.esri = {
17 | type: 'vector',
18 | tiles: [url + "/tile/{z}/{y}/{x}.pbf"],
19 | maxzoom: 23,
20 | };
21 |
22 | return fetchedStyle;
23 | };
24 |
25 | // Params: url - to an esri vector tile service
26 | // Returns: Mapbox style object with applied serotracker styling expressions
27 | export async function getEsriVectorSourceStyle(url: string) {
28 | let style = await prepare(url)
29 |
30 | var source = style.sources.esri as mapboxgl.VectorSource;
31 |
32 | const l = style.layers[0] as mapboxgl.Layer;
33 | if (l.id === "Countries") {
34 | source.promoteId = { "Countries": "CODE" }
35 | // the map type for this layer changed to a line
36 | // had to change to a fill and edit other properties to make the layer show.
37 | l.type = "fill"
38 | l.paint = Expressions.CountriesPaint as any
39 | l.layout = Expressions.CountriesLayout as any
40 | }
41 |
42 | return style
43 | }
44 |
45 | // Params: mapbox style object, mapbox instance to add layers to
46 | export function addEsriLayersFromVectorSourceStyle(style: any, map: mapboxgl.Map) {
47 | const sourceLayerId = style?.layers[0]["source-layer"] as string;
48 |
49 | map.addSource(sourceLayerId, style.sources.esri);
50 |
51 | if (sourceLayerId === "Countries"){
52 | const layer = style?.layers[0]
53 | layer.source = sourceLayerId;
54 | map.addLayer(layer)
55 | }
56 | else{
57 | style.layers.forEach((layer: any) => {
58 | if (layer.source !== "DISPUTED_AREAS" && layer.source !== "DISPUTED_BORDERS")
59 | {
60 | layer.source = sourceLayerId;
61 | map.addLayer(layer);
62 | }
63 | });
64 | }
65 | }
66 |
67 | function getBoundingBox(coordinates: any[]) {
68 | let bbox: any = {
69 | xMin: undefined,
70 | xMax: undefined,
71 | yMin: undefined,
72 | yMax: undefined,
73 | }
74 |
75 | coordinates.forEach((c)=>{
76 | const longitude = c[0];
77 | const latitude = c[1];
78 | bbox.xMin = Math.min(bbox.xMin, longitude);
79 | bbox.xMax = Math.max(bbox.xMax, longitude);
80 | bbox.yMin = Math.min(bbox.yMin , latitude);
81 | bbox.yMax = Math.max(bbox.yMax , latitude);
82 | })
83 | return bbox;
84 | }
85 |
86 | export function getFeatureBoundingBox(feature: GeoJSON.Feature): mapboxgl.LngLatBounds | undefined {
87 | let extent = undefined
88 |
89 | if(feature.geometry.type === 'Polygon')
90 | {
91 | extent = getBoundingBox(feature.geometry.coordinates[0]);
92 | }
93 | else if (feature.geometry.type === 'MultiPolygon')
94 | {
95 | extent = getBoundingBox(feature.geometry.coordinates[0][0]);
96 | }
97 |
98 | return extent ? new mapboxgl.LngLatBounds(
99 | new mapboxgl.LngLat(extent.xMin, extent.yMin),
100 | new mapboxgl.LngLat(extent.xMax, extent.yMax)
101 | ) : undefined;
102 | }
103 |
104 |
--------------------------------------------------------------------------------
/src/components/pages/static.css:
--------------------------------------------------------------------------------
1 | .page {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | justify-content: flex-start;
6 | }
7 |
8 | .policy-container {
9 | flex-direction: column;
10 | display: flex;
11 | }
12 |
13 | .policy-iframe {
14 | border: none;
15 | border-left: 2px solid grey;
16 | }
17 |
18 | .dashboard {
19 | max-height: calc(100vh - 50px);
20 | height: 100%;
21 | overflow-y: scroll;
22 | }
23 |
24 | .static-content {
25 | width: 60%;
26 | }
27 |
28 | .static-mobile {
29 | width: 95%;
30 | }
31 |
32 | .static-content li {
33 | margin-top: 6px;
34 | margin-bottom: 6px;
35 | }
36 |
37 | .static-content h1 {
38 | margin-block-start: 1.2em;
39 | margin-block-end: 0.8em;
40 | }
41 |
42 | .static-content h2 {
43 | margin-block-start: 1.2em;
44 | margin-block-end: 0.8em;
45 | }
46 |
47 | .static-content h4 {
48 | margin-block-start: 0.8em;
49 | margin-block-end: 0.8em;
50 | }
51 |
52 | .vertical-spacer {
53 | margin-bottom: 20px;
54 | margin-top: 20px;
55 | }
56 |
57 | .dashboard-img {
58 | width: 80%;
59 | border: 1px solid #ccc;
60 | }
61 |
62 | .bio-grid-container {
63 | display: inline-grid;
64 | grid-template-columns: repeat(3, 1fr);
65 | grid-row-gap: 1em;
66 | grid-column-gap: 1.5em;
67 | margin-block-end: 1em;
68 | width: 100%;
69 | }
70 |
71 | .airtable-embed {
72 | background: transparent;
73 | border: 1px solid #ccc;
74 | }
75 |
76 | .icon {
77 | cursor: pointer;
78 | }
79 |
80 | .team-name-text {
81 | font-weight: normal;
82 | font-style: italic;
83 | }
84 | .linked-in {
85 | color: #053f5a;
86 | }
87 |
88 | .social-media {
89 | color: #495057;
90 | }
91 |
92 | .email {
93 | color: #495057;
94 | }
95 |
96 | .twitter {
97 | color: #1aa4dd;
98 | }
99 |
100 | .center-container {
101 | flex-direction: column;
102 | align-items: center;
103 | justify-content: center;
104 | display: flex;
105 | height: 100%;
106 | width: 100%;
107 | padding-bottom: 10%;
108 | }
109 |
110 | .not-found-header {
111 | font-size: 128px;
112 | margin: 0px;
113 | line-height: 1.4;
114 | }
115 |
116 | .not-found-subheader {
117 | font-size: 36px;
118 | font-weight: 500;
119 | margin-bottom: 8px;
120 | }
121 |
122 | .ui.button.not-found-button {
123 | background-color: #455a64;
124 | color: white;
125 | }
126 |
127 | .ui.blue.button {
128 | background-color: #55a6ba;
129 | color: #fff;
130 | }
131 |
132 | .ui.blue.button:hover {
133 | background-color: #4d95a7;
134 | }
135 |
136 | .ui.accordion .title:not(.ui) {
137 | font-size: 16px;
138 | font-weight: 600;
139 | color: #212121 !important;
140 | }
141 |
142 | .button-text {
143 | color: white;
144 | }
145 |
146 | .iframe-style {
147 | background: transparent;
148 | border: 0px;
149 | width: 100%;
150 | height: 533px;
151 | }
152 |
153 | .no-space {
154 | display: inline;
155 | }
156 |
157 | .policy-frame-desktop {
158 | width: 60% !important;
159 | height: 100%;
160 | border: 0px;
161 | }
162 |
163 | .policy-frame-mobile {
164 | width: 100% !important;
165 | height: 100%;
166 | border: 0px;
167 |
168 | }
169 |
170 | .policy-div-desktop {
171 | height: 100vh;
172 | width: 100vw;
173 | display: flex;
174 | align-content: center;
175 | justify-content: center;
176 | box-sizing: border-box;
177 | }
178 |
179 | .policy-div-mobile {
180 | height: 100%;
181 | width: 100%;
182 | display: flex;
183 | align-content: center;
184 | justify-content: center;
185 | box-sizing: border-box;
186 | }
--------------------------------------------------------------------------------
/src/components/shared/DownloadButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import Translate from "../../utils/translate/translateService";
3 | import { sendAnalyticsEvent } from '../../utils/analyticsUtils';
4 | import { Button, Popup } from "semantic-ui-react";
5 | import { Icon } from 'semantic-ui-react';
6 | import { SemanticICONS } from "semantic-ui-react/dist/commonjs/generic";
7 | import airtableLogo from '../../assets/images/airtable-icon.svg';
8 | import { IconName } from '../../types';
9 | interface DownloadButtonProps {
10 | buttonLabelKey?: string;
11 | downloadLink?: string;
12 | formLink?: string;
13 | iconName: IconName;
14 | popupText: string;
15 | id?: string;
16 | }
17 |
18 | export default function DownloadButton(props: DownloadButtonProps) {
19 | const [letDownload, setLetDownload] = useState(false);
20 | const { buttonLabelKey,
21 | downloadLink ,
22 | formLink,
23 | iconName, popupText} = props;
24 |
25 | useEffect(() => {
26 | const doneSurvey = localStorage.getItem("DownloadFormCompleted");
27 | if (doneSurvey) {
28 | setLetDownload(true);
29 | }
30 | }, [])
31 |
32 | const clickButton = async () => {
33 | sendAnalyticsEvent({ category: 'Data Link Click', action: 'click', label: buttonLabelKey as string})
34 | localStorage.setItem('DownloadFormCompleted', "true");
35 | // Only allow users to access download form 3 mins after they clicked the original link
36 | // to deter users from getting data without actually filling out the form
37 | await new Promise(resolve => { setTimeout(resolve, 60 * 3 * 1000) });
38 | setLetDownload(true);
39 | }
40 |
41 |
42 | const getButtonLink = () => {
43 | return letDownload ? downloadLink : formLink;
44 | }
45 |
46 | return (
47 | iconName === IconName.airtable ?
48 |
38 | {Translate("SummaryStatistics")}
39 |
40 |
41 |
46 | {numStudies}
42 |
43 | {Translate("SeroprevalenceStudies")}
44 |
45 |
47 |
55 |
48 | {Translate("CountriesIncluded", ["PartOne"])}
49 |
50 | {countries}
51 |
52 | {Translate("CountriesIncluded", ["PartTwo"])}
53 |
54 |
56 |
64 |
57 | {Translate("IncludingParticipants", ["PartOne"])}
58 |
59 | {n.toLocaleString()}
60 |
61 | {Translate("IncludingParticipants", ["PartTwo"])}
62 |
63 | 65 |
66 |
81 |
67 |
68 | {Translate("SummaryStatisticsLink1")}
69 |
75 | {" "}
76 | {Translate("SummaryStatisticsLink2")}
77 |
78 |
79 |
80 |
10 |
17 | )
18 | }
19 |
20 | const createPopupGeographySection = (regionalEstimate: RegionalPrevalenceEstimate, title: string) => {
21 | const minString = `${(regionalEstimate.minEstimate * 100).toFixed(2)}%`
22 | const maxString = `${(regionalEstimate.maxEstimate * 100).toFixed(2)}%`
23 | const regionString = minString === maxString ? minString : `${minString} - ${maxString}`;
24 |
25 | return (
26 |
11 | {title}
12 |
13 |
14 | {content}
15 |
16 |
27 |
33 | )
34 | }
35 |
36 | const CountryPopup = (country : any, language : LanguageType, estimateGradePrevalences: EstimateGradePrevalence[] | undefined, onDetailsClick?: any) => {
37 | const properties = estimateGradePrevalences?.find((prevalence) =>
38 | country &&
39 | country.properties &&
40 | country.properties.ISO_3_CODE &&
41 | prevalence.alpha3Code === country.properties.ISO_3_CODE
42 | );
43 |
44 | if (properties && properties.testsAdministered) {
45 | const regions: Array
28 | {title}
29 |
30 | {row(Translate('EstimateRange'), ({regionString}))}
31 | {row(Translate('NumberEstimates'), ({regionalEstimate.numEstimates}))}
32 |
64 |
77 | );
78 | }
79 |
80 | return (
81 |
65 | {getCountryName(properties.geographicalName, language, "CountryOptions")}
66 |
67 |
82 |
)
85 | }
86 |
87 | export default CountryPopup;
--------------------------------------------------------------------------------
/src/components/pages/Publications/BiblioDigestCard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Translate, {TranslateDate} from "../../../utils/translate/translateService";
3 | import { Card } from "semantic-ui-react";
4 | import {BiblioDigestProps} from "./PublicationsConstants";
5 | import "./biblioDigestStyles.scss";
6 |
7 | export function BiblioDigestCard(props: BiblioDigestProps) {
8 | return (
9 | {getCountryName(properties?.geographicalName ?? '', language, "CountryOptions")}
83 | {Translate('NoData')}
84 |
10 |
11 |
12 |
59 |
60 |
61 | )
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/sidebar/right-sidebar/datepicker/DateSlider.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import { Slider, Rail, Handles, Tracks } from "react-compound-slider";
3 | import Handle from './Handle';
4 | import Track from './Track';
5 | import TooltipRail from './TooltipRail';
6 | import {useEffect, useState} from "react";
7 |
8 | //TODO: not sure if I can remove this one - heman
9 | const sliderStyle: React.CSSProperties = {
10 | position: "relative",
11 | width: "80%",
12 | margin: "5% 10%"
13 | };
14 |
15 | interface DateSliderProps {
16 | minPossibleValue: number; //minimum possible value for slider in milliseconds - unix time
17 | maxPossibleValue: number; //maximum possible value for slider in milliseconds - unix time
18 | values: number[];
19 | minDate: Date;
20 | onMouseUp: (isStart: Boolean, date: Date) => void;
21 | onSliderMove: (dates: number[]) => void;
22 | }
23 |
24 | export default function DateSlider({minPossibleValue, maxPossibleValue, minDate, values, onMouseUp, onSliderMove}: DateSliderProps) {
25 | const milliSecondsPerDay = 86400000;
26 | const [updatedValues, setUpdatedValues] = useState([minPossibleValue, maxPossibleValue])
27 | // min date and max date
28 | const domain = [minPossibleValue, maxPossibleValue]
29 | //running update
30 | const onUpdate = (update: ReadonlyArray13 | 14 | {Translate("BiblioDigestCard", ["Title"])} {TranslateDate(props.screeningStartDate + "T00:00:00")} - {TranslateDate(props.screeningEndDate + "T00:00:00")} 15 | 16 |
17 |
18 |
20 | {Translate("BiblioDigestCard", ["Published"])} {TranslateDate(props.publishDate + "T00:00:00")}
19 |
21 |
24 | {Translate("BiblioDigestCard", ["NewSerosurveys"])}
22 | {props.serosurveysTotal}
23 |
25 |
28 | {Translate("BiblioDigestCard", ["AFRO"])}
26 | {props.serosurveysAFRO}
27 |
29 |
32 | {Translate("BiblioDigestCard", ["EMRO"])}
30 | {props.serosurveysEMRO}
31 |
33 |
36 | {Translate("BiblioDigestCard", ["EURO"])}
34 | {props.serosurveysEURO}
35 |
37 |
40 | {Translate("BiblioDigestCard", ["PAHO"])}
38 | {props.serosurveysPAHO}
39 |
41 |
44 | {Translate("BiblioDigestCard", ["SEARO"])}
42 | {props.serosurveysSEARO}
43 |
45 |
48 | {Translate("BiblioDigestCard", ["WPRO"])}
46 | {props.serosurveysWPRO}
47 |
49 |
52 | {(props.sourcesAdded) && (
53 | {Translate("BiblioDigestCard", ["NonMember"])}
50 | {props.serosurveysNonMember}
51 |
54 |
57 | )}
58 | {Translate("BiblioDigestCard", ["NewSources"])}
55 | {props.sourcesAdded}
56 |
59 |
68 | {railProps =>
69 |
70 | {({ handles, activeHandleID, getHandleProps }) => (
71 |
84 |
85 | {({ tracks, getTrackProps }) => (
86 |
98 |
99 |
108 | )
109 | }
110 |
111 |
112 |
--------------------------------------------------------------------------------
/src/components/partnerships/PartnershipsMap.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react";
2 | import { AirtableRecord, EstimateGradePrevalence, Partnership } from "types";
3 | import { useMediaQuery } from "react-responsive";
4 | import { AppContext } from "context";
5 | import { mobileDeviceOrTabletWidth } from "../../constants";
6 | import Translate from "utils/translate/translateService";
7 | import { Loader } from "semantic-ui-react";
8 | import Legend from "components/map/Legend";
9 | import MapboxMap from "components/map/MapboxMap";
10 | import httpClient from "httpClient";
11 |
12 | type PartnerShipsMapProps = {
13 | partnershipconfig?: Partnership;
14 | };
15 |
16 | // Not a priority to implement loader here because mobile is deprecated anyways
17 | const mobileMap = (
18 | partnershipconfig: Partnership,
19 | estimateGradePrevalence: EstimateGradePrevalence | undefined,
20 | records: AirtableRecord[]
21 | ) => {
22 | return (
23 |
72 | {handles.map(handle => (
73 |
82 | )}
83 |
87 | {tracks.map(({ id, source, target }) => (
88 |
94 | ))}
95 |
96 | )}
97 |
100 |
107 |
101 | {toDateString(toDateSinceMinDate(updatedValues[0]))}
102 |
103 |
104 | {toDateString(toDateSinceMinDate(updatedValues[1]))}
105 |
106 |
46 |
47 |
58 |
59 |
60 |
67 |
68 | );
69 | };
70 |
71 | export default function PartnerShipsMap({ partnershipconfig }: PartnerShipsMapProps) {
72 | const [state] = useContext(AppContext);
73 | const [records, setRecords] = useState{Translate("PartnershipsView", ["MapNote1"])}
61 |
62 | {Translate("PartnershipsView", ["MapNote2"], {
63 | WEBSITE: "ourworldindata.org",
64 | })}
65 |
66 |
100 | {Map}
101 |
102 | );
103 | }
104 |
--------------------------------------------------------------------------------
/src/components/map/MapConfig.ts:
--------------------------------------------------------------------------------
1 | export const MapSymbology = {
2 | StudyFeature: {
3 | National: {
4 | Color: '#094180',
5 | Size: 11
6 | },
7 | Regional: {
8 | Color: '#F19E66',
9 | Size: 9
10 | },
11 | Local: {
12 | Color: '#E15759',
13 | Size: 6
14 | },
15 | Sublocal: {
16 | Color: '#E15759',
17 | Size: 5
18 | },
19 | Default: {
20 | Color: '#FFFFFF',
21 | Size: 0
22 | }
23 | },
24 | CountryFeature: {
25 | IsHighlighted: {
26 | Color: '#b0c8d4'
27 | },
28 | HasData: {
29 | Color: '#97b1bd',
30 | Opacity: 0.5
31 | },
32 | Disputed: {
33 | Color: '#E1E1E1',
34 | Opacity: 1
35 | },
36 | Shaded: {
37 | Color: '#707070',
38 | },
39 | Default: {
40 | Color: '#FFFFFF',
41 | Opacity: 0
42 | }
43 | },
44 | Border: {
45 | Color: "#455a64"
46 | }
47 | }
48 |
49 | export const MapResources = {
50 | WHO_BASEMAP_BB: "https://tiles.arcgis.com/tiles/5T5nSi527N4F7luB/arcgis/rest/services/WHO_BASEMAP_BB/VectorTileServer",
51 | WHO_COUNTRY_VECTORTILES : "https://services.arcgis.com/5T5nSi527N4F7luB/ArcGIS/rest/services/POLIO_ADMINISTRATIVE_BOUNDARIES/FeatureServer/6"
52 | }
53 |
54 | export const DefaultMapboxMapOptions = {
55 | center: [10, 30],
56 | zoom: 2,
57 | minZoom: 2,
58 | maxZoom: 14,
59 | attributionControl: false,
60 | scrollZoom: false
61 | }
62 |
63 | export const Expressions = {
64 | Studies: {
65 | "circle-color": [
66 | "match",
67 | ["get", "estimate_grade"],
68 | "National",
69 | MapSymbology.StudyFeature.National.Color,
70 | "Regional",
71 | MapSymbology.StudyFeature.Regional.Color,
72 | "Local",
73 | MapSymbology.StudyFeature.Local.Color,
74 | "Sublocal",
75 | MapSymbology.StudyFeature.Sublocal.Color,
76 | MapSymbology.StudyFeature.Default.Color,
77 | ],
78 | "circle-radius": [
79 | "match",
80 | ["get", "estimate_grade"],
81 | "National",
82 | MapSymbology.StudyFeature.National.Size,
83 | "Regional",
84 | MapSymbology.StudyFeature.Regional.Size,
85 | "Local",
86 | MapSymbology.StudyFeature.Local.Size,
87 | "Sublocal",
88 | MapSymbology.StudyFeature.Sublocal.Size,
89 | MapSymbology.StudyFeature.Default.Size,
90 | ],
91 | 'circle-stroke-color':[
92 | 'case',
93 | ['boolean', ['feature-state', 'isSelected'], false],
94 | 'black',
95 | 'white'
96 | ],
97 | 'circle-stroke-width': 3,
98 | 'circle-stroke-opacity': [
99 | 'case',
100 | ['boolean', ['feature-state', 'hover'], false],
101 | 1,
102 | [
103 | 'case',
104 | ['boolean', ['feature-state', 'isSelected'], false],
105 | 1,
106 | 0
107 | ],
108 | ],
109 | 'circle-opacity': [
110 | 'case',
111 | ['boolean', ['feature-state', 'isBlurred'], false],
112 | 0.2,
113 | 0.6
114 | ]
115 | },
116 | CountriesPaint : {
117 | 'fill-color': [
118 | 'case',
119 | ['boolean', ['feature-state', 'isHighlighted'], true], MapSymbology.CountryFeature.IsHighlighted.Color,
120 | ['boolean', ['feature-state', 'hasData'], true], MapSymbology.CountryFeature.HasData.Color,
121 | MapSymbology.CountryFeature.Default.Color
122 | ],
123 | 'fill-opacity': [
124 | 'case',
125 | ['boolean', ['feature-state', 'hasData'], false], MapSymbology.CountryFeature.HasData.Opacity,
126 | MapSymbology.CountryFeature.Default.Opacity
127 | ]
128 | },
129 | CountriesLayout : {
130 | 'visibility': "visible"
131 | }
132 | }
--------------------------------------------------------------------------------
/src/components/sidebar/left-sidebar/LeftSidebar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useState } from "react";
2 | import Translate, { TranslateDate } from "utils/translate/translateService";
3 | import TotalStats from "./TotalStats";
4 | import { Divider } from "semantic-ui-react";
5 | import DownloadButton from "components/shared/DownloadButton";
6 | import { PAGE_HASHES } from "../../../constants";
7 | import { IconName } from "../../../types";
8 | import "../sidebar.scss";
9 | import { AppContext } from "../../../context";
10 | import { useMediaQuery } from "react-responsive";
11 | import { mobileDeviceOrTabletWidth } from "../../../constants";
12 |
13 | interface SideBarProps {
14 | page: string;
15 | }
16 |
17 | const LastUpdated = ({ lastUpdated }: { lastUpdated: string }) => {
18 | return lastUpdated ? (
19 |
20 | {Translate("Footer", ["LastUpdated"])}:{" "}
21 | {TranslateDate(lastUpdated)}
22 |
23 | ) : null;
24 | };
25 |
26 | const MostRecentPubDate = ({ mostRecentPubDate }: { mostRecentPubDate: string }) => {
27 | return mostRecentPubDate ? (
28 |
29 | {Translate("Footer", ["MostRecentPubDate"])}:{" "}
30 | {TranslateDate(mostRecentPubDate)}
31 |
32 | ) : null;
33 | };
34 |
35 | const lancetId =
36 | "https://www.thelancet.com/journals/laninf/article/PIIS1473-3099(20)30631-9/fulltext#%20";
37 |
38 | const Citation = () => (
39 |
40 | {Translate("Footer", ["CiteAs"])}
41 |
47 | {Translate("Footer", ["LancetInfDis"])}{" "}
48 | {Translate("Footer", ["Article"])}
49 |
50 |
51 | );
52 |
53 | export default function LeftSidebar({ page }: SideBarProps) {
54 | const [{ lastUpdated, mostRecentPubDate }] = useContext(AppContext);
55 |
56 | const airtableDownloadProps = {
57 | buttonLabelKey: "DownloadCsv",
58 | downloadLink:
59 | "https://airtable.com/shraXWPJ9Yu7ybowM/tbljN2mhRVfSlZv2d?backgroundColor=blue&viewControls=on",
60 | formLink:
61 | "https://docs.google.com/forms/d/e/1FAIpQLSdGd_wlq8YSyVPs2AOi1VfvxuLzxA8Ye5I3HkQwW_9yrumsCg/viewform",
62 | iconName: IconName.airtable,
63 | popupText: "DownloadAirtable",
64 | };
65 |
66 | const githubDownloadProps = {
67 | buttonLabelKey: "AccessGithub",
68 | downloadLink: "https://github.com/serotracker/sars-cov-2-data",
69 | formLink:
70 | "https://docs.google.com/forms/d/e/1FAIpQLSdGd_wlq8YSyVPs2AOi1VfvxuLzxA8Ye5I3HkQwW_9yrumsCg/viewform",
71 | iconName: IconName.github,
72 | popupText: "DownloadGithub",
73 | };
74 |
75 | return (
76 |
77 |
113 | );
114 | }
115 |
--------------------------------------------------------------------------------
/src/components/map/Popups/StudyPopup.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { AirtableRecord } from "types";
3 | import Translate, { TranslateDate, getLanguageType } from 'utils/translate/translateService';
4 | import {getGeography, translateAntibodyTargets} from 'utils/utils';
5 |
6 | /**
7 | * @param title: left column of study modal: title of content
8 | * @param content: right content of study modal: the actual content for this record
9 | */
10 | function row(title: string, content: JSX.Element | string | string[] | null | undefined) {
11 | return (
12 |
80 |
82 | {Translate("Welcome")}
81 |
83 |
87 |
88 | {Translate("ExploreBlurb", ["FirstParagraph"])}
84 | {"\n"} 85 |{Translate("ExploreBlurb", ["SecondParagraph"])}
86 |
89 |
90 |
93 |
94 |
95 |
96 |
99 |
100 |
102 |
112 |
103 |
106 |
109 |
13 |
20 | )
21 | }
22 |
23 | function riskTag(riskLevel: string) {
24 | return(
25 |
14 | {title}
15 |
16 |
17 | {content}
18 |
19 |
26 | {Translate("RiskOfBiasOptions", [riskLevel])} {Translate("RiskOfBias")}
27 |
28 | )
29 | }
30 |
31 | /**
32 | * @param popGroupOptions: List of population group options, each option being a dictionary with key = language and value = translated option string
33 | * @param englishPopGroup: English population group string
34 | */
35 | function getTranslatedPopulationGroup(popGroupOptions: Record
55 | {/*Header section*/}
56 |
)
89 | }
90 |
--------------------------------------------------------------------------------
/src/utils/translate/translateService.ts:
--------------------------------------------------------------------------------
1 | import { LanguageType } from "../../types";
2 |
3 | import * as Countries from "i18n-iso-countries";
4 | import EnglishCountries from "i18n-iso-countries/langs/en.json";
5 | import FrenchCountries from "i18n-iso-countries/langs/fr.json";
6 | import GermanCountries from 'i18n-iso-countries/langs/de.json'
7 |
8 | import English from "./en.json";
9 | import French from "./fr.json";
10 | import German from './de.json'
11 | import { toPascalCase } from "./caseChanger";
12 | import { setLanguage } from "../utils";
13 |
14 | interface TranslateStringProps {
15 | text: string;
16 | }
17 |
18 | // Recursive Typings for nested JSON objects
19 | type JsonRecord
57 |
64 | {/*SeroPrev section*/}
65 |
58 | {Translate(`${record.estimate_grade}StudyDetails`)}
59 |
60 |
61 | {record.url ? {record.source_name} : record.source_name}
62 |
63 |
66 |
77 | {/*Content section*/}
78 |
67 | {Translate("BestSeroprevalenceEstimate")}: {record.serum_pos_prevalence ? `${(record.serum_pos_prevalence * 100).toFixed(1)}%` : "N/A"}
68 |
69 |
70 | {(record.sampling_start_date && record.sampling_end_date) && (
71 | <>
72 | {`${TranslateDate(record.sampling_start_date)} ${Translate("DateRangeTo")} ${TranslateDate(record.sampling_end_date)}`}
73 | )
74 | }
75 |
76 |
79 | {row(Translate("PopulationGroup"), record.population_group ? getTranslatedPopulationGroup(popGroupOptions, record.population_group) : Translate("NotReported"))}
80 | {row(Translate("Location"), getGeography(record.city, record.state, record.country))}
81 | {row(Translate("SampleSize"), record.denominator_value?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, Translate(",")))}
82 | {row(Translate("AntibodyTarget"), record.antibody_target && record.antibody_target.length > 0 ? translateAntibodyTargets(record.antibody_target) : "N/A")}
83 | {row(Translate("PositiveCases"), (record.cases_per_hundred ? record.cases_per_hundred.toFixed(1) + Translate("Per100") : "N/A"))}
84 | {row(Translate("Vaccinations"), (record.full_vaccinations_per_hundred ? record.full_vaccinations_per_hundred.toFixed(1) + Translate("Per100") : "N/A"))}
85 |
86 | {/*RiskTag section*/}
87 | {riskTag(`${record.overall_risk_of_bias}`)}
88 |
32 |
33 |
43 | handleFilterToggle()}
47 | className={'icon'}
48 | color={'#455a64'}
49 | style={{ fontWeight: 300, position: 'absolute', zIndex: 3000, top: 10, right: 20 }}
50 | size={"lg"} />
51 |
52 |
62 | handleFilterToggle()}
65 | className={'icon'}
66 | color={'#455a64'}
67 | style={{ fontWeight: 300, position: 'absolute', zIndex: 3000, top: 10, right: 20 }}
68 | size={"lg"} />
69 |
70 |
71 |
80 | handleFilterToggle()}
83 | className={'icon'}
84 | color={'#455a64'}
85 | style={{ fontWeight: 300, position: 'absolute', zIndex: 3000, top: 10, right: 20 }}
86 | size={"lg"} />
87 |
91 |
92 |
126 |
127 |
128 | )
129 | }
130 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl, {
104 | headers: { 'Service-Worker': 'script' },
105 | })
106 | .then(response => {
107 | // Ensure service worker exists, and that we really are getting a JS file.
108 | const contentType = response.headers.get('content-type');
109 | if (
110 | response.status === 404 ||
111 | (contentType != null && contentType.indexOf('javascript') === -1)
112 | ) {
113 | // No service worker found. Probably a different app. Reload the page.
114 | navigator.serviceWorker.ready.then(registration => {
115 | registration.unregister().then(() => {
116 | window.location.reload();
117 | });
118 | });
119 | } else {
120 | // Service worker found. Proceed as normal.
121 | registerValidSW(swUrl, config);
122 | }
123 | })
124 | .catch(() => {
125 | console.log(
126 | 'No internet connection found. App is running in offline mode.'
127 | );
128 | });
129 | }
130 |
131 | export function unregister() {
132 | if ('serviceWorker' in navigator) {
133 | navigator.serviceWorker.ready
134 | .then(registration => {
135 | registration.unregister();
136 | })
137 | .catch(error => {
138 | console.error(error.message);
139 | });
140 | }
141 | }
142 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | export type AirtableRecord = {
2 | source_id: string | null;
3 | source_name: string | null;
4 | lead_organization?: string | null;
5 | first_author: string | null;
6 | source_type: string | null;
7 | test_type: string | null;
8 | isotypes_reported: string[] | null;
9 | test_manufacturer: string[] | null;
10 | sensitivity: number | null;
11 | specificity: number | null;
12 | country: string | null;
13 | state: string[] | null;
14 | city: string[] | null;
15 | population_group: string | null;
16 | sex: string | null;
17 | age: string | null;
18 | denominator_value: number | null;
19 | serum_pos_prevalence: number | null;
20 | publish_date: string[] | string | null;
21 | publisher: string | null;
22 | overall_risk_of_bias: string | null;
23 | pin_latitude: number;
24 | pin_longitude: number;
25 | pin_region_type: string | null;
26 | study_type: string | null;
27 | sampling_method: string | null;
28 | sampling_start_date: string | null;
29 | sampling_end_date: string | null;
30 | summary: string | null;
31 | url: string | null;
32 | estimate_grade: string | null;
33 | vaccination_policy: number | null;
34 | full_vaccinations_per_hundred: number | null;
35 | cases_per_hundred: number | null;
36 | antibody_target: string[] | null;
37 | };
38 |
39 | export type AggregatedRecord = {
40 | error: number[];
41 | n: number;
42 | name: string;
43 | numStudies: number;
44 | seroprevalence: number;
45 | };
46 |
47 | export type FiltersConfig = {
48 | source_type: string[];
49 | test_type: string[];
50 | country: string[];
51 | population_group: Record
88 |
89 |
90 |
102 | handleFilterToggle(!showMobileFilters, false, false)}
107 | />
108 |
109 |
110 | handleFilterToggle(false, !showSummary, false)}
115 | />
116 |
117 |
118 | handleFilterToggle(false, false, !showMobileFilters)}
123 | />
124 |
125 |
109 |
113 |
114 |
116 |
117 |
119 |
120 |
122 |
123 |
125 |
126 |
128 |
129 |
130 |
131 |
132 |
134 |
135 |
137 |
138 |
140 |
141 |
143 |
144 | {/*Key added to differentiate Unity view from Explore view and force a rerender*/}
145 |
147 |
151 |
153 |
154 |
155 |
156 | );
157 | }
158 |
159 | export default App;
--------------------------------------------------------------------------------
/src/components/sidebar/right-sidebar/datepicker/Datepicker.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from "react";
2 | import DatePicker, { registerLocale } from "react-datepicker";
3 | import "react-datepicker/dist/react-datepicker.css";
4 | import { Input } from "semantic-ui-react";
5 | import { AppContext } from "../../../../context";
6 | import { FilterType, PageState, State } from '../../../../types';
7 | import { updateFilters } from "../../../../utils/stateUpdateUtils";
8 | import Translate from "../../../../utils/translate/translateService";
9 | import SectionHeader from "../SectionHeader";
10 | import {enUS, fr, de} from 'date-fns/locale'
11 | import DateSlider from './DateSlider';
12 | import '../datepicker/DateSlider.css'
13 |
14 | interface DatepickerProps {
15 | page: string
16 | }
17 |
18 | export default function Datepicker({ page }: DatepickerProps) {
19 |
20 | const [state, dispatch] = useContext(AppContext);
21 | const filters = (state[page as keyof State] as PageState).filters;
22 | const earliestPublicationDate = state.calendarStartDates.minDate;
23 | const latestPublicationDate = state.calendarStartDates.maxDate;
24 | const millisecondsPerDay = 86400000;
25 | const [sliderRange, setSliderRange] = useState
78 |
85 |
86 | )
87 |
88 | return (
89 |
90 |
142 | )
143 | }
--------------------------------------------------------------------------------
/src/context.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, Dispatch, useReducer } from "react";
2 | import { AggregationFactor, FiltersConfig, FilterType, LanguageType, PageState, State } from "./types";
3 |
4 | export const AppContext = createContext({} as [State, Dispatch
91 |
141 |
92 |
96 |
140 |
93 |
95 |
97 | { }}
100 | onSelect={(date: Date) => onUpdate(true, date)}
101 | dateFormatCalendar={"MMMM yyyy "}
102 | dateFormat="yyyy/MM/dd"
103 | minDate={earliestPublicationDate}
104 | maxDate={toDateSinceMinDate(chosenDates[1])}
105 | showYearDropdown
106 | yearDropdownItemNumber={5}
107 | scrollableYearDropdown
108 | showMonthDropdown
109 | locale={state.language}
110 | customInput={ { }}
121 | onSelect={(date: Date) => onUpdate(false, date)}
122 | dateFormat="yyyy/MM/dd"
123 | dateFormatCalendar={"MMM yyyy"}
124 | minDate={toDateSinceMinDate(chosenDates[0])}
125 | maxDate={latestPublicationDate}
126 | showYearDropdown
127 | yearDropdownItemNumber={5}
128 | scrollableYearDropdown
129 | showMonthDropdown
130 | locale={state.language}
131 | customInput={
139 |