Add more visible toggle between narrative & interactive modes

src/components/app.js

@@ -20,13 +20,14 @@ import filesDropped from "../actions/filesDropped";
 import Narrative from "./narrative";
 import AnimationController from "./framework/animationController";
 import { calcUsableWidth, computeResponsive } from "../util/computeResponsive";
+import { renderNarrativeToggle } from "./narrative/renderNarrativeToggle";
 
 const nextstrainLogo = require("../images/nextstrain-logo-small.png");
 
 /* <Contents> contains the header, tree, map, footer components etc.
  * here is where the panel sizes are decided, as well as which components are displayed.
  */
-const Contents = ({sidebarOpen, showSpinner, styles, availableWidth, availableHeight, panels, grid, narrative, frequenciesLoaded}) => {
+const Contents = ({showSpinner, styles, availableWidth, availableHeight, panels, grid, narrativeIsLoaded, narrativeIsDisplayed, frequenciesLoaded, dispatch}) => {
   if (showSpinner) {
     return (<img className={"spinner"} src={nextstrainLogo} alt="loading" style={{marginTop: `${availableHeight / 2 - 100}px`}}/>);
   }
@@ -36,7 +37,7 @@ const Contents = ({sidebarOpen, showSpinner, styles, availableWidth, availableHe
   let bigWidthFraction = grid ? 0.5 : 1;
   let chartHeightFraction = 0.36;
   let bigHeightFraction = grid ? 0.64 : 0.88;
-  if (narrative) {
+  if (narrativeIsDisplayed) {
     /* heights */
     const numThinPanels = true + show("entropy") + show("frequencies") - 1;
     if (numThinPanels === 0) {
@@ -65,12 +66,13 @@ const Contents = ({sidebarOpen, showSpinner, styles, availableWidth, availableHe
   /* TODO */
   return (
     <div style={styles}>
-      {narrative ? null : <Info width={calcUsableWidth(availableWidth, 1)} />}
+      {narrativeIsLoaded ? renderNarrativeToggle(dispatch, narrativeIsDisplayed) : null}
+      {narrativeIsDisplayed ? null : <Info width={calcUsableWidth(availableWidth, 1)} />}
       {show("tree") ? <Tree width={big.width} height={big.height} /> : null}
       {show("map") ? <Map width={big.width} height={big.height} justGotNewDatasetRenderNewMap={false} /> : null}
       {show("entropy") ? <Entropy width={chart.width} height={chart.height} /> : null}
       {show("frequencies") && frequenciesLoaded ? <Frequencies width={chart.width} height={chart.height} /> : null}
-      {narrative ? null : <Footer width={calcUsableWidth(availableWidth, 1)} />}
+      {narrativeIsDisplayed ? null : <Footer width={calcUsableWidth(availableWidth, 1)} />}
     </div>
   );
 };
@@ -208,34 +210,29 @@ class App extends React.Component {
         <div id="SidebarContainer" style={sidebarStyles}>
           <NavBar
             minified
-            dispatch={this.props.dispatch}
             mobileDisplay={this.state.mobileDisplay}
             toggleHandler={() => {this.setState({sidebarOpen: !this.state.sidebarOpen});}}
             narrativeTitle={this.props.displayNarrative ? this.props.narrativeTitle : false}
             width={sidebarWidth}
           />
           {this.props.displayNarrative ?
-            (<Narrative
+            <Narrative
               height={availableHeight - narrativeNavBarHeight}
               width={sidebarStyles.width}
-            />) :
-            (<Controls
-              mapOn={mapOn}
-              goBackToNarratives={this.props.narrativeIsLoaded && !this.props.displayNarrative ?
-                () => this.props.dispatch({type: TOGGLE_NARRATIVE, display: true}) :
-                null}
-            />)
+            /> :
+            <Controls mapOn={mapOn}/>
           }
         </div>
         <Contents
-          sidebarOpen={this.state.sidebarOpen}
           styles={contentStyles}
           showSpinner={!this.props.treeLoaded || !this.props.metadataLoaded}
           availableWidth={availableWidth}
           availableHeight={availableHeight}
           panels={this.props.panelsToDisplay}
           grid={this.props.panelLayout === "grid"}
-          narrative={this.props.displayNarrative}
+          narrativeIsLoaded={this.props.narrativeIsLoaded}
+          narrativeIsDisplayed={this.props.displayNarrative}
+          dispatch={this.props.dispatch}
           frequenciesLoaded={this.props.frequenciesLoaded}
         />
         <Overlay

src/components/controls/controls.js

@@ -13,10 +13,9 @@ import MapAnimationControls from "./map-animation";
 import PanelToggles from "./panel-toggles";
 import SearchStrains from "./search";
 import ToggleTangle from "./toggle-tangle";
-import { materialButton } from "../../globalStyles";
 
 
-const Controls = ({mapOn, goBackToNarratives}) => (
+const Controls = ({mapOn}) => (
   <div
     style={{
       display: "flex",
@@ -33,12 +32,6 @@ const Controls = ({mapOn, goBackToNarratives}) => (
     }}
   >
 
-    {goBackToNarratives ? (
-      <button style={{...materialButton, textAlign: "left"}} onClick={goBackToNarratives}>
-        {"Return to Narrative"}
-      </button>
-    ) : null}
-
     <Header text="Dataset"/>
     <ChooseDataset/>
 

src/components/narrative/index.js

@@ -143,10 +143,10 @@ class Narrative extends React.Component {
           END OF NARRATIVE
         </h3>
         <div style={{...linkStyles, textAlign: "center"}} onClick={() => this.reactPageScroller.goToPage(0)}>
-          Click here to Scroll back to top
+          Scroll back to the beginning
         </div>
         <div style={{...linkStyles, textAlign: "center", marginTop: "10px"}} onClick={this.exitNarrativeMode}>
-          Click here to Exit narrative mode
+          Leave the narrative & explore the data yourself
         </div>
       </div>
     ));

src/components/narrative/renderNarrativeToggle.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { TOGGLE_NARRATIVE } from "../../actions/types";
+import { tabSingle, darkGrey } from "../../globalStyles";
+
+
+export const renderNarrativeToggle = (dispatch, narrativeIsDisplayed) => {
+  return (
+    <button
+      style={{
+        ...tabSingle,
+        fontSize: 14,
+        backgroundColor: "inherit",
+        zIndex: 100,
+        position: "fixed",
+        right: 5,
+        top: -1,
+        cursor: "pointer",
+        color: darkGrey
+      }}
+      onClick={() => dispatch({type: TOGGLE_NARRATIVE, display: !narrativeIsDisplayed})}
+    >
+      {narrativeIsDisplayed ? "explore the data yourself" : "return to the narrative"}
+    </button>
+  );
+};

src/components/navBar/index.js

@@ -3,7 +3,6 @@ import React from "react";
 import { normalNavBarHeight, narrativeNavBarHeight, titleColors } from "../../util/globals";
 import { darkGrey } from "../../globalStyles";
 import SidebarChevron from "../framework/sidebar-chevron";
-import { TOGGLE_NARRATIVE } from "../../actions/types";
 
 const logoPNG = require("../../images/nextstrain-logo-small.png");
 
@@ -90,42 +89,22 @@ const renderNarrativeTitle = (text, style) => (
   </div>
 );
 
-const renderViewInteractiveLink = (dispatch, style) => (
-  <div
-    key="viewinteractivedata"
-    style={style}
-    onClick={() => dispatch({type: TOGGLE_NARRATIVE, display: false})}
-  >
-    View interactive data
-  </div>
-);
-
-
-const NavBar = ({minified, mobileDisplay, toggleHandler, narrativeTitle, width, dispatch}) => {
+const NavBar = ({minified, mobileDisplay, toggleHandler, narrativeTitle, width}) => {
   const styles = getStyles({minified, narrative: !!narrativeTitle, width});
-  let links = [
-    renderLink("About", "/about",   styles.link),
-    renderLink("Docs",  "/docs",    styles.link),
-    renderLink("Blog",  "/blog",    styles.link)
-  ];
-  if (narrativeTitle) {
-    if (mobileDisplay) {
-      links = [renderViewInteractiveLink(dispatch, styles.link)];
-    } else {
-      links.push(renderViewInteractiveLink(dispatch, styles.link));
-    }
-  }
   return (
     <div id="NavBarContainer" style={styles.mainContainer}>
       <div style={styles.flexColumns}>
         <a id="Logo" style={styles.logo} href="/">
           <img alt="splashPage" width="40px" src={logoPNG}/>
         </a>
         {minified ? null : renderNextstrainTitle(styles.title)}
-        <div id="spacer" style={{flex: 5}}/>
+        <div style={{flex: 5}}/>
         <div style={styles.flexRows}>
           <div style={styles.flexColumns}>
-            {links}
+            <div style={{flex: 5}}/>
+            {renderLink("About", "/about",   styles.link)}
+            {renderLink("Docs",  "/docs",    styles.link)}
+            {renderLink("Blog",  "/blog",    styles.link)}
           </div>
           {narrativeTitle ? renderNarrativeTitle(narrativeTitle, styles.narrativeTitle) : null}
         </div>