Merge pull request #1260 from nextstrain/footer

Update footer and fine print

docs/customise-client/api.md

@@ -27,6 +27,9 @@ A useful reference may be the [customisation JSON file](https://github.com/nexts
 * `googleAnalyticsKey` You can specify a Google Analytics key to enable (some) analytics functionality. More documentation to come.
 * `serverAddress` Specify the address / prefix which the auspice client uses for API requests.
 
+
+> Please remember to make any modifications, including customisations described here, publicly available. See [the previous page](./index.rst) for more details.
+
 ---
 
 ### Sidebar Theme

docs/customise-client/index.rst

@@ -23,6 +23,12 @@ This is achieved by providing a JSON at build time to Auspice which defines the
 
 See the `client customisation API <api.html>`_ for the available options.
 
+AGPL Source Code Requirement
+============================
+
+Auspice is distributed under `AGPL 3.0 <https://www.gnu.org/licenses/agpl-3.0.en.html>`_.
+Any modifications made to the auspice source code, including build-time customisations as described here, must be made publicly available. 
+We ask that the "Powered by Nextstrain" text and link, rendered below the data visualisations, be maintained in all customised versions of auspice, in keeping with the spirit of scientific citations.
 
 
 .. toctree::

docs/server/index.rst

@@ -48,6 +48,12 @@ You can customise the default Auspice server by supplying your own handlers for
 See `the API documentation <../server/api.html#suppling-custom-handlers-to-the-auspice-server>`_ for how to define these and provide them to `auspice view`.
 
 
+AGPL Source Code Requirement
+============================
+
+Auspice is distributed under `AGPL 3.0 <https://www.gnu.org/licenses/agpl-3.0.en.html>`_.
+Any modifications made to the auspice source code, including the auspice server, must be made publicly available.
+
 Writing Your Own Custom Server
 ======================================
 

src/components/framework/fine-print.js

@@ -0,0 +1,129 @@
+import React from "react";
+import { connect } from "react-redux";
+import styled from 'styled-components';
+import { withTranslation } from "react-i18next";
+import { FaDownload } from "react-icons/fa";
+import { dataFont, medGrey, materialButton } from "../../globalStyles";
+import { TRIGGER_DOWNLOAD_MODAL } from "../../actions/types";
+import Flex from "./flex";
+import { version } from "../../version";
+import { publications } from "../download/downloadModal";
+
+const logoPNG = require("../../images/favicon.png");
+
+const dot = (
+  <span style={{marginLeft: 10, marginRight: 10}}>
+    •
+  </span>
+);
+
+export const FinePrintStyles = styled.div`
+  margin-left: 30px;
+  padding-bottom: 30px;
+  font-family: ${dataFont};
+  font-size: 15px;
+  font-weight: 300;
+  color: rgb(136, 136, 136);
+  line-height: 1.4;
+
+  .line {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #CCC;
+  }
+
+  .finePrint {
+    font-size: 14px;
+  }
+
+  .logoContainer {
+    padding: 1px 1px;
+    margin-right: 5px;
+    width: 24px;
+    cursor: pointer;
+  }
+
+  .logo {
+    margin-left: 1px;
+    margin-right: 1px;
+    margin-top: 1px;
+    margin-bottom: 3px;
+  }
+
+`;
+
+@connect((state) => {
+  return {
+    tree: state.tree,
+    metadata: state.metadata,
+    browserDimensions: state.browserDimensions.browserDimensions
+  };
+})
+class FinePrint extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    if (this.props.browserDimensions !== nextProps.browserDimensions) {
+      return true;
+    }
+    return false;
+  }
+
+  getUpdated() {
+    const { t } = this.props;
+    if (this.props.metadata.updated) {
+      return (<span>{t("Data updated")} {this.props.metadata.updated}</span>);
+    }
+    return null;
+  }
+  downloadDataButton() {
+    const { t } = this.props;
+    return (
+      <button
+        style={Object.assign({}, materialButton, {backgroundColor: "rgba(0,0,0,0)", color: medGrey, margin: 0, padding: 0})}
+        onClick={() => { this.props.dispatch({ type: TRIGGER_DOWNLOAD_MODAL }); }}
+      >
+        <FaDownload />
+        <span style={{position: "relative"}}>{" "+t("Download data")}</span>
+      </button>
+    );
+  }
+
+  render() {
+    if (!this.props.metadata || !this.props.tree.nodes) return null;
+    const width = this.props.width - 30; // need to subtract margin when calculating div width
+    return (
+      <FinePrintStyles>
+        <div style={{width: width}}>
+          <Flex className='finePrint'>
+            {this.getUpdated()}
+            {dot}
+            {this.downloadDataButton()}
+            {dot}
+            {"Auspice v" + version}
+          </Flex>
+          <div style={{height: "5px"}}/>
+          <Flex className='finePrint'>
+            {getCitation()}
+          </Flex>
+        </div>
+      </FinePrintStyles>
+    );
+  }
+}
+
+const WithTranslation = withTranslation()(FinePrint);
+export default WithTranslation;
+
+export function getCitation() {
+  return (
+    <span>
+      <a className='logoContainer' href="https://nextstrain.org">
+        <img alt="nextstrain.org" className='logo' width="24px" src={logoPNG}/>
+      </a>
+      {"Powered by Nextstrain ("}
+      <a href={publications.nextstrain.href} target="_blank" rel="noopener noreferrer">
+        {publications.nextstrain.author} <i>{publications.nextstrain.journal}</i>
+      </a>
+      {")"}
+    </span>
+  );
+}

