From 3321534162b09a4dd420c5f46a9cae9066605065 Mon Sep 17 00:00:00 2001
From: Mostafa Mekky <59936007+mekkyz@users.noreply.github.com>
Date: Mon, 15 Apr 2024 12:08:47 +0200
Subject: [PATCH] fix(UI): Attachment list (#1852)

* Fix: eslint & intrument dropdown offset when no generci dataset metadata

* feat: add warning if instrument missing

* feat: instance of thumbnail to appear centered
---
 app/assets/stylesheets/attachment-list.scss   | 32 +++++++++---
 .../apps/mydb/elements/list/AttachmentList.js | 28 +++++++++--
 app/packs/src/components/common/ImageModal.js | 17 +++----
 .../container/ContainerDatasetModal.js        | 50 ++++++++++++++-----
 .../container/ContainerDatasetModalContent.js | 11 ++--
 5 files changed, 101 insertions(+), 37 deletions(-)

diff --git a/app/assets/stylesheets/attachment-list.scss b/app/assets/stylesheets/attachment-list.scss
index 89d95c270a..b32d237c72 100644
--- a/app/assets/stylesheets/attachment-list.scss
+++ b/app/assets/stylesheets/attachment-list.scss
@@ -67,18 +67,34 @@
 }
 
 .attachment-row-image {
-  flex: 0.05;
-  display: flex;
-  margin-left: 10px;
+  position: relative;
+  display: inline-flex;
   align-items: center;
-  transition: transform 0.3s ease-in-out;
+  margin-left: 10px;
+  transition: transform 0.6s ease-in-out;
 }
