feat(collection): add tooltips, list-picker counts

qri-io · Sep 30, 2020 · fb81d4f · fb81d4f
1 parent 6dd77eb
commit fb81d4f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 29 deletions.
diff --git a/app/components/collection/collectionHome/DatasetList.tsx b/app/components/collection/collectionHome/DatasetList.tsx
@@ -38,7 +38,7 @@ export const DatasetListComponent: React.FC<DatasetListProps> = (props) => {
   const lowercasedFilterString = filter.toLowerCase()
 
   const [checked, setChecked] = useState({})
-  const [onlyMine, setOnlyMine] = useState(false)
+  const [onlySessionUserDatasets, setOnlySessionUserDatasets] = useState(false)
   const checkedCount = Object.keys(checked).length
 
   const handleSetFilter = (value: string) => {
@@ -77,7 +77,7 @@ export const DatasetListComponent: React.FC<DatasetListProps> = (props) => {
   }
 
   const filteredDatasets = datasets
-    .filter(({ username }) => onlyMine ? (username === sessionUsername) : true)
+    .filter(({ username }) => onlySessionUserDatasets ? (username === sessionUsername) : true)
     .filter(({ username, name, metaTitle = '' }) => {
       // if there's a non-empty filter string, only show matches on username, name, and title
       // TODO (chriswhong) replace this simple filtering with an API call for deeper matches
@@ -90,13 +90,12 @@ export const DatasetListComponent: React.FC<DatasetListProps> = (props) => {
       return true
     })
 
-  const countMessage = (onlyMine && filter === '')
+  const countMessage = (onlySessionUserDatasets && filter === '')
     ? `You have ${filteredDatasets.length} local dataset${filteredDatasets.length !== 1 ? 's' : ''}`
     : `Showing ${filteredDatasets.length} local dataset${filteredDatasets.length !== 1 ? 's' : ''}`
 
   return (
     <div id='dataset-list'>
-
       <header>
         <div id='dataset-list-filter'>
           <div className='filter-input-container'>
@@ -119,21 +118,21 @@ export const DatasetListComponent: React.FC<DatasetListProps> = (props) => {
         </div>
         <div className='list-picker-and-bulk-actions'>
           <div className='list-picker'>
-            <button className={classNames({ active: onlyMine })} onClick={() => setOnlyMine(true)}>
-              My Datasets
+            <button className={classNames({ active: onlySessionUserDatasets })} onClick={() => setOnlySessionUserDatasets(true)}>
+              My Datasets <span className='count-indicator'>{datasets.filter(({ username }) => (username === sessionUsername)).length}</span>
             </button>
-            <button className={classNames({ active: !onlyMine })} onClick={() => setOnlyMine(false)}>
-              All Local Datasets
+            <button className={classNames({ active: !onlySessionUserDatasets })} onClick={() => setOnlySessionUserDatasets(false)}>
+              All Datasets <span className='count-indicator'>{datasets.length}</span>
             </button>
           </div>
-          {checkedCount > 0 &&
           <div className='bulk-actions'>
-            <button onClick={() => alert(`Pull Latest: ${Object.keys(checked)}`)}>Pull latest</button>
-            <button onClick={() => alert(`quick export CSV: ${Object.keys(checked)}`)}>Quick Export CSV</button>
-            <button onClick={() => alert(`remove: ${Object.keys(checked)}`)}>Remove</button>
-          </div>}
-          <div className='count-message'>
-            {countMessage}
+            {checkedCount === 0 && countMessage}
+            {checkedCount > 0 && <>
+              <span>{checkedCount} selected</span>
+              <button onClick={() => alert(`Pull Latest: ${Object.keys(checked)}`)}>Pull latest</button>
+              <button onClick={() => alert(`quick export CSV: ${Object.keys(checked)}`)}>Quick Export CSV</button>
+              <button onClick={() => alert(`remove: ${Object.keys(checked)}`)}>Remove</button>
+            </>}
           </div>
         </div>
       </header>

diff --git a/app/components/item/VersionInfoItem.tsx b/app/components/item/VersionInfoItem.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import moment from 'moment'
-import filesize from 'filesize'
+import numeral from 'numeral'
+import ReactTooltip from 'react-tooltip'
 
 import { VersionInfo } from '../../models/store'
 import CheckboxInput from '../form/CheckboxInput'
@@ -28,21 +29,30 @@ const VersionInfoItem: React.FC<VersionInfoItemProps> = (props) => {
       className='version-info-item'
     >
       <td>
+        <ReactTooltip type='dark' effect='solid' delayShow={200} multiline />
         <CheckboxInput
           name='selected'
           checked={selected}
           onChange={(_: string, v: boolean) => { onToggleSelect(data, v) }}
         />
       </td>
-      <td className='ref text' onClick={(e: React.MouseEvent) => { onClick(data, e) }}>{username}/{name}</td>
-      <td>{commitTime ? moment(commitTime).fromNow() : '--'}</td>
-      <td>{bodySize ? filesize(bodySize) : '--'}</td>
-      <td>{bodyRows || '--'}</td>
+      <td>
+        <span className='ref text' onClick={(e: React.MouseEvent) => { onClick(data, e) }}>{username}/{name}</span>
+      </td>
+      <td>
+        <span data-tip={commitTime}>{commitTime ? moment(commitTime).fromNow() : '--'}</span>
+      </td>
+      <td>{bodySize ? numeral(bodySize).format('0.00 b') : '--'}</td>
+      <td>
+        <span data-tip={bodyRows}>{bodyRows ? numeral(bodyRows).format('0a') : '--'}</span>
+      </td>
       <td className='icons'>
-        <ExternalLink href={`${QRI_CLOUD_URL}/${username}/${name}`} className="dataset-link" tooltip="Published">
-          <Icon icon="publish" size="sm" color={published ? 'dark' : 'medium'}/>
-        </ExternalLink>
-        {onClickFolder && <a onClick={(e: React.MouseEvent) => onClickFolder(data, e)} className="dataset-link" data-tip="Linked to filesystem">
+        <span className="dataset-link" data-tip={published ? 'published' : 'unpublished'}>
+          <ExternalLink href={`${QRI_CLOUD_URL}/${username}/${name}`}>
+            <Icon icon="publish" size="sm" color={published ? 'dark' : 'medium'}/>
+          </ExternalLink>
+        </span>
+        {onClickFolder && <a onClick={(e: React.MouseEvent) => onClickFolder(data, e)} className="dataset-link" data-tip={fsiPath ? 'working directory' : 'no working directory'}>
           <Icon icon="openInFinder" size="sm" color={fsiPath ? 'dark' : 'medium'}/>
         </a>}
         {/* <button onClick={() => updateDataset(username, name)} className="dataset-button" data-tip="Updates available">

diff --git a/app/scss/_dataset-list.scss b/app/scss/_dataset-list.scss
@@ -59,26 +59,30 @@
 
       .list-picker {
         flex: 1;
-        max-width: 30%;
         button {
           padding: 6px 10px;
           margin: 0 4px;
         }
+        .count-indicator {
+          color: #aaa;
+          font-weight: bold;
+        }
       }
 
       .bulk-actions {
         flex: 1;
-        text-align: center;
-        padding-top: 10px;
+        text-align: right;
+        padding: 6px 10px 0 0;
 
         button {
-          margin: 4px 5px;
+          margin: 0 5px;
           font-weight: bold;
           color: #4FC7F3;
         }
       }
 
       .count-message {
+        float: right;
         padding: 14px 20px 6px 12px;
       }
     }
@@ -87,7 +91,7 @@
   #list {
     flex: 1;
     width: 100%;
-    overflow: auto;
+    overflow-y: auto;
 
     table {
       width: 100%;
@@ -105,12 +109,17 @@
       }
 
       .ref.text {
+        display: block;
         cursor: pointer;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
 
       tr td, 
       tr th {
         padding: 8px 12px;
+        white-space: nowrap;
       }
       tr td.icons {
         position: relative;