From d6510367f90be3a308546ea250f24aa737454690 Mon Sep 17 00:00:00 2001
From: Boris Kovar <boris.kovar@m2ms.sk>
Date: Wed, 31 Jul 2024 13:59:02 +0200
Subject: [PATCH 01/17] Squashed commit of the following:

commit e61321646b0f62c6ba81ca8dbbb8a328405819c4
Author: Boris Kovar <boris.kovar@m2ms.sk>
Date:   Wed Jul 31 13:57:02 2024 +0200

    - implemented #1251
---
 js/components/datasets/compoundSetList.js     |    1 -
 js/components/header/index.js                 |    6 +-
 js/components/landing/Landing.js              |   86 +-
 .../JobConfigurationDialog.js                 |    2 -
 .../preview/redux/dispatchActions.js          |   13 +-
 .../projects/addProjectDetail/index.js        |    9 +-
 js/components/projects/projectModal/index.js  |   36 +-
 .../modals/downloadStructuresDialog.js        |    4 +-
 .../snapshot/withSnapshotManagement.js        |    4 +-
 js/components/target/editTargetDialog.js      |  166 ++
 js/components/target/redux/actions.js         |    6 +-
 js/components/target/redux/constants.js       |    4 +-
 js/components/target/redux/reducer.js         |    6 +-
 js/components/target/targetList.js            |   61 +-
 js/components/toast/ToastProvider.js          |    2 +-
 js/reducers/api/actions.js                    |    7 +
 js/reducers/api/apiReducers.js                |   13 +-
 js/reducers/api/constants.js                  |    3 +-
 js/reducers/selection/actions.js              |    7 +
 js/reducers/selection/constants.js            |    3 +-
 js/reducers/selection/selectionReducers.js    |    6 +-
 legacy/legacy_targets.json                    | 1788 ++++++++---------
 22 files changed, 1232 insertions(+), 1001 deletions(-)
 create mode 100644 js/components/target/editTargetDialog.js

