clean component interfaces

src/components/Dashboard.jsx

@@ -103,7 +103,6 @@ class Dashboard extends React.Component {
           }}
         />
         <Map
-          mapId='map'
           methods={{
             onSelect: this.handleSelect,
             onSelectNarrative: this.setNarrative,

src/components/Map.jsx

@@ -51,7 +51,7 @@ class Map extends React.Component {
      * Creates a Leaflet map and a tilelayer for the map background
      */
     const map =
-      L.map(this.props.mapId)
+      L.map(this.props.ui.dom.map)
         .setView(this.props.app.mapAnchor, 14)
         .setMinZoom(7)
         .setMaxZoom(18)
@@ -104,7 +104,7 @@ class Map extends React.Component {
   }
 
   getClientDims() {
-    const boundingClient = document.querySelector(`#${this.props.mapId}`).getBoundingClientRect();
+    const boundingClient = document.querySelector(`#${this.props.ui.dom.map}`).getBoundingClientRect();
 
     return {
       width: boundingClient.width,
@@ -112,7 +112,7 @@ class Map extends React.Component {
     }
   }
 
-  renderSVG() {
+  renderTiles() {
     const pane = this.map.getPanes().overlayPane;
     const { width, height } = this.getClientDims();
 
@@ -160,14 +160,16 @@ class Map extends React.Component {
 
   /**
    * Determines additional styles on the <circle> for each location.
-   * A location consists of an array of events (location.events). The function
+   * A location consists of an array of events (see selectors). The function
    * also has full access to the domain and redux state to derive values if
-   * necessary. The function should return a regular style object.
+   * necessary. The function should return an array, where the value at the
+   * first index is a styles object for the SVG at the location, and the value
+   * at the second index is an optional function that renders additional
+   * components in the <g/> div.
    */
   styleLocation(location) {
     return [
       { fill: 'orange' },
-      () => <text>ciao</text>
     ]
   }
 
@@ -217,8 +219,8 @@ class Map extends React.Component {
 
     return (
       <div className={classes}>
-        <div id={this.props.mapId} />
-        {(this.map !== null) ? this.renderSVG() : ''}
+        <div id={this.props.ui.dom.map} />
+        {(this.map !== null) ? this.renderTiles() : ''}
         {(this.map !== null) ? this.renderMarkers() : ''}
         {(this.map !== null) && isShowingSites ? this.renderSites() : ''}
         {(this.map !== null) ? this.renderEvents() : ''}

src/components/Timeline.jsx

@@ -211,10 +211,18 @@ class Timeline extends React.Component {
     this.props.methods.onUpdateTimerange(this.state.timerange);
   }
 
+  /**
+   * Determines additional styles on the <circle> for each location.
+   * A datetime consists of an array of events (see selectors). The function
+   * also has full access to the domain and redux state to derive values if
+   * necessary. The function should return an array, where the value at the
+   * first index is a styles object for the SVG at the location, and the value
+   * at the second index is an optional function that renders additional
+   * components in the <g/> div.
+   */
   styleDatetime(timestamp) {
     return [
       { fill: 'orange' },
-      () => <text>ciao</text>
     ]
   }