src/components/framework/footer.js

@@ -2,28 +2,18 @@ import React, { Suspense, lazy } from "react";
 import { connect } from "react-redux";
 import styled from 'styled-components';
 import { withTranslation } from "react-i18next";
-import { FaDownload } from "react-icons/fa";
-import { dataFont, medGrey, materialButton } from "../../globalStyles";
-import { TRIGGER_DOWNLOAD_MODAL } from "../../actions/types";
+import { dataFont } from "../../globalStyles";
 import Flex from "./flex";
 import { applyFilter } from "../../actions/tree";
-import { version } from "../../version";
-import { publications } from "../download/downloadModal";
 import { isValueValid } from "../../util/globals";
 import hardCodedFooters from "./footer-descriptions";
 import { SimpleFilter } from "../info/filterBadge";
 
 const MarkdownDisplay = lazy(() => import("../markdownDisplay"));
 
-const dot = (
-  <span style={{marginLeft: 10, marginRight: 10}}>
-    •
-  </span>
-);
-
 const FooterStyles = styled.div`
   margin-left: 30px;
-  padding-bottom: 30px;
+  padding-bottom: 0px;
   font-family: ${dataFont};
   font-size: 15px;
   font-weight: 300;
@@ -103,10 +93,6 @@ const FooterStyles = styled.div`
     border-bottom: 1px solid #CCC;
   }
 
-  .finePrint {
-    font-size: 14px;
-  }
-
   .acknowledgments {
     margin-top: 10px;
   }
@@ -235,36 +221,6 @@ class Footer extends React.Component {
     );
   }
 
-  getUpdated() {
-    const { t } = this.props;
-    if (this.props.metadata.updated) {
-      return (<span>{t("Data updated")} {this.props.metadata.updated}</span>);
-    }
-    return null;
-  }
-  downloadDataButton() {
-    const { t } = this.props;
-    return (
-      <button
-        style={Object.assign({}, materialButton, {backgroundColor: "rgba(0,0,0,0)", color: medGrey, margin: 0, padding: 0})}
-        onClick={() => { this.props.dispatch({ type: TRIGGER_DOWNLOAD_MODAL }); }}
-      >
-        <FaDownload />
-        <span style={{position: "relative"}}>{" "+t("Download data")}</span>
-      </button>
-    );
-  }
-  getCitation() {
-    return (
-      <span>
-        {"Nextstrain: "}
-        <a href={publications.nextstrain.href} target="_blank" rel="noopener noreferrer">
-          {publications.nextstrain.author}, <i>{publications.nextstrain.journal}</i>{` (${publications.nextstrain.year})`}
-        </a>
-      </span>
-    );
-  }
-
   render() {
     if (!this.props.metadata || !this.props.tree.nodes) return null;
     const width = this.props.width - 30; // need to subtract margin when calculating div width
@@ -284,25 +240,11 @@ class Footer extends React.Component {
                 </div>
               );
             })}