diff --git a/js/components/datasets/compoundSetList.js b/js/components/datasets/compoundSetList.js
index 29220ce8f..5a84447d4 100644
--- a/js/components/datasets/compoundSetList.js
+++ b/js/components/datasets/compoundSetList.js
@@ -73,7 +73,6 @@ export const CompoundSetList = () => {
   const greenInput = useSelector(state => state.previewReducers.compounds[compoundsColors.green.key]);
   const purpleInput = useSelector(state => state.previewReducers.compounds[compoundsColors.purple.key]);
   const apricotInput = useSelector(state => state.previewReducers.compounds[compoundsColors.apricot.key]);
-  const targetName = useSelector(state => state.apiReducers.target_on_name);
 
   const inputs = {
     [compoundsColors.blue.key]: blueInput,
diff --git a/js/components/header/index.js b/js/components/header/index.js
index 73d87eb5b..484316a02 100644
--- a/js/components/header/index.js
+++ b/js/components/header/index.js
@@ -67,6 +67,7 @@ import { getVersions } from '../../utils/version';
 import { AddProjectDetail } from '../projects/addProjectDetail';
 import { ServicesStatusWrapper } from '../services';
 import { COMPANIES, get_logo } from '../funders/constants';
+import { setEditTargetDialogOpen } from '../target/redux/actions';
 
 const useStyles = makeStyles(theme => ({
   padding: {
@@ -271,8 +272,8 @@ export default memo(
                   targetName !== undefined ? (
                     <>
                       {currentProject.authorID === null ||
-                        currentProject.projectID === null ||
-                        currentProject.authorID === userId ? (
+                      currentProject.projectID === null ||
+                      currentProject.authorID === userId ? (
                         <Button
                           onClick={() => {
                             isProjectModalLoading === false
@@ -551,6 +552,7 @@ export default memo(
                 </ListItemIcon>
                 <ListItemText primary="Home" />
               </ListItem>
+
               <Divider />
 
               <ListItem button onClick={() => history.push(URLS.projects)}>
diff --git a/js/components/landing/Landing.js b/js/components/landing/Landing.js
index f505d3407..c9a9a4310 100644
--- a/js/components/landing/Landing.js
+++ b/js/components/landing/Landing.js
@@ -4,7 +4,7 @@
 import { Grid, Link, makeStyles } from '@material-ui/core';
 import React, { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { TargetList } from '../target/targetList';
-import { connect } from 'react-redux';
+import { connect, useDispatch, useSelector } from 'react-redux';
 import * as apiActions from '../../reducers/api/actions';
 import * as selectionActions from '../../reducers/selection/actions';
 import { DJANGO_CONTEXT } from '../../utils/djangoContext';
@@ -13,6 +13,8 @@ import { resetCurrentCompoundsSettings } from '../preview/compounds/redux/action
 import { resetProjectsReducer } from '../projects/redux/actions';
 import { withLoadingProjects } from '../target/withLoadingProjects';
 import { ToastContext } from '../toast';
+import { EditTargetDialog } from '../target/editTargetDialog';
+import { TOAST_LEVELS } from '../toast/constants';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -25,6 +27,7 @@ const useStyles = makeStyles(theme => ({
 
 const Landing = memo(
   ({ resetSelectionState, resetTargetState, resetCurrentCompoundsSettings, resetProjectsReducer }) => {
+    const dispatch = useDispatch();
     const classes = useStyles();
 
     const projectWidth = window.innerWidth;
@@ -32,10 +35,35 @@ const Landing = memo(
     const [targetListWidth, setTargetListWidth] = useState(450);
     const [projectListWidth, setProjectListWidth] = useState(projectWidth);
 
-    const { toast } = useContext(ToastContext);
+    const { toast, toastSuccess, toastError, toastInfo, toastWarning } = useContext(ToastContext);
     const [loginText, setLoginText] = useState(
       DJANGO_CONTEXT['username'] === 'NOT_LOGGED_IN' ? '' : "You're logged in as " + DJANGO_CONTEXT['username']
     );
+    const toastMessages = useSelector(state => state.selectionReducers.toastMessages);
+
+    useEffect(() => {
+      if (toastMessages?.length > 0) {
+        toastMessages.forEach(message => {
+          switch (message.level) {
+            case TOAST_LEVELS.SUCCESS:
+              toastSuccess(message.text);
+              break;
+            case TOAST_LEVELS.ERROR:
+              toastError(message.text);
+              break;
+            case TOAST_LEVELS.INFO:
+              toastInfo(message.text);
+              break;
+            case TOAST_LEVELS.WARNING:
+              toastWarning(message.text);
+              break;
+            default:
+              break;
+          }
+        });
+        dispatch(selectionActions.setToastMessages([]));
+      }
+    }, [dispatch, toastError, toastInfo, toastMessages, toastSuccess, toastWarning]);
 
     useEffect(() => {
       if (DJANGO_CONTEXT['authenticated'] !== true) {
@@ -67,13 +95,16 @@ const Landing = memo(
       setIsResizing(true);
     };
 
-    const handleMouseMove = useCallback(e => {
-      if (!isResizing) return;
-      const targetListWidth = e.clientX;
-      const projectListWidth = window.innerWidth - targetListWidth;
-      setTargetListWidth(targetListWidth);
-      setProjectListWidth(projectListWidth);
-    }, [isResizing]);
+    const handleMouseMove = useCallback(
+      e => {
+        if (!isResizing) return;
+        const targetListWidth = e.clientX;
+        const projectListWidth = window.innerWidth - targetListWidth;
+        setTargetListWidth(targetListWidth);
+        setProjectListWidth(projectListWidth);
+      },
+      [isResizing]
+    );
 
     const handleMouseUp = useCallback(() => {
       setIsResizing(false);
@@ -92,24 +123,27 @@ const Landing = memo(
     }, [isResizing, handleMouseMove, handleMouseUp]);
 
     return (
-      <Grid container className={classes.root}>
-        <Grid item style={{ width: targetListWidth }}>
-          <TargetList />
-        </Grid>
-        <div
-          style={{
-            cursor: 'col-resize',
-            width: 3,
-            height: '100%',
-            backgroundColor: '#eeeeee',
-            borderRadius: '3px'
-          }}
-          onMouseDown={handleMouseDownResizer}
-        ></div>
-        <Grid item style={{ width: projectListWidth }}>
-          <Projects />
+      <>
+        <Grid container className={classes.root}>
+          <Grid item style={{ width: targetListWidth }}>
+            <TargetList />
+          </Grid>
+          <div
+            style={{
+              cursor: 'col-resize',
+              width: 3,
+              height: '100%',
+              backgroundColor: '#eeeeee',
+              borderRadius: '3px'
+            }}
+            onMouseDown={handleMouseDownResizer}
+          ></div>
+          <Grid item style={{ width: projectListWidth }}>
+            <Projects />
+          </Grid>
         </Grid>
-      </Grid>
+        <EditTargetDialog />
+      </>
     );
   }
 );
diff --git a/js/components/preview/projectHistoryPanel/JobConfigurationDialog.js b/js/components/preview/projectHistoryPanel/JobConfigurationDialog.js
index a6d595b7f..de6973252 100644
--- a/js/components/preview/projectHistoryPanel/JobConfigurationDialog.js
+++ b/js/components/preview/projectHistoryPanel/JobConfigurationDialog.js
@@ -195,8 +195,6 @@ const JobConfigurationDialog = ({ snapshots }) => {
   const currentSnapshotSelectedCompoundsIDs = useSelector(state => state.selectionReducers.moleculesToEdit);
   const currentSnapshotVisibleCompoundsIDs = useSelector(state => state.selectionReducers.fragmentDisplayList);
 
-  const target_on_name = useSelector(state => state.apiReducers.target_on_name);
-
   const getMoleculeTitle = title => {
     return title.replace(new RegExp(':.*$', 'i'), '');
   };
diff --git a/js/components/preview/redux/dispatchActions.js b/js/components/preview/redux/dispatchActions.js
index e1ec0ad1d..994d4888d 100644
--- a/js/components/preview/redux/dispatchActions.js
+++ b/js/components/preview/redux/dispatchActions.js
@@ -52,7 +52,10 @@ export const shouldLoadProtein = ({
 }) => (dispatch, getState) => {
   const state = getState();
   const targetIdList = state.apiReducers.target_id_list;
-  const targetOnName = state.apiReducers.target_on_name;
+  const targetOnId = state.apiReducers.target_on;
+
+  const targetOn = targetIdList.find(target => target.id === targetOnId);
+
   const isRestoring = state.trackingReducers.isActionRestoring;
   if (
     targetIdList &&
@@ -90,8 +93,12 @@ export const shouldLoadProtein = ({
       dispatch(restoreAfterTargetActions(nglViewList, routeProjectID, currentSnapshotID));
     }
 
-    if (targetOnName !== undefined) {
-      document.title = targetOnName + ': Fragalysis';
+    if (targetOn !== undefined) {
+      document.title = targetOn?.display_name
+        ? targetOn.display_name
+        : targetOn?.title
+        ? targetOn.title
+        : 'Unknown' + ': Fragalysis';
     }
   }
 };
diff --git a/js/components/projects/addProjectDetail/index.js b/js/components/projects/addProjectDetail/index.js
index 1533ab4aa..7e438e60e 100644
--- a/js/components/projects/addProjectDetail/index.js
+++ b/js/components/projects/addProjectDetail/index.js
@@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export const AddProjectDetail = memo(({ }) => {
+export const AddProjectDetail = memo(({}) => {
   const classes = useStyles();
   const [state, setState] = useState();
   let [createDiscourse, setCreateDiscourse] = useState(true);
@@ -52,6 +52,7 @@ export const AddProjectDetail = memo(({ }) => {
   const dispatch = useDispatch();
   const targetId = useSelector(state => state.apiReducers.target_on);
   const targetName = useSelector(state => state.apiReducers.target_on_name);
+  const targetList = useSelector(state => state.apiReducers.target_id_list);
   const sessionProjectID = useSelector(state => state.projectReducers.currentProject.projectID);
   const isProjectModalLoading = useSelector(state => state.projectReducers.isProjectModalLoading);
   const currentProject = useSelector(state => state.targetReducers.currentProject);
@@ -71,6 +72,8 @@ export const AddProjectDetail = memo(({ }) => {
 
   createDiscourse &= dicourseUserAvailable;
 
+  const target = targetList.find(target => target.id === targetId);
+
   const validateProjectName = async value => {
     let error;
 
@@ -100,8 +103,8 @@ export const AddProjectDetail = memo(({ }) => {
     <ModalNewProject open={isProjectModalLoading}>
       <Formik
         initialValues={{
-          title: targetName + actualDate,
-          description: 'Project created from ' + targetName,
+          title: target?.display_name + actualDate,
+          description: 'Project created from ' + target?.display_name,
           tags: ''
         }}
         validate={values => {
diff --git a/js/components/projects/projectModal/index.js b/js/components/projects/projectModal/index.js
index d36ece2ad..6d4cb23aa 100644
--- a/js/components/projects/projectModal/index.js
+++ b/js/components/projects/projectModal/index.js
@@ -55,7 +55,7 @@ const useStyles = makeStyles(theme => ({
 }));
 let currantTargetId = 1;
 
-export const ProjectModal = memo(({ }) => {
+export const ProjectModal = memo(({}) => {
   const classes = useStyles();
   const [state, setState] = useState();
   const [selectedTarget, setSelectedTarget] = useState(false);
@@ -77,7 +77,9 @@ export const ProjectModal = memo(({ }) => {
   );
   const targetList = useSelector(state => state.apiReducers.target_id_list);
   const currantProject = useSelector(state => state.targetReducers.currantProject);
-  const currantTarget = useSelector(state => state.apiReducers.target_on_name);
+  const targetId = useSelector(state => state.apiReducers.target_on);
+
+  const currentTarget = targetList.find(target => target.id === targetId);
 
   const actualDate = moment().format('-YYYY-MM-DD');
 
@@ -123,33 +125,32 @@ export const ProjectModal = memo(({ }) => {
   };
 
   let selectedValue = '';
-  if (currantTarget !== undefined) {
-    selectedValue = currantTarget;
+  if (currentTarget?.display_name !== undefined) {
+    selectedValue = currentTarget?.display_name;
   }
   targetList.map(target => {
     if (selectedValue === target.title && selectedTarget === false) {
-      currantTargetId = target.id
+      currantTargetId = target.id;
     }
-  })
+  });
 
-  const handleChangeTarget = (event) => {
+  const handleChangeTarget = event => {
     setSelectedTarget(true);
     selectedValue = event.target.value;
     targetList.map(target => {
       if (selectedValue === target.title) {
-        currantTargetId = target.id
+        currantTargetId = target.id;
       }
-    })
-  }
-
+    });
+  };
 
   return (
     <ModalNewProject open={isProjectModalOpen} onClose={handleCloseModal}>
       <Formik
         initialValues={{
           type: ProjectCreationType.NEW,
-          title: currantTarget + actualDate,
-          description: 'Project created from ' + currantTarget,
+          title: currentTarget?.display_name + actualDate,
+          description: 'Project created from ' + currentTarget?.display_name,
           targetId: currantTargetId,
           parentSnapshotId: '',
           tags: ''
@@ -307,10 +308,13 @@ export const ProjectModal = memo(({ }) => {
                         <InputLabel htmlFor="selected-target" required disabled={isProjectModalLoading}>
                           Target
                         </InputLabel>
-                        <NativeSelect defaultValue={currantTarget} onChange={() => handleChangeTarget(event)}>
+                        <NativeSelect
+                          defaultValue={currentTarget?.display_name}
+                          onChange={() => handleChangeTarget(event)}
+                        >
                           {targetList.map(data => (
-                            <option key={data.id} defaultValue={currantTarget}>
-                              {data.title}
+                            <option key={data.id} defaultValue={currentTarget?.display_name}>
+                              {data.display_name}
                             </option>
                           ))}
                         </NativeSelect>
diff --git a/js/components/snapshot/modals/downloadStructuresDialog.js b/js/components/snapshot/modals/downloadStructuresDialog.js
index b41bf4b3b..a3a83f798 100644
--- a/js/components/snapshot/modals/downloadStructuresDialog.js
+++ b/js/components/snapshot/modals/downloadStructuresDialog.js
@@ -139,6 +139,8 @@ export const DownloadStructureDialog = memo(({}) => {
   const isOpen = useSelector(state => state.snapshotReducers.downloadStructuresDialogOpen);
   const targetId = useSelector(state => state.apiReducers.target_on);
   const targetName = useSelector(state => state.apiReducers.target_on_name);
+  const targetIdList = useSelector(state => state.apiReducers.target_id_list);
+  const target = targetIdList.find(t => t.id === targetId);
   const allMolecules = useSelector(state => state.apiReducers.all_mol_lists);
   const ligandsTurnedOnIds = useSelector(state => state.selectionReducers.fragmentDisplayList);
   const selectedMoleculesIds = useSelector(state => state.selectionReducers.moleculesToEdit);
@@ -500,7 +502,7 @@ export const DownloadStructureDialog = memo(({}) => {
       <div className={classes.root}>
         {!zipPreparing && !(generalError || backendError) && (
           <DialogTitle id="form-dialog-structures-title" disableTypography>
-            <Typography variant="h5">{`Download structures and data for target ${targetName}`}</Typography>
+            <Typography variant="h5">{`Download structures and data for target ${target?.display_name}`}</Typography>
           </DialogTitle>
         )}
         {zipPreparing && (
diff --git a/js/components/snapshot/withSnapshotManagement.js b/js/components/snapshot/withSnapshotManagement.js
index 024cc6a3b..513b0376b 100644
--- a/js/components/snapshot/withSnapshotManagement.js
+++ b/js/components/snapshot/withSnapshotManagement.js
@@ -27,7 +27,9 @@ export const withSnapshotManagement = WrappedComponent => {
     const currentSnapshotID = useSelector(state => state.projectReducers.currentSnapshot.id);
 
     const targetIdList = useSelector(state => state.apiReducers.target_id_list);
-    const targetName = useSelector(state => state.apiReducers.target_on_name);
+    const targetId = useSelector(state => state.apiReducers.target_on);
+    const targetObj = targetIdList.find(t => t.id === targetId);
+    const targetName = targetObj?.display_name;
     const currentSessionProject = useSelector(state => state.projectReducers.currentProject);
     const currentSnapshot = useSelector(state => state.projectReducers.currentSnapshot);
     const directDisplay = useSelector(state => state.apiReducers.direct_access);
diff --git a/js/components/target/editTargetDialog.js b/js/components/target/editTargetDialog.js
new file mode 100644
index 000000000..81fb20d82
--- /dev/null
+++ b/js/components/target/editTargetDialog.js
@@ -0,0 +1,166 @@
+import { Button, Grid, makeStyles, Modal } from '@material-ui/core';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setEditTargetDialogOpen } from './redux/actions';
+import { Field, Form, Formik } from 'formik';
+import { TextField } from 'formik-material-ui';
+import { api, METHOD } from '../../utils/api';
+import { base_url } from '../routes/constants';
+import { replaceTarget } from '../../reducers/api/actions';
+import { addToastMessage, setTargetToEdit } from '../../reducers/selection/actions';
+import { TOAST_LEVELS } from '../toast/constants';
+
+const useStyles = makeStyles(theme => ({
+  body: {
+    width: '100%',
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1)
+  },
+  input: {
+    width: 400
+  },
+  margin: {
+    margin: theme.spacing(1)
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    width: 400
+  },
+  renameTargetPopup: {
+    width: '300px',
+    borderRadius: '5px',
+    border: '1px solid #000',
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)'
+  },
+
+  topPopup: {
+    width: '100%',
+    borderRadius: '5px 5px 0 0',
+    backgroundColor: '#3f51b5',
+    color: '#fff',
+    paddingLeft: '10px',
+    lineHeight: '30px'
+  },
+
+  popUpButton: {
+    borderRadius: '0 5px 0 0',
+    backgroundColor: '#d33f3f',
+    color: '#fff',
+    padding: '5px 10px 5px 10px',
+    border: 'none',
+    float: 'right',
+    height: '30px',
+    '&:hover': {
+      borderRadius: '0 5px 0 0',
+      backgroundColor: '#aa3939',
+      color: '#fff',
+      cursor: 'pointer'
+    }
+  },
+
+  bodyPopup: {
+    padding: '10px',
+    backgroundColor: '#ffffff',
+    borderRadius: '0 0 5px 5px'
+  }
+}));
+
+export const EditTargetDialog = () => {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+
+  const isEditTargetDialogOpen = useSelector(state => state.targetReducers.isEditTargetDialogOpen);
+  const targetToEdit = useSelector(state => state.selectionReducers.targetToEdit);
+
+  const onClose = () => {
+    dispatch(setEditTargetDialogOpen(false));
+    dispatch(setTargetToEdit(null));
+  };
+
+  const validate = values => {
+    const errors = {};
+
+    if (values.name === '') {
+      errors.name = 'Required';
+    }
+
+    return errors;
+  };
+
+  const onSubmitForm = async ({ name }) => {
+    targetToEdit &&
+      api({
+        url: `${base_url}/api/targets/${targetToEdit.id}/`,
+        method: METHOD.PATCH,
+        data: { display_name: name }
+      })
+        .then(resp => {
+          targetToEdit.display_name = name;
+          dispatch(replaceTarget(targetToEdit));
+          dispatch(addToastMessage({ text: `Target renamed successfully to ${name}`, level: TOAST_LEVELS.SUCCESS }));
+        })
+        .catch(err => {
+          dispatch(addToastMessage({ text: 'Error renaming target', level: TOAST_LEVELS.ERROR }));
+        });
+  };
+
+  return (
+    targetToEdit && (
+      <Modal open={isEditTargetDialogOpen} onClose={onClose}>
+        <div className={classes.renameTargetPopup}>
+          <div className={classes.topPopup}>
+            <span>Edit target</span>
+            <button className={classes.popUpButton} onClick={onClose}>
+              X
+            </button>
+          </div>
+          <div className={classes.bodyPopup}>
+            <Formik
+              initialValues={{ name: targetToEdit?.display_name ? targetToEdit?.display_name : '' }}
+              onSubmit={onSubmitForm}
+              validate={validate}
+            >
+              {({ submitForm, isSubmitting }) => (
+                <Form /*className={classes.flexRow}*/>
+                  <Grid container direction="column" className={classes.body}>
+                    <Grid item style={{ display: 'flex', alignItems: 'center' }}>
+                      <label htmlFor="name" style={{ marginRight: '1rem' }}>
+                        Name:
+                      </label>
+                      <Field
+                        component={TextField}
+                        type="text"
+                        name="name"
+                        variant="standard"
+                        margin="none"
+                        disabled={isSubmitting}
+                        autoComplete="off"
+                      />
+                    </Grid>
+                  </Grid>
+                  <Grid container justifyContent="flex-end" direction="row">
+                    <Grid>
+                      <Button color="secondary" size="large" onClick={onClose}>
+                        Close
+                      </Button>
+                    </Grid>
+                    <Grid>
+                      <Button type="submit" color="primary" size="large">
+                        Submit
+                      </Button>
+                    </Grid>
+                  </Grid>
+                </Form>
+              )}
+            </Formik>
+          </div>
+        </div>
+      </Modal>
+    )
+  );
+};
diff --git a/js/components/target/redux/actions.js b/js/components/target/redux/actions.js
index 7fd083e39..e907c7603 100644
--- a/js/components/target/redux/actions.js
+++ b/js/components/target/redux/actions.js
@@ -53,6 +53,11 @@ export const setSearchTarget = searchTarget => {
   };
 };
 
+export const setEditTargetDialogOpen = isOpen => ({
+  type: constants.SET_EDIT_TARGET_DIALOG_OPEN,
+  isOpen: isOpen
+});
+
 export const setSearchNumberOfChains = searchNumberOfChains => {
   return {
     type: constants.SEARCH_NUMBER_OF_CHAINS,
@@ -157,4 +162,3 @@ export const setSearchInitDateTo = searchInitDateTo => {
     payload: searchInitDateTo
   };
 };
-
diff --git a/js/components/target/redux/constants.js b/js/components/target/redux/constants.js
index 9378d6dbb..053ef04c9 100644
--- a/js/components/target/redux/constants.js
+++ b/js/components/target/redux/constants.js
@@ -31,7 +31,9 @@ export const constants = {
   SEARCH_DATE_LAST_EDIT_TO: prefix + 'SEARCH_DATE_LAST_EDIT_TO',
   SEARCH_TARGET_ACCESS_STRING: prefix + 'SEARCH_TARGET_ACCESS_STRING',
   SEARCH_INIT_DATE_FROM: prefix + 'SEARCH_INIT_DATE_FROM',
-  SEARCH_INIT_DATE_TO: prefix + 'SEARCH_INIT_DATE_TO'
+  SEARCH_INIT_DATE_TO: prefix + 'SEARCH_INIT_DATE_TO',
+
+  SET_EDIT_TARGET_DIALOG_OPEN: prefix + 'SET_EDIT_TARGET_DIALOG_OPEN'
 };
 
 export const TARGETS_ATT = {
diff --git a/js/components/target/redux/reducer.js b/js/components/target/redux/reducer.js
index 02b29ad23..bbecdc27f 100644
--- a/js/components/target/redux/reducer.js
+++ b/js/components/target/redux/reducer.js
@@ -10,7 +10,8 @@ export const INITIAL_STATE = {
   projects: [],
   currentProject: null,
   openPickProjectModal: false,
-  projectsLoaded: false
+  projectsLoaded: false,
+  isEditTargetDialogOpen: false
 };
 
 export const targetReducers = (state = INITIAL_STATE, action = {}) => {
@@ -25,6 +26,9 @@ export const targetReducers = (state = INITIAL_STATE, action = {}) => {
         isTargetLoading: action.payload
       });
 
+    case constants.SET_EDIT_TARGET_DIALOG_OPEN:
+      return { ...state, isEditTargetDialogOpen: action.isOpen };
+
     case constants.SET_TARGET_DISCOURSE_LINKS:
       return { ...state, targetDiscourseLinks: { ...action.payload } };
 
diff --git a/js/components/target/targetList.js b/js/components/target/targetList.js
index 91129da12..4318ab7f0 100644
--- a/js/components/target/targetList.js
+++ b/js/components/target/targetList.js
@@ -28,7 +28,7 @@ import { Link } from 'react-router-dom';
 import { URLS } from '../routes/constants';
 import { isDiscourseAvailable, generateDiscourseTargetURL, openDiscourseLink } from '../../utils/discourse';
 import { setOpenDiscourseErrorModal } from '../../reducers/api/actions';
-import { Chat } from '@material-ui/icons';
+import { Chat, Edit } from '@material-ui/icons';
 import { URL_TOKENS } from '../direct/constants';
 import {
   setListOfFilteredTargets,
@@ -50,7 +50,8 @@ import {
   setSearchDateLastEditTo,
   setSearchTargetAccessString,
   setSearchInitDateFrom,
-  setSearchInitDateTo
+  setSearchInitDateTo,
+  setEditTargetDialogOpen
 } from './redux/actions';
 import {
   compareIdAsc,
@@ -99,12 +100,13 @@ import {
   UnfoldMore,
   FilterList
 } from '@material-ui/icons';
-import { setTargetFilter } from '../../reducers/selection/actions';
+import { setTargetFilter, setTargetToEdit } from '../../reducers/selection/actions';
 import { MOCK_LIST_OF_TARGETS } from './MOCK';
 import { TARGETS_ATTR } from './redux/constants';
 import { getTargetProjectCombinations } from './redux/dispatchActions';
 import moment from 'moment';
 import { getCombinedTargetList } from '../../reducers/api/selectors';
+import { DJANGO_CONTEXT } from '../../utils/djangoContext';
 
 const useStyles = makeStyles(theme => ({
   table: {
@@ -153,6 +155,7 @@ export const TargetList = memo(() => {
 
   const filterClean = useSelector(state => state.targetReducers.filterClean);
   let filter = useSelector(state => state.selectionReducers.targetFilter);
+  const [showEditIconForTarget, setShowEditIconForTarget] = useState(0);
 
   // const target_id_list_unsorted = useSelector(state => state.apiReducers.target_id_list);
   const target_id_list_unsorted = useSelector(state => getCombinedTargetList(state));
@@ -278,7 +281,7 @@ export const TargetList = memo(() => {
 
     for (let attr of TARGETS_ATTR) {
       const lowAttr = attr.key.toLowerCase();
-      if (attr.key === 'title') {
+      if (attr.key === 'display_name') {
         initObject.filter[attr.key] = {
           priority: 0,
           order: -1,
@@ -326,24 +329,48 @@ export const TargetList = memo(() => {
           <div>{target.id}</div>
         </TableCell>
       </Tooltip> */}
-        <TableCell align="left" style={{ padding: '0px', margin: '0px' }}>
+        <TableCell
+          align="left"
+          style={{ padding: '0px', margin: '0px' }}
+          onMouseEnter={() => {
+            if (!target.isLegacy && DJANGO_CONTEXT['authenticated']) {
+              setShowEditIconForTarget(target.id);
+            }
+          }}
+          onMouseLeave={() => {
+            if (!target.isLegacy && DJANGO_CONTEXT['authenticated']) {
+              setShowEditIconForTarget(0);
+            }
+          }}
+        >
           {target.isLegacy ? (
             <a href={target.legacyUrl} target="new" style={{ wordBreak: 'break-all' }}>
-              {target.title}
+              {target.display_name}
             </a>
           ) : (
-            <Link to={preview}>
-              <div style={{ wordBreak: 'break-all' }}>{target.title}</div>
-            </Link>
+            <>
+              <Link to={preview}>{target.display_name}</Link>
+              {showEditIconForTarget === target.id && (
+                <IconButton
+                  style={{ padding: '0px' }}
+                  onClick={() => {
+                    dispatch(setTargetToEdit(target));
+                    dispatch(setEditTargetDialogOpen(true));
+                  }}
+                >
+                  <Edit style={{ height: '15px' }} />
+                </IconButton>
+              )}
+            </>
           )}
         </TableCell>
         <TableCell style={{ width: '2px', padding: '0px', margin: '0px' }}></TableCell>
         <TableCell align="left" style={{ padding: '0px', margin: '0px' }}>
-          <div>{target.project.target_access_string} </div>
+          {target.project.target_access_string}
         </TableCell>
         <TableCell style={{ width: '2px', padding: '0px', margin: '0px' }}></TableCell>
         <TableCell align="left" style={{ padding: '0px', margin: '0px' }}>
-          <div>{moment(target.project.init_date).format('YYYY-MM-DD')} </div>
+          {moment(target.project.init_date).format('YYYY-MM-DD')}
         </TableCell>
         <TableCell style={{ width: '2px', padding: '0px', margin: '0px' }}></TableCell>
         <TableCell align="left" style={{ padding: '0px', margin: '0px' }}>
@@ -460,7 +487,7 @@ export const TargetList = memo(() => {
       dispatch(setSearchInitDateTo(''));
       const newFilter = { ...filter };
       newFilter.priorityOrder = [
-        'title',
+        'display_name',
         'targetAccessString',
         'initDate'
         //'numberOfChains',
@@ -476,7 +503,7 @@ export const TargetList = memo(() => {
         //'dateLastEdit'
       ];
       newFilter.sortOptions = [
-        ['title', undefined],
+        ['display_name', undefined],
         ['targetAccessString', 'project_target_access_string'],
         ['initDate', 'project.init_date']
         //['numberOfChains', undefined],
@@ -546,7 +573,9 @@ export const TargetList = memo(() => {
       searchedById = [];
     }*/
     if (checkedTarget === true) {
-      searchedByTarget = listOfAllTarget.filter(item => item.title.toLowerCase().includes(searchString.toLowerCase()));
+      searchedByTarget = listOfAllTarget.filter(item =>
+        item.display_name.toLowerCase().includes(searchString.toLowerCase())
+      );
     } else {
       searchedByTarget = [];
     }
@@ -1116,8 +1145,8 @@ export const TargetList = memo(() => {
       filteredListOfTargets !== undefined
         ? filteredListOfTargets
         : listOfTargets !== undefined
-          ? listOfTargets
-          : target_id_list,
+        ? listOfTargets
+        : target_id_list,
       projectsList
     );
     const slice = combinations.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
diff --git a/js/components/toast/ToastProvider.js b/js/components/toast/ToastProvider.js
index 98de52771..2539e3497 100644
--- a/js/components/toast/ToastProvider.js
+++ b/js/components/toast/ToastProvider.js
@@ -52,7 +52,7 @@ export const ToastProvider = memo(props => {
     ) : (
       { text }
     );
-    toast(message, { ...successOptions, ...options });
+    options.link ? toast(message, { ...successOptions, ...options }) : toast(text, { ...successOptions, ...options });
     // toast(text, { ...successOptions, ...options });
   };
 
diff --git a/js/reducers/api/actions.js b/js/reducers/api/actions.js
index f04f06bcd..68ab62e2c 100644
--- a/js/reducers/api/actions.js
+++ b/js/reducers/api/actions.js
@@ -21,6 +21,13 @@ export const setLegacyTargetIdList = input_json => {
   };
 };
 
+export const replaceTarget = target => {
+  return {
+    type: constants.REPLACE_TARGET,
+    target: target
+  };
+};
+
 export const setDuckYankData = function(input_json) {
   return {
     type: constants.SET_DUCK_YANK_DATA,
diff --git a/js/reducers/api/apiReducers.js b/js/reducers/api/apiReducers.js
index a43d186e6..38b3801d4 100644
--- a/js/reducers/api/apiReducers.js
+++ b/js/reducers/api/apiReducers.js
@@ -102,6 +102,12 @@ export default function apiReducers(state = INITIAL_STATE, action = {}) {
     case constants.SET_OPEN_DISCOURSE_ERROR_MODAL:
       return Object.assign({}, state, { open_discourse_error_modal: action.payload });
 
+    case constants.REPLACE_TARGET: {
+      const newTargetIdList = state.target_id_list.filter(t => t.id !== action.target.id);
+
+      return { ...state, target_id_list: [...newTargetIdList, { ...action.target }] };
+    }
+
     case constants.SET_TARGET_ID_LIST:
       return Object.assign({}, state, {
         target_id_list: action.target_id_list
@@ -110,9 +116,9 @@ export default function apiReducers(state = INITIAL_STATE, action = {}) {
     case constants.SET_LEGACY_TARGET_ID_LIST:
       return { ...state, legacy_target_id_list: action.legacy_target_id_list };
 
-    case constants.SET_TARGET_ON:
-      var target_on_name = undefined;
-      for (var ind in state.target_id_list) {
+    case constants.SET_TARGET_ON: {
+      let target_on_name = undefined;
+      for (let ind in state.target_id_list) {
         if (state.target_id_list[ind].id === action.target_on) {
           target_on_name = state.target_id_list[ind].title;
         }
@@ -121,6 +127,7 @@ export default function apiReducers(state = INITIAL_STATE, action = {}) {
         target_on_name: target_on_name,
         target_on: action.target_on
       });
+    }
 
     case constants.SET_MOL_GROUP_LIST:
       return Object.assign({}, state, {
diff --git a/js/reducers/api/constants.js b/js/reducers/api/constants.js
index 9d32d3117..40d150168 100644
--- a/js/reducers/api/constants.js
+++ b/js/reducers/api/constants.js
@@ -55,5 +55,6 @@ export const constants = {
   SET_IS_SNAPSHOT: prefix + 'SET_IS_SNAPSHOT',
   SET_LHS_COMPOUNDS_LIST: prefix + 'SET_LHS_COMPOUNDS_LIST',
   UPDATE_LHS_COMPOUND: prefix + 'UPDATE_LHS_COMPOUND',
-  REMOVE_LHS_COMPOUND: prefix + 'REMOVE_LHS_COMPOUND'
+  REMOVE_LHS_COMPOUND: prefix + 'REMOVE_LHS_COMPOUND',
+  REPLACE_TARGET: prefix + 'REPLACE_TARGET'
 };
diff --git a/js/reducers/selection/actions.js b/js/reducers/selection/actions.js
index d0c82306a..e4d708386 100644
--- a/js/reducers/selection/actions.js
+++ b/js/reducers/selection/actions.js
@@ -610,3 +610,10 @@ export const setScrollFiredForLHS = isFired => {
     isFired: isFired
   };
 };
+
+export const setTargetToEdit = target => {
+  return {
+    type: constants.SET_TARGET_TO_EDIT,
+    target: target
+  };
+};
diff --git a/js/reducers/selection/constants.js b/js/reducers/selection/constants.js
index ed4721508..7255753a6 100644
--- a/js/reducers/selection/constants.js
+++ b/js/reducers/selection/constants.js
@@ -103,7 +103,8 @@ export const constants = {
   SET_SELECT_VISIBLE_POSES: prefix + 'SET_SELECT_VISIBLE_POSES',
   SET_UNSELECT_VISIBLE_POSES: prefix + 'SET_UNSELECT_VISIBLE_POSES',
 
-  SET_OBSERVATION_DIALOG_ACTION: prefix + 'SET_OBSERVATION_DIALOG_ACTION'
+  SET_OBSERVATION_DIALOG_ACTION: prefix + 'SET_OBSERVATION_DIALOG_ACTION',
+  SET_TARGET_TO_EDIT: prefix + 'SET_TARGET_TO_EDIT'
 };
 
 export const PREDEFINED_FILTERS = {
diff --git a/js/reducers/selection/selectionReducers.js b/js/reducers/selection/selectionReducers.js
index 9ad228dfa..2b17daaa1 100644
--- a/js/reducers/selection/selectionReducers.js
+++ b/js/reducers/selection/selectionReducers.js
@@ -55,7 +55,8 @@ export const INITIAL_STATE = {
 
   areLSHCompoundsInitialized: false,
   toastMessages: [],
-  isScrollFiredForLHS: false
+  isScrollFiredForLHS: false,
+  targetToEdit: null
 };
 
 export function selectionReducers(state = INITIAL_STATE, action = {}) {
@@ -68,6 +69,9 @@ export function selectionReducers(state = INITIAL_STATE, action = {}) {
         to_buy_list: action.to_buy_list
       });
 
+    case constants.SET_TARGET_TO_EDIT:
+      return { ...state, targetToEdit: { ...action.target } };
+
     case constants.APPEND_TO_BUY_LIST:
       const current_to_buy_list = state.to_buy_list.slice();
       let exists = false;
diff --git a/legacy/legacy_targets.json b/legacy/legacy_targets.json
index 1adf1a4d9..7f77a202c 100644
--- a/legacy/legacy_targets.json
+++ b/legacy/legacy_targets.json
@@ -1,921 +1,869 @@
 {
-    "count": 50,
-    "next": null,
-    "previous": null,
-    "results": [
-        {
-            "id": 54,
-            "title": "EPB41L3A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/EPB41L3A-x0306_1_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_NJuLr98.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/EPB41L3A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "KSMQCKVILLDGSEYTCDVEKRSRGQVLFDKVCEHLNLLEKDYFGLTYRDAENQKNWLDPAKEIKKQVRSGAWHFSFNVKFYPPDPAQLSEDITRYYLCLQLRDDIVSGRLPCSFVTLALLGSYTVQSELGDYDPDECGSDYISEFRFAPNHTKELEDKVIELHKSHRGMTPAEAEMHFLENAKKLSMYGVDLHHAKDSEGVEIMLGVCASGLLIYRDRLRINRFAWPKVLKISYKRNNFYIKIRPGEFEQFESTIGFKLPNHRAAKRLWKVCVEHHTFFRLL"
-                }
-            ]
-        },
-        {
-            "id": 35,
-            "title": "HAO1A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/HAO1A-x0208_1_apo_MQrMrik.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/HAO1A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "CINDYEQHAKSVLPKSIYDYYRSGANDEETLADNIAAFSRWKLYPRMLRNVAETDLSTSVLGQRVSMPICVGATAMQRMAHVDGELATVRACQSLGTGMMLSSWATSSIEEVAEAGPEALRWLQLYIYKDREVTKKLVRQAEKMGYKAIFVTVDTPYLGNRLDDVRNRFXXXXXXXXXXXXXXXXXXXXXXXXXXXXXLAAYVAKAIDPSISWEDIKWLRRLTSLPIVAKGILRGDDAREAVKHGLNGILVSNHGARQLDGVPATIDVLPEIVEAVEGKVEVFLDGGVRKGTDVLKALALGAKAVFVGRPIVWGLAFQGEKGVQDVLEILKEEFRLAMALSGCQNVKVIDKTLVRK"
-                }
-            ]
-        },
-        {
-            "id": 39,
-            "title": "NUDT4",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NUDT4A-x0159_apo_Z09M2Hp.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT4.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "RTYDREGFKKRAACLCFRSEQEDEVLLVSSSRYPDQWIVPGGGMEPEEEPGGAAVREVYEEAGVKGKLGRLLGIFENQDRKHRTYVYVLTVTEILEDWXXXXXXXXKREWFKVEDAIKVLQCHKPVHAEYLEKLKLG"
-                }
-            ]
-        },
-        {
-            "id": 47,
-            "title": "STAG1A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/STAG1A-x0237_1_apo_T6h9LGK.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/STAG1A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "SPNGNLIRMLVLFFLESELHEHAAYLVDSLWESSQELLKDWECMTELLLEEPVXXXEAMSDRQESALIELMVCTIRQAAEAHPPVGRGTXXXVLTAKERKTQIDDRNKLTEHFIITLPMLLSKYSADAEKVANLLQIPQYFDLEIYSTGRMEKHLDALLKQIKFVVEKHVESDVLEACSKTYSILCSEEYTIQNRVDIARSQLIDEFVDRFNHSVEDLLQEXXXADDDDIYNVLSTLKRLTSFHNAHDLTKWDLFGNCYRLLKTGIEHGAMPEQIVVQALQCSHYSILWQLVKITDGSPSKEDLLVLRKTVKSFLAVCQQCLSNVNTPVKEQAFMLLCDLLMIFSHQLMTGGREGLQPLVFNPDTGLQSELLSFVMDHVFIDQXXXXXXXXXXXXXXANKIEALHKRRNLLAAFSKLIIYDIVDMHAAADIFKHYMKYYNDYGDIIKETLSKT"
-                }
-            ]
-        },
-        {
-            "id": 12,
-            "title": "MURD",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/MURD-x0349_apo_0Z35oUA.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/MURD.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "TTFENKKVLVLGLARSGEAAARLLAKLGAIVTVNDGKPFDENPTAQSLLEEGIKVVCGSHPLELLDEDFCYMIKNPGIPYNNPMVKKALEKQIPVLTEVELAYLVSESQLIGITGSNGKTTTTTMIAEVLNAGGQRGLLAGNIGFPASEVVQAANDKDTLVMELSSFQLMGVKEFRPHIAVITNLMPTHLDYHGSFEDYVAAKWNIQNQMSSSDFLVLNFNQGISKELAKTTKATIVPFSTTEKVDGAYVQDKQLFYKGENIMSVDDIGVPGSHNVENALATIAVAKLAGISNQVIRETLSNFGGVKHRLQSLGKVHGISFYNDSKSTNILATQKALSGFDNTKVILIAGGLDRGNEFDELIPDITGLKHMVVLGESASRVKRAAQKAGVTYSDALDVRDAVHKAYEVAQQGDVILLSPANASWDMYKNFEVRGDEFIDTFESLRGE"
-                }
-            ]
-        },
-        {
-            "id": 76,
-            "title": "NSP16",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NSP16-x0225_0A_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_pJ6Vecm.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NSP16.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "SSQAWQPGVAMPNLYKMQRMLLEKCDLQNYGDSATLPKGIMMNVAKYTQLCQYLNTLTLAVPYNMRVIHFGAGSDKGVAPGTAVLRQWLPTGTLLVDSDLNDFVSDADSTLIGDCATVHTANKWDLIISDMYDPKTKNVTKENDSKEGFFTYICGFIQQKLALGGSVAIKITEHSWNADLYKLMGHFAWWTAFVTNVNASSSEAFLIGCNYLGKPREQIDGYVMHANYIFWRNTNPIQLSSYSLFDMSKFPLKLRGTAVMSLKEGQINDMILSLLSKGRLIIRENNRVVISSDVLVNN"
-                }
-            ]
-        },
-        {
-            "id": 71,
-            "title": "PGN_RS02895PGA",
-            "project_id": [
-                28,
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/PGN_RS02895PGA-x0115_0A_apo_VS73XWZ.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_AERfX6c.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/PGN_RS02895PGA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "EGMWLMQQLGRKYAQMKERGLKMKEYDLYNPNGTSLKDAVVLFDGGCTGEVVSDRGLVLTNHHCGYDMIQAHSTLEHNYLENGFWAMREADELPNKDISVVFIDKIEDVTDYVKKELKAIKDPNSMDYLSPKYLQKLADKKAGKNFSAKNPGLSVEIKAFYGGNLYLMFTKKTYTDVRLVGAPPSSIGKFGADTDNWIWPRHTGDFSIFRIYADKNGNPAPYSEDNVPLKPKRFFNISLGGVQENDYAMIMGFPGTTHRYFTASEVDEWKSIDNDIRIRMRDIRQGVMLREMLADPQIKIMYSAKYAASQNAYKRAIGANWAIKTRGLRQNKQAMQDRLIAWGAKQGTPRYEEAVHEIDATVAKRADLRRRYWMIEEGIIRGIEFARSPIPTEDETKALQXXXASARKEAIDKIRTRYSKFANKDYSAEVDKKVAVAMLTEYLKEIPYENLPLHLRLVKDRFAGDVQAYVDDIFARSVFGSEAQFDAFAAVPSVEKLAEDPMVLFASSVFDEYRKLYNELRPYDDPILRAQRTYIAGLLEMDGDQDQFPDANLTLRFTYGQVKGYSPRDNVYYGHQTTLDGVMEKEDPDNWEFVVDPKLKAVYERKDFGRYADRSGRMPVAFCATTHTTGGNSGSPVMNANGELIGLNFDRNWEGVGGDIQYLADYQRSIIVDIRYVLLVIDKVGGCQRLLDEMNIVP"
-                }
-            ]
-        },
-        {
-            "id": 69,
-            "title": "NSP15_B",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NSP15_B-x0422_1B_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NSP15_B.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": ""
-                }
-            ]
-        },
-        {
-            "id": 66,
-            "title": "nsp13",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/DLS-NSP13-DF001_lA0YgdU.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_k63WfMS.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/nsp13.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": ""
-                }
-            ]
-        },
-        {
-            "id": 8,
-            "title": "FAM83BA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/FAM83BA-x0131_1_apo_G2blbbF.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/FAM83BA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "THIDLLFHPPRAHLLTIKETIRKMIKEARKVIALVMDIFTDVDIFKEIVEASTRGVSVYILLDESNFNHFLNMTEKQGCSVQRLRNIRVRTVKGQDYLSKTGAKFHGKMEQKFLLVDCQKVMYGSYSYMWSFEKAHLSMVQIITGQLVESFDEEFRTLYARSCVPSSF"
-                }
-            ]
-        },
-        {
-            "id": 53,
-            "title": "ALAS2A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "NOT AVAILABLE",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/ALAS2A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "",
-                    "sequence": ""
-                }
-            ]
-        },
-        {
-            "id": 84,
-            "title": "NCS1",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NCS1-x0086_0B_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_b3SOfhY.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NCS1.zip",
-            "upload_status": "SUCCESS",
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "LKPEVVEELTRKTYFTEKEVQQWYKGFIKDCPSGQLDAAGFQKIYKQFFPFGDPTKFATFVFNVFDENKDGRIEFSEFIQALSVTSRGTLDEKLRWAFKLYDLDNDGYITRNEMLDIVDAIYQMVGNTVELPEEENTPEKRVDRIFAMMDKNADGKLTLQEFQEGSKADPSIVQALSLYDGL"
-                }
-            ]
-        },
-        {
-            "id": 37,
-            "title": "MUREECA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/MUREECA-x0114_1_apo_SbbuYzF.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/MUREECA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": ""
-                },
-                {
-                    "chain": "F",
-                    "sequence": "NLRDLLAPWVPDAPSRALREMTLDSRVAAAGDLFVAVVGHQADGRRYIPQAIAQGVAAIIAEAKDEATDGEIREMHGVPVIYLSQLNERLSALAGRFYHEPSDNLRLVGVTGTNGKTTTTQLLAQWSQLLGEISAVMGTVGNGLLGKVIPXXXXXXSAVDVQHELAGLVDQGATFCAMEVSSHGLVQHRVAALKFAASVFTNLSXXXXXXXXXMEHYEAAKWLLYSEHHCGQAIINADDEVGRRWLAKLPDAVAVSMEDHINPNCHGRWLKATEVNYHDSGATIRFSSSWGDGEIESHLMGAFNVSNLLLALATLLALGYPLADLLKTAARLQPVCGRMEVFTAPGKPTVVVDYAHTPDALEKALQAARLHCAGKLWCVFGCGGDRDKGKRPLMGAIAEEFADVAVVTDDNPRTEEPRAIINDILAGMLDAGHAKVMEGRAEAVTCAVMQAKENDVVLVAGKGHEDYQIVGNQRLDYSDRVTVARLLGVIA"
-                }
-            ]
-        },
-        {
-            "id": 29,
-            "title": "ATAD2A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/ATAD2A-x1803_1_apo_D4wOsMM.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/ATAD2A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MQEEDTFRELRIFLRNVTHRLAIDKRFRVFTKPVDPDEVPDYRTVIKEPMDLSSVISKIDLHKYLTVKDYLRDIDLICSNALEYNPDRDPGDRLIRHRACALRDTAYAIIKEELDEDFEQLCEEIQESR"
-                }
-            ]
-        },
-        {
-            "id": 85,
-            "title": "A71EV2A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/A71EV2A-x0211_1A_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_QKR8bbd.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/A71EV2A.zip",
-            "upload_status": "SUCCESS",
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "GAIYVGNYRVVNRHLATHNDWANLVWEDSSRDLLVSSTTAQGCDTIARCDCQTGVYYCSSRRKHYPVSFSKPSLIFVEASEYYPARYQSHLMLAVGHSEPGDCGGILRCQHGVVGIVSTGGNGLVGFADVRDLLWLDEE"
-                }
-            ]
-        },
-        {
-            "id": 22,
-            "title": "SMTGR",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/smTGR-x2053_apo_zrHDWbw.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/SMTGR.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "TSQWLRKTVDSAAVILFSKTTCPYCKKVKDVLAEAKIKHATIELDQLSNGSAIQKCLASFSKIETVPQMFVRGKFIGDSQTVLKYYSNDELAGIVNESKYDYDLIVIGGGSGGLAAGKEAAKYGAKTAVLDYVEPTPIGTTWGLGGTCVNVGCIPKKLMHQAGLLSHALEDAEHFGWSLDRSKISHNWSTMVEGVQSHIGSLNWGYKVALRDNQVTYLNAKGRLISPHEVQITDKNQKVSTITGNKIILATGERPKYPEIPGAVEYGITSDDLFSLPYFPGKTLVIGASYVALECAGFLASLGGDVTVMVRSILLRGFDQQMAEKVGDYMENHGVKFAKLCVPDEIKQLKVVDTENNKPGLLLVKGHYTDGKKFEEEFETVIFAVGREPQLSKVLCETVGVKLDKNGRVVCTDDEQTTVSNVYAIGDINAGKPQLTPVAIQAGRYLARRLFAGATELTDYSNVATTVFTPLEYGACGLSEEDAIEKYGDKDIEVYHSNFKPLEWTVAHREDNVCYMKLVCRKSDNMRVLGLHVLGPNAGEITQGYAVAIKMGATKADFDRTIGIHPTCSETFTTLHVTKKSGVSPIV"
-                }
-            ]
-        },
-        {
-            "id": 50,
-            "title": "VIM2",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/VIM2-MB-105_1_apo_SBlf6ub.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/VIM2.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "YPTVSEIPVGEVRLYQIADGVWSHIATQSFDGAVYPSNGLIVRDGDELLLIDTAWGAKNTAALLAEIEKQIGLPVTRAVSTHFHDDRVGGVDVLRAAGVATYASPSTRRLAEVEGNEIPTHSLEGLSSSGDAVRFGPVELFYPGAAHSTDNLVVYVPSASVLYGGCAIYELSRTSAGNVADADLAEWPTSIERIQQHYPEAQFVIPGHGLPGGLDLLKHTTNVVKAHTNRS"
-                }
-            ]
-        },
-        {
-            "id": 17,
-            "title": "OXA10OTA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/OXA10OTA-x0038_1_apo_b0APxOF.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/OXA10OTA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "GSITENTSWNKEFSAEAVNGVFVLCKSSSKSCATNDLARASKEYLPASTFKIPNAIIGLETGVIKNEHQVFKWDGKPRAMKQWERDLTLRGAIQVSAVPVFQQIAREVGEVRMQKYLKKFSYGNQNISGGIDKFWLEGQLRISAVNQVEFLESLYLNKLSASKENQLIVKEALVTEAAPEYLVHSKTGFSGVGTESNPGVAWWVGWVEKETEVYFFAFNMDIDNESKLPLRKSIPTKIMESEGII"
-                }
-            ]
-        },
-        {
-            "id": 74,
-            "title": "Nprot",
-            "project_id": [
-                31,
-                32
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/Nprot-x0616_0A_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_x0jksDv.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/Nprot.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "SAAEASKKPRQKRTATKAYNVTQAFGRRGPEQTQGNFGDQELIRQGTDYKHWPQIAQFAPSASAFFGMSRIGMEVTPSGTWLTYTGAIKLDDKDPNFKDQVILLNKHIDAYKTFP"
-                }
-            ]
-        },
-        {
-            "id": 28,
-            "title": "ACVR1A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/x1344_0B.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_N8VXsqR.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/ACVR1A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": ""
-                }
-            ]
-        },
-        {
-            "id": 18,
-            "title": "PARP14A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/PARP14A-x0202_1_apo_lxT66gw.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/PARP14A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "FYGTVSSPDSGVYEMKIGSIIFQVASGDITKEEADVIVNSTSNSFNLKAGVSKAILECAGQNVERECSQQAQQRKNDYIITGGGFLRCKNIIHVIGGNDVKSSVSSVLQECEKKNYSSICLPAIGTGNAKQHPDKVAEAIIDAIEDFVQKGSAQSVKKVKVVIFLPQVLDVFYANMKKREG"
-                }
-            ]
-        },
-        {
-            "id": 41,
-            "title": "NUDT7A_CRUDE",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NUDT7A_Crude-x0005_1_apo_by2s3Tn.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT7A_CRUDE.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MLDDAKARLRKYDIGGKYSHLPYNKYSVLLPLVAKEGKLHLLFTVRSEKLRRAPGEVCFPGGKRDPTDMDDAATALREAQEEVGLRPHQVEVVCCLVPCLIDTDTLITPFVGLIDHNFQAQPNPAEVKDVFLVPLAYFLHPQVHDQXXXXXXXXXXXNHIFEYTNPEDGVTYQIKGMTANLAVLVAFIILEKKPT"
-                }
-            ]
-        },
-        {
-            "id": 51,
-            "title": "XX02KALRNA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/XX02KALRNA-x1376_1_apo_9VSCvR8.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/XX02KALRNA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MQAIKCVVVGDGAVGKTCLLISYTTNAFPGEYIPTVFDNYSANVMVDGKPVNLGLWDTAGQEDYDRLRPLSYPQTDVFLICFSLVSPASFENVRAKWYPEVRHHCPNTPIILVGTKLDLRDDKDTIEKLKEKKLTPITYPQGLAMAKEIGAVKYLECSALTQRGLKTVFDEAIRAVL"
-                }
-            ]
-        },
-        {
-            "id": 30,
-            "title": "CAMK1DA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/CAMK1DA-x0049_1_apo_Xd3Xer3.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/CAMK1DA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "KKQAEDIKKIFEFKETLGTGAXXEVVLAEEKATGKLFAVKCIPKKALXXXESSIENEIAVLRKIKHENIVALEDIYESPNHLYLVMQLVSGGELFDRIVEKGFYTEKDASTLIRQVLDAVYYLHRMGIVHRDLKPENLLYYSQDEESKIMISDFGXXXXXXXXXXXXXXXXXXGYVAPEVLAQKPYSKAVDCWSIGVIAYILLCGYPPFYXXXXXKLFEQILKAEYEFDSPYWDDISDSAKDFIRNLMEKDPNKRYTCEQAARHPWIAGDTALNKNIHESVSAQIRKNFA"
-                }
-            ]
-        },
-        {
-            "id": 4,
-            "title": "ATAD",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/ATAD2A-x1712_1_apo_QcCBCZx.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/ATAD.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MQEEDTFRELRIFLRNVTHRLAIDKRFRVFTKPVDPDEVPDYRTVIKEPMDLSSVISKIDLHKYLTVKDYLRDIDLICSNALEYNPDRDPGDRLIRHRACALRDTAYAIIKEELDEDFEQLCEEIQESR"
-                }
-            ]
-        },
-        {
-            "id": 7,
-            "title": "DCP2B",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/DCP2B-x0020_1_apo_5td9srg.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/DCP2B.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "VPTYGAIILDETLENVLLVQGYLAKSGWGFPKGKVNKEEAPHDCAAREVFEETGFDIKDYICKDDYIELRINDQLARLYIIPGIPKDTKFNPKTRREIRNIEWFSIEKLPCHRNDMTPKSKLGLAPNKFFMAIPFIRPLRDWLSRRFG"
-                }
-            ]
-        },
-        {
-            "id": 5,
-            "title": "BRD1A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/BRD1A-x0900_1_apo_X36iTCu.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/BRD1A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MEQVAMELRLTELTRLLRSVLDQLQDKDPARIFAQPVSLKEVPDYLDHIKHPMDFATMRKRLEAQGYKNLHEFEEDFDLIIDNCMKYNARDTVFYRAAVRLRDQGGVVLRQARREVDSIG"
-                }
-            ]
-        },
-        {
-            "id": 79,
-            "title": "SOS3ATA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/SOS3ATA-x1131_0A_apo_qmxlTzH.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_cWLOzfW.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/SOS3ATA.zip",
-            "upload_status": "SUCCESS",
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "RPPGYEDPELLASVTPFTVEEVEALYELFKKLSSSIIDDGLIHKEEFQLALFRNRTRRNLFADRIFDVFDVKRNGVIEFGEFVRSLGVFHPSAPVHEKVKFAFKLYDLRQTGFIEREELKEMVVALLHESELVLSEDMIEVMVDKAFVQADRKNDGKIDIDEWKDFVSLNPSLIKNMTLPYLKDINRTFPSF"
-                }
-            ]
-        },
-        {
-            "id": 61,
-            "title": "mArh",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/mArh-x0685_0A_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_7AuLXgA.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/mArh.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "FSGYLKLTDNVYIKNADIVEEAKKVKPTVVVNAANVYLKHGGGVAGALNKATNNAMQVESDDYIATNGPLKVGGSCVLSGHNLAKHCLHVVGPNVNKGEDIQLLKSAYENFNQHEVLLAPLLSAGIFGADPIHSLRVCVDTVRTNVYLAVFDKNLYDKLVSSFL"
-                }
-            ]
-        },
-        {
-            "id": 48,
-            "title": "TBXTA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/TBXTA-x0024_1_apo_kFHAPSk.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/TBXTA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "LRVGLEESELWLRFKELTNEMIVTKNGRRMFPVLKVNVSGLDPNAMYSFLLDFVAADNHRWKYVNGEWVPGGKPEPQAPSCVYIHPDSPNFGAHWMKAPVSFSKVKLTNKLNGGGQIMLNSLHKYEPRIHIVRVGGPQRMITSHCFPETQFIAVTAYQNEEITALKIKYN"
-                }
-            ]
-        },
-        {
-            "id": 2,
-            "title": "NUDT7A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NUDT7A-x0140_1_apo_hYaNUGN.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT7A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MLDDAKARLRKYDIGGKYSHLPYNKYSVLLPLVAKEGKLHLLFTVRSEKLRRAPGEVCFPGGKRDPTDMDDAATALREAQEEVGLRPHQVEVVCCLVPCLIDTDTLITPFVGLIDHNFQAQPNPAEVKDVFLVPLAYFLHPQVHDQXXXXXXXXXXXNHIFEYTNPEDGVTYQIKGMTANLAVLVAFIILEKKPT"
-                }
-            ]
-        },
-        {
-            "id": 81,
-            "title": "D68EV3CPROA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/D68EV3CPROA_apo%2367aac56ae9a24ca58937210d994fc0b9.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_PUiOif6.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/D68EV3CPROA.zip",
-            "upload_status": "SUCCESS",
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "GPGFDFAQAIMKKNTVIARTEKGEFTMLGVYDRVAVIPTHASVGEIIYINDVETRVLDACALRDLTDTNLEITIVKLDRNQKFRDIRHFLPRCEDDYNDAVLSVHTSKFPNMYIPVGQVTNYGFLNLGGTPTHRILMYNFPTRAGQCGGVVTTTGKVIGIHVGGNGAQGFAAMLLHSYFTD"
-                }
-            ]
-        },
-        {
-            "id": 75,
-            "title": "macro-combi",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/Combi88%231e8abaf47c26416db806a9c18bede8f9.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_LnpGBB8.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/macro-combi.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "FSGYLKLTDNVYIKNADIVEEAKKVKPTVVVNAANVYLKHGGGVAGALNKATNNAMQVESDDYIATNGPLKVGGSCVLSGHNLAKHCLHVVGPNVNKGEDIQLLKSAYENFNQHEVLLAPLLSAGIFGADPIHSLRVCVDTVRTNVYLAVFDKNLYDKLVSSF"
-                }
-            ]
-        },
-        {
-            "id": 32,
-            "title": "FALZA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/FALZA-x0079_1_apo_pDzqSU5.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/FALZA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "DAMTVLTPLTEKDYEGLKRVLRSLQAHKMAWPFLEPVDPNDAPDYYGVIKEPMDLATMEERVQRRYYEKLTEFVADMTKIFDNCRYYNPSDSPFYQCAEVLESFFVQKLKGFKASRSH"
-                }
-            ]
-        },
-        {
-            "id": 77,
-            "title": "NSP14",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NSP14-x1172_0D_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_4FbSHal.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NSP14.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": ""
-                }
-            ]
-        },
-        {
-            "id": 72,
-            "title": "CD44MMA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/CD44MMA-x0017_0A_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_toYkuCZ.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/CD44MMA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "QIDLNVTCRYAGVFHVEKNGRYSISRTEAADLCQAFNSTLPTMDQMKLALSKGFETCRYGFIEGNVVIPRIHPNAICAANHTGVYILVTSNTSHYDTYCFNASAPPEEDCTSVTDLPNSFDGPVTITIVNRDGTRYSKKGEYRTHQEDI"
-                }
-            ]
-        },
-        {
-            "id": 52,
-            "title": "TNCA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/TNCA-x0062_1_apo_Vc9bxy2.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/TNCA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MFPKDCSQAMLNGDTTSGLYTIYLNGDKAQALEVFCDMTSDGGGWIVFLRRKNGRENFYQNWKAYAAGFGDRREEFWLGLDNLNKITAQGQYELRVDLRDHGETAFAVYDKFSVGDAKTRYKLKVEGYSGTAGDSMAYHNGRSFSTFDKXXXXXXXXCALSYKGAFWYRNCHRVNLMGRYGDNNHSQGVNWFHWKGHEHSIQFAEMKLRPSNFRNL"
-                }
-            ]
-        },
-        {
-            "id": 46,
-            "title": "smTGRNEW",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/smTGR-x20531_apo_ddCGiaP.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/smTGRNEW.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "TSQWLRKTVDSAAVILFSKTTCPYCKKVKDVLAEAKIKHATIELDQLSNGSAIQKCLASFSKIETVPQMFVRGKFIGDSQTVLKYYSNDELAGIVNESKYDYDLIVIGGGSGGLAAGKEAAKYGAKTAVLDYVEPTPIGTTWGLGGTCVNVGCIPKKLMHQAGLLSHALEDAEHFGWSLDRSKISHNWSTMVEGVQSHIGSLNWGYKVALRDNQVTYLNAKGRLISPHEVQITDKNQKVSTITGNKIILATGERPKYPEIPGAVEYGITSDDLFSLPYFPGKTLVIGASYVALECAGFLASLGGDVTVMVRSILLRGFDQQMAEKVGDYMENHGVKFAKLCVPDEIKQLKVVDTENNKPGLLLVKGHYTDGKKFEEEFETVIFAVGREPQLSKVLCETVGVKLDKNGRVVCTDDEQTTVSNVYAIGDINAGKPQLTPVAIQAGRYLARRLFAGATELTDYSNVATTVFTPLEYGACGLSEEDAIEKYGDKDIEVYHSNFKPLEWTVAHREDNVCYMKLVCRKSDNMRVLGLHVLGPNAGEITQGYAVAIKMGATKADFDRTIGIHPTCSETFTTLHVTKKSGVSPIV"
-                }
-            ]
-        },
-        {
-            "id": 20,
-            "title": "PTP1B",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/PTP1B-y0049_apo_N9naW4T.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/PTP1B.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MEMEKEFEQIDKSGSWAAIYQDIRHEASDFPSRVAKLPKNKNRNRYRDVSPFDHSRIKLHQEDNDYINASLIKMEEAQRSYILTQGPLPNTVGHFWEMVWEQKSRGVVMLNRVMEKGSLKCAQYWPQKEEKEMIFEDTNLKLTLISEDIKSYYTVRQLELENLTTQETREILHFHYTTWPDFGVPESPASFLNFLFKVRESGSLSPEHGPVVVHCSAGIGRSGTFCLADTCLLLMDKRKDPSSVDIKKVLLEMRKFRMGLIQTADQLRFSYLAVIEGAKFI"
-                }
-            ]
-        },
-        {
-            "id": 15,
-            "title": "NUDT4A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NUDT4A-x0159_1_apo_MptlW5D.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT4A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "RTYDREGFKKRAACLCFRSEQEDEVLLVSSSRYPDQWIVPGGGMEPEEEPGGAAVREVYEEAGVKGKLGRLLGIFENQDRKHRTYVYVLTVTEILEDWXXXXXXXXKREWFKVEDAIKVLQCHKPVHAEYLEKLKLG"
-                }
-            ]
-        },
-        {
-            "id": 68,
-            "title": "Mpro",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/Mpro-x12171_0A_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_iEWD64x.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/Mpro.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "SGFRKMAFPSGKVEGCMVQVTCGTTTLNGLWLDDVVYCPRHVICTSEDMLNPNYEDLLIRKSNHNFLVQAGNVQLRVIGHSMQNCVLKLKVDTANPKTPKYKFVRIQPGQTFSVLACYNGSPSGVYQCAMRPNFTIKGSFLNGSCGSVGFNIDYDCVSFCYMHHMELPTGVHAGTDLEGNFYGPFVDRQTAQAAGTDTTITVNVLAWLYAAVINGDRWFLNRFTTTLNDFNLVAMKYNYEPLTQDHVDILGPLSAQTGIAVLDMCASLKELLQNGMNGRTILGSALLEDEFTPFDVVRQCSGVT"
-                }
-            ]
-        },
-        {
-            "id": 78,
-            "title": "MID2A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/MID2A-x0041_0B_apo_shjr9wY.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_e9G010l.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/MID2A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MNSQPFKLDPKMTHKKLKISNDGLQMEKDXXXXXXXXXXXXXXXXXCYGAAGNIFIDSGCHYWEVVMGSSTWYAIGIAYKSAPKNEWIGKNASSWVFSRCNSNFVVRHNNKEMLVDVPPHLKRLGVLLDYDNNMLSFYDPANSLHLHTFDVTFILPVCPTFTIWNKSLMILSGLPAPDFI"
-                }
-            ]
-        },
-        {
-            "id": 70,
-            "title": "MUREECOLI",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/MUREECOLI-7B61_0B_apo_QRs2Wwd.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_GdyxtUF.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/MUREECOLI.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": ""
-                }
-            ]
-        },
-        {
-            "id": 38,
-            "title": "NUDT21A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NUDT21A-x0159_1_apo_VSKfMPI.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT21A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MLERTINLYPLTNYTFGTKEPLYEKDSSVAARFQRMREEFDKIGMRRTVEGVLIVHEHRLPHVLLLQLGTTFFKLPGGELNPGEDEVEGLKRLMTEILGRQDGVLDNWVIDDCIGNWWRPNFEPPQYPYIPAHITKPKEHKKLFLVQLQEKALFAVPKNYKLVAAPLFELYDNAPGYGPIISSLPQLLSRFNFIYN"
-                }
-            ]
-        },
-        {
-            "id": 67,
-            "title": "Mac1",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/Mac1-J1042_0A_apo_iFo4f34.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_l7fs8GS.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/Mac1.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "FSGYLKLTDNVYIKNADIVEEAKKVKPTVVVNAANVYLKHGGGVAGALNKATNNAMQVESDDYIATNGPLKVGGSCVLSGHNLAKHCLHVVGPNVNKGEDIQLLKSAYENFNQHEVLLAPLLSAGIFGADPIHSLRVCVDTVRTNVYLAVFDKNLYDKLVSSFL"
-                }
-            ]
-        },
-        {
-            "id": 31,
-            "title": "DCLRE1AA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/DCLRE1AA-x0128_1_apo_SgxAg9F.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/DCLRE1AA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "CPFYKKIPGTGFTVDAFQYGVVEGCTAYFLTHFHSDHYAGLSKHFTFPVYCSEITGNLLKNKLHVQEQYIHPLPLDTECIVNGVKVVLLDANHCPGAVMILFYLPNGTVILHTGDFRADPSMERSLLADQKVHMLYLDTTYCSPEYTFPSQQEVIRFAINTAFEAVTLNPHALVVCGTYSIGKEKVFLAIADVLGSKVGMSQEKYKTLQCLNIPEINSLITTDMCSSLVHLLPMMQINFKGLQSHLKKCGGKYNQILAFRPTGWTHSNKFTRIADVIPQTKGNISIYGIPYSEHSSYLEMKRFVQWLKPQKIIPTVNVGTWKSRSTMEKYFREWKLEAGY"
-                }
-            ]
-        },
-        {
-            "id": 82,
-            "title": "XX01ZVNS2B",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/XX01ZVNS2B-x0945_0B_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_vB4bHbx.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/XX01ZVNS2B.zip",
-            "upload_status": "SUCCESS",
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "MYIERAGDITWEKDAEVTGNSPRLDVALDESGDFSLVE"
-                }
-            ]
-        },
-        {
-            "id": 65,
-            "title": "INPP5DA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/INPP5DA-x0058_2_apo.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_MR1dz1c.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/INPP5DA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "PEPDMITIFIGTWNMGNAPPPKKITSWFLSKGQGKTRDDSADYIPHDIYVIGTQEDPLSEKEWLEILKHSLQEITSVTFKTVAIHTLWNIRIVVLAKPEHENRISHICTDNVKTGIANTLGNKGAVGVSFMFNGTSLGFVNSHLTSGSEKKLRRNQNYMNILRFLALGDKKLSPFNITHRFTHLFWFGDLNYRVDLPTWEAETIIQKIKQQQYADLLSHDQLLTERREQKVFLHFEEEEITFAPTYRFERLTRDKYAYTKQKATGMKYNLPSWCDRVLWKSYPLVHVVCQSYGSTSDIMTSDHSPVFATFEAGVTSQFVSKNGPGTVDSQGQIEFLRCYATLKTKSQTKFYLEFHSSCLESFVKSQEGENEEGSEGELVVKFGETLPKLKPIISDPEYLLDQHILISIKSSDSDESYGEGCIALRLEATETQLPIYTPLTHHGELTGHFQGEIKLQTSQ"
-                }
-            ]
-        },
-        {
-            "id": 40,
-            "title": "NUDT5A",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/NUDT5A-x0114_1_apo_lZ7GhcD.pdb",
-            "metadata": null,
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT5A.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": "QYIISEELISEGKWVKLEKTTYMDPTGKTRTWESVKRTTRKEQTADGVAVIPVLQRTLHYECIVLVKQFRPPMGGYCIEFPAGLIDDGETPEAAALRELEEETGYKGDIAECSPAVCMDPGLSNCTIHIVTVTINGDDAENARPKPKPGDGEFVEVISLPKNDLLQRLDALVAEEHLTVDARVYSYALALKHA"
-                },
-                {
-                    "chain": "B",
-                    "sequence": "QYIISEELISEGKWVKLEKTTYMDPTGKTRTWESVKRTTRKXXTADGVAVIPVLQRTLHYECIVLVKQFRPPMGGYCIEFPAGLIDDGETPEAAALRELEEETGYKGDIAECSPAVCMDPGLSNCTIHIVTVTINGDDAENARPKPKPGDGEFVEVISLPKNDLLQRLDALVAEEHLTVDARVYSYALALKHAN"
-                },
-                {
-                    "chain": "C",
-                    "sequence": "YIISEELISEGKWVKLEKTTYMDPTGKTRTWESVKRTTRKXXTADGVAVIPVLQRTLHYECIVLVKQFRPPMGGYCIEFPAGLIDDGETPEAAALRELEEETGYKGDIAECSPAVCMDPGLSNCTIHIVTVTINGDDAENARPKPKPGDGEFVEVISLPKNDLLQRLDALVAEEHLTVDARVYSYALALKHA"
-                }
-            ]
-        },
-        {
-            "id": 19,
-            "title": "PHIPA",
-            "project_id": [
-                2
-            ],
-            "default_squonk_project": null,
-            "template_protein": "/media/pdbs/F710-Su-366_bound_zQNtUAa.pdb",
-            "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_CpKV9Zd.csv",
-            "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/PHIPA.zip",
-            "upload_status": null,
-            "sequences": [
-                {
-                    "chain": "A",
-                    "sequence": ""
-                }
-            ]
-        }
-    ]
-}
\ No newline at end of file
+  "count": 50,
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "id": 54,
+      "title": "EPB41L3A",
+      "display_name": "EPB41L3A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/EPB41L3A-x0306_1_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_NJuLr98.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/EPB41L3A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "KSMQCKVILLDGSEYTCDVEKRSRGQVLFDKVCEHLNLLEKDYFGLTYRDAENQKNWLDPAKEIKKQVRSGAWHFSFNVKFYPPDPAQLSEDITRYYLCLQLRDDIVSGRLPCSFVTLALLGSYTVQSELGDYDPDECGSDYISEFRFAPNHTKELEDKVIELHKSHRGMTPAEAEMHFLENAKKLSMYGVDLHHAKDSEGVEIMLGVCASGLLIYRDRLRINRFAWPKVLKISYKRNNFYIKIRPGEFEQFESTIGFKLPNHRAAKRLWKVCVEHHTFFRLL"
+        }
+      ]
+    },
+    {
+      "id": 35,
+      "title": "HAO1A",
+      "display_name": "HAO1A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/HAO1A-x0208_1_apo_MQrMrik.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/HAO1A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "CINDYEQHAKSVLPKSIYDYYRSGANDEETLADNIAAFSRWKLYPRMLRNVAETDLSTSVLGQRVSMPICVGATAMQRMAHVDGELATVRACQSLGTGMMLSSWATSSIEEVAEAGPEALRWLQLYIYKDREVTKKLVRQAEKMGYKAIFVTVDTPYLGNRLDDVRNRFXXXXXXXXXXXXXXXXXXXXXXXXXXXXXLAAYVAKAIDPSISWEDIKWLRRLTSLPIVAKGILRGDDAREAVKHGLNGILVSNHGARQLDGVPATIDVLPEIVEAVEGKVEVFLDGGVRKGTDVLKALALGAKAVFVGRPIVWGLAFQGEKGVQDVLEILKEEFRLAMALSGCQNVKVIDKTLVRK"
+        }
+      ]
+    },
+    {
+      "id": 39,
+      "title": "NUDT4",
+      "display_name": "NUDT4",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NUDT4A-x0159_apo_Z09M2Hp.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT4.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "RTYDREGFKKRAACLCFRSEQEDEVLLVSSSRYPDQWIVPGGGMEPEEEPGGAAVREVYEEAGVKGKLGRLLGIFENQDRKHRTYVYVLTVTEILEDWXXXXXXXXKREWFKVEDAIKVLQCHKPVHAEYLEKLKLG"
+        }
+      ]
+    },
+    {
+      "id": 47,
+      "title": "STAG1A",
+      "display_name": "STAG1A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/STAG1A-x0237_1_apo_T6h9LGK.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/STAG1A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "SPNGNLIRMLVLFFLESELHEHAAYLVDSLWESSQELLKDWECMTELLLEEPVXXXEAMSDRQESALIELMVCTIRQAAEAHPPVGRGTXXXVLTAKERKTQIDDRNKLTEHFIITLPMLLSKYSADAEKVANLLQIPQYFDLEIYSTGRMEKHLDALLKQIKFVVEKHVESDVLEACSKTYSILCSEEYTIQNRVDIARSQLIDEFVDRFNHSVEDLLQEXXXADDDDIYNVLSTLKRLTSFHNAHDLTKWDLFGNCYRLLKTGIEHGAMPEQIVVQALQCSHYSILWQLVKITDGSPSKEDLLVLRKTVKSFLAVCQQCLSNVNTPVKEQAFMLLCDLLMIFSHQLMTGGREGLQPLVFNPDTGLQSELLSFVMDHVFIDQXXXXXXXXXXXXXXANKIEALHKRRNLLAAFSKLIIYDIVDMHAAADIFKHYMKYYNDYGDIIKETLSKT"
+        }
+      ]
+    },
+    {
+      "id": 12,
+      "title": "MURD",
+      "display_name": "MURD",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/MURD-x0349_apo_0Z35oUA.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/MURD.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "TTFENKKVLVLGLARSGEAAARLLAKLGAIVTVNDGKPFDENPTAQSLLEEGIKVVCGSHPLELLDEDFCYMIKNPGIPYNNPMVKKALEKQIPVLTEVELAYLVSESQLIGITGSNGKTTTTTMIAEVLNAGGQRGLLAGNIGFPASEVVQAANDKDTLVMELSSFQLMGVKEFRPHIAVITNLMPTHLDYHGSFEDYVAAKWNIQNQMSSSDFLVLNFNQGISKELAKTTKATIVPFSTTEKVDGAYVQDKQLFYKGENIMSVDDIGVPGSHNVENALATIAVAKLAGISNQVIRETLSNFGGVKHRLQSLGKVHGISFYNDSKSTNILATQKALSGFDNTKVILIAGGLDRGNEFDELIPDITGLKHMVVLGESASRVKRAAQKAGVTYSDALDVRDAVHKAYEVAQQGDVILLSPANASWDMYKNFEVRGDEFIDTFESLRGE"
+        }
+      ]
+    },
+    {
+      "id": 76,
+      "title": "NSP16",
+      "display_name": "NSP16",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NSP16-x0225_0A_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_pJ6Vecm.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NSP16.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "SSQAWQPGVAMPNLYKMQRMLLEKCDLQNYGDSATLPKGIMMNVAKYTQLCQYLNTLTLAVPYNMRVIHFGAGSDKGVAPGTAVLRQWLPTGTLLVDSDLNDFVSDADSTLIGDCATVHTANKWDLIISDMYDPKTKNVTKENDSKEGFFTYICGFIQQKLALGGSVAIKITEHSWNADLYKLMGHFAWWTAFVTNVNASSSEAFLIGCNYLGKPREQIDGYVMHANYIFWRNTNPIQLSSYSLFDMSKFPLKLRGTAVMSLKEGQINDMILSLLSKGRLIIRENNRVVISSDVLVNN"
+        }
+      ]
+    },
+    {
+      "id": 71,
+      "title": "PGN_RS02895PGA",
+      "display_name": "PGN_RS02895PGA",
+      "project_id": [28, 2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/PGN_RS02895PGA-x0115_0A_apo_VS73XWZ.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_AERfX6c.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/PGN_RS02895PGA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "EGMWLMQQLGRKYAQMKERGLKMKEYDLYNPNGTSLKDAVVLFDGGCTGEVVSDRGLVLTNHHCGYDMIQAHSTLEHNYLENGFWAMREADELPNKDISVVFIDKIEDVTDYVKKELKAIKDPNSMDYLSPKYLQKLADKKAGKNFSAKNPGLSVEIKAFYGGNLYLMFTKKTYTDVRLVGAPPSSIGKFGADTDNWIWPRHTGDFSIFRIYADKNGNPAPYSEDNVPLKPKRFFNISLGGVQENDYAMIMGFPGTTHRYFTASEVDEWKSIDNDIRIRMRDIRQGVMLREMLADPQIKIMYSAKYAASQNAYKRAIGANWAIKTRGLRQNKQAMQDRLIAWGAKQGTPRYEEAVHEIDATVAKRADLRRRYWMIEEGIIRGIEFARSPIPTEDETKALQXXXASARKEAIDKIRTRYSKFANKDYSAEVDKKVAVAMLTEYLKEIPYENLPLHLRLVKDRFAGDVQAYVDDIFARSVFGSEAQFDAFAAVPSVEKLAEDPMVLFASSVFDEYRKLYNELRPYDDPILRAQRTYIAGLLEMDGDQDQFPDANLTLRFTYGQVKGYSPRDNVYYGHQTTLDGVMEKEDPDNWEFVVDPKLKAVYERKDFGRYADRSGRMPVAFCATTHTTGGNSGSPVMNANGELIGLNFDRNWEGVGGDIQYLADYQRSIIVDIRYVLLVIDKVGGCQRLLDEMNIVP"
+        }
+      ]
+    },
+    {
+      "id": 69,
+      "title": "NSP15_B",
+      "display_name": "NSP15_B",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NSP15_B-x0422_1B_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NSP15_B.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": ""
+        }
+      ]
+    },
+    {
+      "id": 66,
+      "title": "nsp13",
+      "display_name": "nsp13",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/DLS-NSP13-DF001_lA0YgdU.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_k63WfMS.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/nsp13.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": ""
+        }
+      ]
+    },
+    {
+      "id": 8,
+      "title": "FAM83BA",
+      "display_name": "FAM83BA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/FAM83BA-x0131_1_apo_G2blbbF.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/FAM83BA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "THIDLLFHPPRAHLLTIKETIRKMIKEARKVIALVMDIFTDVDIFKEIVEASTRGVSVYILLDESNFNHFLNMTEKQGCSVQRLRNIRVRTVKGQDYLSKTGAKFHGKMEQKFLLVDCQKVMYGSYSYMWSFEKAHLSMVQIITGQLVESFDEEFRTLYARSCVPSSF"
+        }
+      ]
+    },
+    {
+      "id": 53,
+      "title": "ALAS2A",
+      "display_name": "ALAS2A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "NOT AVAILABLE",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/ALAS2A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "",
+          "sequence": ""
+        }
+      ]
+    },
+    {
+      "id": 84,
+      "title": "NCS1",
+      "display_name": "NCS1",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NCS1-x0086_0B_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_b3SOfhY.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NCS1.zip",
+      "upload_status": "SUCCESS",
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "LKPEVVEELTRKTYFTEKEVQQWYKGFIKDCPSGQLDAAGFQKIYKQFFPFGDPTKFATFVFNVFDENKDGRIEFSEFIQALSVTSRGTLDEKLRWAFKLYDLDNDGYITRNEMLDIVDAIYQMVGNTVELPEEENTPEKRVDRIFAMMDKNADGKLTLQEFQEGSKADPSIVQALSLYDGL"
+        }
+      ]
+    },
+    {
+      "id": 37,
+      "title": "MUREECA",
+      "display_name": "MUREECA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/MUREECA-x0114_1_apo_SbbuYzF.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/MUREECA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": ""
+        },
+        {
+          "chain": "F",
+          "sequence": "NLRDLLAPWVPDAPSRALREMTLDSRVAAAGDLFVAVVGHQADGRRYIPQAIAQGVAAIIAEAKDEATDGEIREMHGVPVIYLSQLNERLSALAGRFYHEPSDNLRLVGVTGTNGKTTTTQLLAQWSQLLGEISAVMGTVGNGLLGKVIPXXXXXXSAVDVQHELAGLVDQGATFCAMEVSSHGLVQHRVAALKFAASVFTNLSXXXXXXXXXMEHYEAAKWLLYSEHHCGQAIINADDEVGRRWLAKLPDAVAVSMEDHINPNCHGRWLKATEVNYHDSGATIRFSSSWGDGEIESHLMGAFNVSNLLLALATLLALGYPLADLLKTAARLQPVCGRMEVFTAPGKPTVVVDYAHTPDALEKALQAARLHCAGKLWCVFGCGGDRDKGKRPLMGAIAEEFADVAVVTDDNPRTEEPRAIINDILAGMLDAGHAKVMEGRAEAVTCAVMQAKENDVVLVAGKGHEDYQIVGNQRLDYSDRVTVARLLGVIA"
+        }
+      ]
+    },
+    {
+      "id": 29,
+      "title": "ATAD2A",
+      "display_name": "ATAD2A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/ATAD2A-x1803_1_apo_D4wOsMM.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/ATAD2A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MQEEDTFRELRIFLRNVTHRLAIDKRFRVFTKPVDPDEVPDYRTVIKEPMDLSSVISKIDLHKYLTVKDYLRDIDLICSNALEYNPDRDPGDRLIRHRACALRDTAYAIIKEELDEDFEQLCEEIQESR"
+        }
+      ]
+    },
+    {
+      "id": 85,
+      "title": "A71EV2A",
+      "display_name": "A71EV2A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/A71EV2A-x0211_1A_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_QKR8bbd.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/A71EV2A.zip",
+      "upload_status": "SUCCESS",
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "GAIYVGNYRVVNRHLATHNDWANLVWEDSSRDLLVSSTTAQGCDTIARCDCQTGVYYCSSRRKHYPVSFSKPSLIFVEASEYYPARYQSHLMLAVGHSEPGDCGGILRCQHGVVGIVSTGGNGLVGFADVRDLLWLDEE"
+        }
+      ]
+    },
+    {
+      "id": 22,
+      "title": "SMTGR",
+      "display_name": "SMTGR",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/smTGR-x2053_apo_zrHDWbw.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/SMTGR.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "TSQWLRKTVDSAAVILFSKTTCPYCKKVKDVLAEAKIKHATIELDQLSNGSAIQKCLASFSKIETVPQMFVRGKFIGDSQTVLKYYSNDELAGIVNESKYDYDLIVIGGGSGGLAAGKEAAKYGAKTAVLDYVEPTPIGTTWGLGGTCVNVGCIPKKLMHQAGLLSHALEDAEHFGWSLDRSKISHNWSTMVEGVQSHIGSLNWGYKVALRDNQVTYLNAKGRLISPHEVQITDKNQKVSTITGNKIILATGERPKYPEIPGAVEYGITSDDLFSLPYFPGKTLVIGASYVALECAGFLASLGGDVTVMVRSILLRGFDQQMAEKVGDYMENHGVKFAKLCVPDEIKQLKVVDTENNKPGLLLVKGHYTDGKKFEEEFETVIFAVGREPQLSKVLCETVGVKLDKNGRVVCTDDEQTTVSNVYAIGDINAGKPQLTPVAIQAGRYLARRLFAGATELTDYSNVATTVFTPLEYGACGLSEEDAIEKYGDKDIEVYHSNFKPLEWTVAHREDNVCYMKLVCRKSDNMRVLGLHVLGPNAGEITQGYAVAIKMGATKADFDRTIGIHPTCSETFTTLHVTKKSGVSPIV"
+        }
+      ]
+    },
+    {
+      "id": 50,
+      "title": "VIM2",
+      "display_name": "VIM2",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/VIM2-MB-105_1_apo_SBlf6ub.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/VIM2.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "YPTVSEIPVGEVRLYQIADGVWSHIATQSFDGAVYPSNGLIVRDGDELLLIDTAWGAKNTAALLAEIEKQIGLPVTRAVSTHFHDDRVGGVDVLRAAGVATYASPSTRRLAEVEGNEIPTHSLEGLSSSGDAVRFGPVELFYPGAAHSTDNLVVYVPSASVLYGGCAIYELSRTSAGNVADADLAEWPTSIERIQQHYPEAQFVIPGHGLPGGLDLLKHTTNVVKAHTNRS"
+        }
+      ]
+    },
+    {
+      "id": 17,
+      "title": "OXA10OTA",
+      "display_name": "OXA10OTA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/OXA10OTA-x0038_1_apo_b0APxOF.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/OXA10OTA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "GSITENTSWNKEFSAEAVNGVFVLCKSSSKSCATNDLARASKEYLPASTFKIPNAIIGLETGVIKNEHQVFKWDGKPRAMKQWERDLTLRGAIQVSAVPVFQQIAREVGEVRMQKYLKKFSYGNQNISGGIDKFWLEGQLRISAVNQVEFLESLYLNKLSASKENQLIVKEALVTEAAPEYLVHSKTGFSGVGTESNPGVAWWVGWVEKETEVYFFAFNMDIDNESKLPLRKSIPTKIMESEGII"
+        }
+      ]
+    },
+    {
+      "id": 74,
+      "title": "Nprot",
+      "display_name": "Nprot",
+      "project_id": [31, 32],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/Nprot-x0616_0A_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_x0jksDv.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/Nprot.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "SAAEASKKPRQKRTATKAYNVTQAFGRRGPEQTQGNFGDQELIRQGTDYKHWPQIAQFAPSASAFFGMSRIGMEVTPSGTWLTYTGAIKLDDKDPNFKDQVILLNKHIDAYKTFP"
+        }
+      ]
+    },
+    {
+      "id": 28,
+      "title": "ACVR1A",
+      "display_name": "ACVR1A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/x1344_0B.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_N8VXsqR.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/ACVR1A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": ""
+        }
+      ]
+    },
+    {
+      "id": 18,
+      "title": "PARP14A",
+      "display_name": "PARP14A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/PARP14A-x0202_1_apo_lxT66gw.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/PARP14A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "FYGTVSSPDSGVYEMKIGSIIFQVASGDITKEEADVIVNSTSNSFNLKAGVSKAILECAGQNVERECSQQAQQRKNDYIITGGGFLRCKNIIHVIGGNDVKSSVSSVLQECEKKNYSSICLPAIGTGNAKQHPDKVAEAIIDAIEDFVQKGSAQSVKKVKVVIFLPQVLDVFYANMKKREG"
+        }
+      ]
+    },
+    {
+      "id": 41,
+      "title": "NUDT7A_CRUDE",
+      "display_name": "NUDT7A_CRUDE",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NUDT7A_Crude-x0005_1_apo_by2s3Tn.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT7A_CRUDE.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MLDDAKARLRKYDIGGKYSHLPYNKYSVLLPLVAKEGKLHLLFTVRSEKLRRAPGEVCFPGGKRDPTDMDDAATALREAQEEVGLRPHQVEVVCCLVPCLIDTDTLITPFVGLIDHNFQAQPNPAEVKDVFLVPLAYFLHPQVHDQXXXXXXXXXXXNHIFEYTNPEDGVTYQIKGMTANLAVLVAFIILEKKPT"
+        }
+      ]
+    },
+    {
+      "id": 51,
+      "title": "XX02KALRNA",
+      "display_name": "XX02KALRNA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/XX02KALRNA-x1376_1_apo_9VSCvR8.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/XX02KALRNA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MQAIKCVVVGDGAVGKTCLLISYTTNAFPGEYIPTVFDNYSANVMVDGKPVNLGLWDTAGQEDYDRLRPLSYPQTDVFLICFSLVSPASFENVRAKWYPEVRHHCPNTPIILVGTKLDLRDDKDTIEKLKEKKLTPITYPQGLAMAKEIGAVKYLECSALTQRGLKTVFDEAIRAVL"
+        }
+      ]
+    },
+    {
+      "id": 30,
+      "title": "CAMK1DA",
+      "display_name": "CAMK1DA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/CAMK1DA-x0049_1_apo_Xd3Xer3.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/CAMK1DA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "KKQAEDIKKIFEFKETLGTGAXXEVVLAEEKATGKLFAVKCIPKKALXXXESSIENEIAVLRKIKHENIVALEDIYESPNHLYLVMQLVSGGELFDRIVEKGFYTEKDASTLIRQVLDAVYYLHRMGIVHRDLKPENLLYYSQDEESKIMISDFGXXXXXXXXXXXXXXXXXXGYVAPEVLAQKPYSKAVDCWSIGVIAYILLCGYPPFYXXXXXKLFEQILKAEYEFDSPYWDDISDSAKDFIRNLMEKDPNKRYTCEQAARHPWIAGDTALNKNIHESVSAQIRKNFA"
+        }
+      ]
+    },
+    {
+      "id": 4,
+      "title": "ATAD",
+      "display_name": "ATAD",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/ATAD2A-x1712_1_apo_QcCBCZx.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/ATAD.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MQEEDTFRELRIFLRNVTHRLAIDKRFRVFTKPVDPDEVPDYRTVIKEPMDLSSVISKIDLHKYLTVKDYLRDIDLICSNALEYNPDRDPGDRLIRHRACALRDTAYAIIKEELDEDFEQLCEEIQESR"
+        }
+      ]
+    },
+    {
+      "id": 7,
+      "title": "DCP2B",
+      "display_name": "DCP2B",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/DCP2B-x0020_1_apo_5td9srg.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/DCP2B.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "VPTYGAIILDETLENVLLVQGYLAKSGWGFPKGKVNKEEAPHDCAAREVFEETGFDIKDYICKDDYIELRINDQLARLYIIPGIPKDTKFNPKTRREIRNIEWFSIEKLPCHRNDMTPKSKLGLAPNKFFMAIPFIRPLRDWLSRRFG"
+        }
+      ]
+    },
+    {
+      "id": 5,
+      "title": "BRD1A",
+      "display_name": "BRD1A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/BRD1A-x0900_1_apo_X36iTCu.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/BRD1A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MEQVAMELRLTELTRLLRSVLDQLQDKDPARIFAQPVSLKEVPDYLDHIKHPMDFATMRKRLEAQGYKNLHEFEEDFDLIIDNCMKYNARDTVFYRAAVRLRDQGGVVLRQARREVDSIG"
+        }
+      ]
+    },
+    {
+      "id": 79,
+      "title": "SOS3ATA",
+      "display_name": "SOS3ATA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/SOS3ATA-x1131_0A_apo_qmxlTzH.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_cWLOzfW.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/SOS3ATA.zip",
+      "upload_status": "SUCCESS",
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "RPPGYEDPELLASVTPFTVEEVEALYELFKKLSSSIIDDGLIHKEEFQLALFRNRTRRNLFADRIFDVFDVKRNGVIEFGEFVRSLGVFHPSAPVHEKVKFAFKLYDLRQTGFIEREELKEMVVALLHESELVLSEDMIEVMVDKAFVQADRKNDGKIDIDEWKDFVSLNPSLIKNMTLPYLKDINRTFPSF"
+        }
+      ]
+    },
+    {
+      "id": 61,
+      "title": "mArh",
+      "display_name": "mArh",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/mArh-x0685_0A_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_7AuLXgA.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/mArh.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "FSGYLKLTDNVYIKNADIVEEAKKVKPTVVVNAANVYLKHGGGVAGALNKATNNAMQVESDDYIATNGPLKVGGSCVLSGHNLAKHCLHVVGPNVNKGEDIQLLKSAYENFNQHEVLLAPLLSAGIFGADPIHSLRVCVDTVRTNVYLAVFDKNLYDKLVSSFL"
+        }
+      ]
+    },
+    {
+      "id": 48,
+      "title": "TBXTA",
+      "display_name": "TBXTA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/TBXTA-x0024_1_apo_kFHAPSk.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/TBXTA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "LRVGLEESELWLRFKELTNEMIVTKNGRRMFPVLKVNVSGLDPNAMYSFLLDFVAADNHRWKYVNGEWVPGGKPEPQAPSCVYIHPDSPNFGAHWMKAPVSFSKVKLTNKLNGGGQIMLNSLHKYEPRIHIVRVGGPQRMITSHCFPETQFIAVTAYQNEEITALKIKYN"
+        }
+      ]
+    },
+    {
+      "id": 2,
+      "title": "NUDT7A",
+      "display_name": "NUDT7A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NUDT7A-x0140_1_apo_hYaNUGN.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT7A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MLDDAKARLRKYDIGGKYSHLPYNKYSVLLPLVAKEGKLHLLFTVRSEKLRRAPGEVCFPGGKRDPTDMDDAATALREAQEEVGLRPHQVEVVCCLVPCLIDTDTLITPFVGLIDHNFQAQPNPAEVKDVFLVPLAYFLHPQVHDQXXXXXXXXXXXNHIFEYTNPEDGVTYQIKGMTANLAVLVAFIILEKKPT"
+        }
+      ]
+    },
+    {
+      "id": 81,
+      "title": "D68EV3CPROA",
+      "display_name": "D68EV3CPROA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/D68EV3CPROA_apo%2367aac56ae9a24ca58937210d994fc0b9.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_PUiOif6.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/D68EV3CPROA.zip",
+      "upload_status": "SUCCESS",
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "GPGFDFAQAIMKKNTVIARTEKGEFTMLGVYDRVAVIPTHASVGEIIYINDVETRVLDACALRDLTDTNLEITIVKLDRNQKFRDIRHFLPRCEDDYNDAVLSVHTSKFPNMYIPVGQVTNYGFLNLGGTPTHRILMYNFPTRAGQCGGVVTTTGKVIGIHVGGNGAQGFAAMLLHSYFTD"
+        }
+      ]
+    },
+    {
+      "id": 75,
+      "title": "macro-combi",
+      "display_name": "macro-combi",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/Combi88%231e8abaf47c26416db806a9c18bede8f9.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_LnpGBB8.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/macro-combi.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "FSGYLKLTDNVYIKNADIVEEAKKVKPTVVVNAANVYLKHGGGVAGALNKATNNAMQVESDDYIATNGPLKVGGSCVLSGHNLAKHCLHVVGPNVNKGEDIQLLKSAYENFNQHEVLLAPLLSAGIFGADPIHSLRVCVDTVRTNVYLAVFDKNLYDKLVSSF"
+        }
+      ]
+    },
+    {
+      "id": 32,
+      "title": "FALZA",
+      "display_name": "FALZA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/FALZA-x0079_1_apo_pDzqSU5.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/FALZA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "DAMTVLTPLTEKDYEGLKRVLRSLQAHKMAWPFLEPVDPNDAPDYYGVIKEPMDLATMEERVQRRYYEKLTEFVADMTKIFDNCRYYNPSDSPFYQCAEVLESFFVQKLKGFKASRSH"
+        }
+      ]
+    },
+    {
+      "id": 77,
+      "title": "NSP14",
+      "display_name": "NSP14",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NSP14-x1172_0D_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_4FbSHal.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NSP14.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": ""
+        }
+      ]
+    },
+    {
+      "id": 72,
+      "title": "CD44MMA",
+      "display_name": "CD44MMA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/CD44MMA-x0017_0A_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_toYkuCZ.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/CD44MMA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "QIDLNVTCRYAGVFHVEKNGRYSISRTEAADLCQAFNSTLPTMDQMKLALSKGFETCRYGFIEGNVVIPRIHPNAICAANHTGVYILVTSNTSHYDTYCFNASAPPEEDCTSVTDLPNSFDGPVTITIVNRDGTRYSKKGEYRTHQEDI"
+        }
+      ]
+    },
+    {
+      "id": 52,
+      "title": "TNCA",
+      "display_name": "TNCA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/TNCA-x0062_1_apo_Vc9bxy2.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/TNCA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MFPKDCSQAMLNGDTTSGLYTIYLNGDKAQALEVFCDMTSDGGGWIVFLRRKNGRENFYQNWKAYAAGFGDRREEFWLGLDNLNKITAQGQYELRVDLRDHGETAFAVYDKFSVGDAKTRYKLKVEGYSGTAGDSMAYHNGRSFSTFDKXXXXXXXXCALSYKGAFWYRNCHRVNLMGRYGDNNHSQGVNWFHWKGHEHSIQFAEMKLRPSNFRNL"
+        }
+      ]
+    },
+    {
+      "id": 46,
+      "title": "smTGRNEW",
+      "display_name": "smTGRNEW",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/smTGR-x20531_apo_ddCGiaP.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/smTGRNEW.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "TSQWLRKTVDSAAVILFSKTTCPYCKKVKDVLAEAKIKHATIELDQLSNGSAIQKCLASFSKIETVPQMFVRGKFIGDSQTVLKYYSNDELAGIVNESKYDYDLIVIGGGSGGLAAGKEAAKYGAKTAVLDYVEPTPIGTTWGLGGTCVNVGCIPKKLMHQAGLLSHALEDAEHFGWSLDRSKISHNWSTMVEGVQSHIGSLNWGYKVALRDNQVTYLNAKGRLISPHEVQITDKNQKVSTITGNKIILATGERPKYPEIPGAVEYGITSDDLFSLPYFPGKTLVIGASYVALECAGFLASLGGDVTVMVRSILLRGFDQQMAEKVGDYMENHGVKFAKLCVPDEIKQLKVVDTENNKPGLLLVKGHYTDGKKFEEEFETVIFAVGREPQLSKVLCETVGVKLDKNGRVVCTDDEQTTVSNVYAIGDINAGKPQLTPVAIQAGRYLARRLFAGATELTDYSNVATTVFTPLEYGACGLSEEDAIEKYGDKDIEVYHSNFKPLEWTVAHREDNVCYMKLVCRKSDNMRVLGLHVLGPNAGEITQGYAVAIKMGATKADFDRTIGIHPTCSETFTTLHVTKKSGVSPIV"
+        }
+      ]
+    },
+    {
+      "id": 20,
+      "title": "PTP1B",
+      "display_name": "PTP1B",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/PTP1B-y0049_apo_N9naW4T.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/PTP1B.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MEMEKEFEQIDKSGSWAAIYQDIRHEASDFPSRVAKLPKNKNRNRYRDVSPFDHSRIKLHQEDNDYINASLIKMEEAQRSYILTQGPLPNTVGHFWEMVWEQKSRGVVMLNRVMEKGSLKCAQYWPQKEEKEMIFEDTNLKLTLISEDIKSYYTVRQLELENLTTQETREILHFHYTTWPDFGVPESPASFLNFLFKVRESGSLSPEHGPVVVHCSAGIGRSGTFCLADTCLLLMDKRKDPSSVDIKKVLLEMRKFRMGLIQTADQLRFSYLAVIEGAKFI"
+        }
+      ]
+    },
+    {
+      "id": 15,
+      "title": "NUDT4A",
+      "display_name": "NUDT4A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NUDT4A-x0159_1_apo_MptlW5D.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT4A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "RTYDREGFKKRAACLCFRSEQEDEVLLVSSSRYPDQWIVPGGGMEPEEEPGGAAVREVYEEAGVKGKLGRLLGIFENQDRKHRTYVYVLTVTEILEDWXXXXXXXXKREWFKVEDAIKVLQCHKPVHAEYLEKLKLG"
+        }
+      ]
+    },
+    {
+      "id": 68,
+      "title": "Mpro",
+      "display_name": "Mpro",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/Mpro-x12171_0A_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_iEWD64x.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/Mpro.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "SGFRKMAFPSGKVEGCMVQVTCGTTTLNGLWLDDVVYCPRHVICTSEDMLNPNYEDLLIRKSNHNFLVQAGNVQLRVIGHSMQNCVLKLKVDTANPKTPKYKFVRIQPGQTFSVLACYNGSPSGVYQCAMRPNFTIKGSFLNGSCGSVGFNIDYDCVSFCYMHHMELPTGVHAGTDLEGNFYGPFVDRQTAQAAGTDTTITVNVLAWLYAAVINGDRWFLNRFTTTLNDFNLVAMKYNYEPLTQDHVDILGPLSAQTGIAVLDMCASLKELLQNGMNGRTILGSALLEDEFTPFDVVRQCSGVT"
+        }
+      ]
+    },
+    {
+      "id": 78,
+      "title": "MID2A",
+      "display_name": "MID2A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/MID2A-x0041_0B_apo_shjr9wY.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_e9G010l.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/MID2A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MNSQPFKLDPKMTHKKLKISNDGLQMEKDXXXXXXXXXXXXXXXXXCYGAAGNIFIDSGCHYWEVVMGSSTWYAIGIAYKSAPKNEWIGKNASSWVFSRCNSNFVVRHNNKEMLVDVPPHLKRLGVLLDYDNNMLSFYDPANSLHLHTFDVTFILPVCPTFTIWNKSLMILSGLPAPDFI"
+        }
+      ]
+    },
+    {
+      "id": 70,
+      "title": "MUREECOLI",
+      "display_name": "MUREECOLI",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/MUREECOLI-7B61_0B_apo_QRs2Wwd.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_GdyxtUF.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/MUREECOLI.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": ""
+        }
+      ]
+    },
+    {
+      "id": 38,
+      "title": "NUDT21A",
+      "display_name": "NUDT21A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NUDT21A-x0159_1_apo_VSKfMPI.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT21A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MLERTINLYPLTNYTFGTKEPLYEKDSSVAARFQRMREEFDKIGMRRTVEGVLIVHEHRLPHVLLLQLGTTFFKLPGGELNPGEDEVEGLKRLMTEILGRQDGVLDNWVIDDCIGNWWRPNFEPPQYPYIPAHITKPKEHKKLFLVQLQEKALFAVPKNYKLVAAPLFELYDNAPGYGPIISSLPQLLSRFNFIYN"
+        }
+      ]
+    },
+    {
+      "id": 67,
+      "title": "Mac1",
+      "display_name": "Mac1",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/Mac1-J1042_0A_apo_iFo4f34.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_l7fs8GS.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/Mac1.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "FSGYLKLTDNVYIKNADIVEEAKKVKPTVVVNAANVYLKHGGGVAGALNKATNNAMQVESDDYIATNGPLKVGGSCVLSGHNLAKHCLHVVGPNVNKGEDIQLLKSAYENFNQHEVLLAPLLSAGIFGADPIHSLRVCVDTVRTNVYLAVFDKNLYDKLVSSFL"
+        }
+      ]
+    },
+    {
+      "id": 31,
+      "title": "DCLRE1AA",
+      "display_name": "DCLRE1AA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/DCLRE1AA-x0128_1_apo_SgxAg9F.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/DCLRE1AA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "CPFYKKIPGTGFTVDAFQYGVVEGCTAYFLTHFHSDHYAGLSKHFTFPVYCSEITGNLLKNKLHVQEQYIHPLPLDTECIVNGVKVVLLDANHCPGAVMILFYLPNGTVILHTGDFRADPSMERSLLADQKVHMLYLDTTYCSPEYTFPSQQEVIRFAINTAFEAVTLNPHALVVCGTYSIGKEKVFLAIADVLGSKVGMSQEKYKTLQCLNIPEINSLITTDMCSSLVHLLPMMQINFKGLQSHLKKCGGKYNQILAFRPTGWTHSNKFTRIADVIPQTKGNISIYGIPYSEHSSYLEMKRFVQWLKPQKIIPTVNVGTWKSRSTMEKYFREWKLEAGY"
+        }
+      ]
+    },
+    {
+      "id": 82,
+      "title": "XX01ZVNS2B",
+      "display_name": "XX01ZVNS2B",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/XX01ZVNS2B-x0945_0B_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_vB4bHbx.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/XX01ZVNS2B.zip",
+      "upload_status": "SUCCESS",
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "MYIERAGDITWEKDAEVTGNSPRLDVALDESGDFSLVE"
+        }
+      ]
+    },
+    {
+      "id": 65,
+      "title": "INPP5DA",
+      "display_name": "INPP5DA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/INPP5DA-x0058_2_apo.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_MR1dz1c.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/INPP5DA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "PEPDMITIFIGTWNMGNAPPPKKITSWFLSKGQGKTRDDSADYIPHDIYVIGTQEDPLSEKEWLEILKHSLQEITSVTFKTVAIHTLWNIRIVVLAKPEHENRISHICTDNVKTGIANTLGNKGAVGVSFMFNGTSLGFVNSHLTSGSEKKLRRNQNYMNILRFLALGDKKLSPFNITHRFTHLFWFGDLNYRVDLPTWEAETIIQKIKQQQYADLLSHDQLLTERREQKVFLHFEEEEITFAPTYRFERLTRDKYAYTKQKATGMKYNLPSWCDRVLWKSYPLVHVVCQSYGSTSDIMTSDHSPVFATFEAGVTSQFVSKNGPGTVDSQGQIEFLRCYATLKTKSQTKFYLEFHSSCLESFVKSQEGENEEGSEGELVVKFGETLPKLKPIISDPEYLLDQHILISIKSSDSDESYGEGCIALRLEATETQLPIYTPLTHHGELTGHFQGEIKLQTSQ"
+        }
+      ]
+    },
+    {
+      "id": 40,
+      "title": "NUDT5A",
+      "display_name": "NUDT5A",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/NUDT5A-x0114_1_apo_lZ7GhcD.pdb",
+      "metadata": null,
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/NUDT5A.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": "QYIISEELISEGKWVKLEKTTYMDPTGKTRTWESVKRTTRKEQTADGVAVIPVLQRTLHYECIVLVKQFRPPMGGYCIEFPAGLIDDGETPEAAALRELEEETGYKGDIAECSPAVCMDPGLSNCTIHIVTVTINGDDAENARPKPKPGDGEFVEVISLPKNDLLQRLDALVAEEHLTVDARVYSYALALKHA"
+        },
+        {
+          "chain": "B",
+          "sequence": "QYIISEELISEGKWVKLEKTTYMDPTGKTRTWESVKRTTRKXXTADGVAVIPVLQRTLHYECIVLVKQFRPPMGGYCIEFPAGLIDDGETPEAAALRELEEETGYKGDIAECSPAVCMDPGLSNCTIHIVTVTINGDDAENARPKPKPGDGEFVEVISLPKNDLLQRLDALVAEEHLTVDARVYSYALALKHAN"
+        },
+        {
+          "chain": "C",
+          "sequence": "YIISEELISEGKWVKLEKTTYMDPTGKTRTWESVKRTTRKXXTADGVAVIPVLQRTLHYECIVLVKQFRPPMGGYCIEFPAGLIDDGETPEAAALRELEEETGYKGDIAECSPAVCMDPGLSNCTIHIVTVTINGDDAENARPKPKPGDGEFVEVISLPKNDLLQRLDALVAEEHLTVDARVYSYALALKHA"
+        }
+      ]
+    },
+    {
+      "id": 19,
+      "title": "PHIPA",
+      "display_name": "PHIPA",
+      "project_id": [2],
+      "default_squonk_project": null,
+      "template_protein": "/media/pdbs/F710-Su-366_bound_zQNtUAa.pdb",
+      "metadata": "https://fragalysis.diamond.ac.uk/media/metadata/metadata_CpKV9Zd.csv",
+      "zip_archive": "https://fragalysis.diamond.ac.uk/media/targets/PHIPA.zip",
+      "upload_status": null,
+      "sequences": [
+        {
+          "chain": "A",
+          "sequence": ""
+        }
+      ]
+    }
+  ]
+}

