From da6d38cd2865d5e9de32f2b922754979af366317 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 26 Jan 2020 00:19:29 +0100
Subject: adding thumbnails to datasets

---
 app/client/common/fileList.component.js        | 19 ++++++++++++++++++-
 app/client/dataset/dataset.component.js        | 21 +++++++++++----------
 app/client/modules/biggan/views/biggan.show.js |  4 +++-
 public/assets/css/css.css                      | 21 ++++++++++++++++-----
 4 files changed, 48 insertions(+), 17 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()
diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index bad12c2..5a8383d 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -412,10 +412,10 @@ input.small {
   max-width: 100vw;
   flex-wrap: wrap;
 }
-.datasets .row.dataset > .col:nth-child(1) { min-width: 270px; }
-.datasets .row.dataset > .col:nth-child(2) { min-width: 100px; padding-left: 0; }
-.datasets .row.dataset > .col:nth-child(3) { min-width: 200px; }
-.datasets .row.dataset > .col:nth-child(4) { min-width: 350px; }
+.datasets .row.dataset > .col.input { min-width: 270px; }
+.datasets .row.dataset > .col.status { min-width: 100px; padding-left: 0; }
+.datasets .row.dataset > .col.checkpoint { min-width: 200px; }
+.datasets .row.dataset > .col.output { min-width: 350px; }
 .datasets .row.dataset > .col {
   padding: 0;
 }
@@ -427,7 +427,7 @@ input.small {
 .datasets .dataset:first-child > .col:first-child {
   padding: 0 0 3px 0px;
 }
-.datasets .dataset > .col:nth-child(2) > div {
+.datasets .dataset > .col.status > div {
   padding-top: 3px;
   padding-bottom: 3px;
 }
@@ -720,6 +720,17 @@ input.small {
   display: block;
   padding-right: 13px;
 }
+.biggan .datasets .row.dataset > .col.input {
+  width: 450px;
+  margin-right: 10px;
+}
+.biggan .datasets .row.dataset > .col.output {
+  width: 450px;
+}
+.biggan .datasets .thumbnails img {
+  max-width: 450px;
+  max-height: 450px;
+}
 
 /* search form */
 .search_form {
-- 
cgit v1.2.3-70-g09d2