Add SciDataGrid and Filters components to explore-data task flow

Author: codytodonnell

strudel-components/lib/components/SciDataGrid.tsx

@@ -1,4 +1,4 @@
-import { Stack, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { DataGrid, DataGridProps, GridColDef, GridColumnHeaderParams, GridRenderCellParams } from '@mui/x-data-grid';
 import React, { ReactNode } from 'react';
 import { ArrayWithPopover } from './ArrayWithPopover';
@@ -40,15 +40,31 @@ const getGridColumns = (columns: SciDataGridColDef[]) => {
       ...gridColumn 
     } = column;
 
-    /** Render unit label underneath the headerName */
-    if (units) {
-      gridColumn.renderHeader = (params: GridColumnHeaderParams) => (
-        <Stack>
-          <Typography fontSize="0.875rem" fontWeight="bold">{params.colDef.headerName}</Typography>
-          <Typography fontSize="small" color="grey.700">{units}</Typography>
-        </Stack>
-      )
-    }
+    /** 
+     * Style column header and render unit label
+     * underneath the headerName if units supplied
+     */
+    gridColumn.renderHeader = (params: GridColumnHeaderParams) => (
+      <Box>
+        <Typography fontSize="0.875rem" fontWeight="bold">{params.colDef.headerName}</Typography>
+        {units && (
+          <Typography 
+            fontSize="small" 
+            color="grey.700"
+            sx={{
+              position: 'absolute',
+              bottom: '4px',
+              left: params.colDef.type !== 'number' ? 0 : 'auto',
+              right: params.colDef.type === 'number' ? 0 : 'auto',
+              transform: 'translate(0, 0)',
+              zIndex: 1000
+            }}
+          >
+            {units}
+          </Typography>
+        )}
+      </Box>
+    )
 
     /** Handle value transformation options */
     if (!gridColumn.valueFormatter) {

strudel-components/package-lock.json

@@ -38,11 +38,11 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.15",
-    "@mui/material": "^5.15.15",
-    "@mui/x-data-grid": "^7.11.0",
-    "@mui/x-date-pickers": "^7.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/material": "^5.15.14",
+    "@mui/x-data-grid": "^7.0.0",
+    "@mui/x-date-pickers": "^7.0.0",
     "dayjs": "^1.11.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"

strudel-components/package.json

@@ -13,9 +13,9 @@ function App() {
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <ThemeProvider theme={createTheme()}>
         <CssBaseline />
-        {/* <SciDataGridEx /> */}
+        <SciDataGridEx />
         {/* <FiltersExGroups /> */}
-        <FiltersExNoGroups />
+        {/* <FiltersExNoGroups /> */}
       </ThemeProvider>
     </LocalizationProvider>
   )

strudel-components/src/App.tsx

@@ -1,8 +1,8 @@
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { Button, Paper, Stack, TextField, Typography } from '@mui/material';
 import { GridEventListener } from '@mui/x-data-grid';
+import { SciDataGrid } from '@strudel-science/components';
 import React from 'react';
-import { DataGrid } from '@mui/x-data-grid';
 import { useExploreData } from '../_context/ContextProvider';
 import { setPreviewItem, setSearch } from '../_context/actions';
 
@@ -18,7 +18,7 @@ interface DataTablePanelProps {
 export const DataTablePanel: React.FC<DataTablePanelProps> = (props) => { 
   const {state, dispatch} = useExploreData();
 
-  const handleRowClick: GridEventListener<'rowClick'> = (rowData) => {
+  const handleRowClick: GridEventListener<"rowClick"> = (rowData) => {
     dispatch(setPreviewItem(rowData.row));
   };
 
@@ -53,9 +53,9 @@ export const DataTablePanel: React.FC<DataTablePanelProps> = (props) => {
           onChange={handleSearch}
         />
       </Stack>
-      <DataGrid
+      <SciDataGrid
         rows={state.filteredData || []}
-        getRowId={(row) => row[state.dataIdField]}
+        getRowId={(row: any) => row[state.dataIdField]}
         columns={state.columns}
         disableColumnSelector
         initialState={{
@@ -64,6 +64,7 @@ export const DataTablePanel: React.FC<DataTablePanelProps> = (props) => {
         {...props}
         onRowClick={handleRowClick}
         sx={{
+          border: 'none',
           '& .MuiDataGrid-cell:focus-within': {
             outline: 'none'
           },

strudel-taskflows/src/pages/explore-data/_components/DataTablePanel.tsx

@@ -34,6 +34,9 @@ export const FiltersPanel: React.FC<FiltersPanelProps> = (props) => {
       grouped={false}
       onClose={props.onClose}
       onChange={handleFiltersChange}
+      sx={{
+        border: 'none'
+      }}
     >
       {taskflow.pages.index.tableFilters.map((f, i) => (
         <FilterField

strudel-taskflows/src/pages/explore-data/_components/FiltersPanel.tsx

@@ -30,11 +30,14 @@ export const taskflow: ExploreDataConfig = {
         {
           field: "Organism",
           headerName: "Organism",
+          hasPopover: true,
+          units: "test",
           width: 200
         },
         {
           field: "Common Name",
           headerName: "Common Name",
+          units: "test",
           width: 200
         },
         {

strudel-taskflows/src/pages/explore-data/_config/taskflow.config.ts

@@ -1,4 +1,4 @@
-import { GridColDef } from "@mui/x-data-grid"
+import { SciDataGridColDef } from "@strudel-science/components"
 import { FilterComponent, FilterOperator } from "@strudel-science/components/dist/components/FilterField"
 
 /**
@@ -22,7 +22,7 @@ export interface ExploreDataConfig {
     index: {
       title: string,
       description: string,
-      tableColumns: GridColDef[],
+      tableColumns: SciDataGridColDef[],
       tableFilters: {
         field: string,
         label: string,