Merge pull request #45 from omics-datascience/updateFomantic

Update semantic to fomantic and fixs visual bugs

src/frontend/static/frontend/package.json

@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@gamestdio/websocket": "^0.3.2",
-    "@swc/core": "^1.5.24",
+    "@swc/core": "^1.5.25",
     "@visx/responsive": "^3.10.2",
     "@visx/scale": "^3.5.0",
     "@visx/stats": "^3.5.0",
@@ -56,7 +56,8 @@
     "cytoscape": "^3.29.2",
     "d3": "^7.9.0",
     "dayjs": "^1.11.11",
-    "ky": "^1.2.4",
+    "fomantic-ui-css": "^2.9.3",
+    "ky": "^1.3.0",
     "lightningcss": "^1.25.1",
     "lodash": "^4.17.21",
     "neo-react-semantic-ui-range": "^0.3.6",
@@ -67,7 +68,6 @@
     "react-dom": "^18.3.1",
     "react-virtualized": "^9.22.5",
     "recharts": "^2.12.7",
-    "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.5",
     "spark-md5": "^3.0.2",
     "swc-loader": "^0.2.6",

src/frontend/static/frontend/src/about-us.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-
+import { createRoot } from 'react-dom/client'
+// import ReactDOM from 'react-dom'
 import { AboutUs } from './components/about-us/AboutUs'
 
-ReactDOM.render(
-    <AboutUs />,
-    document.getElementById('about-us-app')
-)
+// const root = ReactDOM.createRoot(document.getElementById('about-us-app'))
+const container = document.getElementById('about-us-app')
+const root = createRoot(container!)
+root.render(<AboutUs />)

src/frontend/static/frontend/src/base.tsx

@@ -1,3 +1,3 @@
 // Common dependencies for all the pages
-import 'semantic-ui-css/semantic.min.css'
+import 'fomantic-ui-css/semantic.css'
 import './css/base.css'

src/frontend/static/frontend/src/biomarkers.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
+
 import './css/biomarkers.css'
 
 import { BiomarkersPanel } from './components/biomarkers/BiomarkersPanel'
 
-ReactDOM.render(
-    <BiomarkersPanel />,
-    document.getElementById('biomarkers-app')
-)
+const container = document.getElementById('biomarkers-app')
+const root = createRoot(container!)
+root.render(<BiomarkersPanel />)

src/frontend/static/frontend/src/cgds.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
+
 import './css/files.css'
 
 import { CGDSPanel } from './components/cgds-panel/CGDSPanel'
-
-ReactDOM.render(
-    <CGDSPanel />,
-    document.getElementById('cgds-app')
-)
+const container = document.getElementById('about-us-app')
+const root = createRoot(container!)
+root.render(<CGDSPanel />)

src/frontend/static/frontend/src/components/Base.tsx

