Implemented issues #1172 and #1173 (#380)

* #1063 added header and search * #1063 fixed body table, page count and search * #1063 fixed minor bugs and set clear filter * Squashed commit of the following: commit 10925d2 Author: RobertMatuska <[email protected]> Date: Thu Sep 28 10:27:36 2023 +0200 #1114 edited text and style * #1161 setted search and filter for old target list * #1161 fixed discourse icon padding * #1161 fixed filtered list sort * #1161 fixed target access sort and filter * #1161 fixed change page * #1145 preserve state of molecule rendering, save also actions of representation changes to snapshot * do not wrap display controls buttons * #1167 resize target list colmuns * #1161 fixed sorting * #1161 fixed sorting * #1161 edit sort functionality for filter table * #1161 fixed search, filter, sort by target access * #1161 created init date column * #1161 # filtering and sorting init date * #1161 fixed clear and sort init date * #1161 fixed target sorting * Squashed commit of the following: commit d489526 Merge: 1c45038 411921f Author: Boris Kovar <[email protected]> Date: Mon Oct 16 08:24:05 2023 +0200 Merge branch '#1173' of https://github.com/m2ms/fragalysis-frontend into #1173 commit 1c45038 Author: Boris Kovar <[email protected]> Date: Fri Oct 13 11:03:49 2023 +0200 - implemented #1173 also with save/restore and undo/redo functionality commit 411921f Author: Boris Kovar <[email protected]> Date: Fri Oct 13 11:03:49 2023 +0200 - implemented #1173 also with save/restore and undo/redo functionality * merge * Squashed commit of the following: commit 7883c15 Merge: 5e2b937 19b9f24 Author: Boris Kovar <[email protected]> Date: Mon Oct 16 11:19:36 2023 +0200 Merge branch '#1172' of https://github.com/m2ms/fragalysis-frontend into #1172 commit 5e2b937 Author: Boris Kovar <[email protected]> Date: Mon Oct 16 11:16:15 2023 +0200 - added compound_set to csv export - #1172 commit 19b9f24 Author: Boris Kovar <[email protected]> Date: Mon Oct 16 11:16:15 2023 +0200 - added compound_set to csv export - #1172 commit 75ac125 Merge: f50666c 574c7b5 Author: Boris Kovar <[email protected]> Date: Mon Oct 16 08:26:08 2023 +0200 Merge branch '#1172' of https://github.com/m2ms/fragalysis-frontend into #1172 commit f50666c Author: Boris Kovar <[email protected]> Date: Fri Oct 13 13:45:34 2023 +0200 - implemented #1172 commit 574c7b5 Author: Boris Kovar <[email protected]> Date: Fri Oct 13 13:45:34 2023 +0200 - implemented #1172 --------- Co-authored-by: RobertMatuska <[email protected]> Co-authored-by: matej <[email protected]>
m2ms · Oct 16, 2023 · 6d5a12e · 6d5a12e
1 parent 4c7c27c
commit 6d5a12e
Show file tree

Hide file tree

