enable modifying event radius from config

src/common/global.js

@@ -5,14 +5,9 @@ export const colors = {
   white: '#fff'
 }
 
-export const sizes = {
-  eventDotR: 8
-}
-
 export default {
   fallbackEventColor: colors.fa_red,
   darkBackground: colors.black,
   primaryHighlight: colors.yellow,
-  secondaryHighlight: colors.white,
-  sizes
+  secondaryHighlight: colors.white
 }

src/components/Map.jsx

@@ -215,6 +215,7 @@ class Map extends React.Component {
         onSelect={this.props.methods.onSelect}
         onSelectNarrative={this.props.methods.onSelectNarrative}
         getCategoryColor={this.props.methods.getCategoryColor}
+        eventRadius={this.props.ui.eventRadius}
       />
     )
   }
@@ -286,7 +287,8 @@ function mapStateToProps (state) {
       dom: state.ui.dom,
       narratives: state.ui.style.narratives,
       mapSelectedEvents: state.ui.style.selectedEvents,
-      shapes: state.ui.style.shapes
+      shapes: state.ui.style.shapes,
+      eventRadius: state.ui.eventRadius
     },
     features: selectors.getFeatures(state)
   }

src/components/Timeline.jsx

@@ -51,7 +51,6 @@ class Timeline extends React.Component {
 
     if ((hash(nextProps.domain.categories) !== hash(this.props.domain.categories)) || hash(nextProps.dimensions) !== hash(this.props.dimensions)) {
       const { trackHeight, marginTop } = nextProps.dimensions
-      console.log(nextProps.domain.categories)
       this.setState({
         scaleY: this.makeScaleY(nextProps.domain.categories, trackHeight, marginTop)
       })
@@ -283,7 +282,7 @@ class Timeline extends React.Component {
 
     const { category, project } = event
     if (GRAPH_NONLOCATED && GRAPH_NONLOCATED.categories.includes(category)) {
-      return this.state.dims.marginTop + domain.projects[project].offset + sizes.eventDotR
+      return this.state.dims.marginTop + domain.projects[project].offset + this.props.ui.eventRadius
     }
     return this.state.scaleY(category)
   }
@@ -364,6 +363,7 @@ class Timeline extends React.Component {
                 transitionDuration={this.state.transitionDuration}
                 styles={this.props.ui.styles}
                 features={this.props.features}
+                eventRadius={this.props.ui.eventRadius}
               />
               <Events
                 events={this.props.domain.events}
@@ -385,6 +385,7 @@ class Timeline extends React.Component {
                 features={this.props.features}
                 setLoading={this.props.actions.setLoading}
                 setNotLoading={this.props.actions.setNotLoading}
+                eventRadius={this.props.ui.eventRadius}
               />
             </svg>
           </div>
@@ -412,7 +413,8 @@ function mapStateToProps (state) {
     },
     ui: {
       dom: state.ui.dom,
-      styles: state.ui.style.selectedEvents
+      styles: state.ui.style.selectedEvents,
+      eventRadius: state.ui.eventRadius
     },
     features: selectors.getFeatures(state)
   }

src/components/presentational/Map/Events.jsx

@@ -12,7 +12,8 @@ function MapEvents ({
   narrative,
   onSelect,
   svg,
-  locations
+  locations,
+  eventRadius
 }) {
   function getCoordinatesForPercent (radius, percent) {
     const x = radius * Math.cos(2 * Math.PI * percent)
@@ -55,7 +56,7 @@ function MapEvents ({
     return (
       <React.Fragment>
         {colorSlices.map((color, idx) => {
-          const r = 10
+          const r = eventRadius
 
           // Based on the number of events in each location,
           // create a slice per event filled with its category color

src/components/presentational/Timeline/Events.js

@@ -5,7 +5,6 @@ import DatetimeSquare from './DatetimeSquare'
 import DatetimeStar from './DatetimeStar'
 import Project from './Project'
 import { calcOpacity } from '../../../common/utilities'
-import { sizes } from '../../../common/global'
 
 function renderDot (event, styles, props) {
   return <DatetimeDot
@@ -14,7 +13,7 @@ function renderDot (event, styles, props) {
     events={[event]}
     x={props.x}
     y={props.y}
-    r={sizes.eventDotR}
+    r={props.eventRadius}
     styleProps={styles}
   />
 }
@@ -30,7 +29,7 @@ function renderBar (event, styles, props) {
     events={[event]}
     x={props.x}
     y={props.dims.marginTop}
-    width={sizes.eventDotR / 4}
+    width={props.eventRadius / 4}
     height={props.dims.trackHeight}
     styleProps={{ ...styles, fillOpacity }}
     highlights={props.highlights}
@@ -42,7 +41,7 @@ function renderDiamond (event, styles, props) {
     onSelect={props.onSelect}
     x={props.x}
     y={props.y}
-    r={1.8 * sizes.eventDotR}
+    r={1.8 * props.eventRadius}
     styleProps={styles}
   />
 }
@@ -52,7 +51,7 @@ function renderStar (event, styles, props) {
     onSelect={props.onSelect}
     x={props.x}
     y={props.y}
-    r={1.8 * sizes.eventDotR}
+    r={1.8 * props.eventRadius}
     styleProps={{ ...styles, fillRule: 'nonzero' }}
     transform='rotate(90)'
   />
@@ -71,7 +70,8 @@ const TimelineEvents = ({
   dims,
   features,
   setLoading,
-  setNotLoading
+  setNotLoading,
+  eventRadius
 }) => {
   const narIds = narrative ? narrative.steps.map(s => s.id) : []
 
@@ -107,6 +107,7 @@ const TimelineEvents = ({
     return renderShape(event, styles, {
       x: getDatetimeX(event.datetime),
       y: eventY,
+      eventRadius,
       onSelect: () => onSelect(event),
       dims,
       highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.filters[features.HIGHLIGHT_GROUPS.filterIndexIndicatingGroup]) : [],
@@ -120,6 +121,7 @@ const TimelineEvents = ({
       return <React.Fragment>
         {Object.values(projects).map(project => <Project
           {...project}
+          eventRadius={eventRadius}
           onClick={() => console.log(project)}
           getX={getDatetimeX}
           dims={dims}

src/components/presentational/Timeline/Markers.js

@@ -3,6 +3,7 @@ import colors, { sizes } from '../../../common/global'
 
 const TimelineMarkers = ({
   styles,
+  eventRadius,
   getEventX,
   getEventY,
   transitionDuration,
@@ -27,7 +28,7 @@ const TimelineMarkers = ({
           '-moz-transition': 'none',
           'opacity': 0.9
         }}
-        r={sizes.eventDotR * 2}
+        r={eventRadius * 2}
       />
     }
     function renderBar () {
@@ -35,7 +36,7 @@ const TimelineMarkers = ({
         className='timeline-marker'
         x={0}
         y={0}
-        width={sizes.eventDotR / 3}
+        width={eventRadius / 3}
         height={dims.contentHeight - 55}
         stroke={styles ? styles.stroke : colors.primaryHighlight}
         stroke-opacity='1'

src/components/presentational/Timeline/Project.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { sizes } from '../../../common/global'
 
 export default ({
   offset,
@@ -10,6 +9,7 @@ export default ({
   y,
   dims,
   colour,
+  eventRadius,
   onClick
 }) => {
   const length = getX(end) - getX(start)
@@ -21,6 +21,6 @@ export default ({
     y={dims.marginTop + offset}
     width={length}
     style={{ fill: colour, fillOpacity: 0.2 }}
-    height={2 * sizes.eventDotR}
+    height={2 * eventRadius}
   />
 }

src/selectors/index.js

@@ -21,6 +21,7 @@ export const getTimeRange = state => state.app.timeline.range
 export const getTimelineDimensions = state => state.app.timeline.dimensions
 export const selectNarrative = state => state.app.narrative
 export const getFeatures = state => state.features
+export const getEventRadius = state => state.ui.eventRadius
 
 export const selectSites = createSelector([getSites, getFeatures], (sites, features) => {
   if (features.USE_SITES) {
@@ -158,12 +159,12 @@ export const selectLocations = createSelector(
 )
 
 export const selectEventsWithProjects = createSelector(
-  [selectEvents, getFeatures],
-  (events, features) => {
+  [selectEvents, getFeatures, getEventRadius],
+  (events, features, eventRadius) => {
     if (!features.GRAPH_NONLOCATED) {
       return [events, []]
     }
-    const projSize = 2 * sizes.eventDotR
+    const projSize = 2 * eventRadius
     const projectIdx = features.GRAPH_NONLOCATED.projectIdx || 0
     const getProject = ev => ev.filters[projectIdx]
     const projects = {}

src/store/initial.js

@@ -127,7 +127,8 @@ const initial = {
       timeline: 'timeline',
       timeslider: 'timeslider',
       map: 'map'
-    }
+    },
+    eventRadius: 8
   },
 
   features: {