Merge pull request #265 from MetaCell/feature/AREG-147

AREG-147 When filtering from a field, the field name is not prepopulated
MetaCell · Sep 27, 2024 · c211955 · c211955
2 parents 5fda5f1 + bf09a58
commit c211955
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx b/applications/portal/frontend/src/components/Home/AntibodiesTable.tsx
@@ -55,7 +55,7 @@ const StyledCheckBox = (props) => {
   );
 };
 
-const getRowId = (ab: Antibody) => `${ab.abId}${Math.random()}`;
+const getRowId = (ab: Antibody) => `${ab.ix}`;
 
 const CustomToolbar = ({ activeTab, searchedAntibodies, filterModel }) => {
   const [activeSelection, setActiveSelection] = useState(true);
@@ -433,7 +433,7 @@ const AntibodiesTable = (props) => {
   }
 
   const setNewFilterColumn = (model) => {
-    let newblankFilter = { ...BLANK_FILTER_MODEL, field: model.items[0].field, id: getRandomId() }
+    let newblankFilter = { ...BLANK_FILTER_MODEL, columnField: model.items[0].field, field: model.items[0].field, id: getRandomId() }
     filterModel.items.push(newblankFilter);
     setFilterModel(filterModel);
   }
@@ -655,19 +655,22 @@ const AntibodiesTable = (props) => {
         "& .MuiTypography-body1": {
           fontSize: "0.875rem",
           color: "grey.500",
-        },
+        }
       },
     },
-    columnMenuSlots: {
-      columnMenu: {
-        sx: {
-          "& .MuiMenuItem-root": {
-            fontSize: "0.875rem",
-            color: "grey.500",
-          },
-        },
-      },
+    columnMenu: {
+      style: {
+        fontSize: "0.875rem",
+        color: "grey.500",
+      }
     },
+    basePopper: {
+      sx: {
+        "& .MuiListItemText-root .MuiListItemText-primary": {
+          display: "flex"
+        }
+      }
+    }
   };
 
   const [showColumns, setShowColumns] = useState<GridColumnVisibilityModel>(getColumnsToDisplay(columns));

diff --git a/applications/portal/frontend/src/components/Home/CustomFilterPanel.tsx b/applications/portal/frontend/src/components/Home/CustomFilterPanel.tsx
@@ -141,7 +141,12 @@ const CustomFilterRow = ({ columns, filterSet, handleFilterSet, removeFilterSet
         value={filterSet.columnField}
         onChange={(e: SelectChangeEvent) => handleFilterSet({ ...filterSet, columnField: e.target.value })}
         size="small"
-        sx={{ width: "12em" }}
+        sx={{ 
+          width: "12em",
+          '& .MuiSelect-select': {
+            textAlign: 'left'
+          }
+        }}
       >
         {columns.map((column) => (
           <MenuItem key={column.field} value={column.field}>
@@ -154,7 +159,12 @@ const CustomFilterRow = ({ columns, filterSet, handleFilterSet, removeFilterSet
         value={filterSet.operatorValue}
         onChange={(e: SelectChangeEvent) => changeOperator(e.target.value)}
         size="small"
-        sx={{ width: "8em" }}
+        sx={{ 
+          width: "8em",
+          '& .MuiSelect-select': {
+            textAlign: 'left'
+          }
+        }}
       >
         {Object.keys(operators).map((op) => (
           <MenuItem key={op} value={op}>