ui :: add logic to display the type on columns headers

src/components/DataViewer.vue

@@ -11,6 +11,11 @@
               :key="column.name"
               @click="toggleColumnSelection({ column: column.name})"
             >
+              <span
+                v-if="column.type"
+                v-html="getIconType(column.type)"
+                class="data-viewer__header-icon"
+              ></span>
               <span class="data-viewer__header-label">{{ column.name }}</span>
               <i
                 class="data-viewer__header-action fas fa-angle-down"
@@ -32,7 +37,7 @@
             <DataViewerCell
               v-for="(cell, cellidx) in row"
               :key="cellidx"
-              :isSelected="isSelected(columnNames[cellidx])"
+              :isSelected="isSelected(columnHeaders[cellidx].name)"
               :value="cell"
             />
           </tr>
@@ -46,7 +51,7 @@
 import Vue from 'vue';
 import { Getter, Mutation, State } from 'vuex-class';
 
-import { DataSet } from '@/lib/dataset';
+import { DataSet, DataSetColumn, DataSetColumnType } from '@/lib/dataset';
 import { PipelineStepName } from '@/lib/steps';
 import { Component } from 'vue-property-decorator';
 import ActionMenu from './ActionMenu.vue';
@@ -72,7 +77,7 @@ export default class DataViewer extends Vue {
   @State selectedColumns!: string[];
 
   @Getter('isDatasetEmpty') isEmpty!: boolean;
-  @Getter columnNames!: string[];
+  @Getter columnHeaders!: DataSetColumn[];
 
   @Mutation toggleColumnSelection!: ({ column }: { column: string }) => void;
   @Mutation setSelectedColumns!: ({ column }: { column: string }) => void;
@@ -85,19 +90,20 @@ export default class DataViewer extends Vue {
    * @return {Array<object>}
    */
   get formattedColumns() {
-    return this.columnNames.map((d, index) => {
+    return this.columnHeaders.map((d, index) => {
       let isActionMenuOpened = false;
 
       if (index === this.indexActiveActionMenu) {
         isActionMenuOpened = true;
       }
 
       return {
-        name: d,
+        name: d.name,
+        type: d.type || undefined,
         isActionMenuOpened,
         class: {
           'data-viewer__header-cell': true,
-          'data-viewer__header-cell--active': this.isSelected(d),
+          'data-viewer__header-cell--active': this.isSelected(d.name),
         },
       };
     });
@@ -117,6 +123,23 @@ export default class DataViewer extends Vue {
     return this.selectedColumns.includes(column);
   }
 
+  getIconType(type: DataSetColumnType) {
+    switch (type) {
+      case 'string':
+        return 'ABC';
+      case 'integer':
+        return '123';
+      case 'float':
+        return '1.2';
+      case 'date':
+        return '<i class="fas fa-calendar-alt"></i>';
+      case 'boolean':
+        return '<i class="fas fa-check"></i>';
+      case 'object':
+        return '{ }';
+    }
+  }
+
   openMenu(index: number) {
     this.indexActiveActionMenu = index;
     this.setSelectedColumns({ column: this.formattedColumns[index].name });

src/store/getters.ts

@@ -13,6 +13,10 @@ export default {
    * the list of current dataset's colum names.
    **/
   columnNames: (state: VQBState) => state.dataset.headers.map(col => col.name),
+  /**
+   * the list of dataset's column headers.
+   */
+  columnHeaders: (state: VQBState) => state.dataset.headers,
   /**
    * a direct "usable" index (i.e. convert "-1" to a positive one) of last active step.
    */

src/styles/DataViewer.scss

@@ -49,7 +49,7 @@
 
 .data-viewer__header-cell {
   font-weight: bold;
-  padding: 6px 8px 3px;
+  padding: 6px 8px;
 }
 
 .data-viewer__header-cell--active {
@@ -64,14 +64,23 @@
   .data-viewer__header-action:hover {
     background-color: $active-color-faded-2;
   }
+
+  .data-viewer__header-icon {
+    color: $active-color-faded;
+  }
 }
 
 .data-viewer__header-label {
-  display: inline-block;
   text-overflow: ellipsis;
   max-width: 200px;
   overflow: hidden;
-  padding-right: 15px;
+  padding-right: 23px;
+}
+
+.data-viewer__header-icon {
+  font-family: 'Roboto Slab', serif;
+  color: #aaaaaa;
+  margin-right: 6px;
 }
 
 .data-viewer__header-action {

src/styles/_variables.scss

@@ -1,6 +1,7 @@
 //FONT - Temporary declaration for montserrat google font.
 // => we have to decide if we will use the same font as used in Tucana
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400&display=swap');
 
 // COLOR VARIABLES
 $base-color: #404040 !default;

tests/unit/data-viewer.spec.ts

@@ -107,6 +107,42 @@ describe('Data Viewer', () => {
       expect(headerCellsWrapper.at(3).text()).to.equal('columnD');
     });
 
+    it('should display the right icon for each types', () => {
+      const date = new Date();
+      const store = setupStore({
+        dataset: {
+          headers: [
+            { name: 'columnA', type: 'string' },
+            { name: 'columnB', type: 'integer' },
+            { name: 'columnC', type: 'float' },
+            { name: 'columnD', type: 'date' },
+            { name: 'columnE', type: 'object' },
+            { name: 'columnF', type: 'boolean' },
+          ],
+          data: [['value1', 42, 3.14, date, { obj: 'value' }, true]],
+        },
+      });
+      const wrapper = shallowMount(DataViewer, { store, localVue });
+
+      const headerIconsWrapper = wrapper.findAll('.data-viewer__header-icon');
+      expect(headerIconsWrapper.at(0).text()).to.equal('ABC');
+      expect(headerIconsWrapper.at(1).text()).to.equal('123');
+      expect(headerIconsWrapper.at(2).text()).to.equal('1.2');
+      expect(
+        headerIconsWrapper
+          .at(3)
+          .find('i')
+          .classes(),
+      ).to.eql(['fas', 'fa-calendar-alt']);
+      expect(headerIconsWrapper.at(4).text()).to.equal('{ }');
+      expect(
+        headerIconsWrapper
+          .at(5)
+          .find('i')
+          .classes(),
+      ).to.eql(['fas', 'fa-check']);
+    });
+
     describe('selection', () => {
       it('should add an active class on the cell', async () => {
         const store = setupStore({