#1181 RHS UI improvements, fixed some related error

m2ms · Dec 14, 2023 · 4d64d5d · 4d64d5d
1 parent 5ee2269
commit 4d64d5d
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 163 deletions.
diff --git a/js/components/common/Tooltips/index.js b/js/components/common/Tooltips/index.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { Popper, Paper } from '@material-ui/core';
 import SVGInline from 'react-svg-inline';
 
-export const SvgTooltip = memo(({ open, anchorEl, imgData, width, height }) => {
+export const SvgTooltip = memo(({ open, anchorEl, imgData, width, height, placement = "right-end" }) => {
  return (
- <Popper open={open} anchorEl={anchorEl} placement="right-end">
+ <Popper open={open} anchorEl={anchorEl} placement={placement}>
  <Paper
  square
  style={{

diff --git a/js/components/datasets/compoundSetList.js b/js/components/datasets/compoundSetList.js
@@ -18,7 +18,15 @@ const useStyles = makeStyles(theme => ({
  marginTop: '6px',
  overflow: 'auto'
  },
+ tableCell: {
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ padding: 0
+ },
  search: {
+ width: 140,
+ paddingTop: '5px',
  margin: theme.spacing(1),
  '& .MuiInputBase-root': {
  color: 'white'
@@ -37,10 +45,6 @@ const useStyles = makeStyles(theme => ({
  width: '0.75em',
  height: '0.75em',
  padding: '0px'
- },
- search: {
- width: 140,
- paddingTop: '5px'
  }
 }));
 
@@ -64,7 +68,7 @@ export const CompoundSetList = () => {
  setDefaultSelectedValue(newDataset);
  dispatch(setUpdatedDatasets(newDataset));
  }
- }, []);
+ }, [customDatasets, dispatch, selectedDatasetIndex]);
 
  const handleExpandedChange = event => {
  if (event) {
@@ -107,59 +111,60 @@ export const CompoundSetList = () => {
  >
  <Table className={classes.table}>
  <TableHead>
- <TableRow style={{ padding: '0px' }}>
- <TableCell item style={{ width: '30px', padding: '0px' }}>
- Select
+ <TableRow style={{ padding: 0 }}>
+ <TableCell style={{ width: 25, padding: 0 }}>
+ {/* Select */}
  </TableCell>
- <TableCell item style={{ width: '50px', padding: '0px' }}>
+ <TableCell style={{ width: 60, padding: 0 }}>
  Name
  </TableCell>
- <TableCell item style={{ width: '50px', padding: '0px' }}>
+ <TableCell style={{ width: '50px', padding: 0 }}>
  #
  </TableCell>
- <TableCell item style={{ width: '100px', padding: '0px' }}>
+ <TableCell style={{ width: '100px', padding: 0 }}>
  Submitter
  </TableCell>
- <TableCell item style={{ width: '70px', padding: '0px' }}>
+ <TableCell style={{ width: '70px', padding: 0 }}>
  Institution
  </TableCell>
- <TableCell item style={{ width: '70px', padding: '0px' }}>
+ <TableCell style={{ width: '70px', padding: 0 }}>
  Date
  </TableCell>
- <TableCell item style={{ width: '70px', padding: '0px' }}>
+ <TableCell style={{ width: '70px', padding: 0 }}>
  Method
  </TableCell>
- <TableCell item style={{ width: '30px', padding: '0px' }}>
+ <TableCell style={{ width: '30px', padding: 0 }}>
  CSV
  </TableCell>
  </TableRow>
  </TableHead>
  <TableBody>
  {actualDataset?.map((dataset, index) => {
  return (
- <TableRow container key={index} style={{ height: '10px' }}>
- <TableCell style={{ width: '10px', padding: '0px', height: '10px' }}>
+ <TableRow key={index} style={{ height: 10 }}>
+ <TableCell style={{ padding: 0 }}>
  <Radio
  onClick={() => {
  handleChangeVisibility(index);
  }}
  checked={dataset.visibility}
  value={true}
  name="radio-button-demo"
- style={{ width: '30px', padding: '0px' }}
+ style={{ width: 25, padding: 0 }}
  />
  </TableCell>
  <Tooltip title={dataset.title}>
- <TableCell style={{ height: '10px', width: '50px', padding: '0px' }} key={dataset.id}>
- {dataset.title.length > 13 ? dataset.title.slice(0, 13) + '...' : dataset.title}
+ <TableCell className={classes.tableCell} style={{ maxWidth: 60 }} key={dataset.id}>
+ {/* {dataset.title.length > 13 ? dataset.title.slice(0, 13) + '...' : dataset.title} */}
+ {dataset.title}
  </TableCell>
  </Tooltip>
- <TableCell style={{ height: '10px', padding: '0px' }}></TableCell>
- <TableCell style={{ height: '10px', padding: '0px' }}></TableCell>
- <TableCell style={{ height: '10px', padding: '0px' }}></TableCell>
- <TableCell style={{ height: '10px', padding: '0px' }}></TableCell>
- <TableCell style={{ height: '10px', padding: '0px' }}></TableCell>
- <TableCell style={{ height: '10px', padding: '0px' }}>
+ <TableCell className={classes.tableCell} style={{ maxWidth: 50 }}></TableCell>
+ <TableCell className={classes.tableCell} style={{ maxWidth: 100 }}></TableCell>
+ <TableCell className={classes.tableCell} style={{ maxWidth: 70 }}></TableCell>
+ <TableCell className={classes.tableCell} style={{ maxWidth: 70 }}></TableCell>
+ <TableCell className={classes.tableCell} style={{ maxWidth: 70 }}></TableCell>
+ <TableCell style={{ padding: 0 }}>
  <CloudDownloadOutlinedIcon />
  </TableCell>
  </TableRow>

diff --git a/js/components/datasets/datasetFilter.js b/js/components/datasets/datasetFilter.js
@@ -275,8 +275,8 @@ export const DatasetFilter = memo(
  </div>
  </Grid>
  </Grid>
- <Grid container>
- <Grid container item className={classes.gridItemHeader}>
+ <Grid container style={{ maxHeight: 400 }}>
+ <Grid container item className={classes.gridItemHeader} wrap="nowrap">
  <Grid item className={classes.centered} style={{ width: widthCheckbox }}>
  Is shown
  </Grid>

diff --git a/js/components/datasets/datasetMoleculeList.js b/js/components/datasets/datasetMoleculeList.js
@@ -338,6 +338,12 @@ const useStyles = makeStyles(theme => ({
  padding: '0px',
  // color: theme.palette.primary.main
  color: 'red'
+ },
+ activeFilterIcon: {
+ color: theme.palette.success.main,
+ '&:hover': {
+ color: theme.palette.success.dark
+ }
  }
 }));
 
@@ -636,7 +642,9 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
  disabled={isLoadingMoleculeList}
  >
  <Tooltip title="Filter/Sort">
- <FilterList />
+ <>
+ <FilterList {...(isActiveFilter && { className: classes.activeFilterIcon })} />
+ </>
  </Tooltip>
  </IconButton>,
  <IconButton
@@ -652,7 +660,7 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
  </Tooltip>
  </IconButton>
  ],
- [classes, datasetID, dispatch, filterRef, isLoadingMoleculeList, sortDialogOpen, url, searchString]
+ [classes, datasetID, dispatch, filterRef, isLoadingMoleculeList, sortDialogOpen, url, searchString, isActiveFilter]
  );
 
  // useEffectDebugger(
@@ -947,7 +955,8 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
  <CrossReferenceDialog open anchorEl={selectedMoleculeRef} ref={crossReferenceDialogRef} />
  )}
  <div ref={filterRef}>
- {isActiveFilter && (
+ {/* TODO disable showing of filter tags for now */}
+ {false && isActiveFilter && (
  <>
  <div className={classes.filterSection}>
  <Grid container spacing={1}>
@@ -983,56 +992,56 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
  {/* Selection */}
  <Grid container direction="row" alignItems="center">
  {Object.keys(compoundsColors).map(item => (
-  <Grid item key={`${item}-txtfield`}>
-  <TextField
-  InputProps={{
-  readOnly: editedColorGroup !== item,
-  endAdornment: (
-  <InputAdornment position="end">
-  <IconButton
-  className={
-  editedColorGroup !== item ? classes.editClassNameIcon : classes.editClassNameIconSelected
-  }
-  color={'inherit'}
-  value={`${item}`}
-  onClick={e => {
-  dispatch(onStartEditColorClassName(e));
-  inputRefs[item].current.focus();
-  inputRefs[item].current.select();
-  }}
-  >
-  <Edit />
-  </IconButton>
-  </InputAdornment>
-  ),
-  startAdornment: (
-  <InputAdornment position="start">
-  <Checkbox
-  className={classes.classCheckbox}
-  key={`CHCK_${item}`}
-  value={`${item}`}
-  onChange={e => dispatch(onChangeCompoundClassCheckbox(e))}
-  checked={currentCompoundClass === item}
-  ></Checkbox>
-  </InputAdornment>
-  )
-  }}
-  inputRef={inputRefs[item]}
-  autoComplete="off"
-  id={`${item}`}
-  key={`CLASS_${item}`}
-  variant="standard"
-  className={classNames(
-  classes.textField,
-  classes[item],
-  currentCompoundClass === item && classes.selectedInput
-  )}
-  onChange={e => dispatch(onChangeCompoundClassValue(e))}
-  onKeyDown={e => dispatch(onKeyDownCompoundClass(e))}
-  // onClick={e => dispatch(onClickCompoundClass(e))}
-  value={inputs[item] || ''}
-  />
-  </Grid>
+ <Grid item key={`${item}-txtfield`}>
+ <TextField
+ InputProps={{
+ readOnly: editedColorGroup !== item,
+ endAdornment: (
+ <InputAdornment position="end">
+ <IconButton
+ className={
+ editedColorGroup !== item ? classes.editClassNameIcon : classes.editClassNameIconSelected
+ }
+ color={'inherit'}
+ value={`${item}`}
+ onClick={e => {
+ dispatch(onStartEditColorClassName(e));
+ inputRefs[item].current.focus();
+ inputRefs[item].current.select();
+ }}
+ >
+ <Edit />
+ </IconButton>
+ </InputAdornment>
+ ),
+ startAdornment: (
+ <InputAdornment position="start">
+ <Checkbox
+ className={classes.classCheckbox}
+ key={`CHCK_${item}`}
+ value={`${item}`}
+ onChange={e => dispatch(onChangeCompoundClassCheckbox(e))}
+ checked={currentCompoundClass === item}
+ ></Checkbox>
+ </InputAdornment>
+ )
+ }}
+ inputRef={inputRefs[item]}
+ autoComplete="off"
+ id={`${item}`}
+ key={`CLASS_${item}`}
+ variant="standard"
+ className={classNames(
+ classes.textField,
+ classes[item],
+ currentCompoundClass === item && classes.selectedInput
+ )}
+ onChange={e => dispatch(onChangeCompoundClassValue(e))}
+ onKeyDown={e => dispatch(onKeyDownCompoundClass(e))}
+ // onClick={e => dispatch(onClickCompoundClass(e))}
+ value={inputs[item] || ''}
+ />
+ </Grid>
  ))}
  </Grid>
  </Grid>

diff --git a/js/components/datasets/datasetMoleculeListSortFilterItem.js b/js/components/datasets/datasetMoleculeListSortFilterItem.js
@@ -79,7 +79,6 @@ const widthSlider = 170;
 
 export const DatasetMoleculeListSortFilter = memo(
  ({
- key,
  scoreName,
  scoreID,
  min,
@@ -212,7 +211,7 @@ export const DatasetMoleculeListSortFilter = memo(
  // }
 
  return (
- <Grid container item className={classes.gridItemHeader}>
+ <Grid container item className={classes.gridItemHeader} wrap="nowrap">
  <Grid item container className={classes.centered} style={{ width: widthCheckbox }}>
  <Grid item container justifyContent="center">
  <Grid item>