init column manage modal values by column content (#698), optimize co…

…lumn type and align rendering (#708), vue app refactoring

samplesheets/rendering.py

@@ -200,7 +200,6 @@ def _add_header(self, name, header_type=None, obj=None):
             if isinstance(obj, GenericMaterial)
             else None,
             'num_col': False,  # Will be checked for sorting later
-            'align': 'left',
         }
         field_config = None
 
@@ -224,7 +223,6 @@ def _add_header(self, name, header_type=None, obj=None):
 
         if field_config and field_config.get('format') == 'integer':
             header['col_type'] = 'UNIT'
-            header['align'] = 'right'  # TODO: Should not be required for UNIT
 
         # Else detect type without config
         elif 'contact' in name.lower():
@@ -605,20 +603,19 @@ def _is_num(value):
         for i in range(len(self._field_header)):
             header_name = self._field_header[i]['value'].lower()
 
-            # Right align if values are all numbers or empty (except if name)
+            # Set column type to NUMERIC if values are all numeric or empty
+            # (except if name)
             # Skip check if column is already defined as UNIT
             if (
-                self._field_header[i]['col_type'] != 'UNIT'
+                header_name != 'name'
+                and self._field_header[i]['col_type'] != 'UNIT'
                 and any(_is_num(x[i]['value']) for x in self._table_data)
                 and all(
                     (_is_num(x[i]['value']) or not x[i]['value'])
                     for x in self._table_data
                 )
             ):
-                self._field_header[i]['num_col'] = True
-
-                if header_name != 'name':
-                    self._field_header[i]['align'] = 'right'
+                self._field_header[i]['col_type'] = 'NUMERIC'
 
             # Maximum column value length for column width estimate
             header_len = round(_get_length(self._field_header[i]['value']))

samplesheets/src/App.vue

@@ -427,7 +427,7 @@ export default {
       let valueB = dataB['value']
 
       // Integer/float sort
-      if (dataA['num_col']) {
+      if (dataA['colType']) {
         return parseFloat(valueA) - parseFloat(valueB)
       }
 
@@ -538,6 +538,14 @@ export default {
           // Define special column properties
           let maxValueLen = fieldHeader['max_value_len']
           let colType = fieldHeader['col_type']
+
+          let colAlign
+          if (['UNIT', 'NUMERIC'].includes(colType)) {
+            colAlign = 'right'
+          } else {
+            colAlign = 'left'
+          }
+
           let minW = this.sodarContext['min_col_width']
           let maxW = this.sodarContext['max_col_width']
           let calcW = maxValueLen * 10 + 25 // Default
@@ -597,12 +605,11 @@ export default {
             headerClass: ['sodar-ss-data-header'],
             cellRendererFramework: DataCellRenderer,
             cellRendererParams: {
-              'app': this,
-              'colType': colType
+              'app': this // NOTE: colType no longer necessary, passed to cell
             },
             cellClass: [
               'sodar-ss-data-cell',
-              'text-' + fieldHeader['align']
+              'text-' + colAlign
             ],
             comparator: this.dataCellCompare,
             filterValueGetter: this.dataCellFilterValue
@@ -654,6 +661,7 @@ export default {
               header.headerComponentFramework = FieldHeaderEditRenderer
               header.headerComponentParams = {
                 'modalComponent': this.$refs.manageColumnModalRef,
+                'colType': colType,
                 'fieldConfig': editFieldConfig,
                 'baseCellClasses': header.cellClass,
                 'assayUuid': configAssayUuid,
@@ -681,7 +689,7 @@ export default {
                   'obj_cls': fieldHeader['obj_cls']
                 },
                 'renderInfo': {
-                  'align': fieldHeader['align'],
+                  'align': colAlign,
                   'width': colWidth
                 },
                 // Editor configuration to be passed to DataCellEditor
@@ -816,8 +824,8 @@ export default {
         }
         for (let j = 0; j < rowCells.length; j++) {
           let cellVal = rowCells[j]
-          // Copy num_col info to each cell (comparator can't access colDef)
-          cellVal['num_col'] = table['field_header'][j]['num_col']
+          // Copy col_type info to each cell (comparator can't access colDef)
+          cellVal['colType'] = table['field_header'][j]['col_type']
           row['col' + j.toString()] = cellVal
         }
 

samplesheets/src/components/ManageColumnModal.vue

@@ -3,7 +3,9 @@
            ref="manageColumnModal"
            body-class="sodar-ss-vue-col-manage-body"
            centered no-fade hide-footer
-           size="md">
+           size="md"
+           no-close-on-backdrop
+           no-close-on-esc>
     <template slot="modal-header">
       <div class="w-100">
       <h5 class="modal-title text-nowrap" id="sodar-ss-vue-col-modal-title">
@@ -245,13 +247,16 @@ export default {
       ],
       fieldDisplayName: null,
       fieldConfig: null,
+      newConfig: false,
       baseCellClasses: null,
       assayUuid: null,
       configNodeIdx: null,
       configFieldIdx: null,
       defNodeIdx: null,
       defFieldIdx: null,
       col: null,
+      colType: null,
+      gridOptions: null,
       valueOptions: '',
       unitEnabled: false,
       unitOptions: '',
@@ -534,14 +539,18 @@ export default {
     /* Modal showing/hiding ------------------------------------------------- */
     showModal (data, col) {
       this.fieldDisplayName = data['fieldDisplayName']
-      this.fieldConfig = JSON.parse(JSON.stringify(data['fieldConfig'])) // Copy
+      this.fieldConfig = data['fieldConfig']
+      this.newConfig = data['newConfig']
       this.baseCellClasses = data['baseCellClasses']
       this.assayUuid = data['assayUuid']
       this.configNodeIdx = data['configNodeIdx']
       this.configFieldIdx = data['configFieldIdx']
       this.defNodeIdx = data['defNodeIdx']
       this.defFieldIdx = data['defFieldIdx']
       this.col = col
+      this.colType = data['colType']
+      let gridUuid = !this.assayUuid ? this.studyUuid : this.assayUuid
+      this.gridOptions = this.app.getGridOptionsByUuid(gridUuid)
 
       // Reset internal variables
       this.valueOptions = ''
@@ -553,6 +562,44 @@ export default {
         this.fieldConfig['default'] = ''
       }
 
+      if (this.newConfig) {
+        let field = this.col.colDef.field
+
+        // Unit and numeric column
+        if (['UNIT', 'NUMERIC'].includes(this.colType)) {
+          // TODO: Also support double
+          this.fieldConfig['format'] = 'integer'
+
+          if (this.colType === 'UNIT') {
+            this.fieldConfig['unit'] = []
+          }
+
+          for (let i = 0; i < this.gridOptions.rowData.length; i++) {
+            let cell = this.gridOptions.rowData[i][field]
+
+            // TODO: TBD: Guess range or not?
+            /*
+            let valNum = parseInt(cell['value'])
+
+            if (this.fieldConfig['range'][0] === null ||
+                this.fieldConfig['range'][0] > valNum) {
+              this.fieldConfig['range'][0] = valNum
+            }
+            if (this.fieldConfig['range'][1] === null ||
+                this.fieldConfig['range'][1] < valNum) {
+              this.fieldConfig['range'][1] = valNum
+            }
+            */
+
+            if (this.colType === 'UNIT' &&
+                cell.hasOwnProperty('unit') &&
+                !this.fieldConfig['unit'].includes(cell['unit'])) {
+              this.fieldConfig['unit'].push(cell['unit'])
+            }
+          }
+        }
+      }
+
       // Set up certain data for the form widgets
       this.setWidgetData()
 
@@ -614,14 +661,13 @@ export default {
             this.fieldConfig.hasOwnProperty('default') &&
             this.fieldConfig['default'].length > 0) {
           // Collect column cell data
-          let gridUuid = !this.assayUuid ? this.studyUuid : this.assayUuid
-          let gridOptions = this.app.getGridOptionsByUuid(gridUuid)
           let field = this.col.colDef.field
           let cellUuids = [] // Store found cell UUIDs
           let upData = [] // The actual update data
 
-          for (let i = 0; i < gridOptions.rowData.length; i++) {
-            let row = gridOptions.rowData[i]
+          for (let i = 0; i < this.gridOptions.rowData.length; i++) {
+            let row = this.gridOptions.rowData[i]
+
             if (row.hasOwnProperty(field) &&
                 !cellUuids.includes(row[field]['uuid'])) {
               if (!row[field]['value'] || row[field]['value'].length === 0) {

samplesheets/src/components/renderers/DataCellRenderer.vue

@@ -179,7 +179,7 @@ export default Vue.extend(
         this.value = this.params.value
 
         // Handle special column type
-        this.colType = this.params.colType
+        this.colType = this.params.value.colType
 
         // Enable/disable hover overflow
         this.enableHover = (this.params.enableHover === undefined)

samplesheets/src/components/renderers/FieldHeaderEditRenderer.vue

@@ -34,25 +34,30 @@ export default Vue.extend({
     },
     onModalClick () {
       // Refresh fieldConfig in case it's changed
-      this.fieldConfig = this.params.column.colDef.headerComponentParams['fieldConfig']
+      let fieldConfig = JSON.parse(
+        JSON.stringify(this.params.column.colDef.headerComponentParams['fieldConfig'])) // Copy
+      let newConfig = false
 
       // Add default values for fieldConfig if they are not present
-      if (!this.fieldConfig.hasOwnProperty('editable')) {
-        this.fieldConfig['editable'] = false
+      if (!fieldConfig.hasOwnProperty('format')) {
+        fieldConfig['format'] = 'string'
+        newConfig = true // No existing config found
       }
-      if (!this.fieldConfig.hasOwnProperty('format')) {
-        this.fieldConfig['format'] = 'string'
+      if (!fieldConfig.hasOwnProperty('editable')) {
+        fieldConfig['editable'] = false
       }
-      if (!this.fieldConfig.hasOwnProperty('range')) {
-        this.fieldConfig['range'] = [null, null]
+      if (!fieldConfig.hasOwnProperty('range')) {
+        fieldConfig['range'] = [null, null]
       }
-      if (!this.fieldConfig.hasOwnProperty('regex')) {
-        this.fieldConfig['regex'] = ''
+      if (!fieldConfig.hasOwnProperty('regex')) {
+        fieldConfig['regex'] = ''
       }
 
       this.modalComponent.showModal({
+        'fieldConfig': fieldConfig,
+        'newConfig': newConfig,
+        'colType': this.params.colType,
         'fieldDisplayName': this.displayName,
-        'fieldConfig': this.fieldConfig,
         'baseCellClasses': this.params.baseCellClasses,
         'assayUuid': this.params.assayUuid,
         'configNodeIdx': this.params.configNodeIdx,