Skip to content

Commit

Permalink
- #1190 - implemented tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@boriskovar-m2ms
boriskovar-m2ms committed Nov 22, 2023
1 parent 5432a99 commit 8104514
Show file tree
Hide file tree
Showing 15 changed files with 196 additions and 67 deletions.
1 change: 0 additions & 1 deletion js/components/preview/Preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,6 @@ const Preview = memo(({ isStateLoaded, hideProjects, isSnapshot = false }) => {

const openNewProjectModal = useSelector(state => state.projectReducers.isProjectModalOpen);
const openSaveSnapshotModal = useSelector(state => state.snapshotReducers.openSavingDialog);
const assignTagEditorOpen = useSelector(state => state.selectionReducers.tagEditorOpened);

const nglPortal = useMemo(() => createHtmlPortalNode({ attributes: { style: 'height: 100%' } }), []);

Expand Down
39 changes: 17 additions & 22 deletions js/components/preview/molecule/moleculeList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,19 +55,15 @@ import {
setFilter,
setMolListToEdit,
setNextXMolecules,
setMoleculeForTagEdit
setMoleculeForTagEdit,
setTagEditorOpenObs
} from '../../../reducers/selection/actions';
import { initializeFilter } from '../../../reducers/selection/dispatchActions';
import * as listType from '../../../constants/listTypes';
import { useRouteMatch } from 'react-router-dom';
import { setSortDialogOpen, setSearchStringOfHitNavigator } from './redux/actions';
import { AlertModal } from '../../common/Modal/AlertModal';
import {
setSelectedAllByType,
setDeselectedAllByType,
setTagEditorOpen,
setIsTagGlobalEdit
} from '../../../reducers/selection/actions';
import { setSelectedAllByType, setDeselectedAllByType, setIsTagGlobalEdit } from '../../../reducers/selection/actions';
import { TagEditor } from '../tags/modal/tagEditor';
import { getMoleculeForId, selectTag } from '../tags/redux/dispatchActions';
import SearchField from '../../common/Components/SearchField';
Expand Down Expand Up @@ -284,7 +280,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
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 isTagEditorOpenObs = useSelector(state => state.selectionReducers.tagEditorOpenedObs);
const molForTagEditId = useSelector(state => state.selectionReducers.molForTagEdit);
const moleculesToEditIds = useSelector(state => state.selectionReducers.moleculesToEdit);
const isGlobalEdit = useSelector(state => state.selectionReducers.isGlobalEdit);
Expand All @@ -300,7 +296,6 @@ export const MoleculeList = memo(({ hideProjects }) => {

const proteinsHasLoaded = useSelector(state => state.nglReducers.proteinsHasLoaded);
const currentActionList = useSelector(state => state.trackingReducers.current_actions_list);
const assignTagEditorOpen = useSelector(state => state.selectionReducers.tagEditorOpened);

const [predefinedFilter, setPredefinedFilter] = useState(filter !== undefined ? filter.predefined : DEFAULT_FILTER);

Expand Down Expand Up @@ -368,7 +363,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
joinedMoleculeLists,
proteinList,
molForTagEditId,
isTagEditorOpen,
isTagEditorOpenObs,
moleculesToEditIds
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand All @@ -377,7 +372,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
joinedMoleculeLists,
complexList,
molForTagEditId,
isTagEditorOpen,
isTagEditorOpenObs,
moleculesToEditIds
]);
joinedMoleculeLists = useMemo(
Expand All @@ -388,7 +383,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
joinedMoleculeLists,
fragmentDisplayList,
molForTagEditId,
isTagEditorOpen,
isTagEditorOpenObs,
moleculesToEditIds
]
);
Expand All @@ -398,7 +393,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
joinedMoleculeLists,
surfaceList,
molForTagEditId,
isTagEditorOpen,
isTagEditorOpenObs,
moleculesToEditIds
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand All @@ -407,7 +402,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
joinedMoleculeLists,
densityList,
molForTagEditId,
isTagEditorOpen,
isTagEditorOpenObs,
moleculesToEditIds
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
Expand All @@ -416,7 +411,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
joinedMoleculeLists,
vectorOnList,
molForTagEditId,
isTagEditorOpen,
isTagEditorOpenObs,
moleculesToEditIds
]);

