feat: implement tooltips in dataset component

qri-io · Aug 7, 2019 · 16781fb · 16781fb
1 parent 12945f2
commit 16781fb
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 16 deletions.
diff --git a/app/components/ComponentList.tsx b/app/components/ComponentList.tsx
@@ -11,23 +11,28 @@ interface FileRowProps {
   status?: string
   selectionType?: ComponentType
   disabled?: boolean
+  tooltip?: string
   onClick?: (type: ComponentType, activeTab: string) => Action
 }
 
 export const FileRow: React.FunctionComponent<FileRowProps> = (props) => {
-  let statusColor
+  let statusColor, statusTooltip
   switch (props.status) {
     case 'modified':
       statusColor = '#cab081'
+      statusTooltip = 'modified'
       break
     case 'add':
       statusColor = '#83d683'
+      statusTooltip = 'added'
       break
     case 'removed':
       statusColor = '#e04f4f'
+      statusTooltip = 'removed'
       break
     default:
       statusColor = 'transparent'
+      statusTooltip = ''
   }
 
   return (
@@ -36,6 +41,7 @@ export const FileRow: React.FunctionComponent<FileRowProps> = (props) => {
         'selected': props.selected,
         'disabled': props.disabled
       })}
+      data-tip={props.tooltip}
       onClick={() => {
         if (props.onClick && props.selectionType && props.name) {
           props.onClick(props.selectionType, props.name)
@@ -47,7 +53,7 @@ export const FileRow: React.FunctionComponent<FileRowProps> = (props) => {
         <div className='subtext'>{props.filename}</div>
       </div>
       <div className='status-column'>
-        <span className='dot' style={{ backgroundColor: statusColor }}></span>
+        <span className='dot' style={{ backgroundColor: statusColor }} data-tip={statusTooltip}></span>
       </div>
     </div>
   )
@@ -66,15 +72,18 @@ interface ComponentListProps {
 const components = [
   {
     name: 'meta',
-    displayName: 'Meta'
+    displayName: 'Meta',
+    tooltip: 'View title, description, tags, etc'
   },
   {
     name: 'body',
-    displayName: 'Body'
+    displayName: 'Body',
+    tooltip: "View the dataset's content"
   },
   {
     name: 'schema',
-    displayName: 'Schema'
+    displayName: 'Schema',
+    tooltip: 'View the structure of the dataset'
   }
 ]
 
@@ -93,7 +102,7 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
         Dataset Components
       </div>
       {
-        components.map(({ name, displayName }) => {
+        components.map(({ name, displayName, tooltip }) => {
           if (status[name]) {
             const { filepath, status: fileStatus } = status[name]
             let filename
@@ -112,6 +121,7 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
                 status={fileStatus}
                 selected={selectedComponent === name}
                 selectionType={selectionType}
+                tooltip={tooltip}
                 onClick={onComponentClick}
               />
             )
@@ -122,6 +132,7 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
                 displayName={displayName}
                 name={displayName}
                 disabled={true}
+                tooltip={tooltip}
               />
             )
           }

diff --git a/app/components/Dataset.tsx b/app/components/Dataset.tsx
@@ -2,6 +2,8 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { Action } from 'redux'
 import { shell } from 'electron'
+import ReactTooltip from 'react-tooltip'
+
 import { ApiAction, ApiActionThunk } from '../store/api'
 import { Resizable } from '../components/resizable'
 import DatasetSidebar from '../components/DatasetSidebar'
@@ -62,6 +64,10 @@ export default class Dataset extends React.Component<DatasetProps> {
     setInterval(() => { this.props.fetchWorkingStatus() }, 1000)
   }
 
+  componentDidUpdate () {
+    ReactTooltip.rebuild()
+  }
+
   // using component state + getDerivedStateFromProps to determine when a new
   // working dataset is selected and trigger api call(s)
   static getDerivedStateFromProps (nextProps: DatasetProps, prevState: DatasetState) {
@@ -151,6 +157,7 @@ export default class Dataset extends React.Component<DatasetProps> {
     const linkButton = isLinked ? (
       <div
         className='header-column'
+        data-tip={workingDataset.linkpath}
         onClick={() => { shell.openItem(String(workingDataset.linkpath)) }}
       >
         <div className='header-column-icon'>
@@ -160,7 +167,7 @@ export default class Dataset extends React.Component<DatasetProps> {
           <div className="label">Show Dataset Files</div>
         </div>
       </div>) : (
-      <div className='header-column'>
+      <div className='header-column' data-tip='Link this dataset to a folder on your computer'>
         <div className='header-column-icon'>
           <span className='icon-inline'>link</span>
         </div>
@@ -175,6 +182,7 @@ export default class Dataset extends React.Component<DatasetProps> {
         <div className='header'>
           <div
             className={classNames('current-dataset', 'header-column', { 'expanded': showDatasetList })}
+            data-tip={`${workingDataset.peername}/${workingDataset.name}`}
             onClick={toggleDatasetList}
             style={{ width: datasetSidebarWidth }}
           >
@@ -230,6 +238,18 @@ export default class Dataset extends React.Component<DatasetProps> {
             </div>
           )
         }
+        {/*
+          This adds react-tooltip to all children of Dataset
+          To add a tooltip to any element, add a data-tip={'tooltip text'} attribute
+          See componentDidUpdate, which calls rebuild() to re-bind all tooltips
+        */}
+        <ReactTooltip
+          place='bottom'
+          type='dark'
+          effect='solid'
+          delayShow={1000}
+          multiline
+        />
       </div>
     )
   }

diff --git a/app/components/DatasetSidebar.tsx b/app/components/DatasetSidebar.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react'
 import { Action } from 'redux'
-import { ApiActionThunk } from '../store/api'
 import moment from 'moment'
+import { CSSTransition } from 'react-transition-group'
+
+import { ApiActionThunk } from '../store/api'
 import SaveFormContainer from '../containers/SaveFormContainer'
 import ComponentList from './ComponentList'
 
-import { CSSTransition } from 'react-transition-group'
 import { Spinner } from './chrome/Spinner'
 
 import { WorkingDataset, ComponentType } from '../models/store'
@@ -77,8 +78,20 @@ const DatasetSidebar: React.FunctionComponent<DatasetSidebarProps> = ({
   return (
     <div className='dataset-sidebar'>
       <div id='tabs' className='sidebar-list-item'>
-        <div className={`tab ${activeTab === 'status' && 'active'}`} onClick={() => { onTabClick('status') }}>Status</div>
-        <div className={`tab ${activeTab !== 'status' && 'active'}`} onClick={() => { onTabClick('history') }}>History</div>
+        <div
+          className={`tab ${activeTab === 'status' && 'active'}`}
+          onClick={() => { onTabClick('status') }}
+          data-tip='View the latest version or working changes<br/> to this dataset&apos;s components'
+        >
+          Status
+        </div>
+        <div
+          className={`tab ${activeTab !== 'status' && 'active'}`}
+          onClick={() => { onTabClick('history') }}
+          data-tip='Explore older versions of this dataset'
+        >
+          History
+        </div>
       </div>
       <div id='content'>
         <CSSTransition
@@ -143,7 +156,6 @@ const DatasetSidebar: React.FunctionComponent<DatasetSidebarProps> = ({
       {
         isLinked && activeTab === 'status' && <SaveFormContainer />
       }
-
     </div>
   )
 }

diff --git a/package.json b/package.json
@@ -178,7 +178,8 @@
   },
   "dependencies": {
     "@handsontable/react": "3.0.0",
-    "@types/underscore": "^1.9.2",
+    "@types/react-tooltip": "3.9.3",
+    "@types/underscore": "1.9.2",
     "classnames": "2.2.6",
     "electron-debug": "3.0.1",
     "font-awesome": "4.7.0",
@@ -191,11 +192,12 @@
     "react-router": "5.0.1",
     "react-router-dom": "5.0.1",
     "react-router-redux": "5.0.0-alpha.6",
+    "react-tooltip": "3.10.0",
     "react-transition-group": "4.2.1",
     "redux": "4.0.4",
     "redux-thunk": "2.3.0",
     "source-map-support": "0.5.12",
-    "underscore": "^1.9.1"
+    "underscore": "1.9.1"
   },
   "devEngines": {
     "node": ">=6.x",

diff --git a/yarn.lock b/yarn.lock
@@ -472,6 +472,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-tooltip@^3.9.3":
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/@types/react-tooltip/-/react-tooltip-3.9.3.tgz#2eb1e08e128bb691197c5c7f9063fda9ffd5ea42"
+  integrity sha512-X9xuVWlZTLUQadIIrf5MnMPo/FE8izJPRo6c6f+XUs8eIaQ2vj+5Qw4Ttw9bMUPrqImmsJp7o7FY4t1qHLFf4g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@2.9.2":
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d"
@@ -1577,7 +1584,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@2.2.6:
+classnames@2.2.6, classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -5987,7 +5994,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   dependencies:
@@ -6235,6 +6242,14 @@ react-test-renderer@16.8.6, react-test-renderer@^16.0.0-0:
     react-is "^16.8.6"
     scheduler "^0.13.6"
 
+react-tooltip@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.10.0.tgz#268b5ef519fd8a1369288d1f086f42c90d5da7ef"
+  integrity sha512-GGdxJvM1zSFztkTP7gCQbLTstWr1OOoMpJ5WZUGhimj0nhRY+MPz+92MpEnKmj0cftJ9Pd/M6FfSl0sfzmZWkg==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-transition-group@4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.2.1.tgz#61fc9e36568bff9a1fe4e60fae323c8a6dbc0680"