Skip to content

Commit

Permalink
- #1393 - all columns are now included
Browse files Browse the repository at this point in the history
  • Loading branch information
@boriskovar-m2ms
boriskovar-m2ms committed Mar 25, 2024
1 parent b48fc7d commit 07ba57d
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 58 deletions.
175 changes: 135 additions & 40 deletions js/components/datasets/compoundSetList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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: {
Expand Down Expand Up @@ -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();
Expand All @@ -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
Expand All @@ -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);
});

Expand All @@ -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 }
);
Expand All @@ -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 }
);
Expand Down Expand Up @@ -171,30 +269,14 @@ export const CompoundSetList = () => {
<Table className={classes.table}>
<TableHead>
<TableRow style={{ padding: 0 }}>
<TableCell style={{ width: 25, padding: 0 }}>
{/* Select */}
</TableCell>
<TableCell style={{ width: 60, padding: 0 }}>
Name
</TableCell>
<TableCell style={{ width: 15, padding: 0 }}>
#
</TableCell>
<TableCell style={{ width: 70, padding: 0 }}>
Submitter
</TableCell>
<TableCell style={{ width: 55, padding: 0 }}>
Institution
</TableCell>
<TableCell style={{ width: 60, padding: 0 }}>
Date
</TableCell>
<TableCell style={{ width: 70, padding: 0 }}>
Method
</TableCell>
<TableCell style={{ width: 30, padding: 0 }}>
CSV
</TableCell>
<TableCell style={{ width: 25, padding: 0 }}>{/* Select */}</TableCell>
<TableCell style={{ width: 60, padding: 0 }}>Name</TableCell>
<TableCell style={{ width: 15, padding: 0 }}>#</TableCell>
<TableCell style={{ width: 70, padding: 0 }}>Submitter</TableCell>
<TableCell style={{ width: 55, padding: 0 }}>Institution</TableCell>
<TableCell style={{ width: 60, padding: 0 }}>Date</TableCell>
<TableCell style={{ width: 70, padding: 0 }}>Method</TableCell>
<TableCell style={{ width: 30, padding: 0 }}>CSV</TableCell>
</TableRow>
</TableHead>
<TableBody>
Expand All @@ -220,23 +302,36 @@ export const CompoundSetList = () => {
</TableCell>
</Tooltip>
<Tooltip title="Number of compounds">
<TableCell className={classes.tableCell} style={{ maxWidth: 15 }}>{moleculeList.length}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 15 }}>
{moleculeList.length}
</TableCell>
</Tooltip>
<Tooltip title={getCommonScore(dataset.id, 'submitter_name')}>
<TableCell className={classes.tableCell} style={{ maxWidth: 100 }}>{getCommonScore(dataset.id, 'submitter_name')}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 100 }}>
{getCommonScore(dataset.id, 'submitter_name')}
</TableCell>
</Tooltip>
<Tooltip title={getCommonScore(dataset.id, 'submitter_institution')}>
<TableCell className={classes.tableCell} style={{ maxWidth: 70 }}>{getCommonScore(dataset.id, 'submitter_institution')}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 70 }}>
{getCommonScore(dataset.id, 'submitter_institution')}
</TableCell>
</Tooltip>
<Tooltip title={getCommonScore(dataset.id, 'generation_date')}>
<TableCell className={classes.tableCell} style={{ maxWidth: 60 }}>{getCommonScore(dataset.id, 'generation_date')}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 60 }}>
{getCommonScore(dataset.id, 'generation_date')}
</TableCell>
</Tooltip>
<Tooltip title={getCommonScore(dataset.id, 'method')}>
<TableCell className={classes.tableCell} style={{ maxWidth: 150 }}>{getCommonScore(dataset.id, 'method')}</TableCell>
<TableCell className={classes.tableCell} style={{ maxWidth: 150 }}>
{getCommonScore(dataset.id, 'method')}
</TableCell>
</Tooltip>
<TableCell style={{ padding: 0 }}>
<Tooltip title="Download as CSV">
<CloudDownloadOutlinedIcon className={classes.downloadIcon} onClick={() => downloadCSV(dataset.id)} />
<CloudDownloadOutlinedIcon
className={classes.downloadIcon}
onClick={() => downloadCSV(dataset.id)}
/>
</Tooltip>
</TableCell>
</TableRow>
Expand Down
42 changes: 24 additions & 18 deletions js/components/datasets/selectedCompoundsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,8 +297,9 @@ export const SelectedCompoundList = memo(() => {
};
}, [dispatch]);

const getSetOfProps = usedDatasets => {
const getSetOfProps = filteredCompounds => {
const unionOfProps = new Set();
const usedDatasets = {};

unionOfProps.add('smiles');

Expand All @@ -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];
};

Expand Down Expand Up @@ -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 = {};

Expand Down Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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}`] = '';
}
Expand All @@ -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)
Expand All @@ -550,7 +557,6 @@ export const SelectedCompoundList = memo(() => {
}
});

// molObj['color_groups'] = colorTagsToDisplay;
molObj = { ...molObj, ...colorsTemplateCopy };

listOfMols.push(molObj);
Expand Down

0 comments on commit 07ba57d

Please sign in to comment.