From 1b1403615f7e0da954811cd68961c4e1dfa39e5f Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Wed, 23 Apr 2025 22:54:11 +0200
Subject: [PATCH 1/6] ILEX-106 make intitial UI changes

---
 .../EditBulkTerms/EditBulkTermsDialog.jsx     |   5 +
 .../Dashboard/EditBulkTerms/SearchTerms.jsx   | 186 ++++++++++--------
 src/theme/index.jsx                           |   1 +
 3 files changed, 105 insertions(+), 87 deletions(-)

diff --git a/src/components/Dashboard/EditBulkTerms/EditBulkTermsDialog.jsx b/src/components/Dashboard/EditBulkTerms/EditBulkTermsDialog.jsx
index 47eeeb14..4fc33571 100644
--- a/src/components/Dashboard/EditBulkTerms/EditBulkTermsDialog.jsx
+++ b/src/components/Dashboard/EditBulkTerms/EditBulkTermsDialog.jsx
@@ -87,6 +87,11 @@ const EditBulkTermsDialog = ({ open, handleClose, activeStep, setActiveStep }) =
           isAllFieldsFilled={isAllFieldsFilled(searchConditions)}
         />
       }
+      sx={{
+        '& .MuiDialogContent-root': {
+          padding: 0
+        }
+      }}
     >
       <>
         {
diff --git a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
index d63e13af..082bd0d9 100644
--- a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
+++ b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
@@ -5,7 +5,8 @@ import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
 import CustomSingleSelect from "../../common/CustomSingleSelect";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import SearchTermsData from "../../../static/SearchTermsData.json";
-import {Button, Grid, Typography, Box, ToggleButton, ToggleButtonGroup} from "@mui/material";
+import {Button, Grid, Typography, Box, ToggleButton, ToggleButtonGroup, Divider, Stack, FormControlLabel} from "@mui/material";
+import CustomizedRadio from "../../common/CustomizedRadio";
 
 import { vars } from "../../../theme/variables";
 const { gray800 } = vars;
@@ -43,96 +44,107 @@ const SearchTerms = ({searchConditions, setSearchConditions, initialSearchCondit
   }));
 
   return (
-    <Box>
-      <Typography color={gray800} fontSize='1.125rem' fontWeight={600} mb='2.75rem'>
+    <Box sx={{ mt: 4.5 }}>
+      <Typography color={gray800} fontSize='1.125rem' fontWeight={600} mb={4} ml={6.5}>
         Search terms, selecting their attributes and values.
       </Typography>
-      {searchConditions.map((term, index) => (
-        <Grid container spacing='1.75rem' mb='2rem' key={index} alignItems='end'>
-          <Grid item xs={12} lg={1}>
-            {index === 0 ? (
-              <Box height='2.5rem' display='flex' alignItems='center'>
-                <Typography color={gray800} fontSize='.875rem' fontWeight={600}>
-                  Where
-                </Typography>
-              </Box>
-            ) : (
-              <ToggleButtonGroup
-                value={term.condition}
-                exclusive
-                onChange={(event, value) => handleConditionChange(event, value, index)}
-                sx={{
-                  height: '2.5rem',
-                }}
-              >
-                <ToggleButton value={'and'}>
-                  And
-                </ToggleButton>
-                <ToggleButton value={'or'}>
-                  Or
-                </ToggleButton>
-              </ToggleButtonGroup>
+      <Divider />
+      <Box mt={4} mb={4} ml={6.5} sx={{ display: "flex", alignItems: "center" }}>
+        <Typography sx={{ color: gray800, fontWeight: 500 }}>Do you want to edit a specific ontology?</Typography>
+        <Stack direction="row" spacing={2.5} sx={{ ml: 5 }}>
+          <FormControlLabel control={<CustomizedRadio />} label="Yes" sx={{ "& .MuiFormControlLabel-label": {color: "#313534", fontWeight: 500} }} />
+          <FormControlLabel control={<CustomizedRadio />} label="No" sx={{ "& .MuiFormControlLabel-label": {color: "#313534", fontWeight: 500} }} />
+        </Stack>
+      </Box>
+      <Divider />
+      <Box mt={4} mb={4} ml={6.5} mr={6.5}>
+        <Typography sx={{ color: gray800, fontWeight: 500 }}>Add filters</Typography>
+        {searchConditions.map((term, index) => (
+          <Grid container spacing={1.5} mt={3} mb={3.5} key={index} alignItems='end'>
+            <Grid item xs={12} lg={1}>
+              {index === 0 ? (
+                <Box height='2.5rem' display='flex' alignItems='center'>
+                  <Typography color={gray800} fontSize='.875rem' fontWeight={600}>
+                    Where
+                  </Typography>
+                </Box>
+              ) : (
+                <ToggleButtonGroup
+                  value={term.condition}
+                  exclusive
+                  onChange={(event, value) => handleConditionChange(event, value, index)}
+                  sx={{
+                    height: '2.5rem',
+                  }}
+                >
+                  <ToggleButton value={'and'}>
+                    And
+                  </ToggleButton>
+                  <ToggleButton value={'or'}>
+                    Or
+                  </ToggleButton>
+                </ToggleButtonGroup>
+              )}
+            </Grid>
+            <Grid item xs={12} lg={4}>
+              <Typography sx={{
+                fontSize: '1rem',
+                fontWeight: '500',
+                color: gray800,
+                mb: '.75rem'
+              }}>
+                Search for attribute
+              </Typography>
+              <CustomSingleSelect
+                isFormControlFullWidth={true}
+                value={term.attribute} onChange={(v) => handleTermChange(index, 'attribute', v)}
+                options={updatedColumnsArray}
+                placeholder='Choose an attribute'
+              />
+            </Grid>
+            <Grid item xs={12} lg={3}>
+              <DropDownConditions
+                value={term.relation}
+                onChange={(value) => handleTermChange(index, 'relation', value)}
+                index={index}
+                handleTermChange={handleTermChange}
+              />
+            </Grid>
+            <Grid item xs={12} lg={searchConditions.length > 1 ? 3 : 4}>
+              <CustomizedInput
+                value={term.value}
+                label='Value'
+                placeholder='Type a value'
+                onChange={(e) => handleTermChange(index, 'value', e.target.value)}
+              />
+            </Grid>
+            {searchConditions.length > 1 && (
+              <Grid item lg={searchConditions.length > 1 ? 1 : 0}>
+                <Button sx={{
+                  padding: '.625rem',
+                  minWidth: 'auto'
+                }} variant='outlined' onClick={() => handleDeleteTerm(index)}>
+                  <DeleteOutlineIcon />
+                </Button>
+              </Grid>
             )}
           </Grid>
-          <Grid item xs={12} lg={4}>
-            <Typography sx={{
-              fontSize: '1rem',
-              fontWeight: '500',
-              color: gray800,
-              mb: '.75rem'
-            }}>
-              Search for attribute
-            </Typography>
-            <CustomSingleSelect
-              isFormControlFullWidth={true}
-              value={term.attribute} onChange={(v) => handleTermChange(index, 'attribute', v)}
-              options={updatedColumnsArray}
-              placeholder='Choose an attribute'
-            />
-          </Grid>
-          <Grid item xs={12} lg={3}>
-            <DropDownConditions
-              value={term.relation}
-              onChange={(value) => handleTermChange(index, 'relation', value)}
-              index={index}
-              handleTermChange={handleTermChange}
-            />
-          </Grid>
-          <Grid item xs={12} lg={searchConditions.length > 1 ? 3 : 4}>
-            <CustomizedInput
-              value={term.value}
-              label='Value'
-              placeholder='Type a value'
-              onChange={(e) => handleTermChange(index, 'value', e.target.value)}
-            />
-          </Grid>
-          {searchConditions.length > 1 && (
-            <Grid item lg={searchConditions.length > 1 ? 1 : 0}>
-              <Button sx={{
-                padding: '.625rem',
-                minWidth: 'auto'
-              }} variant='outlined' onClick={() => handleDeleteTerm(index)}>
-                <DeleteOutlineIcon />
-              </Button>
-            </Grid>
-          )}
-        </Grid>
-      ))}
-      <Box display='flex' alignItems='center' justifyContent='space-between'>
-        <Button
-          startIcon={<AddOutlinedIcon />}
-          type="string"
-          color="secondary"
-          onClick={handleAddTerm}
-        >
-          Add Condition
-        </Button>
-        <Button
-          type="string"
-          onClick={handleClearAllConditions}
-        >
-          Clear all
-        </Button>
+        ))}
+        <Stack direction="row" spacing={1.5}>
+          <Button
+            startIcon={<AddOutlinedIcon />}
+            variant="outlined"
+            onClick={handleAddTerm}
+          >
+            Add Condition
+          </Button>
+          <Button
+            variant="text"
+            onClick={handleClearAllConditions}
+          >
+            Clear all
+          </Button>
+        </Stack>
       </Box>
     </Box>
   );
diff --git a/src/theme/index.jsx b/src/theme/index.jsx
index 29af2c1c..b166478a 100644
--- a/src/theme/index.jsx
+++ b/src/theme/index.jsx
@@ -494,6 +494,7 @@ const theme = createTheme({
 				textPrimary: {
 					color: gray600,
 					background: white,
+					padding: "0.625rem 0.875rem",
 					"&:hover": {
 						background: gray100,
 						color: gray700,

From bc31e031bf0aaedd9a3eb332b749f3a15926d1f1 Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Thu, 24 Apr 2025 13:56:51 +0200
Subject: [PATCH 2/6] ILEX-106 make ui changes

---
 .../Dashboard/EditBulkTerms/SearchTerms.jsx   | 65 ++++++++++++++-----
 src/components/common/CustomizedRadio.jsx     |  4 +-
 2 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
index 082bd0d9..faff1d91 100644
--- a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
+++ b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
@@ -1,17 +1,38 @@
 import PropTypes from "prop-types";
+import { useState } from "react";
+import { Button, Grid, Typography, Box, ToggleButton, ToggleButtonGroup, Divider, Stack, FormControlLabel, RadioGroup } from "@mui/material";
 import DropDownConditions from "./DropDownConditions";
 import CustomizedInput from "../../common/CustomizedInput";
 import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
 import CustomSingleSelect from "../../common/CustomSingleSelect";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import SearchTermsData from "../../../static/SearchTermsData.json";
-import {Button, Grid, Typography, Box, ToggleButton, ToggleButtonGroup, Divider, Stack, FormControlLabel} from "@mui/material";
 import CustomizedRadio from "../../common/CustomizedRadio";
+import OntologySearch from "../../SingleTermView/OntologySearch";
 
 import { vars } from "../../../theme/variables";
-const { gray800 } = vars;
+const { gray800, gray700 } = vars;
+
+const styles = {
+  title: {
+    color: gray800,
+    fontWeight: 600
+  },
+  subtitle: {
+    color: gray800,
+    fontWeight: 500
+  },
+  radioLabel: {
+    "& .MuiFormControlLabel-label": {
+      color: gray700, 
+      fontWeight: 500
+    }
+  }
+}
+
+const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchConditions }) => {
+  const [ontologyEditOption, setOntologyEditOption] = useState("no");
 
-const SearchTerms = ({searchConditions, setSearchConditions, initialSearchConditions}) => {
   const handleTermChange = (index, field, value) => {
     const newTerms = [...searchConditions];
     newTerms[index][field] = value;
@@ -38,6 +59,10 @@ const SearchTerms = ({searchConditions, setSearchConditions, initialSearchCondit
     setSearchConditions([initialSearchConditions]);
   };
 
+  const handleOntologyEditOptionChange = (event) => {
+    setOntologyEditOption((event.target).value);
+  }
+
   const updatedColumnsArray = SearchTermsData.termsColumns.map(item => ({
     ...item,
     value: item.id
@@ -45,26 +70,35 @@ const SearchTerms = ({searchConditions, setSearchConditions, initialSearchCondit
 
   return (
     <Box sx={{ mt: 4.5 }}>
-      <Typography color={gray800} fontSize='1.125rem' fontWeight={600} mb={4} ml={6.5}>
+      <Typography sx={{ ...styles.title, fontSize: "1.125rem", mb: 4, ml: 6.5 }}>
         Search terms, selecting their attributes and values.
       </Typography>
       <Divider />
-      <Box mt={4} mb={4} ml={6.5} sx={{ display: "flex", alignItems: "center" }}>
-        <Typography sx={{ color: gray800, fontWeight: 500 }}>Do you want to edit a specific ontology?</Typography>
-        <Stack direction="row" spacing={2.5} sx={{ ml: 5 }}>
-          <FormControlLabel control={<CustomizedRadio />} label="Yes" sx={{ "& .MuiFormControlLabel-label": {color: "#313534", fontWeight: 500} }} />
-          <FormControlLabel control={<CustomizedRadio />} label="No" sx={{ "& .MuiFormControlLabel-label": {color: "#313534", fontWeight: 500} }} />
+      <Box sx={{ display: "flex", flexDirection: "column", mt: 4, mb: 4, ml: 6.5, gap: 3 }}>
+        <Stack direction="row" spacing={5} sx={{ alignItems: "center" }}>
+          <Typography sx={styles.subtitle}>Do you want to edit a specific ontology?</Typography>
+          <RadioGroup
+            row
+            aria-labelledby="ontology-radio-buttons-group"
+            name="ontology-radio-buttons-group"
+            value={ontologyEditOption}
+            onChange={handleOntologyEditOptionChange}
+          >
+            <FormControlLabel control={<CustomizedRadio />} value="yes" label="Yes" sx={styles.radioLabel}/>
+            <FormControlLabel control={<CustomizedRadio />} value="no" label="No" sx={styles.radioLabel} />
+          </RadioGroup>
         </Stack>
+        {ontologyEditOption === "yes" && <OntologySearch />}
       </Box>
       <Divider />
-      <Box mt={4} mb={4} ml={6.5} mr={6.5}>
-        <Typography sx={{ color: gray800, fontWeight: 500 }}>Add filters</Typography>
+      <Box sx={{ mt: 4, mb: 4, ml: 6.5, mr: 6.5 }}>
+        <Typography variant="body1" sx={styles.subtitle}>Add filters</Typography>
         {searchConditions.map((term, index) => (
           <Grid container spacing={1.5} mt={3} mb={3.5} key={index} alignItems='end'>
             <Grid item xs={12} lg={1}>
               {index === 0 ? (
                 <Box height='2.5rem' display='flex' alignItems='center'>
-                  <Typography color={gray800} fontSize='.875rem' fontWeight={600}>
+                  <Typography variant="body2" sx={styles.title}>
                     Where
                   </Typography>
                 </Box>
@@ -87,12 +121,7 @@ const SearchTerms = ({searchConditions, setSearchConditions, initialSearchCondit
               )}
             </Grid>
             <Grid item xs={12} lg={4}>
-              <Typography sx={{
-                fontSize: '1rem',
-                fontWeight: '500',
-                color: gray800,
-                mb: '.75rem'
-              }}>
+              <Typography variant="body1" sx={{ ...styles.subtitle, mb: '.75rem' }}>
                 Search for attribute
               </Typography>
               <CustomSingleSelect
diff --git a/src/components/common/CustomizedRadio.jsx b/src/components/common/CustomizedRadio.jsx
index c0159b29..a66dc904 100644
--- a/src/components/common/CustomizedRadio.jsx
+++ b/src/components/common/CustomizedRadio.jsx
@@ -64,9 +64,9 @@ function BpRadio(props) {
   );
 }
 
-const CustomizedRadio = ({checked}) => {
+const CustomizedRadio = ({ checked, ...rest }) => {
   return (
-    <BpRadio checked={checked} />
+    <BpRadio checked={checked} {...rest} />
   );
 }
 

From 31d386baed1b083cfdb8d2ff8388c421e822d488 Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Thu, 24 Apr 2025 18:52:21 +0200
Subject: [PATCH 3/6] ILEX-106 fix ui of ontology search

---
 .../Dashboard/EditBulkTerms/SearchTerms.jsx   | 65 ++++++++++++++++---
 .../SingleTermView/OntologySearch.jsx         |  7 +-
 2 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
index faff1d91..04e214d8 100644
--- a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
+++ b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
@@ -1,6 +1,17 @@
 import PropTypes from "prop-types";
 import { useState } from "react";
-import { Button, Grid, Typography, Box, ToggleButton, ToggleButtonGroup, Divider, Stack, FormControlLabel, RadioGroup } from "@mui/material";
+import {
+  Button,
+  Grid,
+  Typography,
+  Box,
+  ToggleButton,
+  ToggleButtonGroup,
+  Divider,
+  Stack,
+  FormControlLabel,
+  RadioGroup
+} from "@mui/material";
 import DropDownConditions from "./DropDownConditions";
 import CustomizedInput from "../../common/CustomizedInput";
 import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
@@ -9,10 +20,15 @@ import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import SearchTermsData from "../../../static/SearchTermsData.json";
 import CustomizedRadio from "../../common/CustomizedRadio";
 import OntologySearch from "../../SingleTermView/OntologySearch";
-
 import { vars } from "../../../theme/variables";
+
 const { gray800, gray700 } = vars;
 
+const Confirmation = {
+  Yes: "Yes",
+  No: "No"
+}
+
 const styles = {
   title: {
     color: gray800,
@@ -27,11 +43,16 @@ const styles = {
       color: gray700, 
       fontWeight: 500
     }
+  },
+  ontologySearch: {
+    '& .MuiOutlinedInput-root': {
+      width: "100%"
+    }
   }
 }
 
 const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchConditions }) => {
-  const [ontologyEditOption, setOntologyEditOption] = useState("no");
+  const [ontologyEditOption, setOntologyEditOption] = useState(Confirmation.No);
 
   const handleTermChange = (index, field, value) => {
     const newTerms = [...searchConditions];
@@ -73,8 +94,18 @@ const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchCondi
       <Typography sx={{ ...styles.title, fontSize: "1.125rem", mb: 4, ml: 6.5 }}>
         Search terms, selecting their attributes and values.
       </Typography>
+
       <Divider />
-      <Box sx={{ display: "flex", flexDirection: "column", mt: 4, mb: 4, ml: 6.5, gap: 3 }}>
+
+      <Box sx={{ 
+        display: "flex", 
+        flexDirection: "column", 
+        mt: 4, 
+        mb: 4, 
+        ml: 6.5, 
+        gap: 3, 
+        maxWidth: "31.25rem" 
+      }}>
         <Stack direction="row" spacing={5} sx={{ alignItems: "center" }}>
           <Typography sx={styles.subtitle}>Do you want to edit a specific ontology?</Typography>
           <RadioGroup
@@ -84,17 +115,30 @@ const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchCondi
             value={ontologyEditOption}
             onChange={handleOntologyEditOptionChange}
           >
-            <FormControlLabel control={<CustomizedRadio />} value="yes" label="Yes" sx={styles.radioLabel}/>
-            <FormControlLabel control={<CustomizedRadio />} value="no" label="No" sx={styles.radioLabel} />
+            <FormControlLabel control={<CustomizedRadio />} value={Confirmation.Yes} label="Yes" sx={styles.radioLabel}/>
+            <FormControlLabel control={<CustomizedRadio />} value={Confirmation.No} label="No" sx={styles.radioLabel} />
           </RadioGroup>
         </Stack>
-        {ontologyEditOption === "yes" && <OntologySearch />}
+
+        {ontologyEditOption === Confirmation.Yes && (
+          <OntologySearch placeholder="Enter an Ontology URI" style={styles.ontologySearch} />
+        )}
       </Box>
+
       <Divider />
+
       <Box sx={{ mt: 4, mb: 4, ml: 6.5, mr: 6.5 }}>
         <Typography variant="body1" sx={styles.subtitle}>Add filters</Typography>
+
         {searchConditions.map((term, index) => (
-          <Grid container spacing={1.5} mt={3} mb={3.5} key={index} alignItems='end'>
+          <Grid 
+            container 
+            spacing={1.5} 
+            mt={3} 
+            mb={3.5} 
+            key={index} 
+            alignItems='end'
+          >
             <Grid item xs={12} lg={1}>
               {index === 0 ? (
                 <Box height='2.5rem' display='flex' alignItems='center'>
@@ -120,6 +164,7 @@ const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchCondi
                 </ToggleButtonGroup>
               )}
             </Grid>
+
             <Grid item xs={12} lg={4}>
               <Typography variant="body1" sx={{ ...styles.subtitle, mb: '.75rem' }}>
                 Search for attribute
@@ -131,6 +176,7 @@ const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchCondi
                 placeholder='Choose an attribute'
               />
             </Grid>
+
             <Grid item xs={12} lg={3}>
               <DropDownConditions
                 value={term.relation}
@@ -139,6 +185,7 @@ const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchCondi
                 handleTermChange={handleTermChange}
               />
             </Grid>
+
             <Grid item xs={12} lg={searchConditions.length > 1 ? 3 : 4}>
               <CustomizedInput
                 value={term.value}
@@ -147,6 +194,7 @@ const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchCondi
                 onChange={(e) => handleTermChange(index, 'value', e.target.value)}
               />
             </Grid>
+            
             {searchConditions.length > 1 && (
               <Grid item lg={searchConditions.length > 1 ? 1 : 0}>
                 <Button sx={{
@@ -159,6 +207,7 @@ const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchCondi
             )}
           </Grid>
         ))}
+
         <Stack direction="row" spacing={1.5}>
           <Button
             startIcon={<AddOutlinedIcon />}
diff --git a/src/components/SingleTermView/OntologySearch.jsx b/src/components/SingleTermView/OntologySearch.jsx
index 0c6700d6..3acc54bf 100644
--- a/src/components/SingleTermView/OntologySearch.jsx
+++ b/src/components/SingleTermView/OntologySearch.jsx
@@ -17,7 +17,7 @@ import FolderSharedOutlinedIcon from '@mui/icons-material/FolderSharedOutlined';
 import { vars } from "../../theme/variables";
 const { brand600, gray50 } = vars;
 
-const OntologySearch = () => {
+const OntologySearch = ({ placeholder, style }) => {
   const options = [
     { label: 'Nervous system1', badge: 'My Organization 1', selected: false },
     { label: 'Nervous system2', badge: 'ODC-TBI', selected: false },
@@ -102,6 +102,7 @@ const OntologySearch = () => {
               border: 0,
             },
           },
+          ...style
         }}
         autoHighlight={false}
         componentsProps={{
@@ -168,7 +169,7 @@ const OntologySearch = () => {
           <TextField
             {...params}
             variant="outlined"
-            placeholder="Search for ontology"
+            placeholder={placeholder || "Search for ontology"}
             onChange={handleInputChange}
             InputProps={{
               ...params.InputProps,
@@ -223,6 +224,8 @@ const OntologySearch = () => {
 
 OntologySearch.propTypes = {
   key: PropTypes.string,
+  style: PropTypes.object,
+  placeholder: PropTypes.string
 };
 
 export default OntologySearch;

From 45aa115ec99f7629a6c197b263ccf830654d5b2f Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Tue, 29 Apr 2025 22:24:32 +0200
Subject: [PATCH 4/6] ILEX-106 revert changes for ontology search

---
 .../Dashboard/EditBulkTerms/SearchTerms.jsx          | 12 ++++++------
 src/components/SingleTermView/OntologySearch.jsx     |  6 ++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
index 04e214d8..921347b0 100644
--- a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
+++ b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
@@ -44,11 +44,11 @@ const styles = {
       fontWeight: 500
     }
   },
-  ontologySearch: {
-    '& .MuiOutlinedInput-root': {
-      width: "100%"
-    }
-  }
+  // ontologySearch: {
+  //   '& .MuiOutlinedInput-root': {
+  //     width: "100%"
+  //   }
+  // }
 }
 
 const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchConditions }) => {
@@ -121,7 +121,7 @@ const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchCondi
         </Stack>
 
         {ontologyEditOption === Confirmation.Yes && (
-          <OntologySearch placeholder="Enter an Ontology URI" style={styles.ontologySearch} />
+          <OntologySearch placeholder="Enter an Ontology URI" />
         )}
       </Box>
 
diff --git a/src/components/SingleTermView/OntologySearch.jsx b/src/components/SingleTermView/OntologySearch.jsx
index 3acc54bf..c84bf59e 100644
--- a/src/components/SingleTermView/OntologySearch.jsx
+++ b/src/components/SingleTermView/OntologySearch.jsx
@@ -17,7 +17,7 @@ import FolderSharedOutlinedIcon from '@mui/icons-material/FolderSharedOutlined';
 import { vars } from "../../theme/variables";
 const { brand600, gray50 } = vars;
 
-const OntologySearch = ({ placeholder, style }) => {
+const OntologySearch = ({ placeholder }) => {
   const options = [
     { label: 'Nervous system1', badge: 'My Organization 1', selected: false },
     { label: 'Nervous system2', badge: 'ODC-TBI', selected: false },
@@ -101,8 +101,7 @@ const OntologySearch = ({ placeholder, style }) => {
             '& .MuiOutlinedInput-notchedOutline': {
               border: 0,
             },
-          },
-          ...style
+          }
         }}
         autoHighlight={false}
         componentsProps={{
@@ -224,7 +223,6 @@ const OntologySearch = ({ placeholder, style }) => {
 
 OntologySearch.propTypes = {
   key: PropTypes.string,
-  style: PropTypes.object,
   placeholder: PropTypes.string
 };
 

From 1ea45c5718b8ab089067c04e7d70375e3d0bf03f Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Wed, 30 Apr 2025 11:05:40 +0200
Subject: [PATCH 5/6] ILEX-106 delete unnecessary code

---
 src/components/Dashboard/EditBulkTerms/SearchTerms.jsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
index 921347b0..1a5d15fe 100644
--- a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
+++ b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
@@ -44,11 +44,6 @@ const styles = {
       fontWeight: 500
     }
   },
-  // ontologySearch: {
-  //   '& .MuiOutlinedInput-root': {
-  //     width: "100%"
-  //   }
-  // }
 }
 
 const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchConditions }) => {

From a6ee6a589ad426a6c592731c6b1f6e25856b351c Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Wed, 30 Apr 2025 11:51:30 +0200
Subject: [PATCH 6/6] ILEX-106 fix ontology search component re-rendering

---
 .../Dashboard/EditBulkTerms/SearchTerms.jsx   |   2 +-
 .../SingleTermView/OntologySearch.jsx         | 335 +++++++++---------
 2 files changed, 176 insertions(+), 161 deletions(-)

diff --git a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
index 1a5d15fe..5b069152 100644
--- a/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
+++ b/src/components/Dashboard/EditBulkTerms/SearchTerms.jsx
@@ -116,7 +116,7 @@ const SearchTerms = ({ searchConditions, setSearchConditions, initialSearchCondi
         </Stack>
 
         {ontologyEditOption === Confirmation.Yes && (
-          <OntologySearch placeholder="Enter an Ontology URI" />
+          <OntologySearch placeholder="Enter an Ontology URI" fullWidth />
         )}
       </Box>
 
diff --git a/src/components/SingleTermView/OntologySearch.jsx b/src/components/SingleTermView/OntologySearch.jsx
index c84bf59e..93b55b1d 100644
--- a/src/components/SingleTermView/OntologySearch.jsx
+++ b/src/components/SingleTermView/OntologySearch.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useCallback, useMemo } from "react";
 import {
   Box,
   Button,
@@ -13,42 +13,91 @@ import PropTypes from "prop-types";
 import ListItem from '@mui/material/ListItem';
 import CustomizedRadio from "../common/CustomizedRadio";
 import FolderSharedOutlinedIcon from '@mui/icons-material/FolderSharedOutlined';
-
 import { vars } from "../../theme/variables";
+
 const { brand600, gray50 } = vars;
 
-const OntologySearch = ({ placeholder }) => {
-  const options = [
-    { label: 'Nervous system1', badge: 'My Organization 1', selected: false },
-    { label: 'Nervous system2', badge: 'ODC-TBI', selected: false },
-    { label: 'Nervous system3', badge: 'Dk-net', selected: false },
-    { label: 'Nervous system4', badge: 'My Organization 2', selected: false }
-  ];
+const OPTIONS = [
+  { label: 'Nervous system1', badge: 'My Organization 1', selected: false },
+  { label: 'Nervous system2', badge: 'ODC-TBI', selected: false },
+  { label: 'Nervous system3', badge: 'Dk-net', selected: false },
+  { label: 'Nervous system4', badge: 'My Organization 2', selected: false }
+];
+
+const styles = {
+  autocomplete: (fullWidth, selectedValue, openList) => ({
+    width: fullWidth ? '100%' : '21.75rem',
+    '& .MuiOutlinedInput-root': {
+      minWidth: fullWidth ? '100%' : (selectedValue ? '21.75rem' : '11.75rem'),
+      width: fullWidth ? '100%' : 'fit-content',
+      borderRadius: openList ? '0.5rem 0.5rem 0 0' : '0.5rem',
+    },
+    '&.Mui-focused': {
+      transition: 'width 0.100s ease-in-out',
+      '& .MuiOutlinedInput-root': {
+        minWidth: fullWidth ? '100%' : '21.75rem',
+        border: `2px solid ${brand600}`,
+        background: gray50,
+        boxShadow: '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
+        borderRadius: '.5rem',
+      },
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: 0,
+      },
+    }
+  }),
+  paper: {
+    borderRadius: '0.5rem',
+    '& .MuiAutocomplete-option': {
+      padding: '.06rem .38rem',
+      height: 'initial',
+      '& .MuiFormControlLabel-root': {
+        margin: 0,
+        '& .MuiTypography-root': {
+          fontSize: '0.875rem',
+        },
+        '& .MuiButtonBase-root': {
+          padding: 0,
+          marginRight: '.5rem',
+        },
+      },
+      '&:hover': {
+        backgroundColor: gray50,
+      },
+      '&[aria-selected="true"]': {
+        backgroundColor: 'transparent !important',
+      },
+    },
+  },
+  popperBox: {
+    borderRadius: '0.5rem',
+    border: '1px solid #DADDDC',
+    boxShadow: '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)'
+  }
+};
 
+const OntologySearch = ({ placeholder, fullWidth = false }) => {
   const [searchTerm, setSearchTerm] = React.useState('');
   const [openList, setOpenList] = React.useState(false);
   const [selectedValue, setSelectedValue] = React.useState(null);
   const autocompleteRef = useRef(null);
   const popperRef = useRef(null);
 
-  const handleOpenList = () => {
+  const handleOpenList = useCallback(() => {
     setOpenList(true);
-  };
+  }, []);
 
-  // eslint-disable-next-line no-unused-vars
-  const handleInputChange = (event, value) => {
+  const handleInputChange = useCallback((event) => {
     setSearchTerm(event.target.value);
-  };
+  }, []);
 
-  const onSetActive = (event) => {
+  const onSetActive = useCallback((event) => {
     event.stopPropagation();
-    event.preventDefault();
-    console.log("selected value: ", selectedValue)
     setOpenList(false);
-    setSelectedValue({ ...selectedValue, selected: true });
-  };
+    setSelectedValue(prev => prev ? { ...prev, selected: true } : null);
+  }, []);
 
-  const handleClickOutside = (event) => {
+  const handleClickOutside = useCallback((event) => {
     if (
       autocompleteRef.current &&
       !autocompleteRef.current.contains(event.target) &&
@@ -57,173 +106,139 @@ const OntologySearch = ({ placeholder }) => {
     ) {
       setOpenList(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
+  }, [handleClickOutside]);
+
+  const isOptionEqualToValue = useCallback((option, value) => 
+    option.label === value?.label && option.badge === value?.badge,
+    []
+  );
+
+  const handleChange = useCallback((event, value) => {
+    setSearchTerm('');
+    setSelectedValue(value);
   }, []);
 
-  const isOptionEqualToValue = (option, value) =>
-    option.label === value?.label && option.badge === value?.badge;
+  const popperProps = useMemo(() => ({
+    sx: {
+      width: fullWidth ? 'auto !important' : '21.75rem !important',
+      minWidth: fullWidth ? 'auto !important' : '21.75rem !important',
+      backgroundColor: 'white',
+    },
+    ref: popperRef
+  }), [fullWidth]);
+
+  const PaperComponent = useMemo(() => {
+    const Component = ({ children }) => (
+      <Box sx={styles.popperBox}>
+        {children}
+        <Divider sx={{ marginTop: '.31rem' }} />
+        <Box p='.75rem 1rem'>
+          <Button
+            variant="contained"
+            size="small"
+            fullWidth
+            onClick={onSetActive}
+          >
+            Set as active ontology
+          </Button>
+        </Box>
+      </Box>
+    );
+    Component.displayName = 'PaperComponent';
+    return Component;
+  }, [onSetActive]);
+
+  const renderOption = useCallback((props, option) => {
+    const { key, ...otherProps } = props;
+    return (
+      <ListItem key={key} {...otherProps}>
+        <Box
+          p='.5rem'
+          display='flex'
+          justifyContent='space-between'
+          alignItems='center'
+          gap='.5'
+          width={1}
+        >
+          <FormControlLabel
+            control={
+              <CustomizedRadio
+                checked={selectedValue?.label === option.label}
+              />
+            }
+            label={option.label}
+          />
+          <Chip label={option.badge} variant='outlined' />
+        </Box>
+      </ListItem>
+    );
+  }, [selectedValue]);
+
+  const renderInput = useCallback((params) => (
+    <TextField
+      {...params}
+      variant="outlined"
+      placeholder={placeholder || "Search for ontology"}
+      onChange={handleInputChange}
+      InputProps={{
+        ...params.InputProps,
+        startAdornment: (
+          <InputAdornment position='start'>
+            <FolderSharedOutlinedIcon />
+          </InputAdornment>
+        ),
+        endAdornment: selectedValue?.selected && (
+          <InputAdornment position='end'>
+            <Chip
+              label={selectedValue.badge}
+              variant='outlined'
+              size='small'
+              sx={{ marginLeft: '0.5rem' }}
+            />
+          </InputAdornment>
+        ),
+      }}
+    />
+  ), [handleInputChange, placeholder, selectedValue]);
 
   return (
-    <div ref={autocompleteRef}>
+    <div ref={autocompleteRef} style={{ width: fullWidth ? '100%' : 'fit-content' }}>
       <Autocomplete
         disableCloseOnSelect
         disableClearable
-        options={options}
+        options={OPTIONS}
         open={openList}
         onOpen={handleOpenList}
         forcePopupIcon={false}
-        onChange={(event, value) => {
-          setSearchTerm('');
-          setSelectedValue(value);
-        }}
+        onChange={handleChange}
         isOptionEqualToValue={isOptionEqualToValue}
-        sx={{
-          '& .MuiOutlinedInput-root': {
-            minWidth: selectedValue ? '21.75rem' : '11.75rem',
-            width: 'fit-content',
-            borderRadius: openList ? '0.5rem 0.5rem 0 0' : '0.5rem',
-          },
-          '&.Mui-focused': {
-            transition: 'width 0.100s ease-in-out',
-            '& .MuiOutlinedInput-root': {
-              minWidth: '21.75rem',
-              border: `2px solid ${brand600}`,
-              background: gray50,
-              boxShadow: '0px 1px 2px 0px rgba(16, 24, 40, 0.05)',
-              borderRadius: '.5rem',
-            },
-            '& .MuiOutlinedInput-notchedOutline': {
-              border: 0,
-            },
-          }
-        }}
+        sx={styles.autocomplete(fullWidth, selectedValue, openList)}
         autoHighlight={false}
         componentsProps={{
-          popper: {
-            sx: {
-              width: '21.75rem !important',
-              backgroundColor: 'white',
-            },
-            ref: popperRef
-          },
-          paper: {
-            sx: {
-              borderRadius: '0.5rem',
-              '& .MuiAutocomplete-option': {
-                padding: '.06rem .38rem',
-                height: 'initial',
-                '& .MuiFormControlLabel-root': {
-                  margin: 0,
-                  '& .MuiTypography-root': {
-                    fontSize: '0.875rem',
-                  },
-                  '& .MuiButtonBase-root': {
-                    padding: 0,
-                    marginRight: '.5rem',
-                  },
-                },
-                '&:hover': {
-                  backgroundColor: gray50,
-                },
-                '&[aria-selected="true"]': {
-                  backgroundColor: 'transparent !important',
-                },
-              },
-            },
-          },
+          popper: popperProps,
+          paper: { sx: styles.paper },
         }}
         inputValue={searchTerm ? searchTerm : selectedValue?.selected ? selectedValue?.label : ''}
-        renderOption={(props, option) => {
-          const { key, ...otherProps } = props;
-          return (
-            <ListItem key={key} {...otherProps}>
-              <Box
-                p='.5rem'
-                display='flex'
-                justifyContent='space-between'
-                alignItems='center'
-                gap='.5'
-                width={1}
-              >
-                <FormControlLabel
-                  control={
-                    <CustomizedRadio
-                      checked={selectedValue?.label === option.label}
-                    />
-                  }
-                  label={option.label}
-                />
-                <Chip label={option.badge} variant='outlined' />
-              </Box>
-            </ListItem>
-          );
-        }}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            variant="outlined"
-            placeholder={placeholder || "Search for ontology"}
-            onChange={handleInputChange}
-            InputProps={{
-              ...params.InputProps,
-              startAdornment: (
-                <InputAdornment position='start'>
-                  <FolderSharedOutlinedIcon />
-                </InputAdornment>
-              ),
-              endAdornment: selectedValue?.selected && (
-                <InputAdornment position='end'>
-                  <Chip
-                    label={selectedValue.badge}
-                    variant='outlined'
-                    size='small'
-                    sx={{ marginLeft: '0.5rem' }}
-                  />
-                </InputAdornment>
-              ),
-            }}
-          />
-        )}
-        PaperComponent={({ children }) => (
-          <Box
-            ref={popperRef}
-            sx={{
-              borderRadius: '0.5rem',
-              border: '1px solid #DADDDC',
-              boxShadow:
-                '0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)',
-            }}
-          >
-            {children}
-            <Divider sx={{
-              marginTop: '.31rem'
-            }} />
-            <Box p='.75rem 1rem'>
-              <Button
-                variant="contained"
-                size="small"
-                fullWidth
-                onClick={onSetActive}
-              >
-                Set as active ontology
-              </Button>
-            </Box>
-          </Box>
-        )}
+        renderOption={renderOption}
+        renderInput={renderInput}
+        PaperComponent={PaperComponent}
       />
     </div>
   );
 };
 
 OntologySearch.propTypes = {
+  placeholder: PropTypes.string,
+  fullWidth: PropTypes.bool,
   key: PropTypes.string,
-  placeholder: PropTypes.string
+  children: PropTypes.node,
 };
 
-export default OntologySearch;
+export default OntologySearch;
\ No newline at end of file