Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

sort by hit and site #217

Merged
merged 1 commit into from
Mar 25, 2020
Merged

sort by hit and site #217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions js/components/preview/molecule/moleculeList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}

Expand Down Expand Up @@ -333,7 +333,7 @@ const MoleculeList = memo(
<Grid container spacing={1}>
<Grid item xs={1} container alignItems="center">
<Typography variant="subtitle2" className={classes.filterTitle}>
Filters #{filteredCount}
Filters
</Typography>
</Grid>
<Grid item xs={11}>
Expand Down
9 changes: 3 additions & 6 deletions js/components/preview/molecule/moleculeListSortFilterDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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]);
Expand Down Expand Up @@ -294,6 +290,7 @@ export const MoleculeListSortFilterDialog = memo(
disabled={predefinedFilter !== 'none'}
onChange={handleItemChange(attr)}
onChangePrio={handlePrioChange(attr)}
filter={attrDef.filter}
/>
);
})}
Expand Down
53 changes: 29 additions & 24 deletions js/components/preview/molecule/moleculeListSortFilterItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -165,28 +165,32 @@ const moleculeListSortFilterItem = memo(props => {
<Grid item className={classNames(classes.property, classes.centered)} style={{ width: widthProperty }}>
<Chip size="small" className={classes.propertyChip} label={property} style={{ backgroundColor: color }} />
</Grid>
<Grid item className={classNames(classes.min, classes.centered)} style={{ width: widthMin }}>
{min}
</Grid>
<Grid item className={classNames(classes.centered, classes.slider)} style={{ width: widthSlider }}>
<Slider
value={sliderValue}
onChange={handleChangeSlider}
onChangeCommitted={handleCommitChangeSlider}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
max={normMax}
min={normMin}
marks={isFloat !== true ? true : undefined}
valueLabelFormat={value => {
return isFloat ? value / MULT : value;
}}
disabled={disabled}
/>
</Grid>
<Grid item className={classNames(classes.min, classes.centered)} style={{ width: widthMin }}>
{max}
</Grid>
{filter && (
<>
<Grid item className={classNames(classes.min, classes.centered)} style={{ width: widthMin }}>
{min}
</Grid>
<Grid item className={classNames(classes.centered, classes.slider)} style={{ width: widthSlider }}>
<Slider
value={sliderValue}
onChange={handleChangeSlider}
onChangeCommitted={handleCommitChangeSlider}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
max={normMax}
min={normMin}
marks={isFloat !== true ? true : undefined}
valueLabelFormat={value => {
return isFloat ? value / MULT : value;
}}
disabled={disabled}
/>
</Grid>
<Grid item className={classNames(classes.min, classes.centered)} style={{ width: widthMin }}>
{max}
</Grid>
</>
)}
</Grid>
);
});
Expand All @@ -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;
4 changes: 2 additions & 2 deletions js/components/preview/molecule/moleculeView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
{target_on_name && data.protein_code && data.protein_code.replace(`${target_on_name}-`, '')}
</Typography>
</Grid>
{/* Status code */}
{/* Status code - #208 Remove the status labels (for now - until they are in the back-end/loader properly)
<Grid item>
<Grid container direction="row" justify="space-between" alignItems="center">
{Object.values(molStatusTypes).map(type => (
Expand All @@ -370,7 +370,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
</Grid>
))}
</Grid>
</Grid>
</Grid>*/}

{/* Control Buttons A, L, C, V */}
<Grid item>
Expand Down
42 changes: 32 additions & 10 deletions js/components/preview/molecule/redux/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
};

Expand Down