Add "end of narrative" slide to blocks.

Previously, there was a disconnect between the redux state's storage of narrative blocks, and the display of a "end of narrative" (EON) slide, which wasn't part of the blocks. PR1016 attempted to add a URL query to represent the EON, which proved problematic as we had a `blockIdx` outside of the range of the underlying blocks structure. Here I take a different approach, by having auspice add the EON as a "normal" block on JSON parsing. Thus, we have a URL query etc without introducing lots of edge cases.
nextstrain · Apr 19, 2020 · 18190a5 · 18190a5
1 parent 2e78b0e
commit 18190a5
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 46 deletions.
diff --git a/src/actions/recomputeReduxState.js b/src/actions/recomputeReduxState.js
@@ -703,6 +703,7 @@ export const createStateFromQueryOrJSONs = ({
   only displaying the page number (e.g. ?n=3), but we can look up what (hidden)
   URL query this page defines via this information */
   if (narrativeBlocks) {
+    addEndOfNarrativeBlock(narrativeBlocks);
     narrative = narrativeBlocks;
     let n = parseInt(query.n, 10) || 0;
     /* If the query has defined a block which doesn't exist then default to n=0 */
@@ -830,3 +831,12 @@ export const createTreeTooState = ({
   // }
   return {tree, treeToo, controls};
 };
+
+function addEndOfNarrativeBlock(narrativeBlocks) {
+  const lastContentSlide = narrativeBlocks[narrativeBlocks.length-1];
+  const endOfNarrativeSlide = Object.assign({}, lastContentSlide, {
+    __html: undefined,
+    isEndOfNarrativeSlide: true
+  });
+  narrativeBlocks.push(endOfNarrativeSlide);
+}
diff --git a/src/components/narrative/MobileNarrativeDisplay.js b/src/components/narrative/MobileNarrativeDisplay.js
@@ -55,7 +55,6 @@ class MobileNarrativeDisplay extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showingEndOfNarrativePage: false,
       bannerHeight: BANNER_HEIGHT,
       contentHeight: window.innerHeight - 2*BANNER_HEIGHT
     };
@@ -65,11 +64,8 @@ class MobileNarrativeDisplay extends React.Component {
     };
 
     this.goToNextPage = () => {
-      if (this.state.showingEndOfNarrativePage) return; // no-op
-
       if (this.props.currentInFocusBlockIdx+1 === this.props.blocks.length) {
-        this.setState({showingEndOfNarrativePage: true});
-        return;
+        return; // no-op
       }
 
       this._goToPage(this.props.currentInFocusBlockIdx+1);
@@ -81,7 +77,6 @@ class MobileNarrativeDisplay extends React.Component {
     };
 
     this._goToPage = (idx) => {
-      this.setState({ showingEndOfNarrativePage: false });
 
       // TODO: this `if` statement should be moved to the `changePage` function or similar
       if (this.props.blocks[idx] && this.props.blocks[idx].mainDisplayMarkdown) {
@@ -237,8 +232,7 @@ class MobileNarrativeDisplay extends React.Component {
         style={{height: `${progressHeight}px`}}
       >
         {this.props.blocks.map((b, i) => {
-          const d = (!this.state.showingEndOfNarrativePage) &&
-            this.props.currentInFocusBlockIdx === i ?
+          const d = this.props.currentInFocusBlockIdx === i ?
             "14px" : "6px";
           return (
             <ProgressButton
@@ -253,14 +247,12 @@ class MobileNarrativeDisplay extends React.Component {
 
   render() {
 
-    if (this.state.showingEndOfNarrativePage) {
-      return this.renderEndOfNarrative();
-
-    } else if (this.props.currentInFocusBlockIdx === 0) {
+    if (this.props.currentInFocusBlockIdx === 0) {
       return this.renderStartOfNarrative();
+    } else if (this.props.currentInFocusBlockIdx !== this.props.blocks.length-1) {
+      return this.renderMiddleOfNarrative();
     }
-
-    return this.renderMiddleOfNarrative();
+    return this.renderEndOfNarrative();
   }
 }
 

diff --git a/src/components/narrative/index.js b/src/components/narrative/index.js
@@ -39,20 +39,11 @@ const explanationParagraph=`
 class Narrative extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {showingEndOfNarrativePage: false};
     this.exitNarrativeMode = () => {
       this.props.dispatch(changePage({ path: this.props.blocks[0].dataset, query: true }));
     };
     this.changeAppStateViaBlock = (reactPageScrollerIdx) => {
-      const idx = reactPageScrollerIdx-1;
-      if (idx === this.props.blocks.length) {
-        this.setState({showingEndOfNarrativePage: true});
-        return;
-      }
-
-      if (this.state.showingEndOfNarrativePage) {
-        this.setState({showingEndOfNarrativePage: false});
-      }
+      const idx = reactPageScrollerIdx-1; // now same coords as `blockIdx`
 
       if (this.props.blocks[idx].mainDisplayMarkdown) {
         this.props.dispatch(EXPERIMENTAL_showMainDisplayMarkdown({
@@ -72,7 +63,7 @@ class Narrative extends React.Component {
 
     };
     this.goToNextSlide = () => {
-      if (this.state.showingEndOfNarrativePage) return; // no-op
+      if (this.props.currentInFocusBlockIdx === this.props.blocks.length-1) return; // no-op
       this.reactPageScroller.goToPage(this.props.currentInFocusBlockIdx+1);
     };
     this.goToPreviousSlide = () => {
@@ -123,8 +114,7 @@ class Narrative extends React.Component {
         role="navigation"
       >
         {this.props.blocks.map((b, i) => {
-          const d = (!this.state.showingEndOfNarrativePage) &&
-            this.props.currentInFocusBlockIdx === i ?
+          const d = this.props.currentInFocusBlockIdx === i ?
             "14px" : "6px";
           return (<ProgressButton
             key={i}
@@ -136,7 +126,26 @@ class Narrative extends React.Component {
     );
   }
   renderBlocks() {
-    const ret = this.props.blocks.map((b, i) => {
+    return this.props.blocks.map((b, i) => {
+
+      if (b.isEndOfNarrativeSlide) {
+        return (
+          <EndOfNarrative key="EON" id="EndOfNarrative">
+            <h1>END OF NARRATIVE</h1>
+            <a style={{...linkStyles}}
+              onClick={() => this.reactPageScroller.goToPage(0)}
+            >
+              Scroll back to the beginning
+            </a>
+            <br />
+            <a style={{...linkStyles}}
+              onClick={this.exitNarrativeMode}
+            >
+              Leave the narrative & explore the data yourself
+            </a>
+          </EndOfNarrative>
+        );
+      }
 
       const __html = i === 0 ?
         explanationParagraph + b.__html : // inject explanation to opening block
@@ -157,23 +166,6 @@ class Narrative extends React.Component {
         />
       );
     });
-    ret.push((
-      <EndOfNarrative key="EON" id="EndOfNarrative">
-        <h1>END OF NARRATIVE</h1>
-        <a style={{...linkStyles}}
-          onClick={() => this.reactPageScroller.goToPage(0)}
-        >
-          Scroll back to the beginning
-        </a>
-        <br />
-        <a style={{...linkStyles}}
-          onClick={this.exitNarrativeMode}
-        >
-          Leave the narrative & explore the data yourself
-        </a>
-      </EndOfNarrative>
-    ));
-    return ret;
   }
   render() {
     if (!this.props.loaded) {return null;}
@@ -186,7 +178,7 @@ class Narrative extends React.Component {
         <OpacityFade position="top" topHeight={narrativeNavBarHeight + progressHeight}/>
         <OpacityFade position="bottom"/>
         {this.props.currentInFocusBlockIdx !== 0 ? this.renderChevron(true) : null}
-        {!this.state.showingEndOfNarrativePage ? this.renderChevron(false) : null}
+        {this.props.currentInFocusBlockIdx !== this.props.blocks.length-1 ? this.renderChevron(false) : null}
         <ReactPageScroller
           ref={(c) => {this.reactPageScroller = c;}}
           containerHeight={this.props.height-progressHeight}