Reactify timeline labels

src/components/Map.jsx

@@ -112,7 +112,6 @@ class Map extends React.Component {
   }
 
   renderSVG() {
-    if (this.map === null) return '';
     const pane = this.map.getPanes().overlayPane;
     const { width, height } = this.getClientDims();
 
@@ -203,7 +202,7 @@ class Map extends React.Component {
     return (
       <div className={classes}>
         <div id={this.props.mapId} />
-        {this.renderSVG()}
+        {(this.map !== null) ? this.renderSVG() : ''}
         {(this.map !== null) ? this.renderMarkers() : ''}
         {(this.map !== null) ? this.renderSites() : ''}
         {(this.map !== null) ? this.renderEvents() : ''}

src/components/Timeline.jsx

@@ -9,20 +9,29 @@ import TimelineHeader from './presentational/TimelineHeader';
 import TimelineHandles from './TimelineHandles.jsx';
 import TimelineZoomControls from './TimelineZoomControls.jsx';
 import TimelineLogic from '../js/timeline/timeline.js';
-
+import TimelineLabels from './TimelineLabels.jsx';
 
 class Timeline extends React.Component {
   constructor(props) {
     super(props);
     this.svgRef = React.createRef()
     this.state = {
-      isFolded: false
+      isFolded: false,
+      dims: {
+        height: 140,
+        width: 0,
+        width_controls: 100,
+        height_controls: 115,
+        margin_left: 120        
+      }
     };
   }
 
   componentDidMount() {
     this.timeline = new TimelineLogic(this.svgRef.current, this.props.app, this.props.ui, this.props.methods);
     this.timeline.update(this.props.domain, this.props.app);
+    this.computeDims();
+    window.addEventListener('resize', () => { this.computeDims(); });
   }
 
   componentWillReceiveProps(nextProps) {
@@ -37,21 +46,11 @@ class Timeline extends React.Component {
     });
   }
 
-  getClientDims() {
-    const WIDTH_CONTROLS = 100;
-    const HEIGHT = 140;
-    let WIDTH = 0;
-
+  computeDims() {
     if (document.querySelector(`#${this.props.ui.dom.timeline}`) !== null) {
       const boundingClient = document.querySelector(`#${this.props.ui.dom.timeline}`).getBoundingClientRect();
-      WIDTH = boundingClient.width;
-    }
-    return {
-      height: HEIGHT,
-      width: WIDTH,
-      width_controls: WIDTH_CONTROLS,
-      height_controls: 115,
-      margin_left: 120
+      const WIDTH = boundingClient.width;
+      this.setState({ dims: Object.assign({}, this.state.dims, { width: WIDTH }) });
     }
   }
 
@@ -70,8 +69,8 @@ class Timeline extends React.Component {
   }  
 
   renderSVG() {
-    const dims = this.getClientDims();
-  
+    const dims = this.state.dims;
+
     return (
       <svg
         ref={this.svgRef}
@@ -83,6 +82,7 @@ class Timeline extends React.Component {
         </clipPath>
         <TimelineHandles dims={dims} onMoveTime={(dir) => { this.onMoveTime(dir) }} />
         <TimelineZoomControls zoomLevels={this.props.app.zoomLevels} dims={dims} onApplyZoom={(zoom) => { this.onApplyZoom(zoom); }} />
+        <TimelineLabels dims={dims} timelabels={this.props.app.timerange} />
       </svg>
     ); 
   }

src/components/TimelineLabels.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { formatterWithYear } from '../js/utilities';
+
+const TimelineLabels = ({ dims, timelabels }) => {
+
+  return (
+    <g>
+      <line class="axisBoundaries" x1={dims.margin_left} x2={dims.margin_left} y1="10" y2="20"></line>
+      <line class="axisBoundaries" x1={dims.width - dims.width_controls} x2={dims.width - dims.width_controls} y1="10" y2="20"></line>
+      <text class="timeLabel0 timeLabel" x="5" y="15">
+        {formatterWithYear(timelabels[0])}
+      </text>
+      <text class="timelabelF timeLabel" x={dims.width - dims.width_controls - 5} y="15" style={{ textAnchor: 'end' }}>
+        {formatterWithYear(timelabels[1])}
+      </text>      
+    </g>
+  )
+}
+
+export default TimelineLabels;

src/js/timeline/timeline.js

@@ -25,7 +25,6 @@ export default function(svg, newApp, ui, methods) {
     timerange: newApp.timerange,
     selected: [],
     language: newApp.language,
-    zoomLevels: newApp.zoomLevels
   }
 
   // Dimension of the client
@@ -60,28 +59,8 @@ export default function(svg, newApp, ui, methods) {
    * Initilize SVG elements and groups
    */
   const dom = {};
-console.log(svg)
+
   dom.svg = d3.select(svg)
-    //d3.select(`#${ui.dom.timeline}`)
-    //.append('svg')
-    //.attr('width', WIDTH)
-    //.attr('height', HEIGHT);
-
-//  dom.clip = dom.svg.append("svg:clipPath")
-//    .attr("id", "clip")
-//    .append("svg:rect")
-//    .attr("x", margin.left)
-//    .attr("y", 0)
-//    .attr("width", WIDTH - margin.left)
-//    .attr("height", HEIGHT - 25);
-
-  dom.controls = d3.select(svg)
-    //d3.select(`#${ui.dom.timeline}`)
-    //.append('svg')
-    //.attr('class', 'time-controls')
-    //.attr('width', WIDTH_CONTROLS)
-    //.attr('height', HEIGHT);
-
 
   /*
    * Axis group elements
@@ -100,18 +79,6 @@ console.log(svg)
     .attr('transform', `translate(${WIDTH}, 0)`)
     .attr('class', 'yAxis');
 
-  dom.axis.boundaries = dom.svg.selectAll('.axisBoundaries')
-    .data([0, 1])
-    .enter().append('line')
-    .attr('class', 'axisBoundaries');
-
-  dom.axis.label0 = dom.svg.append('text')
-    .attr('class', 'timeLabel0 timeLabel');
-
-  dom.axis.label1 = dom.svg.append('text')
-    .attr('class', 'timelabelF timeLabel');
-
-
   /*
    * Plottable elements
    */
@@ -121,25 +88,6 @@ console.log(svg)
   dom.markers = dom.body.append('g');
 
 
-  /*
-   * Time Controls
-   */
-//  dom.forward = dom.svg.append('g').attr('class', 'time-controls-inline');
-//  dom.forward.append('circle');
-//  dom.forward.append('path');
-//
-//  dom.backwards = dom.svg.append('g').attr('class', 'time-controls-inline');
-//  dom.backwards.append('circle');
-//  dom.backwards.append('path');
-
-//  dom.zooms = dom.controls.append('g');
-//
-//  dom.zooms.selectAll('.zoom-level-button')
-//    .data(app.zoomLevels)
-//    .enter().append('text')
-//    .attr('class', 'zoom-level-button');
-
-
   /*
    * Initialize axis function and element group
    */
@@ -248,30 +196,11 @@ console.log(svg)
   }
 
 
-  /*
-  * TODO: Highlight zoom level based on time range selected
-  */
-//  function highlightZoomLevel(zoom) {
-//    app.zoomLevels.forEach((level) => {
-//      if (level.label === zoom.label) {
-//        level.active = true;
-//      } else {
-//        level.active = false;
-//      }
-//    });
-//
-//    dom.zooms.selectAll('text')
-//      .classed('active', level => level.active);
-//  }
-
-
   /**
    * Apply zoom level to timeline
    * @param {object} zoom: zoom level from zoomLevels
    */
   function applyZoom(zoom) {
-//    highlightZoomLevel(zoom);
-
     const extent = getTimeScaleExtent();
     const newCentralTime = d3.timeMinute.offset(scale.x.domain()[0], extent / 2);
 
@@ -367,24 +296,6 @@ console.log(svg)
     axis.x1.scale(scale.x);
   }
 
-
-  /**
-   * Display the current time range in the time label above the timeline
-   */
-  function renderTimeLabels() {
-    dom.axis.label0
-      .attr('x', 5)
-      .attr('y', 15)
-      .text(formatterWithYear(app.timerange[0]));
-
-    dom.axis.label1
-      .attr('x', WIDTH - 5)
-      .attr('y', 15)
-      .text(formatterWithYear(app.timerange[1]))
-      .style('text-anchor', 'end');
-  }
-
-
   /**
    * Makes a circular ring mark in all selected events
    * @param {object} eventPoint: object with eventPoint data (time, loc, tags)
@@ -469,55 +380,8 @@ console.log(svg)
     dom.axis.y
       .call(axis.y)
       .call(drag);
-
-    dom.axis.boundaries
-      .attr('x1', (d, i) => scale.x.range()[i])
-      .attr('x2', (d, i) => scale.x.range()[i])
-      .attr('y1', 10)
-      .attr('y2', 20);
-
-    dom.axis.label1
-      .attr('x', scale.x.range()[1] - 5);
   }
 
-
-  /**
-   * Render left and right time shifting controls
-   */
-  function renderTimeControls() {
-    const zoomLabels = copy[app.language].timeline.zooms;
-    app.zoomLevels.forEach((level, i) => {
-      level.label = zoomLabels[i];
-    });
-
-    // These controls on timeline svg
-//    dom.backwards.select('circle')
-//      .attr('transform', `translate(${scale.x.range()[0] + 20}, 62)`)
-//      .attr('r', 15);
-//
-//    dom.backwards.select('path')
-//      .attr('d', d3.symbol().type(d3.symbolTriangle).size(80))
-//      .attr('transform', `translate(${scale.x.range()[0] + 20}, 62)rotate(270)`);
-//
-//    dom.forward.select('circle')
-//      .attr('transform', `translate(${scale.x.range()[1] - 20}, 62)`)
-//      .attr('r', 15);
-//
-//    dom.forward.select('path')
-//      .attr('d', d3.symbol().type(d3.symbolTriangle).size(80))
-//      .attr('transform', `translate(${scale.x.range()[1] - 20}, 62)rotate(90)`);
-
-//    dom.zooms.selectAll('text')
-//      .text(d => d.label)
-//      .attr('x', 60)
-//      .attr('y', (d, i) => (i * 15) + 20)
-//      .classed('active', level => level.active);
-//
-//    dom.zooms.selectAll('text')
-//      .on('click', zoom => applyZoom(zoom));
-  }
-
-
   /**
    * Updates data displayed by this timeline, but only render if necessary
    * @param {Object} domain: Redux state domain subtree
@@ -561,27 +425,16 @@ console.log(svg)
       app.selected = newApp.selected.slice(0);
     }
 
-    if (isNewDomain || isNewAppProps) renderContent();
-    if (isNewAppProps) renderContext();
+    if (isNewDomain || isNewAppProps) render();
   }
 
-  function renderContext() {
-    renderTimeControls();
-    renderTimeLabels();
-  }
-
-  function renderContent() {
+  function render() {
     updateAxis();
     renderAxis();
     renderEvents();
     renderHighlight();
   }
 
-  function render() {
-    renderContext();
-    renderContent();
-  }
-
   return {
     applyZoom,
     moveTime,