From 26b80e09cd64d5bb5b40bc7872aff397d9cc80ea Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 6 Jun 2018 22:45:25 +0200
Subject: play frames

---
 app/client/dataset/dataset.component.js | 114 +++++++++++++++++++-------------
 1 file changed, 67 insertions(+), 47 deletions(-)

(limited to 'app/client/dataset/dataset.component.js')

diff --git a/app/client/dataset/dataset.component.js b/app/client/dataset/dataset.component.js
index 12f7987..9de0b69 100644
--- a/app/client/dataset/dataset.component.js
+++ b/app/client/dataset/dataset.component.js
@@ -8,9 +8,11 @@ import actions from '../actions'
 import { FileList, FileRow } from '../common/fileList.component'
 import Loading from '../common/loading.component'
 
+const fieldSet = util.fieldSet(new Set(['input', 'status', 'checkpoint', 'output']))
+
 class DatasetComponent extends Component {
   render(){
-    const { loading, progress, module, data, folder, match, history } = this.props
+    let { loading, progress, fields, module, data, folder, match, history } = this.props
     if (loading) {
       return <Loading progress={progress} />
     }
@@ -19,20 +21,30 @@ class DatasetComponent extends Component {
       return history.push('/' + module.name + '/new/')
     }
     if (!folder || !folder.name) return
+    fields = fieldSet(fields)
     return (
       <div class='rows params datasets'>
         <div class='row row-heading dataset'>
-          <div class='col'>input</div>
-          <div class='col'>status</div>
-          <div class='col'>checkpoint</div>
-          <div class='col'>output</div>
+          {fields.has('input') &&
+            <div class='col'>input</div>
+          }
+          {fields.has('status') &&
+            <div class='col'>status</div>
+          }
+          {fields.has('checkpoint') &&
+            <div class='col'>checkpoint</div>
+          }
+          {fields.has('output') &&
+            <div class='col'>output</div>
+          }
         </div>
         {this.renderGroups()}
       </div>
     )
   }
   renderGroups(){
-    const { module, data, folder, runner, onPickDataset, onPickFile, datasetActions } = this.props
+    let { module, data, folder, fields, runner, onPickDataset, onPickFile, datasetActions } = this.props
+    fields = fieldSet(fields)
     const { datasetLookup, fileLookup } = data
     const { mapFn, sortFn } = util.sort.orderByFn('date desc')
     const moduleOnCPU = runner && runner.cpu.task && runner.cpu.task.module === module.name
@@ -51,47 +63,55 @@ class DatasetComponent extends Component {
       return (
         <div key={dataset.name} className='row dataset' onClick={() => onPickDataset && onPickDataset(dataset)}>
           {this.props.beforeRow && this.props.beforeRow(dataset)}
-          <div className='col'>
-            {!!dataset.input.length &&
-              <FileList
-                files={dataset.input.map(id => fileLookup[id])}
-                className='input_files'
-                fileListClassName=''
-                rowClassName='input_file'
-                fields={'name date size delete'}
-                onClick={onPickFile}
-                onDelete={(file) => this.onDeleteFile(file)}
-              />
-            }
-          </div>
-          <div className={[
-              'col', 'quiet',
-              (dataset.isBuilt ? 'built' : 'not_built'),
-              (isProcessing ? 'processing': 'not_processing')
-            ].join(' ')}>
-            {this.props.datasetActions && this.props.datasetActions(dataset, isFetching, isProcessing)}
-            {status}
-          </div>
-          <div className='col checkpoint'>
-            {!!dataset.checkpoints.length &&
-              <FileRow
-                file={dataset.checkpoints[0]}
-                fields={'name date epoch'}
-                className='row checkpoint'
-              />
-            }
-          </div>
-          <div className='col'>
-            {!!dataset.output.length &&
-              <FileList
-                files={dataset.output.map(id => fileLookup[id])}
-                orderBy='epoch desc'
-                fields={'name date epoch size'}
-                onPickFile={onPickFile}
-                onDelete={(file) => this.onDeleteFile(file)}
-              />
-            }
-          </div>
+          {fields.has('input') &&
+            <div className='col'>
+              {!!dataset.input.length &&
+                <FileList
+                  files={dataset.input.map(id => fileLookup[id])}
+                  className='input_files'
+                  fileListClassName=''
+                  rowClassName='input_file'
+                  fields={'name date size delete'}
+                  onClick={onPickFile}
+                  onDelete={(file) => this.onDeleteFile(file)}
+                />
+              }
+            </div>
+          }
+          {fields.has('status') &&
+            <div className={[
+                'col', 'quiet',
+                (dataset.isBuilt ? 'built' : 'not_built'),
+                (isProcessing ? 'processing': 'not_processing')
+              ].join(' ')}>
+              {this.props.datasetActions && this.props.datasetActions(dataset, isFetching, isProcessing)}
+              {status}
+            </div>
+          }
+          {fields.has('checkpoint') &&
+            <div className='col checkpoint'>
+              {!!dataset.checkpoints.length &&
+                <FileRow
+                  file={dataset.checkpoints[0]}
+                  fields={'name date epoch'}
+                  className='row checkpoint'
+                />
+              }
+            </div>
+          }
+          {fields.has('output') &&
+            <div className='col'>
+              {!!dataset.output.length &&
+                <FileList
+                  files={dataset.output.map(id => fileLookup[id])}
+                  orderBy='epoch desc'
+                  fields={'name date epoch size'}
+                  onPickFile={onPickFile}
+                  onDelete={(file) => this.onDeleteFile(file)}
+                />
+              }
+            </div>
+          }
           {this.props.afterRow && this.props.afterRow(dataset)}
         </div>
       )
-- 
cgit v1.2.3-70-g09d2