From 8624f778eaec4cc7065819fe874483b7bcbcc7aa Mon Sep 17 00:00:00 2001
From: Elliot Glasenk <eglasenk@google.com>
Date: Mon, 22 Nov 2021 17:15:08 +0000
Subject: [PATCH] Add UI tweaks for final 2.1

---
 src/FilterBar.js | 11 +++++------
 src/Home.js      |  3 ++-
 src/Table.js     | 28 ++++++++++++++++------------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/FilterBar.js b/src/FilterBar.js
index d226a08..1312018 100644
--- a/src/FilterBar.js
+++ b/src/FilterBar.js
@@ -54,11 +54,12 @@ export const FilterBar = ({ executeQuery, queryStatus }) => {
     })
   })
   initialCustomFields.map((customField, index) => {
-    let label = startCase(customField.substring(customField.lastIndexOf('.') + 1, customField.length).replaceAll("_", " "))
+    // let label = startCase(customField.substring(customField.lastIndexOf('.') + 1, customField.length).replaceAll("_", " "))
+    let label = startCase((customField.split("_").slice(-1)))
     customFieldsArr.push({
       key: customField,
-      label: label,
-      selected: index === 0 ? true : false
+      selected: index === 0 ? true : false,
+      label,
     })
   })
 
@@ -100,10 +101,9 @@ export const FilterBar = ({ executeQuery, queryStatus }) => {
       if (measure.selected) return measure.key
     }).filter(item => item !== undefined)
     let selectedCustomFields = customFields.map(customField => {
-      if (customField.selected) return customField.key
+      if (customField.selected) return customField.key //crucial
     }).filter(item => item !== undefined)
 
-
     let selectedDynamicFieldsDimensions = []
     selectedCustomFields.map(scf => {
       selectedDynamicFieldsDimensions.push(dynamicFieldsDimensions[scf])
@@ -121,7 +121,6 @@ export const FilterBar = ({ executeQuery, queryStatus }) => {
         measureArrForSelectedFields.push(measure)
 
         let label = startCase(sdfd.label + " " + sm.substring(sm.lastIndexOf('.') + 1, sm.length).replaceAll("_", " "))
-
         let copy = { ...dynamicFieldMeasureTemplate }
         copy.measure = measure;
         copy.based_on = sm;
diff --git a/src/Home.js b/src/Home.js
index a6a6758..a5f0338 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -96,7 +96,8 @@ export const Home = () => {
               <SpaceVertical m="large"><Heading>Query executing!</Heading>
                 <ProgressCircular />
               </SpaceVertical>
-              : queryStatus === 'complete' && queryResults ? <FormattedTable queryResults={queryResults}></FormattedTable>
+              : queryStatus === 'complete' && queryResults ?
+                <FormattedTable queryResults={queryResults}></FormattedTable>
                 : ""
 
           }
diff --git a/src/Table.js b/src/Table.js
index 7aa49dc..cc7389a 100644
--- a/src/Table.js
+++ b/src/Table.js
@@ -35,13 +35,15 @@ export const FormattedTable = ({ queryResults }) => {
   const sliceEndValue = currentPage == 1 ? 26 : (currentPage) * rowsPerPage + 1;
   const dataSubArray = data.slice(sliceStartValue, sliceEndValue)
   return (
-    <>
-      <Table>
-        <FormattedTableHead data={data} />
-        <FormattedTableBody data={dataSubArray} />
-      </Table >
+    <SpaceVertical style={{ width: "95%" }}>
+      <SpaceVertical m="large" style={{ maxHeight: "450px", overflow: "scroll" }}>
+        <Table >
+          <FormattedTableHead data={data} />
+          <FormattedTableBody data={dataSubArray} />
+        </Table >
+      </SpaceVertical>
       <TablePagination currentPage={currentPage} setCurrentPage={setCurrentPage} totalPages={totalPages} />
-    </>
+    </SpaceVertical>
   )
 }
 
@@ -67,7 +69,7 @@ const FormattedTableBody = ({ data }) => {
     <TableBody>
       {data.map((row, rowIndex) => {
         return (
-          <TableRow key={`TableRow-${rowIndex}`}>
+          <TableRow key={`TableRow-${rowIndex}`} style={rowIndex % 2 == 0 ? { backgroundColor: "#f2f2f2" } : {}}>
             {Object.keys(row).map((key, cellIndex) => {
               return (
                 <TableDataCell key={`TableDataCell-${rowIndex}-${cellIndex}`} >
@@ -84,10 +86,12 @@ const FormattedTableBody = ({ data }) => {
 
 const TablePagination = ({ currentPage, setCurrentPage, totalPages }) => {
   return (
-    <Pagination
-      current={currentPage}
-      pages={totalPages}
-      onChange={setCurrentPage}
-    />
+    <SpaceVertical align="end">
+      <Pagination
+        current={currentPage}
+        pages={totalPages}
+        onChange={setCurrentPage}
+      />
+    </SpaceVertical>
   )
 }