compose store with custom values in config.js

package.json

@@ -19,6 +19,7 @@
     "marked": "^0.6.0",
     "normalizr": "^3.2.3",
     "object-hash": "^1.3.0",
+    "ramda": "^0.26.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-image": "^1.5.1",

src/components/Dashboard.jsx

@@ -60,8 +60,8 @@ class Dashboard extends React.Component {
     }
   }
 
-  getCategoryColor(category='other') {
-    return this.props.ui.style.categories[category] || this.props.ui.style.categories['other']
+  getCategoryColor(category) {
+    return this.props.ui.style.categories[category] || this.props.ui.style.categories['default']
   }
 
   getNarrativeLinks(event) {

src/components/Timeline.jsx

@@ -20,6 +20,7 @@ class Timeline extends React.Component {
     super(props);
     this.styleDatetime = this.styleDatetime.bind(this)
     this.getDatetimeX = this.getDatetimeX.bind(this)
+    this.onApplyZoom = this.onApplyZoom.bind(this)
     this.svgRef = React.createRef()
     this.state = {
       isFolded: false,
@@ -99,6 +100,7 @@ class Timeline extends React.Component {
    * Returns the time scale (x) extent in minutes
    */
   getTimeScaleExtent() {
+    if (!this.state.scaleX) return 0
     const timeDomain = this.state.scaleX.domain();
     return (timeDomain[1].getTime() - timeDomain[0].getTime()) / 60000;
   }
@@ -153,7 +155,7 @@ class Timeline extends React.Component {
 
     this.setState({ timerange: [domain0, domainF] }, () => {
       this.props.methods.onUpdateTimerange(this.state.timerange);
-    });    
+    });
   }
 
   /**
@@ -284,9 +286,10 @@ class Timeline extends React.Component {
                 onMoveTime={(dir) => { this.onMoveTime(dir) }}
               />
               <TimelineZoomControls
+                extent={this.getTimeScaleExtent()}
                 zoomLevels={this.props.app.zoomLevels}
                 dims={dims}
-                onApplyZoom={(zoom) => { this.onApplyZoom(zoom); }}
+                onApplyZoom={this.onApplyZoom}
               />
               <TimelineLabels
                 dims={dims}

src/components/TimelineAxis.jsx

@@ -20,14 +20,14 @@ class TimelineAxis extends React.Component {
           .tickPadding(5)
           .tickSize(this.props.dims.trackHeight)
           .tickFormat(d3.timeFormat('%d %b'));
-  
+
       this.x1 =
         d3.axisBottom(this.props.scaleX)
           .ticks(10)
           .tickPadding(this.props.dims.margin_top)
           .tickSize(0)
           .tickFormat(d3.timeFormat('%H:%M'));
-      
+
       if (!this.state.isInitialized) this.setState({ isInitialized: true });
     }
 
@@ -61,9 +61,9 @@ class TimelineAxis extends React.Component {
           className={`axis axisHourText`}
         >
         </g>
-      </React.Fragment> 
+      </React.Fragment>
     );
   }
 }
 
-export default TimelineAxis;
+export default TimelineAxis;

src/components/TimelineCategories.jsx

@@ -59,4 +59,4 @@ class TimelineCategories extends React.Component {
   }
 }
 
-export default TimelineCategories;
+export default TimelineCategories;

src/components/presentational/TimelineZoomControls.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
-const TimelineZoomControls = ({ zoomLevels, dims, onApplyZoom }) => {
-  
+const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
   function renderZoom(zoom, idx) {
+    const isActive = (zoom.duration === extent)
     return (
       <text
-        className={`zoom-level-button ${zoom.active ? 'active' : ''}`}
+        className={`zoom-level-button ${isActive ? 'active' : ''}`}
         x="60"
         y={(idx * 15) + 20}
         onClick={() => onApplyZoom(zoom)}
@@ -22,4 +22,4 @@ const TimelineZoomControls = ({ zoomLevels, dims, onApplyZoom }) => {
   );
 }
 
-export default TimelineZoomControls;
+export default TimelineZoomControls;

src/store/initial.js

@@ -1,3 +1,5 @@
+import { mergeDeepLeft } from 'ramda'
+
 const initial = {
   /*
    * The Domain or 'domain' of this state refers to the tree of data
@@ -51,45 +53,18 @@ const initial = {
         sites: true
       },
     },
-    base_uri: 'http://127.0.0.1:8000/', // Modify accordingly on production setup.
     isMobile: (/Mobi/.test(navigator.userAgent)),
     language: 'en-US',
-    mapAnchor: process.env.MAP_ANCHOR,
-    zoomLevels: [{
-      label: '3 years',
-      duration: 1576800,
-      active: false
-    },
-      {
-        label: '3 months',
-        duration: 129600,
-        active: false
-      },
-      {
-        label: '3 days',
-        duration: 4320,
-        active: false
-      },
-      {
-        label: '12 hours',
-        duration: 720,
-        active: false
-      },
-      {
-        label: '2 hours',
-        duration: 120,
-        active: false
-      },
-      {
-        label: '30 min',
-        duration: 30,
-        active: false
-      },
-      {
-        label: '10 min',
-        duration: 10,
-        active: false
-      }],
+    mapAnchor: [31.356397, 34.784818],
+    zoomLevels: [
+      { label: '3 years', duration: 1576800 },
+      { label: '3 months', duration: 129600 },
+      { label: '3 days', duration: 4320 },
+      { label: '12 hours', duration: 720 },
+      { label: '2 hours', duration: 120 },
+      { label: '30 min', duration: 30 },
+      { label: '10 min', duration: 10 }
+    ],
     flags: {
       isFetchingDomain: false,
       isFetchingSources: false,
@@ -108,30 +83,13 @@ const initial = {
   ui: {
     style: {
       categories: {
-        default: 'yellow',
-        // Add here other categories to differentiate by color, like:
-        alpha: '#00ff00',
-        beta: '#ff0000',
-        other: '#f3de2c'
+        default: '#f3de2c',
       },
       narratives: {
         default: {
           opacity: 0.9,
           stroke: 'red',
           strokeWidth: 3
-        },
-        narrative_1: {
-          opacity: 0.4,
-          stroke: '#f18f01',
-          strokeWidth: 3
-        },
-        // process.env.features.NARRATIVE_STEP_STYLES
-        stepStyles: {
-          Physical: {
-            stroke: 'yellow',
-            strokeWidth: 3,
-            opacity: 0.9,
-          }
         }
       }
     },
@@ -143,4 +101,10 @@ const initial = {
   }
 };
 
-export default initial;
+let appStore;
+if (process.env.store) {
+  appStore = mergeDeepLeft(process.env.store, initial);
+} else {
+  appStore = initial
+}
+export default appStore

yarn.lock

@@ -5059,6 +5059,10 @@ quick-lru@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
 
+ramda@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"