Add configurable about this dataset links (#907)

* add about arg

* add simple url validator

* attach about link to config api

* add links to configDefaults

* add conditional link in top left and menu item

* whitespace

* change to lower case

* move --about arg before click.command()

if this fixes it I have no idea why

* change link>URL

* be more descriptive about URL

* Make error more explicit

* refactor attach_data to accept about

* format

* change icon

* add trailing parenthesis

* whitespace

client/src/components/leftSidebar/topLeftLogoAndTitle.js

@@ -7,15 +7,26 @@ import Logo from "../framework/logo";
 @connect(state => ({
   responsive: state.responsive,
   datasetTitle: state.config?.displayNames?.dataset ?? "",
+  aboutURL: state.config?.links?.["about-dataset"],
   scatterplotXXaccessor: state.controls.scatterplotXXaccessor,
   scatterplotYYaccessor: state.controls.scatterplotYYaccessor
 }))
 class LeftSideBar extends React.Component {
   render() {
-    const { datasetTitle } = this.props;
+    const { datasetTitle, aboutURL } = this.props;
 
     const paddingToAvoidScrollBar = 15;
 
+    const displayTitle =
+      datasetTitle.length > globals.datasetTitleMaxCharacterCount
+        ? `${datasetTitle.substring(
+            0,
+            Math.floor(globals.datasetTitleMaxCharacterCount / 2)
+          )}…${datasetTitle.slice(
+            -Math.floor(globals.datasetTitleMaxCharacterCount / 2)
+          )}`
+        : datasetTitle;
+
     return (
       <div
         style={{
@@ -69,14 +80,7 @@ class LeftSideBar extends React.Component {
           }}
           title={datasetTitle}
         >
-          {datasetTitle.length > globals.datasetTitleMaxCharacterCount
-            ? `${datasetTitle.substring(
-                0,
-                Math.floor(globals.datasetTitleMaxCharacterCount / 2)
-              )}…${datasetTitle.slice(
-                -Math.floor(globals.datasetTitleMaxCharacterCount / 2)
-              )}`
-            : datasetTitle}
+          {aboutURL ? <a href={aboutURL}>{displayTitle}</a> : displayTitle}
         </div>
       </div>
     );

client/src/components/menubar/index.js

@@ -38,7 +38,8 @@ import { tooltipHoverOpenDelay } from "../../globals";
   celllist2: state.differential.celllist2,
   libraryVersions: state.config?.library_versions, // eslint-disable-line camelcase
   undoDisabled: state["@@undoable/past"].length === 0,
-  redoDisabled: state["@@undoable/future"].length === 0
+  redoDisabled: state["@@undoable/future"].length === 0,
+  aboutLink: state.config?.links?.["about-dataset"]
 }))
 class MenuBar extends React.Component {
   static isValidDigitKeyEvent(e) {
@@ -267,7 +268,8 @@ class MenuBar extends React.Component {
       clipPercentileMin,
       clipPercentileMax,
       layoutChoice,
-      graphInteractionMode
+      graphInteractionMode,
+      aboutLink
     } = this.props;
     const { pendingClipPercentiles } = this.state;
 
@@ -473,7 +475,10 @@ class MenuBar extends React.Component {
           undoDisabled={undoDisabled}
           redoDisabled={redoDisabled}
         />
-        <InformationMenu libraryVersions={libraryVersions} />
+        <InformationMenu
+          libraryVersions={libraryVersions}
+          aboutLink={aboutLink}
+        />
       </div>
     );
   }

client/src/components/menubar/infoMenu.js

@@ -3,12 +3,23 @@ import React from "react";
 import { Button, Popover, Menu, MenuItem, Position } from "@blueprintjs/core";
 
 function InformationMenu(props) {
-  const { libraryVersions } = props;
+  const { libraryVersions, aboutLink } = props;
   return (
     <div style={{ marginLeft: 10 }} className="bp3-button-group">
       <Popover
         content={
           <Menu>
+            {aboutLink ? (
+              <MenuItem
+                href={aboutLink}
+                target="_blank"
+                icon="document-open"
+                text="About this dataset"
+              />
+            ) : (
+              ""
+            )}
+
             <MenuItem
               href="https://chanzuckerberg.github.io/cellxgene/faq.html"
               target="_blank"

client/src/globals.js

@@ -15,7 +15,8 @@ export const configDefaults = {
   displayNames: {},
   parameters: {
     "max-category-items": 1000
-  }
+  },
+  links: {}
 };
 
 /* colors */