Expand Down Expand Up @@ -906,14 +901,14 @@ export const MoleculeList = memo(({ hideProjects }) => {
DJANGO_CONTEXT['username'] === 'NOT_LOGGED_IN'
}
onClick={event => {
if (isTagEditorOpen === false) {
if (isTagEditorOpenObs === false) {
setTagEditorAnchorEl(event.currentTarget);
dispatch(setIsTagGlobalEdit(true));
dispatch(setTagEditorOpen(true));
dispatch(setTagEditorOpenObs(true));
} else {
setTagEditorAnchorEl(null);
dispatch(setIsTagGlobalEdit(false));
dispatch(setTagEditorOpen(false));
dispatch(setTagEditorOpenObs(false));
}
}}
>
Expand Down Expand Up @@ -976,11 +971,11 @@ export const MoleculeList = memo(({ hideProjects }) => {
setIsOpenLPCAlert(false);
}}
/>
{isTagEditorOpen && (
{isTagEditorOpenObs && (
<TagEditor
open={isTagEditorOpen}
open={isTagEditorOpenObs}
closeDisabled={anyControlButtonDisabled}
setOpenDialog={setTagEditorOpen}
setOpenDialog={setTagEditorOpenObs}
anchorEl={tagEditorAnchorEl}
ref={tagEditorRef}
/>
Expand Down Expand Up @@ -1230,7 +1225,7 @@ export const MoleculeList = memo(({ hideProjects }) => {
sigmaaInfo={data?.proteinData?.sigmaa_info || null}
diffInfo={data?.proteinData?.diff_info || null}
isTagEditorInvokedByMolecule={isTagEditorInvokedByMolecule}
isTagEditorOpen={isTagEditorInvokedByMolecule && isTagEditorOpen}
isTagEditorOpen={isTagEditorInvokedByMolecule && isTagEditorOpenObs}
selected={selected}
disableL={selected && groupNglControlButtonsDisabledState.ligand}
disableP={selected && groupNglControlButtonsDisabledState.protein}
Expand Down
45 changes: 24 additions & 21 deletions js/components/preview/molecule/moleculeView/moleculeView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Created by abradley on 14/03/2018.
*/

import React, { memo, useEffect, useState, useRef, useContext, useCallback } from 'react';
import React, { memo, useEffect, useState, useRef, useContext, useCallback, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Button, Grid, makeStyles, Tooltip, IconButton, Popper, Item, CircularProgress } from '@material-ui/core';
import { Panel } from '../../../common';
Expand Down Expand Up @@ -39,7 +39,7 @@ import {
setSelectedAll,
setDeselectedAll,
setMoleculeForTagEdit,
setTagEditorOpen,
setTagEditorOpenObs,
appendToMolListToEdit,
removeFromMolListToEdit
} from '../../../../reducers/selection/actions';
Expand Down Expand Up @@ -348,12 +348,10 @@ const MoleculeView = memo(

const viewParams = useSelector(state => state.nglReducers.viewParams);
const tagList = useSelector(state => state.apiReducers.tagList);
const tagEditorOpen = useSelector(state => state.selectionReducers.tagEditorOpened);
const tagEditorOpenObs = useSelector(state => state.selectionReducers.tagEditorOpenedObs);
const tagCategories = useSelector(state => state.apiReducers.categoryList);

const assignTagEditorOpen = useSelector(state => state.selectionReducers.tagEditorOpened);

const [tagEditModalOpenNew, setTagEditModalOpenNew] = useState(tagEditorOpen);
const [tagEditModalOpenNew, setTagEditModalOpenNew] = useState(tagEditorOpenObs);

const { getNglView } = useContext(NglContext);
const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
Expand All @@ -368,6 +366,11 @@ const MoleculeView = memo(
const isVectorOn = V;
const hasAdditionalInformation = I;

const allMolecules = useSelector(state => state.apiReducers.all_mol_lists);

//for some reason when tags are changed for this molecule the data are stale so I need to retrieve them from list of all molecules
data = allMolecules.filter(mol => mol.id === data.id)[0];

const [isCopied, setCopied] = useClipboard(data.smiles, { successDuration: 5000 });

const [hasMap, setHasMap] = useState();
Expand Down Expand Up @@ -410,14 +413,9 @@ const MoleculeView = memo(

let proteinData = data?.proteinData;

const getDataForTagsTooltip = () => {
const assignedTags = getAllTagsForMol(data, tagList);
return assignedTags;
};

useEffect(() => {
setTagEditModalOpenNew(tagEditorOpen);
}, [tagEditorOpen]);
setTagEditModalOpenNew(tagEditorOpenObs);
}, [tagEditorOpenObs]);

const handlePopoverOpen = event => {
setTagPopoverOpen(event.currentTarget);
Expand All @@ -427,6 +425,11 @@ const MoleculeView = memo(
setTagPopoverOpen(null);
};

const getDataForTagsTooltip = () => {
const assignedTags = getAllTagsForMol(data, tagList);
return assignedTags;
};

const resolveTagBackgroundColor = tag => {
let color = DEFAULT_TAG_COLOR;

Expand All @@ -448,7 +451,7 @@ const MoleculeView = memo(
};

const generateTagPopover = () => {
const allData = getDataForTagsTooltip();
const allData = getAllTagsForMol(data, tagList);
const sortedData = [...allData].sort((a, b) => a.tag.localeCompare(b.tag));

const modifiedObjects = sortedData.map(obj => {
Expand Down Expand Up @@ -510,12 +513,12 @@ const MoleculeView = memo(
onClick={() => {
if (tagEditModalOpenNew) {
setTagEditModalOpenNew(false);
dispatch(setTagEditorOpen(!tagEditModalOpenNew));
dispatch(setTagEditorOpenObs(!tagEditModalOpenNew));
dispatch(setMoleculeForTagEdit(null));
} else {
setTagEditModalOpenNew(true);
dispatch(setMoleculeForTagEdit(data.id));
dispatch(setTagEditorOpen(true));
dispatch(setTagEditorOpenObs(true));
if (setRef) {
setRef(ref.current);
}
Expand Down Expand Up @@ -572,12 +575,12 @@ const MoleculeView = memo(
onClick={() => {
if (tagEditModalOpenNew) {
setTagEditModalOpenNew(false);
dispatch(setTagEditorOpen(!tagEditModalOpenNew));
dispatch(setTagEditorOpenObs(!tagEditModalOpenNew));
dispatch(setMoleculeForTagEdit(null));
} else {
setTagEditModalOpenNew(true);
dispatch(setMoleculeForTagEdit(data.id));
dispatch(setTagEditorOpen(true));
dispatch(setTagEditorOpenObs(true));
if (setRef) {
setRef(ref.current);
}
Expand All @@ -594,7 +597,7 @@ const MoleculeView = memo(
</Grid>
)}
</Typography>
{tagEditorOpen === false ? (
{tagEditorOpenObs === false ? (
<Typography
aria-owns={open ? 'mouse-over-popper' : undefined}
aria-haspopup="true"
Expand Down Expand Up @@ -647,12 +650,12 @@ const MoleculeView = memo(
onClick={() => {
if (tagEditModalOpenNew) {
setTagEditModalOpenNew(false);
dispatch(setTagEditorOpen(!tagEditModalOpenNew));
dispatch(setTagEditorOpenObs(!tagEditModalOpenNew));
dispatch(setMoleculeForTagEdit(null));
} else {
setTagEditModalOpenNew(true);
dispatch(setMoleculeForTagEdit(data.id));
dispatch(setTagEditorOpen(true));
dispatch(setTagEditorOpenObs(true));
if (setRef) {
setRef(ref.current);
}
Expand Down
8 changes: 6 additions & 2 deletions js/components/preview/molecule/observationCmpList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,13 +568,17 @@ export const ObservationCmpList = memo(({ hideProjects }) => {

const allSelectedMolecules = useMemo(
() =>
allMoleculesList.filter(molecule => moleculesToEditIds.includes(molecule.id) || molecule.id === molForTagEditId),
allMoleculesList.filter(
molecule => moleculesToEditIds.includes(molecule.id) /* || molecule.id === molForTagEditId*/
),
[allMoleculesList, moleculesToEditIds, molForTagEditId]
);

const allSelectedLHSCmps = useMemo(
() =>
allMoleculesList.filter(molecule => obsCmpsToEditIds.includes(molecule.id) || molecule.id === molForTagEditId),
allMoleculesList.filter(
molecule => obsCmpsToEditIds.includes(molecule.id) /* || molecule.id === molForTagEditId*/
),
[allMoleculesList, obsCmpsToEditIds, molForTagEditId]
);

Expand Down
13 changes: 10 additions & 3 deletions js/components/preview/molecule/observationCmpView/observationCmpView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,16 @@ import {
setOpenObservationsDialog,
setObservationsForLHSCmp,
appendToObsCmpListToEdit,
removeFromObsCmpListToEdit
removeFromObsCmpListToEdit,
setIsLHSCmpTagEdit
} from '../../../../reducers/selection/actions';
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 { getRandomColor } from '../utils/color';
import { DEFAULT_TAG_COLOR, getAllTagsForMol } from '../../tags/utils/tagUtils';
import { DEFAULT_TAG_COLOR, getAllTagsForLHSCmp, getAllTagsForMol } from '../../tags/utils/tagUtils';
import useClipboard from 'react-use-clipboard';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
Expand Down Expand Up @@ -446,7 +447,7 @@ const ObservationCmpView = memo(
const open = tagPopoverOpen ? true : false;

const getDataForTagsTooltip = () => {
const assignedTags = getAllTagsForMol(data, tagList);
const assignedTags = getAllTagsForLHSCmp(observations, tagList);
return assignedTags;
};

Expand Down Expand Up @@ -547,7 +548,9 @@ const ObservationCmpView = memo(
setTagEditModalOpenNew(false);
dispatch(setTagEditorOpen(!tagEditModalOpenNew));
dispatch(setMoleculeForTagEdit(null));
dispatch(setIsLHSCmpTagEdit(false));
} else {
dispatch(setIsLHSCmpTagEdit(true));
setTagEditModalOpenNew(true);
dispatch(setMoleculeForTagEdit(data.id));
dispatch(setTagEditorOpen(true));
Expand Down Expand Up @@ -609,7 +612,9 @@ const ObservationCmpView = memo(
setTagEditModalOpenNew(false);
dispatch(setTagEditorOpen(!tagEditModalOpenNew));
dispatch(setMoleculeForTagEdit(null));
dispatch(setIsLHSCmpTagEdit(false));
} else {
dispatch(setIsLHSCmpTagEdit(true));
setTagEditModalOpenNew(true);
dispatch(setMoleculeForTagEdit(data.id));
dispatch(setTagEditorOpen(true));
Expand Down Expand Up @@ -684,7 +689,9 @@ const ObservationCmpView = memo(
setTagEditModalOpenNew(false);
dispatch(setTagEditorOpen(!tagEditModalOpenNew));
dispatch(setMoleculeForTagEdit(null));
dispatch(setIsLHSCmpTagEdit(false));
} else {
dispatch(setIsLHSCmpTagEdit(true));
setTagEditModalOpenNew(true);
dispatch(setMoleculeForTagEdit(data.id));
dispatch(setTagEditorOpen(true));
Expand Down
Loading

0 comments on commit 8104514

Please sign in to comment.