Feat/debug narratives

CHANGELOG.md

@@ -2,9 +2,12 @@
 title: Changelog
 ---
 
-## version 2.40.1 - 2022/11/07
+* A narratives debugger has been added at `/edit/narratives`.
+See [PR #1590](https://github.com/nextstrain/auspice/pull/1590) or the new [Narratives Tutorial](https://docs.nextstrain.org/en/latest/tutorials/narratives-how-to-write.html) for more details.
+Note: this functionality will prevent auspice from viewing a _dataset_ JSON named `edit_narratives.json`.
 
 
+## version 2.40.1 - 2022/11/07
 * Fixed a bug where downloaded Newick trees may be empty - often this happens when there is no newick representation for the tree being displayed and in these cases a warning notification is shown. See [PR #1591](https://github.com/nextstrain/auspice/pull/1591) for more.
 * Fixed a bug where branch labels prevented clicking on the underlying branches. See [PR #1584](https://github.com/nextstrain/auspice/pull/1584) for more.
 

narratives/invalid_1.md

@@ -0,0 +1,3 @@
+[First slide](https://nextstrain.org/zika)
+
+Note that we have no YAML frontmatter, so this is not a valid narrative!

narratives/invalid_2.md

@@ -0,0 +1,8 @@
+---
+foo: bar
+---
+
+[First slide](https://nextstrain.org/zika)
+
+Minimal YAML frontmatter - too minimal ;)
+

src/actions/loadData.js

@@ -240,7 +240,7 @@ export function addEndOfNarrativeBlock(narrativeBlocks) {
  * This function returns `Dataset` objects for each of the different datasets in a narrative.
  * Note: "initial": starting page, potentially different to frontmatter
  */
-function parseNarrativeDatasets(blocks, query) {
+export function parseNarrativeDatasets(blocks, query) {
   let [datasets, initialNames, frontmatterNames] = [{}, [], []];
   const initialBlockIdx = getNarrativePageFromQuery(query, blocks);
   blocks.forEach((block, idx) => {

src/actions/navigation.js

@@ -11,6 +11,9 @@ import { errorNotification } from "./notifications";
  */
 export const chooseDisplayComponentFromURL = (url) => {
   const parts = url.toLowerCase().replace(/^\/+/, "").replace(/\/+$/, "").split("/");
+  // todo - use URL() not the above code, but `url` is not actually the URL so...
+
+  if (isNarrativeEditor(parts)) return "debugNarrative";
   if (
     !parts.length ||
     (parts.length === 1 && parts[0] === "") ||
@@ -131,3 +134,13 @@ export const goTo404 = (errorMessage) => ({
   errorMessage,
   pushState: true
 });
+
+/** The narratives editor is currently only a debugger (and named as such internally)
+ * however over time editing capability will be built out. The current proposal is for
+ * pathnames such as:
+ * /edit/narratives (the drag & drop interface, implemented here)
+ * /edit/{pathname} (future, not-yet-implemented functionality)
+ */
+function isNarrativeEditor(parts) {
+  return (parts.length===2 && parts[0]==="edit" && parts[1]==="narratives");
+}

src/components/main/index.js

@@ -63,6 +63,13 @@ class Main extends React.Component {
     };
     analyticsNewPage();
     this.toggleSidebar = this.toggleSidebar.bind(this);
+    this.eventListenerForFilesDropped = (e) => {
+      e.preventDefault();
+      return this.props.dispatch(handleFilesDropped(e.dataTransfer.files));
+    };
+    this.eventListenerForFilesDragged = (e) => {
+      e.preventDefault();
+    };
   }
   static propTypes = {
     dispatch: PropTypes.func.isRequired
@@ -73,11 +80,12 @@ class Main extends React.Component {
     }
   }
   componentDidMount() {
-    document.addEventListener("dragover", (e) => {e.preventDefault();}, false);
-    document.addEventListener("drop", (e) => {
-      e.preventDefault();
-      return this.props.dispatch(handleFilesDropped(e.dataTransfer.files));
-    }, false);
+    document.addEventListener("dragover", this.eventListenerForFilesDragged, false);
+    document.addEventListener("drop", this.eventListenerForFilesDropped, false);
+  }
+  componentWillUnmount() {
+    document.removeEventListener("dragover", this.eventListenerForFilesDragged);
+    document.removeEventListener("drop", this.eventListenerForFilesDropped);
   }
   toggleSidebar() {
     this.props.dispatch({type: TOGGLE_SIDEBAR, value: !this.props.sidebarOpen});

src/components/narrativeEditor/NarrativeViewHeader.js

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+import React from "react";
+import { connect } from "react-redux";
+import { calcStyles } from "../main/utils";
+
+/** The escape hatch to get back to debugging.
+* This is complicated because auspice uses a lot of absolute CSS positioning, and
+* attempting to unravel that is more trouble than it's worth at the moment.
+* Currently it's designed to render over the top of the (narrative) sidebar,
+* thus obscuring the title etc, which I think is an acceptable MVP. Eventually
+* we want lots of options here so maybe a hamburger menu etc is necessary?
+* There's plenty of improvements to be made, and perhaps there's even an entirely
+* different escape hatch we could use.
+*/
+
+const OuterContainer = styled.div`
+ min-height: 50px; /* looks good with the nextstrain.org header */
+ background-color: #fd8d3c; /* same as "experimental" banner */
+ color: white; /* same as "experimental" banner */
+ font-size: 24px;
+ position: absolute;
+ display: flex; /* so we can vertically center the text */
+ flex-direction: column;
+ justify-content: center;
+ z-index: 100;
+ top: 0;
+ width: ${(props) => props.width+"px"};
+ max-width: ${(props) => props.width+"px"};
+ overflow-y: auto;
+ overflow-x: hidden;
+`;
+
+const InnerContainer = styled.div`
+  text-align: center;
+  cursor: pointer;
+`;
+
+@connect((state) => ({
+  displayNarrative: state.narrative.display,
+  browserDimensions: state.browserDimensions.browserDimensions
+}))
+class NarrativeViewHeader extends React.Component {
+  render() {
+    /* mobile display doesn't work well with this component, but then the whole editing functionality doesn't
+    play nicely with mobile (and I don't really see how it can...) */
+    const {sidebarWidth} = calcStyles(this.props.browserDimensions, this.props.displayNarrative, true, false);
+    // todo - can we surround this with an error boundary?
+    return (
+      <OuterContainer width={sidebarWidth}>
+        <InnerContainer style={{cursor: "pointer"}} onClick={() => this.props.setDisplayNarrative(false)}>
+          Return to debugging window
+        </InnerContainer>
+      </OuterContainer>
+    );
+  }
+}
+
+export default NarrativeViewHeader;