diff --git a/js/components/datasets/compoundSetList.js b/js/components/datasets/compoundSetList.js index 6db9f08dd..c519a83d8 100644 --- a/js/components/datasets/compoundSetList.js +++ b/js/components/datasets/compoundSetList.js @@ -3,7 +3,7 @@ */ import React, { useEffect, memo, useState, useCallback } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { clearDatasetSettings, initializeDatasetFilter } from './redux/dispatchActions'; +import { clearDatasetSettings, getInspirationsForMol, initializeDatasetFilter } from './redux/dispatchActions'; import { setExpandCompoundSets, setDataset, setSelectedDatasetIndex, setUpdatedDatasets } from './redux/actions'; import DatasetMoleculeList from './datasetMoleculeList'; import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, Tooltip } from '@material-ui/core'; @@ -13,6 +13,7 @@ import CloudDownloadOutlinedIcon from '@mui/icons-material/CloudDownloadOutlined import SearchField from '../common/Components/SearchField'; import { base_url } from '../routes/constants'; import { METHOD, api } from '../../utils/api'; +import { compoundsColors } from '../preview/compounds/redux/constants'; const useStyles = makeStyles(theme => ({ table: { @@ -63,6 +64,23 @@ export const CompoundSetList = () => { const scoreDatasetMap = useSelector(state => state.datasetsReducers.scoreDatasetMap); const moleculeLists = useSelector(state => state.datasetsReducers.moleculeLists); + const allInspirations = useSelector(state => state.datasetsReducers.allInspirations); + const compoundColors = useSelector(state => state.datasetsReducers.compoundColorByDataset); + + const blueInput = useSelector(state => state.previewReducers.compounds[compoundsColors.blue.key]); + const redInput = useSelector(state => state.previewReducers.compounds[compoundsColors.red.key]); + const greenInput = useSelector(state => state.previewReducers.compounds[compoundsColors.green.key]); + const purpleInput = useSelector(state => state.previewReducers.compounds[compoundsColors.purple.key]); + const apricotInput = useSelector(state => state.previewReducers.compounds[compoundsColors.apricot.key]); + + const inputs = { + [compoundsColors.blue.key]: blueInput, + [compoundsColors.red.key]: redInput, + [compoundsColors.green.key]: greenInput, + [compoundsColors.purple.key]: purpleInput, + [compoundsColors.apricot.key]: apricotInput + }; + const [isExpanded, setIsExpanded] = useState(false); const [searchString, setSearchString] = useState(null); const [defaultSelectedValue, setDefaultSelectedValue] = useState(); @@ -74,13 +92,20 @@ export const CompoundSetList = () => { * @param {*} scoreName * @returns {string} */ - const getCommonScore = useCallback((datasetID, scoreName) => { - let value = ''; - if (datasetID && scoreDatasetMap.hasOwnProperty(datasetID) && scoreDatasetMap[datasetID].hasOwnProperty(scoreName)) { - value = scoreDatasetMap[datasetID][scoreName].description; - } - return value; - }, [scoreDatasetMap]); + const getCommonScore = useCallback( + (datasetID, scoreName) => { + let value = ''; + if ( + datasetID && + scoreDatasetMap.hasOwnProperty(datasetID) && + scoreDatasetMap[datasetID].hasOwnProperty(scoreName) + ) { + value = scoreDatasetMap[datasetID][scoreName].description; + } + return value; + }, + [scoreDatasetMap] + ); /** * Download molecule list of given dataset as CSV file @@ -91,12 +116,81 @@ export const CompoundSetList = () => { const listOfMols = []; const moleculeList = moleculeLists[datasetID] || []; + let maxNumOfInspirations = 0; + moleculeList.forEach(cmp => { + const inspirations = getInspirationsForMol(allInspirations, datasetID, cmp.id); + if (inspirations?.length > maxNumOfInspirations) { + maxNumOfInspirations = inspirations.length; + } + }); + + let colorsTemplate = {}; + moleculeList.forEach(compound => { + let shoppingCartColors = []; + const cmpColorsForDataset = compoundColors[datasetID]; + if (cmpColorsForDataset) { + shoppingCartColors = cmpColorsForDataset[compound.id]; + shoppingCartColors.forEach(color => { + if (!colorsTemplate.hasOwnProperty(color)) { + colorsTemplate[color] = ''; + if (inputs.hasOwnProperty(color) && inputs[color]) { + colorsTemplate[`${color}-text`] = inputs[color]; + } + } + }); + } + }); + moleculeList.forEach(molecule => { let molObj = {}; molObj['smiles'] = molecule.smiles; molObj['name'] = molecule.name; + if (molecule.hasOwnProperty('numerical_scores')) { + Object.keys(molecule.numerical_scores).forEach(key => { + molObj[key] = molecule.numerical_scores[key]; + }); + } + if (molecule.hasOwnProperty('text_scores')) { + Object.keys(molecule.text_scores).forEach(key => { + molObj[key] = molecule.text_scores[key]; + }); + } + + if (maxNumOfInspirations) { + const inspirations = getInspirationsForMol(allInspirations, datasetID, molecule.id); + for (let i = 0; i < maxNumOfInspirations; i++) { + if (inspirations?.[i]) { + molObj[`inspiration_${i + 1}`] = inspirations[i].code; + } else { + molObj[`inspiration_${i + 1}`] = ''; + } + } + } + + let shoppingCartColors = []; + + const cmpColorsForDataset = compoundColors[datasetID]; + if (cmpColorsForDataset) { + shoppingCartColors = cmpColorsForDataset[molecule.id]; + let colorsTemplateCopy = { ...colorsTemplate }; + shoppingCartColors.forEach(color => { + colorsTemplateCopy[color] = true; + }); + + Object.keys(colorsTemplateCopy) + .filter(key => key.includes('-text')) + .forEach(key => { + const color = key.split('-')[0]; + if (colorsTemplateCopy.hasOwnProperty(color) && !colorsTemplateCopy[color]) { + colorsTemplateCopy[key] = ''; + } + }); + + molObj = { ...molObj, ...colorsTemplateCopy }; + } + listOfMols.push(molObj); }); @@ -118,7 +212,9 @@ export const CompoundSetList = () => { useEffect(() => { if (selectedDatasetIndex === 0) { - const filteredDataset = searchString ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase())) : customDatasets; + const filteredDataset = searchString + ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase())) + : customDatasets; const newDataset = filteredDataset.map((dataSet, index) => index === 0 ? { ...dataSet, visibility: true } : { ...dataSet, visibility: false } ); @@ -138,7 +234,9 @@ export const CompoundSetList = () => { }; const handleChangeVisibility = index => { - const filteredDataset = searchString ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase())) : customDatasets; + const filteredDataset = searchString + ? customDatasets.filter(dataset => dataset.title.toLowerCase().includes(searchString.toLowerCase())) + : customDatasets; const newDataset = filteredDataset.map((dataSetValue, i) => i === index ? { ...dataSetValue, visibility: true } : { ...dataSetValue, visibility: false } ); @@ -171,30 +269,14 @@ export const CompoundSetList = () => { - - {/* Select */} - - - Name - - - # - - - Submitter - - - Institution - - - Date - - - Method - - - CSV - + {/* Select */} + Name + # + Submitter + Institution + Date + Method + CSV @@ -220,23 +302,36 @@ export const CompoundSetList = () => { - {moleculeList.length} + + {moleculeList.length} + - {getCommonScore(dataset.id, 'submitter_name')} + + {getCommonScore(dataset.id, 'submitter_name')} + - {getCommonScore(dataset.id, 'submitter_institution')} + + {getCommonScore(dataset.id, 'submitter_institution')} + - {getCommonScore(dataset.id, 'generation_date')} + + {getCommonScore(dataset.id, 'generation_date')} + - {getCommonScore(dataset.id, 'method')} + + {getCommonScore(dataset.id, 'method')} + - downloadCSV(dataset.id)} /> + downloadCSV(dataset.id)} + /> diff --git a/js/components/datasets/selectedCompoundsList.js b/js/components/datasets/selectedCompoundsList.js index 23057eb16..c14cc225c 100644 --- a/js/components/datasets/selectedCompoundsList.js +++ b/js/components/datasets/selectedCompoundsList.js @@ -297,8 +297,9 @@ export const SelectedCompoundList = memo(() => { }; }, [dispatch]); - const getSetOfProps = usedDatasets => { + const getSetOfProps = filteredCompounds => { const unionOfProps = new Set(); + const usedDatasets = {}; unionOfProps.add('smiles'); @@ -313,6 +314,26 @@ export const SelectedCompoundList = memo(() => { } }); + filteredCompounds.forEach(compound => { + const datasetName = compound.datasetID; + if (!usedDatasets.hasOwnProperty(datasetName)) { + const mol = compound.molecule; + if (mol.hasOwnProperty('numerical_scores')) { + const numericalScores = mol['numerical_scores']; + Object.keys(numericalScores).forEach(key => { + unionOfProps.add(key); + }); + } + if (mol.hasOwnProperty('text_scores')) { + const textScores = mol['text_scores']; + Object.keys(textScores).forEach(key => { + unionOfProps.add(key); + }); + } + usedDatasets[datasetName] = true; + } + }); + return [...unionOfProps]; }; @@ -417,17 +438,6 @@ export const SelectedCompoundList = memo(() => { return result; }; - const getUsedDatasets = mols => { - const setOfDataSets = {}; - mols.forEach(mol => { - if (!setOfDataSets.hasOwnProperty(mol.datasetID)) { - setOfDataSets[mol.datasetID] = mol.datasetID; - } - }); - - return setOfDataSets; - }; - const getEmptyMolObject = (props, ids) => { let molObj = {}; @@ -470,8 +480,7 @@ export const SelectedCompoundList = memo(() => { return isVisible; }); - const usedDatasets = getUsedDatasets(filteredCompounds); - const props = getSetOfProps(usedDatasets); + const props = getSetOfProps(filteredCompounds); const ids = getCompoundIds(filteredCompounds); const listOfMols = []; @@ -520,7 +529,7 @@ export const SelectedCompoundList = memo(() => { 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; + molObj[`inspiration_${i + 1}`] = inspirations[i].code; } else { molObj[`inspiration_${i + 1}`] = ''; } @@ -534,11 +543,9 @@ export const SelectedCompoundList = memo(() => { const cmpColorsForDataset = compoundColors[compound.datasetID]; shoppingCartColors = cmpColorsForDataset[compound.molecule.id]; } - // let colorTagsToDisplay = ''; let colorsTemplateCopy = { ...colorsTemplate }; shoppingCartColors.forEach(color => { colorsTemplateCopy[color] = true; - // colorTagsToDisplay = colorTagsToDisplay + `${color}: ${inputs[color] || ''}|`; }); Object.keys(colorsTemplateCopy) @@ -550,7 +557,6 @@ export const SelectedCompoundList = memo(() => { } }); - // molObj['color_groups'] = colorTagsToDisplay; molObj = { ...molObj, ...colorsTemplateCopy }; listOfMols.push(molObj);