Merge pull request #69 from forensic-architecture/topic/trajectory-types

Step styles

src/components/MapNarratives.jsx

@@ -18,59 +18,79 @@ class MapNarratives extends React.Component {
     return this.props.narrativeProps[styleName]
   }
 
-  getStrokeWidth(narrative, step) {
+  getStepStyle(name) {
-    if (!step) return 0
+    if (name === 'None') return null
-    return this.getNarrativeStyle(narrative.id).strokeWidth
+    return this.props.narrativeProps.stepStyles[name]
-  }
-
-  getStrokeDashArray(narrative, step) {
-    if (!step) return 'none'
-    return (this.getNarrativeStyle(narrative.id).style === 'dotted') ? "2px 5px" : 'none'
-  }
-
-  getStroke(narrative, step) {
-    if (!step || this.props.narrative === null) return 'none'
-    return this.getNarrativeStyle(narrative.id).stroke
-  }
-
-  getStrokeOpacity(narrative, step) {
-    if (this.props.narrative === null) return 0
-    if (!step || narrative.id !== this.props.narrative.id) return 0.1
-    return 1
   }
 
   hasNoLocation(step) {
     return (step.latitude === '' || step.longitude === '')
   }
 
-  renderNarrativeStep(allSteps, step, idx, n) {
+  renderNarrativeStep(idx, n) {
-    const { x, y } = this.projectPoint([step.latitude, step.longitude])
+    const step = n.steps[idx]
-    const step2 = allSteps[idx + 1]
+    const step2 = n.steps[idx + 1]
 
     // don't draw if one of the steps has no location
     if (this.hasNoLocation(step) || this.hasNoLocation(step2))
       return null
 
+    // 0 if not in narrative mode, 1 if active narrative, 0.1 if inactive
+    let styles = {
+      strokeOpacity:  (n === null) ? 0
+      : (step && (n.id === this.props.narrative.id)) ? 1 : 0.1,
+      strokeWidth: 0,
+      strokeDasharray: 'none',
+      stroke: 'none'
+    }
+
+    const p1  = this.projectPoint([step.latitude, step.longitude])
     const p2 = this.projectPoint([step2.latitude, step2.longitude])
 
+    if (step) {
+      if (process.env.features.NARRATIVE_STEP_STYLES) {
+        const _idx = step.narratives.indexOf(n.id)
+        const stepStyle = step.narrative___stepStyles[_idx]
+
+        return this._renderNarrativeStep(
+          p1,
+          p2,
+          { ...styles, ...this.getStepStyle(stepStyle) }
+        )
+
+      // otherwise steps are styled per narrative
+      } else {
+        styles = {
+          ...styles,
+          ...this.getNarrativeStyle(n.id)
+        }
+        return this._renderNarrativeStep(p1,p2,styles)
+      }
+    }
+
+  }
+
+  _renderNarrativeStep(p1, p2, styles) {
+    const { stroke, strokeWidth, strokeDasharray, strokeOpacity } = styles
     return (
       <line
         className="narrative-step"
-        x1={x}
+        x1={p1.x}
         x2={p2.x}
-        y1={y}
+        y1={p1.y}
         y2={p2.y}
         markerStart="none"
         onClick={() => this.props.onSelectNarrative(n)}
         style={{
-          strokeWidth: this.getStrokeWidth(n, step),
+          strokeWidth,
-          strokeDasharray: this.getStrokeDashArray(n, step),
+          strokeDasharray,
-          strokeOpacity: this.getStrokeOpacity(n, step),
+          strokeOpacity,
-          stroke: this.getStroke(n, step)
+          stroke,
         }}
       >
       </line>
     )
+
   }
 
   renderNarrative(n) {
@@ -78,7 +98,7 @@ class MapNarratives extends React.Component {
 
     return (
       <g id={`narrative-${n.id.replace(/ /g,"_")}`} className="narrative">
-        {steps.map((s, idx) => this.renderNarrativeStep(n.steps, s, idx, n))}
+        {steps.map((s, idx) => this.renderNarrativeStep(idx, n))}
       </g>
     )
   }

src/components/Md.jsx

@@ -12,6 +12,9 @@ class Md extends React.Component {
     fetch(this.props.path)
       .then(resp => resp.text())
       .then(text => {
+        if (text.length <= 0)
+          throw new Error()
+
         this.setState({ md: marked(text) })
       })
       .catch(err => {
@@ -34,7 +37,7 @@ class Md extends React.Component {
 
 Md.propTypes = {
   loader: PropTypes.func,
-  unloader: PropTypes.func,
+  unloader: PropTypes.func.isRequired,
   path: PropTypes.string.isRequired
 }
 

src/components/SourceOverlay.jsx

@@ -7,15 +7,21 @@ import NoSource from './presentational/NoSource'
 // TODO: move render functions into presentational components
 
 function SourceOverlay ({ source, onCancel }) {
+  function renderError() {
+    return (
+      <NoSource failedUrls={["NOT ALL SOURCES AVAILABLE IN APPLICATION YET"]} />
+    )
+  }
+
   function renderImage(path) {
     return (
       <div className='source-image-container'>
-        <Img
+      <Img
-          className='source-image'
+      className='source-image'
-          src={path}
+      src={path}
-          loader={<Spinner />}
+      loader={<Spinner />}
-          unloader={<NoSource failedUrls={source.paths} />}
+      unloader={<NoSource failedUrls={source.paths} />}
-        />
+      />
       </div>
     )
   }
@@ -45,11 +51,6 @@ function SourceOverlay ({ source, onCancel }) {
     )
   }
 
-  function renderError() {
-    return (
-      <NoSource failedUrls={["NOT ALL SOURCES AVAILABLE IN APPLICATION YET"]} />
-    )
-  }
 
   function renderNoSupport(ext) {
     return (

src/components/Toolbar.jsx

@@ -29,7 +29,7 @@ class Toolbar extends React.Component {
   }
 
   renderSearch() {
-    if (this.props.features.USE_SEARCH) {
+    if (process.env.features.USE_SEARCH) {
       return (
         <TabPanel>
           <Search
@@ -70,7 +70,7 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarTagPanel() {
-    if (this.props.features.USE_TAGS &&
+    if (process.env.features.USE_TAGS &&
       this.props.tags.children) {
       return (
         <TabPanel>

src/reducers/schema/eventSchema.js

@@ -16,6 +16,9 @@ const eventSchema = Joi.object().keys({
     tags:             Joi.string().allow(''),
     comments:         Joi.string().allow(''),
     timestamp:        Joi.string().required(),
+
+    // nested
+    narrative___stepStyles: Joi.array(),
 });
 
 export default eventSchema;

src/store/initial.js

@@ -89,10 +89,6 @@ const initial = {
         duration: 10,
         active: false
       }],
-    features: {
-      USE_TAGS: process.env.features.USE_TAGS,
-      USE_SEARCH: process.env.features.USE_SEARCH
-    },
     flags: {
       isFetchingDomain: false,
       isFetchingSources: false,
@@ -120,16 +116,22 @@ const initial = {
 
       narratives: {
         default: {
-          style: 'solid',                  // ['dotted', 'solid']
+          opacity: 0.9,
-          opacity: 0.9,                     // range between 0 and 1
+          stroke: 'red',
-          stroke: 'red',               // Any hex or rgb code
           strokeWidth: 3
         },
         narrative_1: {
-          style: 'solid',                  // ['dotted', 'solid']
+          opacity: 0.4,
-          opacity: 0.4,                     // range between 0 and 1
+          stroke: '#f18f01',
-          stroke: '#f18f01',               // Any hex or rgb code
           strokeWidth: 3
+        },
+        // process.env.features.NARRATIVE_STEP_STYLES
+        stepStyles: {
+          Physical: {
+            stroke: 'yellow',
+            strokeWidth: 3,
+            opacity: 0.9,
+          }
         }
       }
     },

webpack.config.js

@@ -1,8 +1,6 @@
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const userConfig = require('./config');
-const userConfigJSON = {};
 
 const devMode = process.env.NODE_ENV !== 'production';
 const path = require('path');
@@ -10,8 +8,16 @@ const path = require('path');
 const APP_DIR = path.resolve(__dirname, './src');
 const BUILD_DIR = path.resolve(__dirname, './build');
 
-for (const k in userConfig) {
+/** env variables from config.js */
-  userConfigJSON[k] = JSON.stringify(userConfig[k]);
+const envConfig = require('./config');
+const userConfig = {}
+const userFeatures = {}
+for (const k in envConfig) {
+  userConfig[k] = JSON.stringify(envConfig[k]);
+}
+
+for (const k in envConfig['features']) {
+  userFeatures[k] = JSON.stringify(envConfig['features'][k])
 }
 
 const config = {
@@ -59,14 +65,9 @@ const config = {
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
-        ...userConfigJSON,
+        ...userConfig,
         'NODE_ENV': JSON.stringify('production'),
-        'features': {
+        'features': userFeatures
-          'USE_TAGS': JSON.stringify(userConfig.features.USE_TAGS),
-          'USE_SEARCH': JSON.stringify(userConfig.features.USE_SEARCH),
-          'USE_SITES': JSON.stringify(userConfig.features.USE_SITES),
-          'USE_SOURCES': JSON.stringify(userConfig.features.USE_SOURCES)
-        }
       }
     }),
     new MiniCssExtractPlugin({