[ENH] Clean up the home page (#621)

* Replace homepage textfield by rendered table

* Install vue-json-pretty plugin

* Replace json textfield with rendered preview

* Remove deprectated stringify methods

* I can admit defeat

* Fix index page-component test

* [ENH] change description styling to align with cat. page

cypress/component/index_page.cy.js

@@ -35,9 +35,9 @@ describe("The index page", () => {
         });
 
         // Assert
-        cy.get("[data-cy='data-table-display']").should("be.visible.and.empty");
+        cy.get("[data-cy='data-table-display']").should("not.exist");
         cy.get("[data-cy='data-table-selector']").should("be.visible").contains("Choose file");
-        cy.get("[data-cy='data-dictionary-display']").should("be.visible.and.empty");
+        cy.get("[data-cy='data-dictionary-display']").should("not.exist");
         cy.get("[data-cy='data-dictionary-selector']").should("be.visible").contains("Choose file");
     });
 
@@ -77,10 +77,9 @@ describe("The index page", () => {
             plugins: ["bootstrap-vue"]
         });
 
-        // Assert - Because we're looking at an input field, we need to assert
-        // over the value and can't just use .contains as usual
-        cy.get("[data-cy='data-table-display']").should('include.value', 'val1\tval2');
-        cy.get("[data-cy='data-dictionary-display']").should('include.value', '"col1": "something"');
+        cy.get("[data-cy='data-table-display']").contains("val1");
+        cy.get("[data-cy='data-table-display']").contains("val2");
+        cy.get("[data-cy='data-dictionary-display']").contains('"col1": "something"');
     });
 
     it("Dispatches an action when a dataTable is loaded", () => {

cypress/e2e/page/home-pagetests.cy.js

@@ -0,0 +1,14 @@
+describe("On My homepage", () => {
+    it("I can upload some data", () => {
+        cy.visit('/');
+        // Before I load anything, I have a little notification that my preview will
+        // appear once I upload a table
+        // Load a table
+        cy.get('[data-cy="data-table-selector"]').get('input').selectFile('cypress/fixtures/examples/good/example_synthetic.tsv', { force: true });
+
+        /* ==== Generated with Cypress Studio ==== */
+        cy.get('[data-cy="data-dictionary-selector"] > .row > form > .file-selector-button').click();
+        cy.get('[data-cy="data-dictionary-selector"] > .row > form > .file-selector-button > input').selectFile('cypress/fixtures/examples/good/example_synthetic_participants.json', { force: true });
+        /* ==== End Cypress Studio ==== */
+    });
+});

nuxt.config.js

@@ -25,7 +25,6 @@ export default {
 
 	// Global CSS: https://go.nuxtjs.dev/config-css
 	css: [
-
 		"@/assets/css/main.css"
 	],
 

pages/index.vue

@@ -7,15 +7,6 @@
             <h3>{{ uiText.dataTableHeader }}</h3>
         </b-row>
 
-        <!-- Shows file contents -->
-        <b-row>
-            <textarea
-                :cols="textArea.height"
-                :rows="textArea.width"
-                :value="stringifiedDataTable"
-                data-cy="data-table-display" />
-        </b-row>
-
         <!-- Selects data table file (i.e. participants.tsv) -->
         <b-row>
             <file-selector
@@ -25,19 +16,23 @@
                 :enabled="true" />
         </b-row>
 
-
-        <!-- Data dictionary file loading area -->
+        <!-- Shows file contents -->
         <b-row>
-            <h3>{{ uiText.dataDictionaryHeader }}</h3>
+            <b-table
+                v-if="dataTable.length > 0"
+                outlined
+                sticky-header
+                :items="dataTable"
+                data-cy="data-table-display" />
+            <p v-else class="instructions-text">
+                Please provide a data table to see a preview here.
+            </p>
         </b-row>
 
-        <!-- Shows file contents -->
+
+        <!-- Data dictionary file loading area -->
         <b-row>
-            <textarea
-                :cols="textArea.height"
-                :rows="textArea.width"
-                :value="stringifiedDataDictionary"
-                data-cy="data-dictionary-display" />
+            <h3>{{ uiText.dataDictionaryHeader }}</h3>
         </b-row>
 
         <b-row>
@@ -49,6 +44,20 @@
                 :enabled="dataTableSelected" />
         </b-row>
 
+        <!-- Shows file contents -->
+        <b-row>
+            <pre
+                v-if="Object.keys(this.dataDictionary.userProvided).length > 0"
+                style="height: 200px; width: 100%; overflow: auto;"
+                data-cy="data-dictionary-display">
+                {{ stringifiedDataDictionary }}
+            </pre>
+            <p v-else class="instructions-text">
+                Provide a data dictionary to see the preview.
+                If you load a data table, a skeleton data dictionary will be created for you
+            </p>
+        </b-row>
+
     </b-container>
 
 </template>
@@ -101,19 +110,9 @@
                 // (used to enable data dictionary selection)
                 return ( this.dataTable.length > 0 );
             },
-
             stringifiedDataDictionary() {
 
-                return ( 0 === Object.keys(this.dataDictionary.userProvided).length )
-                    ? "" : JSON.stringify(this.dataDictionary.userProvided, null, 4);
-            },
-
-            stringifiedDataTable() {
-
-                // Returns only the cell values of the table as a formatted string (no column names)
-                return this.dataTable.map(row => {
-                    return Object.values(row).join("\t");
-                }).join("\n");
+                return JSON.stringify(this.dataDictionary.userProvided, null, 4);
             }
         },