@@ -30,6 +30,7 @@ const CurrentUserContext = React.createContext<Nullable<DjangoUser>>(null)
 const Base = (props: BaseProps) => {
     const abortController = useRef(new AbortController())
     const [currentUser, setUser] = useState<Nullable<DjangoUser>>(null)
+    const [isLoadingCurrentUser, setIsLoadingCurrentUser] = useState<boolean>(true)
 
     /**
      * Method which is executed when the component has mounted
@@ -47,34 +48,59 @@ const Base = (props: BaseProps) => {
      * Fetches logged User data
      */
     function getCurrentUser () {
-        ky.get(urlCurrentUser, { retry: 5, signal: abortController.current.signal }).then((response) => {
-            response.json().then((currentUser: DjangoUser) => {
-                setUser(currentUser)
+        setTimeout(() => {
+            ky.get(urlCurrentUser, { retry: 5, signal: abortController.current.signal }).then((response) => {
+                response.json().then((currentUser: DjangoUser) => {
+                    setUser(currentUser)
+                }).catch((err) => {
+                    console.log('Error parsing JSON ->', err)
+                })
             }).catch((err) => {
-                console.log('Error parsing JSON ->', err)
+                if (err.response.status === 403 && !abortController.current.signal.aborted) {
+                    // It's an anonymous user
+                    setUser({
+                        id: null,
+                        username: null,
+                        is_anonymous: true,
+                        is_superuser: false,
+                        is_institution_admin: false
+
+                    })
+                } else {
+                    console.log('Error getting current User ->', err)
+                }
+            }).finally(() => {
+                setIsLoadingCurrentUser(false)
             })
-        }).catch((err) => {
-            if (err.response.status === 403 && !abortController.current.signal.aborted) {
-                // It's an anonymous user
-                setUser({
-                    id: null,
-                    username: null,
-                    is_anonymous: true,
-                    is_superuser: false,
-                    is_institution_admin: false
-                })
-            } else {
-                console.log('Error getting current User ->', err)
-            }
-        })
+        }, 200)
+        /*  ky.get(urlCurrentUser, { retry: 5, signal: abortController.current.signal }).then((response) => {
+             response.json().then((currentUser: DjangoUser) => {
+                 setUser(currentUser)
+             }).catch((err) => {
+                 console.log('Error parsing JSON ->', err)
+             })
+         }).catch((err) => {
+             if (err.response.status === 403 && !abortController.current.signal.aborted) {
+                 // It's an anonymous user
+                 setUser({
+                     id: null,
+                     username: null,
+                     is_anonymous: true,
+                     is_superuser: false,
+                     is_institution_admin: false
+                 })
+             } else {
+                 console.log('Error getting current User ->', err)
+             }
+         }) */
     }
 
     const sitePolicyLink = <a id='site-policy-link' href={urlSitePolicy}>Terms and privacy policy</a>
 
     return (
         <CurrentUserContext.Provider value={currentUser}>
             {/* Navbar */}
-            <MainNavbar activeItem={props.activeItem} />
+            <MainNavbar activeItem={props.activeItem} isLoadingUser={isLoadingCurrentUser} />
 
             {/* Composition part */}
             <div className={props.wrapperClass}>

src/frontend/static/frontend/src/components/MainNavbar.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { Dropdown, Menu, Image, Icon } from 'semantic-ui-react'
+import { Dropdown, Menu, Image, Icon, Loader } from 'semantic-ui-react'
 import { DjangoUser } from '../utils/django_interfaces'
 import { Nullable } from '../utils/interfaces'
 import { CurrentUserContext } from './Base'
@@ -60,7 +60,8 @@ const LogInLogOutPanel = (props: LogInLogOutPanelProps) => {
 type ActiveItemOptions = 'home' | 'pipeline' | 'files' | 'cgds' | 'survival' | 'institutions' | 'about-us' | 'biomarkers'
 
 interface MainNavbarProps {
-    activeItem?: ActiveItemOptions
+    activeItem?: ActiveItemOptions,
+    isLoadingUser: boolean,
 }
 
 /**
@@ -88,6 +89,20 @@ const MainNavbar = (props: MainNavbarProps) => {
                 <Image size='tiny' src='/static/frontend/img/logo.png' />
             </Menu.Item>
 
+            {/* Loading spinners while user is fetch */}
+            {props.isLoadingUser &&
+                <Menu.Menu>
+                    <Menu.Item style={{ padding: '0 1.72rem' }}>
+                        <Loader active inline='centered' />
+                    </Menu.Item>
+                    <Menu.Item style={{ padding: '0 1.72rem' }}>
+                        <Loader active inline='centered' />
+                    </Menu.Item>
+                    <Menu.Item style={{ padding: '0 1.7rem' }}>
+                        <Loader active inline='centered' />
+                    </Menu.Item>
+                </Menu.Menu>
+            }
             {/* Analysis menu */}
             {currentUser && !currentUser.is_anonymous &&
                 <React.Fragment>
@@ -177,7 +192,7 @@ const MainNavbar = (props: MainNavbarProps) => {
 
             {/* About us */}
             <Menu.Menu as='h2'>
-                <Menu.Item as='a' href={urlAboutUs}>
+                <Menu.Item as='a' href={urlAboutUs} className='link item' style={{ fontSize: '1rem' }}>
                     About us
                 </Menu.Item>
             </Menu.Menu>

src/frontend/static/frontend/src/components/biomarkers/BiomarkersPanel.tsx

@@ -1753,7 +1753,8 @@ export class BiomarkersPanel extends React.Component<{}, BiomarkersPanelState> {
                     closeOnEscape={false}
                     closeOnDimmerClick={false}
                     closeOnDocumentClick={false}
-                    style={this.state.biomarkerTypeSelected === BiomarkerOrigin.BASE ? { width: '60%', minHeight: '60%' } : { width: '92%', minHeight: '92%', display: 'flex' }}
+                    className={this.state.biomarkerTypeSelected !== BiomarkerOrigin.BASE ? 'space-modal large-modal' : undefined}
+                    style={this.state.biomarkerTypeSelected === BiomarkerOrigin.BASE ? { width: '60%', minHeight: '60%' } : undefined}
                     onClose={() => {
                         this.state.biomarkerTypeSelected !== BiomarkerOrigin.BASE
                             ? this.handleChangeConfirmModalState(
@@ -1835,7 +1836,6 @@ export class BiomarkersPanel extends React.Component<{}, BiomarkersPanelState> {
                 </Modal>
 
                 <Confirm
-                    className='biomarkers--confirm--modal'
                     open={this.state.confirmModal.confirmModal}
                     header={this.state.confirmModal.headerText}
                     content={this.state.confirmModal.contentText}

src/frontend/static/frontend/src/components/biomarkers/biomarker-details-modal/molecules/CurrentMoleculeDetails.tsx

@@ -94,7 +94,7 @@ export const CurrentMoleculeDetails = (props: CurrentMoleculeDetailsProps) => {
         }
 
         return (
-            <Header size='huge' icon textAlign='center'>
+            <Header size='huge' icon textAlign='center' style={{ alignItems: 'center', justifyContent: 'center', display: 'flex', flexDirection: 'column', height: '100%' }}>
                 <Icon name='dna' />
 
                 No molecule selected

src/frontend/static/frontend/src/components/biomarkers/modalContentBiomarker/featureSelectionPanel/FeatureSelectionPanel.tsx

@@ -213,7 +213,7 @@ export const FeatureSelectionPanel = (props: FeatureSelectionPanelProps) => {
                     </Grid.Row>
                 </Grid>
             </Modal.Content>
-            <Modal.Actions>
+            <Modal.Actions style={{/* justifySelf: 'flex-end' */ }}>
                 <Button
                     color="red"
                     onClick={props.cancelForm}

src/frontend/static/frontend/src/components/common/UploadButton.tsx

@@ -23,7 +23,6 @@ export const UploadButton = (props: UploadButtonProps) => {
     return (
         <Button
             icon
-            labelPosition="left"
             fluid
             title={props.title}
             className="ellipsis"

src/frontend/static/frontend/src/components/pipeline/experiment-result/gene-gem-details/stats/BloxPlotChart.tsx

@@ -152,7 +152,7 @@ export default withTooltip<StatsPlotProps, TooltipData>(
                                 boxProps={{
                                     onMouseOver: () => {
                                         showTooltip({
-                                            tooltipLeft: xScale(d.boxPlot.min) ?? 0 + 40,
+                                            tooltipLeft: xScale(d.boxPlot.min) ?? 0 + 80,
                                             tooltipTop: yScale(d.boxPlot.x)! + constrainedWidth + 20,
                                             tooltipData: { ...d.boxPlot }
                                         })

src/frontend/static/frontend/src/css/biomarkers.css

@@ -2,10 +2,6 @@
     margin: 1rem 0;
 }
 
-.biomarkers--confirm--modal {
-    margin-top: 40vh !important;
-}
-
 .biomarkers--side--bar--buttons-group {
     width: 100%;
 }
@@ -25,8 +21,8 @@
 }
 
 .large-modal {
-    min-height: 80% !important;
-    width: 95% !important;
+    min-height: 92% !important;
+    width: 92% !important;
 }
 
 .min-height-50vh {
@@ -38,4 +34,9 @@
 }
 .remove-margin-top {
     margin-top: 0 !important;
+}
+.space-modal:nth-child(1) {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: space-between;
 }

src/frontend/static/frontend/src/files.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './css/files.css'
 
 import { FilesManager } from './components/files-manager/FilesManager'
 
-ReactDOM.render(
-    <FilesManager />,
-    document.getElementById('files-app')
-)
+const container = document.getElementById('files-app')
+const root = createRoot(container!)
+root.render(<FilesManager />)

src/frontend/static/frontend/src/gem.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './css/gem.css'
 
 import { Pipeline } from './components/pipeline/Pipeline'
 
-ReactDOM.render(
-    <Pipeline />,
-    document.getElementById('gem-app')
-)
+const container = document.getElementById('gem-app')
+const root = createRoot(container!)
+root.render(<Pipeline />)

src/frontend/static/frontend/src/index.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './css/index.css'
 
 import { Homepage } from './components/index/Homepage'
 
-ReactDOM.render(
-    <Homepage />,
-    document.getElementById('main-app')
-)
+const container = document.getElementById('main-app')
+const root = createRoot(container!)
+root.render(<Homepage />)

src/frontend/static/frontend/src/institutions.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './css/institutions.css'
 
 import { InstitutionsPanel } from './components/institutions/InstitutionsPanel'
 
-ReactDOM.render(
-    <InstitutionsPanel />,
-    document.getElementById('institutions-app')
-)
+const container = document.getElementById('institutions-app')
+const root = createRoot(container!)
+root.render(<InstitutionsPanel />)

src/frontend/static/frontend/src/login.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './css/login.css'
 
 import { LoginSignUpForm } from './components/login/LoginSignUpForm'
 
-ReactDOM.render(
-    <LoginSignUpForm />,
-    document.getElementById('login-form')
-)
+const container = document.getElementById('login-form')
+const root = createRoot(container!)
+root.render(<LoginSignUpForm />)

src/frontend/static/frontend/src/site-policy.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './css/site-policy.css'
 
 import { SitePolicy } from './components/site-policy/SitePolicy'
 
-ReactDOM.render(
-    <SitePolicy />,
-    document.getElementById('site-policy-app')
-)
+const container = document.getElementById('site-policy-app')
+const root = createRoot(container!)
+root.render(<SitePolicy />)