-.attachment-row-image:hover {
-  transform: scale(6) translateX(20px);
-  z-index: 1000;
-  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+.attachment-row-image .large-preview-modal {
+  position: absolute;
+  left: 1000%;
+  top: -300%;
+  width: 400px;
+  height: 400px;
+  border-radius: 5px;
+  background-color: #FFF;
+  object-fit: contain;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
+  z-index: 10;
 }
 
+.attachment-row-image:hover .large-preview-modal {
+  opacity: 1;
+  visibility: visible;
+  transition-delay: 0s;
+}
 
 .attachment-row-text {
   flex: 0.7;
diff --git a/app/packs/src/apps/mydb/elements/list/AttachmentList.js b/app/packs/src/apps/mydb/elements/list/AttachmentList.js
index 59b3643235..d2b08a066e 100644
--- a/app/packs/src/apps/mydb/elements/list/AttachmentList.js
+++ b/app/packs/src/apps/mydb/elements/list/AttachmentList.js
@@ -21,12 +21,31 @@ export const attachmentThumbnail = (attachment) => (
         boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
         transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
       }}
-      hasPop
       alt="thumbnail"
       previewObject={{
         src: attachment.preview,
       }}
-      popObject={
+      popObject
+      disableClick
+    />
+    <div className="large-preview-modal">
+      <ImageModal
+        imageStyle={{
+          width: '400px',
+          height: '400px',
+          borderRadius: '5px',
+          backgroundColor: '#FFF',
+          objectFit: 'contain',
+          boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
+          transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+        }}
+        hasPop
+        showPopImage
+        alt="thumbnail"
+        previewObject={{
+          src: attachment.preview,
+        }}
+        popObject={
         attachment.filename && attachment.filename.toLowerCase().match(/\.(png|jpg|bmp|tif|svg|jpeg|tiff)$/)
           ? {
             src: `/api/v1/attachments/${attachment.id}/annotated_image`,
@@ -35,8 +54,9 @@ export const attachmentThumbnail = (attachment) => (
             src: attachment.preview,
           }
         }
-      disableClick
-    />
+        disableClick
+      />
+    </div>
   </div>
 );
 
diff --git a/app/packs/src/components/common/ImageModal.js b/app/packs/src/components/common/ImageModal.js
index 462df9f040..d8f4a123ee 100644
--- a/app/packs/src/components/common/ImageModal.js
+++ b/app/packs/src/components/common/ImageModal.js
@@ -17,7 +17,6 @@ export default class ImageModal extends Component {
       isPdf: false,
       pageIndex: 1,
       numOfPages: 0,
-      hover: false,
     };
 
     this.fetchImage = this.fetchImage.bind(this);
@@ -102,19 +101,17 @@ export default class ImageModal extends Component {
 
   render() {
     const {
-      hasPop, previewObject, popObject, imageStyle,
+      hasPop, previewObject, popObject, imageStyle, showPopImage
     } = this.props;
-    const { pageIndex, numOfPages, hover } = this.state;
+    const { pageIndex, numOfPages } = this.state;
 
     if (!hasPop) {
       return (
         <div className="preview-table">
           <img
-            src={hover ? popObject.src : previewObject.src}
+            src={previewObject.src}
             alt=""
             style={{ cursor: 'default', ...imageStyle }}
-            onMouseEnter={() => this.setState({ hover: true })}
-            onMouseLeave={() => this.setState({ hover: false })}
           />
         </div>
       );
@@ -130,11 +127,9 @@ export default class ImageModal extends Component {
           tabIndex={0}
         >
           <img
-            src={hover ? popObject.src : previewObject.src}
+            src={showPopImage ? popObject.src : previewObject.src}
             alt=""
             style={{ cursor: 'pointer', ...imageStyle }}
-            onMouseEnter={() => this.setState({ hover: true })}
-            onMouseLeave={() => this.setState({ hover: false })}
           />
         </div>
         <Modal show={this.state.showModal} onHide={this.handleModalClose} dialogClassName="noticeModal">
@@ -209,9 +204,11 @@ ImageModal.propTypes = {
     fetchId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }).isRequired,
   disableClick: PropTypes.bool,
+  showPopImage: PropTypes.bool,
 };
 
 ImageModal.defaultProps = {
   imageStyle: {},
-  disableClick: false
+  disableClick: false,
+  showPopImage: false
 };
diff --git a/app/packs/src/components/container/ContainerDatasetModal.js b/app/packs/src/components/container/ContainerDatasetModal.js
index 2d775a529c..7b3e39ae7c 100644
--- a/app/packs/src/components/container/ContainerDatasetModal.js
+++ b/app/packs/src/components/container/ContainerDatasetModal.js
@@ -15,6 +15,7 @@ export default class ContainerDatasetModal extends Component {
       mode: 'attachments',
       isNameEditing: false,
       localName: props.datasetContainer.name,
+      instrumentIsEmpty: !props.datasetContainer.extended_metadata?.instrument,
     };
 
     this.handleSave = this.handleSave.bind(this);
@@ -58,7 +59,7 @@ export default class ContainerDatasetModal extends Component {
       show, onHide, onChange, readOnly, disabled, kind, datasetContainer
     } = this.props;
 
-    const { mode } = this.state;
+    const { mode, instrumentIsEmpty } = this.state;
 
     const attachmentTooltip = (<Tooltip id="attachment-tooltip">Click to view Attachments</Tooltip>);
     const metadataTooltip = (<Tooltip id="metadata-tooltip">Click to view Metadata</Tooltip>);
@@ -144,19 +145,41 @@ export default class ContainerDatasetModal extends Component {
                   />
                 </div>
               ) : (
-                <div className="attachment-name-input-div">
-                  <span style={{ marginRight: '15px' }}>{this.state.localName}</span>
-                  {!readOnly && (
-                  <i
-                    className="fa fa-pencil"
-                    aria-hidden="true"
-                    onClick={this.toggleNameEditing}
-                    style={{ cursor: 'pointer', fontSize: '.8em', color: '#0275d8' }}
-                  />
-                  )}
+                <div style={{
+                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%'
+                }}
+                >
+                  <div className="attachment-name-input-div" style={{ display: 'flex', alignItems: 'center' }}>
+                    <span style={{ marginRight: '15px' }}>{this.state.localName}</span>
+                    {!readOnly && (
+                    <i
+                      className="fa fa-pencil"
+                      aria-hidden="true"
+                      onClick={this.toggleNameEditing}
+                      style={{ cursor: 'pointer', fontSize: '.8em', color: '#0275d8' }}
+                    />
+                    )}
+                  </div>
+                  <div style={{ display: 'flex', alignItems: 'center' }}>
+                    {mode === 'attachments' && instrumentIsEmpty && (
+                    <div style={{ marginRight: '15px', display: 'flex', alignItems: 'center' }}>
+                      <i
+                        className="fa fa-exclamation-triangle"
+                        style={{ color: 'red', fontSize: '1em', marginRight: '5px' }}
+                      />
+                      <span style={{
+                        color: 'red', fontSize: '0.8em', fontWeight: 'bold', flexShrink: 0
+                      }}
+                      >
+                        Instrument missing, switch to Metadata.
+                      </span>
+                    </div>
+
+                    )}
+                    {btnMode}
+                  </div>
                 </div>
               )}
-              <div>{btnMode}</div>
             </Modal.Title>
 
           </Modal.Header>
@@ -207,6 +230,9 @@ ContainerDatasetModal.propTypes = {
   show: PropTypes.bool.isRequired,
   datasetContainer: PropTypes.shape({
     name: PropTypes.string.isRequired,
+    extended_metadata: PropTypes.shape({
+      instrument: PropTypes.string,
+    }),
   }).isRequired,
   onHide: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
diff --git a/app/packs/src/components/container/ContainerDatasetModalContent.js b/app/packs/src/components/container/ContainerDatasetModalContent.js
index ed03518720..74e7798de5 100644
--- a/app/packs/src/components/container/ContainerDatasetModalContent.js
+++ b/app/packs/src/components/container/ContainerDatasetModalContent.js
@@ -193,6 +193,7 @@ export default class ContainerDatasetModalContent extends Component {
       }, this.timeout),
     });
     this.handleInputChange('instrument', event);
+    this.props.onInstrumentChange(value);
   }
 
   handleAddLink(link) {
@@ -277,7 +278,9 @@ export default class ContainerDatasetModalContent extends Component {
 
       if (attachment.aasm_state === 'queueing' && attachment.content_type === 'application/zip') {
         groups.BagitZip.push(attachment);
-      } else if (attachment.aasm_state === 'image' && (attachment.filename.includes('.combined') ||  attachment.filename.includes('.new_combined'))) {
+      } else if (attachment.aasm_state === 'image'
+          && (attachment.filename.includes('.combined')
+          || attachment.filename.includes('.new_combined'))) {
         groups.Combined.push(attachment);
       } else if (attachment.filename.includes('bagit')) {
         const baseName = attachment.filename.split('_bagit')[0].trim();
@@ -646,7 +649,7 @@ export default class ContainerDatasetModalContent extends Component {
                 style: {
                   position: 'absolute',
                   width: 300,
-                  marginTop: 144,
+                  marginTop: -144,
                   marginLeft: 17,
                 },
               }}
@@ -705,6 +708,7 @@ ContainerDatasetModalContent.propTypes = {
     })),
   }).isRequired,
   onChange: PropTypes.func.isRequired,
+  onInstrumentChange: PropTypes.func,
   onModalHide: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -732,5 +736,6 @@ ContainerDatasetModalContent.defaultProps = {
   disabled: false,
   readOnly: false,
   attachments: [],
-  kind: null
+  kind: null,
+  onInstrumentChange: () => {},
 };