adding thumbnails to datasets

3 files changed, 32 insertions, 12 deletions

diff --git a/app/client/common/fileList.component.js b/app/client/common/fileList.component.js
index c4da4d7..1d4a3ca 100644
--- a/app/client/common/fileList.component.js
+++ b/app/client/common/fileList.component.js
@@ -29,10 +29,23 @@ export const FileList = props => {
     const groupedFiles = sortedFiles.reduce((a,b) => { a[b[1].dir].push(b); return a }, { true: [], false: [] })
     sortedFiles = groupedFiles.true.concat(groupedFiles.false)
   }
+  const fileFields = fieldSet(fields)
+  let thumbnails = null
+  if (fileFields.has('thumbnail')) {
+    thumbnails = (
+      <div class='thumbnails'>
+        {sortedFiles.map(pair => (
+          <div>
+            <img src={pair[1].url} />
+          </div>
+        ))}
+      </div>
+    )
+  }
   const fileList = sortedFiles.map(pair => {
       return <FileRow
         file={pair[1]}
-        fields={fieldSet(fields)}
+        fields={fileFields}
         className={rowClassName}
         linkFiles={linkFiles}
         onDelete={onDelete}
@@ -68,6 +81,7 @@ export const FileList = props => {
             </div>
           </div>
         }
+        {thumbnails}
 	  		{fileList}
       </div>
   	</div>
@@ -148,6 +162,9 @@ export const FileRow = props => {
       {fields.has('delete') && onDelete && file.id &&
         <div className='destroy' onClick={(e) => onDelete(file)}>x</div>
       }
+      {fields.has('deleteLink') && onDelete && file.id &&
+        <div className='destroyLink' onClick={(e) => onDelete(file)}>Delete</div>
+      }
       {options && props.options(file)}
     </div>
   )
diff --git a/app/client/dataset/dataset.component.js b/app/client/dataset/dataset.component.js
index af48ef4..316a3ad 100644
--- a/app/client/dataset/dataset.component.js
+++ b/app/client/dataset/dataset.component.js
@@ -21,21 +21,22 @@ class DatasetComponent extends Component {
       return history.push('/' + module.name + '/new/')
     }
     if (!folder || !folder.name) return
+    console.log(fields)
     fields = fieldSet(fields)
     return (
       <div className='rows params datasets'>
         <div className='row row-heading dataset'>
           {fields.has('input') &&
-            <div className='col'>input</div>
+            <div className='col input'>input</div>
           }
           {fields.has('status') &&
-            <div className='col'>status</div>
+            <div className='col status'>status</div>
           }
           {fields.has('checkpoint') &&
-            <div className='col'>checkpoint</div>
+            <div className='col checkpoint'>checkpoint</div>
           }
           {fields.has('output') &&
-            <div className='col'>output</div>
+            <div className='col output'>output</div>
           }
         </div>
         {this.renderGroups()}
@@ -43,7 +44,7 @@ class DatasetComponent extends Component {
     )
   }
   renderGroups(){
-    let { module, data, folder, fields, runner, onPickDataset, onPickFile, datasetActions } = this.props
+    let { module, data, folder, fields, inputFields, outputFields, runner, onPickDataset, onPickFile, datasetActions } = this.props
     fields = fieldSet(fields)
     const { datasetLookup, fileLookup } = data
     if (!datasetLookup) { return <div></div> }
@@ -65,14 +66,14 @@ class DatasetComponent extends Component {
         <div key={dataset.name} className='row dataset' onClick={() => onPickDataset && onPickDataset(dataset)}>
           {this.props.beforeRow && this.props.beforeRow(dataset)}
           {fields.has('input') &&
-            <div className='col'>
+            <div className='col input'>
               {!!dataset.input.length &&
                 <FileList
                   files={dataset.input.map(id => fileLookup[id])}
                   className='input_files'
                   fileListClassName=''
                   rowClassName='input_file'
-                  fields={'name date size delete'}
+                  fields={inputFields || 'name date size delete'}
                   linkFiles
                   onClick={onPickFile}
                   onDelete={(file) => this.onDeleteFile(file)}
@@ -82,7 +83,7 @@ class DatasetComponent extends Component {
           }
           {fields.has('status') &&
             <div className={[
-                'col', 'quiet',
+                'col', 'status', 'quiet',
                 (dataset.isBuilt ? 'built' : 'not_built'),
                 (isProcessing ? 'processing': 'not_processing')
               ].join(' ')}>
@@ -102,12 +103,12 @@ class DatasetComponent extends Component {
             </div>
           }
           {fields.has('output') &&
-            <div className='col'>
+            <div className='col output'>
               {!!dataset.output.length &&
                 <FileList
                   files={dataset.output.map(id => fileLookup[id])}
                   orderBy='epoch desc'
-                  fields={'name date epoch size'}
+                  fields={outputFields || 'name date epoch size'}
                   linkFiles
                   onClick={onPickFile}
                   onDelete={(file) => this.onDeleteFile(file)}
diff --git a/app/client/modules/biggan/views/biggan.show.js b/app/client/modules/biggan/views/biggan.show.js
index 4d301e8..ea8de08 100644
--- a/app/client/modules/biggan/views/biggan.show.js
+++ b/app/client/modules/biggan/views/biggan.show.js
@@ -38,7 +38,6 @@ class BigGANShow extends Component {
     const { biggan, match, history, actions, tasks } = this.props
     const { folderLookup } = (biggan.data || {})
     const folder = (folderLookup || {})[biggan.folder_id] || {}
-
     return (
       <div className='app biggan'>
         <div class='heading'>
@@ -71,6 +70,9 @@ class BigGANShow extends Component {
           data={biggan.data}
           folder={folder}
           history={history}
+          fields={'input output'}
+          inputFields={'thumbnail name date size deleteLink'}
+          outputFields={'thumbnail name date size deleteLink'}
           onPickFile={(file, e) => {
             e.preventDefault()
             e.stopPropagation()