Merge pull request #409 from m2ms/stagingcandidate

Author: Waztom

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 (
     <div className={classes.root}>
       {sidesOpen.LHS && (
         <>
           <div className={classes.lhs} style={{ width: lhsWidth }}>
-            <div style={{ height: tagDetailsHeight, overflow: 'auto' }}>
+            <div style={{
+              overflow: 'auto',
+              height: tagDetailsHeight === undefined
+                ? tagDetailView?.tagDetailView === true || tagDetailView === true
+                  ? tagDetailGridHeight
+                  : tagDetailListHeight
+                : tagDetailsHeight
+            }}>
               <TagDetails />
             </div>
             <Resizer orientation="horizontal" onResize={onTagDetailsResize} />
@@ -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
               }}
             >
               <HitNavigator hideProjects={hideProjects} />

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);
       }
     });

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;
   }

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 =

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 = [];
 

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;

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',