- fixed problem with tags not visually updating on observations

js/components/preview/molecule/observationCmpView/observationCmpView.js

@@ -524,28 +524,41 @@ const ObservationCmpView = memo(
  setTagPopoverOpen(null);
  };
 
- const resolveTagBackgroundColor = tag => {
- let color = DEFAULT_TAG_COLOR;
+ const resolveTagBackgroundColor = useCallback(
+ tag => {
+ let color = DEFAULT_TAG_COLOR;
 
- if (tag.colour && tag.colour !== '') {
- color = tag.colour;
- } else {
- const category = dispatch(getCategoryById(tag.category));
- if (category) {
- color = `#${category.colour}`;
+ if (tag.colour && tag.colour !== '') {
+ color = tag.colour;
+ } else {
+ const category = dispatch(getCategoryById(tag.category));
+ if (category) {
+ color = `#${category.colour}`;
+ }
  }
- }
 
- return color;
- };
+ return color;
+ },
+ [dispatch]
+ );
 
- const resolveTagForegroundColor = tag => {
- const bgColor = resolveTagBackgroundColor(tag);
- return getFontColorByBackgroundColor(bgColor);
- };
+ const resolveTagForegroundColor = useCallback(
+ tag => {
+ const bgColor = resolveTagBackgroundColor(tag);
+ return getFontColorByBackgroundColor(bgColor);
+ },
+ [resolveTagBackgroundColor]
+ );
 
- const generateTagPopover = () => {
+ const generateTagPopover = useCallback(() => {
+ // console.log('generateTagPopover');
  const allData = getAllTagsForLHSCmp(observations, tagList, tagCategories);
+ // console.log(
+ // `generateTagPopover ${observations[0].compound_code} assigned tags: ${observations[0].tags_set} count: ` +
+ // allData?.length +
+ // ' ' +
+ // JSON.stringify(allData)
+ // );
  // const sortedData = [...allData].sort((a, b) => a.tag.localeCompare(b.tag));
 
  const modifiedObjects = allData.map((obj, index) => {
@@ -772,7 +785,23 @@ const ObservationCmpView = memo(
  </Tooltip>
  </IconButton>
  );
- };
+ }, [
+ classes.editButtonIcon,
+ classes.paper,
+ classes.popover,
+ classes.tagPopover,
+ dispatch,
+ observations,
+ open,
+ resolveTagBackgroundColor,
+ resolveTagForegroundColor,
+ setRef,
+ tagCategories,
+ tagEditModalOpenNew,
+ tagEditorOpen,
+ tagList,
+ tagPopoverOpen
+ ]);
 
  // componentDidMount
  useEffect(() => {

js/components/preview/tags/modal/tagEditor.js

@@ -3,7 +3,7 @@ import { Grid, Popper, IconButton, Tooltip, makeStyles, FormControlLabel, Switch
 import { Panel } from '../../../common';
 import { Close } from '@material-ui/icons';
 import { useDispatch, useSelector } from 'react-redux';
-import { updateMoleculeInMolLists, updateMoleculeTag } from '../../../../reducers/api/actions';
+import { updateLHSCompound, updateMoleculeInMolLists, updateMoleculeTag } from '../../../../reducers/api/actions';
 import { getMoleculeForId } from '../redux/dispatchActions';
 import {
  setMoleculeForTagEdit,
@@ -130,6 +130,8 @@ export const TagEditor = memo(
 
  const moleculesToEditIdsSt = useSelector(state => state.selectionReducers.moleculesToEdit) || [];
 
+ const lhsCompounds = useSelector(state => state.apiReducers.lhs_compounds_list);
+
  const [taggingInProgress, setTaggingInProgress] = useState(false);
  const [isError, setIsError] = useState(false);
  const [molsLeftForTagging, setMolsLeftForTagging] = useState(0);
@@ -142,6 +144,12 @@ export const TagEditor = memo(
  }
 
  const moleculesToEdit = moleculesToEditIds.map(id => dispatch(getMoleculeForId(id)));
+ let lhsCmp = null;
+ if (moleculesToEdit?.length > 0) {
+ const firstMolToEdit = moleculesToEdit[0];
+ const cmpId = firstMolToEdit.cmpd;
+ lhsCmp = lhsCompounds?.find(c => c.origId === cmpId && firstMolToEdit.canon_site_conf === c.canonSiteConf);
+ }
  moleculeTags = moleculeTags.sort(compareTagsAsc);
  const assignTagEditorOpen = useSelector(state => state.selectionReducers.tagEditorOpened);
 
@@ -170,6 +178,15 @@ export const TagEditor = memo(
  }
  };
 
+ const updateCmp = (cmp, obs) => {
+ let newCmp = { ...cmp };
+ const index = newCmp.associatedObs.findIndex(o => o.id === obs.id);
+ if (index >= 0) {
+ newCmp.associatedObs[index] = obs;
+ dispatch(updateLHSCompound(newCmp));
+ }
+ };
+
  const handleTagClick = async (selected, tag) => {
  try {
  setTaggingInProgress(true);
@@ -189,6 +206,7 @@ export const TagEditor = memo(
  moleculesToEdit.forEach(m => {
  let newMol = { ...m };
  newMol.tags_set = newMol.tags_set.filter(id => id !== tag.id);
+ updateCmp(lhsCmp, newMol);
  dispatch(updateMoleculeInMolLists(newMol));
  const moleculeTag = getMoleculeTagForTag(moleculeTags, tag.id);
 
@@ -217,6 +235,7 @@ export const TagEditor = memo(
  if (!m.tags_set.some(id => id === tag.id)) {
  let newMol = { ...m };
  newMol.tags_set.push(tag.id);
+ updateCmp(lhsCmp, newMol);
  dispatch(updateMoleculeInMolLists(newMol));
  const moleculeTag = getMoleculeTagForTag(moleculeTags, tag.id);
  let mtObject = molTagObjects.find(mto => mto.tag === tag.tag);

js/constants/constants.js

@@ -55,6 +55,13 @@ 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 NON_ASSIGNABLE_CATEGORIES = [
+ 'ConformerSites',
+ 'CanonSites',
+ 'CrystalformSites',
+ 'Quatassemblies',
+ 'Crystalforms'
+];
 
 export const TAG_TYPE = {
  ALL: 'ALL',

js/reducers/api/actions.js

@@ -161,6 +161,13 @@ export const updateMoleculeInMolLists = mol => {
  };
 };
 
+export const updateLHSCompound = cmp => {
+ return {
+ type: constants.UPDATE_LHS_COMPOUND,
+ cmp: cmp
+ };
+};
+
 export const setSavingState = function(savingState) {
  return {
  type: constants.SET_SAVING_STATE,

js/reducers/api/apiReducers.js

@@ -176,14 +176,25 @@ export default function apiReducers(state = INITIAL_STATE, action = {}) {
  const indexOfMol = newList.findIndex(m => m.id === action.mol.id);
  if (indexOfMol >= 0) {
  newList[indexOfMol] = { ...action.mol };
- return { ...state, all_mol_lists: newList };
+ return { ...state, all_mol_lists: [...newList] };
  } else {
  return state;
  }
 
  case constants.SET_LHS_COMPOUNDS_LIST:
  return { ...state, lhs_compounds_list: action.lhs_compounds_list };
 
+ case constants.UPDATE_LHS_COMPOUND: {
+ let newList = [...state.lhs_compounds_list];
+ const indexOfCmp = newList.findIndex(c => c.id === action.cmp.id);
+ if (indexOfCmp >= 0) {
+ newList[indexOfCmp] = { ...action.cmp };
+ return { ...state, lhs_compounds_list: [...newList] };
+ } else {
+ return state;
+ }
+ }
+
  case constants.SET_PANNDA_EVENT_LIST:
  return Object.assign({}, state, {
  pandda_event_list: action.pandda_event_list

js/reducers/api/constants.js

@@ -53,5 +53,6 @@ export const constants = {
  SET_ALL_DATA_LOADED: prefix + 'SET_ALL_DATA_LOADED',
  SET_SNAPSHOT_LOADING_IN_PROGRESS: prefix + 'SET_SNAPSHOT_LOADING_IN_PROGRESS',
  SET_IS_SNAPSHOT: prefix + 'SET_IS_SNAPSHOT',
- SET_LHS_COMPOUNDS_LIST: prefix + 'SET_LHS_COMPOUNDS_LIST'
+ SET_LHS_COMPOUNDS_LIST: prefix + 'SET_LHS_COMPOUNDS_LIST',
+ UPDATE_LHS_COMPOUND: prefix + 'UPDATE_LHS_COMPOUND'
 };