[Platform]: AotF pinned rows (#189)

Co-authored-by: Luca Fumis <[email protected]> Co-authored-by: Chintan Mehta <[email protected]>
opentargets · Sep 8, 2023 · e367b6d · e367b6d
1 parent b3349de
commit e367b6d
Show file tree

Hide file tree

Showing 45 changed files with 1,265 additions and 981 deletions.
diff --git a/apps/platform/.nvmrc b/apps/platform/.nvmrc
@@ -1 +1 @@
-16.15.1
+18.17.1
diff --git a/apps/platform/index.html b/apps/platform/index.html
@@ -3,10 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
     <meta name="theme-color" content="#FFF" />
     <!-- Open Graph tags -->
     <meta property="og:title" content="Open Targets Platform" />

diff --git a/apps/platform/src/components/AssociationsToolkit/AdvanceOptionsMenu.jsx b/apps/platform/src/components/AssociationsToolkit/AdvanceOptionsMenu.jsx
@@ -8,14 +8,10 @@ import {
 } from '@mui/material';
 import { faGear } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { styled } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 
 import useAotfContext from './hooks/useAotfContext';
 
-const TextContent = styled('div')({
-  marginLeft: '5px',
-});
-
 const PopoverContent = styled('div')({
   padding: '15px',
 });
@@ -52,9 +48,9 @@ function DataMenu() {
         variant="outlined"
         disableElevation
         disabled={isPrioritisation}
+        startIcon={<FontAwesomeIcon icon={faGear} size="lg" />}
       >
-        <FontAwesomeIcon icon={faGear} size="lg" />
-        <TextContent>Advanced options</TextContent>
+        Advanced options
       </Button>
       <Popover
         id={id}

diff --git a/apps/platform/src/components/AssociationsToolkit/DataDownloader.jsx b/apps/platform/src/components/AssociationsToolkit/DataDownloader.jsx
@@ -10,7 +10,8 @@ import {
   Slide,
   Popover,
 } from '@mui/material';
-import { makeStyles, styled } from '@mui/styles';
+import { styled } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import { faCloudArrowDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import useAotfContext from './hooks/useAotfContext';
@@ -258,8 +259,6 @@ function DataDownloader({ fileStem }) {
     downloadData('tsv', columns, getAllAssociations, fileStem);
   };
 
-  if (isPrioritisation) return null;
-
   return (
     <div>
       <Button
@@ -268,8 +267,9 @@ function DataDownloader({ fileStem }) {
         variant="outlined"
         disableElevation
         disabled={isPrioritisation}
+        startIcon={<FontAwesomeIcon icon={faCloudArrowDown} size="lg" />}
       >
-        <FontAwesomeIcon icon={faCloudArrowDown} size="lg" />
+        Export
       </Button>
       <Popover
         id={popoverId}

diff --git a/apps/platform/src/components/AssociationsToolkit/HeaderControls/HeaderControls.jsx b/apps/platform/src/components/AssociationsToolkit/HeaderControls/HeaderControls.jsx
@@ -1,16 +1,16 @@
-import { Collapse, Grid, Typography } from '@mui/material';
+import { Box, Collapse, Grid, Typography } from '@mui/material';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { styled } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import dataSources from '../static_datasets/dataSourcesAssoc';
 
 import Slider from './SliderControl';
 import Required from './RequiredControl';
+import { GridContainer } from '../layout';
 
 import useAotfContext from '../hooks/useAotfContext';
 
-
 const CloseContainer = styled('div')({
   position: 'absolute',
   left: '10px',
@@ -29,19 +29,10 @@ function HeaderControls({ cols = [] }) {
     setActiveHeadersControlls(false);
   };
 
-  const columnContainerStyle = {
-    gridTemplateColumns: ` repeat(${cols.length}, 1fr)`,
-  };
-
   return (
     <Collapse in={activeHeadersControlls}>
       <div className="weights-controlls">
-        <Grid
-          container
-          direction="row"
-          wrap="nowrap"
-          className="controlls-container"
-        >
+        <Grid container direction="row" wrap="nowrap">
           <CloseContainer onClick={handleClose}>
             <FontAwesomeIcon icon={faXmark} size="lg" />
           </CloseContainer>
@@ -52,20 +43,16 @@ function HeaderControls({ cols = [] }) {
             className="header-controls-labels"
             justifyContent="space-between"
           >
-            <Grid item>
-              <Typography variant="subtitle2">
-                Datasource weight control:
-              </Typography>
-            </Grid>
-            <Grid item>
-              <Typography variant="subtitle2">Required datasource:</Typography>
-            </Grid>
+            <Box>
+              <Typography variant="subtitle2">Weight</Typography>
+            </Box>
+            <Box>
+              <Typography variant="subtitle2">Require</Typography>
+            </Box>
           </Grid>
-          <Grid
-            item
-            container
-            style={columnContainerStyle}
-            className="grid-container controlls-wrapper"
+          <GridContainer
+            columnsCount={cols.length}
+            className="controlls-wrapper"
           >
             {cols.map(({ id }) => (
               <div key={id} className="colum-control">
@@ -82,7 +69,7 @@ function HeaderControls({ cols = [] }) {
                 </div>
               </div>
             ))}
-          </Grid>
+          </GridContainer>
         </Grid>
       </div>
     </Collapse>

diff --git a/apps/platform/src/components/AssociationsToolkit/HeaderControls/RequiredControl.jsx b/apps/platform/src/components/AssociationsToolkit/HeaderControls/RequiredControl.jsx
@@ -1,18 +1,20 @@
 import { useState, useEffect } from 'react';
 import { Checkbox } from '@mui/material';
-import { withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import useAotfContext from '../hooks/useAotfContext';
 import { checkBoxPayload, getControlChecked } from '../utils';
 
-const OTCheckbox = withStyles({
-  root: {
-    padding: 0,
-  },
-})(Checkbox);
+const OTCheckbox = styled(Checkbox)`
+  padding: 0;
+`;
 
 function RequiredControl({ id, aggregationId }) {
-  const { dataSourcesRequired, setDataSourcesRequired, loading } =
-    useAotfContext();
+  const {
+    dataSourcesRequired,
+    setDataSourcesRequired,
+    loading,
+    resetToInitialPagination,
+  } = useAotfContext();
 
   const [displayValue, setDisplayValue] = useState(
     getControlChecked(dataSourcesRequired, id)
@@ -40,13 +42,15 @@ function RequiredControl({ id, aggregationId }) {
       setDataSourcesRequired(newRequiredElement);
       setDisplayValue(newValue);
     }
+    resetToInitialPagination();
   };
 
   return (
     <OTCheckbox
       checked={displayValue}
       color="primary"
       onChange={handleChange}
+      name={id}
     />
   );
 }

diff --git a/apps/platform/src/components/AssociationsToolkit/HeaderControls/SliderControl.jsx b/apps/platform/src/components/AssociationsToolkit/HeaderControls/SliderControl.jsx
@@ -1,10 +1,14 @@
 import { useState, useEffect } from 'react';
 import { Slider } from '@mui/material';
-import { withStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
+
 import useAotfContext from '../hooks/useAotfContext';
 import { getWightSourceDefault } from '../utils';
 
-const OTSlider = withStyles({
+const OTSlider = styled(Slider)({
+  root: {
+    padding: '0 10px !important',
+  },
   mark: {
     backgroundColor: '#b8b8b8',
     width: 10,
@@ -14,7 +18,7 @@ const OTSlider = withStyles({
   valueLabel: {
     zIndex: '9999',
   },
-})(Slider);
+});
 
 const sliderPayload = (id, value) => ({
   id,
@@ -28,7 +32,11 @@ const getSliderValue = (values, id) => {
 };
 
 function SliderControll({ id }) {
-  const { dataSourcesWeights, setDataSourcesWeights } = useAotfContext();
+  const {
+    dataSourcesWeights,
+    setDataSourcesWeights,
+    resetToInitialPagination,
+  } = useAotfContext();
 
   const defaultValue = getWightSourceDefault(id);
   const initialValue = getSliderValue(dataSourcesWeights, id);
@@ -46,6 +54,7 @@ function SliderControll({ id }) {
       return src;
     });
     setDataSourcesWeights(newDataSources);
+    resetToInitialPagination();
   }, [value]);
 
   useEffect(() => {
@@ -64,6 +73,7 @@ function SliderControll({ id }) {
 
   return (
     <OTSlider
+      size="small"
       orientation="vertical"
       value={displayValue}
       aria-labelledby="vertical-slider"

diff --git a/apps/platform/src/components/AssociationsToolkit/SearchInput.jsx b/apps/platform/src/components/AssociationsToolkit/SearchInput.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Grid, Input, IconButton, styled } from '@mui/material';
+import { Grid, Input, IconButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import SearchIcon from '@mui/icons-material/Search';
 import ClearIcon from '@mui/icons-material/Clear';
 import useAotfContext from './hooks/useAotfContext';
@@ -38,6 +39,7 @@ function SearchInput({ placeholder = 'Search' }) {
     <InputContainer container>
       <Grid item xs={12}>
         <Input
+          name="associationsSearchInput"
           autoComplete="off"
           startAdornment={<SearchIcon />}
           endAdornment={

diff --git a/apps/platform/src/components/AssociationsToolkit/Table/AggregationsRow.jsx b/apps/platform/src/components/AssociationsToolkit/Table/AggregationsRow.jsx
@@ -1,14 +1,31 @@
 import { useState } from 'react';
+import { styled } from '@mui/material/styles';
+
 import AggregationsTooltip from './AggregationsTooltip';
-import { grouped as assocGrouped } from '../static_datasets/dataSourcesAssoc';
-import { grouped as prioritizationGrouped } from '../static_datasets/prioritizationCols';
+import associationsColumns from '../static_datasets/dataSourcesAssoc';
+import prioritizationColumns from '../static_datasets/prioritizationCols';
+import { groupViewColumnsBy } from '../utils';
+import { GridContainer } from '../layout';
+
+const AggregationsContainer = styled(GridContainer)({
+  gridColumnGap: '6px',
+});
+
+const associationGrouped = groupViewColumnsBy(
+  associationsColumns,
+  'aggregation'
+);
+const prioritizationGrouped = groupViewColumnsBy(
+  prioritizationColumns,
+  'aggregation'
+);
 
 function AggregationItem({
   aggregation,
   dataset,
   active,
   handleAggregationClick,
-  activeHeadersControlls,
+  setActiveHeadersControlls,
 }) {
   const [open, setOpen] = useState(false);
   const onMouseEnter = () => {
@@ -19,24 +36,25 @@ function AggregationItem({
     setOpen(false);
   };
 
+  const onClick = () => {
+    handleAggregationClick(aggregation);
+    setActiveHeadersControlls(true);
+  };
+
   const colsCont = dataset[aggregation].length;
   const style = {
-    flexGrow: colsCont,
+    gridColumn: `span ${colsCont}`,
+    gridRow: `row1-start / 2`,
   };
   const isActive = active === aggregation;
-  const className = `aggregation-indicator ${isActive && 'active'} ${
-    activeHeadersControlls && 'clickAble'
-  } `;
+  const className = `aggregation-indicator ${isActive && 'active'} clickAble`;
   return (
     <div
       className={className}
       style={style}
       onMouseEnter={e => onMouseEnter(aggregation)}
       onMouseLeave={e => onMouseLeave()}
-      onClick={() => {
-        if (activeHeadersControlls) return handleAggregationClick(aggregation);
-        return () => ({});
-      }}
+      onClick={() => onClick()}
     >
       <AggregationsTooltip
         title={aggregation}
@@ -53,23 +71,27 @@ function AggregationsRow({
   active,
   handleAggregationClick,
   activeHeadersControlls,
+  setActiveHeadersControlls,
 }) {
   const dataset =
-    table === 'associations' ? assocGrouped : prioritizationGrouped;
+    table === 'associations' ? associationGrouped : prioritizationGrouped;
   const aggregations = Object.keys(dataset);
 
   return (
     <div className="aggregations-container">
-      {aggregations.map(aggregation => (
-        <AggregationItem
-          key={aggregation}
-          aggregation={aggregation}
-          active={active}
-          dataset={dataset}
-          handleAggregationClick={handleAggregationClick}
-          activeHeadersControlls={activeHeadersControlls}
-        />
-      ))}
+      <AggregationsContainer>
+        {aggregations.map(aggregation => (
+          <AggregationItem
+            key={aggregation}
+            aggregation={aggregation}
+            active={active}
+            dataset={dataset}
+            handleAggregationClick={handleAggregationClick}
+            activeHeadersControlls={activeHeadersControlls}
+            setActiveHeadersControlls={setActiveHeadersControlls}
+          />
+        ))}
+      </AggregationsContainer>
     </div>
   );
 }