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;
+}
+