Restore download modal functionality. Closes #699

As of auspice v1.35 the download modal was broken. This restores the previous functionality, and implements an Error Boundary to prevent app crashes in the future should there be an error here.

CHANGELOG.md

@@ -1,5 +1,6 @@
-## version 1.35.3 - 2019/01/25
+* Restore download modal functionality. [Issue 699](https://github.com/nextstrain/auspice/issues/699)
 
+## version 1.35.3 - 2019/01/25
 * Show useful help message if port is in use. [See PR 694](https://github.com/nextstrain/auspice/pull/694)
 * Fixed a bug where URL query strings may become corrupted in certain cases. [See PR 695](https://github.com/nextstrain/auspice/pull/695)
 * Restore (deprecated) "npm run {server,dev}" commands. [See PR 692](https://github.com/nextstrain/auspice/pull/692)

src/components/controls/choose-layout.js

@@ -1,8 +1,7 @@
 import React from "react";
 import PropTypes from 'prop-types';
 import { connect } from "react-redux";
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import * as icons from "../framework/svg-icons";
 import { CHANGE_LAYOUT } from "../../actions/types";
 import { analyticsControlsEvent } from "../../util/googleAnalytics";

src/components/controls/styles.js

@@ -1,7 +1,4 @@
-import React from "react";
 import styled from 'styled-components';
-import ReactSelect from "react-select";
-import sidebarTheme from "../main/styles";
 
 /* All of these styled components are for the controls, which is part of the sidebar.
  * The sidebar is is wrapped by a <ThemeProvider> so you can access

src/components/download/downloadModal.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Mousetrap from "mousetrap";
 import { connect } from "react-redux";
+import { withTheme } from 'styled-components';
 import { DISMISS_DOWNLOAD_MODAL } from "../../actions/types";
 import { materialButton, extraLightGrey, infoPanelStyles } from "../../globalStyles";
 import { stopProp } from "../tree/infoPanels/click";
@@ -10,6 +11,10 @@ import * as icons from "../framework/svg-icons";
 import { getAcknowledgments} from "../framework/footer";
 import { createSummary } from "../info/info";
 
+const RectangularTreeIcon = withTheme(icons.RectangularTree);
+const PanelsGridIcon = withTheme(icons.PanelsGrid);
+const MetaIcon = withTheme(icons.Meta);
+
 const dataUsage = [
   `The data presented here is intended to rapidly disseminate analysis of important pathogens.
   Unpublished data is included with permission of the data generators, and does not impact their right to publish.`,
@@ -175,13 +180,12 @@ class DownloadModal extends React.Component {
   downloadButtons() {
     const filePrefix = this.getFilePrefix();
     const iconWidth = 25;
-    const iconStroke = extraLightGrey;
     const buttons = [
-      ["Tree (newick)", (<icons.RectangularTree width={iconWidth} stroke={iconStroke} />), () => helpers.newick(this.props.dispatch, filePrefix, this.props.nodes[0], false)],
-      ["TimeTree (newick)", (<icons.RectangularTree width={iconWidth} stroke={iconStroke} />), () => helpers.newick(this.props.dispatch, filePrefix, this.props.nodes[0], true)],
-      ["Strain Metadata (TSV)", (<icons.Meta width={iconWidth} stroke={iconStroke} />), () => helpers.strainTSV(this.props.dispatch, filePrefix, this.props.nodes, this.props.treeAttrs)],
-      ["Author Metadata (TSV)", (<icons.Meta width={iconWidth} stroke={iconStroke} />), () => helpers.authorTSV(this.props.dispatch, filePrefix, this.props.metadata, this.props.tree)],
-      ["Screenshot (SVG)", (<icons.PanelsGrid width={iconWidth} stroke={iconStroke} />), () => helpers.SVG(this.props.dispatch, filePrefix, this.props.panelsToDisplay, this.props.panelLayout, this.makeTextStringsForSVGExport())]
+      ["Tree (newick)", (<RectangularTreeIcon width={iconWidth} selected />), () => helpers.newick(this.props.dispatch, filePrefix, this.props.nodes[0], false)],
+      ["TimeTree (newick)", (<RectangularTreeIcon width={iconWidth} selected />), () => helpers.newick(this.props.dispatch, filePrefix, this.props.nodes[0], true)],
+      ["Strain Metadata (TSV)", (<MetaIcon width={iconWidth} selected />), () => helpers.strainTSV(this.props.dispatch, filePrefix, this.props.nodes, this.props.treeAttrs)],
+      ["Author Metadata (TSV)", (<MetaIcon width={iconWidth} selected />), () => helpers.authorTSV(this.props.dispatch, filePrefix, this.props.metadata, this.props.tree)],
+      ["Screenshot (SVG)", (<PanelsGridIcon width={iconWidth} selected />), () => helpers.SVG(this.props.dispatch, filePrefix, this.props.panelsToDisplay, this.props.panelLayout, this.makeTextStringsForSVGExport())]
     ];
     const buttonTextStyle = Object.assign({}, materialButton, {backgroundColor: "rgba(0,0,0,0)", paddingLeft: "10px", color: "white"});
     return (

src/components/framework/svg-icons.js

@@ -78,7 +78,8 @@ export const UnrootedTree = ({theme, selected, width}) => {
   );
 };
 
-export const Meta = ({stroke = "black", width = 30}) => {
+export const Meta = ({theme, selected, width}) => {
+  const stroke = selected ? theme.selectedColor : theme.unselectedColor;
   return (
     <svg width={width} height={width + 5}>
       <g transform="translate(0,7)">
@@ -96,7 +97,6 @@ export const Meta = ({stroke = "black", width = 30}) => {
   );
 };
 
-
 export const PanelsGrid = ({theme, selected, width}) => {
   const stroke = selected ? theme.selectedColor : theme.unselectedColor;
   return (

src/components/main/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from 'prop-types';
 import { connect } from "react-redux";
+import { ThemeProvider } from 'styled-components';
 import SidebarToggle from "../framework/sidebar-toggle";
 import { Frequencies } from "../frequencies";
 import { Entropy } from "../entropy";
@@ -17,7 +18,8 @@ import { calcUsableWidth } from "../../util/computeResponsive";
 import { renderNarrativeToggle } from "../narrative/renderNarrativeToggle";
 import { Sidebar } from "./sidebar";
 import { calcPanelDims, calcStyles } from "./utils";
-import { PanelsContainer } from "./styles";
+import { PanelsContainer, sidebarTheme } from "./styles";
+import ErrorBoundary from "../../util/errorBoundry";
 
 @connect((state) => ({
   panelsToDisplay: state.controls.panelsToDisplay,
@@ -66,7 +68,11 @@ class Main extends React.Component {
     return (
       <span>
         <AnimationController/>
-        <DownloadModal/>
+        <ErrorBoundary showNothing>
+          <ThemeProvider theme={sidebarTheme}>
+            <DownloadModal/>
+          </ThemeProvider>
+        </ErrorBoundary>
         <SidebarToggle
           sidebarOpen={this.state.sidebarOpen}
           mobileDisplay={this.state.mobileDisplay}

src/util/errorBoundry.js

@@ -20,6 +20,9 @@ class ErrorBoundary extends React.Component {
   render() {
     if (this.state.hasError) {
       // You can render any custom fallback UI
+      if (this.props.showNothing) {
+        return null;
+      }
       return (<h1>Something went wrong.</h1>);
     }