Revert "Revert "initial work to shifting over to MUI from antd for be…

…tter maintainability"" This reverts commit 0673157.
dgidb · Nov 17, 2022 · 4560037 · 4560037
1 parent 0673157
commit 4560037
Show file tree

Hide file tree

Showing 7 changed files with 343 additions and 104 deletions.
diff --git a/client/package.json b/client/package.json
@@ -5,6 +5,9 @@
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
     "@apollo/client": "^3.4.10",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.10.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -28,7 +31,7 @@
     "js-yaml": "^4.1.0",
     "react": "^18.0.0",
     "react-chartjs-2": "^4.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.14.1",
     "react-query": "^3.34.0",
     "react-router-dom": "^6.2.2",

diff --git a/client/src/components/Browse/Categories/BrowseCategories.tsx b/client/src/components/Browse/Categories/BrowseCategories.tsx
@@ -4,17 +4,17 @@ import { useGetInteractionsByGenes} from 'hooks/queries/useGetInteractions';
 import { useGetGeneRecord } from 'hooks/queries/useGetGeneRecord';
 import { useGetDruggableSources } from 'hooks/queries/useGetDruggableSources';
 import { useGetCategoriesBySource } from 'hooks/queries/useGetCategories';
-import { Collapse } from 'antd';
+import Collapse from '@mui/material/Collapse';
 
 // components
 import { GeneListTable } from 'components/Browse/Categories/GeneListTable';
 
 // styles
 import './BrowseCategories.scss';
 import { Checkbox } from 'antd';
+import { Accordion, AccordionSummary, Typography } from '@mui/material';
 
 const CheckboxGroup = Checkbox.Group;