From 8817d77f337a627ea7f2218be1d7d70e363bb0c7 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Thu, 22 Aug 2024 14:24:46 +0200
Subject: [PATCH 02/17] #1482 added TagName and CentroidRes columns for
 expanded view of observation dialog

---
 .../molecule/moleculeView/moleculeView.js     | 81 +++++++++++++++----
 .../preview/molecule/observationsDialog.js    | 50 +++++++++++-
 2 files changed, 110 insertions(+), 21 deletions(-)

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
index cf0c74fa8..98c85f5eb 100644
--- a/js/components/preview/molecule/moleculeView/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -56,6 +56,8 @@ import Typography from '@mui/material/Typography';
 import { Edit } from '@material-ui/icons';
 import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
 import { getFontColorByBackgroundColor } from '../../../../utils/colors';
+import { api, METHOD } from '../../../../utils/api';
+import { base_url } from '../../../routes/constants';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -346,7 +348,8 @@ const useStyles = makeStyles(theme => ({
   categoryCell: {
     padding: '4px 8px',
     fontWeight: 'bold',
-    textWrap: 'nowrap'
+    textWrap: 'nowrap',
+    fontSize: 12
   }
 }));
 
@@ -382,7 +385,9 @@ const MoleculeView = memo(
     disableP,
     disableC,
     hideImage,
-    showExpandedView
+    showExpandedView,
+    headerWidths,
+    setHeaderWidthsHandler
   }) => {
     // const [countOfVectors, setCountOfVectors] = useState('-');
     // const [cmpds, setCmpds] = useState('-');
@@ -457,6 +462,7 @@ const MoleculeView = memo(
     const [densityModalOpen, setDensityModalOpen] = useState(false);
     const [moleculeTooltipOpen, setMoleculeTooltipOpen] = useState(false);
     const [tagPopoverOpen, setTagPopoverOpen] = useState(null);
+    const [centroidRes, setCentroidRes] = useState('');
 
     const moleculeImgRef = useRef(null);
 
@@ -470,6 +476,33 @@ const MoleculeView = memo(
       setTagEditModalOpenNew(tagEditorOpenObs);
     }, [tagEditorOpenObs]);
 
+    const XCA_TAGS_CATEGORIES = ['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'];
+
+    useEffect(() => {
+      api({
+        url: `${base_url}/api/canon_sites/`,
+        method: METHOD.GET
+      })
+        .then(resp => {
+          const canonSite = resp.data.results.find(canonSite => canonSite.id === data.canon_site_conf);
+          setCentroidRes(canonSite ? canonSite.centroid_res : '');
+        })
+        .catch(err => {
+          console.log('error fetching centroid_res from canon_sites', err);
+          setCentroidRes('');
+        });
+    }, [data.canon_site_conf]);
+
+    useEffect(() => {
+      if (showExpandedView) {
+        setHeaderWidthsHandler(getTagType('CanonSites')?.tag, 'TagName');
+        setHeaderWidthsHandler(centroidRes, 'CentroidRes');
+        XCA_TAGS_CATEGORIES.forEach(tagCategory => {
+          setHeaderWidthsHandler(getTagLabel(tagCategory), tagCategory);
+        })
+      }
+    }, [showExpandedView, getTagType, getTagLabel, centroidRes, setHeaderWidthsHandler, XCA_TAGS_CATEGORIES]);
+
     const handlePopoverOpen = event => {
       setTagPopoverOpen(event.currentTarget);
     };
@@ -1061,6 +1094,21 @@ const MoleculeView = memo(
       return fontSize;
     };
 
+    const getTagLabel = useCallback(tagCategory => {
+      const tagTypeObject = getTagType(tagCategory);
+      let tagLabel = '';
+      if (tagTypeObject) {
+        if (tagCategory === 'CrystalformSites') {
+          // "chop" more of CrystalformSites name
+          tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1).trim();
+          tagLabel = tagLabel.substring(tagLabel.indexOf('-') + 1).trim();
+        } else {
+          tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1).trim();
+        }
+      }
+      return tagLabel;
+    }, [getTagType]);
+
     return (
       <>
         <Grid
@@ -1359,7 +1407,7 @@ const MoleculeView = memo(
                   // wrap="nowrap"
                   style={{ height: "100%" }}
                 >
-                  {['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(tagCategory => {
+                  {XCA_TAGS_CATEGORIES.map(tagCategory => {
                     const tagTypeObject = getTagType(tagCategory);
                     const tagLabel = tagCategory === 'ConformerSites' ? tagTypeObject.tag_prefix.replace(getTagType('CanonSites')?.tag_prefix, '') : tagTypeObject?.tag_prefix;
                     return <Tooltip
@@ -1414,24 +1462,23 @@ const MoleculeView = memo(
               </div>}
           </Grid>
           {showExpandedView && <Grid item container alignItems='center' wrap="nowrap">
-            {['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map((tagCategory, index) => {
-              const tagTypeObject = getTagType(tagCategory);
-              let tagLabel = '';
-              if (tagTypeObject) {
-                if (tagCategory === 'CrystalformSites') {
-                  // "chop" more of CrystalformSites name
-                  tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1);
-                  tagLabel = tagLabel.substring(tagLabel.indexOf('-') + 1);
-                } else {
-                  tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1);
-                }
-              }
+            <Tooltip title={"CanonSite TagName"}>
+              <Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths.TagName }}>
+                {getTagType('CanonSites')?.tag}
+              </Grid>
+            </Tooltip>
+            {XCA_TAGS_CATEGORIES.map((tagCategory, index) => {
               return <Tooltip title={PLURAL_TO_SINGULAR[tagCategory]} key={index}>
-                <Grid item align="center" className={classes.categoryCell} style={{ fontSize: 12 }}>
-                  {tagLabel}
+                <Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths[tagCategory] }}>
+                  {getTagLabel(tagCategory)}
                 </Grid>
               </Tooltip>
             })}
+            <Tooltip title={"CentroidRes"}>
+              <Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths.CentroidRes }}>
+                {centroidRes}
+              </Grid>
+            </Tooltip>
           </Grid>}
         </Grid >
         <SvgTooltip
diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js
index 395e2733a..bb3a25a24 100644
--- a/js/components/preview/molecule/observationsDialog.js
+++ b/js/components/preview/molecule/observationsDialog.js
@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { CircularProgress, Grid, Popper, IconButton, Typography, Tooltip } from '@material-ui/core';
 import { ArrowLeft, ArrowRight, Close, KeyboardArrowDown } from '@material-ui/icons';
 import { makeStyles } from '@material-ui/styles';
@@ -190,7 +190,7 @@ const useStyles = makeStyles(theme => ({
     }
   },
   headerCell: {
-    padding: '0px 12px',
+    padding: '0px 8px',
     borderColor: 'black',
     fontSize: 12
   }
@@ -247,8 +247,41 @@ export const ObservationsDialog = memo(
 
     const tagEditorRef = useRef();
 
+    const getCalculatedTagColumnWidth = (tagText, font = null) => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      ctx.font = font ?? '12px';
+      const calculatedWidth = ctx.measureText(tagText).width + 16;
+      return calculatedWidth;
+    };
+
     const [tagEditorAnchorEl, setTagEditorAnchorEl] = useState(null);
     const [expandView, setExpandView] = useState(null);
+    const [headerWidths, setHeaderWidths] = useState({
+      TagName: getCalculatedTagColumnWidth('TagName'),
+      CanonSites: getCalculatedTagColumnWidth('CanonSites'),
+      ConformerSites: getCalculatedTagColumnWidth('ConformerSites'),
+      CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
+      Crystalforms: getCalculatedTagColumnWidth('Crystalforms'),
+      Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
+      CentroidRes: getCalculatedTagColumnWidth('CentroidRes')
+    });
+
+    /**
+     * Handler for setting width of expanded view columns for child rows
+     * @param {*} tagText
+     * @param {*} tagCategory
+     */
+    const setHeaderWidthsHandler = (tagText, tagCategory) => {
+      const calculatedWidth = getCalculatedTagColumnWidth(tagText, '12px bold');
+      if (headerWidths[tagCategory] < calculatedWidth) {
+        setHeaderWidths(old => {
+          const newWidths = { ...old };
+          newWidths[tagCategory] = calculatedWidth;
+          return { ...newWidths }
+        });
+      }
+    };
 
     const moleculeList = useMemo(() => {
       if (searchString !== null) {
@@ -734,15 +767,22 @@ export const ObservationsDialog = memo(
                             xs
                             container
                             justifyContent="space-around"
-                            style={{ maxWidth: '63%', marginLeft: 95 }}
+                            style={{ maxWidth: '72%', marginLeft: 95 }}
+                          // style={{ marginLeft: 95 }}
                           >
+                            <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.TagName }} >
+                              TagName
+                            </Grid>
                             {['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(
                               (tagCategory, index) => (
-                                <Grid item align="center" key={index} className={classes.headerCell}>
+                                <Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
                                   {PLURAL_TO_SINGULAR[tagCategory]}
                                 </Grid>
                               )
                             )}
+                            <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.CentroidRes }}>
+                              CentroidRes
+                            </Grid>
                           </Grid>
                         )}
                       </Grid>
