From 1bbcd57e5e7859dc278050d19b15fbf54072f73f Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Sun, 17 Jan 2021 18:16:28 +1300
Subject: [PATCH] Fix/clean errors (#191)

* clean dev errors

* add check command

* yarn -> npm in travis

* fix all warnings

* fix base test

* :lipstick:
---
 .travis.yml                                   |  9 +-
 package.json                                  |  2 +-
 src/actions/index.js                          |  1 -
 src/common/global.js                          |  4 +-
 src/common/utilities.js                       |  1 +
 src/components/InfoPopup.jsx                  |  4 +-
 src/components/Layout.js                      |  2 -
 src/components/Map.jsx                        |  2 +-
 src/components/Notification.jsx               |  9 +-
 src/components/Overlay/Content.js             |  6 +-
 src/components/Overlay/Controls.js            |  4 +-
 src/components/Overlay/Md.js                  |  1 -
 src/components/Overlay/Media.js               |  2 +-
 src/components/Search.jsx                     | 12 +--
 src/components/StateOptions.jsx               | 12 +--
 src/components/StaticPage.js                  | 14 +--
 src/components/TemplateCover.js               |  8 +-
 src/components/TimelineCategories.jsx         |  8 +-
 src/components/Toolbar/BottomActions.js       | 45 +++++-----
 src/components/Toolbar/CategoriesListPanel.js |  4 +-
 src/components/presentational/Checkbox.js     |  4 +-
 src/components/presentational/Icons/Info.js   |  2 +-
 .../presentational/Map/Clusters.jsx           | 89 ++++++++++---------
 .../presentational/Map/DefsMarkers.jsx        | 53 ++++++-----
 src/components/presentational/Map/Events.jsx  | 34 +++----
 .../presentational/Narrative/Adjust.js        |  4 +-
 .../presentational/Narrative/Close.js         |  4 +-
 .../presentational/Narrative/Controls.js      |  4 +-
 src/components/presentational/Popup.js        |  8 +-
 .../presentational/Timeline/DatetimeBar.js    |  4 +-
 .../presentational/Timeline/DatetimeSquare.js | 12 ++-
 .../presentational/Timeline/DatetimeStar.js   | 12 ++-
 .../presentational/Timeline/Project.js        |  4 +-
 .../presentational/Timeline/ZoomControls.js   |  1 +
 src/test/App.test.js                          |  2 +-
 35 files changed, 229 insertions(+), 158 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 81dcc9d..6d999a7 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -5,11 +5,10 @@ cache:
   directories:
     - node_modules
 before_script:
-  - npm install -g yarn
   - cp example.config.js config.js
 install:
-  - yarn
+  - npm install
 script:
-  - yarn lint
-  - yarn build
-  - yarn test
+  - npm run lint
+  - npm run build
+  - npm run test
diff --git a/package.json b/package.json
index 3cdce3c..7a14702 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "test": "node scripts/test.js --silent",
     "test:ava": "NODE_ENV=production ava --verbose",
     "test-watch": "ava --watch",
-    "lint": "echo 'This is a placeholder for Travis'",
+    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "lint:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   },
   "dependencies": {
diff --git a/src/actions/index.js b/src/actions/index.js
index 8eaaf5d..7c05dbe 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -1,4 +1,3 @@
-/* global fetch, alert */
 import { urlFromEnv } from "../common/utilities";
 
 // TODO: relegate these URLs entirely to environment variables
diff --git a/src/common/global.js b/src/common/global.js
index d9140a6..845ccaf 100644
--- a/src/common/global.js
+++ b/src/common/global.js
@@ -5,9 +5,11 @@ export const colors = {
   white: "#fff",
 };
 
-export default {
+const exports = {
   fallbackEventColor: colors.fa_red,
   darkBackground: colors.black,
   primaryHighlight: colors.fa_red,
   secondaryHighlight: colors.white,
 };
+
+export default exports;
diff --git a/src/common/utilities.js b/src/common/utilities.js
index 52516d6..7cbf8cb 100644
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -380,6 +380,7 @@ export function getFilterIdxFromColorSet(filter, coloringSet) {
   coloringSet.map((set, idx) => {
     const foundIdx = set.indexOf(filter);
     if (foundIdx !== -1) filterIdx = idx;
+    return null;
   });
   return filterIdx;
 }
diff --git a/src/components/InfoPopup.jsx b/src/components/InfoPopup.jsx
index 35976d5..5c1d73f 100644
--- a/src/components/InfoPopup.jsx
+++ b/src/components/InfoPopup.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import Popup from "./presentational/Popup";
 import copy from "../common/data/copy.json";
 
-export default ({ isOpen, onClose, language, styles }) => (
+const Infopopup = ({ isOpen, onClose, language, styles }) => (
   <Popup
     title={copy[language].legend.default.header}
     content={copy[language].legend.default.intro}
@@ -11,3 +11,5 @@ export default ({ isOpen, onClose, language, styles }) => (
     styles={styles}
   />
 );
+
+export default Infopopup;
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 43e125f..9c37d0d 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -1,4 +1,3 @@
-/* global alert, Event */
 import React from "react";
 
 import { bindActionCreators } from "redux";
@@ -11,7 +10,6 @@ import LoadingOverlay from "./Overlay/Loading";
 import Map from "./Map.jsx";
 import Toolbar from "./Toolbar/Layout";
 import CardStack from "./CardStack.jsx";
-// import {CardStack} from '@forensic-architecture/design-system'
 import NarrativeControls from "./presentational/Narrative/Controls.js";
 import InfoPopup from "./InfoPopup.jsx";
 import Popup from "./presentational/Popup";
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 8334a6f..030b552 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -1,4 +1,4 @@
-/* global L, Event */
+/* global L */
 import React from "react";
 import { Portal } from "react-portal";
 import Supercluster from "supercluster";
diff --git a/src/components/Notification.jsx b/src/components/Notification.jsx
index b56043c..5162ba5 100644
--- a/src/components/Notification.jsx
+++ b/src/components/Notification.jsx
@@ -16,11 +16,11 @@ export default class Notification extends React.Component {
     if (!items) return "";
     return (
       <div>
-        {items.map((item) => {
+        {items.map((item, idx) => {
           if (item.error) {
-            return <p>{item.error.message}</p>;
+            return <p key={idx}>{item.error.message}</p>;
           }
-          return "";
+          return null;
         })}
       </div>
     );
@@ -47,11 +47,12 @@ export default class Notification extends React.Component {
     if (notificationsToRender.length > 0) {
       return (
         <div className="notification-wrapper">
-          {this.props.notifications.map((notification) => {
+          {this.props.notifications.map((notification, idx) => {
             return (
               <div
                 className="notification"
                 onClick={() => this.toggleDetails()}
+                key={idx}
               >
                 <button
                   onClick={this.props.onToggle}
diff --git a/src/components/Overlay/Content.js b/src/components/Overlay/Content.js
index 91e36c0..19f81eb 100644
--- a/src/components/Overlay/Content.js
+++ b/src/components/Overlay/Content.js
@@ -5,7 +5,7 @@ import Md from "./Md";
 import Spinner from "../presentational/Spinner";
 import NoSource from "../presentational/NoSource";
 
-export default ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
+const Content = ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
   const el = document.querySelector(".source-media-gallery");
   const shiftW = el ? el.getBoundingClientRect().width : 0;
 
@@ -71,7 +71,7 @@ export default ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
           </div>
         );
       case "Document":
-        return <iframe className="source-document" src={path} />;
+        return <iframe title={path} className="source-document" src={path} />;
       default:
         return (
           <NoSource
@@ -92,3 +92,5 @@ export default ({ media, viewIdx, translations, switchLanguage, langIdx }) => {
     </div>
   );
 };
+
+export default Content;
diff --git a/src/components/Overlay/Controls.js b/src/components/Overlay/Controls.js
index 7a8d60f..1e5355a 100644
--- a/src/components/Overlay/Controls.js
+++ b/src/components/Overlay/Controls.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default ({ viewIdx, paths, onShiftHandler }) => {
+const OverlayControls = ({ viewIdx, paths, onShiftHandler }) => {
   const backArrow =
     viewIdx !== 0 ? (
       <div className="back" onClick={() => onShiftHandler(-1)}>
@@ -28,3 +28,5 @@ export default ({ viewIdx, paths, onShiftHandler }) => {
   }
   return <div className="media-gallery-controls" />;
 };
+
+export default OverlayControls;
diff --git a/src/components/Overlay/Md.js b/src/components/Overlay/Md.js
index cdc54f9..4f30bee 100644
--- a/src/components/Overlay/Md.js
+++ b/src/components/Overlay/Md.js
@@ -1,4 +1,3 @@
-/* global fetch */
 import React from "react";
 import PropTypes from "prop-types";
 import marked from "marked";
diff --git a/src/components/Overlay/Media.js b/src/components/Overlay/Media.js
index 6cbd973..2f8b657 100644
--- a/src/components/Overlay/Media.js
+++ b/src/components/Overlay/Media.js
@@ -108,7 +108,7 @@ class SourceOverlay extends React.Component {
                   {url ? (
                     <span>
                       <i className="material-icons left">link</i>
-                      <a href={url} target="_blank">
+                      <a href={url} target="_blank" rel="noreferrer">
                         Link to original URL
                       </a>
                     </span>
diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index a4d41c7..731c04d 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -49,7 +49,7 @@ class Search extends React.Component {
 
     return (
       <div
-        class={
+        className={
           "search-outer-container" +
           (this.props.narrative ? " narrative-mode " : "")
         }
@@ -58,11 +58,13 @@ class Search extends React.Component {
           <i className="material-icons">search</i>
         </div>
         <div
-          class={"search-bar-overlay" + (this.state.isFolded ? " folded" : "")}
+          className={
+            "search-bar-overlay" + (this.state.isFolded ? " folded" : "")
+          }
         >
-          <div class="search-input-container">
+          <div className="search-input-container">
             <input
-              class="search-bar-input"
+              className="search-bar-input"
               onChange={this.updateSearchQuery}
               type="text"
             />
@@ -74,7 +76,7 @@ class Search extends React.Component {
               close
             </i>
           </div>
-          <div class="search-results">
+          <div className="search-results">
             {searchResults.map((result) => {
               return (
                 <SearchRow
diff --git a/src/components/StateOptions.jsx b/src/components/StateOptions.jsx
index d7a89d7..e753425 100644
--- a/src/components/StateOptions.jsx
+++ b/src/components/StateOptions.jsx
@@ -1,14 +1,14 @@
 import React, { useState } from "react";
 
-export default ({ showing, onClickHandler, timelineDims }) => {
-  if (!showing) {
-    return null;
-  }
-
+const StateOptions = ({ showing, onClickHandler, timelineDims }) => {
   const [checked, setChecked] = useState(false);
   const handleCheck = () => setChecked(!checked);
   const onNarrativise = () => onClickHandler(checked);
 
+  if (!showing) {
+    return null;
+  }
+
   return (
     <div className="stateoptions-panel" style={{ bottom: timelineDims.height }}>
       <div>
@@ -26,3 +26,5 @@ export default ({ showing, onClickHandler, timelineDims }) => {
     </div>
   );
 };
+
+export default StateOptions;
diff --git a/src/components/StaticPage.js b/src/components/StaticPage.js
index 12cf5b9..c5eae28 100644
--- a/src/components/StaticPage.js
+++ b/src/components/StaticPage.js
@@ -1,9 +1,9 @@
 import React from "react";
 
-export default ({ showing, children }) => {
-  return (
-    <div className={`cover-container ${showing ? "showing" : ""}`}>
-      {children}
-    </div>
-  );
-};
+const StaticPage = ({ showing, children }) => (
+  <div className={`cover-container ${showing ? "showing" : ""}`}>
+    {children}
+  </div>
+);
+
+export default StaticPage;
diff --git a/src/components/TemplateCover.js b/src/components/TemplateCover.js
index bc9432f..36c6cee 100644
--- a/src/components/TemplateCover.js
+++ b/src/components/TemplateCover.js
@@ -158,10 +158,14 @@ class TemplateCover extends React.Component {
             className="cover-logo-container"
             href="https://forensic-architecture.org"
           >
-            <img className="cover-logo" src={falogo} />
+            <img
+              className="cover-logo"
+              src={falogo}
+              alt="Forensic Architecture logo"
+            />
           </a>
           <a className="cover-logo-container" href="https://bellingcat.com">
-            <img className="cover-logo" src={bcatlogo} />
+            <img className="cover-logo" src={bcatlogo} alt="Bellingcat logo" />
           </a>
         </div>
         <div className="cover-content">
diff --git a/src/components/TimelineCategories.jsx b/src/components/TimelineCategories.jsx
index edd0013..5a98cdd 100644
--- a/src/components/TimelineCategories.jsx
+++ b/src/components/TimelineCategories.jsx
@@ -38,7 +38,7 @@ class TimelineCategories extends React.Component {
     return (
       <>
         <g
-          class="tick"
+          className="tick"
           style={{ strokeWidth }}
           opacity="0.5"
           transform={`translate(0,${this.props.getCategoryY(cat)})`}
@@ -46,7 +46,7 @@ class TimelineCategories extends React.Component {
           <line x1={dims.marginLeft} x2={dims.width - dims.width_controls} />
         </g>
         <g
-          class="tick"
+          className="tick"
           opacity="1"
           transform={`translate(0,${this.props.getCategoryY(cat)})`}
         >
@@ -66,11 +66,11 @@ class TimelineCategories extends React.Component {
       : this.renderCategory(fallbackLabel, 0);
 
     return (
-      <g class="yAxis">
+      <g className="yAxis">
         {renderedCategories}
         <rect
           ref={this.grabRef}
-          class="drag-grabber"
+          className="drag-grabber"
           x={dims.marginLeft}
           y={dims.marginTop}
           width={dims.width - dims.marginLeft - dims.width_controls}
diff --git a/src/components/Toolbar/BottomActions.js b/src/components/Toolbar/BottomActions.js
index 8c7113c..cc8fa4a 100644
--- a/src/components/Toolbar/BottomActions.js
+++ b/src/components/Toolbar/BottomActions.js
@@ -6,27 +6,32 @@ import InfoIcon from "../presentational/Icons/Info";
 
 function BottomActions(props) {
   function renderToggles() {
-    return [
-      <div className="bottom-action-block">
-        {props.features.USE_SITES ? (
-          <SitesIcon
-            isActive={props.sites.enabled}
-            onClickHandler={props.sites.toggle}
+    return (
+      <>
+        <div className="bottom-action-block">
+          {props.features.USE_SITES ? (
+            <SitesIcon
+              isActive={props.sites.enabled}
+              onClickHandler={props.sites.toggle}
+            />
+          ) : null}
+        </div>
+        ,
+        <div className="botttom-action-block">
+          <InfoIcon
+            isActive={props.info.enabled}
+            onClickHandler={props.info.toggle}
           />
-        ) : null}
-      </div>,
-      <div className="botttom-action-block">
-        <InfoIcon
-          isActive={props.info.enabled}
-          onClickHandler={props.info.toggle}
-        />
-      </div>,
-      <div className="botttom-action-block">
-        {props.features.USE_COVER ? (
-          <CoverIcon onClickHandler={props.cover.toggle} />
-        ) : null}
-      </div>,
-    ];
+        </div>
+        ,
+        <div className="botttom-action-block">
+          {props.features.USE_COVER ? (
+            <CoverIcon onClickHandler={props.cover.toggle} />
+          ) : null}
+        </div>
+        ,
+      </>
+    );
   }
 
   return <div className="bottom-actions">{renderToggles()}</div>;
diff --git a/src/components/Toolbar/CategoriesListPanel.js b/src/components/Toolbar/CategoriesListPanel.js
index f979e3c..5d60a6a 100644
--- a/src/components/Toolbar/CategoriesListPanel.js
+++ b/src/components/Toolbar/CategoriesListPanel.js
@@ -3,7 +3,7 @@ import marked from "marked";
 import Checkbox from "../presentational/Checkbox";
 import copy from "../../common/data/copy.json";
 
-export default ({
+const CategoriesListPanel = ({
   categories,
   activeCategories,
   onCategoryFilter,
@@ -45,3 +45,5 @@ export default ({
     </div>
   );
 };
+
+export default CategoriesListPanel;
diff --git a/src/components/presentational/Checkbox.js b/src/components/presentational/Checkbox.js
index 73f8692..274e83c 100644
--- a/src/components/presentational/Checkbox.js
+++ b/src/components/presentational/Checkbox.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default ({ label, isActive, onClickCheckbox, color }) => {
+const Checkbox = ({ label, isActive, onClickCheckbox, color }) => {
   const styles = {
     background: isActive ? color : "none",
     border: `1px solid ${color}`,
@@ -15,3 +15,5 @@ export default ({ label, isActive, onClickCheckbox, color }) => {
     </div>
   );
 };
+
+export default Checkbox;
diff --git a/src/components/presentational/Icons/Info.js b/src/components/presentational/Icons/Info.js
index 44c3fde..1f37fcc 100644
--- a/src/components/presentational/Icons/Info.js
+++ b/src/components/presentational/Icons/Info.js
@@ -8,7 +8,7 @@ const CoverIcon = ({ isActive, isDisabled, onClickHandler }) => {
 
   return (
     <button className={classes} onClick={onClickHandler}>
-      <i class="material-icons">info</i>
+      <i className="material-icons">info</i>
     </button>
   );
 };
diff --git a/src/components/presentational/Map/Clusters.jsx b/src/components/presentational/Map/Clusters.jsx
index 589bba1..3158395 100644
--- a/src/components/presentational/Map/Clusters.jsx
+++ b/src/components/presentational/Map/Clusters.jsx
@@ -62,23 +62,28 @@ function Cluster({
   if (!isLatitude(latitude) || !isLongitude(longitude)) return null;
 
   return (
-    <g
-      className="cluster-event"
-      transform={`translate(${x}, ${y})`}
-      onClick={(e) => onClick({ id: clusterId, latitude, longitude })}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      <ColoredMarkers
-        radius={size}
-        colorPercentMap={zipColorsToPercentages(filterColors, colorPercentages)}
-        styles={{
-          ...styles,
-        }}
-        className="cluster-event-marker"
-      />
-      {hovered ? renderHover(cluster) : null}
-    </g>
+    <svg>
+      <g
+        className="cluster-event"
+        transform={`translate(${x}, ${y})`}
+        onClick={(e) => onClick({ id: clusterId, latitude, longitude })}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      >
+        <ColoredMarkers
+          radius={size}
+          colorPercentMap={zipColorsToPercentages(
+            filterColors,
+            colorPercentages
+          )}
+          styles={{
+            ...styles,
+          }}
+          className="cluster-event-marker"
+        />
+        {hovered ? renderHover(cluster) : null}
+      </g>
+    </svg>
   );
 }
 
@@ -125,30 +130,32 @@ function ClusterEvents({
 
   return (
     <Portal node={svg}>
-      <g className="cluster-locations">
-        {isRadial ? <DefsClusters /> : null}
-        {clusters.map((c) => {
-          const pointCount = c.properties.point_count;
-          const clusterSize = calcClusterSize(pointCount, totalPoints);
-          return (
-            <Cluster
-              onClick={onSelect}
-              getClusterChildren={getClusterChildren}
-              coloringSet={coloringSet}
-              cluster={c}
-              filterColors={filterColors}
-              size={clusterSize}
-              projectPoint={projectPoint}
-              totalPoints={totalPoints}
-              styles={{
-                ...styles,
-                fillOpacity: calcClusterOpacity(pointCount, totalPoints),
-              }}
-              renderHover={() => renderHover(pointCount, clusterSize)}
-            />
-          );
-        })}
-      </g>
+      <svg>
+        <g className="cluster-locations">
+          {isRadial ? <DefsClusters /> : null}
+          {clusters.map((c) => {
+            const pointCount = c.properties.point_count;
+            const clusterSize = calcClusterSize(pointCount, totalPoints);
+            return (
+              <Cluster
+                onClick={onSelect}
+                getClusterChildren={getClusterChildren}
+                coloringSet={coloringSet}
+                cluster={c}
+                filterColors={filterColors}
+                size={clusterSize}
+                projectPoint={projectPoint}
+                totalPoints={totalPoints}
+                styles={{
+                  ...styles,
+                  fillOpacity: calcClusterOpacity(pointCount, totalPoints),
+                }}
+                renderHover={() => renderHover(pointCount, clusterSize)}
+              />
+            );
+          })}
+        </g>
+      </svg>
     </Portal>
   );
 }
diff --git a/src/components/presentational/Map/DefsMarkers.jsx b/src/components/presentational/Map/DefsMarkers.jsx
index 64347ff..f54e824 100644
--- a/src/components/presentational/Map/DefsMarkers.jsx
+++ b/src/components/presentational/Map/DefsMarkers.jsx
@@ -1,30 +1,35 @@
 import React from "react";
 
 const MapDefsMarkers = () => (
-  <defs>
-    <marker
-      id="arrow"
-      viewBox="0 0 6 6"
-      refX="3"
-      refY="3"
-      markerWidth="6"
-      markerHeight="6"
-      orient="auto"
-    >
-      <path d="M0,3v-3l6,3l-6,3z" style={{ fill: "red" }} />
-    </marker>
-    <marker
-      id="arrow-off"
-      viewBox="0 0 6 6"
-      refX="3"
-      refY="3"
-      markerWidth="6"
-      markerHeight="6"
-      orient="auto"
-    >
-      <path d="M0,3v-3l6,3l-6,3z" style={{ fill: "black", fillOpacity: 0.2 }} />
-    </marker>
-  </defs>
+  <svg>
+    <defs>
+      <marker
+        id="arrow"
+        viewBox="0 0 6 6"
+        refX="3"
+        refY="3"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto"
+      >
+        <path d="M0,3v-3l6,3l-6,3z" style={{ fill: "red" }} />
+      </marker>
+      <marker
+        id="arrow-off"
+        viewBox="0 0 6 6"
+        refX="3"
+        refY="3"
+        markerWidth="6"
+        markerHeight="6"
+        orient="auto"
+      >
+        <path
+          d="M0,3v-3l6,3l-6,3z"
+          style={{ fill: "black", fillOpacity: 0.2 }}
+        />
+      </marker>
+    </defs>
+  </svg>
 );
 
 export default MapDefsMarkers;
diff --git a/src/components/presentational/Map/Events.jsx b/src/components/presentational/Map/Events.jsx
index 6963a5d..d3f1efc 100644
--- a/src/components/presentational/Map/Events.jsx
+++ b/src/components/presentational/Map/Events.jsx
@@ -171,26 +171,30 @@ function MapEvents({
     }, false);
 
     return (
-      <g
-        className={`location-event ${narrative ? "no-hover" : ""}`}
-        transform={`translate(${x}, ${y})`}
-        onClick={(e) => handleEventSelect(e, location)}
-      >
-        {features.COLOR_BY_ASSOCIATION
-          ? renderLocationSlicesByAssociation(location)
-          : null}
-        {features.COLOR_BY_CATEGORY
-          ? renderLocationSlicesByCategory(location)
-          : null}
-        {extraRender ? extraRender() : null}
-        {isSelected ? null : renderBorder()}
-      </g>
+      <svg>
+        <g
+          className={`location-event ${narrative ? "no-hover" : ""}`}
+          transform={`translate(${x}, ${y})`}
+          onClick={(e) => handleEventSelect(e, location)}
+        >
+          {features.COLOR_BY_ASSOCIATION
+            ? renderLocationSlicesByAssociation(location)
+            : null}
+          {features.COLOR_BY_CATEGORY
+            ? renderLocationSlicesByCategory(location)
+            : null}
+          {extraRender ? extraRender() : null}
+          {isSelected ? null : renderBorder()}
+        </g>
+      </svg>
     );
   }
 
   return (
     <Portal node={svg}>
-      <g className="event-locations">{locations.map(renderLocation)}</g>
+      <svg>
+        <g className="event-locations">{locations.map(renderLocation)}</g>
+      </svg>
     </Portal>
   );
 }
diff --git a/src/components/presentational/Narrative/Adjust.js b/src/components/presentational/Narrative/Adjust.js
index ae0fdc8..8edc9cc 100644
--- a/src/components/presentational/Narrative/Adjust.js
+++ b/src/components/presentational/Narrative/Adjust.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default ({ isDisabled, direction, onClickHandler }) => {
+const Adjust = ({ isDisabled, direction, onClickHandler }) => {
   return (
     <div
       className={`narrative-adjust ${direction}`}
@@ -12,3 +12,5 @@ export default ({ isDisabled, direction, onClickHandler }) => {
     </div>
   );
 };
+
+export default Adjust;
diff --git a/src/components/presentational/Narrative/Close.js b/src/components/presentational/Narrative/Close.js
index 37e346f..453f421 100644
--- a/src/components/presentational/Narrative/Close.js
+++ b/src/components/presentational/Narrative/Close.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default ({ onClickHandler, closeMsg }) => {
+const Close = ({ onClickHandler, closeMsg }) => {
   return (
     <div className="narrative-close" onClick={onClickHandler}>
       <button className="side-menu-burg is-active">
@@ -10,3 +10,5 @@ export default ({ onClickHandler, closeMsg }) => {
     </div>
   );
 };
+
+export default Close;
diff --git a/src/components/presentational/Narrative/Controls.js b/src/components/presentational/Narrative/Controls.js
index 2b543b1..0073f6a 100644
--- a/src/components/presentational/Narrative/Controls.js
+++ b/src/components/presentational/Narrative/Controls.js
@@ -3,7 +3,7 @@ import Card from "./Card";
 import Adjust from "./Adjust";
 import Close from "./Close";
 
-export default ({ narrative, methods }) => {
+const NarrativeControls = ({ narrative, methods }) => {
   if (!narrative) return null;
 
   const { current, steps } = narrative;
@@ -30,3 +30,5 @@ export default ({ narrative, methods }) => {
     </>
   );
 };
+
+export default NarrativeControls;
diff --git a/src/components/presentational/Popup.js b/src/components/presentational/Popup.js
index 8cffbfd..af36306 100644
--- a/src/components/presentational/Popup.js
+++ b/src/components/presentational/Popup.js
@@ -3,7 +3,7 @@ import marked from "marked";
 
 const fontSize = window.innerWidth > 1000 ? 14 : 18;
 
-export default ({
+const Popup = ({
   content = [],
   styles = {},
   isOpen = true,
@@ -29,10 +29,12 @@ export default ({
         </button>
         <h2>{title}</h2>
       </div>
-      {content.map((t) => (
-        <div dangerouslySetInnerHTML={{ __html: marked(t) }} />
+      {content.map((t, idx) => (
+        <div key={idx} dangerouslySetInnerHTML={{ __html: marked(t) }} />
       ))}
       {children}
     </div>
   </div>
 );
+
+export default Popup;
diff --git a/src/components/presentational/Timeline/DatetimeBar.js b/src/components/presentational/Timeline/DatetimeBar.js
index bc63974..e459084 100644
--- a/src/components/presentational/Timeline/DatetimeBar.js
+++ b/src/components/presentational/Timeline/DatetimeBar.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default ({
+const DatetimeBar = ({
   highlights,
   events,
   x,
@@ -41,3 +41,5 @@ export default ({
     </>
   );
 };
+
+export default DatetimeBar;
diff --git a/src/components/presentational/Timeline/DatetimeSquare.js b/src/components/presentational/Timeline/DatetimeSquare.js
index e0bc8a8..d9e3a71 100644
--- a/src/components/presentational/Timeline/DatetimeSquare.js
+++ b/src/components/presentational/Timeline/DatetimeSquare.js
@@ -1,6 +1,14 @@
 import React from "react";
 
-export default ({ x, y, r, transform, onSelect, styleProps, extraRender }) => {
+const DatetimeSquare = ({
+  x,
+  y,
+  r,
+  transform,
+  onSelect,
+  styleProps,
+  extraRender,
+}) => {
   return (
     <rect
       onClick={onSelect}
@@ -14,3 +22,5 @@ export default ({ x, y, r, transform, onSelect, styleProps, extraRender }) => {
     />
   );
 };
+
+export default DatetimeSquare;
diff --git a/src/components/presentational/Timeline/DatetimeStar.js b/src/components/presentational/Timeline/DatetimeStar.js
index 0eeb18f..a31ca31 100644
--- a/src/components/presentational/Timeline/DatetimeStar.js
+++ b/src/components/presentational/Timeline/DatetimeStar.js
@@ -1,6 +1,14 @@
 import React from "react";
 
-export default ({ x, y, r, transform, onSelect, styleProps, extraRender }) => {
+const DatetimeStar = ({
+  x,
+  y,
+  r,
+  transform,
+  onSelect,
+  styleProps,
+  extraRender,
+}) => {
   const s = (r * 2) / 3;
   return (
     <polygon
@@ -15,3 +23,5 @@ export default ({ x, y, r, transform, onSelect, styleProps, extraRender }) => {
     />
   );
 };
+
+export default DatetimeStar;
diff --git a/src/components/presentational/Timeline/Project.js b/src/components/presentational/Timeline/Project.js
index 638aa03..33ee90d 100644
--- a/src/components/presentational/Timeline/Project.js
+++ b/src/components/presentational/Timeline/Project.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default ({
+const Project = ({
   offset,
   id,
   start,
@@ -26,3 +26,5 @@ export default ({
     />
   );
 };
+
+export default Project;
diff --git a/src/components/presentational/Timeline/ZoomControls.js b/src/components/presentational/Timeline/ZoomControls.js
index 407c75e..04358e7 100644
--- a/src/components/presentational/Timeline/ZoomControls.js
+++ b/src/components/presentational/Timeline/ZoomControls.js
@@ -28,6 +28,7 @@ const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
         x="60"
         y={idx * 15 + 20}
         onClick={() => onApplyZoom(zoom)}
+        key={idx}
       >
         {zoom.label}
       </text>
diff --git a/src/test/App.test.js b/src/test/App.test.js
index cbadc95..2cb8af4 100644
--- a/src/test/App.test.js
+++ b/src/test/App.test.js
@@ -12,5 +12,5 @@ it("renders an option to view categories", () => {
       <App />
     </Provider>
   );
-  expect(screen.getByText("Categories")).toBeInTheDocument();
+  expect(screen.getByText("Filters")).toBeInTheDocument();
 });