-          <Flex className='finePrint'>
-            {this.getUpdated()}
-            {dot}
-            {this.downloadDataButton()}
-            {dot}
-            {"Auspice v" + version}
-          </Flex>
-          <div style={{height: "3px"}}/>
-          <Flex className='finePrint'>
-            {this.getCitation()}
-          </Flex>
         </div>
       </FooterStyles>
     );
   }
 }
 
-// {dot}
-//
-
 const WithTranslation = withTranslation()(Footer);
 export default WithTranslation;

src/components/main/index.js

@@ -8,6 +8,7 @@ import Tree from "../tree";
 import Map from "../map/map";
 import { controlsHiddenWidth } from "../../util/globals";
 import Footer from "../framework/footer";
+import FinePrint from "../framework/fine-print";
 import DownloadModal from "../download/downloadModal";
 import { analyticsNewPage } from "../../util/googleAnalytics";
 import handleFilesDropped from "../../actions/filesDropped";
@@ -155,7 +156,8 @@ class Main extends React.Component {
             </Suspense>) :
             null
           }
-          {this.props.displayNarrative|| this.props.showOnlyPanels ? null : <Footer width={calcUsableWidth(availableWidth, 1)} />}
+          {this.props.displayNarrative || this.props.showOnlyPanels ? null : <Footer width={calcUsableWidth(availableWidth, 1)} />}
+          {this.props.displayNarrative ? null : <FinePrint width={calcUsableWidth(availableWidth, 1)} />}
           {this.props.displayNarrative && this.props.panelsToDisplay.includes("MainDisplayMarkdown") ?
             <MainDisplayMarkdown width={calcUsableWidth(availableWidth, 1)}/> :
             null

src/components/splash/splash.js

@@ -2,9 +2,8 @@ import React from "react";
 import styled from 'styled-components';
 import NavBar from "../navBar";
 import Flex from "../../components/framework/flex";
-import { logos } from "./logos";
 import { CenterContent } from "./centerContent";
-
+import { FinePrintStyles, getCitation} from "../../components/framework/fine-print";
 
 const getNumColumns = (width) => width > 1000 ? 3 : width > 750 ? 2 : 1;
 
@@ -103,12 +102,6 @@ const SplashContent = ({available, browserDimensions, dispatch, errorMessage, ch
     </>
   );
 
-  const Footer = () => (
-    <CenterContent>
-      {logos}
-    </CenterContent>
-  );
-
   return (
     <>
       <NavBar sidebar={false}/>
@@ -117,7 +110,11 @@ const SplashContent = ({available, browserDimensions, dispatch, errorMessage, ch
         {errorMessage ? <ErrorMessage/> : <Intro/>}
         <ListAvailable type="datasets" data={available.datasets}/>
         <ListAvailable type="narratives" data={available.narratives}/>
-        <Footer/>
+        <FinePrintStyles>
+          <Flex className='finePrint'>
+            {getCitation()}
+          </Flex>
+        </FinePrintStyles>
       </div>
     </>
   );

src/reducers/controls.js

@@ -299,11 +299,6 @@ const Controls = (state = getDefaultControlsState(), action) => {
 export default Controls;
 
 function getInitialSidebarState() {
-  /* The following "hack" was present when `sidebarOpen` wasn't URL customisable. It can be removed
-  from here once the GISAID URLs (iFrames) are updated */
-  if (window.location.pathname.includes("gisaid")) {
-    return {sidebarOpen: false, setDefault: true};
-  }
   return {
     sidebarOpen: window.innerWidth > controlsHiddenWidth,
     setDefault: false