RE2022-241: Microtrait update

package.json

@@ -71,8 +71,10 @@
     "@types/d3-zoom": "^3.0.3",
     "@types/jest": "^29.5.1",
     "@types/node": "^20.1.3",
+    "@types/plotly.js": "^2.12.30",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "@types/react-plotly.js": "^2.6.3",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.55.0",

src/app/App.tsx

@@ -17,7 +17,6 @@ import { ModalDialog } from '../features/layout/Modal';
 import { useLoggedInProfileUser } from '../features/profile/profileSlice';
 import Routes from './Routes';
 import classes from './App.module.scss';
-import { TooltipContainer } from '../common/components/Tooltip';
 
 const useInitApp = () => {
   const dispatch = useAppDispatch();
@@ -68,7 +67,6 @@ const App: FC = () => {
             </Loader>
             <Toaster />
             <ModalDialog />
-            <TooltipContainer />
           </ErrorBoundary>
         </div>
       </div>

src/common/api/collectionsApi.ts

@@ -99,13 +99,13 @@ export interface HeatMapCell {
   val: number | boolean;
 }
 
-export interface HeatMapRow<Meta = unknown> {
+export interface HeatMapRow {
   match: boolean;
   sel: boolean;
   kbase_id: KBaseId;
   kbase_display_name: string;
   cells: HeatMapCell[];
-  meta?: Meta;
+  meta?: Record<string, string>;
 }
 
 interface HeatMapColumnCategory {
@@ -115,9 +115,10 @@ interface HeatMapColumnCategory {
 
 export interface HeatMapColumn {
   col_id: string;
-  name: string;
   description: string;
+  name: string;
   type: 'float' | 'int' | 'bool' | 'count';
+  [key: string]: string;
 }
 
 interface ClientError {
@@ -890,19 +891,16 @@ export const collectionsApi = baseApi.injectEndpoints({
   }),
 });
 
+export type CollectionsReturnType =
+  typeof collectionsApi['endpoints'][keyof typeof collectionsApi['endpoints']]['initiate'];
+
 export const parseCollectionsError = (
   /**result.error object from any collections query.
    * The type definition is unfortunately a bit visually hairy.
    * But all the typedef is doing is extracting the error type.*/
   error:
     | Extract<
-        Awaited<
-          ReturnType<
-            ReturnType<
-              typeof collectionsApi['endpoints'][keyof typeof collectionsApi['endpoints']]['initiate']
-            >
-          >
-        >,
+        Awaited<ReturnType<ReturnType<CollectionsReturnType>>>,
         { error: unknown }
       >['error']
     | undefined

src/common/components/Table.tsx

@@ -7,6 +7,7 @@ import {
   Table as TableType,
   Row,
 } from '@tanstack/react-table';
+import type { RowData } from '@tanstack/react-table';
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome';
 import {
   faArrowLeftLong,
@@ -22,6 +23,17 @@ import { CheckBox } from './CheckBox';
 import { Loader } from './Loader';
 import { HeatMapRow } from '../api/collectionsApi';
 
+/*
+See also: https://tanstack.com/table/v8/docs/api/core/column-def#meta
+This supports passing arbitrary data into the table.
+ */
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    [key: string]: string;
+  }
+}
+
 type ColumnOptions = {
   textAlign?: 'left' | 'right' | 'center';
 };
@@ -108,13 +120,15 @@ export const Table = <Datum,>({
 };
 
 export const Pagination = <Datum,>({
-  table,
   maxPage,
+  table,
+  className = '',
   /**Odd, >=9*/
   totalButtons = 9,
 }: {
-  table: TableType<Datum>;
   maxPage: number;
+  table: TableType<Datum>;
+  className?: string;
   totalButtons?: number;
 }) => {
   if (totalButtons < 9 || totalButtons % 2 !== 1)
@@ -136,6 +150,8 @@ export const Pagination = <Datum,>({
     buttons.push(p);
   }
 
+  const extraClasses = className ? `${className} ` : '';
+  const classNamePagination = `${extraClasses}${classes.pagination}`;
   // add skip-to-start
   if (buttons[0] !== start) {
     buttons[0] = start;
@@ -147,9 +163,10 @@ export const Pagination = <Datum,>({
   }
   buttons.unshift(
     <Button
-      key="prev"
+      className={classNamePagination}
       color="base"
       disabled={!table.getCanPreviousPage()}
+      key="prev"
       onClick={() => table.previousPage()}
     >
       <FAIcon icon={faArrowLeftLong} />
@@ -160,16 +177,22 @@ export const Pagination = <Datum,>({
   if (buttons[buttons.length - 1] !== end) {
     buttons[buttons.length - 1] = end;
     buttons[buttons.length - 2] = (
-      <Button key="etc-end" color="base" disabled>
+      <Button
+        key="etc-end"
+        className={classNamePagination}
+        color="base"
+        disabled
+      >
         {'...'}
       </Button>
     );
   }
   buttons.push(
     <Button
-      key="next"
+      className={classNamePagination}
       color="base"
       disabled={!table.getCanNextPage() || curr >= maxPage}
+      key="next"
       onClick={() => table.nextPage()}
     >
       <FAIcon icon={faArrowRightLong} />
@@ -178,10 +201,11 @@ export const Pagination = <Datum,>({
   const buttonList = buttons.map((button, ix) =>
     typeof button === 'number' ? (
       <Button
-        key={button}
+        className={classNamePagination}
         color="base"
         disabled={button === curr || button > maxPage}
         hidden={button > maxPage} // Hides the max page when we can't display it
+        key={button}
         onClick={() => table.setPageIndex(button)}
       >
         {button + 1}
@@ -191,7 +215,7 @@ export const Pagination = <Datum,>({
     )
   );
   return (
-    <div className={classes['pagination']} data-testid="pagination">
+    <div className={classNamePagination} data-testid="pagination">
       {buttonList}
     </div>
   );

src/common/components/index.tsx

@@ -1,8 +1,9 @@
 import { Button } from './Button';
 import { Dropdown } from './Dropdown';
 import { Input } from './Input';
+import { Loader } from './Loader';
 import { PlaceholderFactory } from './PlaceholderFactory';
 import { Select, SelectOption } from './Select';
 
-export { Button, Dropdown, Input, PlaceholderFactory, Select };
+export { Button, Dropdown, Input, Loader, PlaceholderFactory, Select };
 export type { SelectOption };

src/features/collections/CollectionDetail.tsx

@@ -251,8 +251,9 @@ const FilterChips = ({ collectionId }: { collectionId: string }) => {
       {filterEntries.map(([column, filter]) => {
         return (
           <FilterChip
-            name={column}
             filter={filter}
+            key={`${column}-${filter.type}`}
+            name={column}
             onDelete={() => clearFilterState(column)}
           />
         );
@@ -277,7 +278,7 @@ const FilterMenu = (props: {
         {filterEntries.flatMap(([column, filter]) => {
           const hasVal = Boolean(filter.value);
           const children = [
-            <Divider key={column + '__label'} textAlign="left">
+            <Divider key={`${column}__label`} textAlign="left">
               <FilterChip
                 name={column}
                 filter={filter}
@@ -287,7 +288,7 @@ const FilterMenu = (props: {
                 onDelete={hasVal ? () => clearFilterState(column) : undefined}
               />
             </Divider>,
-            <MenuItem>
+            <MenuItem key={`${column}__label`}>
               <FilterControls
                 column={column}
                 filter={filter}