Update table UI

src/common/api/collectionsApi.ts

@@ -168,6 +168,35 @@ const isCollectionsError = (data: unknown): data is CollectionsError => {
   return true;
 };
 
+export type ColumnMeta = {
+  key: string;
+  category?: string;
+  description?: string;
+  display_name?: string;
+} & (
+  | {
+      type: 'date' | 'int' | 'float';
+      filter_strategy: undefined;
+      min_value: number;
+      max_value: number;
+      enum_values: undefined;
+    }
+  | {
+      type: 'string';
+      filter_strategy: 'fulltext' | 'prefix' | 'identity' | 'ngram';
+      min_value: undefined;
+      max_value: undefined;
+      enum_values: undefined;
+    }
+  | {
+      type: 'enum';
+      filter_strategy: undefined;
+      min_value: undefined;
+      max_value: undefined;
+      enum_values: string[];
+    }
+);
+
 interface CollectionsResults {
   status: {
     service_name: string;
@@ -214,33 +243,7 @@ interface CollectionsResults {
   };
   getGenomeAttribsMeta: {
     count: number;
-    columns: Array<
-      {
-        key: string;
-      } & (
-        | {
-            type: 'date' | 'int' | 'float';
-            filter_strategy: undefined;
-            min_value: number;
-            max_value: number;
-            enum_values: undefined;
-          }
-        | {
-            type: 'string';
-            filter_strategy: 'fulltext' | 'prefix' | 'identity' | 'ngram';
-            min_value: undefined;
-            max_value: undefined;
-            enum_values: undefined;
-          }
-        | {
-            type: 'enum';
-            filter_strategy: undefined;
-            min_value: undefined;
-            max_value: undefined;
-            enum_values: string[];
-          }
-      )
-    >;
+    columns: Array<ColumnMeta>;
   };
   getMicroTrait: {
     description: string;

src/common/colors.scss

@@ -44,13 +44,13 @@ $kbase-palette: (
   // graphite grey
   // Hex: #9D9389 HSL: 30, 9%, 58%
   "grey": rgb(157, 147, 137),
+  "light-gray": rgb(238, 238, 238),
 
   "white": rgb(255, 255, 255),
   "black": rgb(0, 0, 0),
   "ink": rgb(23, 20, 18),
   "neutral": rgb(106, 97, 88),
   "silver": rgb(192, 192, 192),
-  "light-gray": rgb(238, 238, 238),
 
   "base-lightest": rgb(242, 239, 235),
   "base-lighter": rgb(222, 213, 203),

src/common/components/Sidebar.module.scss

@@ -45,13 +45,16 @@
 
 .sidebar li.sidebar-item.selected > .sidebar-item-inner {
   background-color: use-color("silver");
+  color: use-color("base-darker");
+  font-weight: 600;
 }
 
 .sidebar li.section-label {
-  color: use-color("base-light");
-  font-size: 0.875rem;
+  color: use-color("base");
+  font-size: 0.85rem;
   font-weight: bold;
   margin-top: 0.5rem;
+  text-transform: uppercase;
 }
 
 .sidebar li .item-icon {

src/common/components/Sidebar.tsx

@@ -4,6 +4,7 @@ import { FC, ReactElement } from 'react';
 import { Link } from 'react-router-dom';
 
 export interface SidebarItem {
+  id: string;
   displayText: string;
   pathname?: string;
   isSelected?: boolean;

src/common/components/Table.module.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-max-compound-selectors -- Need to modify sort icon in table headers */
+
 @import "../colors";
 
 $border: 1px solid use-color("base-lighter");
@@ -81,12 +83,30 @@ $header-height: 2em;
   }
 
   thead th {
-    background-color: use-color("primary");
-    color: use-color("white");
+    background-color: use-color("light-gray");
+    color: use-color("base-darker");
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: bold;
     height: $header-height;
+    text-align: left;
+    text-transform: uppercase;
+    transition: 0.25s;
     white-space: nowrap;
   }
 
+  thead th:hover {
+    color: use-color("base");
+  }
+
+  thead th > span:first-child {
+    margin-right: 0.25rem;
+  }
+
+  thead th > span:first-child svg {
+    color: use-color("base-light");
+  }
+
   tfoot th {
     background-color: use-color("white");
     color: use-color("primary-dark");
@@ -100,7 +120,7 @@ $header-height: 2em;
     border-top: $border;
     max-width: 20em;
     overflow: clip;
-    padding: 5px;
+    padding: 0.75rem 1rem;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

src/common/components/Table.test.tsx

@@ -384,7 +384,7 @@ test('useTableColumns hook makes appropriate headers from string lists', () => {
   const colSpy = jest.fn();
   const Wrapper = () => {
     const cols = useTableColumns({
-      fieldNames: ['a', 'b', 'c', 'd', 'q', 'x'],
+      fields: ['a', 'b', 'c', 'd', 'q', 'x'].map((id) => ({ id })),
       exclude: ['b', 'z'],
       order: ['c', 'a', 'q'],
     });

src/common/components/Table.tsx

@@ -22,6 +22,10 @@ import { CheckBox } from './CheckBox';
 import { Loader } from './Loader';
 import { HeatMapRow } from '../api/collectionsApi';
 
+type ColumnOptions = {
+  textAlign?: 'left' | 'right' | 'center';
+};
+
 export const Table = <Datum,>({
   table,
   className = '',
@@ -74,6 +78,11 @@ export const Table = <Datum,>({
                   <td
                     key={cell.id}
                     onMouseOver={setCellTitle} // TODO: Change this to a tooltip
+                    style={{
+                      textAlign: (
+                        cell.column.columnDef.meta as Partial<ColumnOptions>
+                      )?.textAlign,
+                    }}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>
@@ -209,6 +218,11 @@ const TableHeader = <Datum,>({ table }: { table: TableType<Datum> }) => (
             key={header.id}
             onClick={header.column.getToggleSortingHandler()}
             colSpan={header.colSpan}
+            style={{
+              textAlign: (
+                header.column.columnDef.meta as Partial<ColumnOptions>
+              )?.textAlign,
+            }}
           >
             {!header.isPlaceholder && header.column.getCanSort() ? (
               <span
@@ -291,11 +305,15 @@ const someHeaderDefines = <T,>(
 };
 
 export const useTableColumns = ({
-  fieldNames = [],
+  fields = [],
   order = [],
   exclude = [],
 }: {
-  fieldNames?: string[];
+  fields?: {
+    displayName?: string;
+    id: string;
+    options?: ColumnOptions;
+  }[];
   order?: string[];
   exclude?: string[];
 }) => {
@@ -304,39 +322,40 @@ export const useTableColumns = ({
       rowData: RowData
     ) => RowData[number];
   } = {};
-  fieldNames.forEach((fieldName, index) => {
-    accessors[fieldName] = (rowData) => rowData[index];
+  fields.forEach(({ id }, index) => {
+    accessors[id] = (rowData) => rowData[index];
   });
 
-  const fieldsOrdered = fieldNames
-    .filter((name) => !exclude.includes(name))
+  const fieldsOrdered = fields
+    .filter(({ id }) => !exclude.includes(id))
     .sort((a, b) => {
-      const aOrder = order.indexOf(a);
-      const bOrder = order.indexOf(b);
+      const aOrder = order.indexOf(a.id);
+      const bOrder = order.indexOf(b.id);
       if (aOrder !== -1 && bOrder !== -1) {
         return aOrder - bOrder;
       } else if (aOrder !== -1) {
         return -1;
       } else if (bOrder !== -1) {
         return 1;
       } else {
-        return fieldNames.indexOf(a) - fieldNames.indexOf(b);
+        return fields.indexOf(a) - fields.indexOf(b);
       }
     });
 
   return useMemo(
     () => {
       const columns = createColumnHelper<unknown[]>();
-      return fieldsOrdered.map((fieldName) =>
-        columns.accessor(accessors[fieldName], {
-          header: fieldName.replace(/_/g, ' ').trim(),
-          id: fieldName,
+      return fieldsOrdered.map((field) =>
+        columns.accessor(accessors[field.id], {
+          header: field.displayName ?? field.id.replace(/_/g, ' ').trim(),
+          id: field.id,
+          meta: field.options,
         })
       );
     },
     // We only want to remake the columns if fieldNames or fieldsOrdered have new values
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(fieldNames), JSON.stringify(fieldsOrdered)]
+    [JSON.stringify(fields), JSON.stringify(fieldsOrdered)]
   );
 };
 

src/features/collections/CollectionDetail.tsx

@@ -24,7 +24,8 @@ import { Loader } from '../../common/components/Loader';
 import { CollectionSidebar } from './CollectionSidebar';
 import {
   clearFilter,
-  clearFilters,
+  clearFiltersAndColumnMeta,
+  setColumnMeta,
   FilterState,
   setFilter,
   useCurrentSelection,
@@ -271,9 +272,10 @@ const useCollectionFilters = (collectionId: string | undefined) => {
   );
   useEffect(() => {
     if (collectionId && filterData) {
-      dispatch(clearFilters([collectionId, context]));
+      dispatch(clearFiltersAndColumnMeta([collectionId, context]));
       filterData.columns.forEach((column) => {
         const current = filters && filters[column.key];
+        dispatch(setColumnMeta([collectionId, context, column.key, column]));
         if (
           column.type === 'date' ||
           column.type === 'float' ||