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 */

server/app/app.py

@@ -33,6 +33,6 @@ class Server:
         self.app.register_blueprint(resources.blueprint)
         self.app.add_url_rule("/", endpoint="index")
 
-    def attach_data(self, data, title="Demo"):
-        self.app.config.update(DATASET_TITLE=title)
+    def attach_data(self, data, title="Demo", about=""):
+        self.app.config.update(DATASET_TITLE=title, ABOUT_DATASET=about)
         self.app.data = data

server/app/rest_api/rest.py

@@ -65,6 +65,9 @@ class ConfigAPI(Resource):
                     "engine": f"cellxgene Scanpy engine version ",
                     "dataset": current_app.config["DATASET_TITLE"],
                 },
+                "links": {
+                    "about-dataset": current_app.config["ABOUT_DATASET"]
+                },
                 "parameters": {
                     "max-category-items": current_app.data.config["max_category_items"]
                 },

server/cli/launch.py

@@ -6,6 +6,7 @@ from os.path import splitext, basename
 import sys
 import warnings
 import webbrowser
+from urllib.parse import urlparse
 
 import click
 
@@ -23,7 +24,11 @@ def common_args(func):
     """
     Decorator to contain CLI args that will be common to both CLI and GUI: title and engine args.
     """
+
     @click.option("--title", "-t", help="Title to display (if omitted will use file name).")
+    @click.option("--about",
+                  help="A URL to more information about the dataset."
+                       "(This must be an absolute URL including HTTP(S) protocol)")
     @click.option(
         "--embedding",
         "-e",
@@ -58,6 +63,7 @@ def common_args(func):
     @functools.wraps(func)
     def wrapper(*args, **kwargs):
         return func(*args, **kwargs)
+
     return wrapper
 
 
@@ -117,6 +123,7 @@ def launch(
         diffexp_lfc_cutoff,
         title,
         scripts,
+        about,
         experimental_label_file
 ):
     """Launch the cellxgene data viewer.
@@ -197,6 +204,20 @@ def launch(
         if lf_ext and lf_ext != ".csv":
             raise click.FileError(basename(experimental_label_file), hint="label file type must be .csv")
 
+    if about:
+        def url_check(url):
+            try:
+                result = urlparse(url)
+                if all([result.scheme, result.netloc]):
+                    return True
+                else:
+                    return False
+            except ValueError:
+                return False
+
+        if not url_check(about):
+            raise click.ClickException("Must provide an absolute URL for --about. (Example format: http://example.com)")
+
     # Setup app
     cellxgene_url = f"http://{host}:{port}"
 
@@ -221,7 +242,7 @@ def launch(
     from server.app.scanpy_engine.scanpy_engine import ScanpyEngine
 
     try:
-        server.attach_data(ScanpyEngine(data_locator, e_args), title=title)
+        server.attach_data(ScanpyEngine(data_locator, e_args), title=title, about=about)
     except ScanpyFileError as e:
         raise click.ClickException(f"{e}")