Style narrative based the one selected

src/components/Toolbar.jsx

@@ -7,7 +7,7 @@ import Search from './Search.jsx';
 import TagListPanel from './TagListPanel.jsx';
 import ToolbarBottomActions from './ToolbarBottomActions.jsx';
 import copy from '../js/data/copy.json';
-import { isNotNullNorUndefined } from '../js/utilities.js';
+import { isNotNullNorUndefined, trimAndEllipse } from '../js/utilities.js';
 
 class Toolbar extends React.Component {
 
@@ -66,7 +66,7 @@ class Toolbar extends React.Component {
             <div className="panel-action action">
               <button style={{ backgroundColor: '#000' }} onClick={() => { this.goToNarrative(narr); }}>
                 <p>{narr.label}</p>
-                <p><small>{narr.description}</small></p>
+                <p><small>{trimAndEllipse(narr.description, 120)}</small></p>
               </button>
             </div>
           )
@@ -100,6 +100,7 @@ class Toolbar extends React.Component {
 
     return (
       <div className={classes} onClick={() => { this.toggleTab(tabNum); }}>
+        <i className="material-icons">timeline</i>
         <div className="tab-caption">{label}</div>
       </div>
     );

src/js/map/map.js

@@ -165,7 +165,7 @@ Stop and start the development process in terminal after you have added your tok
       .y(d => getCoords(d).y + transformY);
 
     g.selectAll('.narrative')
-      .attr('d', sequenceLine);
+      .attr('d', d => sequenceLine(d.steps));
   }
 
   lMap.on("zoomend viewreset moveend", updateSVG);
@@ -365,8 +365,8 @@ Stop and start the development process in terminal after you have added your tok
   }
 
   function renderNarratives() {
-    const narrativesDom = g.selectAll('.narrative')
-      .data(domain.narratives.map(d => d.steps))
+    const narrativesDom = svg.selectAll('.narrative')
+      .data(domain.narratives)
 
     narrativesDom
       .exit()
@@ -375,40 +375,45 @@ Stop and start the development process in terminal after you have added your tok
     narrativesDom
       .enter().append('path')
       .attr('class', 'narrative')
-      .attr('d', sequenceLine)
+      .attr('d', d => sequenceLine(d.steps))
       .style('stroke-width', d => {
-        if (!d[0]) return 0;
-        // Note: [0] is a non-elegant way to get the narrative id out of the first
-        // event in the narrative sequence
-        const styleProps = getNarrativeStyle(d[0].narrative);
+        if (!d) return 0;
+        const styleProps = getNarrativeStyle(d.id);
         return styleProps.strokeWidth;
       })
       .style('stroke-dasharray', d => {
-        if (!d[0]) return 'none';
-        const styleProps = getNarrativeStyle(d[0].narrative);
+        if (!d) return 'none';
+        const styleProps = getNarrativeStyle(d.id);
         return (styleProps.style === 'dotted') ? "2px 5px" : 'none';
       })
       .style('stroke', d => {
-        if (!d[0]) return 'none';
-        const styleProps = getNarrativeStyle(d[0].narrative);
+        if (!d || app.narrative === null) return 'none';
+        if (d.id !== app.narrative.id) return '#232323';
+        const styleProps = getNarrativeStyle(d.id);
         return styleProps.stroke;
       })
       .style('stroke-opacity', d => {
         if (app.narrative === null) return 0;
-        if (!d[0] || !d[0].narratives.find(n => n === app.narrative.id)) return 0.2;
+        if (!d || d.id !== app.narrative.id) return 0.2;
         return 1;
       })
-      .style('fill', 'none');
+      .style('fill', 'none')
+      .style('cursor', 'pointer')
+      .on('click', d => {
+        console.log(d)
+      });
 
     narrativesDom
+      .attr('d', d => sequenceLine(d.steps))
       .style('stroke', d => {
-        if (!d[0]) return 'none';
-        const styleProps = getNarrativeStyle(d[0].narrative);
+        if (!d || app.narrative === null) return 'none';
+        if (d.id !== app.narrative.id) return '#232323';
+        const styleProps = getNarrativeStyle(d.id);
         return styleProps.stroke;
       })
       .style('stroke-opacity', d => {
         if (app.narrative === null) return 0;
-        if (!d[0] || !d[0].narratives.find(n => n === app.narrative.id)) return 0.2;
+        if (!d || d.id !== app.narrative.id) return 0.2;
         return 1;
       })
   }
@@ -446,8 +451,8 @@ Stop and start the development process in terminal after you have added your tok
   */
   function renderDomain () {
     renderSites();
-    renderNarratives();
     renderEvents();
+    renderNarratives();
   }
   function renderSelectedAndHighlight () {
     renderSelected();

src/js/utilities.js

@@ -44,6 +44,13 @@ export function capitalizeFirstLetter(string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
+export function trimAndEllipse(string, stringNum) {
+  if (string.length > stringNum) {
+    return string.substring(0, 120) + '...'
+  }
+  return string;
+}
+
 /**
 * Return a Date object given a datetime string of the format: "2016-09-10T07:00:00"
 * @param {string} datetime

src/scss/map.scss

@@ -32,13 +32,17 @@
   &.narrative-mode {
     left: 0;
   }
-  
+
   .event {
     fill: $event_default;
     cursor: pointer;
     opacity: 0.45;
   }
 
+  .narrative {
+    cursor: pointer;
+  }
+
   .link {
     stroke: $midgrey;
     fill: none;

src/scss/narrativecard.scss

@@ -29,6 +29,13 @@ NARRATIVE INFO
     font-weight: 100;
   }
 
+  h6 {
+    margin: 10px 0;
+    i {
+      font-size: $normal;
+    }
+  }
+
   p {
     font-family: 'Lato', 'Helvetica', sans-serif;
     font-size: $normal;

src/scss/toolbar.scss

@@ -168,6 +168,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
     height: 60px;
     width: 110px;
     padding: 5px 0 5px 0;
@@ -454,7 +455,7 @@
       height: 140px;
       line-height: 140px;
       width: 100%;
-      padding: 0;
+      padding: 10px;
       border: 1px solid $offwhite;
       background-size: 100%;
       color: $offwhite;
@@ -470,6 +471,10 @@
         transition: 0.2s ease;
         letter-spacing: 0.15em;
       }
+
+      p {
+        text-transform: none;
+      }
     }
 
     /*&:first-child {
@@ -515,10 +520,10 @@
       height: 60px;
       padding: 0;
 
-      .tab-caption {
+      /*.tab-caption {
         transition: 0.2s ease;
         opacity: 0;
-      }
+      }*/
 
       &:hover {
         .tab-caption {