From e4bbac2ffc22fb43a0b9be1c23a30bc78382a4ad Mon Sep 17 00:00:00 2001 From: Matej Vavrek Date: Tue, 24 Mar 2020 20:23:39 +0100 Subject: [PATCH] #183 added site id and compound id into filter dialog for further sorting options #208 hid compounds status labels --- .../preview/molecule/moleculeList.js | 4 +- .../molecule/moleculeListSortFilterDialog.js | 9 ++-- .../molecule/moleculeListSortFilterItem.js | 53 ++++++++++--------- .../preview/molecule/moleculeView.js | 4 +- .../preview/molecule/redux/constants.js | 42 +++++++++++---- 5 files changed, 68 insertions(+), 44 deletions(-) diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js index 388ba33c1..f95fbb032 100644 --- a/js/components/preview/molecule/moleculeList.js +++ b/js/components/preview/molecule/moleculeList.js @@ -160,7 +160,6 @@ const MoleculeList = memo( const imgHeight = 34; const imgWidth = 150; - const [filteredCount, setFilteredCount] = useState(0); const [predefinedFilter, setPredefinedFilter] = useState(filter !== undefined ? filter.predefined : DEFAULT_FILTER); const isActiveFilter = !!(filterSettings || {}).active; @@ -180,6 +179,7 @@ const MoleculeList = memo( if (isActiveFilter) { joinedMoleculeLists = filterMolecules(joinedMoleculeLists, filterSettings); } else { + // default sort is by site joinedMoleculeLists.sort((a, b) => a.site - b.site); } @@ -333,7 +333,7 @@ const MoleculeList = memo( - Filters #{filteredCount} + Filters diff --git a/js/components/preview/molecule/moleculeListSortFilterDialog.js b/js/components/preview/molecule/moleculeListSortFilterDialog.js index 5c4d80449..949212b02 100644 --- a/js/components/preview/molecule/moleculeListSortFilterDialog.js +++ b/js/components/preview/molecule/moleculeListSortFilterDialog.js @@ -88,6 +88,7 @@ export const filterMolecules = (molecules, filterSettings) => { for (let molecule of molecules) { let add = true; // By default molecule passes filter for (let attr of MOL_ATTRIBUTES) { + if (!attr.filter) continue; const lowAttr = attr.key.toLowerCase(); const attrValue = molecule[lowAttr]; if ( @@ -105,15 +106,10 @@ export const filterMolecules = (molecules, filterSettings) => { // 2. Sort let sortedAttributes = filterSettings.priorityOrder.map(attr => attr); - sortedAttributes.push('site'); // Finally sort by site; return filteredMolecules.sort((a, b) => { for (let prioAttr of sortedAttributes) { - let order = 1; - if (prioAttr !== 'site') { - // Site is always arbitrary - order = filterSettings.filter[prioAttr].order; - } + const order = filterSettings.filter[prioAttr].order; const attrLo = prioAttr.toLowerCase(); let diff = order * (a[attrLo] - b[attrLo]); @@ -294,6 +290,7 @@ export const MoleculeListSortFilterDialog = memo( disabled={predefinedFilter !== 'none'} onChange={handleItemChange(attr)} onChangePrio={handlePrioChange(attr)} + filter={attrDef.filter} /> ); })} diff --git a/js/components/preview/molecule/moleculeListSortFilterItem.js b/js/components/preview/molecule/moleculeListSortFilterItem.js index 9ac40769b..27ae838ac 100644 --- a/js/components/preview/molecule/moleculeListSortFilterItem.js +++ b/js/components/preview/molecule/moleculeListSortFilterItem.js @@ -73,7 +73,7 @@ const widthMin = 30; const widthSlider = 170; const moleculeListSortFilterItem = memo(props => { - const { property, min, max, onChange, isFloat, color, disabled, onChangePrio } = props; + const { property, min, max, onChange, isFloat, color, disabled, onChangePrio, filter } = props; const { order, minValue, maxValue } = props; // Because Slider works only with Integers we convert Float to Int by multiplying with 100 const MULT = 100; @@ -165,28 +165,32 @@ const moleculeListSortFilterItem = memo(props => { - - {min} - - - { - return isFloat ? value / MULT : value; - }} - disabled={disabled} - /> - - - {max} - + {filter && ( + <> + + {min} + + + { + return isFloat ? value / MULT : value; + }} + disabled={disabled} + /> + + + {max} + + + )} ); }); @@ -198,7 +202,8 @@ moleculeListSortFilterItem.propTypes = { max: PropTypes.number.isRequired, color: PropTypes.string.isRequired, isFloat: PropTypes.bool, - disabled: PropTypes.bool + disabled: PropTypes.bool, + filter: PropTypes.bool }; export default moleculeListSortFilterItem; diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js index 161630dea..5c51272bf 100644 --- a/js/components/preview/molecule/moleculeView.js +++ b/js/components/preview/molecule/moleculeView.js @@ -361,7 +361,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => { {target_on_name && data.protein_code && data.protein_code.replace(`${target_on_name}-`, '')} - {/* Status code */} + {/* Status code - #208 Remove the status labels (for now - until they are in the back-end/loader properly) {Object.values(molStatusTypes).map(type => ( @@ -370,7 +370,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => { ))} - + */} {/* Control Buttons A, L, C, V */} diff --git a/js/components/preview/molecule/redux/constants.js b/js/components/preview/molecule/redux/constants.js index 515839ba2..83c456331 100644 --- a/js/components/preview/molecule/redux/constants.js +++ b/js/components/preview/molecule/redux/constants.js @@ -7,55 +7,77 @@ export const constants = { }; export const MOL_ATTR = { + SID: { + key: 'site', + name: 'Site ID (SID)', + isFloat: false, + color: '#72e5be', + filter: false + }, + HID: { + key: 'id', + name: 'Hit ID (HID)', + isFloat: false, + color: '#daa520', + filter: false + }, MW: { key: 'MW', name: 'Molecular weight (MW)', isFloat: true, - color: '#f96587' + color: '#f96587', + filter: true }, - LOGP: { key: 'logP', name: 'logP', isFloat: true, color: '#3cb44b' }, + LOGP: { key: 'logP', name: 'logP', isFloat: true, color: '#3cb44b', filter: true }, TPSA: { key: 'TPSA', name: 'Topological polar surface area (TPSA)', isFloat: true, - color: '#ffe119' + color: '#ffe119', + filter: true }, - HA: { key: 'HA', name: 'Heavy atom count', isFloat: false, color: '#079ddf' }, + HA: { key: 'HA', name: 'Heavy atom count', isFloat: false, color: '#079ddf', filter: true }, HACC: { key: 'Hacc', name: '# H-bond acceptors (Hacc)', isFloat: false, - color: '#f58231' + color: '#f58231', + filter: true }, HDON: { key: 'Hdon', name: '# H-bond donors (Hdon)', isFloat: false, - color: '#86844a' + color: '#86844a', + filter: true }, ROTS: { key: 'Rots', name: '# Rotatable bonds (Rots)', isFloat: false, - color: '#42d4f4' + color: '#42d4f4', + filter: true }, RINGS: { key: 'Rings', name: '# rings (rings)', isFloat: false, - color: '#f032e6' + color: '#f032e6', + filter: true }, VELEC: { key: 'Velec', name: '# valence electrons (velec)', isFloat: false, - color: '#bfef45' + color: '#bfef45', + filter: true }, NCPD: { key: '#cpd', name: '# available follow-up cmpds. (#cpd)', isFloat: false, - color: '#fabebe' + color: '#fabebe', + filter: true } };