-const { Panel } = Collapse;
 
   interface Categories {
     [key: string]: number
@@ -112,20 +112,20 @@ export const BrowseCategories: React.FC = () => {
         </div>
 
         <div className="category-list">
-           <Collapse accordion>
           {renderedCategories?.map((cat: any, index: number) => {
             if(cat.geneCount) {
               return (
-                <Panel header={`${cat.name} ${cat.geneCount}`} key={index}>
-                  <GeneListTable />
-               </Panel>
+                <Accordion>
+                <AccordionSummary key={index}>
+                  <Typography>{cat.name} {cat.geneCount}</Typography>
+               </AccordionSummary>
+               <GeneListTable />
+               </Accordion>
               )
             } else {
               return null
             }
           })}
-          </Collapse>
-
         </div>
       </div>
     )

diff --git a/client/src/components/Browse/Categories/GeneListTable/GeneListTable.tsx b/client/src/components/Browse/Categories/GeneListTable/GeneListTable.tsx
@@ -2,7 +2,6 @@
 import React, {useState, useContext, useEffect} from 'react';
 import { useGetDruggableSources } from 'hooks/queries/useGetDruggableSources';
 import { useGetGeneList } from 'hooks/queries/useGetGeneList';
-import { Collapse } from 'antd';
 
 // components
 import { GlobalClientContext } from 'stores/Global/GlobalClient';

diff --git a/client/src/components/Shared/SearchBar/SearchBar.scss b/client/src/components/Shared/SearchBar/SearchBar.scss
@@ -10,6 +10,7 @@
 
 		.search-input {
 			max-height: 240px;
+			min-width: 300px;
 			overflow: scroll !important;
 			position: relative;
 

diff --git a/client/src/components/Shared/SearchBar/SearchBar.tsx b/client/src/components/Shared/SearchBar/SearchBar.tsx
@@ -4,9 +4,9 @@ import { GlobalClientContext } from 'stores/Global/GlobalClient';
 import { ActionTypes } from 'stores/Global/reducers';
 
 // styles, icons
-import { Button, Select, Form, Popover, Checkbox } from 'antd';
 import 'antd/dist/antd.css';
 import './SearchBar.scss';
+import { Autocomplete, MenuItem, Select, TextField } from '@mui/material';
 
 type SearchBarProps = {
   handleSubmit: () => void;
@@ -15,33 +15,12 @@ type SearchBarProps = {
 const SearchBar: React.FC<SearchBarProps> = ({handleSubmit }) => {
 
   const {state, dispatch} = useContext(GlobalClientContext);
+  console.log(state)
 
   const [inputValue, setInputValue] = useState<any>('');
   const [options, setOptions] = useState<any>([]);
   const [showFilters, setShowFilters] = useState(false);
 
-  const { Option } = Select;
-
-  let content = (
-    <div>
-      <div className="filter-options ">
-        <h5>Preset Filters</h5>
-        <Checkbox>Approved</Checkbox>
-        <Checkbox>Antineoplastic</Checkbox>
-        <Checkbox>Immunotherapies</Checkbox>
-      </div>
-      <div className="filter-options ">
-        <h5>Advanced Filters</h5>
-        <span>Source Databases</span>
-        <Button style={{ width: 80}}>22 of 22</Button>
-        <span>Gene Categories</span>
-        <Button style={{ width: 80}}>43 of 43</Button>
-        <span>Interaction Types</span>
-        <Button style={{ width: 80}}>31 of 31</Button>
-      </div>
-    </div>
-  )
-
   const onKeyDown = (value: any) => {
 
     let deleteTag = value.key === 'Backspace' && !inputValue.length;
@@ -68,60 +47,35 @@ const SearchBar: React.FC<SearchBarProps> = ({handleSubmit }) => {
         <Select 
           value={state.interactionMode}
           style={{ width: 200 }} 
-          size="large"
-          onChange={(value) => {
-            if(value === 'gene'){
+          onChange={(event) => {
+            const value = event.target.value
+            if (value === 'gene'){
               dispatch({type: ActionTypes.SetByGene})
             } else if (value === 'drug'){
               dispatch({type: ActionTypes.SetByDrug})
             } else if (value === 'categories'){
               dispatch({type: ActionTypes.SetGeneCategories})
             }
           }}
-          dropdownRender={(menu: any) => (
-            <div>
-              {menu}
-            </div>
-          )} 
         >
-          <Option className="hi4" value="gene">Interactions by Gene</Option>
-          <Option value="drug">Interactions by Drug</Option>
-          <Option value="categories">Gene Categories</Option>
+          <MenuItem className="hi4" value="gene">Interactions by Gene</MenuItem>
+          <MenuItem value="drug">Interactions by Drug</MenuItem>
+          <MenuItem value="categories">Gene Categories</MenuItem>
         </Select>
       </div>
       <div className="search-input">
-        <Form.Item>
-          <Select 
-            allowClear
-            size="large" 
-            placeholder="" 
-            mode="tags"
-            tokenSeparators={[',', ' ']}
-            options={options}
-            onInputKeyDown={onKeyDown}
-            value={state.searchTerms}
-            onClear={() => state.searchTerms = []}
-            onDeselect={(val: any) => dispatch({type: ActionTypes.DeleteTerm, payload: val})}
-            // onChange={value => setQueryParams(value)}
-            onSearch={value => setInputValue(value)}
-          >
-            {state.searchTerms}
-          </Select>
-        </Form.Item>
-
-          <div className="search-filters">
-            <Popover 
-              content={content} 
-              trigger="click" 
-              open={showFilters} 
-              onOpenChange={open => setShowFilters(open)} 
-            >
-              {/* TODO: Reintroduce later
-              <FilterOutlined
-                style={{ fontSize: '150%', cursor: 'pointer'}}
-              /> */}
-            </Popover>
-          </div>
+          <Autocomplete 
+            multiple={true}
+            value={[]}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                variant="standard"
+                label="Multiple values"
+                placeholder="Favorites"
+              />
+            )}
+            options={options} />
         </div>
       </div>
   </div>

diff --git a/client/src/pages/Home/Home.tsx b/client/src/pages/Home/Home.tsx
@@ -9,10 +9,10 @@ import { ActionTypes } from 'stores/Global/reducers';
 import { queryClient } from 'providers/app';
 
 // styles
-import { Button, Switch } from 'antd';
 import SunIcon from 'components/Shared/SVG/SunIcon';
 import MoonIcon from 'components/Shared/SVG/MoonIcon';
 import './Home.scss';
+import { Button, Switch } from '@mui/material';
 
 export const Home: React.FC = () => {
 
@@ -98,11 +98,11 @@ export const Home: React.FC = () => {
       <SearchBar handleSubmit={handleSubmit} />
 
       <div className="home-buttons">
-        <Button onClick={() => handleSubmit()} style={{margin: 20, color: 'var(--text-content)', backgroundColor: 'var(--background-light)', border: 'none', width: '120px', height: '35px', fontSize: 16,}}type="primary">Search</Button>
+        <Button onClick={() => handleSubmit()} style={{margin: 20, color: 'var(--text-content)', backgroundColor: 'var(--background-light)', border: 'none', width: '120px', height: '35px', fontSize: 16,}}>Search</Button>
         <Button
           onClick={() => handleDemoClick()}
           style={{margin: 20, color: 'var(--text-content)', backgroundColor: 'var(--background-light)', border: 'none', width: '120px', height: '35px',  fontSize: 16,}}
-          type="primary">
+          >
             Demo
         </Button>
       </div>
@@ -123,10 +123,9 @@ export const Home: React.FC = () => {
 
       <div className="darkmode-toggle">
         <Switch
-          loading={isToggling}
           defaultChecked
-          checkedChildren={<SunIcon />}
-          unCheckedChildren={<MoonIcon />}
+          checkedIcon={SunIcon}
+          icon={MoonIcon}
           onChange={() => setIsToggling(true)}
         />
       </div>