diff --git a/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx b/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx index c9b675a1..f397dc2a 100644 --- a/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx +++ b/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx @@ -6,7 +6,8 @@ import { GridColDef, GridRenderCellParams, GridCsvExportOptions, - GridNoRowsOverlay + GridNoRowsOverlay, + GridColumnVisibilityModel } from "@mui/x-data-grid"; import { Typography, @@ -32,7 +33,7 @@ import { import MoreVertIcon from '@mui/icons-material/MoreVert'; import TableHeader from "./HomeHeader"; import { Antibody } from "../../rest"; -import { checkIfFilterSetExists, getProperCitation, getRandomId } from "../../utils/antibody"; +import { checkIfFilterSetExists, getColumnsToDisplay, getProperCitation, getRandomId } from "../../utils/antibody"; import { UserContext } from "../../services/UserService"; import ConnectAccount from "./ConnectAccount"; import { ALLRESULTS, SEARCH_MODES, MYSUBMISSIONS, BLANK_FILTER_MODEL } from "../../constants/constants"; @@ -158,8 +159,8 @@ const RenderVendor = (props) => ( className="col-vendor" > {props.row.url ? - {props.row.vendorName} - : props.row.vendorName} + {props.value} + : props.value} ) @@ -447,14 +448,12 @@ const AntibodiesTable = (props) => { field: "abName", headerName: "Name", hide: true, - renderCell: RenderCellContent, }, { ...columnsDefaultProps, field: "abId", headerName: "ID", hide: true, - renderCell: RenderCellContent, }, { ...columnsDefaultProps, @@ -481,12 +480,11 @@ const AntibodiesTable = (props) => { // }, { ...columnsDefaultProps, - field: "species", + field: "targetSpecies", headerName: "Target species", valueGetter: getList, hide: true, sortable: false, - renderCell: RenderCellContent, }, { ...columnsDefaultProps, @@ -541,18 +539,16 @@ const AntibodiesTable = (props) => { field: "cloneId", headerName: "Clone ID", hide: true, - renderCell: RenderCellContent, }, { ...columnsDefaultProps, field: "sourceOrganism", headerName: "Host organism", flex: 1.5, - renderCell: RenderCellContent, }, { ...columnsDefaultProps, - field: "vendor", + field: "vendorName", headerName: "Vendor", flex: 1.5, renderCell: RenderVendor, @@ -562,7 +558,6 @@ const AntibodiesTable = (props) => { ...columnsDefaultProps, field: "catalogNum", headerName: "Cat Num", - renderCell: RenderCellContent, }, { ...columnsDefaultProps, @@ -609,6 +604,8 @@ const AntibodiesTable = (props) => { }, }; + const [showColumns, setShowColumns] = useState(getColumnsToDisplay(columns)); + const NoRowsOverlay = () => typeof activeSearch === "string" && activeSearch !== "" && @@ -645,6 +642,8 @@ const AntibodiesTable = (props) => { onSortModelChange={(model) => addSortingColumn(model)} checkboxSelection disableSelectionOnClick + columnVisibilityModel={showColumns || {}} + onColumnVisibilityModelChange={(model) => setShowColumns(model)} getRowHeight={() => "auto"} loading={!searchedAntibodies || loader} onFilterModelChange={(model) => addNewFilterColumn(model)} diff --git a/applications/portal/frontend/src/utils/antibody.ts b/applications/portal/frontend/src/utils/antibody.ts index fbbdc34c..22d52975 100644 --- a/applications/portal/frontend/src/utils/antibody.ts +++ b/applications/portal/frontend/src/utils/antibody.ts @@ -1,7 +1,8 @@ -import { GridFilterModel } from "@mui/x-data-grid"; +import { GridFilterModel, GridColumnVisibilityModel } from "@mui/x-data-grid"; import { Antibody, SearchCriteriaOptions } from "../rest"; import { modelType } from "../constants/constants"; + export function getProperCitation(a: Antibody) { if(!a) {return "ERROR";} return a.catalogNum && a.vendorName ? `(${a.vendorName} Cat# ${a?.catalogNum?.split(" (")[0]}, RRID:AB_${a.abId})`: "ERROR"; @@ -88,4 +89,14 @@ export function mapColumnToBackendModel(columnItems, modeltype) { } }); return newFilters; -} \ No newline at end of file +} + + +export const getColumnsToDisplay = (columns) => { + let showcolList: GridColumnVisibilityModel = {}; + columns.filter((column) => column?.hide === true).map((column) => { + showcolList[column.field] = false; + }); + return showcolList; +} +