Implements #1376, #1361, #1354 (#412)

* - first implementation of #1354 * - updated message for #1354 * - cleanup for #1354 * - implemented #1361 - improvements for #1354 * - implemented #1376 - also fixed bug in download structures dialog where only first download got added to the dropdown menu
xchem · Mar 7, 2024 · 42fdbad · 42fdbad
1 parent 30bf9d1
commit 42fdbad
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 40 deletions.
diff --git a/docker-compose.dev.vector.yml b/docker-compose.dev.vector.yml
@@ -53,10 +53,10 @@ services:
       start_period: 10s
   web:
     container_name: web_dock
-    image: xchem/fragalysis-stack:latest
+    # image: xchem/fragalysis-stack:latest
     # image: alanbchristie/fragalysis-backend:1187.3
     # image: boriskovarm2ms/fragalysis-stack:experiment2
-    # image: kaliif/fragalysis-backend:latest
+    image: kaliif/fragalysis-backend:latest
     command: /bin/bash /code/launch-stack.sh
     volumes:
       - ../data/logs:/code/logs/

diff --git a/js/components/preview/molecule/moleculeView/moleculeView.js b/js/components/preview/molecule/moleculeView/moleculeView.js
@@ -455,11 +455,18 @@ const MoleculeView = memo(
       // const sortedData = [...allData].sort((a, b) => a.tag.localeCompare(b.tag));
 
       const modifiedObjects = allData.map(obj => {
-        const tagNameShortLength = 3;
-        if (obj.tag.length > tagNameShortLength) {
-          return { ...obj, tag: obj.tag.slice(0, tagNameShortLength) };
+        let result = obj;
+
+        if (obj.tag_prefix) {
+          result = { ...obj, tag: obj.tag_prefix };
+        } else {
+          const tagNameShortLength = 3;
+          if (obj.tag.length > tagNameShortLength) {
+            result = { ...obj, tag: obj.tag.slice(0, tagNameShortLength) };
+          }
         }
-        return obj;
+
+        return result;
       });
 
       const allTagsLength = allData.length > 9 ? 9 : allData.length;
@@ -630,7 +637,7 @@ const MoleculeView = memo(
                         xs={allData.length === 1 ? 12 : allData.length === 2 ? 6 : 4}
                         key={index}
                       >
-                        <div>{item.tag}</div>
+                        <div>{item.tag_prefix ? `${item.tag_prefix} - ${item.tag}` : item.tag}</div>
                       </Grid>
                     ))}
                   </Grid>

diff --git a/js/components/preview/molecule/observationCmpView/observationCmpView.js b/js/components/preview/molecule/observationCmpView/observationCmpView.js
@@ -562,15 +562,18 @@ const ObservationCmpView = memo(
       // const sortedData = [...allData].sort((a, b) => a.tag.localeCompare(b.tag));
 
       const modifiedObjects = allData.map((obj, index) => {
-        const tagNameShortLength = 3;
-        if (obj.tag.length > tagNameShortLength) {
-          let shortened = { ...obj, tag: obj.tag.slice(0, tagNameShortLength) };
-          if (index === 0) {
-            shortened = { ...shortened, tag: shortened.tag.replace('-', '') };
+        let result = obj;
+
+        if (obj.tag_prefix) {
+          result = { ...obj, tag: obj.tag_prefix };
+        } else {
+          const tagNameShortLength = 3;
+          if (obj.tag.length > tagNameShortLength) {
+            result = { ...obj, tag: obj.tag.slice(0, tagNameShortLength) };
           }
-          return shortened;
         }
-        return obj;
+
+        return result;
       });
 
       const allTagsLength = allData.length > 9 ? 9 : allData.length;
@@ -745,7 +748,7 @@ const ObservationCmpView = memo(
                         xs={allData.length === 1 ? 12 : allData.length === 2 ? 6 : 4}
                         key={index}
                       >
-                        <div>{item.tag}</div>
+                        <div>{item.tag_prefix ? `${item.tag_prefix} - ${item.tag}` : item.tag}</div>
                       </Grid>
                     ))}
                   </Grid>

diff --git a/js/components/preview/tags/tagView.js b/js/components/preview/tags/tagView.js
@@ -207,6 +207,10 @@ const TagView = memo(
       }
     };
 
