From c4fdf20dcfc17746fb02336c55d88ca0e355e321 Mon Sep 17 00:00:00 2001 From: ag-m2ms Date: Thu, 19 Nov 2020 14:04:50 +0100 Subject: [PATCH 1/4] Fix default filter values when selecting pages --- .../molecule/moleculeListSortFilterDialog.js | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/js/components/preview/molecule/moleculeListSortFilterDialog.js b/js/components/preview/molecule/moleculeListSortFilterDialog.js index bb2edd7ab..1a9075669 100644 --- a/js/components/preview/molecule/moleculeListSortFilterDialog.js +++ b/js/components/preview/molecule/moleculeListSortFilterDialog.js @@ -1,4 +1,4 @@ -import React, { memo, useState } from 'react'; +import React, { memo, useState, useMemo, useEffect, useCallback } from 'react'; import PropTypes from 'prop-types'; import { Popper, Tooltip, IconButton } from '@material-ui/core'; import { Close, Delete } from '@material-ui/icons'; @@ -142,7 +142,7 @@ export const MoleculeListSortFilterDialog = memo( const dispatch = useDispatch(); const moleculeGroupList = useSelector(state => state.apiReducers.mol_group_list); - const getListedMolecules = () => { + const getListedMolecules = useMemo(() => { let molecules = []; for (let molGroupId of molGroupSelection) { // Selected molecule groups @@ -155,9 +155,9 @@ export const MoleculeListSortFilterDialog = memo( } return molecules; - }; + }, [molGroupSelection, cachedMolList]); - const initialize = () => { + const initialize = useCallback(() => { let initObject = { active: false, predefined: 'none', @@ -169,7 +169,7 @@ export const MoleculeListSortFilterDialog = memo( const lowAttr = attr.key.toLowerCase(); let minValue = -999999; let maxValue = 0; - const moleculeList = getListedMolecules(); + const moleculeList = getListedMolecules; moleculeList.forEach(molecule => { const attrValue = molecule[lowAttr]; @@ -187,13 +187,13 @@ export const MoleculeListSortFilterDialog = memo( }; } return initObject; - }; + }, [getListedMolecules]); const [initState] = useState(initialize()); - const [filteredCount, setFilteredCount] = useState(getFilteredMoleculesCount(getListedMolecules(), filter)); + const [filteredCount, setFilteredCount] = useState(getFilteredMoleculesCount(getListedMolecules, filter)); const [predefinedFilter, setPredefinedFilter] = useState(filter.predefined); - const handleFilterChange = filter => { + const handleFilterChange = useCallback(filter => { const filterSet = Object.assign({}, filter); for (let attr of MOL_ATTRIBUTES) { if (filterSet.filter[attr.key].priority === undefined || filterSet.filter[attr.key].priority === '') { @@ -201,14 +201,23 @@ export const MoleculeListSortFilterDialog = memo( } } dispatch(setFilter(filterSet)); - }; + }, [dispatch]); + + useEffect(() => { + if (!filter.active) { + const init = initialize(); + dispatch(setFilter(init)); + setFilteredCount(getFilteredMoleculesCount(getListedMolecules, init)); + handleFilterChange(init); + } + }, [initialize, dispatch, getListedMolecules, handleFilterChange, filter.active]); const handleItemChange = key => setting => { let newFilter = Object.assign({}, filter); newFilter.filter[key] = setting; newFilter.active = true; dispatch(setFilter(newFilter)); - setFilteredCount(getFilteredMoleculesCount(getListedMolecules(), newFilter)); + setFilteredCount(getFilteredMoleculesCount(getListedMolecules, newFilter)); handleFilterChange(newFilter); }; @@ -232,7 +241,7 @@ export const MoleculeListSortFilterDialog = memo( const resetFilter = initialize(); setPredefinedFilter('none'); dispatch(setFilter(resetFilter)); - setFilteredCount(getFilteredMoleculesCount(getListedMolecules(), resetFilter)); + setFilteredCount(getFilteredMoleculesCount(getListedMolecules, resetFilter)); handleFilterChange(resetFilter); }; From c802a3ac2390082a3852dcbdbf601c50e4de6026 Mon Sep 17 00:00:00 2001 From: ag-m2ms Date: Thu, 19 Nov 2020 15:32:56 +0100 Subject: [PATCH 2/4] Fixed filter while searching for molecules --- .../preview/molecule/moleculeList.js | 23 +++++----- .../molecule/moleculeListSortFilterDialog.js | 43 ++++++------------- 2 files changed, 25 insertions(+), 41 deletions(-) diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js index 07e872db8..9b0168bb7 100644 --- a/js/components/preview/molecule/moleculeList.js +++ b/js/components/preview/molecule/moleculeList.js @@ -277,14 +277,18 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei // setCurrentPage(0); }, [object_selection]);*/ - let joinedMoleculeLists = []; - if (searchString !== null) { - joinedMoleculeLists = getAllMoleculeList.filter(molecule => - molecule.protein_code.toLowerCase().includes(searchString.toLowerCase()) - ); - } else { - joinedMoleculeLists = getJoinedMoleculeList; - } + let joinedMoleculeLists = useMemo(() => { + if (searchString) { + return getAllMoleculeList.filter(molecule => + molecule.protein_code.toLowerCase().includes(searchString.toLowerCase()) + ); + } else { + return getJoinedMoleculeList; + } + }, [getJoinedMoleculeList, getAllMoleculeList, searchString]); + + // Used for MoleculeListSortFilterDialog when using textSearch + const joinedMoleculeListsCopy = useMemo(() => [...joinedMoleculeLists], [joinedMoleculeLists]); if (isActiveFilter) { joinedMoleculeLists = filterMolecules(joinedMoleculeLists, filter); @@ -652,10 +656,9 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei )}
diff --git a/js/components/preview/molecule/moleculeListSortFilterDialog.js b/js/components/preview/molecule/moleculeListSortFilterDialog.js index 1a9075669..fd2b0973f 100644 --- a/js/components/preview/molecule/moleculeListSortFilterDialog.js +++ b/js/components/preview/molecule/moleculeListSortFilterDialog.js @@ -1,4 +1,4 @@ -import React, { memo, useState, useMemo, useEffect, useCallback } from 'react'; +import React, { memo, useState, useEffect, useCallback } from 'react'; import PropTypes from 'prop-types'; import { Popper, Tooltip, IconButton } from '@material-ui/core'; import { Close, Delete } from '@material-ui/icons'; @@ -6,7 +6,7 @@ import Grid from '@material-ui/core/Grid'; import MoleculeListSortFilterItem from './moleculeListSortFilterItem'; import WarningIcon from '@material-ui/icons/Warning'; import { makeStyles } from '@material-ui/styles'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { MOL_ATTRIBUTES } from './redux/constants'; import { setFilter } from '../../../reducers/selection/actions'; import { Panel } from '../../common/Surfaces/Panel'; @@ -62,6 +62,7 @@ export const getFilteredMoleculesCount = (molecules, filter) => { 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 (attrValue < filter.filter[attr.key].minValue || attrValue > filter.filter[attr.key].maxValue) { @@ -129,33 +130,16 @@ export const filterMolecules = (molecules, filter) => { export const MoleculeListSortFilterDialog = memo( ({ - molGroupSelection, - cachedMolList, filter, anchorEl, open, parentID = 'default', placement = 'right-start', - setSortDialogAnchorEl + setSortDialogAnchorEl, + joinedMoleculeLists }) => { let classes = useStyles(); const dispatch = useDispatch(); - const moleculeGroupList = useSelector(state => state.apiReducers.mol_group_list); - - const getListedMolecules = useMemo(() => { - let molecules = []; - for (let molGroupId of molGroupSelection) { - // Selected molecule groups - const molGroup = cachedMolList[molGroupId]; - if (molGroup) { - molecules = molecules.concat(molGroup); - } else { - console.log(`Molecule group ${molGroupId} not found in cached list`); - } - } - - return molecules; - }, [molGroupSelection, cachedMolList]); const initialize = useCallback(() => { let initObject = { @@ -169,9 +153,8 @@ export const MoleculeListSortFilterDialog = memo( const lowAttr = attr.key.toLowerCase(); let minValue = -999999; let maxValue = 0; - const moleculeList = getListedMolecules; - moleculeList.forEach(molecule => { + joinedMoleculeLists.forEach(molecule => { const attrValue = molecule[lowAttr]; if (attrValue > maxValue) maxValue = attrValue; if (minValue === -999999) minValue = maxValue; @@ -187,10 +170,10 @@ export const MoleculeListSortFilterDialog = memo( }; } return initObject; - }, [getListedMolecules]); + }, [joinedMoleculeLists]); const [initState] = useState(initialize()); - const [filteredCount, setFilteredCount] = useState(getFilteredMoleculesCount(getListedMolecules, filter)); + const [filteredCount, setFilteredCount] = useState(getFilteredMoleculesCount(joinedMoleculeLists, filter)); const [predefinedFilter, setPredefinedFilter] = useState(filter.predefined); const handleFilterChange = useCallback(filter => { @@ -207,17 +190,17 @@ export const MoleculeListSortFilterDialog = memo( if (!filter.active) { const init = initialize(); dispatch(setFilter(init)); - setFilteredCount(getFilteredMoleculesCount(getListedMolecules, init)); + setFilteredCount(getFilteredMoleculesCount(joinedMoleculeLists, init)); handleFilterChange(init); } - }, [initialize, dispatch, getListedMolecules, handleFilterChange, filter.active]); + }, [initialize, dispatch, joinedMoleculeLists, handleFilterChange, filter.active]); const handleItemChange = key => setting => { let newFilter = Object.assign({}, filter); newFilter.filter[key] = setting; newFilter.active = true; dispatch(setFilter(newFilter)); - setFilteredCount(getFilteredMoleculesCount(getListedMolecules, newFilter)); + setFilteredCount(getFilteredMoleculesCount(joinedMoleculeLists, newFilter)); handleFilterChange(newFilter); }; @@ -241,7 +224,7 @@ export const MoleculeListSortFilterDialog = memo( const resetFilter = initialize(); setPredefinedFilter('none'); dispatch(setFilter(resetFilter)); - setFilteredCount(getFilteredMoleculesCount(getListedMolecules, resetFilter)); + setFilteredCount(getFilteredMoleculesCount(joinedMoleculeLists, resetFilter)); handleFilterChange(resetFilter); }; @@ -344,8 +327,6 @@ export const MoleculeListSortFilterDialog = memo( ); MoleculeListSortFilterDialog.propTypes = { - molGroupSelection: PropTypes.arrayOf(PropTypes.number).isRequired, - cachedMolList: PropTypes.object.isRequired, filter: PropTypes.object, setFilter: PropTypes.func, anchorEl: PropTypes.object, From cbf38fac7303b099a884a54cd77d150aa4c676ad Mon Sep 17 00:00:00 2001 From: ag-m2ms Date: Thu, 19 Nov 2020 16:59:36 +0100 Subject: [PATCH 3/4] Filter adapts to displayed molectules and selected sites --- .../molecule/moleculeListSortFilterDialog.js | 46 ++++++++++++++++--- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/js/components/preview/molecule/moleculeListSortFilterDialog.js b/js/components/preview/molecule/moleculeListSortFilterDialog.js index fd2b0973f..bdef9e369 100644 --- a/js/components/preview/molecule/moleculeListSortFilterDialog.js +++ b/js/components/preview/molecule/moleculeListSortFilterDialog.js @@ -172,7 +172,7 @@ export const MoleculeListSortFilterDialog = memo( return initObject; }, [joinedMoleculeLists]); - const [initState] = useState(initialize()); + const [initState, setInitState] = useState(initialize()); const [filteredCount, setFilteredCount] = useState(getFilteredMoleculesCount(joinedMoleculeLists, filter)); const [predefinedFilter, setPredefinedFilter] = useState(filter.predefined); @@ -187,20 +187,53 @@ export const MoleculeListSortFilterDialog = memo( }, [dispatch]); useEffect(() => { + const init = initialize(); + + setInitState(init); + if (!filter.active) { - const init = initialize(); - dispatch(setFilter(init)); - setFilteredCount(getFilteredMoleculesCount(joinedMoleculeLists, init)); - handleFilterChange(init); + const initCopy = { ...init }; + dispatch(setFilter(initCopy)); + handleFilterChange(initCopy); } }, [initialize, dispatch, joinedMoleculeLists, handleFilterChange, filter.active]); + useEffect(() => { + setFilteredCount(getFilteredMoleculesCount(joinedMoleculeLists, filter)); + }, [joinedMoleculeLists, filter]); + + useEffect(() => { + let changed = false; + const newFilter = { ...filter }; + + for (let attr of MOL_ATTRIBUTES) { + if (!attr.filter) continue; + const key = attr.key; + const filterValue = newFilter.filter[key]; + const initValue = initState.filter[key]; + + if (filterValue.minValue < initValue.minValue) { + filterValue.minValue = initValue.minValue; + changed = true; + } + + if (filterValue.maxValue > initValue.maxValue) { + filterValue.maxValue = initValue.maxValue; + changed = true; + } + } + + if (changed) { + dispatch(setFilter(newFilter)); + handleFilterChange(newFilter); + } + }, [initState, filter, dispatch, handleFilterChange]); + const handleItemChange = key => setting => { let newFilter = Object.assign({}, filter); newFilter.filter[key] = setting; newFilter.active = true; dispatch(setFilter(newFilter)); - setFilteredCount(getFilteredMoleculesCount(joinedMoleculeLists, newFilter)); handleFilterChange(newFilter); }; @@ -224,7 +257,6 @@ export const MoleculeListSortFilterDialog = memo( const resetFilter = initialize(); setPredefinedFilter('none'); dispatch(setFilter(resetFilter)); - setFilteredCount(getFilteredMoleculesCount(joinedMoleculeLists, resetFilter)); handleFilterChange(resetFilter); }; From 60e153e2e400acc06590ecdf10649b89fcdf6599 Mon Sep 17 00:00:00 2001 From: ag-m2ms Date: Thu, 19 Nov 2020 17:09:16 +0100 Subject: [PATCH 4/4] Filter boundary fix --- .../preview/molecule/moleculeListSortFilterDialog.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/preview/molecule/moleculeListSortFilterDialog.js b/js/components/preview/molecule/moleculeListSortFilterDialog.js index bdef9e369..0d659ddb8 100644 --- a/js/components/preview/molecule/moleculeListSortFilterDialog.js +++ b/js/components/preview/molecule/moleculeListSortFilterDialog.js @@ -212,12 +212,12 @@ export const MoleculeListSortFilterDialog = memo( const filterValue = newFilter.filter[key]; const initValue = initState.filter[key]; - if (filterValue.minValue < initValue.minValue) { + if (filterValue.minValue < initValue.minValue || filterValue.minValue > initValue.maxValue) { filterValue.minValue = initValue.minValue; changed = true; } - if (filterValue.maxValue > initValue.maxValue) { + if (filterValue.maxValue > initValue.maxValue || filterValue.maxValue < initValue.minValue) { filterValue.maxValue = initValue.maxValue; changed = true; }