Apply further cleanup and renaming

src/components/Dashboard.jsx

@@ -128,9 +128,8 @@ class Dashboard extends React.Component {
           highlighted={this.props.app.highlighted}
           mapAnchor={this.props.app.mapAnchor}
 
-          uiStyle={this.props.ui.style}
           dom={this.props.ui.dom}
-          isView2d={this.props.ui.flags.isView2d}
+          groupColors={this.props.ui.style.groupColors}
 
           select={this.handleSelect}
           highlight={this.handleHighlight}

src/components/Notification.jsx

@@ -27,19 +27,41 @@ export default class Notification extends React.Component{
     )
   }
 
+  renderNotificationContent(notification) {
+    const { type, message, items } = notification;
+
+    return (
+      <React.Fragment>
+        <div className={`message ${type}`}>
+          {`${message}`}
+        </div>
+        <div className={`details ${this.state.isExtended}`}>
+          {(items !== null) ? this.renderItems(items) : ''}
+        </div>
+      </React.Fragment>
+    )
+  }
+
   render() {
     if (this.props.isNotification) {
+
       return (
         <div className={`notification-wrapper`}>
-          {this.props.notifications.map(notification => (
-            <div className='notification' onClick={() => this.toggleDetails() }>
-              <button onClick={() => this.props.toggle()} className="side-menu-burg over-white is-active"><span /></button>
-              <div className={`message ${notification.type}`}>{`${notification.message}`}</div>
-              <div className={`details ${this.state.isExtended}`}>
-                {(notification.items !== null) ? this.renderItems(notification.items) : ''}
+          {this.props.notifications.map((notification) => {
+
+            return (
+              <div className='notification' onClick={() => this.toggleDetails() }>
+                <button
+                  onClick={() => this.props.toggle()}
+                  className="side-menu-burg over-white is-active"
+                >
+                  <span />
+                </button>
+                {this.renderNotificationContent(notification)}
               </div>
-            </div>
-          ))}
+            );
+          })
+        }
         </div>
       )
     }

src/components/Viewport.jsx

@@ -21,14 +21,15 @@ class Viewport extends React.Component {
       highlighted: this.props.highlighted,
       getCategoryGroup: this.props.getCategoryGroup,
       getCategoryGroupColor: this.props.getCategoryGroupColor,
+      select: this.props.select,
       mapAnchor: this.props.mapAnchor
     }
     const ui = {
-      style: this.props.uiStyle,
+      groupColors: this.props.groupColors,
       dom: this.props.dom
     }
 
-    this.map = new Map(app, ui, this.props.select);
+    this.map = new Map(app, ui);
     this.map.update(domain, app);
   }
 

src/js/map/map.js

@@ -5,7 +5,7 @@ import {
 import hash from 'object-hash';
 import 'leaflet-polylinedecorator';
 
-export default function(newApp, ui, select) {
+export default function(newApp, ui) {
   let svg, g, defs;
 
   let categoryColorGroups = {};
@@ -24,7 +24,8 @@ export default function(newApp, ui, select) {
 
   const getCategoryGroup = newApp.getCategoryGroup;
   const getCategoryGroupColor = newApp.getCategoryGroupColor;
-  const groupColors = ui.style.groupColors;
+  const select = newApp.select;
+  const groupColors = ui.groupColors;
 
     // Map Settings
   const center = newApp.mapAnchor;

src/selectors/index.js

@@ -36,6 +36,17 @@ function isTaggedIn(event, tagFilters) {
   }
 }
 
+/*
+* Returns true if no tags are selected
+*/
+function isNoTags(tagFilters) {
+  return (
+    tagFilters.length === 0
+    || !process.env.features.USE_TAGS
+    || tagFilters.every(t => !t.active)
+  );
+}
+
 /**
  * Given an event and a time range,
  * returns true/false if the event falls within timeRange
@@ -47,15 +58,6 @@ function isTimeRangedIn(event, timeRange) {
   );
 }
 
-
-function isNoTags(tagFilters) {
-  return (
-    tagFilters.length === 0
-    || !process.env.features.USE_TAGS
-    || tagFilters.every(t => !t.active)
-  );
-}
-
 /**
  * Of all available events, selects those that fall within the time range,
  * and if TAGS are being used, select them if their tags are enabled
@@ -137,9 +139,9 @@ export const selectLocations = createSelector(
       }
     })
 
-  // Make locations an array are remove if any are undefined
-  return Object.values(selectedLocations).filter(item => item);
-});
+    return Object.values(selectedLocations);
+  }
+);
 
 
 /*
@@ -159,9 +161,9 @@ export const selectCategoryGroups = createSelector(
   [selectCategories],
   (categories) => {
     const groups = {};
-    categories.forEach((t) => {
-      if (t.group && !groups[t.group]) {
-        groups[t.group] = t.group_label;
+    categories.forEach((cat) => {
+      if (cat.group && !groups[cat.group]) {
+        groups[cat.group] = cat.group_label;
       }
     });
     return Object.keys(groups).concat(['other']);