+    const getTagLabel = tag => {
+      return tag.tag_prefix ? `${tag.tag_prefix} - ${tag.tag}` : tag.tag;
+    };
+
     const generateProps = () => {
       // If in Tag Details
       if (isTagEditor) {
@@ -219,9 +223,9 @@ const TagView = memo(
             label:
               assignTagView === false
                 ? tagDetailView === false
-                  ? tagData.tag
-                  : originalTagData.tag
-                : originalTagData.tag,
+                  ? getTagLabel(tagData)
+                  : getTagLabel(originalTagData)
+                : getTagLabel(originalTagData),
             clickable: true,
             style: style,
             onClick: () => {
@@ -236,7 +240,7 @@ const TagView = memo(
             className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null} ${
               tagDetailView === true ? classes.tagDetailsChip : classes.tagDetailsChipList
             }`,
-            label: assignTagView === false ? (tagDetailView === false ? tagData.tag : tagData.tag) : tagData.tag,
+            label: getTagLabel(tagData),
             clickable: true,
             style: {
               backgroundColor: 'white',
@@ -259,7 +263,7 @@ const TagView = memo(
         return {
           size: 'small',
           className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null}`,
-          label: partiallySelected ? `${tagData.tag}*` : originalTagData.tag,
+          label: partiallySelected ? `${getTagLabel(tagData)}*` : getTagLabel(originalTagData),
           clickable: true,
           // borderColor: bgColor,
           style: { ...style, borderColor: bgColor },
@@ -274,7 +278,7 @@ const TagView = memo(
       return {
         size: 'small',
         className: `${classes.chip} ${selected && !isSpecialTag ? classes.chipSelected : null}`,
-        label: tagDetailView === true && assignTagView === true ? tagData.tag : originalTagData.tag,
+        label: tagDetailView === true && assignTagView === true ? getTagLabel(tagData) : getTagLabel(originalTagData),
         clickable: true,
         // borderColor: bgColor,
         style: { ...style, borderColor: bgColor },

diff --git a/js/components/preview/tags/utils/tagUtils.js b/js/components/preview/tags/utils/tagUtils.js
@@ -38,20 +38,26 @@ export const createMoleculeTagObject = (
 };
 
 export const compareTagsAsc = (a, b) => {
-  if (a.tag < b.tag) {
+  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 (a.tag > b.tag) {
+  if (aName > bName) {
     return 1;
   }
   return 0;
 };
 
 export const compareTagsDesc = (a, b) => {
-  if (a.tag > b.tag) {
+  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 (a.tag < b.tag) {
+  if (aName < bName) {
     return 1;
   }
   return 0;

diff --git a/js/components/projects/legacySnapshotModal/index.js b/js/components/projects/legacySnapshotModal/index.js
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Button, Modal } from '../../common';
+import { DJANGO_CONTEXT } from '../../../utils/djangoContext';
+import { DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
+import { updateClipboard } from '../../snapshot/helpers';
+
+export const LegacySnapshotModal = ({ open, project, snapshot }) => {
+  const [legacyLink, setLegacyLink] = useState('');
+
+  if (DJANGO_CONTEXT['legacy_url'] && DJANGO_CONTEXT['legacy_url'] !== '' && legacyLink === '') {
+    setLegacyLink(`${DJANGO_CONTEXT['legacy_url']}/viewer/react/projects/${project}/${snapshot}`);
+  }
+
+  const openInNewTab = () => {
+    window.open(legacyLink);
+  };
+
+  return (
+    <Modal open={open}>
+      <>
+        <DialogTitle id="form-dialog-title">Potential legacy link detected</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Project/Snapshot could not be resolved. It's possible that this is legacy URL and you may try to visit URL
+            below.
+          </DialogContentText>
+          <a href={legacyLink} target="_blank">
+            {legacyLink}
+          </a>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => updateClipboard(legacyLink)} color="primary">
+            Copy link
+          </Button>
+          <Button style={{ width: '175px' }} onClick={openInNewTab} color="primary">
+            Open in new tab
+          </Button>
+        </DialogActions>
+      </>
+      {/* <h3>
+        Project/Snapshot could not be resolved. It's possible that this is legacy URL and you may try to visit URL
+        below. <br />
+      </h3>
+      <a href={legacyLink} target="_blank">
+        Legacy URL
+      </a> */}
+    </Modal>
+  );
+};
diff --git a/js/components/projects/projectPreview/index.js b/js/components/projects/projectPreview/index.js
@@ -8,8 +8,9 @@ import { restoreCurrentActionsList } from '../../../reducers/tracking/dispatchAc
 import { setIsSnapshotDirty } from '../../../reducers/tracking/actions';
 import { setDownloadStructuresDialogOpen } from '../../snapshot/redux/actions';
 import { ToastContext } from '../../toast';
+import { LegacySnapshotModal } from '../legacySnapshotModal';
 
-export const ProjectPreview = memo(({ }) => {
+export const ProjectPreview = memo(({}) => {
   const { toast } = useContext(ToastContext);
   const [canShow, setCanShow] = useState(undefined);
   const isSnapshotLoaded = useRef(undefined);
@@ -23,6 +24,8 @@ export const ProjectPreview = memo(({ }) => {
   const isActionRestoring = useSelector(state => state.trackingReducers.isActionRestoring);
   const isActionRestored = useSelector(state => state.trackingReducers.isActionRestored);
 
+  const [showLegacySnapshotModal, setShowLegacySnapshotModal] = useState(false);
+
   useEffect(() => {
     if (!snapshotId && currentSnapshotID === null) {
       dispatch(loadSnapshotByProjectID(projectId))
@@ -49,6 +52,7 @@ export const ProjectPreview = memo(({ }) => {
                   setCanShow(true);
                 } else {
                   setCanShow(false);
+                  setShowLegacySnapshotModal(true);
                 }
                 if (response.data) {
                   const dataObj = JSON.parse(response.data);
@@ -59,6 +63,7 @@ export const ProjectPreview = memo(({ }) => {
               } else {
                 isSnapshotLoaded.current = response;
                 setCanShow(false);
+                setShowLegacySnapshotModal(true);
               }
             }
           })
@@ -96,5 +101,7 @@ export const ProjectPreview = memo(({ }) => {
           (currentSessionProject.projectID === null || currentSessionProject.authorID === null))
       }
     />
-  ) : null;
+  ) : (
+    <LegacySnapshotModal open={showLegacySnapshotModal} project={projectId} snapshot={snapshotId} />
+  );
 });
diff --git a/js/components/snapshot/modals/downloadStructuresDialog.js b/js/components/snapshot/modals/downloadStructuresDialog.js
@@ -470,6 +470,13 @@ export const DownloadStructureDialog = memo(({}) => {
     }
   };
 
+  const resetDownloadOnChange = () => {
+    setSelectedDownload(newDownload);
+    setDownloadTagUrl(null);
+    setFileSize(null);
+    setDownloadUrl(null);
+  };
+
   const copyPOSTJson = () => {
     const requestObject = prepareRequestObject();
     const jsonString = JSON.stringify(requestObject);
@@ -563,7 +570,14 @@ export const DownloadStructureDialog = memo(({}) => {
                       <FormControlLabel
                         key={flag}
                         value={flag}
-                        control={<Radio disabled={zipPreparing} />}
+                        control={
+                          <Radio
+                            disabled={zipPreparing}
+                            onChange={() => {
+                              resetDownloadOnChange();
+                            }}
+                          />
+                        }
                         label={text}
                       />
                     );
@@ -578,11 +592,12 @@ export const DownloadStructureDialog = memo(({}) => {
                       control={
                         <Checkbox
                           checked={mapFiles[flag]}
-                          onChange={() =>
+                          onChange={() => {
                             setMapFiles(prevState => {
                               return { ...prevState, [flag]: !prevState[flag] };
-                            })
-                          }
+                            });
+                            resetDownloadOnChange();
+                          }}
                           disabled={zipPreparing}
                         />
                       }
@@ -599,11 +614,12 @@ export const DownloadStructureDialog = memo(({}) => {
                       control={
                         <Checkbox
                           checked={crystallographicFiles[flag]}
-                          onChange={() =>
+                          onChange={() => {
                             setCrystallographicFiles(prevState => {
                               return { ...prevState, [flag]: !prevState[flag] };
-                            })
-                          }
+                            });
+                            resetDownloadOnChange();
+                          }}
                           disabled={zipPreparing || disabled}
                         />
                       }
@@ -626,14 +642,22 @@ export const DownloadStructureDialog = memo(({}) => {
                   name="radio-group-download-type"
                   onChange={event => {
                     setLinkType(event.currentTarget.value);
+                    resetDownloadOnChange();
                   }}
                 >
                   {PERMALINK_OPTIONS.map(({ flag, text }) => {
                     return (
                       <FormControlLabel
                         key={flag}
                         value={flag}
-                        control={<Radio disabled={zipPreparing} />}
+                        control={
+                          <Radio
+                            disabled={zipPreparing}
+                            onChange={() => {
+                              resetDownloadOnChange();
+                            }}
+                          />
+                        }
                         label={text}
                       />
                     );
@@ -648,11 +672,12 @@ export const DownloadStructureDialog = memo(({}) => {
                       control={
                         <Checkbox
                           checked={other[flag]}
-                          onChange={() =>
+                          onChange={() => {
                             setOthers(prevState => {
                               return { ...prevState, [flag]: !prevState[flag] };
-                            })
-                          }
+                            });
+                            resetDownloadOnChange();
+                          }}
                           disabled={zipPreparing}
                         />
                       }

diff --git a/js/reducers/api/apiReducers.js b/js/reducers/api/apiReducers.js
@@ -266,8 +266,8 @@ export default function apiReducers(state = INITIAL_STATE, action = {}) {
       return { ...state, downloadTags: [...action.downloadTags] };
 
     case constants.APPEND_TO_DOWNLOAD_TAGS:
-      if (!state.downloadTags.find(dt => action.tag.tag)) {
-        return { ...state, downloadTags: [...state.downloadTags, action.tag] };
+      if (!state.downloadTags.find(dt => dt.tag === action.tag.tag)) {
+        return { ...state, downloadTags: [...state.downloadTags, { ...action.tag }] };
       } else {
         return state;
       }