From 8326117caf2208e3f68d850d5c4d8cf41437fdaf Mon Sep 17 00:00:00 2001
From: Jonathan Fisher <49597360+jpfisher72@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:39:57 -0400
Subject: [PATCH] Type Changes to DataTable (#46)

* Working

* Deprecate FunctionalRender

* Increment version

* Version
---
 package.json                                  |   2 +-
 .../DataTable/DataTable.stories.tsx           | 302 +++++++++++-------
 src/components/DataTable/datatable.tsx        |  72 +++--
 src/components/DataTable/types.ts             |  69 +++-
 4 files changed, 285 insertions(+), 160 deletions(-)

diff --git a/package.json b/package.json
index 9518bc4..c918f4e 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@weng-lab/psychscreen-ui-components",
   "description": "Typescript and Material UI based components used for psychSCREEN",
   "author": "SCREEN Team @ UMass Chan Medical School",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "license": "MIT",
   "type": "module",
   "typings": "dist/index.d.ts",
diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
index 3acd1cd..cebc726 100644
--- a/src/components/DataTable/DataTable.stories.tsx
+++ b/src/components/DataTable/DataTable.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { DataTable, DataTableColumn, DataTableProps } from '../..';
 import {
@@ -7,15 +7,13 @@ import {
   Checkbox,
   FormControlLabel,
   FormGroup,
+  IconButton,
   Menu,
   MenuItem,
   Stack,
   Typography,
 } from '@mui/material';
-
-/**
- * @todo These stories should really be cleaned up, especially dense and headerRender
- */
+import { Close } from '@mui/icons-material';
 
 const meta = {
   title: 'DataTable',
@@ -38,21 +36,51 @@ type Row = {
 export default meta;
 type Story = StoryObj<DataTableProps<Row>>;
 
+const CountComponent = (props: {info?: Row}) => {
+  const [count, setCount] = useState(0)
+  return <Typography onClick={() => {setCount(count + 1); if (props?.info?.index) console.log(props.info.index)}}>Click to increase count: {count}</Typography>
+}
 
-const FCCOLUMNS: DataTableColumn<Row>[] = [
+const FunctionalRenderCols: DataTableColumn<Row>[] = [
   {
     header: 'Functional Column',
     value: (row) => row.index,
-    FunctionalRender: () => {
-      const [index, setIndex] = useState(0);
+    render: (row) => {
+      const [count, setCount] = useState(0);
+      
       return (
         <>
-          <strong>Index</strong>: {index}
+          <strong>Row {row.index}</strong>: {count}
           <br />
-          <button onClick={() => setIndex(index + 1)}>Increment Index</button>
+          <button onClick={() => setCount(count + 1)}>Increment Count</button>
         </>
       );
-    },
+    }
+  },
+  {
+    header: 'Functional Column',
+    value: (row) => row.index,
+    render: (row) => {
+      const [count, setCount] = useState(0);
+      
+      return (
+        <>
+          <strong>Row {row.index}</strong>: {count}
+          <br />
+          <button onClick={() => setCount(count + 1)}>Increment Count</button>
+        </>
+      );
+    }
+  },
+  {
+    header: 'Functional Column',
+    value: (row) => row.index,
+    render: (row) => <CountComponent info={row} />
+  },
+  {
+    header: 'Functional Column',
+    value: (row) => row.index,
+    render: (row) => <CountComponent info={row} />
   },
 ];
 
@@ -86,6 +114,7 @@ const COLUMNS2: DataTableColumn<Row>[] = [
   {
     header: 'Index',
     value: (row) => row.index,
+    HeaderRender: () => <Typography>Index</Typography>,
     tooltip: 'This is the index column',
   },
   {
@@ -223,14 +252,14 @@ export const HoverInfo: Story = {
   }
 }
 
-export const FunctionalComponentColumn: Story = {
+export const FunctionalRender: Story = {
   args: {
     rows: ROWS,
-    columns: FCCOLUMNS,
+    columns: FunctionalRenderCols,
     tableTitle: 'Table Title',
     searchable: true,
     showMoreColumns: true,
-    noOfDefaultColumns: 5,
+    itemsPerPage: 5,
   }
 }
 
@@ -448,7 +477,106 @@ export const LotsOfCols: Story = {
  }
 }
 
-const headeRenderCOLUMNS = (setX: React.Dispatch<React.SetStateAction<boolean | null>>) => {
+const HeaderComponent = (props: {setX: React.Dispatch<React.SetStateAction<boolean | null>>}) => {
+  const [distanceChecked, setDistanceChecked] = useState(true);
+  const [CTCF_ChIAPETChecked, setCTCF_ChIAPETChecked] = useState(false);
+  const [RNAPII_ChIAPETChecked, setRNAPII_ChIAPETChecked] =
+    useState(false);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(() => {
+    console.log('initialization performed');
+    return null;
+  });
+
+  const open = Boolean(anchorEl);
+
+  const handleClose = () => {
+    console.log('menu closed, state of checkboxes pushed to main state');
+    setAnchorEl(null);
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    console.log('New Anchor Set');
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleCheckboxChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    value: 0 | 1 | 2
+  ) => {
+    switch (value) {
+      case 0:
+        setDistanceChecked(event.target.checked);
+        props.setX(event.target.checked);
+        break;
+      case 1:
+        setCTCF_ChIAPETChecked(event.target.checked);
+        break;
+      case 2:
+        setRNAPII_ChIAPETChecked(event.target.checked);
+        break;
+    }
+  };
+
+  return (
+    <Box>
+      <Stack
+        direction="row"
+        alignItems="flex-start"
+        component="button"
+        onClick={handleClick}
+      >
+        <Typography variant="body2">Linked Genes</Typography>
+      </Stack>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+        }}
+      >
+        <FormGroup>
+          <MenuItem>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={distanceChecked}
+                  onChange={(event) => handleCheckboxChange(event, 0)}
+                />
+              }
+              label={`Distance`}
+            />
+          </MenuItem>
+          <MenuItem>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={CTCF_ChIAPETChecked}
+                  onChange={(event) => handleCheckboxChange(event, 1)}
+                />
+              }
+              label={`CTCF-ChIAPET`}
+            />
+          </MenuItem>
+          <MenuItem>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={RNAPII_ChIAPETChecked}
+                  onChange={(event) => handleCheckboxChange(event, 2)}
+                />
+              }
+              label={`RNAPII-ChIAPET`}
+            />
+          </MenuItem>
+        </FormGroup>
+      </Menu>
+    </Box>
+  );
+}
+
+const headeRenderCOLUMNS: (setX: React.Dispatch<React.SetStateAction<boolean | null>>) => DataTableColumn<Row>[] = (setX) => {
   return [
     {
       header: 'Index',
@@ -475,104 +603,7 @@ const headeRenderCOLUMNS = (setX: React.Dispatch<React.SetStateAction<boolean |
       value: (row: {index: number, text: string, color: string, description: string}) => row.description,
       unsortable: true,
       tooltip: 'This is the Description column. It describes the row.',
-      HeaderRender: () => {
-        const [distanceChecked, setDistanceChecked] = useState(true);
-        const [CTCF_ChIAPETChecked, setCTCF_ChIAPETChecked] = useState(false);
-        const [RNAPII_ChIAPETChecked, setRNAPII_ChIAPETChecked] =
-          useState(false);
-        const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(() => {
-          console.log('initialization performed');
-          return null;
-        });
-
-        const open = Boolean(anchorEl);
-
-        const handleClose = () => {
-          console.log('menu closed, state of checkboxes pushed to main state');
-          setAnchorEl(null);
-        };
-
-        const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-          console.log('New Anchor Set');
-          setAnchorEl(event.currentTarget);
-        };
-
-        const handleCheckboxChange = (
-          event: React.ChangeEvent<HTMLInputElement>,
-          value: 0 | 1 | 2
-        ) => {
-          switch (value) {
-            case 0:
-              setDistanceChecked(event.target.checked);
-              setX(event.target.checked);
-              break;
-            case 1:
-              setCTCF_ChIAPETChecked(event.target.checked);
-              break;
-            case 2:
-              setRNAPII_ChIAPETChecked(event.target.checked);
-              break;
-          }
-        };
-
-        return (
-          <Box>
-            <Stack
-              direction="row"
-              alignItems="flex-start"
-              component="button"
-              onClick={handleClick}
-            >
-              <Typography variant="body2">Linked Genes</Typography>
-            </Stack>
-            <Menu
-              id="basic-menu"
-              anchorEl={anchorEl}
-              open={open}
-              onClose={handleClose}
-              MenuListProps={{
-                'aria-labelledby': 'basic-button',
-              }}
-            >
-              <FormGroup>
-                <MenuItem>
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        checked={distanceChecked}
-                        onChange={(event) => handleCheckboxChange(event, 0)}
-                      />
-                    }
-                    label={`Distance`}
-                  />
-                </MenuItem>
-                <MenuItem>
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        checked={CTCF_ChIAPETChecked}
-                        onChange={(event) => handleCheckboxChange(event, 1)}
-                      />
-                    }
-                    label={`CTCF-ChIAPET`}
-                  />
-                </MenuItem>
-                <MenuItem>
-                  <FormControlLabel
-                    control={
-                      <Checkbox
-                        checked={RNAPII_ChIAPETChecked}
-                        onChange={(event) => handleCheckboxChange(event, 2)}
-                      />
-                    }
-                    label={`RNAPII-ChIAPET`}
-                  />
-                </MenuItem>
-              </FormGroup>
-            </Menu>
-          </Box>
-        );
-      },
+      HeaderRender: () => <HeaderComponent setX={setX} />,
     },
   ];
 };
