diff --git a/js/components/preview/Preview.js b/js/components/preview/Preview.js
index 8f51bf548..719b87d00 100644
--- a/js/components/preview/Preview.js
+++ b/js/components/preview/Preview.js
@@ -39,6 +39,8 @@ import {
setAllInspirations
} from '../datasets/redux/actions';
import { prepareFakeFilterData } from './compounds/redux/dispatchActions';
+import { setTagSelectorData } from './tags/redux/dispatchActions';
+import { withLoadingMolecules } from './tags/withLoadingMolecules';
const hitNavigatorWidth = 504;
diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js
index 8fc12d7ba..9ba76e947 100644
--- a/js/components/preview/molecule/moleculeList.js
+++ b/js/components/preview/molecule/moleculeList.js
@@ -66,8 +66,7 @@ import { setSortDialogOpen } from './redux/actions';
import { setMoleculeList, setAllMolLists, setAllMolecules } from '../../../reducers/api/actions';
import { AlertModal } from '../../common/Modal/AlertModal';
import { onSelectMoleculeGroup } from '../moleculeGroups/redux/dispatchActions';
-import { setSelectedAllByType, setDeselectedAllByType, setTagEditorOpen } from '../../../reducers/selection/actions';
-import { TagEditor } from '../tags/modal/tagEditor';
+import { setSelectedAllByType, setDeselectedAllByType } from '../../../reducers/selection/actions';
const useStyles = makeStyles(theme => ({
container: {
@@ -255,7 +254,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
const qualityList = useSelector(state => state.selectionReducers.qualityList);
const vectorOnList = useSelector(state => state.selectionReducers.vectorOnList);
const informationList = useSelector(state => state.selectionReducers.informationList);
- const isTagEditorOpen = useSelector(state => state.selectionReducers.tagEditorOpened);
const object_selection = useSelector(state => state.selectionReducers.mol_group_selection);
const firstLoad = useSelector(state => state.selectionReducers.firstLoad);
@@ -283,8 +281,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
const stageSummaryView = getNglView(VIEWS.SUMMARY_VIEW) && getNglView(VIEWS.SUMMARY_VIEW).stage;
const filterRef = useRef();
- const tagEditorRef = useRef();
- const [selectedMoleculeRef, setSelectedMoleculeRef] = useState(null);
// const disableUserInteraction = useDisableUserInteraction();
@@ -712,14 +708,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
setIsOpenAlert(false);
}}
/>
- {isTagEditorOpen && (
-
- )}
{sortDialogOpen && (
0 && array[index - 1]}
nextItemData={index < array?.length && array[index + 1]}
- setRef={setSelectedMoleculeRef}
removeOfAllSelectedTypes={removeOfAllSelectedTypes}
L={fragmentDisplayList.includes(data.id)}
P={proteinList.includes(data.id)}
diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
index 0c08c420a..b5921a020 100644
--- a/js/components/preview/molecule/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView.js
@@ -33,22 +33,16 @@ import {
getDensityMapData,
getProteinData
} from './redux/dispatchActions';
-import {
- setSelectedAll,
- setDeselectedAll,
- setArrowUpDown,
- setMoleculeForTagEdit,
- setTagEditorOpen
-} from '../../../reducers/selection/actions';
+import { setSelectedAll, setDeselectedAll, setArrowUpDown } from '../../../reducers/selection/actions';
import { base_url } from '../../routes/constants';
import { moleculeProperty } from './helperConstants';
import { centerOnLigandByMoleculeID } from '../../../reducers/ngl/dispatchActions';
import { SvgTooltip } from '../../common';
import { MOL_TYPE } from './redux/constants';
import { DensityMapsModal } from './modals/densityMapsModal';
+import { TagAddModal } from '../tags/modal/tagAddModal';
+import { TagEditor } from '../tags/modal/tagEditor';
import { getRandomColor } from './utils/color';
-import { getAllTagsForMol } from '../tags/utils/tagUtils';
-
const useStyles = makeStyles(theme => ({
container: {
@@ -223,7 +217,6 @@ const MoleculeView = memo(
index,
previousItemData,
nextItemData,
- setRef,
removeOfAllSelectedTypes,
L,
P,
@@ -252,9 +245,6 @@ const MoleculeView = memo(
const viewParams = useSelector(state => state.nglReducers.viewParams);
const objectsInView = useSelector(state => state.nglReducers.objectsInView) || {};
- const isTagEditorOpen = useSelector(state => state.selectionReducers.tagEditorOpened);
- const molIdForTagEditor = useSelector(state => state.selectionReducers.molForTagEdit);
- const tagList = useSelector(state => state.selectionReducers.tagList);
const { getNglView } = useContext(NglContext);
const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
@@ -321,30 +311,6 @@ const MoleculeView = memo(
const proteinData = data?.proteinData;
- const getDataForTagsTooltip = () => {
- const assignedTags = getAllTagsForMol(data, tagList);
- const dataForTooltip = [];
- assignedTags &&
- assignedTags.forEach(tag => {
- dataForTooltip.push(tag.tag);
- });
-
- return dataForTooltip;
- };
-
- const generateTooltip = () => {
- const data = getDataForTagsTooltip();
- return (
-
- {'Edit tags'}
-
- {data.map(t => (
- {t}
- ))}
-
- );
- };
-
useEffect(() => {
if (!proteinData) {
dispatch(getProteinData(data)).then(i => {
@@ -912,23 +878,8 @@ const MoleculeView = memo(
{moleculeTooltipOpen === true && (
- {
- // setTagAddModalOpen(!tagAddModalOpen);
- if (molIdForTagEditor === data.id) {
- dispatch(setTagEditorOpen(!isTagEditorOpen));
- } else {
- dispatch(setMoleculeForTagEdit(data.id));
- dispatch(setTagEditorOpen(true));
- if (setRef) {
- setRef(ref.current);
- }
- }
- }}
- >
-
+ setTagAddModalOpen(true)}>
+
diff --git a/js/components/preview/molecule/redux/selectors.js b/js/components/preview/molecule/redux/selectors.js
index 0dfd3b4d2..7745e71b0 100644
--- a/js/components/preview/molecule/redux/selectors.js
+++ b/js/components/preview/molecule/redux/selectors.js
@@ -6,16 +6,13 @@ const getAllMolecules = state => state.apiReducers.all_mol_lists;
const getAllSelectedTags = state => state.selectionReducers.selectedTagList;
const getTagsToList = state => state.selectionReducers.listAllList;
const getAllTags = state => state.selectionReducers.tagList;
-const getTagFilteringMode = state => state.selectionReducers.tagFilteringMode;
-
export const selectJoinedMoleculeList = createSelector(
getAllMolecules,
getAllSelectedTags,
getTagsToList,
getAllTags,
- getTagFilteringMode,
- (all_mol_lists, selectedTagList, listAllList, allTags, filteringMode) => {
+ (all_mol_lists, selectedTagList, listAllList, allTags) => {
let tagListToUse = [];
if (listAllList && listAllList.length > 0) {
tagListToUse = allTags.filter(tag => {
@@ -25,44 +22,23 @@ export const selectJoinedMoleculeList = createSelector(
tagListToUse = selectedTagList;
}
const allMoleculesList = [];
- if (!filteringMode) {
- //inclusive mode - i.e. if molecule has at least one of the selected tags then molecule is displayed
- tagListToUse.forEach(tag => {
- let filteredMols = all_mol_lists.filter(mol => {
- let foundTag = mol.tags_set.filter(t => t === tag.id);
- if (foundTag && foundTag.length > 0) {
- return true;
- } else {
- return false;
- }
- });
- filteredMols.forEach(mol => {
- let found = allMoleculesList.filter(addedMol => addedMol.id === mol.id);
- if (!found || found.length === 0) {
- allMoleculesList.push(mol);
- }
- });
- });
- } else {
- //exclusive mode - i.e. molecule has to have all selected tags attached to it
- all_mol_lists.forEach(mol => {
- let foundAllTags = false;
- for (let i = 0; i < selectedTagList.length; i++) {
- let tag = selectedTagList[i];
- let foundTagId = mol.tags_set.find(tid => tid === tag.id);
- if (!foundTagId) {
- break;
- }
- if (i === selectedTagList.length - 1 && foundTagId) {
- foundAllTags = true;
- }
+ tagListToUse.forEach(tag => {
+ let filteredMols = all_mol_lists.filter(mol => {
+ let foundTag = mol.tags_set.filter(t => t === tag.id);
+ if (foundTag && foundTag.length > 0) {
+ return true;
+ } else {
+ return false;
}
- if (foundAllTags) {
+ });
+ filteredMols.forEach(mol => {
+ let found = allMoleculesList.filter(addedMol => addedMol.id === mol.id);
+ if (!found || found.length === 0) {
allMoleculesList.push(mol);
}
});
- }
-
+ });
+
return allMoleculesList;
}
);
diff --git a/js/components/preview/tags/modal/tagEditor.js b/js/components/preview/tags/modal/tagEditor.js
index 2eebb9d66..b6cdd3bdb 100644
--- a/js/components/preview/tags/modal/tagEditor.js
+++ b/js/components/preview/tags/modal/tagEditor.js
@@ -26,8 +26,7 @@ import {
hideAllMolsInNGL,
displayInListForTag,
hideInListForTag,
- updateTagProp,
- getMoleculeForId
+ updateTagProp
} from '../redux/dispatchActions';
import { NglContext } from '../../../nglView/nglProvider';
import { VIEWS, CATEGORY_TYPE, CATEGORY_ID } from '../../../../constants/constants';
@@ -39,8 +38,7 @@ import {
DEFAULT_TAG_COLOR,
augumentTagObjectWithId,
createMoleculeTagObject,
- getMoleculeTagForTag,
- getAllTagsForMol
+ getMoleculeTagForTag
} from '../utils/tagUtils';
const useStyles = makeStyles(theme => ({
@@ -114,7 +112,7 @@ const useStyles = makeStyles(theme => ({
}));
export const TagEditor = memo(
- forwardRef(({ open = false, anchorEl, setOpenDialog }, ref) => {
+ forwardRef(({ open = false, anchorEl, mol, setOpenDialog }, ref) => {
const id = open ? 'simple-popover-mols-tag-editor' : undefined;
const classes = useStyles();
const theme = useTheme();
@@ -130,8 +128,6 @@ export const TagEditor = memo(
const displayAllInList = useSelector(state => state.selectionReducers.listAllList);
const { getNglView } = useContext(NglContext);
const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
- const molId = useSelector(state => state.selectionReducers.molForTagEdit);
- const mol = dispatch(getMoleculeForId(molId));
tagList = tagList.sort(compareTagsAsc);
moleculeTags = moleculeTags.sort(compareTagsAsc);
@@ -144,11 +140,22 @@ export const TagEditor = memo(
};
const handleCloseModal = () => {
- setSearchString(null);
dispatch(setOpenDialog(false));
};
- let tagsForMolecule = getAllTagsForMol(mol, tagList);
+ const getAllTagsForMol = useCallback(() => {
+ const result = [];
+ mol.tags_set &&
+ mol.tags_set.forEach(tagId => {
+ let tag = tagList.filter(t => t.id === tagId);
+ if (tag && tag.length > 0) {
+ result.push(tag[0]);
+ }
+ });
+ return result;
+ }, [mol, tagList]);
+
+ let tagsForMolecule = getAllTagsForMol();
const isTagSelected = tag => {
return tagsForMolecule && tagsForMolecule.some(t => t.id === tag.id);
@@ -362,7 +369,7 @@ export const TagEditor = memo(
disabled={!DJANGO_CONTEXT.pk}
/>
-
+
@@ -433,7 +440,7 @@ export const TagEditor = memo(
}}
/>
-
+
@@ -446,11 +453,11 @@ export const TagEditor = memo(
onClick={() => handleDisplayAllInList(tag)}
disabled={false}
>
- Display all in list
+ A
- {/*
+
- */}
+
diff --git a/js/components/preview/tags/redux/dispatchActions.js b/js/components/preview/tags/redux/dispatchActions.js
index 9aede6329..e30b03c96 100644
--- a/js/components/preview/tags/redux/dispatchActions.js
+++ b/js/components/preview/tags/redux/dispatchActions.js
@@ -171,9 +171,3 @@ export const updateTagProp = (tag, value, prop) => (dispatch, getState) => {
return updateExistingTag(newMolTag, tag.id);
}
};
-
-export const getMoleculeForId = molId => (dispatch, getState) => {
- const state = getState();
- const molList = state.apiReducers.all_mol_lists;
- return molList.find(m => m.id === molId);
-};
diff --git a/js/components/preview/tags/tagSelector.js b/js/components/preview/tags/tagSelector.js
index 6cb2245a1..5b213892a 100644
--- a/js/components/preview/tags/tagSelector.js
+++ b/js/components/preview/tags/tagSelector.js
@@ -1,14 +1,11 @@
import React, { memo, useRef, useEffect, useCallback, useState } from 'react';
-import { Grid, makeStyles, Switch, FormControlLabel } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
import { Delete } from '@material-ui/icons';
import { Panel } from '../../common/Surfaces/Panel';
import { Button } from '../../common/Inputs/Button';
import TagCategory from './tagCategory';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
import { clearTagSelection } from './redux/dispatchActions';
-import { setTagFilteringMode } from '../../../reducers/selection/actions';
-import { withStyles } from '@material-ui/core/styles';
-import { blue } from '@material-ui/core/colors';
export const heightOfBody = '164px';
export const defaultHeaderPadding = 15;
@@ -40,7 +37,6 @@ const TagSelector = memo(({ handleHeightChange }) => {
const elementRef = useRef(null);
const [headerPadding, setheaderPadding] = useState(defaultHeaderPadding);
const [elementHeight, setElementHeight] = useState(0);
- const tagMode = useSelector(state => state.selectionReducers.tagFilteringMode);
const handleClearButton = () => {
dispatch(clearTagSelection());
@@ -107,23 +103,6 @@ const TagSelector = memo(({ handleHeightChange }) => {
[elementHeight]
);
- const filteringModeSwitched = () => {
- dispatch(setTagFilteringMode(!tagMode));
- };
- const TagModeSwitch = withStyles({
- switchBase: {
- color: blue[300],
- '&$checked': {
- color: blue[500]
- },
- '&$checked + $track': {
- backgroundColor: blue[500]
- }
- },
- checked: {},
- track: {}
- })(Switch);
-
return (
{
defaultExpanded
title="Tag selector"
headerActions={[
- }
- label={tagMode ? 'Exclusive' : 'Inclusive'}
- />,