adds tooltips for all viz options

DataUSA · Feb 15, 2019 · 7cd819a · 7cd819a
1 parent 695921c
commit 7cd819a
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/app/components/Viz/Options.jsx b/app/components/Viz/Options.jsx
@@ -259,8 +259,8 @@ class Options extends Component {
     const {cart, data, location, measures, slug, title, topic} = this.props;
     const {embedSize, includeText, openDialog, results, sizes} = this.state;
 
-    const cartSize = cart.data.length;
-    const inCart = cart.data.find(c => c.slug === slug);
+    const cartSize = cart ? cart.data.length : 0;
+    const inCart = cart ? cart.data.find(c => c.slug === slug) : false;
 
     const cartEnabled = data && slug && title;
 
@@ -356,28 +356,28 @@ class Options extends Component {
 
     return <div className="Options">
 
-      <div className="option view-table" onClick={this.toggleDialog.bind(this, "view-table")}>
-        <span className="option-label">View Data</span>
-      </div>
-
-      <div className="option save-image" onClick={this.toggleDialog.bind(this, "save-image")}>
-        <span className="option-label">Save Image</span>
-      </div>
+      <Tooltip2 tooltipClassName="option-tooltip" placement="top-end">
+        <div className="option view-table" onClick={this.toggleDialog.bind(this, "view-table")}>
+          <span className="option-label">View Data</span>
+        </div>
+        <span>View and download the underlying dataset used to create this visualization.</span>
+      </Tooltip2>
 
-      <div className="option share" onClick={this.toggleDialog.bind(this, "share")}>
-        <span className="option-label">Share / Embed</span>
-      </div>
+      <Tooltip2 tooltipClassName="option-tooltip" placement="top-end">
+        <div className="option save-image" onClick={this.toggleDialog.bind(this, "save-image")}>
+          <span className="option-label">Save Image</span>
+        </div>
+        <span>Download this visualization as a PNG image or SVG code.</span>
+      </Tooltip2>
 
-      <Dialog className="options-dialog" isOpen={openDialog} onClose={this.toggleDialog.bind(this, false)}>
-        <Tabs2 onChange={this.toggleDialog.bind(this)} selectedTabId={openDialog}>
-          <Tab2 id="view-table" title="View Data" panel={<DataPanel />} />
-          <Tab2 id="save-image" title="Save Image" panel={<ImagePanel />} />
-          <Tab2 id="share" title="Share / Embed" panel={<SharePanel />} />
-          <button aria-label="Close" className="close-button pt-dialog-close-button pt-icon-small-cross" onClick={this.toggleDialog.bind(this, false)}></button>
-        </Tabs2>
-      </Dialog>
+      <Tooltip2 tooltipClassName="option-tooltip" placement="top-end">
+        <div className="option share" onClick={this.toggleDialog.bind(this, "share")}>
+          <span className="option-label">Share / Embed</span>
+        </div>
+        <span>Share this visualization on Twitter, Facebook, or on your personal website.</span>
+      </Tooltip2>
 
-      { cartEnabled ? <Tooltip2 placement="top-end">
+      { cartEnabled ? <Tooltip2 tooltipClassName="option-tooltip" placement="top-end">
         <div className={ `option add-to-cart ${ cartSize >= cartMax ? "disabled" : "" }` } onClick={this.onCart.bind(this)}>
           <span className="option-label">{ cartSize === undefined ? "Loading Cart" : inCart ? "Remove from Cart" : "Add Data to Cart" }</span>
         </div>
@@ -388,6 +388,15 @@ class Options extends Component {
         </span>
       </Tooltip2> : null }
 
+      <Dialog className="options-dialog" isOpen={openDialog} onClose={this.toggleDialog.bind(this, false)}>
+        <Tabs2 onChange={this.toggleDialog.bind(this)} selectedTabId={openDialog}>
+          <Tab2 id="view-table" title="View Data" panel={<DataPanel />} />
+          <Tab2 id="save-image" title="Save Image" panel={<ImagePanel />} />
+          <Tab2 id="share" title="Share / Embed" panel={<SharePanel />} />
+          <button aria-label="Close" className="close-button pt-dialog-close-button pt-icon-small-cross" onClick={this.toggleDialog.bind(this, false)}></button>
+        </Tabs2>
+      </Dialog>
+
     </div>;
 
   }