@@ -580,7 +611,6 @@ const headeRenderCOLUMNS = (setX: React.Dispatch<React.SetStateAction<boolean |
 export const HeaderRender: Story = {
   args: {
     rows: ROWS,
-    columns: [], //this will be overwritten
     itemsPerPage: 5,
     tableTitle: "Header Render Test",
     searchable: true
@@ -588,11 +618,53 @@ export const HeaderRender: Story = {
   render: (args) => {
     const [x, setX] = React.useState<boolean | null>(null);
     useEffect(() => console.log(x));
+
+    const colFunc = useCallback((setter: React.Dispatch<React.SetStateAction<boolean | null>>) => {
+      return headeRenderCOLUMNS(setter)
+    }, [])
+
+    console.log("rendering")
+
     return (
       <DataTable
         {...args}
-        columns={headeRenderCOLUMNS(setX)}
+        columns={colFunc(setX)}
       />
     )
   }
+}
+
+export const TitleRender: Story = {
+  args: {
+    rows: ROWS,
+    columns: COLUMNS,
+    searchable: true
+  },
+  render: (args) => {
+    return (
+      <Stack spacing={2}>
+        <Typography>Normal String Title</Typography>
+        <DataTable
+          {...args}
+          tableTitle={"Test Title"}
+        />
+        <Typography>Custom Typography Title</Typography>
+        <DataTable
+          {...args}
+          tableTitle={<Typography variant='body2' color='secondary'>Small title</Typography>}
+        />
+        <Typography>Component title with onClick</Typography>
+        <DataTable
+          {...args}
+          tableTitle={<Stack direction={"row"} alignItems={"center"}><Typography>{"Click the button -->"}</Typography><IconButton onClick={() => window.alert("Clicked!")}><Close /></IconButton></Stack> }
+        />
+        <Typography>Function Component title using hooks</Typography>
+        <DataTable
+          {...args}
+          tableTitle={<CountComponent />}
+        />
+      </Stack>
+      
+    )
+  }
 }
\ No newline at end of file
diff --git a/src/components/DataTable/datatable.tsx b/src/components/DataTable/datatable.tsx
index 400f612..ba4af21 100644
--- a/src/components/DataTable/datatable.tsx
+++ b/src/components/DataTable/datatable.tsx
@@ -101,9 +101,10 @@ const boxStyle = {
   p: 4,
 };
 
-const DataTable = <T,>(
+const DataTable = <T extends object>(
   props: DataTableProps<T>
 ) => {
+
   const [page, setPage] = useState(props.page || 0);
   const [rowsPerPage, setRowsPerPage] = useState<number>(() => {
     if (Array.isArray(props.itemsPerPage)) { return props.itemsPerPage[0] }
@@ -291,8 +292,6 @@ const DataTable = <T,>(
     }
   }, [containerRef, arrowLeftRef, arrowRightRef]);
 
-  console.log(document.getElementById('row0')?.offsetHeight)
-
   return (
     (<Paper
       elevation={3}
@@ -309,31 +308,34 @@ const DataTable = <T,>(
           borderTopRightRadius: 4,
         }}
       >
-        <Typography
-          variant="h5"
-          noWrap
-          component="div"
-          sx={{
-            flexGrow: 1,
-            display: { xs: 'none', sm: 'block' },
-            fontWeight: 'normal',
-            color: `${
-              props.headerColor ? props.headerColor.textColor : 'inherit'
-            }`,
-          }}
-        >
-          {props.tableTitle}
-          {props.titleHoverInfo && (
-            <Tooltip
-              title={props.titleHoverInfo}
-              color="primary"
-              sx={{ ml: 1 }}
-              placement="right-start"
+        <Stack direction="row" alignItems={"center"} flexGrow={1}>
+          {(typeof props.tableTitle === "string" ?
+            <Typography
+              variant="h5"
+              noWrap
+              component="div"
+              sx={{
+                display: { xs: 'none', sm: 'block' },
+                fontWeight: 'normal',
+                color: `${props.headerColor ? props.headerColor.textColor : 'inherit'}`,
+              }}
             >
-              <InfoIcon />
-            </Tooltip>
-          )}
-        </Typography>
+              {props.tableTitle}
+            </Typography>
+            :
+            props.tableTitle)
+          }
+          {props.titleHoverInfo && (
+          <Tooltip
+            title={props.titleHoverInfo}
+            color="primary"
+            sx={{ ml: 1 }}
+            placement="right-start"
+          >
+            <InfoIcon />
+          </Tooltip>
+        )}
+        </Stack>
         {props.showMoreColumns &&
           props.columns.length > (props.noOfDefaultColumns || 5) && (
             <Button
@@ -407,7 +409,7 @@ const DataTable = <T,>(
                       hideSortIcon
                     >
                       {column.HeaderRender ? (
-                        <column.HeaderRender />
+                          <column.HeaderRender />
                       ) : (
                         column.header
                       )}
@@ -471,13 +473,13 @@ const DataTable = <T,>(
                             props.onCellMouseLeave && props.onCellMouseLeave()
                           }
                         >
-                          {column.FunctionalRender ? (
-                            column.FunctionalRender(row)
-                          ) : column.render ? (
-                            column.render(row)
-                          ) : (
-                            column.value(row)
-                          )}
+                          {column.FunctionalRender ?
+                            <column.FunctionalRender {...row} />
+                            : column.render ?
+                              <column.render {...row} />
+                              :
+                              column.value(row)
+                          }
                         </TableCell>
                       );
                     })}
diff --git a/src/components/DataTable/types.ts b/src/components/DataTable/types.ts
index 8d68ab3..3e30fef 100644
--- a/src/components/DataTable/types.ts
+++ b/src/components/DataTable/types.ts
@@ -1,18 +1,42 @@
-export type DataTableColumn<T> = {
+import React from "react";
+
+export interface DataTableColumn<T> {
   tooltip?: string
   header: string
   /**
-   * Custom render function for the column header
+   * Use to render React.ReactNode in column header. Used instead of ```header``` if specified
+   * 
+   * @example
+   * ```tsx
+   * HeaderRender: () => <Typography>Header Here</Typography>
+   * } 
+   * ```
+   * 
    */
-  HeaderRender?: () => JSX.Element;
+  HeaderRender?: () => React.ReactNode;
   value: (row: T) => string | number
   search?: (row: T) => boolean
   unsearchable?: boolean
-  render?: (row: T) => string | JSX.Element
   /**
-   * Custom render function for the row
+   * Use to render React.ReactNode for a column. Can be string | number | whatever else react can render
+   * 
+   * @example
+   * ```tsx
+   * (row: T) => {
+   *  //You can use hooks here
+   *  return (
+   *    <CustomComponent>{row.whatever}</Typography>
+   *  ) 
+   * }
+   * 
+   * ```
+   */
+  render?: (row: T) => React.ReactNode
+  /**
+   * @deprecated use render instead.
+   * @todo remove this prop when new component library is up
    */
-  FunctionalRender?: (row: T) => JSX.Element;
+  FunctionalRender?: ((row: T) => React.JSX.Element);
   sort?: (a: T, b: T) => number
   unsortable?: boolean
 }
@@ -21,7 +45,7 @@ type RGB = `rgb(${number}, ${number}, ${number})` | `rgb(${number},${number},${n
 type RGBA = `rgba(${number}, ${number}, ${number}, ${number})` | `rgba(${number},${number},${number},${number})`;
 type HEX = `#${string}` | `# ${string}`;
 
-export type DataTableProps<T> = {
+export interface DataTableProps<T> {
   columns: DataTableColumn<T>[]
   rows: T[]
   
@@ -35,9 +59,36 @@ export type DataTableProps<T> = {
    * 
    */
   itemsPerPage?: number | number[]
-  
   hidePageMenu?: boolean
-  tableTitle?: string
+  /**
+   * Allows passing all of the things React can render.
+   * 
+   * @example
+   * ```
+   * "Title Here"
+   * ```
+   * or
+   * ```jsx
+   * <Typography onClick={handleClick}>Title Here</Typography>
+   * ```
+   * 
+   * If passing a string will be wrapped as such:
+   * ```jsx 
+   * <Typography
+   *  variant="h5"
+   *  noWrap
+   *  component="div"
+   *  sx={{
+   *    display: { xs: 'none', sm: 'block' },
+   *    fontWeight: 'normal',
+   *    color: `${props.headerColor ? props.headerColor.textColor : 'inherit'}`,
+   *  }}
+   * >
+   *  {props.tableTitle}
+   * </Typography>
+   * ```
+   */
+  tableTitle?: React.ReactNode
   selectable?: boolean
   searchable?: boolean
   search?: string