Showing 16 changed files with 794 additions and 188 deletions.
diff --git a/js/components/datasets/datasetMoleculeList.js b/js/components/datasets/datasetMoleculeList.js
@@ -14,7 +14,8 @@ import {
  TextField,
  Checkbox,
  InputAdornment,
- setRef
+ setRef,
+ Box
 } from '@material-ui/core';
 import React, { useState, useEffect, memo, useRef, useContext, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -52,7 +53,11 @@ import {
  setIsOpenLockVisibleCompoundsDialogGlobal,
  setSearchStringOfCompoundSet,
  setCompoundToSelectedCompoundsByDataset,
- setSelectAllButtonForDataset
+ setSelectAllButtonForDataset,
+ appendCompoundColorOfDataset,
+ appendColorToAllCompoundsOfDataset,
+ removeCompoundColorOfDataset,
+ removeColorFromAllCompoundsOfDataset
 } from './redux/actions';
 import { DatasetFilter } from './datasetFilter';
 import { FilterList, Link, DeleteForever, ArrowUpward, ArrowDownward, Edit } from '@material-ui/icons';
@@ -79,6 +84,7 @@ import {
  onStartEditColorClassName
 } from '../preview/compounds/redux/dispatchActions';
 import { LockVisibleCompoundsDialog } from './lockVisibleCompoundsDialog';
+import { size } from 'lodash';
 
 const useStyles = makeStyles(theme => ({
  container: {
@@ -163,6 +169,26 @@ const useStyles = makeStyles(theme => ({
  contButtonsMargin: {
  margin: theme.spacing(1) / 2
  },
+ paintAllButton: {
+ minWidth: 'fit-content',
+ paddingLeft: theme.spacing(1) / 4,
+ paddingRight: theme.spacing(1) / 4,
+ paddingBottom: 0,
+ paddingTop: 0,
+ fontWeight: 'bold',
+ fontSize: 9,
+ borderRadius: 0,
+ borderColor: theme.palette.primary.main,
+ backgroundColor: 'white',
+ '&:hover': {
+ backgroundColor: 'white'
+ // color: theme.palette.primary.contrastText
+ },
+ '&:disabled': {
+ borderRadius: 0,
+ borderColor: 'white'
+ }
+ },
  contColButton: {
  minWidth: 'fit-content',
  paddingLeft: theme.spacing(1) / 4,
@@ -808,6 +834,39 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
  }
  };
 
+ const isPaintOrUnpaintAll = () => {
+ let isPaint = true;
+ const compounds = Object.keys(compoundColors);
+ for (let i = 0; i < compounds.length; i++) {
+ const cmpId = compounds[i];
+ const colors = compoundColors[cmpId];
+ if (colors.some(c => c === currentCompoundClass)) {
+ isPaint = false;
+ break;
+ }
+ }
+
+ return isPaint;
+ };
+
+ const paintAllCompounds = () => {
+ const paintAll = isPaintOrUnpaintAll();
+ const cmpIds = joinedMoleculeLists.map(mol => mol.id);
+ if (paintAll) {
+ joinedMoleculeLists.forEach(molecule => {
+ const molName = molecule.name;
+ dispatch(appendCompoundColorOfDataset(datasetID, molecule.id, currentCompoundClass, molName, true));
+ });
+ dispatch(appendColorToAllCompoundsOfDataset(datasetID, currentCompoundClass, cmpIds));
+ } else {
+ joinedMoleculeLists.forEach(molecule => {
+ const molName = molecule.name;
+ dispatch(removeCompoundColorOfDataset(datasetID, molecule.id, currentCompoundClass, molName, true));
+ });
+ dispatch(removeColorFromAllCompoundsOfDataset(datasetID, currentCompoundClass, cmpIds));
+ }
+ };
+
  return (
  <Panel hasHeader title={title} withTooltip headerActions={actions}>
  <AlertModal
@@ -1082,25 +1141,53 @@ const DatasetMoleculeList = ({ title, datasetID, url }) => {
  </Grid>
  </Grid>
  <Grid item>
- {
- <Tooltip title={selectAllPressed ? 'Unselect all' : 'Select all'}>
- <Grid item style={{ margin: '4px', marginLeft: '5px' }}>
- <Button
- variant="outlined"
- className={classNames(classes.contColButton, {
- [classes.contColButtonHalfSelected]: false
- })}
- onClick={() => {
- dispatch(setSelectAllButtonForDataset(!selectAllPressed));
- selectAllDatasetMolecule(!selectAllPressed);
+ <Tooltip title={selectAllPressed ? 'Unselect all' : 'Select all'}>
+ <Grid item style={{ margin: '4px', marginLeft: '5px' }}>
+ <Button
+ variant="outlined"
+ className={classNames(classes.contColButton, {
+ [classes.contColButtonHalfSelected]: false
+ })}
+ onClick={() => {
+ dispatch(setSelectAllButtonForDataset(!selectAllPressed));
+ selectAllDatasetMolecule(!selectAllPressed);
+ }}
+ disabled={false}
+ >
+ {selectAllPressed ? 'Unselect all' : 'Select all'}
+ </Button>
+ </Grid>
+ </Tooltip>
+ </Grid>
+ <Grid item>
+ <Tooltip
+ title={
+ isPaintOrUnpaintAll()
+ ? 'Paint all compounds with selected color'
+ : 'Unpaint all compounds with selected color'
+ }
+ >
+ <Grid item style={{ margin: '4px', marginLeft: '5px' }}>
+ <Button
+ variant="outlined"
+ className={classNames(classes.paintAllButton)}
+ disabled={false}
+ onClick={() => paintAllCompounds()}
+ >
+ <Box
+ style={{
+ width: '10px',
+ height: '10px',
+ backgroundColor: compoundsColors[currentCompoundClass]
+ ? compoundsColors[currentCompoundClass].color
+ : '#000000',
+ marginRight: '2px'
  }}
- disabled={false}
- >
- {selectAllPressed ? 'Unselect all' : 'Select all'}
- </Button>
- </Grid>
- </Tooltip>
- }
+ />
+ {isPaintOrUnpaintAll() ? 'Paint all' : 'Unpaint all'}
+ </Button>
+ </Grid>
+ </Tooltip>
  </Grid>
  </Grid>
  </Grid>

diff --git a/js/components/datasets/datasetMoleculeView/datasetMoleculeView.js b/js/components/datasets/datasetMoleculeView/datasetMoleculeView.js
@@ -78,6 +78,7 @@ import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
 import RemoveShoppingCartIcon from '@mui/icons-material/RemoveShoppingCart';
 import { compoundsColors } from '../../preview/compounds/redux/constants';
 import { LockVisibleCompoundsDialog } from '../lockVisibleCompoundsDialog';
+import { fabClasses } from '@mui/material';
 
 const useStyles = makeStyles(theme => ({
  container: {
@@ -639,26 +640,26 @@ const DatasetMoleculeView = memo(
  // if (shoppingCartColors?.length === 1) {
  // dispatch(removeMoleculeFromCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
  // }
- dispatch(removeCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, true));
+ dispatch(removeCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, false));
  } else {
  // dispatch(appendMoleculeToCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
- dispatch(appendCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, true));
+ dispatch(appendCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, false));
  }
  };
 
  const handleRemoveColorFromCompound = event => {
  if (shoppingCartColors?.length === 1) {
  dispatch(removeMoleculeFromCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
  }
- dispatch(removeCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, true));
+ dispatch(removeCompoundColorOfDataset(datasetID, currentID, event.target.id, moleculeTitle, false));
  };
 
  const handleShoppingCartClick = () => {
  if (currentCompoundClass) {
  // if (!isAddedToShoppingCart) {
  // dispatch(appendMoleculeToCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
  // }
- dispatch(appendCompoundColorOfDataset(datasetID, currentID, currentCompoundClass, moleculeTitle, true));
+ dispatch(appendCompoundColorOfDataset(datasetID, currentID, currentCompoundClass, moleculeTitle, false));
  }
  };
 

diff --git a/js/components/datasets/redux/actions.js b/js/components/datasets/redux/actions.js
@@ -388,7 +388,8 @@ export const appendCompoundColorOfDataset = (
  skipTracking = false
 ) => ({
  type: constants.APPEND_COMPOUND_COLOR_OF_DATASET,
- payload: { datasetID, compoundID, colorClass, compoundTitle, skipTracking: skipTracking }
+ payload: { datasetID, compoundID, colorClass, compoundTitle },
+ skipTracking: skipTracking
 });
 
 export const removeCompoundColorOfDataset = (
@@ -399,7 +400,18 @@ export const removeCompoundColorOfDataset = (
  skipTracking = false
 ) => ({
  type: constants.REMOVE_COMPOUND_COLOR_OF_DATASET,
- payload: { datasetID, compoundID, colorClass, compoundTitle, skipTracking: skipTracking }
+ payload: { datasetID, compoundID, colorClass, compoundTitle },
+ skipTracking: skipTracking
+});
+
+export const appendColorToAllCompoundsOfDataset = (datasetID, colorClass, cmpIds) => ({
+ type: constants.APPEND_COLOR_TO_ALL_COMPOUNDS_OF_DATASET,
+ payload: { datasetID, colorClass, cmpIds }
+});
+
+export const removeColorFromAllCompoundsOfDataset = (datasetID, colorClass, cmpIds) => ({
+ type: constants.REMOVE_COLOR_FROM_ALL_COMPOUNDS_OF_DATASET,
+ payload: { datasetID, colorClass, cmpIds }
 });
 
 export const appendColorToSelectedColorFilter = colorClass => ({

diff --git a/js/components/datasets/redux/constants.js b/js/components/datasets/redux/constants.js
@@ -74,6 +74,8 @@ export const constants = {
 
  APPEND_COMPOUND_COLOR_OF_DATASET: prefix + 'APPEND_COMPOUND_COLOR_OF_DATASET',
  REMOVE_COMPOUND_COLOR_OF_DATASET: prefix + 'REMOVE_COMPOUND_COLOR_OF_DATASET',
+ APPEND_COLOR_TO_ALL_COMPOUNDS_OF_DATASET: prefix + 'SET_COLOR_TO_ALL_COMPOUNDS_OF_DATASET',
+ REMOVE_COLOR_FROM_ALL_COMPOUNDS_OF_DATASET: prefix + 'REMOVE_COLOR_FROM_ALL_COMPOUNDS_OF_DATASET',
 
  APPEND_COLOR_TO_SELECTED_COLOR_FILTERS: prefix + 'APPEND_COLOR_TO_SELECTED_COLOR_FILTERS',
  REMOVE_COLOR_FROM_SELECTED_COLOR_FILTERS: prefix + 'REMOVE_COLOR_FROM_SELECTED_COLOR_FILTERS',

diff --git a/js/components/datasets/selectedCompoundsList.js b/js/components/datasets/selectedCompoundsList.js
@@ -33,6 +33,7 @@ import { CrossReferenceDialog } from './crossReferenceDialog';
 import {
  autoHideDatasetDialogsOnScroll,
  getAllVisibleButNotLockedSelectedCompounds,
+ getInspirationsForMol,
  isCompoundLocked,
  isCompoundVisible,
  moveDatasetMoleculeUpDown,
@@ -419,7 +420,9 @@ export const SelectedCompoundList = memo(() => {
  const getUsedDatasets = mols => {
  const setOfDataSets = {};
  mols.forEach(mol => {
- if (!setOfDataSets.hasOwnProperty(mol.datasetID)) setOfDataSets[mol.datasetID] = mol.datasetID;
+ if (!setOfDataSets.hasOwnProperty(mol.datasetID)) {
+ setOfDataSets[mol.datasetID] = mol.datasetID;
+ }
  });
 
  return setOfDataSets;
@@ -492,10 +495,38 @@ export const SelectedCompoundList = memo(() => {
  });
  });
 
+ const hasName = filteredCompounds.find(cmp => !!cmp.molecule.name);
+ let maxNumOfInspirations = 0;
+ const allInspirations = state.datasetsReducers.allInspirations;
+ filteredCompounds.forEach(cmp => {
+ const inspirations = getInspirationsForMol(allInspirations, cmp.datasetID, cmp.molecule.id);
+ if (inspirations?.length > maxNumOfInspirations) {
+ maxNumOfInspirations = inspirations.length;
+ }
+ });
+
  filteredCompounds.forEach(compound => {
  let molObj = getEmptyMolObject(props, ids);
+
+ if (hasName) {
+ molObj['name'] = compound.molecule.name ? compound.molecule.name : '';
+ }
+
+ molObj['compound_set'] = compound.datasetID;
+
  molObj = populateMolObject(molObj, compound, props, ids);
 
+ if (maxNumOfInspirations) {
+ const inspirations = getInspirationsForMol(allInspirations, compound.datasetID, compound.molecule.id);
+ for (let i = 0; i < maxNumOfInspirations; i++) {
+ if (inspirations?.[i]) {
+ molObj[`inspiration_${i + 1}`] = inspirations[i].protein_code;
+ } else {
+ molObj[`inspiration_${i + 1}`] = '';
+ }
+ }
+ }
+
  let shoppingCartColors = [];
  if (isCompoundFromVectorSelector(compound.molecule)) {
  shoppingCartColors = [compound.molecule.class];

diff --git a/js/components/projects/redux/dispatchActions.js b/js/components/projects/redux/dispatchActions.js
@@ -552,5 +552,5 @@ const getJobOverrides = async () => {
  const resultCall = await api({
  url: `${base_url}/api/job_override/`
  });
- return resultCall.data.results[0].override;
+ return resultCall.data?.results[0]?.override;
 };
diff --git a/js/components/target/redux/actions.js b/js/components/target/redux/actions.js
@@ -136,3 +136,25 @@ export const setSearchDateLastEditTo = searchDateLastEditTo => {
  payload: searchDateLastEditTo
  };
 };
+
+export const setSearchTargetAccessString = searchTargetAccessString => {
+ return {
+ type: constants.SEARCH_TARGET_ACCESS_STRING,
+ payload: searchTargetAccessString
+ };
+};
+
+export const setSearchInitDateFrom = searchInitDateFrom => {
+ return {
+ type: constants.SEARCH_INIT_DATE_FROM,
+ payload: searchInitDateFrom
+ };
+};
+
+export const setSearchInitDateTo = searchInitDateTo => {
+ return {
+ type: constants.SEARCH_INIT_DATE_TO,
+ payload: searchInitDateTo
+ };
+};
+
diff --git a/js/components/target/redux/constants.js b/js/components/target/redux/constants.js
@@ -28,12 +28,15 @@ export const constants = {
  SEARCH_EC_NUMBER: prefix + 'SEARCH_EC_NUMBER',
  SEARCH_N_HITS: prefix + 'SEARCH_N_HITS',
  SEARCH_DATE_LAST_EDIT_FROM: prefix + 'SEARCH_DATE_LAST_EDIT_FROM',
- SEARCH_DATE_LAST_EDIT_TO: prefix + 'SEARCH_DATE_LAST_EDIT_TO'
+ SEARCH_DATE_LAST_EDIT_TO: prefix + 'SEARCH_DATE_LAST_EDIT_TO',
+ SEARCH_TARGET_ACCESS_STRING: prefix + 'SEARCH_TARGET_ACCESS_STRING',
+ SEARCH_INIT_DATE_FROM: prefix + 'SEARCH_INIT_DATE_FROM',
+ SEARCH_INIT_DATE_TO: prefix + 'SEARCH_INIT_DATE_TO'
 };
 
 export const TARGETS_ATT = {
- target: {
- key: 'target',
+ title: {
+ key: 'title',
  name: 'Target',
  isFloat: true,
  color: '#daa520',
@@ -48,7 +51,16 @@ export const TARGETS_ATT = {
  color: '#f96587',
  filter: true,
  dateFilter: false,
- path: undefined
+ path: 'project.target_access_string'
+ },
+ initDate: {
+ key: 'initDate',
+ name: 'Init date',
+ isFloat: true,
+ color: '#dcc520',
+ filter: true,
+ dateFilter: true,
+ path: 'project.init_date'
  }
  /*
  numberOfChains: {

diff --git a/js/components/target/redux/reducer.js b/js/components/target/redux/reducer.js
@@ -126,6 +126,20 @@ export const targetReducers = (state = INITIAL_STATE, action = {}) => {
  searchDateLastEditTo: action.payload
  });
 
+ case constants.SEARCH_TARGET_ACCESS_STRING:
+ return Object.assign({}, state, {
+ searchTargetAccessString: action.payload
+ });
+
+ case constants.SEARCH_INIT_DATE_FROM:
+ return Object.assign({}, state, {
+ searchInitDateFrom: action.payload
+ });
+
+ case constants.SEARCH_INIT_DATE_TO:
+ return Object.assign({}, state, {
+ searchInitDateTo: action.payload
+ });
  default:
  return state;
  }