From 0e6127270b02eadd588f3c4254ea684ba7256443 Mon Sep 17 00:00:00 2001
From: Hanbyul Jo <hanbyul@nyu.edu>
Date: Thu, 3 Aug 2023 09:27:46 -0400
Subject: [PATCH] Use different icons for sorting, Table styles from ui
 library, fix example

---
 .../common/blocks/lazy-components.js          |  3 +-
 app/scripts/components/common/table/index.tsx | 55 +++++++++++++++----
 .../components/common/table/markup.tsx        | 48 ----------------
 .../components/sandbox/table/table.mdx        |  2 +-
 4 files changed, 45 insertions(+), 63 deletions(-)
 delete mode 100644 app/scripts/components/common/table/markup.tsx

diff --git a/app/scripts/components/common/blocks/lazy-components.js b/app/scripts/components/common/blocks/lazy-components.js
index eedd57cd8..130f8b625 100644
--- a/app/scripts/components/common/blocks/lazy-components.js
+++ b/app/scripts/components/common/blocks/lazy-components.js
@@ -4,8 +4,7 @@ import LazyLoad from 'react-lazyload';
 import Chart from '$components/common/chart/block';
 import { chartMaxHeight } from '$components/common/chart/constant';
 
-import Table from '$components/common/table';
-import { tableHeight } from '$components/common/table/markup';
+import Table, { tableHeight } from '$components/common/table';
 import CompareImage from '$components/common/blocks/images/compare';
 
 import Map, { mapHeight } from '$components/common/blocks/block-map';
diff --git a/app/scripts/components/common/table/index.tsx b/app/scripts/components/common/table/index.tsx
index 04f7bf786..f169b82b4 100644
--- a/app/scripts/components/common/table/index.tsx
+++ b/app/scripts/components/common/table/index.tsx
@@ -11,12 +11,15 @@ import {
 import { useVirtual } from 'react-virtual';
 import { Sheet2JSONOpts } from 'xlsx';
 import {
-  CollecticonArrowLoop,
-  CollecticonArrowDown,
-  CollecticonArrowUp
+  CollecticonSortAsc,
+  CollecticonSortDesc,
+  CollecticonSortNone
 } from '@devseed-ui/collecticons';
+import { Table } from '@devseed-ui/typography';
 import { Button } from '@devseed-ui/button';
-import { PlaceHolderWrapper, TableWrapper, StyledTable } from './markup';
+import styled from 'styled-components';
+import { themeVal } from '@devseed-ui/theme-provider';
+
 import useLoadFile from '$utils/use-load-file';
 interface TablecomponentProps {
   dataPath: string;
@@ -24,6 +27,38 @@ interface TablecomponentProps {
   columnToSort?: string[];
 }
 
+export const tableHeight = '400';
+
+const PlaceHolderWrapper = styled.div`
+  display: flex;
+  height: ${tableHeight}px;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+`;
+
+const TableWrapper = styled.div`
+  display: flex;
+  max-width: 100%;
+  max-height: ${tableHeight}px;
+  overflow: auto;
+`;
+
+const StyledTable = styled(Table)`
+  thead {
+    border-bottom: 2px solid ${themeVal('color.base-200')};
+  }
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: white;
+    button {
+      width: 100%;
+    }
+  }
+`;
+
 export default function TableComponent({
   dataPath,
   excelOption,
@@ -78,11 +113,7 @@ export default function TableComponent({
       )}
       {dataError && (
         <PlaceHolderWrapper>
-          {' '}
-          <p>
-            {' '}
-            Something went wrong while loading the data. Please try later.{' '}
-          </p>
+          <p>Something went wrong while loading the data. Please try later. </p>
         </PlaceHolderWrapper>
       )}
       {dataLoaded && (
@@ -103,20 +134,20 @@ export default function TableComponent({
                           variation='base-text'
                         >
                           {(header.column.getIsSorted() as string) == 'asc' && (
-                            <CollecticonArrowUp
+                            <CollecticonSortAsc
                               meaningful={true}
                               title='Sorted in ascending order'
                             />
                           )}
                           {(header.column.getIsSorted() as string) ==
                             'desc' && (
-                            <CollecticonArrowDown
+                            <CollecticonSortDesc
                               meaningful={true}
                               title='Sorted in descending order'
                             />
                           )}
                           {!header.column.getIsSorted() && (
-                            <CollecticonArrowLoop
+                            <CollecticonSortNone
                               meaningful={true}
                               title={`Sort the rows with this column's value`}
                             />
diff --git a/app/scripts/components/common/table/markup.tsx b/app/scripts/components/common/table/markup.tsx
deleted file mode 100644
index 2ea93ed54..000000000
--- a/app/scripts/components/common/table/markup.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import styled from 'styled-components';
-import { themeVal } from '@devseed-ui/theme-provider';
-import { variableGlsp } from '$styles/variable-utils';
-
-export const tableHeight = '400';
-
-export const PlaceHolderWrapper = styled.div`
-  display: flex;
-  height: ${tableHeight}px;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-`;
-
-export const TableWrapper = styled.div`
-  display: flex;
-  max-width: 100%;
-  max-height: ${tableHeight}px;
-  overflow: auto;
-`;
-
-export const StyledTable = styled.table`
-  border: none;
-  border-collapse: collapse;
-  thead tr {
-    background: ${themeVal('color.base-200')};
-    position: sticky;
-    top: 0;
-    z-index: 0;
-  }
-
-  thead th {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    padding: ${variableGlsp(0.25, 0.5)};
-  }
-
-  tbody tr {
-    :hover {
-      background-color: ${themeVal('color.primary-200')};
-    }
-  }
-
-  td {
-    padding: ${variableGlsp(0.25, 0.5)};
-  }
-`;
diff --git a/app/scripts/components/sandbox/table/table.mdx b/app/scripts/components/sandbox/table/table.mdx
index 1d3be6476..0a344190b 100644
--- a/app/scripts/components/sandbox/table/table.mdx
+++ b/app/scripts/components/sandbox/table/table.mdx
@@ -17,7 +17,7 @@
 
 <Block>
   <Figure>
-    <Table fileName="/public/example.csv" />
+    <Table dataPath="/public/example.csv" />
     <Caption> Table example from csv</Caption>
   </Figure>
 </Block>