@@ -794,6 +834,8 @@ export const ObservationsDialog = memo(
                           setRef={setTagEditorAnchorEl}
                           hideImage={true}
                           showExpandedView={expandView}
+                          headerWidths={headerWidths}
+                          setHeaderWidthsHandler={setHeaderWidthsHandler}
                         />
                       </GroupNglControlButtonsContext.Provider>
                     );

From 6af83d02b49ef72e52055710e8717369c46c94e6 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Tue, 27 Aug 2024 13:14:27 +0200
Subject: [PATCH 03/17] #1489 show warning toast message if is defined on
 target load

---
 js/components/preview/TASPreview.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/js/components/preview/TASPreview.js b/js/components/preview/TASPreview.js
index f70dba420..ca6b15fc8 100644
--- a/js/components/preview/TASPreview.js
+++ b/js/components/preview/TASPreview.js
@@ -1,4 +1,4 @@
-import React, { memo, useEffect } from 'react';
+import React, { memo, useContext, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { URLS } from '../routes/constants';
@@ -6,6 +6,8 @@ import { setCurrentProject, setOpenPickProjectModal } from '../target/redux/acti
 import Preview from './Preview';
 import { getProjectForProjectName, getProjectsForSelectedTarget } from './redux/dispatchActions';
 import { extractProjectFromURLParam } from './utils';
+import { ToastContext } from '../toast';
+import { DJANGO_CONTEXT } from '../../utils/djangoContext';
 
 export const TASPreview = memo(props => {
   let match = useRouteMatch();
@@ -17,6 +19,8 @@ export const TASPreview = memo(props => {
   const targetList = useSelector(state => state.apiReducers.target_id_list);
   const projectsLoaded = useSelector(state => state.targetReducers.projectsLoaded);
 
+  const { toastWarning } = useContext(ToastContext);
+
   useEffect(() => {
     let project = null;
     if (
@@ -49,5 +53,11 @@ export const TASPreview = memo(props => {
     }
   }, [dispatch, currentPorject, match, history, currentTarget, targetList, projectsLoaded]);
 
+  useEffect(() => {
+    if (DJANGO_CONTEXT.target_warning_message && DJANGO_CONTEXT.target_warning_message.length > 0) {
+      toastWarning(DJANGO_CONTEXT.target_warning_message);
+    }
+  }, [toastWarning]);
+
   return <Preview isStateLoaded={false} hideProjects={true} {...props} />;
 });

From 5db8ab033cefdcc5159e1415aebb6d87f6465185 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Wed, 4 Sep 2024 21:08:37 +0200
Subject: [PATCH 04/17] #1322 added longcode column

---
 .../preview/molecule/moleculeView/moleculeView.js      |  8 +++++++-
 js/components/preview/molecule/observationsDialog.js   | 10 +++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
index 98c85f5eb..5d7d6cc2a 100644
--- a/js/components/preview/molecule/moleculeView/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -497,11 +497,12 @@ const MoleculeView = memo(
       if (showExpandedView) {
         setHeaderWidthsHandler(getTagType('CanonSites')?.tag, 'TagName');
         setHeaderWidthsHandler(centroidRes, 'CentroidRes');
+        setHeaderWidthsHandler(data.longcode, 'LongCode');
         XCA_TAGS_CATEGORIES.forEach(tagCategory => {
           setHeaderWidthsHandler(getTagLabel(tagCategory), tagCategory);
         })
       }
-    }, [showExpandedView, getTagType, getTagLabel, centroidRes, setHeaderWidthsHandler, XCA_TAGS_CATEGORIES]);
+    }, [showExpandedView, getTagType, getTagLabel, centroidRes, data.longcode, setHeaderWidthsHandler, XCA_TAGS_CATEGORIES]);
 
     const handlePopoverOpen = event => {
       setTagPopoverOpen(event.currentTarget);
@@ -1479,6 +1480,11 @@ const MoleculeView = memo(
                 {centroidRes}
               </Grid>
             </Tooltip>
+            <Tooltip title={"LongCode"}>
+              <Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths.LongCode }}>
+                {data.longcode}
+              </Grid>
+            </Tooltip>
           </Grid>}
         </Grid >
         <SvgTooltip
diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js
index bb3a25a24..f22fce3a7 100644
--- a/js/components/preview/molecule/observationsDialog.js
+++ b/js/components/preview/molecule/observationsDialog.js
@@ -264,7 +264,8 @@ export const ObservationsDialog = memo(
       CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
       Crystalforms: getCalculatedTagColumnWidth('Crystalforms'),
       Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
-      CentroidRes: getCalculatedTagColumnWidth('CentroidRes')
+      CentroidRes: getCalculatedTagColumnWidth('CentroidRes'),
+      LongCode: getCalculatedTagColumnWidth('LongCode')
     });
 
     /**
@@ -767,8 +768,8 @@ export const ObservationsDialog = memo(
                             xs
                             container
                             justifyContent="space-around"
-                            style={{ maxWidth: '72%', marginLeft: 95 }}
-                          // style={{ marginLeft: 95 }}
+                            // adjust maxWidth if headers are a bit misplaced
+                            style={{ maxWidth: '77%', marginLeft: 95 }}
                           >
                             <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.TagName }} >
                               TagName
@@ -783,6 +784,9 @@ export const ObservationsDialog = memo(
                             <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.CentroidRes }}>
                               CentroidRes
                             </Grid>
+                            <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.LongCode }}>
+                              LongCode
+                            </Grid>
                           </Grid>
                         )}
                       </Grid>

From c7c010d406c46c37f7f58f29a70dd10d475d9e96 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Thu, 5 Sep 2024 09:48:40 +0200
Subject: [PATCH 05/17] updated general function for tag comparison

---
 js/components/preview/tags/utils/tagUtils.js | 39 +++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/js/components/preview/tags/utils/tagUtils.js b/js/components/preview/tags/utils/tagUtils.js
index 95912866a..2d4dcb4e1 100644
--- a/js/components/preview/tags/utils/tagUtils.js
+++ b/js/components/preview/tags/utils/tagUtils.js
@@ -40,7 +40,15 @@ export const createMoleculeTagObject = (
   };
 };
 
-export const compareTagsByCategoryAndNameAsc = (a, b) => {
+/**
+ * Compare tags, first by category and then by name
+ *
+ * @param {TagObject} a
+ * @param {TagObject} b
+ * @param {boolean} asc true for asc, false for desc
+ * @returns
+ */
+export const compareTagsByCategoryAndName = (a, b, asc = true) => {
   // by category first
   if (a.category < b.category) {
     return -1;
@@ -51,33 +59,20 @@ export const compareTagsByCategoryAndNameAsc = (a, b) => {
   // then by name
   const aName = a.tag_prefix ? `${a.tag_prefix} - ${a.tag}` : a.tag;
   const bName = b.tag_prefix ? `${b.tag_prefix} - ${b.tag}` : b.tag;
-  return aName.localeCompare(bName, undefined, { numeric: true, sensitivity: 'base' });
+  return asc ? aName.localeCompare(bName, undefined, { numeric: true, sensitivity: 'base' })
+    : bName.localeCompare(aName, undefined, { numeric: true, sensitivity: 'base' });
 };
 
-export const compareTagsAsc = (a, b) => {
-  const aName = a.tag_prefix ? `${a.tag_prefix} - ${a.tag}` : a.tag;
-  const bName = b.tag_prefix ? `${b.tag_prefix} - ${b.tag}` : b.tag;
+export const compareTagsByCategoryAndNameAsc = (a, b) => {
+  compareTagsByCategoryAndName(a, b, true);
+}
 
-  if (aName < bName) {
-    return -1;
-  }
-  if (aName > bName) {
-    return 1;
-  }
-  return 0;
+export const compareTagsAsc = (a, b) => {
+  return compareTagsByCategoryAndName(a, b, true);
 };
 
 export const compareTagsDesc = (a, b) => {
-  const aName = a.tag_prefix ? `${a.tag_prefix} - ${a.tag}` : a.tag;
-  const bName = b.tag_prefix ? `${b.tag_prefix} - ${b.tag}` : b.tag;
-
-  if (aName > bName) {
-    return -1;
-  }
-  if (aName < bName) {
-    return 1;
-  }
-  return 0;
+  return compareTagsByCategoryAndName(a, b, false);
 };
 
 export const compareTagsByCategoryAsc = (a, b) => {

From 1b24e2ae44b5a631cf6c65979af5db25b69979dd Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Thu, 5 Sep 2024 18:31:11 +0200
Subject: [PATCH 06/17] #1505 adjusted getting of centroid_res

---
 .../molecule/moleculeView/moleculeView.js     | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
index 5d7d6cc2a..2e78f35fd 100644
--- a/js/components/preview/molecule/moleculeView/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -480,12 +480,33 @@ const MoleculeView = memo(
 
     useEffect(() => {
       api({
-        url: `${base_url}/api/canon_sites/`,
+        url: `${base_url}/api/canon_site_confs/`,
         method: METHOD.GET
       })
         .then(resp => {
-          const canonSite = resp.data.results.find(canonSite => canonSite.id === data.canon_site_conf);
-          setCentroidRes(canonSite ? canonSite.centroid_res : '');
+          const canonSiteConf = resp.data.results.find(canonSiteConf => canonSiteConf.id === data.canon_site_conf);
+          if (canonSiteConf) {
+            api({
+              url: `${base_url}/api/canon_sites/`,
+              method: METHOD.GET
+            })
+              .then(resp => {
+                const canonSite = resp.data.results.find(canonSite => canonSite.id === canonSiteConf.canon_site);
+                if (canonSite) {
+                  setCentroidRes(canonSite.centroid_res);
+                } else {
+                  console.log('there is not any matching canonSite object with ' + canonSiteConf.canon_site + ' id');
+                  setCentroidRes('');
+                }
+              })
+              .catch(err => {
+                console.log('error fetching centroid_res from canon_sites', err);
+                setCentroidRes('');
+              });
+          } else {
+            console.log('there is not any matching canonSiteConf object with ' + data.canon_site_conf + ' id');
+            setCentroidRes('');
+          }
         })
         .catch(err => {
           console.log('error fetching centroid_res from canon_sites', err);

From fc9cd3e44ba644b0252db7a35381c3a1d5c21b55 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Wed, 10 Jul 2024 08:43:21 +0200
Subject: [PATCH 07/17] #1458 allow to tag XCA sites, temp commit

# Conflicts:
#	js/components/preview/molecule/observationsDialog.js
---
 .../preview/molecule/observationsDialog.js    | 280 ++++++++++++++++--
 js/components/preview/tags/modal/tagEditor.js |  20 +-
 js/components/preview/tags/utils/tagUtils.js  |   8 +-
 js/constants/constants.js                     |   1 +
 js/reducers/api/apiReducers.js                |  20 +-
 js/reducers/selection/actions.js              |  79 ++---
 js/reducers/selection/constants.js            |   1 +
 js/reducers/selection/selectionReducers.js    |  10 +
 8 files changed, 349 insertions(+), 70 deletions(-)

diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js
index f22fce3a7..9310a2e3b 100644
--- a/js/components/preview/molecule/observationsDialog.js
+++ b/js/components/preview/molecule/observationsDialog.js
@@ -5,7 +5,7 @@ import { makeStyles } from '@material-ui/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
 import { NglContext } from '../../nglView/nglProvider';
-import { PLURAL_TO_SINGULAR, VIEWS } from '../../../constants/constants';
+import { PLURAL_TO_SINGULAR, VIEWS, XCA_TAG_CATEGORIES } from '../../../constants/constants';
 import { changeButtonClassname } from '../../datasets/helpers';
 import {
   addComplex,
@@ -16,6 +16,8 @@ import {
   copyPoseToPoseDTO,
   createNewPose,
   getAllCompatiblePoses,
+  getCategoryById,
+  prepareEmptyPoseDTO,
   removeComplex,
   removeHitProtein,
   removeLigand,
@@ -36,7 +38,8 @@ import {
   setOpenObservationsDialog,
   setPoseIdForObservationsDialog,
   setSelectedAllByType,
-  setTagEditorOpenObs
+  setTagEditorOpenObs,
+  updateMoleculeInLHSObservations
 } from '../../../reducers/selection/actions';
 import useDisableNglControlButtons from './useDisableNglControlButtons';
 import { Button, Panel } from '../../common';
@@ -46,8 +49,10 @@ import MoleculeView from './moleculeView';
 import { TagEditor } from '../tags/modal/tagEditor';
 import { ToastContext } from '../../toast';
 import { DJANGO_CONTEXT } from '../../../utils/djangoContext';
-import { updateLHSCompound } from '../../../reducers/api/actions';
+import { updateLHSCompound, updateMoleculeInMolLists, updateMoleculeTag, updateTag } from '../../../reducers/api/actions';
 import { createPoseErrorMessage } from './api/poseApi';
+import { augumentTagObjectWithId, createMoleculeTagObject, DEFAULT_TAG_COLOR, getMoleculeTagForTag } from '../tags/utils/tagUtils';
+import { updateExistingTag } from '../tags/api/tagsApi';
 
 const MIN_PANEL_HEIGHT = 250;
 
@@ -174,8 +179,16 @@ const useStyles = makeStyles(theme => ({
       backgroundColor: theme.palette.primary.light
     }
   },
+  dropdownContentSide: {
+    left: 148,
+    marginTop: -18,
+    maxWidth: 260,
+    width: 260,
+    overflowY: 'auto',
+    maxHeight: 100
+  },
   dropdown: {
-    '&:hover $dropdownContent': {
+    '&:hover > $dropdownContent': {
       display: 'flex'
     }
   },
@@ -228,6 +241,10 @@ export const ObservationsDialog = memo(
     const informationList = useSelector(state => state.selectionReducers.informationList);
     const molForTagEditId = useSelector(state => state.selectionReducers.molForTagEdit);
     const moleculesToEditIds = useSelector(state => state.selectionReducers.moleculesToEdit);
+    const tagCategoriesList = useSelector(state => state.apiReducers.categoryList);
+    // const tagList = useSelector(state => state.apiReducers.tagList);
+    const tagList = useSelector(state => state.apiReducers.moleculeTags);
+    const targetId = useSelector(state => state.apiReducers.target_on);
 
     const poses = useSelector(state => state.apiReducers.lhs_compounds_list);
     const compatiblePoses = useMemo(() => {
@@ -600,19 +617,18 @@ export const ObservationsDialog = memo(
     const getPanelHeight = useCallback(() => {
       let height = 0;
       if (anchorEl) {
-        // available height of the window - top position of the anchor element, ie pose from hit navigator - "bottom margin"
+      // available height of the window - top position of the anchor element, ie pose from hit navigator - "bottom margin"
         const maxHeight = window.innerHeight - anchorEl?.getBoundingClientRect().top - 13;
-        const observationsApproximateHeight = moleculeList.length * 47;
-        const headerFooterApproximateHeight = 87;
-        const totalApproximateHeight = observationsApproximateHeight + headerFooterApproximateHeight;
-
-        if (totalApproximateHeight > maxHeight) {
-          height = maxHeight;
-        } else if (totalApproximateHeight < MIN_PANEL_HEIGHT) {
-          height = MIN_PANEL_HEIGHT;
-        } else {
-          height = totalApproximateHeight;
-        }
+      const observationsApproximateHeight = moleculeList.length * 47;
+      const headerFooterApproximateHeight = 87;
+      const totalApproximateHeight = observationsApproximateHeight + headerFooterApproximateHeight;
+      if (totalApproximateHeight > maxHeight) {
+        height = maxHeight;
+      } else if (totalApproximateHeight < MIN_PANEL_HEIGHT) {
+        height = MIN_PANEL_HEIGHT;
+      } else {
+        height = totalApproximateHeight;
+      }
       } else {
         height = MIN_PANEL_HEIGHT;
       }
@@ -620,6 +636,205 @@ export const ObservationsDialog = memo(
       return height;
     }, [anchorEl, moleculeList.length]);
 
+    /**
+     * @param {string} category
+     * @return {array}
+     */
+    const getTagsForCategory = useCallback(category => {
+      const tagCategory = tagCategoriesList.find(tagCategory => tagCategory.category === category);
+      return tagCategory ? tagList.filter(tag => {
+        if (tag.category === tagCategory.id) {
+          // console.log('good tag', { ...tag });
+          return true;
+        } else return false;
+      }) : [];
+    }, [tagCategoriesList, tagList]);
+
+    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 tagObservations = async tag => {
+      try {
+        // setTaggingInProgress(true);
+
+        let tagColor = DEFAULT_TAG_COLOR;
+        if (tag.colour && tag.colour !== '') {
+          tagColor = tag.colour;
+        } else {
+          const tagCategory = dispatch(getCategoryById(tag.category));
+          if (tagCategory) {
+            tagColor = `#${tagCategory.colour}`;
+          }
+        }
+
+        let molTagObjects = [];
+        observationsDataList.forEach(m => {
+          if (!m.tags_set.some(id => id === tag.id)) {
+            let newMol = { ...m };
+            newMol.tags_set.push(tag.id);
+            const pose = poses.find(p => p.site_observations.includes(m.id));
+            updateCmp(pose, newMol);
+            dispatch(updateMoleculeInMolLists(newMol));
+            dispatch(updateMoleculeInLHSObservations(newMol));
+            const moleculeTag = getMoleculeTagForTag(tagList, tag.id);
+            let mtObject = molTagObjects.find(mto => mto.tag === tag.tag);
+            if (mtObject) {
+              mtObject.site_observations.push(newMol.id);
+            } else {
+              mtObject = createMoleculeTagObject(
+                tag.tag,
+                targetId,
+                tag.category,
+                DJANGO_CONTEXT.pk,
+                tagColor,
+                tag.discourse_url,
+                [...moleculeTag.site_observations, newMol.id],
+                tag.create_date,
+                tag.additional_info,
+                tag.mol_group,
+                tag.hidden,
+                tag.tag_prefix,
+                tag.upload_name
+              );
+              molTagObjects.push(mtObject);
+            }
+          }
+        });
+        if (molTagObjects) {
+          for (const mto of molTagObjects) {
+            let molTagObject = { ...mto };
+            let augMolTagObject = augumentTagObjectWithId(molTagObject, tag.id);
+            await updateExistingTag(molTagObject, tag.id);
+            dispatch(updateMoleculeTag(augMolTagObject));
+            dispatch(updateTag(augMolTagObject));
+          }
+        }
+      } catch (e) {
+        console.log(e);
+        //dispatch(setIsErrorDuringTagging(true));
+      } finally {
+        // setTaggingInProgress(false);
+      }
+    };
+
+    const untagObservations = async tag => {
+      try {
+        // setTaggingInProgress(true);
+
+        let tagColor = DEFAULT_TAG_COLOR;
+        if (tag.colour && tag.colour !== '') {
+          tagColor = tag.colour;
+        } else {
+          const tagCategory = dispatch(getCategoryById(tag.category));
+          if (tagCategory) {
+            tagColor = `#${tagCategory.colour}`;
+          }
+        }
+
+        let molTagObjects = [];
+        observationsDataList.forEach(m => {
+          let newMol = { ...m };
+          newMol.tags_set = newMol.tags_set.filter(id => id !== tag.id);
+          const pose = poses.find(p => p.site_observations.includes(m.id));
+          updateCmp(pose, newMol);
+          dispatch(updateMoleculeInMolLists(newMol));
+          dispatch(updateMoleculeInLHSObservations(newMol));
+          const moleculeTag = getMoleculeTagForTag(tagList, tag.id);
+
+          let mtObject = molTagObjects.find(mto => mto.tag === tag.tag);
+          if (mtObject) {
+            mtObject.site_observations = mtObject.site_observations.filter(id => id !== m.id);
+          } else {
+            let newMolList = [...moleculeTag.site_observations];
+            newMolList = newMolList.filter(id => id !== m.id);
+            mtObject = createMoleculeTagObject(
+              tag.tag,
+              targetId,
+              tag.category,
+              DJANGO_CONTEXT.pk,
+              tagColor,
+              tag.discourse_url,
+              newMolList,
+              tag.create_date,
+              tag.additional_info,
+              tag.mol_group,
+              tag.hidden,
+              tag.tag_prefix,
+              tag.upload_name
+            );
+            molTagObjects.push(mtObject);
+          }
+        });
+        if (molTagObjects) {
+          for (const mto of molTagObjects) {
+            let molTagObject = { ...mto };
+            let augMolTagObject = augumentTagObjectWithId(molTagObject, tag.id);
+            await updateExistingTag(molTagObject, tag.id);
+            dispatch(updateMoleculeTag(augMolTagObject));
+            dispatch(updateTag(augMolTagObject));
+          }
+        }
+      } catch (e) {
+        console.log(e);
+        //dispatch(setIsErrorDuringTagging(true));
+      } finally {
+        // setTaggingInProgress(false);
+      }
+    };
+
+    const getMainTagByCategory = categoryId => {
+      const firstSelectedObs = observationsDataList[0];
+      if (firstSelectedObs) {
+        // console.log('firstSelectedObs?', { ...firstSelectedObs });
+        const pose = poses.find(pose => pose.id === firstSelectedObs.pose);
+        const mainObservation = observationsDataList.find(observation => observation.id === pose.main_site_observation);
+        console.log('pose?', { ...pose });
+        console.log('mainObservation?', { ...mainObservation });
+        if (mainObservation) {
+          // tagList.filter(tag => {
+
+          //   if (tag.category === categoryId && mainObservation.tags_set.includes(tag.id)) {
+          //     console.log('tag.category', tag.category)
+          //     console.log('categoryId', categoryId)
+          //     console.log('mainObservation.tags_set', mainObservation.tags_set)
+          //     console.log('tag.id', tag.id)
+          //     return true;
+          //   } else {
+          //     return false;
+          //   }
+          // }).forEach(tag => console.log('in list', { ...tag }));
+          return tagList.find(tag => tag.category === categoryId && mainObservation.tags_set.includes(tag.id));
+        }
+      }
+      return null;
+    };
+
+    /**
+     * Change the generated tags for all observations in a pose
+     *
+     * @param {*} tag
+     */
+    const handleChangeXCAtag = async tag => {
+      console.log('tag', { ...tag });
+      console.log('untagging');
+      // untag first
+      const mainObservationTag = getMainTagByCategory(tag.category);
+      if (mainObservationTag) {
+        console.log('main tag', { ...mainObservationTag });
+        await untagObservations(mainObservationTag);
+      }
+      // then tag
+      // await tagObservations(tag);
+      console.log('tagging');
+      toastInfo(`Tag for observations was changed from "${mainObservationTag.upload_name}" to "${tag.upload_name}". They could disappear based on your tag selection`, { autoHideDuration: 5000 });
+    };
+
     return (
       <Popper id={id} open={open} anchorEl={anchorEl} placement="left-start" ref={ref}>
         <Panel
@@ -777,8 +992,8 @@ export const ObservationsDialog = memo(
                             {['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(
                               (tagCategory, index) => (
                                 <Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
-                                  {PLURAL_TO_SINGULAR[tagCategory]}
-                                </Grid>
+                              {PLURAL_TO_SINGULAR[tagCategory]}
+                            </Grid>
                               )
                             )}
                             <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.CentroidRes }}>
@@ -904,10 +1119,35 @@ export const ObservationsDialog = memo(
                         ))}
                       </Grid>
                     </Grid>
-                  </Grid>
+                  {/* <Grid item className={classNames({ [classes.dropdown]: true })}>
+                    <Button
+                      color="inherit"
+                      variant="text"
+                      size="small"
+                      data-id="manageGrouping"
+                      endIcon={<KeyboardArrowDown />}
+                      className={classNames(classes.contColButton, classes.contColButtonBottomRow)}
+                    >
+                      Change XCA tags
+                    </Button>
+                    <Grid container direction="column" className={classes.dropdownContent}>
+                      {XCA_TAG_CATEGORIES.map(category =>
+                        <Grid key={category} item className={classNames(classes.dropdown, classes.dropdownItem)}>
+                          Change {category}
+                          <Grid container direction="row" className={classNames(classes.dropdownContent, classes.dropdownContentSide)}>
+                            {getTagsForCategory(category)?.map(tag => (
+                              <Grid key={tag.id} item className={classes.dropdownItem} onClick={() => handleChangeXCAtag(tag)}>
+                                {tag.upload_name}
+                              </Grid>
+                            ))}
+                          </Grid>
+                        </Grid>
+              )}
+                    </Grid>
+                  </Grid> */}
                 </Grid>
               )}
-            </Grid>
+            </>
           )}
           {isLoadingInspirationListOfMolecules === true && (
             <Grid container alignItems="center" justifyContent="center">
diff --git a/js/components/preview/tags/modal/tagEditor.js b/js/components/preview/tags/modal/tagEditor.js
index c8f168117..93b41dde6 100644
--- a/js/components/preview/tags/modal/tagEditor.js
+++ b/js/components/preview/tags/modal/tagEditor.js
@@ -3,14 +3,15 @@ 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 { updateLHSCompound, updateMoleculeInMolLists, updateMoleculeTag } from '../../../../reducers/api/actions';
+import { updateLHSCompound, updateMoleculeInMolLists, updateMoleculeTag, updateTag } from '../../../../reducers/api/actions';
 import { getMoleculeForId } from '../redux/dispatchActions';
 import {
   setMoleculeForTagEdit,
   setIsTagGlobalEdit,
   setAssignTagView,
   setTagEditorOpen,
-  setIsLHSCmpTagEdit
+  setIsLHSCmpTagEdit,
+  updateMoleculeInLHSObservations
 } from '../../../../reducers/selection/actions';
 import { updateExistingTag } from '../api/tagsApi';
 import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
@@ -215,6 +216,7 @@ export const TagEditor = memo(
             const pose = poses.find(p => p.site_observations.includes(m.id));
             updateCmp(pose, newMol);
             dispatch(updateMoleculeInMolLists(newMol));
+            dispatch(updateMoleculeInLHSObservations(newMol));
             const moleculeTag = getMoleculeTagForTag(moleculeTags, tag.id);
 
             let mtObject = molTagObjects.find(mto => mto.tag === tag.tag);
@@ -232,7 +234,11 @@ export const TagEditor = memo(
                 tag.discourse_url,
                 newMolList,
                 tag.create_date,
-                tag.additional_info
+                tag.additional_info,
+                tag.mol_group,
+                tag.hidden,
+                tag.tag_prefix,
+                tag.upload_name
               );
               molTagObjects.push(mtObject);
             }
@@ -245,6 +251,7 @@ export const TagEditor = memo(
               const pose = poses.find(p => p.site_observations.includes(m.id));
               updateCmp(pose, newMol);
               dispatch(updateMoleculeInMolLists(newMol));
+              dispatch(updateMoleculeInLHSObservations(newMol));
               const moleculeTag = getMoleculeTagForTag(moleculeTags, tag.id);
               let mtObject = molTagObjects.find(mto => mto.tag === tag.tag);
               if (mtObject) {
@@ -259,7 +266,11 @@ export const TagEditor = memo(
                   tag.discourse_url,
                   [...moleculeTag.site_observations, newMol.id],
                   tag.create_date,
-                  tag.additional_info
+                  tag.additional_info,
+                  tag.mol_group,
+                  tag.hidden,
+                  tag.tag_prefix,
+                  tag.upload_name
                 );
                 molTagObjects.push(mtObject);
               }
@@ -274,6 +285,7 @@ export const TagEditor = memo(
             let augMolTagObject = augumentTagObjectWithId(molTagObject, tag.id);
             await updateExistingTag(molTagObject, tag.id);
             dispatch(updateMoleculeTag(augMolTagObject));
+            dispatch(updateTag(augMolTagObject));
             molsLeft = molsLeft - 1;
             setMolsLeftForTagging(molsLeft);
           }
diff --git a/js/components/preview/tags/utils/tagUtils.js b/js/components/preview/tags/utils/tagUtils.js
index 2d4dcb4e1..9bd0e6b2f 100644
--- a/js/components/preview/tags/utils/tagUtils.js
+++ b/js/components/preview/tags/utils/tagUtils.js
@@ -22,7 +22,9 @@ export const createMoleculeTagObject = (
   createDate = new Date(),
   additionalInfo = null,
   molGroup = null,
-  hidden = false
+  hidden = false,
+  tag_prefix = null,
+  upload_name = null
 ) => {
   return {
     tag: tagName,
@@ -36,7 +38,9 @@ export const createMoleculeTagObject = (
     help_text: tagName,
     additional_info: additionalInfo,
     mol_group: molGroup,
-    hidden: hidden
+    hidden: hidden,
+    tag_prefix: tag_prefix,
+    upload_name: upload_name
   };
 };
 
diff --git a/js/constants/constants.js b/js/constants/constants.js
index a6f991d6b..41df3fe4e 100644
--- a/js/constants/constants.js
+++ b/js/constants/constants.js
@@ -52,6 +52,7 @@ export const CATEGORY_TYPE_BY_ID = {
   4: CATEGORY_TYPE.OTHER
 };
 
+export const XCA_TAG_CATEGORIES = ['CanonSites', 'ConformerSites', 'CrystalformSites', 'Quatassemblies'];
 export const OBSERVATION_TAG_CATEGORIES = ['ConformerSites', 'CrystalformSites', 'Quatassemblies', 'Crystalforms'];
 export const COMPOUND_PRIO_TAG_CATEGORIES = ['CanonSites'];
 export const TAG_DETAILS_REMOVED_CATEGORIES = ['CrystalformSites', 'ConformerSites'];
diff --git a/js/reducers/api/apiReducers.js b/js/reducers/api/apiReducers.js
index 38b3801d4..557750369 100644
--- a/js/reducers/api/apiReducers.js
+++ b/js/reducers/api/apiReducers.js
@@ -385,14 +385,18 @@ export default function apiReducers(state = INITIAL_STATE, action = {}) {
 
     case constants.UPDATE_TAG:
       let listWithUpdatedTag = [...state.tagList];
-      let foundTags = listWithUpdatedTag.filter(t => t.id === action.item.id);
-      if (foundTags && foundTags.length > 0) {
-        let foundTag = foundTags[0];
-        foundTag.tag = action.item.tag;
-        foundTag.colour = action.item.colour;
-        foundTag.category = action.item.category;
-        foundTag.discourse_url = action.item.discourse_url;
-        foundTag.hidden = action.item.hidden;
+      // let foundTags = listWithUpdatedTag.filter(t => t.id === action.item.id);
+      const foundTagIndex = listWithUpdatedTag.findIndex(t => t.id === action.item.id);
+      if (foundTagIndex >= 0) {
+        listWithUpdatedTag[foundTagIndex] = { ...action.item };
+        // if (foundTags && foundTags.length > 0) {
+        //   let foundTag = foundTags[0];
+        //   foundTag.tag = action.item.tag;
+        //   foundTag.colour = action.item.colour;
+        //   foundTag.category = action.item.category;
+        //   foundTag.discourse_url = action.item.discourse_url;
+        //   foundTag.hidden = action.item.hidden;
+        //   foundTag.upload_name = action.item.upload_name;
 
         return { ...state, tagList: [...listWithUpdatedTag] };
       } else {
diff --git a/js/reducers/selection/actions.js b/js/reducers/selection/actions.js
index e4d708386..2166e14f7 100644
--- a/js/reducers/selection/actions.js
+++ b/js/reducers/selection/actions.js
@@ -4,14 +4,14 @@
 
 import { constants } from './constants';
 
-export const setToBuyList = function(to_buy_list) {
+export const setToBuyList = function (to_buy_list) {
   return {
     type: constants.SET_TO_BUY_LIST,
     to_buy_list: to_buy_list
   };
 };
 
-export const appendToBuyList = function(item, index, skipTracking = false) {
+export const appendToBuyList = function (item, index, skipTracking = false) {
   return {
     type: constants.APPEND_TO_BUY_LIST,
     item: item,
@@ -20,7 +20,7 @@ export const appendToBuyList = function(item, index, skipTracking = false) {
   };
 };
 
-export const removeFromToBuyList = function(item, index, skipTracking = false) {
+export const removeFromToBuyList = function (item, index, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_TO_BUY_LIST,
     item: item,
@@ -29,21 +29,21 @@ export const removeFromToBuyList = function(item, index, skipTracking = false) {
   };
 };
 
-export const appendToBuyListAll = function(items) {
+export const appendToBuyListAll = function (items) {
   return {
     type: constants.APPEND_TO_BUY_LIST_ALL,
     items: items
   };
 };
 
-export const removeFromToBuyListAll = function(items) {
+export const removeFromToBuyListAll = function (items) {
   return {
     type: constants.REMOVE_FROM_BUY_LIST_ALL,
     items: items
   };
 };
 
-export const setVectorList = function(vectList) {
+export const setVectorList = function (vectList) {
   return {
     type: constants.SET_VECTOR_LIST,
     vector_list: vectList
@@ -57,7 +57,7 @@ export const setCurrentVector = vectorSmile => {
   };
 };
 
-export const setFragmentDisplayList = function(fragmentDisplayList, skipTracking = false) {
+export const setFragmentDisplayList = function (fragmentDisplayList, skipTracking = false) {
   return {
     type: constants.SET_FRAGMENT_DISPLAY_LIST,
     fragmentDisplayList: fragmentDisplayList,
@@ -65,7 +65,7 @@ export const setFragmentDisplayList = function(fragmentDisplayList, skipTracking
   };
 };
 
-export const appendFragmentDisplayList = function(item, skipTracking = false) {
+export const appendFragmentDisplayList = function (item, skipTracking = false) {
   return {
     type: constants.APPEND_FRAGMENT_DISPLAY_LIST,
     item: item,
@@ -73,7 +73,7 @@ export const appendFragmentDisplayList = function(item, skipTracking = false) {
   };
 };
 
-export const removeFromFragmentDisplayList = function(item, skipTracking = false) {
+export const removeFromFragmentDisplayList = function (item, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_FRAGMENT_DISPLAY_LIST,
     item: item,
@@ -81,7 +81,7 @@ export const removeFromFragmentDisplayList = function(item, skipTracking = false
   };
 };
 
-export const setProteinList = function(proteinList, skipTracking = false) {
+export const setProteinList = function (proteinList, skipTracking = false) {
   return {
     type: constants.SET_PROTEIN_LIST,
     proteinList: proteinList,
@@ -89,7 +89,7 @@ export const setProteinList = function(proteinList, skipTracking = false) {
   };
 };
 
-export const appendProteinList = function(item, skipTracking = false) {
+export const appendProteinList = function (item, skipTracking = false) {
   return {
     type: constants.APPEND_PROTEIN_LIST,
     item: item,
@@ -97,14 +97,14 @@ export const appendProteinList = function(item, skipTracking = false) {
   };
 };
 
-export const removeFromProteinList = function(item, skipTracking = false) {
+export const removeFromProteinList = function (item, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_PROTEIN_LIST,
     item: item,
     skipTracking: skipTracking
   };
 };
-export const setComplexList = function(complexList, skipTracking = false) {
+export const setComplexList = function (complexList, skipTracking = false) {
   return {
     type: constants.SET_COMPLEX_LIST,
     complexList: complexList,
@@ -112,7 +112,7 @@ export const setComplexList = function(complexList, skipTracking = false) {
   };
 };
 
-export const appendComplexList = function(item, skipTracking = false) {
+export const appendComplexList = function (item, skipTracking = false) {
   return {
     type: constants.APPEND_COMPLEX_LIST,
     item: item,
@@ -120,7 +120,7 @@ export const appendComplexList = function(item, skipTracking = false) {
   };
 };
 
-export const removeFromComplexList = function(item, skipTracking = false) {
+export const removeFromComplexList = function (item, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_COMPLEX_LIST,
     item: item,
@@ -128,7 +128,7 @@ export const removeFromComplexList = function(item, skipTracking = false) {
   };
 };
 
-export const setSurfaceList = function(surfaceList, skipTracking = false) {
+export const setSurfaceList = function (surfaceList, skipTracking = false) {
   return {
     type: constants.SET_SURFACE_LIST,
     surfaceList: surfaceList,
@@ -136,7 +136,7 @@ export const setSurfaceList = function(surfaceList, skipTracking = false) {
   };
 };
 
-export const appendSurfaceList = function(item, skipTracking = false) {
+export const appendSurfaceList = function (item, skipTracking = false) {
   return {
     type: constants.APPEND_SURFACE_LIST,
     item: item,
@@ -144,7 +144,7 @@ export const appendSurfaceList = function(item, skipTracking = false) {
   };
 };
 
-export const removeFromSurfaceList = function(item, skipTracking = false) {
+export const removeFromSurfaceList = function (item, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_SURFACE_LIST,
     item: item,
@@ -168,14 +168,14 @@ export const removeFromDensityListType = (item, skipTracking = false) => {
   };
 };
 
-export const setDensityList = function(densityList) {
+export const setDensityList = function (densityList) {
   return {
     type: constants.SET_DENSITY_LIST,
     densityList: densityList
   };
 };
 
-export const appendDensityList = function(item, skipTracking = false) {
+export const appendDensityList = function (item, skipTracking = false) {
   return {
     type: constants.APPEND_DENSITY_LIST,
     item: item,
@@ -183,7 +183,7 @@ export const appendDensityList = function(item, skipTracking = false) {
   };
 };
 
-export const removeFromDensityList = function(item, skipTracking = false) {
+export const removeFromDensityList = function (item, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_DENSITY_LIST,
     item: item,
@@ -191,14 +191,14 @@ export const removeFromDensityList = function(item, skipTracking = false) {
   };
 };
 
-export const setDensityListCustom = function(densityListCustom) {
+export const setDensityListCustom = function (densityListCustom) {
   return {
     type: constants.SET_DENSITY_LIST_CUSTOM,
     densityListCustom: densityListCustom
   };
 };
 
-export const appendDensityListCustom = function(item, skipTracking = false) {
+export const appendDensityListCustom = function (item, skipTracking = false) {
   return {
     type: constants.APPEND_DENSITY_LIST_CUSTOM,
     item: item,
@@ -206,7 +206,7 @@ export const appendDensityListCustom = function(item, skipTracking = false) {
   };
 };
 
-export const removeFromDensityListCustom = function(item, skipTracking = false) {
+export const removeFromDensityListCustom = function (item, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_DENSITY_LIST_CUSTOM,
     item: item,
@@ -214,7 +214,7 @@ export const removeFromDensityListCustom = function(item, skipTracking = false)
   };
 };
 
-export const setQualityList = function(qualityList, skipTracking = false) {
+export const setQualityList = function (qualityList, skipTracking = false) {
   return {
     type: constants.SET_QUALITY_LIST,
     qualityList: qualityList,
@@ -222,21 +222,21 @@ export const setQualityList = function(qualityList, skipTracking = false) {
   };
 };
 
-export const appendInformationList = function(item) {
+export const appendInformationList = function (item) {
   return {
     type: constants.APPEND_INFORMATION_LIST,
     item: item
   };
 };
 
-export const removeFromInformationList = function(item) {
+export const removeFromInformationList = function (item) {
   return {
     type: constants.REMOVE_FROM_INFORMATION_LIST,
     item: item
   };
 };
 
-export const appendQualityList = function(item, skipTracking = false) {
+export const appendQualityList = function (item, skipTracking = false) {
   return {
     type: constants.APPEND_QUALITY_LIST,
     item: item,
@@ -244,7 +244,7 @@ export const appendQualityList = function(item, skipTracking = false) {
   };
 };
 
-export const removeFromQualityList = function(item, skipTracking = false) {
+export const removeFromQualityList = function (item, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_QUALITY_LIST,
     item: item,
@@ -252,7 +252,7 @@ export const removeFromQualityList = function(item, skipTracking = false) {
   };
 };
 
-export const setVectorOnList = function(vectorOnList, skipTracking = false) {
+export const setVectorOnList = function (vectorOnList, skipTracking = false) {
   return {
     type: constants.SET_VECTOR_ON_LIST,
     vectorOnList: vectorOnList,
@@ -260,7 +260,7 @@ export const setVectorOnList = function(vectorOnList, skipTracking = false) {
   };
 };
 
-export const appendVectorOnList = function(item, skipTracking = false) {
+export const appendVectorOnList = function (item, skipTracking = false) {
   return {
     type: constants.APPEND_VECTOR_ON_LIST,
     item: item,
@@ -268,7 +268,7 @@ export const appendVectorOnList = function(item, skipTracking = false) {
   };
 };
 
-export const removeFromVectorOnList = function(item, skipTracking = false) {
+export const removeFromVectorOnList = function (item, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_VECTOR_ON_LIST,
     item: item,
@@ -283,7 +283,7 @@ export const reloadSelectionReducer = savedSelectionReducers => {
   };
 };
 
-export const resetSelectionState = function() {
+export const resetSelectionState = function () {
   return {
     type: constants.RESET_SELECTION_STATE
   };
@@ -374,7 +374,7 @@ export const setArrowUpDown = (item, newItem, arrowType, data) => ({
   }
 });
 
-export const setSelectedTagList = function(selectedTagList, skipTracking = false) {
+export const setSelectedTagList = function (selectedTagList, skipTracking = false) {
   return {
     type: constants.SET_SELECTED_TAG_LIST,
     selectedTagList: selectedTagList,
@@ -382,7 +382,7 @@ export const setSelectedTagList = function(selectedTagList, skipTracking = false
   };
 };
 
-export const appendSelectedTagList = function(item, skipTracking = false) {
+export const appendSelectedTagList = function (item, skipTracking = false) {
   return {
     type: constants.APPEND_SELECTED_TAG_LIST,
     item: item,
@@ -390,7 +390,7 @@ export const appendSelectedTagList = function(item, skipTracking = false) {
   };
 };
 
-export const removeFromSelectedTagList = function(item, skipTracking = false) {
+export const removeFromSelectedTagList = function (item, skipTracking = false) {
   return {
     type: constants.REMOVE_FROM_SELECTED_TAG_LIST,
     item: item,
@@ -444,6 +444,13 @@ export const setObservationsForLHSCmp = observations => {
   };
 };
 
+export const updateMoleculeInLHSObservations = mol => {
+  return {
+    type: constants.UPDATE_MOL_IN_LHS_OBSERVATIONS,
+    mol: mol
+  };
+};
+
 export const setMoleculeForTagEdit = molIds => {
   return {
     type: constants.SET_MOLECULE_FOR_TAG_EDIT,
diff --git a/js/reducers/selection/constants.js b/js/reducers/selection/constants.js
index 7255753a6..49b5949c3 100644
--- a/js/reducers/selection/constants.js
+++ b/js/reducers/selection/constants.js
@@ -75,6 +75,7 @@ export const constants = {
 
   SET_OPEN_OBSERVATIONS_DIALOG: prefix + 'SET_OPEN_OBSERVATIONS_DIALOG',
   SET_OBSERVATIONS_FOR_LHS_CMP: prefix + 'SET_OBSERVATIONS_FOR_LHS_CMP',
+  UPDATE_MOL_IN_LHS_OBSERVATIONS: prefix + 'UPDATE_MOL_IN_LHS_OBSERVATIONS',
   SET_POSE_ID_FOR_OBSERVATIONS_DIALOG: prefix + 'SET_POSE_ID_FOR_OBSERVATIONS_DIALOG',
 
   SET_TAG_TO_EDIT: prefix + 'SET_TAG_TO_EDIT',
diff --git a/js/reducers/selection/selectionReducers.js b/js/reducers/selection/selectionReducers.js
index 2b17daaa1..5f4e5e4c7 100644
--- a/js/reducers/selection/selectionReducers.js
+++ b/js/reducers/selection/selectionReducers.js
@@ -180,6 +180,16 @@ export function selectionReducers(state = INITIAL_STATE, action = {}) {
     case constants.SET_OBSERVATIONS_FOR_LHS_CMP:
       return { ...state, observationsForLHSCmp: [...action.observations] };
 
+    case constants.UPDATE_MOL_IN_LHS_OBSERVATIONS:
+      let newList = [...state.observationsForLHSCmp];
+      const indexOfMol = newList.findIndex(m => m.id === action.mol.id);
+      if (indexOfMol >= 0) {
+        newList[indexOfMol] = { ...action.mol };
+        return { ...state, observationsForLHSCmp: [...newList] };
+      } else {
+        return state;
+      }
+
     case constants.SET_SURFACE_LIST:
       let newSurfaceList = new Set();
       action.surfaceList.forEach(f => {

From 449eaa6b0e9ae77f133f9c58bc8d3c5563051eef Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Wed, 4 Sep 2024 20:39:34 +0200
Subject: [PATCH 08/17] #1458 adjusted functionality and styling to proper
 change tag

---
 .../molecule/moleculeView/moleculeView.js     |   3 +-
 .../observationCmpView/observationCmpView.js  |  10 +-
 .../preview/molecule/observationsDialog.js    | 105 +++++++++---------
 3 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
index 2e78f35fd..80012de7b 100644
--- a/js/components/preview/molecule/moleculeView/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -564,7 +564,8 @@ const MoleculeView = memo(
      * Get tag for render
      */
     const getTagType = useCallback((type) => {
-      const defaultTagObject = { tag_prefix: '-', color: 'orange' };
+      // TODO change this to null maybe?
+      const defaultTagObject = { tag_prefix: '-', color: 'orange', upload_name: '-' };
       const tagCategory = tagCategories.find(tag => tag.category === type);
       const tagObject = tagCategory ? getAllTags().find(tag => tag.category === tagCategory.id) : defaultTagObject;
       return tagObject ?? defaultTagObject;
diff --git a/js/components/preview/molecule/observationCmpView/observationCmpView.js b/js/components/preview/molecule/observationCmpView/observationCmpView.js
index c6fd28ad2..f18d11ee3 100644
--- a/js/components/preview/molecule/observationCmpView/observationCmpView.js
+++ b/js/components/preview/molecule/observationCmpView/observationCmpView.js
@@ -642,7 +642,7 @@ const ObservationCmpView = memo(
       }, [getConformerSitesTagCategory, observations, tagList]);
 
       /**
-       * Get ConformerSites tag for render
+       * Get CanonSites tag for render
        */
       const getCanonSitesTag = useCallback(() => {
         const canonSitesCategory = getCanonSitesTagCategory();
@@ -749,7 +749,7 @@ const ObservationCmpView = memo(
                             }
                           }}
                           style={{ padding: 0, paddingBottom: 3, marginRight: 5, position: 'right' }}
-                          // className={classes.editIcon}
+                        // className={classes.editIcon}
                         >
                           <Tooltip title="Edit tag" className={classes.editButtonIcon}>
                             <Edit />
@@ -814,7 +814,7 @@ const ObservationCmpView = memo(
                           }
                         }}
                         style={{ padding: 0, paddingBottom: 3, paddingRight: 5, cursor: 'pointer' }}
-                        // className={classes.editIcon}
+                      // className={classes.editIcon}
                       >
                         <Tooltip title="Edit tags" className={classes.editButtonIcon}>
                           <Edit />
@@ -893,7 +893,7 @@ const ObservationCmpView = memo(
                 }
               }}
               style={{ padding: 0, paddingBottom: 8, paddingRight: 5, cursor: 'pointer' }}
-              // className={classes.editIcon}
+            // className={classes.editIcon}
             >
               <Tooltip title="Edit tags" className={classes.editButtonIcon}>
                 <Edit />
@@ -1294,7 +1294,7 @@ const ObservationCmpView = memo(
               [classes.siteOpenObservations]: poseIdForObservationsDialog === data.id && isObservationDialogOpen
             })}
             wrap="nowrap"
-            // ref={ref}
+          // ref={ref}
           >
             {/* Site number */}
             <Grid item container justifyContent="space-between" direction="column" className={classes.site}>
diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js
index 9310a2e3b..4afa77319 100644
--- a/js/components/preview/molecule/observationsDialog.js
+++ b/js/components/preview/molecule/observationsDialog.js
@@ -171,6 +171,7 @@ const useStyles = makeStyles(theme => ({
   },
   dropdownItem: {
     fontSize: 12,
+    width: '100%',
     // fontWeight: 'bold',
     paddingLeft: theme.spacing(1) / 4,
     paddingRight: theme.spacing(1) / 4,
@@ -617,18 +618,18 @@ export const ObservationsDialog = memo(
     const getPanelHeight = useCallback(() => {
       let height = 0;
       if (anchorEl) {
-      // available height of the window - top position of the anchor element, ie pose from hit navigator - "bottom margin"
+        // available height of the window - top position of the anchor element, ie pose from hit navigator - "bottom margin"
         const maxHeight = window.innerHeight - anchorEl?.getBoundingClientRect().top - 13;
-      const observationsApproximateHeight = moleculeList.length * 47;
-      const headerFooterApproximateHeight = 87;
-      const totalApproximateHeight = observationsApproximateHeight + headerFooterApproximateHeight;
-      if (totalApproximateHeight > maxHeight) {
-        height = maxHeight;
-      } else if (totalApproximateHeight < MIN_PANEL_HEIGHT) {
-        height = MIN_PANEL_HEIGHT;
-      } else {
-        height = totalApproximateHeight;
-      }
+        const observationsApproximateHeight = moleculeList.length * 47;
+        const headerFooterApproximateHeight = 87;
+        const totalApproximateHeight = observationsApproximateHeight + headerFooterApproximateHeight;
+        if (totalApproximateHeight > maxHeight) {
+          height = maxHeight;
+        } else if (totalApproximateHeight < MIN_PANEL_HEIGHT) {
+          height = MIN_PANEL_HEIGHT;
+        } else {
+          height = totalApproximateHeight;
+        }
       } else {
         height = MIN_PANEL_HEIGHT;
       }
@@ -659,7 +660,7 @@ export const ObservationsDialog = memo(
       }
     };
 
-    const tagObservations = async tag => {
+    const tagObservations = async (tag, tagToExclude) => {
       try {
         // setTaggingInProgress(true);
 
@@ -678,12 +679,16 @@ export const ObservationsDialog = memo(
           if (!m.tags_set.some(id => id === tag.id)) {
             let newMol = { ...m };
             newMol.tags_set.push(tag.id);
+            // due to same cycle of tag and untag operations we need to exclude untagged tag because of "old" data
+            newMol.tags_set = newMol.tags_set.filter(id => id !== tagToExclude.id);
+
             const pose = poses.find(p => p.site_observations.includes(m.id));
             updateCmp(pose, newMol);
             dispatch(updateMoleculeInMolLists(newMol));
             dispatch(updateMoleculeInLHSObservations(newMol));
             const moleculeTag = getMoleculeTagForTag(tagList, tag.id);
             let mtObject = molTagObjects.find(mto => mto.tag === tag.tag);
+
             if (mtObject) {
               mtObject.site_observations.push(newMol.id);
             } else {
@@ -694,7 +699,7 @@ export const ObservationsDialog = memo(
                 DJANGO_CONTEXT.pk,
                 tagColor,
                 tag.discourse_url,
-                [...moleculeTag.site_observations, newMol.id],
+                [...moleculeTag.site_observations, newMol.id], // molecules:
                 tag.create_date,
                 tag.additional_info,
                 tag.mol_group,
@@ -741,13 +746,14 @@ export const ObservationsDialog = memo(
         observationsDataList.forEach(m => {
           let newMol = { ...m };
           newMol.tags_set = newMol.tags_set.filter(id => id !== tag.id);
+
           const pose = poses.find(p => p.site_observations.includes(m.id));
           updateCmp(pose, newMol);
           dispatch(updateMoleculeInMolLists(newMol));
           dispatch(updateMoleculeInLHSObservations(newMol));
           const moleculeTag = getMoleculeTagForTag(tagList, tag.id);
-
           let mtObject = molTagObjects.find(mto => mto.tag === tag.tag);
+
           if (mtObject) {
             mtObject.site_observations = mtObject.site_observations.filter(id => id !== m.id);
           } else {
@@ -760,7 +766,7 @@ export const ObservationsDialog = memo(
               DJANGO_CONTEXT.pk,
               tagColor,
               tag.discourse_url,
-              newMolList,
+              newMolList, // molecules:
               tag.create_date,
               tag.additional_info,
               tag.mol_group,
@@ -794,8 +800,6 @@ export const ObservationsDialog = memo(
         // console.log('firstSelectedObs?', { ...firstSelectedObs });
         const pose = poses.find(pose => pose.id === firstSelectedObs.pose);
         const mainObservation = observationsDataList.find(observation => observation.id === pose.main_site_observation);
-        console.log('pose?', { ...pose });
-        console.log('mainObservation?', { ...mainObservation });
         if (mainObservation) {
           // tagList.filter(tag => {
 
@@ -820,18 +824,16 @@ export const ObservationsDialog = memo(
      *
      * @param {*} tag
      */
-    const handleChangeXCAtag = async tag => {
-      console.log('tag', { ...tag });
-      console.log('untagging');
-      // untag first
+    const handleXCAtagChange = async tag => {
       const mainObservationTag = getMainTagByCategory(tag.category);
+      // do not retag same tag
+      if (mainObservationTag && mainObservationTag.id === tag.id) return;
+      // untag first
       if (mainObservationTag) {
-        console.log('main tag', { ...mainObservationTag });
         await untagObservations(mainObservationTag);
       }
       // then tag
-      // await tagObservations(tag);
-      console.log('tagging');
+      await tagObservations(tag, mainObservationTag);
       toastInfo(`Tag for observations was changed from "${mainObservationTag.upload_name}" to "${tag.upload_name}". They could disappear based on your tag selection`, { autoHideDuration: 5000 });
     };
 
@@ -992,8 +994,8 @@ export const ObservationsDialog = memo(
                             {['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(
                               (tagCategory, index) => (
                                 <Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
-                              {PLURAL_TO_SINGULAR[tagCategory]}
-                            </Grid>
+                                  {PLURAL_TO_SINGULAR[tagCategory]}
+                                </Grid>
                               )
                             )}
                             <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.CentroidRes }}>
@@ -1119,35 +1121,36 @@ export const ObservationsDialog = memo(
                         ))}
                       </Grid>
                     </Grid>
-                  {/* <Grid item className={classNames({ [classes.dropdown]: true })}>
-                    <Button
-                      color="inherit"
-                      variant="text"
-                      size="small"
-                      data-id="manageGrouping"
-                      endIcon={<KeyboardArrowDown />}
-                      className={classNames(classes.contColButton, classes.contColButtonBottomRow)}
-                    >
-                      Change XCA tags
-                    </Button>
-                    <Grid container direction="column" className={classes.dropdownContent}>
-                      {XCA_TAG_CATEGORIES.map(category =>
-                        <Grid key={category} item className={classNames(classes.dropdown, classes.dropdownItem)}>
-                          Change {category}
-                          <Grid container direction="row" className={classNames(classes.dropdownContent, classes.dropdownContentSide)}>
-                            {getTagsForCategory(category)?.map(tag => (
-                              <Grid key={tag.id} item className={classes.dropdownItem} onClick={() => handleChangeXCAtag(tag)}>
-                                {tag.upload_name}
-                              </Grid>
-                            ))}
+                    <Grid item className={classNames({ [classes.dropdown]: true })} style={{ marginRight: 9 }}>
+                      <Button
+                        color="inherit"
+                        variant="text"
+                        size="small"
+                        data-id="manageGrouping"
+                        endIcon={<KeyboardArrowDown />}
+                        className={classNames(classes.contColButton, classes.contColButtonBottomRow)}
+                      >
+                        Change XCA tags
+                      </Button>
+                      <Grid container direction="row" className={classes.dropdownContent}>
+                        {XCA_TAG_CATEGORIES.map(category =>
+                          <Grid key={category} item className={classNames(classes.dropdown, classes.dropdownItem)}>
+                            Change {PLURAL_TO_SINGULAR[category]}
+                            <Grid container direction="row" className={classNames(classes.dropdownContent, classes.dropdownContentSide)}>
+                              {getTagsForCategory(category)?.map(tag => (
+                                <Grid key={tag.id} item className={classes.dropdownItem} onClick={() => handleXCAtagChange(tag)}>
+                                  {tag.upload_name}
+                                </Grid>
+                              ))}
+                            </Grid>
                           </Grid>
-                        </Grid>
-              )}
+                        )}
+                      </Grid>
                     </Grid>
-                  </Grid> */}
+                  </Grid>
                 </Grid>
               )}
-            </>
+            </Grid>
           )}
           {isLoadingInspirationListOfMolecules === true && (
             <Grid container alignItems="center" justifyContent="center">

From 71936160ca3c7b7174e34bd6e48b32ea5c2a8798 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Thu, 12 Sep 2024 15:42:28 +0200
Subject: [PATCH 09/17] #1508 removed TagName column in expanded observation
 dialog, changed order of columns, adjusted labels and tooltips, show
 observation dialog in its full height

---
 .../molecule/moleculeView/moleculeView.js     | 34 +++++++++----------
 .../observationCmpView/observationCmpView.js  |  2 +-
 .../preview/molecule/observationsDialog.js    | 25 ++++++--------
 js/components/target/targetList.js            |  6 ++--
 js/reducers/ngl/dispatchActions.js            |  1 +
 5 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
index 80012de7b..faa448e84 100644
--- a/js/components/preview/molecule/moleculeView/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -476,7 +476,8 @@ const MoleculeView = memo(
       setTagEditModalOpenNew(tagEditorOpenObs);
     }, [tagEditorOpenObs]);
 
-    const XCA_TAGS_CATEGORIES = ['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'];
+    const XCA_TAGS_CATEGORIES = ['CanonSites', 'ConformerSites', 'Quatassemblies', 'Crystalforms', 'CrystalformSites'];
+    const XCA_TAGS_CATEGORIES_EXPANDED = ['Quatassemblies', 'ConformerSites', 'Crystalforms', 'CrystalformSites', 'CanonSites'];
 
     useEffect(() => {
       api({
@@ -516,7 +517,6 @@ const MoleculeView = memo(
 
     useEffect(() => {
       if (showExpandedView) {
-        setHeaderWidthsHandler(getTagType('CanonSites')?.tag, 'TagName');
         setHeaderWidthsHandler(centroidRes, 'CentroidRes');
         setHeaderWidthsHandler(data.longcode, 'LongCode');
         XCA_TAGS_CATEGORIES.forEach(tagCategory => {
@@ -1121,17 +1121,20 @@ const MoleculeView = memo(
       const tagTypeObject = getTagType(tagCategory);
       let tagLabel = '';
       if (tagTypeObject) {
-        if (tagCategory === 'CrystalformSites') {
-          // "chop" more of CrystalformSites name
-          tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1).trim();
-          tagLabel = tagLabel.substring(tagLabel.indexOf('-') + 1).trim();
-        } else {
-          tagLabel = tagTypeObject.upload_name.substring(tagTypeObject.upload_name.indexOf('-') + 1).trim();
-        }
+        tagLabel = tagTypeObject.tag;
       }
       return tagLabel;
     }, [getTagType]);
 
+    const getTagTooltip = useCallback(tagCategory => {
+      const tagTypeObject = getTagType(tagCategory);
+      let tagTooltip = '';
+      if (tagTypeObject) {
+        tagTooltip = tagTypeObject.upload_name;
+      }
+      return tagTooltip;
+    }, [getTagType]);
+
     return (
       <>
         <Grid
@@ -1175,7 +1178,7 @@ const MoleculeView = memo(
               <Grid item container justifyContent="flex-start" alignItems="center" direction="row">
                 <Grid item container justifyContent="space-between" direction="column" xs={3}>
                   {/* Title label */}
-                  <Tooltip title={moleculeTitle + (data.id === pose?.main_site_observation ? " - main observation" : "")} placement="bottom-start">
+                  <Tooltip title={data.prefix_tooltip ?? '-' + (data.id === pose?.main_site_observation ? " - main observation" : "")} placement="bottom-start">
                     <Grid
                       item
                       onCopy={e => {
@@ -1435,7 +1438,7 @@ const MoleculeView = memo(
                     const tagLabel = tagCategory === 'ConformerSites' ? tagTypeObject.tag_prefix.replace(getTagType('CanonSites')?.tag_prefix, '') : tagTypeObject?.tag_prefix;
                     return <Tooltip
                       key={`tag-category-${tagCategory}`}
-                      title={<div style={{ whiteSpace: 'pre-line' }}>{PLURAL_TO_SINGULAR[tagCategory]} - {tagTypeObject.upload_name}</div>}
+                      title={<div style={{ whiteSpace: 'pre-line' }}>{PLURAL_TO_SINGULAR[tagCategory]} - {tagTypeObject.tag}</div>}
                     >
                       <Grid item xs
                         className={classNames(classes.contColButtonMenu)}
@@ -1485,13 +1488,8 @@ const MoleculeView = memo(
               </div>}
           </Grid>
           {showExpandedView && <Grid item container alignItems='center' wrap="nowrap">
-            <Tooltip title={"CanonSite TagName"}>
-              <Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths.TagName }}>
-                {getTagType('CanonSites')?.tag}
-              </Grid>
-            </Tooltip>
-            {XCA_TAGS_CATEGORIES.map((tagCategory, index) => {
-              return <Tooltip title={PLURAL_TO_SINGULAR[tagCategory]} key={index}>
+            {XCA_TAGS_CATEGORIES_EXPANDED.map((tagCategory, index) => {
+              return <Tooltip title={`${PLURAL_TO_SINGULAR[tagCategory]} - ${getTagTooltip(tagCategory)}`} key={index}>
                 <Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths[tagCategory] }}>
                   {getTagLabel(tagCategory)}
                 </Grid>
diff --git a/js/components/preview/molecule/observationCmpView/observationCmpView.js b/js/components/preview/molecule/observationCmpView/observationCmpView.js
index f18d11ee3..a4e33dffd 100644
--- a/js/components/preview/molecule/observationCmpView/observationCmpView.js
+++ b/js/components/preview/molecule/observationCmpView/observationCmpView.js
@@ -1328,7 +1328,7 @@ const ObservationCmpView = memo(
             </Grid>
             <Grid item container className={classes.detailsCol} justifyContent="space-evenly" direction="column" xs={2}>
               {/* Title label */}
-              <Tooltip title={moleculeTitle} placement="bottom-start">
+              <Tooltip title={getMainObservation()?.prefix_tooltip ?? '-'} placement="bottom-start">
                 <Grid
                   item
                   onCopy={e => {
diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js
index 4afa77319..c57e617db 100644
--- a/js/components/preview/molecule/observationsDialog.js
+++ b/js/components/preview/molecule/observationsDialog.js
@@ -268,7 +268,8 @@ export const ObservationsDialog = memo(
     const getCalculatedTagColumnWidth = (tagText, font = null) => {
       const canvas = document.createElement("canvas");
       const ctx = canvas.getContext("2d");
-      ctx.font = font ?? '12px';
+      ctx.font = `${(font ?? '12px')} "Roboto", "Helvetica", "Arial", sans-serif`;
+      // 16 as padding buffer
       const calculatedWidth = ctx.measureText(tagText).width + 16;
       return calculatedWidth;
     };
@@ -276,14 +277,13 @@ export const ObservationsDialog = memo(
     const [tagEditorAnchorEl, setTagEditorAnchorEl] = useState(null);
     const [expandView, setExpandView] = useState(null);
     const [headerWidths, setHeaderWidths] = useState({
-      TagName: getCalculatedTagColumnWidth('TagName'),
-      CanonSites: getCalculatedTagColumnWidth('CanonSites'),
+      Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
       ConformerSites: getCalculatedTagColumnWidth('ConformerSites'),
-      CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
       Crystalforms: getCalculatedTagColumnWidth('Crystalforms'),
-      Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
+      CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
+      CanonSites: getCalculatedTagColumnWidth('CanonSites'),
       CentroidRes: getCalculatedTagColumnWidth('CentroidRes'),
-      LongCode: getCalculatedTagColumnWidth('LongCode')
+      LongCode: getCalculatedTagColumnWidth('LongCode'),
     });
 
     /**
@@ -619,13 +619,13 @@ export const ObservationsDialog = memo(
       let height = 0;
       if (anchorEl) {
         // available height of the window - top position of the anchor element, ie pose from hit navigator - "bottom margin"
-        const maxHeight = window.innerHeight - anchorEl?.getBoundingClientRect().top - 13;
+        // const maxHeight = window.innerHeight - anchorEl?.getBoundingClientRect().top - 13;
         const observationsApproximateHeight = moleculeList.length * 47;
         const headerFooterApproximateHeight = 87;
         const totalApproximateHeight = observationsApproximateHeight + headerFooterApproximateHeight;
-        if (totalApproximateHeight > maxHeight) {
+        /*if (totalApproximateHeight > maxHeight) {
           height = maxHeight;
-        } else if (totalApproximateHeight < MIN_PANEL_HEIGHT) {
+        } else*/ if (totalApproximateHeight < MIN_PANEL_HEIGHT) {
           height = MIN_PANEL_HEIGHT;
         } else {
           height = totalApproximateHeight;
@@ -986,12 +986,9 @@ export const ObservationsDialog = memo(
                             container
                             justifyContent="space-around"
                             // adjust maxWidth if headers are a bit misplaced
-                            style={{ maxWidth: '77%', marginLeft: 95 }}
+                            style={{ maxWidth: '74%', marginLeft: 95 }}
                           >
-                            <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.TagName }} >
-                              TagName
-                            </Grid>
-                            {['CanonSites', 'ConformerSites', 'CrystalformSites', 'Crystalforms', 'Quatassemblies'].map(
+                            {['Quatassemblies', 'ConformerSites', 'Crystalforms', 'CrystalformSites', 'CanonSites'].map(
                               (tagCategory, index) => (
                                 <Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
                                   {PLURAL_TO_SINGULAR[tagCategory]}
diff --git a/js/components/target/targetList.js b/js/components/target/targetList.js
index 4318ab7f0..63afebd0f 100644
--- a/js/components/target/targetList.js
+++ b/js/components/target/targetList.js
@@ -296,7 +296,7 @@ export const TargetList = memo(() => {
       }
     }
     return initObject;
-  });
+  }, []);
 
   useEffect(() => {
     const init = initialize();
@@ -1145,8 +1145,8 @@ export const TargetList = memo(() => {
       filteredListOfTargets !== undefined
         ? filteredListOfTargets
         : listOfTargets !== undefined
-        ? listOfTargets
-        : target_id_list,
+          ? listOfTargets
+          : target_id_list,
       projectsList
     );
     const slice = combinations.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
diff --git a/js/reducers/ngl/dispatchActions.js b/js/reducers/ngl/dispatchActions.js
index f3ed7688d..c15f95588 100644
--- a/js/reducers/ngl/dispatchActions.js
+++ b/js/reducers/ngl/dispatchActions.js
@@ -77,6 +77,7 @@ export const loadObject = ({
     }
 
     console.count(`Before object is loaded`);
+    // versionFixedTarget can cause "Error: TypeError: path is null" in stage.loadFile
     return nglObjectDictionary[versionFixedTarget.OBJECT_TYPE]({
       stage,
       input_dict: versionFixedTarget,

From 12f83917b0d77ee6660c4fce41389cf8f7e43aab Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Fri, 13 Sep 2024 11:15:16 +0200
Subject: [PATCH 10/17] #1508 adjusted column order and width calculation

---
 .../molecule/moleculeView/moleculeView.js        | 10 ++++------
 .../preview/molecule/observationsDialog.js       | 16 ++++++++--------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
index faa448e84..1ffab6b4e 100644
--- a/js/components/preview/molecule/moleculeView/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -358,6 +358,8 @@ export const img_data_init = `<svg xmlns="http://www.w3.org/2000/svg" version="1
     <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.689655172413793s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
   </circle>  '</svg>`;
 
+export const XCA_TAGS_CATEGORIES = ['CanonSites', 'ConformerSites', 'Quatassemblies', 'Crystalforms', 'CrystalformSites'];
+
 const MoleculeView = memo(
   ({
     imageHeight,
@@ -476,9 +478,6 @@ const MoleculeView = memo(
       setTagEditModalOpenNew(tagEditorOpenObs);
     }, [tagEditorOpenObs]);
 
-    const XCA_TAGS_CATEGORIES = ['CanonSites', 'ConformerSites', 'Quatassemblies', 'Crystalforms', 'CrystalformSites'];
-    const XCA_TAGS_CATEGORIES_EXPANDED = ['Quatassemblies', 'ConformerSites', 'Crystalforms', 'CrystalformSites', 'CanonSites'];
-
     useEffect(() => {
       api({
         url: `${base_url}/api/canon_site_confs/`,
@@ -523,7 +522,7 @@ const MoleculeView = memo(
           setHeaderWidthsHandler(getTagLabel(tagCategory), tagCategory);
         })
       }
-    }, [showExpandedView, getTagType, getTagLabel, centroidRes, data.longcode, setHeaderWidthsHandler, XCA_TAGS_CATEGORIES]);
+    }, [showExpandedView, getTagType, getTagLabel, centroidRes, data.longcode, setHeaderWidthsHandler]);
 
     const handlePopoverOpen = event => {
       setTagPopoverOpen(event.currentTarget);
@@ -1428,7 +1427,6 @@ const MoleculeView = memo(
                   xs={5}
                   container
                   direction="row"
-                  justifyContent="center"
                   alignItems="center"
                   // wrap="nowrap"
                   style={{ height: "100%" }}
@@ -1488,7 +1486,7 @@ const MoleculeView = memo(
               </div>}
           </Grid>
           {showExpandedView && <Grid item container alignItems='center' wrap="nowrap">
-            {XCA_TAGS_CATEGORIES_EXPANDED.map((tagCategory, index) => {
+            {XCA_TAGS_CATEGORIES.map((tagCategory, index) => {
               return <Tooltip title={`${PLURAL_TO_SINGULAR[tagCategory]} - ${getTagTooltip(tagCategory)}`} key={index}>
                 <Grid item align="center" className={classes.categoryCell} style={{ minWidth: headerWidths[tagCategory] }}>
                   {getTagLabel(tagCategory)}
diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js
index c57e617db..db194034d 100644
--- a/js/components/preview/molecule/observationsDialog.js
+++ b/js/components/preview/molecule/observationsDialog.js
@@ -53,6 +53,7 @@ import { updateLHSCompound, updateMoleculeInMolLists, updateMoleculeTag, updateT
 import { createPoseErrorMessage } from './api/poseApi';
 import { augumentTagObjectWithId, createMoleculeTagObject, DEFAULT_TAG_COLOR, getMoleculeTagForTag } from '../tags/utils/tagUtils';
 import { updateExistingTag } from '../tags/api/tagsApi';
+import { XCA_TAGS_CATEGORIES } from './moleculeView/moleculeView';
 
 const MIN_PANEL_HEIGHT = 250;
 
@@ -277,13 +278,13 @@ export const ObservationsDialog = memo(
     const [tagEditorAnchorEl, setTagEditorAnchorEl] = useState(null);
     const [expandView, setExpandView] = useState(null);
     const [headerWidths, setHeaderWidths] = useState({
-      Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
+      CanonSites: getCalculatedTagColumnWidth('CanonSites'),
       ConformerSites: getCalculatedTagColumnWidth('ConformerSites'),
+      Quatassemblies: getCalculatedTagColumnWidth('Quatassemblies'),
       Crystalforms: getCalculatedTagColumnWidth('Crystalforms'),
       CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
-      CanonSites: getCalculatedTagColumnWidth('CanonSites'),
       CentroidRes: getCalculatedTagColumnWidth('CentroidRes'),
-      LongCode: getCalculatedTagColumnWidth('LongCode'),
+      LongCode: getCalculatedTagColumnWidth('LongCode')
     });
 
     /**
@@ -292,7 +293,7 @@ export const ObservationsDialog = memo(
      * @param {*} tagCategory
      */
     const setHeaderWidthsHandler = (tagText, tagCategory) => {
-      const calculatedWidth = getCalculatedTagColumnWidth(tagText, '12px bold');
+      const calculatedWidth = getCalculatedTagColumnWidth(tagText, 'bold 12px');
       if (headerWidths[tagCategory] < calculatedWidth) {
         setHeaderWidths(old => {
           const newWidths = { ...old };
@@ -984,11 +985,10 @@ export const ObservationsDialog = memo(
                             item
                             xs
                             container
-                            justifyContent="space-around"
-                            // adjust maxWidth if headers are a bit misplaced
-                            style={{ maxWidth: '74%', marginLeft: 95 }}
+                            alignItems="center"
+                            style={{ marginLeft: 95 }}
                           >
-                            {['Quatassemblies', 'ConformerSites', 'Crystalforms', 'CrystalformSites', 'CanonSites'].map(
+                            {XCA_TAGS_CATEGORIES.map(
                               (tagCategory, index) => (
                                 <Grid item align="center" key={index} className={classes.headerCell} style={{ minWidth: headerWidths[tagCategory] }}>
                                   {PLURAL_TO_SINGULAR[tagCategory]}

From e6b563bfda2a4f91e80076e4add1a8786957c05f Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Tue, 17 Sep 2024 16:27:11 +0200
Subject: [PATCH 11/17] #1501 added upload links to menu

---
 js/components/header/index.js     | 28 ++++++++++++++++++++++++++--
 js/components/routes/constants.js |  4 ++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/js/components/header/index.js b/js/components/header/index.js
index 484316a02..11ba81ab1 100644
--- a/js/components/header/index.js
+++ b/js/components/header/index.js
@@ -68,6 +68,7 @@ import { AddProjectDetail } from '../projects/addProjectDetail';
 import { ServicesStatusWrapper } from '../services';
 import { COMPANIES, get_logo } from '../funders/constants';
 import { setEditTargetDialogOpen } from '../target/redux/actions';
+import { Upload } from '@mui/icons-material';
 
 const useStyles = makeStyles(theme => ({
   padding: {
@@ -272,8 +273,8 @@ export default memo(
                   targetName !== undefined ? (
                     <>
                       {currentProject.authorID === null ||
-                      currentProject.projectID === null ||
-                      currentProject.authorID === userId ? (
+                        currentProject.projectID === null ||
+                        currentProject.authorID === userId ? (
                         <Button
                           onClick={() => {
                             isProjectModalLoading === false
@@ -574,6 +575,29 @@ export default memo(
                 </ListItemIcon>
                 <ListItemText primary="Contributors" />
               </ListItem>
+              {DJANGO_CONTEXT.pk &&
+                <>
+                  <Divider />
+                  <ListItem button onClick={() => openLink(URLS.lhsUpload)}>
+                    <ListItemIcon>
+                      <Upload />
+                    </ListItemIcon>
+                    <ListItemText primary="LHS upload" />
+                  </ListItem>
+                  <ListItem button onClick={() => openLink(URLS.rhsUpload)}>
+                    <ListItemIcon>
+                      <Upload />
+                    </ListItemIcon>
+                    <ListItemText primary="RHS upload" />
+                  </ListItem>
+                  <ListItem button onClick={() => openLink(URLS.metadataUpload)}>
+                    <ListItemIcon>
+                      <Upload />
+                    </ListItemIcon>
+                    <ListItemText primary="Metadata upload" />
+                  </ListItem>
+                </>
+              }
               <Divider />
               {authListItem}
             </Grid>
diff --git a/js/components/routes/constants.js b/js/components/routes/constants.js
index 0ffb0f797..6f6429d57 100644
--- a/js/components/routes/constants.js
+++ b/js/components/routes/constants.js
@@ -9,6 +9,10 @@ export const URLS = {
   funders: '/viewer/react/funders/',
   target: '/viewer/react/preview/target/',
 
+  lhsUpload: '/api/upload_target_experiments/',
+  rhsUpload: '/viewer/upload_cset/',
+  metadataUpload: '/api/metadata_upload/',
+
   // Projects feature
   projects: '/viewer/react/projects/',
   // Direct feature

From b24340d7dbf3620cf21aac0d94c3888714459205 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Wed, 25 Sep 2024 17:05:35 +0200
Subject: [PATCH 12/17] #1520 show tag alias instead of upload_name on hit
 navigator CanonSites & ConformerSites box tooltip

---
 .../preview/molecule/observationCmpView/observationCmpView.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/components/preview/molecule/observationCmpView/observationCmpView.js b/js/components/preview/molecule/observationCmpView/observationCmpView.js
index a4e33dffd..efb52fe60 100644
--- a/js/components/preview/molecule/observationCmpView/observationCmpView.js
+++ b/js/components/preview/molecule/observationCmpView/observationCmpView.js
@@ -1611,7 +1611,7 @@ const ObservationCmpView = memo(
             {/* CanonSites */}
             <Grid item xs container direction="column" justifyContent="center" alignItems="stretch" wrap="nowrap">
               <Tooltip
-                title={<div style={{ whiteSpace: 'pre-line' }}>CanonSite - {getCanonSitesTag().upload_name}</div>}
+                title={<div style={{ whiteSpace: 'pre-line' }}>CanonSite - {getCanonSitesTag().tag}</div>}
               >
                 <Grid
                   item
@@ -1631,7 +1631,7 @@ const ObservationCmpView = memo(
               {getConformerSites().map((conformerSite, i, sites) => (
                 <Tooltip
                   key={conformerSite.id + i}
-                  title={<div style={{ whiteSpace: 'pre-line' }}>ConformerSite - {conformerSite.upload_name}</div>}
+                  title={<div style={{ whiteSpace: 'pre-line' }}>ConformerSite - {conformerSite.tag}</div>}
                 >
                   <Grid
                     item

From dedd8368d78d18e9d3d6929834e02fddf3a750b3 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Wed, 25 Sep 2024 17:07:29 +0200
Subject: [PATCH 13/17] #1519 keep tag in edit window after save

---
 js/components/preview/tags/api/tagsApi.js     | 14 ++++++-------
 .../preview/tags/modal/editTagsModal.js       | 21 +++++++++++--------
 .../preview/tags/redux/dispatchActions.js     |  9 +++++++-
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/js/components/preview/tags/api/tagsApi.js b/js/components/preview/tags/api/tagsApi.js
index 3e9f52d3b..17f5ad061 100644
--- a/js/components/preview/tags/api/tagsApi.js
+++ b/js/components/preview/tags/api/tagsApi.js
@@ -11,7 +11,7 @@ import { getDefaultTagDiscoursePostText } from '../utils/tagUtils';
 //   });
 // };
 
-export const getTags = targetId => {
+export const getTags = async targetId => {
   return api({ url: `${base_url}/api/siteobservation_tag/?target=${targetId}` }).then(response => {
     if (response?.data) {
       return response.data;
@@ -19,7 +19,7 @@ export const getTags = targetId => {
   });
 };
 
-export const getTagCategories = () => {
+export const getTagCategories = async () => {
   return api({ url: `${base_url}/api/tag_category/` }).then(response => {
     if (response?.data) {
       return response.data?.results;
@@ -67,7 +67,7 @@ export const getTagMolecules = targetId => {
     .catch(err => console.log(err));
 };
 
-export const createNewTag = (tag, targetName) => {
+export const createNewTag = async (tag, targetName) => {
   let url = `${base_url}/api/siteobservation_tag/`;
   if (isDiscourseAvailable()) {
     return createTagPost(tag, targetName, getDefaultTagDiscoursePostText(tag))
@@ -101,7 +101,7 @@ export const createNewTag = (tag, targetName) => {
   }
 };
 
-export const createNewDownloadTag = tag => {
+export const createNewDownloadTag = async tag => {
   let url = `${base_url}/api/siteobservation_tag/`;
   const jsonString = JSON.stringify(tag);
   return api({
@@ -115,7 +115,7 @@ export const createNewDownloadTag = tag => {
     .catch(err => console.log(err));
 };
 
-export const updateExistingTag = (tag, tagId) => {
+export const updateExistingTag = async (tag, tagId) => {
   const jsonString = JSON.stringify(tag);
   let url = `${base_url}/api/siteobservation_tag/${tagId}/`;
   return api({
@@ -129,7 +129,7 @@ export const updateExistingTag = (tag, tagId) => {
     .catch(err => console.log(err));
 };
 
-export const getTagByName = tagName => {
+export const getTagByName = async tagName => {
   let url = `${base_url}/api/siteobservation_tag/?tag=${tagName}`;
   return api({ url: url }).then(response => {
     if (response?.data?.results?.length > 0) {
@@ -138,7 +138,7 @@ export const getTagByName = tagName => {
   });
 };
 
-export const deleteExistingTag = (tag, tagId) => {
+export const deleteExistingTag = async (tag, tagId) => {
   const jsonString = JSON.stringify(tag);
   let url = `${base_url}/api/siteobservation_tag/${tagId}/`;
   return api({
diff --git a/js/components/preview/tags/modal/editTagsModal.js b/js/components/preview/tags/modal/editTagsModal.js
index 77a5d2b36..dc6578102 100644
--- a/js/components/preview/tags/modal/editTagsModal.js
+++ b/js/components/preview/tags/modal/editTagsModal.js
@@ -12,6 +12,7 @@ import { removeSelectedTag, updateTagProp } from "../redux/dispatchActions";
 import { getCategoryById } from "../../molecule/redux/dispatchActions";
 import { ToastContext } from "../../../toast";
 import { TAG_DETAILS_REMOVED_CATEGORIES } from "../../../../constants/constants";
+import { setTagToEdit } from "../../../../reducers/selection/actions";
 
 const useStyles = makeStyles(theme => ({
     leftSide: {
@@ -44,9 +45,9 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
     const allMolList = useSelector(state => state.apiReducers.all_mol_lists);
     const moleculesToEditIds = useSelector(state => state.selectionReducers.moleculesToEdit);
     const selectedTagList = useSelector(state => state.selectionReducers.selectedTagList);
+    const tag = useSelector(state => state.selectionReducers.tagToEdit);
 
     const id = open ? 'simple-popover-tags-editor' : undefined;
-    const [tag, setTag] = useState(null);
     const [tags, setTags] = useState([NEW_TAG]);
     const [newTagColor, setNewTagColor] = useState(DEFAULT_TAG_COLOR);
     const [newTagName, setNewTagName] = useState('');
@@ -90,7 +91,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
         });
         setTags([NEW_TAG, ...newTagList.sort(compareTagsByCategoryAndNameAsc)]);
         return () => {
-            setTag(null);
+            // dispatch(setTagToEdit(null)); // uncomment this to reset tag after update - clean up moved to resetTagToEditState
             setTags([NEW_TAG]);
         };
     }, [preTagList, tagCategories]);
@@ -105,7 +106,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
             setNewTagLink(tag.discourse_url);
             setNewHidden(tag.hidden || false);
         }
-    }, [dispatch, getColourForTag, tag]);
+    }, [getColourForTag, tag]);
 
     const comboCategories = useMemo(() => {
         return getEditNewTagCategories(tagCategories);
@@ -139,6 +140,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
         setNewTagName('');
         setNewTagLink('');
         setNewHidden(false);
+        dispatch(setTagToEdit(null));
     };
 
     const onCategoryForNewTagChange = event => {
@@ -211,7 +213,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
         }
     };
 
-    const updateTag = () => {
+    const updateTag = async () => {
         if (validateTag() && tag && newTagCategory && newTagName) {
             if (!tag.hidden && newHidden && selectedTagList.some(selectedTag => selectedTag.id === tag.id)) {
                 dispatch(removeSelectedTag(tag));
@@ -219,7 +221,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
             }
             // update all props at once
             if (newTagCategory) {
-                dispatch(
+                const updatedTag = await dispatch(
                     updateTagProp(
                         Object.assign({}, tag, {
                             category: newTagCategory,
@@ -232,8 +234,9 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
                         'tag'
                     )
                 );
+                dispatch(setTagToEdit(updatedTag));
             } else {
-                dispatch(
+                const updatedTag = await dispatch(
                     updateTagProp(
                         Object.assign({}, tag, {
                             colour: newTagColor,
@@ -245,10 +248,9 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
                         'tag'
                     )
                 );
+                dispatch(setTagToEdit(updatedTag));
             }
             toastInfo('Tag was updated', { autoHideDuration: 5000 });
-            // reset tag/fields after updating selected one
-            resetTagToEditState();
         }
     };
 
@@ -278,6 +280,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
     const handleCloseModal = () => {
         if (open) {
             setOpenDialog(false);
+            resetTagToEditState();
         }
     };
 
@@ -326,7 +329,7 @@ export const EditTagsModal = memo(({ open, anchorEl, setOpenDialog }) => {
                     {rightSide(
                         <Select
                             value={tag?.id || 0}
-                            onChange={(event) => setTag(tags.find(tag => tag.id === event.target.value))}
+                            onChange={(event) => dispatch(setTagToEdit(tags.find(tag => tag.id === event.target.value)))}
                             fullWidth
                         >
                             {tags?.map(tag => (
diff --git a/js/components/preview/tags/redux/dispatchActions.js b/js/components/preview/tags/redux/dispatchActions.js
index 4ec6820c4..347e71a22 100644
--- a/js/components/preview/tags/redux/dispatchActions.js
+++ b/js/components/preview/tags/redux/dispatchActions.js
@@ -127,9 +127,16 @@ export const storeData = data => (dispatch, getState) => {
   dispatch(setTagSelectorData(categories, tags));
 
   let allMolecules = [];
-  data.molecules.forEach(mol => {});
+  data.molecules.forEach(mol => { });
 };
 
+/**
+ *
+ * @param {Object} tag tag object
+ * @param {*} value new value
+ * @param {*} prop name of the prop to be updated
+ * @returns {Promise<Object>}
+ */
 export const updateTagProp = (tag, value, prop) => (dispatch, getState) => {
   const state = getState();
   const molTags = state.apiReducers.moleculeTags;

From 238b5c298b4547b556df8422bf6913ca23d12af0 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Mon, 30 Sep 2024 16:16:22 +0200
Subject: [PATCH 14/17] #1497 added Path column for extended view of
 observations

---
 .../molecule/moleculeView/moleculeView.js     | 36 +++++++++++++++++++
 .../preview/molecule/observationsDialog.js    |  4 +++
 2 files changed, 40 insertions(+)

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
index 1ffab6b4e..80c7dedbf 100644
--- a/js/components/preview/molecule/moleculeView/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -58,6 +58,8 @@ import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
 import { getFontColorByBackgroundColor } from '../../../../utils/colors';
 import { api, METHOD } from '../../../../utils/api';
 import { base_url } from '../../../routes/constants';
+import { ContentCopyRounded } from '@mui/icons-material';
+import { ToastContext } from '../../../toast';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -411,6 +413,7 @@ const MoleculeView = memo(
     const [tagEditModalOpenNew, setTagEditModalOpenNew] = useState(tagEditorOpenObs);
 
     const { getNglView } = useContext(NglContext);
+    const { toastInfo } = useContext(ToastContext);
     const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
 
     const isLigandOn = L;
@@ -465,6 +468,7 @@ const MoleculeView = memo(
     const [moleculeTooltipOpen, setMoleculeTooltipOpen] = useState(false);
     const [tagPopoverOpen, setTagPopoverOpen] = useState(null);
     const [centroidRes, setCentroidRes] = useState('');
+    const [experimentalPath, setExperimentalPath] = useState('');
 
     const moleculeImgRef = useRef(null);
 
@@ -514,6 +518,26 @@ const MoleculeView = memo(
         });
     }, [data.canon_site_conf]);
 
+    useEffect(() => {
+      api({
+        url: `${base_url}/api/experiments/`,
+        method: METHOD.GET
+      })
+        .then(resp => {
+          const experiment = resp.data.results.find(experiment => experiment.id === data.experiment);
+          if (experiment) {
+            setExperimentalPath(experiment.pdb_info_source_file ?? '');
+          } else {
+            console.log('there is not any matching canonSiteConf object with ' + data.experiment + ' id');
+            setExperimentalPath('');
+          }
+        })
+        .catch(err => {
+          console.log('error fetching experiment from experiments api', err);
+          setExperimentalPath('');
+        });
+    }, [data.experiment]);
+
     useEffect(() => {
       if (showExpandedView) {
         setHeaderWidthsHandler(centroidRes, 'CentroidRes');
@@ -1134,6 +1158,11 @@ const MoleculeView = memo(
       return tagTooltip;
     }, [getTagType]);
 
+    const copyExperimentalPaths = async () => {
+      await navigator.clipboard.writeText(experimentalPath);
+      toastInfo('Link was copied to the clipboard', { autoHideDuration: 5000 });
+    };
+
     return (
       <>
         <Grid
@@ -1503,6 +1532,13 @@ const MoleculeView = memo(
                 {data.longcode}
               </Grid>
             </Tooltip>
+            <Tooltip title={experimentalPath.length > 0 ? experimentalPath : 'empty path'}>
+              <Grid item align="center" style={{ minWidth: headerWidths.Path }}>
+                <IconButton color="inherit" onClick={copyExperimentalPaths} size="small">
+                  <ContentCopyRounded fontSize="small" />
+                </IconButton>
+              </Grid>
+            </Tooltip>
           </Grid>}
         </Grid >
         <SvgTooltip
diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js
index a1171f9e6..a88c18ba8 100644
--- a/js/components/preview/molecule/observationsDialog.js
+++ b/js/components/preview/molecule/observationsDialog.js
@@ -285,6 +285,7 @@ export const ObservationsDialog = memo(
       CrystalformSites: getCalculatedTagColumnWidth('CrystalformSites'),
       CentroidRes: getCalculatedTagColumnWidth('CentroidRes'),
       LongCode: getCalculatedTagColumnWidth('LongCode'),
+      Path: getCalculatedTagColumnWidth('Path')
     });
 
     /**
@@ -1001,6 +1002,9 @@ export const ObservationsDialog = memo(
                             <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.LongCode }}>
                               LongCode
                             </Grid>
+                            <Grid item align="center" className={classes.headerCell} style={{ minWidth: headerWidths.Path }}>
+                              Path
+                            </Grid>
                           </Grid>
                         )}
                       </Grid>

From cdbb897923d1452260b7abc512f81279898cbbbe Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Thu, 10 Oct 2024 13:07:04 +0200
Subject: [PATCH 15/17] #1518 properly remove tag from list after updating its
 object

---
 js/reducers/selection/selectionReducers.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/js/reducers/selection/selectionReducers.js b/js/reducers/selection/selectionReducers.js
index 5f4e5e4c7..05c265feb 100644
--- a/js/reducers/selection/selectionReducers.js
+++ b/js/reducers/selection/selectionReducers.js
@@ -455,7 +455,21 @@ export function selectionReducers(state = INITIAL_STATE, action = {}) {
 
     case constants.REMOVE_FROM_SELECTED_TAG_LIST:
       let diminishedSelectedTagList = new Set(state.selectedTagList);
-      diminishedSelectedTagList.delete(action.item);
+      // TODO sometimes tag object changes for its updated version
+      // handle it here or replace it in set in every place of change?
+      if (diminishedSelectedTagList.has(action.item)) {
+        diminishedSelectedTagList.delete(action.item);
+      } else {
+        let tagToDelete = null;
+        diminishedSelectedTagList.forEach(tag => {
+          if (tag.id === action.item.id) {
+            tagToDelete = tag;
+          }
+        });
+        if (tagToDelete) {
+          diminishedSelectedTagList.delete(tagToDelete);
+        }
+      }
       return Object.assign({}, state, { selectedTagList: [...diminishedSelectedTagList] });
 
     case constants.SET_IS_TAG_GLOBAL_EDIT:

From 37b885dbe173a14e02791646863b21876e10b202 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Thu, 10 Oct 2024 13:08:18 +0200
Subject: [PATCH 16/17] #1522 allow to change XCA tags for selections but not
 for CanonSite

---
 .../preview/molecule/observationsDialog.js    | 47 ++++++++++++++-----
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/js/components/preview/molecule/observationsDialog.js b/js/components/preview/molecule/observationsDialog.js
index a88c18ba8..09527cf83 100644
--- a/js/components/preview/molecule/observationsDialog.js
+++ b/js/components/preview/molecule/observationsDialog.js
@@ -176,9 +176,12 @@ const useStyles = makeStyles(theme => ({
     // fontWeight: 'bold',
     paddingLeft: theme.spacing(1) / 4,
     paddingRight: theme.spacing(1) / 4,
-    '&:hover': {
+    '&:hover:not([disabled])': {
       cursor: 'pointer',
       backgroundColor: theme.palette.primary.light
+    },
+    '&:is([disabled])': {
+      color: theme.palette.dividerDark
     }
   },
   dropdownContentSide: {
@@ -662,6 +665,16 @@ export const ObservationsDialog = memo(
       }
     };
 
+    /**
+     * Get observation list for un/tagging
+     *
+     * @returns {Object[]} observations
+     */
+    const observationsForTagOperations = useMemo(() => {
+      // observationsDataList - all observations, moleculeList - filtered, allSelectedMolecules - selected
+      return allSelectedMolecules.length > 0 ? allSelectedMolecules : moleculeList;
+    }, [allSelectedMolecules, moleculeList]);
+
     const tagObservations = async (tag, tagToExclude) => {
       try {
         // setTaggingInProgress(true);
@@ -677,7 +690,7 @@ export const ObservationsDialog = memo(
         }
 
         let molTagObjects = [];
-        observationsDataList.forEach(m => {
+        observationsForTagOperations.forEach(m => {
           if (!m.tags_set.some(id => id === tag.id)) {
             let newMol = { ...m };
             newMol.tags_set.push(tag.id);
@@ -745,7 +758,7 @@ export const ObservationsDialog = memo(
         }
 
         let molTagObjects = [];
-        observationsDataList.forEach(m => {
+        observationsForTagOperations.forEach(m => {
           let newMol = { ...m };
           newMol.tags_set = newMol.tags_set.filter(id => id !== tag.id);
 
@@ -839,6 +852,17 @@ export const ObservationsDialog = memo(
       toastInfo(`Tag for observations was changed from "${mainObservationTag.upload_name}" to "${tag.upload_name}". They could disappear based on your tag selection`, { autoHideDuration: 5000 });
     };
 
+    /**
+     * Decide if XCA tag change should not be allowed
+     *
+     * @param {string} category category of tag
+     * @returns {boolean}
+     */
+    const disableXCATagChange = useCallback(category => {
+      // #1522 CanonSite tags should not be allowed to change if there are selected only some observations
+      return category === 'CanonSites' && allSelectedMolecules.length > 0 && (allSelectedMolecules.length !== moleculeList.length);
+    }, [allSelectedMolecules, moleculeList]);
+
     return (
       <Popper id={id} open={open} anchorEl={anchorEl} placement="left-start" ref={ref}>
         <Panel
@@ -1135,15 +1159,16 @@ export const ObservationsDialog = memo(
                       </Button>
                       <Grid container direction="row" className={classes.dropdownContent}>
                         {XCA_TAG_CATEGORIES.map(category =>
-                          <Grid key={category} item className={classNames(classes.dropdown, classes.dropdownItem)}>
+                          <Grid key={category} item className={classNames(classes.dropdown, classes.dropdownItem)} disabled={disableXCATagChange(category)}>
                             Change {PLURAL_TO_SINGULAR[category]}
-                            <Grid container direction="row" className={classNames(classes.dropdownContent, classes.dropdownContentSide)}>
-                              {getTagsForCategory(category)?.map(tag => (
-                                <Grid key={tag.id} item className={classes.dropdownItem} onClick={() => handleXCAtagChange(tag)}>
-                                  {tag.upload_name}
-                                </Grid>
-                              ))}
-                            </Grid>
+                            {!disableXCATagChange(category) &&
+                              <Grid container direction="row" className={classNames(classes.dropdownContent, classes.dropdownContentSide)}>
+                                {getTagsForCategory(category)?.map(tag => (
+                                  <Grid key={tag.id} item className={classes.dropdownItem} onClick={() => handleXCAtagChange(tag)}>
+                                    {tag.upload_name}
+                                  </Grid>
+                                ))}
+                              </Grid>}
                           </Grid>
                         )}
                       </Grid>

From 4d8ea0ce254b6239d6d72503317124b41ee27622 Mon Sep 17 00:00:00 2001
From: matej <matej.vavrek@m2ms.sk>
Date: Mon, 14 Oct 2024 08:52:06 +0200
Subject: [PATCH 17/17] #1463 initial implementation of new sort options for
 hit navigator

---
 .../preview/molecule/observationCmpList.js    | 123 +++++++++++++++++-
 1 file changed, 118 insertions(+), 5 deletions(-)

diff --git a/js/components/preview/molecule/observationCmpList.js b/js/components/preview/molecule/observationCmpList.js
index 7d64179ea..c8df5b25f 100644
--- a/js/components/preview/molecule/observationCmpList.js
+++ b/js/components/preview/molecule/observationCmpList.js
@@ -10,7 +10,10 @@ import {
   Divider,
   Typography,
   IconButton,
-  ButtonGroup
+  ButtonGroup,
+  Select,
+  MenuItem,
+  Checkbox
 } from '@material-ui/core';
 import React, { useState, useEffect, useCallback, memo, useRef, useContext, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -321,6 +324,89 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
 
   const [predefinedFilter, setPredefinedFilter] = useState(filter !== undefined ? filter.predefined : DEFAULT_FILTER);
 
+  const [ascending, setAscending] = useState(true);
+  const handleAscendingChecked = (event) => setAscending(event.target.checked);
+  const SORT_OPTIONS = [
+    'POSE_NAME',
+    'COMPOUND_CODE',
+    'CANONSITE_NUMBER',
+    'CONFORMERSITE_NUMBER',
+    'OBSERVATION_COUNT'
+  ];
+  const sortOptions = {
+    POSE_NAME: {
+      title: 'Pose name',
+      handler: (a, b, asc) => compareByPoseName(a, b, asc)
+    },
+    COMPOUND_CODE: {
+      title: 'Compound code',
+      handler: (a, b, asc) => compareByCompoundCode(a, b, asc)
+    },
+    CANONSITE_NUMBER: {
+      title: 'CanonSite number',
+      handler: (a, b, asc) => compareByCanonSiteNumber(a, b, asc)
+    },
+    CONFORMERSITE_NUMBER: {
+      title: 'ConformerSite number',
+      handler: (a, b, asc) => compareByConformerSiteNumber(a, b, asc)
+    },
+    OBSERVATION_COUNT: {
+      title: 'Observation count',
+      handler: (a, b, asc) => compareByObservationCount(a, b, asc)
+    }
+  };
+  const [sortOption, setSortOption] = useState(SORT_OPTIONS[0]);
+
+  const compareByPoseName = (a, b, asc) => {
+    const aName = a.code;
+    const bName = b.code;
+    return asc ? aName.localeCompare(bName, undefined, { numeric: true, sensitivity: 'base' })
+      : bName.localeCompare(aName, undefined, { numeric: true, sensitivity: 'base' });
+  };
+  const compareByCompoundCode = (a, b, asc) => {
+    const aName = a.main_site_observation_cmpd_code;
+    const bName = b.main_site_observation_cmpd_code;
+    return asc ? aName.localeCompare(bName, undefined, { numeric: true, sensitivity: 'base' })
+      : bName.localeCompare(aName, undefined, { numeric: true, sensitivity: 'base' });
+  };
+  const compareByCanonSiteNumber = (a, b, asc) => {
+    const aName = getCanonSiteTagPrefix(a);
+    const bName = getCanonSiteTagPrefix(b);
+    return asc ? aName.localeCompare(bName, undefined, { numeric: true, sensitivity: 'base' })
+      : bName.localeCompare(aName, undefined, { numeric: true, sensitivity: 'base' });
+  };
+  const compareByConformerSiteNumber = (a, b, asc) => {
+    const aName = getConformerSiteTagPrefix(a);
+    const bName = getConformerSiteTagPrefix(b);
+    return asc ? aName.localeCompare(bName, undefined, { numeric: true, sensitivity: 'base' })
+      : bName.localeCompare(aName, undefined, { numeric: true, sensitivity: 'base' });
+  };
+  const compareByObservationCount = (a, b, asc) => {
+    const aCount = a.site_observations.length;
+    const bCount = b.site_observations.length;
+    return asc ? aCount - bCount : bCount - aCount;
+  };
+
+  /**
+   * Get CanonSites tag for sorting
+   */
+  const getCanonSiteTagPrefix = useCallback(pose => {
+    const mainObservation = pose.associatedObs.find(observation => observation.id === pose.main_site_observation);
+    const canonSitesTag = categories.find(tagCategory => tagCategory.category === 'CanonSites');
+    const canonSite = tags.find(tag => tag.category === canonSitesTag.id && tag.site_observations.includes(mainObservation.id));
+    return canonSite !== undefined ? canonSite.tag_prefix : '';
+  }, [categories, tags]);
+
+  /**
+   * Get ConformerSites tag for sorting
+   */
+  const getConformerSiteTagPrefix = useCallback(pose => {
+    const mainObservation = pose.associatedObs.find(observation => observation.id === pose.main_site_observation);
+    const conformerSitesTag = categories.find(tagCategory => tagCategory.category === 'ConformerSites');
+    const conformerSite = tags.find(tag => tag.category === conformerSitesTag.id && tag.site_observations.includes(mainObservation.id));
+    return conformerSite !== undefined ? conformerSite.tag_prefix : '';
+  }, [categories, tags]);
+
   const isActiveFilter = !!(filter || {}).active;
 
   const { getNglView } = useContext(NglContext);
@@ -718,8 +804,9 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
         compounds.push(compound);
       }
     });
+    compounds.sort((a, b) => sortOptions[sortOption].handler(a, b, ascending));
     return compounds;
-  }, [joinedMoleculeLists, lhsCompoundsList]);
+  }, [joinedMoleculeLists, lhsCompoundsList, sortOptions, sortOption, ascending]);
 
   useEffect(() => {
     if (isObservationDialogOpen && observationsForLHSCmp?.length > 0) {
@@ -1113,7 +1200,7 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
 
         {
           <Tooltip title={selectAllHitsPressed ? 'Unselect all hits' : 'Select all hits'}>
-            <Grid item style={{ marginLeft: '20px' }}>
+            <Grid item style={{ marginLeft: '5px' }}>
               <Button
                 variant="outlined"
                 className={classNames(classes.contColButton, {
@@ -1133,7 +1220,7 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
         }
         {selectedDisplayHits === true ? (
           <Tooltip title={'Unselect displayed hits'}>
-            <Grid item style={{ marginLeft: '20px' }}>
+            <Grid item style={{ marginLeft: '5px' }}>
               <Button
                 variant="outlined"
                 className={classNames(classes.contColButton, {
@@ -1152,7 +1239,7 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
           </Tooltip>
         ) : (
           <Tooltip title={'Select displayed hits'}>
-            <Grid item style={{ marginLeft: '20px' }}>
+            <Grid item style={{ marginLeft: '5px' }}>
               <Button
                 variant="outlined"
                 className={classNames(classes.contColButton, {
@@ -1174,6 +1261,32 @@ export const ObservationCmpList = memo(({ hideProjects }) => {
           <Typography variant="caption" className={classes.noOfSelectedHits}>{`Selected: ${allSelectedMolecules ? allSelectedMolecules.length : 0
             }`}</Typography>
         </Grid>
+        <Grid style={{ marginTop: '4px' }}>
+          <Typography variant="caption" className={classes.noOfSelectedHits}>Sort by</Typography>
+        </Grid>
+        <Grid style={{ marginTop: '4px', marginLeft: '4px' }}>
+          <Tooltip title={sortOption ? sortOptions[sortOption].title : "Sort by"}>
+            <Select
+              value={sortOption}
+              onChange={(event) => setSortOption(event.target.value)}
+              // fullWidth
+              size="small"
+              style={{ fontSize: 10, width: 75 }}
+            >
+              {SORT_OPTIONS.map((option, index) => (
+                <MenuItem key={`${index}-${option}`} value={option} style={{ fontSize: 12, padding: '3px 7px' }}>
+                  {sortOptions[option].title}
+                </MenuItem>
+              ))}
+            </Select>
+          </Tooltip>
+        </Grid>
+        <Tooltip title={ascending ? "Ascending" : "Descending"}>
+          <Grid style={{ marginTop: '4px' }}>
+            <Checkbox checked={ascending} onChange={handleAscendingChecked} size="small" style={{ padding: 3 }} />
+            <Typography variant="caption" className={classes.noOfSelectedHits}>ASC</Typography>
+          </Grid>
+        </Tooltip>
       </Grid>
       <Grid container spacing={1} direction="column" justifyContent="flex-start" className={classes.container}>
         <Grid item>