From d7b3df3c5b02ccd61de41ce96633ac060f2c5d37 Mon Sep 17 00:00:00 2001
From: adimascio <adimascio@users.noreply.github.com>
Date: Mon, 6 May 2019 10:20:51 +0200
Subject: [PATCH] feature :: define a basic dataset type (#120)

DataSet type is defined as two properties:

- `headers`: a list of objects defining columns
  - each column is itself defined by a `name` and
    an optional `type`. We'll probably add extra
    metadata later,

- `data`: a list of list of values

Use this type in the `DataViewer` component.

Related to https://github.com/ToucanToco/vue-query-builder/issues/26
---
 src/components/DataViewer.vue  |  45 +++------
 src/lib/dataset/index.ts       |  31 +++++++
 src/lib/dataset/mongo.ts       |  33 +++++++
 stories/data-viewer.js         |  50 +++++-----
 tests/unit/data-viewer.spec.ts | 165 ++++++++++++++++++++-------------
 tests/unit/dataset.spec.ts     |  84 +++++++++++++++++
 6 files changed, 290 insertions(+), 118 deletions(-)
 create mode 100644 src/lib/dataset/index.ts
 create mode 100644 src/lib/dataset/mongo.ts
 create mode 100644 tests/unit/dataset.spec.ts

diff --git a/src/components/DataViewer.vue b/src/components/DataViewer.vue
index f052b4ec2..ccb9c4ffb 100644
--- a/src/components/DataViewer.vue
+++ b/src/components/DataViewer.vue
@@ -12,12 +12,12 @@
         </tr>
       </thead>
       <tbody class="data-viewer__body">
-        <tr class="data-viewer__row" v-for="(row, index) in dataset" :key="index">
+        <tr class="data-viewer__row" v-for="(row, index) in dataset.data" :key="index">
           <DataViewerCell
-            v-for="columnName in columnNames"
-            :key="columnName"
-            :isSelected="isSelected(columnName)"
-            :value="getValue(row, columnName)"
+            v-for="(cell, cellidx) in row"
+            :key="cellidx"
+            :isSelected="isSelected(columnNames[cellidx])"
+            :value="cell"
           />
         </tr>
       </tbody>
@@ -28,21 +28,16 @@
 <script lang="ts">
 import _ from 'lodash';
 import Vue from 'vue';
+
+import { DataSet } from '@/lib/dataset';
 import { Component, Prop } from 'vue-property-decorator';
 import DataViewerCell from './DataViewerCell.vue';
 
-/**
- * @name DataRow
- * @description A simple interface that represent a row from a dataset
- */
-interface DataRow {
-  [key: string]: any;
-}
 
 /**
  * @name DataViewer
  * @description A Vue Component that displays data into a table
- * @param {Array<DataRow>} dataset - The dataset that we want to display
+ * @param {DataSet} dataset - The dataset that we want to display
  */
 @Component({
   name: 'data-viewer',
@@ -52,10 +47,10 @@ interface DataRow {
 })
 export default class DataViewer extends Vue {
   @Prop({
-    default: () => [],
-    type: Array,
+    default: () => ({ headers: [], data: [] }),
+    type: Object,
   })
-  dataset!: Array<DataRow>;
+  dataset!: DataSet;
 
   /**
    * @description Array of column's name selected by the user
@@ -67,7 +62,7 @@ export default class DataViewer extends Vue {
    * @return {boolean}
    */
   get datasetIsntEmpty() {
-    return this.dataset.length !== 0;
+    return this.dataset.data.length !== 0;
   }
 
   /**
@@ -77,10 +72,7 @@ export default class DataViewer extends Vue {
    * @return {Array<string>}
    */
   get columnNames() {
-    return _.chain(this.dataset)
-      .flatMap(row => _.keys(row))
-      .uniq()
-      .value();
+    return this.dataset.headers.map(col => col.name);
   }
 
   /**
@@ -108,17 +100,6 @@ export default class DataViewer extends Vue {
     return this.selectedColumns.includes(column);
   }
 
-  /**
-   * @description Return the value from a specific cell
-   *
-   * @param {DataRow} row - A row from our dataset
-   * @param {string} column - A column name
-   * @return {any}
-   */
-  getValue(row: DataRow, column: string) {
-    return row[column];
-  }
-
   /**
    * @description Select or deselect a column by its name
    *
diff --git a/src/lib/dataset/index.ts b/src/lib/dataset/index.ts
new file mode 100644
index 000000000..1a513fb3b
--- /dev/null
+++ b/src/lib/dataset/index.ts
@@ -0,0 +1,31 @@
+/**
+ * This module contains helpers and definitions related to datasets.
+ */
+
+export type DataSetColumn = {
+  name: string;
+  type?: 'integer' | 'float' | 'boolean' | 'string' | 'date' | 'object';
+};
+
+/**
+ * Here's a dataset example:
+ * ```javascript
+ * {
+ *     headers: [
+ *         { name: 'col1' },
+ *         { name: 'col2' },
+ *         { name: 'col3' }
+ *     ],
+ *     data: [
+ *         [ 'ab', 12, true ],
+ *         [ 'cd', 13, null ]
+ *     ]
+ * }
+ *
+ * NOTE that we use `null` to represent empty values.
+ * ```
+ */
+export type DataSet = {
+  headers: Array<DataSetColumn>;
+  data: Array<Array<any>>;
+};
diff --git a/src/lib/dataset/mongo.ts b/src/lib/dataset/mongo.ts
new file mode 100644
index 000000000..992d33ab9
--- /dev/null
+++ b/src/lib/dataset/mongo.ts
@@ -0,0 +1,33 @@
+/**
+ * mongo specific helpers for dataset manipulation.
+ */
+
+import { DataSet } from '@/lib/dataset';
+
+type MongoDocument = { [k: string]: any };
+export type MongoResults = Array<MongoDocument>;
+
+/**
+ * transform a mongo resultset (i.e. a list of json documents) into
+ * a `DataSet` structure
+ */
+export function mongoResultsToDataset(results: MongoResults): DataSet {
+  const dataset: DataSet = { headers: [], data: [] };
+  if (results.length) {
+    const colnames = results
+      // get list of list of key
+      .map(row => Object.keys(row))
+      // then flatten them
+      .flat()
+      // and remove duplicates by keeping the _first_ occurence
+      .filter((col, colidx, array) => array.indexOf(col) === colidx);
+    // transform set of names to list of DataSetColumn objects
+    dataset.headers = colnames.map(name => ({ name }));
+    for (const row of results) {
+      dataset.data.push(
+        dataset.headers.map(coldef => (row.hasOwnProperty(coldef.name) ? row[coldef.name] : null)),
+      );
+    }
+  }
+  return dataset;
+}
diff --git a/stories/data-viewer.js b/stories/data-viewer.js
index f5ebfa094..203e96990 100644
--- a/stories/data-viewer.js
+++ b/stories/data-viewer.js
@@ -1,36 +1,44 @@
-import { storiesOf } from '@storybook/vue';
+import {storiesOf} from '@storybook/vue';
 
-import { DataViewer } from '../dist/storybook/components';
+import {DataViewer} from '../dist/storybook/components';
 
 const stories = storiesOf('DataViewer', module);
 
 stories.add('empty', () => ({
-  components: { DataViewer },
-  template: `
+                       components: {DataViewer},
+                       template: `
     <data-viewer>
     </data-viewer>
   `,
-}));
+                     }));
 
 stories.add('simple', () => ({
-  components: { DataViewer },
-  props: {
-    dataset: {
-      default() {
-        return [
-          { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-          { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-          { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-          { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-          { columnA: 'value13', columnB: { obj: 'value14' }, columnC: undefined },
-        ];
-      },
-    },
-  },
-  template: `
+                        components: {DataViewer},
+                        props: {
+                          dataset: {
+                            default() {
+                              return {
+                                headers:
+                                    [
+                                      {name: 'columnA'},
+                                      {name: 'columnB'},
+                                      {name: 'columnC'},
+                                    ],
+                                    data: [
+                                      ['value1', 'value2', 'value3'],
+                                      ['value4', 'value5', 'value6'],
+                                      ['value7', 'value8', 'value9'],
+                                      ['value10', 'value11', 'value12'],
+                                      ['value10', {obj: 'value14'}, null],
+                                    ]
+                              }
+                            },
+                          },
+                        },
+                        template: `
       <data-viewer
         :dataset="dataset"
       >
       </data-viewer>
     `,
-}));
+                      }));
diff --git a/tests/unit/data-viewer.spec.ts b/tests/unit/data-viewer.spec.ts
index e0ef57141..7c24598db 100644
--- a/tests/unit/data-viewer.spec.ts
+++ b/tests/unit/data-viewer.spec.ts
@@ -11,7 +11,10 @@ describe('Data Viewer', () => {
   it('should display a message when no data', () => {
     const wrapper = shallowMount(DataViewer, {
       propsData: {
-        dataset: [],
+        dataset: {
+          headers: [],
+          data: [],
+        },
       },
     });
 
@@ -20,13 +23,16 @@ describe('Data Viewer', () => {
 
   describe('header', () => {
     it('should have one row', () => {
-      const dataset = [
-        { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-        { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-        { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-        { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-        { columnA: 'value13', columnB: 'value14', columnC: 'value15' },
-      ];
+      const dataset = {
+        headers: [{ name: 'columnA' }, { name: 'columnB' }, { name: 'columnC' }],
+        data: [
+          ['value1', 'value2', 'value3'],
+          ['value4', 'value5', 'value6'],
+          ['value7', 'value8', 'value9'],
+          ['value10', 'value11', 'value12'],
+          ['value13', 'value14', 'value15'],
+        ],
+      };
       const wrapper = shallowMount(DataViewer, {
         propsData: {
           dataset: dataset,
@@ -38,13 +44,16 @@ describe('Data Viewer', () => {
     });
 
     it('should have three cells', () => {
-      const dataset = [
-        { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-        { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-        { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-        { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-        { columnA: 'value13', columnB: 'value14', columnC: 'value15' },
-      ];
+      const dataset = {
+        headers: [{ name: 'columnA' }, { name: 'columnB' }, { name: 'columnC' }],
+        data: [
+          ['value1', 'value2', 'value3'],
+          ['value4', 'value5', 'value6'],
+          ['value7', 'value8', 'value9'],
+          ['value10', 'value11', 'value12'],
+          ['value13', 'value14', 'value15'],
+        ],
+      };
       const wrapper = shallowMount(DataViewer, {
         propsData: {
           dataset: dataset,
@@ -56,13 +65,16 @@ describe('Data Viewer', () => {
     });
 
     it("should contains column's names", () => {
-      const dataset = [
-        { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-        { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-        { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-        { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-        { columnA: 'value13', columnB: 'value14', columnC: 'value15' },
-      ];
+      const dataset = {
+        headers: [{ name: 'columnA' }, { name: 'columnB' }, { name: 'columnC' }],
+        data: [
+          ['value1', 'value2', 'value3'],
+          ['value4', 'value5', 'value6'],
+          ['value7', 'value8', 'value9'],
+          ['value10', 'value11', 'value12'],
+          ['value13', 'value14', 'value15'],
+        ],
+      };
       const wrapper = shallowMount(DataViewer, {
         propsData: {
           dataset: dataset,
@@ -76,13 +88,21 @@ describe('Data Viewer', () => {
     });
 
     it("should contains column's names even if not on every rows", () => {
-      const dataset = [
-        { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-        { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-        { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-        { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-        { columnA: 'value13', columnB: 'value14', columnC: 'value15', columnD: 'value16' },
-      ];
+      const dataset = {
+        headers: [
+          { name: 'columnA' },
+          { name: 'columnB' },
+          { name: 'columnC' },
+          { name: 'columnD' },
+        ],
+        data: [
+          ['value1', 'value2', 'value3'],
+          ['value4', 'value5', 'value6'],
+          ['value7', 'value8', 'value9'],
+          ['value10', 'value11', 'value12'],
+          ['value13', 'value14', 'value15', 'value16'],
+        ],
+      };
       const wrapper = shallowMount(DataViewer, {
         propsData: {
           dataset: dataset,
@@ -98,13 +118,16 @@ describe('Data Viewer', () => {
 
     describe('selection', () => {
       it('should add an active class on the cell', () => {
-        const dataset = [
-          { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-          { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-          { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-          { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-          { columnA: 'value13', columnB: 'value14', columnC: 'value15' },
-        ];
+        const dataset = {
+          headers: [{ name: 'columnA' }, { name: 'columnB' }, { name: 'columnC' }],
+          data: [
+            ['value1', 'value2', 'value3'],
+            ['value4', 'value5', 'value6'],
+            ['value7', 'value8', 'value9'],
+            ['value10', 'value11', 'value12'],
+            ['value13', 'value14', 'value15'],
+          ],
+        };
         const wrapper = shallowMount(DataViewer, {
           propsData: {
             dataset: dataset,
@@ -117,13 +140,16 @@ describe('Data Viewer', () => {
       });
 
       it('should remove selection on an active column', () => {
-        const dataset = [
-          { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-          { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-          { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-          { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-          { columnA: 'value13', columnB: 'value14', columnC: 'value15' },
-        ];
+        const dataset = {
+          headers: [{ name: 'columnA' }, { name: 'columnB' }, { name: 'columnC' }],
+          data: [
+            ['value1', 'value2', 'value3'],
+            ['value4', 'value5', 'value6'],
+            ['value7', 'value8', 'value9'],
+            ['value10', 'value11', 'value12'],
+            ['value13', 'value14', 'value15'],
+          ],
+        };
         const wrapper = shallowMount(DataViewer, {
           propsData: {
             dataset: dataset,
@@ -143,13 +169,16 @@ describe('Data Viewer', () => {
 
   describe('body', () => {
     it('should have 5 rows', () => {
-      const dataset = [
-        { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-        { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-        { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-        { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-        { columnA: 'value13', columnB: 'value14', columnC: 'value15' },
-      ];
+      const dataset = {
+        headers: [{ name: 'columnA' }, { name: 'columnB' }, { name: 'columnC' }],
+        data: [
+          ['value1', 'value2', 'value3'],
+          ['value4', 'value5', 'value6'],
+          ['value7', 'value8', 'value9'],
+          ['value10', 'value11', 'value12'],
+          ['value13', 'value14', 'value15'],
+        ],
+      };
       const wrapper = shallowMount(DataViewer, {
         propsData: {
           dataset: dataset,
@@ -161,13 +190,16 @@ describe('Data Viewer', () => {
     });
 
     it('should pass down the right value to DataViewerCell', () => {
-      const dataset = [
-        { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-        { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-        { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-        { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-        { columnA: 'value13', columnB: 'value14', columnC: 'value15' },
-      ];
+      const dataset = {
+        headers: [{ name: 'columnA' }, { name: 'columnB' }, { name: 'columnC' }],
+        data: [
+          ['value1', 'value2', 'value3'],
+          ['value4', 'value5', 'value6'],
+          ['value7', 'value8', 'value9'],
+          ['value10', 'value11', 'value12'],
+          ['value13', 'value14', 'value15'],
+        ],
+      };
       const wrapper = shallowMount(DataViewer, {
         propsData: {
           dataset: dataset,
@@ -183,13 +215,16 @@ describe('Data Viewer', () => {
 
   describe('first column selection', () => {
     it('should select all first columns cells', () => {
-      const dataset = [
-        { columnA: 'value1', columnB: 'value2', columnC: 'value3' },
-        { columnA: 'value4', columnB: 'value5', columnC: 'value6' },
-        { columnA: 'value7', columnB: 'value8', columnC: 'value9' },
-        { columnA: 'value10', columnB: 'value11', columnC: 'value12' },
-        { columnA: 'value13', columnB: 'value14', columnC: 'value15' },
-      ];
+      const dataset = {
+        headers: [{ name: 'columnA' }, { name: 'columnB' }, { name: 'columnC' }],
+        data: [
+          ['value1', 'value2', 'value3'],
+          ['value4', 'value5', 'value6'],
+          ['value7', 'value8', 'value9'],
+          ['value10', 'value11', 'value12'],
+          ['value13', 'value14', 'value15'],
+        ],
+      };
       const wrapper = shallowMount(DataViewer, {
         propsData: {
           dataset: dataset,
@@ -199,7 +234,7 @@ describe('Data Viewer', () => {
       firstHeadCellWrapper.trigger('click');
 
       const rowsWrapper = wrapper.findAll('.data-viewer__row');
-      dataset.forEach((d, i) => {
+      dataset.data.forEach((d, i) => {
         expect(
           rowsWrapper
             .at(i)
diff --git a/tests/unit/dataset.spec.ts b/tests/unit/dataset.spec.ts
new file mode 100644
index 000000000..27422fc26
--- /dev/null
+++ b/tests/unit/dataset.spec.ts
@@ -0,0 +1,84 @@
+import { DataSet } from '@/lib/dataset';
+import { mongoResultsToDataset, MongoResults } from '@/lib/dataset/mongo';
+
+/**
+ * helper functions to sort a dataset so that we can test output in a predictible way.
+ *
+ * @param dataset input dataset
+ * @return the sorted dataset
+ */
+function _sortDataset(dataset: DataSet): DataSet {
+  const sortedColumns = Array.from(dataset.headers).sort((col1, col2) =>
+    col1.name.localeCompare(col2.name),
+  );
+  const reorderMap = sortedColumns.map(colname => dataset.headers.indexOf(colname));
+  const sortedData = [];
+  for (const row of dataset.data) {
+    sortedData.push(reorderMap.map(newidx => row[newidx]));
+  }
+  return {
+    headers: sortedColumns,
+    data: sortedData,
+  };
+}
+
+describe('_sortDataset tests', () => {
+  it('should be able to leave as is sorted results', () => {
+    const dataset: DataSet = {
+      headers: [{ name: 'col1' }, { name: 'col2' }, { name: 'col3' }],
+      data: [[1, 2, 3], [4, 5, 6]],
+    };
+    const sorted = _sortDataset(dataset);
+    expect(sorted.headers).toEqual([{ name: 'col1' }, { name: 'col2' }, { name: 'col3' }]);
+    expect(sorted.data).toEqual([[1, 2, 3], [4, 5, 6]]);
+  });
+
+  it('should be able to sort results', () => {
+    const dataset: DataSet = {
+      headers: [{ name: 'col3' }, { name: 'col1' }, { name: 'col4' }, { name: 'col2' }],
+      data: [[1, 2, 3, 4], [5, 6, 7, 8]],
+    };
+    const sorted = _sortDataset(dataset);
+    expect(sorted.headers).toEqual([
+      { name: 'col1' },
+      { name: 'col2' },
+      { name: 'col3' },
+      { name: 'col4' },
+    ]);
+    expect(sorted.data).toEqual([[2, 4, 1, 3], [6, 8, 5, 7]]);
+  });
+});
+
+describe('Dataset helper tests', () => {
+  it('should be able to handle empty mongo results', () => {
+    const mongoResults: MongoResults = [];
+    const dataset = mongoResultsToDataset(mongoResults);
+    expect(dataset.headers).toEqual([]);
+    expect(dataset.data).toEqual([]);
+  });
+
+  it('should be able to convert homegeneous mongo results', () => {
+    const mongoResults: MongoResults = [
+      { col1: 'foo', col2: 42, col3: true },
+      { col1: 'bar', col2: 7, col3: false },
+    ];
+    const dataset = _sortDataset(mongoResultsToDataset(mongoResults));
+    expect(dataset.headers).toEqual([{ name: 'col1' }, { name: 'col2' }, { name: 'col3' }]);
+    expect(dataset.data).toEqual([['foo', 42, true], ['bar', 7, false]]);
+  });
+
+  it('should be able to convert heterogeneous mongo results', () => {
+    const mongoResults: MongoResults = [
+      { col1: 'foo', col3: true },
+      { col1: 'bar', col2: 7, col4: '?' },
+    ];
+    const dataset = _sortDataset(mongoResultsToDataset(mongoResults));
+    expect(dataset.headers).toEqual([
+      { name: 'col1' },
+      { name: 'col2' },
+      { name: 'col3' },
+      { name: 'col4' },
+    ]);
+    expect(dataset.data).toEqual([['foo', null, true, null], ['bar', 7, null, '?']]);
+  });
+});