diff --git a/js/components/preview/ResizableLayout.js b/js/components/preview/ResizableLayout.js index f41e40baa..f040be0dc 100644 --- a/js/components/preview/ResizableLayout.js +++ b/js/components/preview/ResizableLayout.js @@ -76,9 +76,10 @@ export const ResizableLayout = ({ gridRef, hideProjects, showHistory, onShowHist : twoRowHeight : oneRowHeight; - const tagDetailListHeight = preTagList.length * listTagHeight + tagDetailListLayoutHeight; + // limit default tag panel height to not overflow screen by showing of area of max 10 tags + const tagDetailListHeight = (preTagList.length > 10 ? 10 : preTagList.length) * listTagHeight + tagDetailListLayoutHeight; const tagDetailGridHeight = - Math.ceil(preTagList.length / defaultTagDetailColumnNumber) * absoluteMaxTagLength + tagDetailGridLayoutHeight; + Math.ceil((preTagList.length > 10 ? 10 : preTagList.length) / defaultTagDetailColumnNumber) * absoluteMaxTagLength + tagDetailGridLayoutHeight; useEffect(() => { if (sidesOpen.LHS) { @@ -201,12 +202,20 @@ export const ResizableLayout = ({ gridRef, hideProjects, showHistory, onShowHist }, [gridRef, tagDetailsHeight] ); + return (
{sidesOpen.LHS && ( <>
-
+
@@ -221,9 +230,9 @@ export const ResizableLayout = ({ gridRef, hideProjects, showHistory, onShowHist height: tagDetailsHeight === undefined ? tagDetailView?.tagDetailView === true || tagDetailView === true - ? screenHeight - tagDetailGridHeight + 'px' - : screenHeight - tagDetailListHeight + 'px' - : screenHeight - tagDetailsHeight - 20 + 'px' + ? screenHeight - tagDetailGridHeight - 20 + : screenHeight - tagDetailListHeight - 20 + : screenHeight - tagDetailsHeight - 20 }} > diff --git a/js/components/preview/molecule/observationCmpList.js b/js/components/preview/molecule/observationCmpList.js index 7f7f00a3b..858e2e4b4 100644 --- a/js/components/preview/molecule/observationCmpList.js +++ b/js/components/preview/molecule/observationCmpList.js @@ -701,8 +701,8 @@ export const ObservationCmpList = memo(({ hideProjects }) => { let filteredLHSCompoundsList = useMemo(() => { const compounds = []; lhsCompoundsList.forEach(compound => { - const molsForCmp = joinedMoleculeLists.filter(molecule => molecule.cmpd === compound.origId); - if (molsForCmp?.length > 0) { + const molsForCmp = joinedMoleculeLists.some(molecule => molecule.cmpd === compound.origId); + if (molsForCmp && compound.associatedObs.some(obs => joinedMoleculeLists.some(mol => mol.id === obs.id))) { compounds.push(compound); } }); diff --git a/js/components/preview/molecule/redux/dispatchActions.js b/js/components/preview/molecule/redux/dispatchActions.js index 4ce234aab..b2e0ad9b5 100644 --- a/js/components/preview/molecule/redux/dispatchActions.js +++ b/js/components/preview/molecule/redux/dispatchActions.js @@ -667,7 +667,7 @@ export const initializeMolecules = majorView => (dispatch, getState) => { } else if (noTagsReceived) { // firstMolecule = dispatch(getFirstMolecule()); } - firstMolecule = dispatch(getFirstMolOfFirstCompound()); + firstMolecule = dispatch(getFirstMolOfFirstCompound(firstTag)); if (firstMolecule) { dispatch(addHitProtein(majorView, firstMolecule, colourList[firstMolecule.id % colourList.length], true)).then( () => { @@ -705,16 +705,15 @@ export const getFirstTagAlphabetically = () => (dispatch, getState) => { return sortedTags && sortedTags.length > 0 ? sortedTags[0] : null; }; -export const getFirstMolOfFirstCompound = () => (dispatch, getState) => { +export const getFirstMolOfFirstCompound = tag => (dispatch, getState) => { const state = getState(); const compoundsList = state.apiReducers.lhs_compounds_list; - const firstCompound = compoundsList[0]; + const firstCompound = compoundsList?.find(c => c.associatedObs.some(obs => obs.tags_set.includes(tag.id))); if (firstCompound) { - if (firstCompound.associatedObs?.length > 0) { - return firstCompound.associatedObs[0]; - } else { - return null; - } + let firstObs = null; + firstObs = firstCompound.associatedObs.find(obs => obs.tags_set.includes(tag.id)); + + return firstObs; } else { return null; } diff --git a/js/components/preview/tags/details/tagDetails.js b/js/components/preview/tags/details/tagDetails.js index 77b2d56ea..33277de87 100644 --- a/js/components/preview/tags/details/tagDetails.js +++ b/js/components/preview/tags/details/tagDetails.js @@ -22,7 +22,8 @@ import { compareTagsByCreatorAsc, compareTagsByCreatorDesc, compareTagsByDateAsc, - compareTagsByDateDesc + compareTagsByDateDesc, + getCategoriesToBeRemovedFromTagDetails } from '../utils/tagUtils'; import { UnfoldMore, KeyboardArrowDown, KeyboardArrowUp } from '@material-ui/icons'; import { getMoleculeForId } from '../redux/dispatchActions'; @@ -165,6 +166,7 @@ const TagDetails = memo(() => { const displayUntaggedMolecules = useSelector(state => state.selectionReducers.displayUntaggedMolecules); let tagDetailView = useSelector(state => state.selectionReducers.tagDetailView); const resizableLayout = useSelector(state => state.selectionReducers.resizableLayout); + const tagCategories = useSelector(state => state.apiReducers.categoryList); const [tagList, setTagList] = useState([]); const [selectAll, setSelectAll] = useState(true); @@ -180,8 +182,9 @@ const TagDetails = memo(() => { }, [searchString, tagList]); useEffect(() => { + const categoriesToRemove = getCategoriesToBeRemovedFromTagDetails(tagCategories); const newTagList = preTagList.filter(t => { - if (t.additional_info?.downloadName) { + if (t.additional_info?.downloadName || categoriesToRemove.some(c => c.id === t.category)) { return false; } else { return true; @@ -191,7 +194,7 @@ const TagDetails = memo(() => { return () => { setTagList([]); }; - }, [preTagList]); + }, [preTagList, tagCategories]); const moleculesToEditIds = useSelector(state => state.selectionReducers.moleculesToEdit); const moleculesToEdit = diff --git a/js/components/preview/tags/utils/tagUtils.js b/js/components/preview/tags/utils/tagUtils.js index 045d7bc0d..372e0ea99 100644 --- a/js/components/preview/tags/utils/tagUtils.js +++ b/js/components/preview/tags/utils/tagUtils.js @@ -2,7 +2,8 @@ import { is } from 'date-fns/locale'; import { CATEGORY_TYPE_BY_ID, OBSERVATION_TAG_CATEGORIES, - COMPOUND_PRIO_TAG_CATEGORIES + COMPOUND_PRIO_TAG_CATEGORIES, + TAG_DETAILS_REMOVED_CATEGORIES } from '../../../../constants/constants'; export const DEFAULT_TAG_COLOR = '#E0E0E0'; @@ -166,6 +167,19 @@ export const getAllTagsForObservation = (obs, tagList, tagCategoryList) => { return result; }; +export const getCategoriesToBeRemovedFromTagDetails = tagCategoryList => { + const result = []; + + TAG_DETAILS_REMOVED_CATEGORIES.forEach(categName => { + const categ = tagCategoryList.find(c => c.category === categName); + if (categ) { + result.push({ ...categ }); + } + }); + + return result; +}; + export const getCompoundPriorityTagConfig = (tagCategoryList, isSingleObs) => { const result = []; diff --git a/js/components/target/redux/dispatchActions.js b/js/components/target/redux/dispatchActions.js index 8421db5be..04798e816 100644 --- a/js/components/target/redux/dispatchActions.js +++ b/js/components/target/redux/dispatchActions.js @@ -170,6 +170,12 @@ export const getTargetProjectCombinations = (targets, projects) => { result.push({ updatedTarget: { ...target, project: { target_access_string: 'Legacy' } } }); } }); + } else if (targetItems.length > 0) { + targetItems.forEach(([targetId, target]) => { + if (target.isLegacy) { + result.push({ updatedTarget: { ...target, project: { target_access_string: 'Legacy' } } }); + } + }); } return result; diff --git a/js/constants/constants.js b/js/constants/constants.js index 3643e18e0..3f38e612a 100644 --- a/js/constants/constants.js +++ b/js/constants/constants.js @@ -54,6 +54,7 @@ export const CATEGORY_TYPE_BY_ID = { export const OBSERVATION_TAG_CATEGORIES = ['ConformerSites', 'CrystalformSites', 'Quatassemblies', 'Crystalforms']; export const COMPOUND_PRIO_TAG_CATEGORIES = ['CanonSites']; +export const TAG_DETAILS_REMOVED_CATEGORIES = ['CrystalformSites', 'ConformerSites']; export const TAG_TYPE = { ALL: 'ALL',