Skip to content

Commit

Permalink
Revert "#617 - tag editor fixes (#255)"
Browse files Browse the repository at this point in the history 
This reverts commit 72f4520.
  • Loading branch information
@boriskovar-m2ms
boriskovar-m2ms committed Sep 14, 2021
1 parent e4aa211 commit 0f9b7d7
Show file tree
Hide file tree
Showing 14 changed files with 54 additions and 262 deletions.
2 changes: 2 additions & 0 deletions js/components/preview/Preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
15 changes: 1 addition & 14 deletions js/components/preview/molecule/moleculeList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -712,14 +708,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
setIsOpenAlert(false);
}}
/>
{isTagEditorOpen && (
<TagEditor
open={isTagEditorOpen}
setOpenDialog={setTagEditorOpen}
anchorEl={selectedMoleculeRef}
ref={tagEditorRef}
/>
)}
{sortDialogOpen && (
<MoleculeListSortFilterDialog
open={sortDialogOpen}
Expand Down Expand Up @@ -874,7 +862,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
data={data}
previousItemData={index > 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)}
Expand Down
59 changes: 5 additions & 54 deletions js/components/preview/molecule/moleculeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -223,7 +217,6 @@ const MoleculeView = memo(
index,
previousItemData,
nextItemData,
setRef,
removeOfAllSelectedTypes,
L,
P,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 (
<React.Fragment>
<Typography color="inherit">{'Edit tags'}</Typography>
<hr />
{data.map(t => (
<Typography color="inherit">{t}</Typography>
))}
</React.Fragment>
);
};

useEffect(() => {
if (!proteinData) {
dispatch(getProteinData(data)).then(i => {
Expand Down Expand Up @@ -912,23 +878,8 @@ const MoleculeView = memo(
</Grid>
{moleculeTooltipOpen === true && (
<Grid item xs={2}>
<IconButton
color="primary"
className={classes.tagIcon}
onClick={() => {
// setTagAddModalOpen(!tagAddModalOpen);
if (molIdForTagEditor === data.id) {
dispatch(setTagEditorOpen(!isTagEditorOpen));
} else {
dispatch(setMoleculeForTagEdit(data.id));
dispatch(setTagEditorOpen(true));
if (setRef) {
setRef(ref.current);
}
}
}}
>
<Tooltip title={generateTooltip()}>
<IconButton color="primary" className={classes.tagIcon} onClick={() => setTagAddModalOpen(true)}>
<Tooltip title="Add tag">
<Label />
</Tooltip>
</IconButton>
Expand Down
52 changes: 14 additions & 38 deletions js/components/preview/molecule/redux/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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;
}
);
Expand Down
37 changes: 22 additions & 15 deletions js/components/preview/tags/modal/tagEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -39,8 +38,7 @@ import {
DEFAULT_TAG_COLOR,
augumentTagObjectWithId,
createMoleculeTagObject,
getMoleculeTagForTag,
getAllTagsForMol
getMoleculeTagForTag
} from '../utils/tagUtils';

const useStyles = makeStyles(theme => ({
Expand Down Expand Up @@ -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();
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -362,7 +369,7 @@ export const TagEditor = memo(
disabled={!DJANGO_CONTEXT.pk}
/>
</Grid>
<Grid item>
<Grid item xs={2}>
<Button onClick={createTag} color="primary" disabled={!DJANGO_CONTEXT.pk}>
Save Tag
</Button>
Expand Down Expand Up @@ -433,7 +440,7 @@ export const TagEditor = memo(
}}
/>
</Grid>
<Grid item>
<Grid item xs={2}>
<Grid container item direction="row" alignItems="center">
<Tooltip title="Display all in list">
<Grid item>
Expand All @@ -446,11 +453,11 @@ export const TagEditor = memo(
onClick={() => handleDisplayAllInList(tag)}
disabled={false}
>
Display all in list
A
</Button>
</Grid>
</Tooltip>
{/* <Tooltip title="Display all in 3D">
<Tooltip title="Display all in 3D">
<Grid item>
<Button
variant="outlined"
Expand All @@ -466,7 +473,7 @@ export const TagEditor = memo(
V
</Button>
</Grid>
</Tooltip> */}
</Tooltip>
<Tooltip title="Discourse link">
<Grid item>
<Button
Expand All @@ -480,7 +487,7 @@ export const TagEditor = memo(
}}
disabled={!tag.discourse_url}
>
Discourse link
D
</Button>
</Grid>
</Tooltip>
Expand Down
6 changes: 0 additions & 6 deletions js/components/preview/tags/redux/dispatchActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Loading

0 comments on commit 0f9b7d7

Please sign in to comment.