- checkpoint

js/components/preview/molecule/hitNavigator.js

@@ -3,9 +3,10 @@
  */
 import React, { memo } from 'react';
 import { MoleculeList } from './moleculeList';
+import { ObservationCmpList } from './observationCmpList';
 
 const HitNavigator = memo(({ hideProjects }) => {
-  return <MoleculeList hideProjects={hideProjects} />;
+  return <ObservationCmpList hideProjects={hideProjects} />;
 });
 
 export default HitNavigator;

js/components/preview/molecule/observationCmpList.js

@@ -288,6 +288,7 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
   const isTagEditorOpen = useSelector(state => state.selectionReducers.tagEditorOpened);
   const molForTagEditId = useSelector(state => state.selectionReducers.molForTagEdit);
   const moleculesToEditIds = useSelector(state => state.selectionReducers.moleculesToEdit);
+  const obsCmpsToEditIds = useSelector(state => state.selectionReducers.obsCmpsToEdit);
   const isGlobalEdit = useSelector(state => state.selectionReducers.isGlobalEdit);
 
   const object_selection = useSelector(state => state.selectionReducers.mol_group_selection);

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

@@ -50,13 +50,13 @@ 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 MoleculeSelectCheckbox from './moleculeSelectCheckbox';
 import useClipboard from 'react-use-clipboard';
 import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
 import { Edit } from '@material-ui/icons';
 import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
 import { getFontColorByBackgroundColor } from '../../../../utils/colors';
+import MoleculeSelectCheckbox from '../moleculeView/moleculeSelectCheckbox';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -928,7 +928,7 @@ const ObservationCmpView = memo(
       });
     };
 
-    let moleculeTitle = data?.code.replace(new RegExp(`${target_on_name}-`, 'i'), '');
+    let moleculeTitle = data.smiles;
 
     const moleculeLPCControlButtonDisabled = ['ligand', 'protein', 'complex'].some(
       type => disableMoleculeNglControlButtons[type]

js/reducers/selection/actions.js

@@ -447,6 +447,27 @@ export const removeFromMolListToEdit = molId => {
   };
 };
 
+export const setObsCmpListToEdit = list => {
+  return {
+    type: constants.SET_OBS_MOL_LIST_TO_EDIT,
+    list: list
+  };
+};
+
+export const appendToObsCmpListToEdit = cmpId => {
+  return {
+    type: constants.APPEND_TO_OBS_MOL_LIST_TO_EDIT,
+    cmpId: cmpId
+  };
+};
+
+export const removeFromObsCmpListToEdit = cmpId => {
+  return {
+    type: constants.REMOVE_FROM_OBS_MOL_LIST_TO_EDIT,
+    molId: cmpId
+  };
+};
+
 export const setTagToEdit = tag => {
   return {
     type: constants.SET_TAG_TO_EDIT,

js/reducers/selection/constants.js

@@ -72,6 +72,10 @@ export const constants = {
   APPEND_TO_MOL_LIST_TO_EDIT: prefix + 'APPEND_TO_MOL_LIST_TO_EDIT',
   REMOVE_FROM_MOL_LIST_TO_EDIT: prefix + 'REMOVE_FROM_MOL_LIST_TO_EDIT',
 
+  SET_OBS_MOL_LIST_TO_EDIT: prefix + 'SET_OBS_MOL_LIST_TO_EDIT',
+  APPEND_TO_OBS_MOL_LIST_TO_EDIT: prefix + 'APPEND_TO_OBS_MOL_LIST_TO_EDIT',
+  REMOVE_FROM_OBS_MOL_LIST_TO_EDIT: prefix + 'REMOVE_FROM_OBS_MOL_LIST_TO_EDIT',
+
   SET_TAG_TO_EDIT: prefix + 'SET_TAG_TO_EDIT',
   SET_DISPLAY_ALL_MOLECULES: prefix + 'SET_DISPLAY_ALL_MOLECULES',
   SET_DISPLAY_UNTAGGED_MOLECULES: prefix + 'SET_DISPLAY_UNTAGGED_MOLECULES',

js/reducers/selection/selectionReducers.js

@@ -39,6 +39,8 @@ export const INITIAL_STATE = {
   currentVector: null, // selected vector smile (ID) of compoundsOfVectors
   moleculesToEdit: [],
 
+  obsCmpsToEdit: [],
+
   // tags
   tagToEdit: null,
   //display all molecules in hit navigator regardless of the tag selection
@@ -425,6 +427,16 @@ export function selectionReducers(state = INITIAL_STATE, action = {}) {
       let reducedMolListToEdit = state.moleculesToEdit.filter(mid => mid !== action.molId);
       return { ...state, moleculesToEdit: [...reducedMolListToEdit] };
 
+    case constants.SET_OBS_MOL_LIST_TO_EDIT:
+      return { ...state, obsCmpsToEdit: [...action.list] };
+
+    case constants.APPEND_TO_OBS_MOL_LIST_TO_EDIT:
+      return { ...state, obsCmpsToEdit: [...state.obsCmpsToEdit, action.cmpId] };
+
+    case constants.REMOVE_FROM_OBS_MOL_LIST_TO_EDIT:
+      let reducedObsCmpListToEdit = state.obsCmpsToEdit.filter(cid => cid !== action.cmpId);
+      return { ...state, obsCmpsToEdit: [...reducedObsCmpListToEdit] };
+
     case constants.SET_TAG_TO_EDIT: {
       return Object.assign({}, state, {
         tagToEdit: action.tagToEdit