feat: set image thumbnail to show as preview in analysis tab

app/api/entities/container_entity.rb

@@ -32,6 +32,7 @@ def extended_metadata
         metadata[:kind] = object.extended_metadata['kind']
         metadata[:index] = object.extended_metadata['index']
         metadata[:instrument] = object.extended_metadata['instrument']
+        metadata[:preferred_thumbnail] = object.extended_metadata['preferred_thumbnail']
         if object.extended_metadata['content'].present?
           metadata[:content] =
             JSON.parse(object.extended_metadata['content'])

app/javascript/src/apps/mydb/elements/details/cellLines/analysesTab/Header.js

@@ -106,15 +106,39 @@ export default class Header extends React.Component {
 
   // eslint-disable-next-line class-methods-use-this
   renderImagePreview = () => {
-    const { container } = this.props;
+    const { container, handleChange } = this.props;
     const attachment = getAttachmentFromContainer(container);
+    // Build list of saved, non-deleted attachment IDs (exclude is_new which don't have server IDs yet)
+    const allAttachments = container?.children?.flatMap((child) => (child.attachments || [])) || [];
+    const savedAttachments = allAttachments.filter((att) => !att.is_deleted && !att.is_new);
+    const attachmentsIds = savedAttachments
+      .map((att) => Number(att.id))
+      .filter((id) => !Number.isNaN(id) && id > 0);
+    // Get current preferred thumbnail (reassignment is handled by ContainerDatasets on deletion)
+    const preferredThumbnail = container?.extended_metadata?.preferred_thumbnail || null;
+
+    const onChangePreferredThumbnail = (currentPreferredThumbnail) => {
+      if (currentPreferredThumbnail !== preferredThumbnail) {
+        // Handle the change of preferred thumbnail
+        container.extended_metadata = {
+          ...container.extended_metadata,
+          preferred_thumbnail: currentPreferredThumbnail,
+        };
+        handleChange(container);
+      }
+    };
 
     return (
       <ImageModal
         attachment={attachment}
         popObject={{
           title: container.name,
         }}
+        preferredThumbnail={preferredThumbnail}
+        ChildrenAttachmentsIds={attachmentsIds}
+        onChangePreferredThumbnail={(currentPreferredThumbnail) => onChangePreferredThumbnail(
+          currentPreferredThumbnail
+        )}
       />
     );
   }

app/javascript/src/apps/mydb/elements/details/deviceDescriptions/analysesTab/AnalysisHeader.js

@@ -15,7 +15,7 @@ import { StoreContext } from 'src/stores/mobx/RootStore';
 import UIStore from 'src/stores/alt/stores/UIStore';
 import UserStore from 'src/stores/alt/stores/UserStore';
 
-const AnalysisHeader = ({ container, readonly }) => {
+function AnalysisHeader({ container, readonly }) {
   const deviceDescriptionsStore = useContext(StoreContext).deviceDescriptions;
   const deviceDescription = deviceDescriptionsStore.device_description;
 
@@ -156,6 +156,26 @@ const AnalysisHeader = ({ container, readonly }) => {
     }),
   };
   const attachment = getAttachmentFromContainer(container);
+  // Build list of non-deleted attachment IDs
+  const allAttachments = container?.children?.flatMap((child) => (child.attachments || [])) || [];
+  // Filter: exclude deleted and is_new attachments (is_new don't have server IDs yet)
+  const savedAttachments = allAttachments.filter((att) => !att.is_deleted && !att.is_new);
+  const attachmentsIds = savedAttachments
+    .map((att) => Number(att.id))
+    .filter((id) => !Number.isNaN(id) && id > 0);
+  // Get current preferred thumbnail (reassignment is handled by ContainerDatasets on deletion)
+  const preferredThumbnail = container?.extended_metadata?.preferred_thumbnail || null;
+
+  const onChangePreferredThumbnail = (currentPreferredThumbnail) => {
+    if (currentPreferredThumbnail !== preferredThumbnail) {
+      // Handle the change of preferred thumbnail
+      container.extended_metadata = {
+        ...container.extended_metadata,
+        preferred_thumbnail: currentPreferredThumbnail,
+      };
+      deviceDescriptionsStore.changeAnalysisContainerContent(container);
+    }
+  };
 
   const orderClass = deviceDescriptionsStore.analysis_mode == 'order' ? 'order pe-2' : '';
   const deleted = container?.is_deleted || false;
@@ -164,13 +184,20 @@ const AnalysisHeader = ({ container, readonly }) => {
     <div className={`analysis-header w-100 d-flex gap-3 lh-base ${orderClass}`}>
       <div className="preview border d-flex align-items-center">
         {deleted
-          ? <i className="fa fa-ban text-body-tertiary fs-2 text-center d-block" /> 
-          : <ImageModal
+          ? <i className="fa fa-ban text-body-tertiary fs-2 text-center d-block" />
+          : (
+            <ImageModal
               attachment={attachment}
               popObject={{
                 title: container.name,
               }}
-          />
+              preferredThumbnail={preferredThumbnail}
+              ChildrenAttachmentsIds={attachmentsIds}
+              onChangePreferredThumbnail={(currentPreferredThumbnail) => onChangePreferredThumbnail(
+                currentPreferredThumbnail
+              )}
+            />
+          )
         }
       </div>
       <div className={"flex-grow-1" + (deleted ? "" : " analysis-header-fade")}>

app/javascript/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js

@@ -203,6 +203,25 @@ export default class ResearchPlanDetailsContainers extends Component {
         }),
       };
       const attachment = getAttachmentFromContainer(container);
+      // Build list of saved, non-deleted attachment IDs (exclude is_new which don't have server IDs yet)
+      const allAttachments = container?.children?.flatMap((child) => (child.attachments || [])) || [];
+      const savedAttachments = allAttachments.filter((att) => !att.is_deleted && !att.is_new);
+      const attachmentsIds = savedAttachments
+        .map((att) => Number(att.id))
+        .filter((id) => !Number.isNaN(id) && id > 0);
+      // Get current preferred thumbnail (reassignment is handled by ContainerDatasets on deletion)
+      const preferredThumbnail = container?.extended_metadata?.preferred_thumbnail || null;
+
+      const onChangePreferredThumbnail = (currentPreferredThumbnail) => {
+        if (currentPreferredThumbnail !== preferredThumbnail) {
+          // Handle the change of preferred thumbnail
+          container.extended_metadata = {
+            ...container.extended_metadata,
+            preferred_thumbnail: currentPreferredThumbnail,
+          };
+          this.handleChange();
+        }
+      };
 
       return (
         <div className="analysis-header w-100 d-flex gap-3 lh-base">
@@ -212,6 +231,11 @@ export default class ResearchPlanDetailsContainers extends Component {
               popObject={{
                 title: container.name,
               }}
+              preferredThumbnail={preferredThumbnail}
+              ChildrenAttachmentsIds={attachmentsIds}
+              onChangePreferredThumbnail={(currentPreferredThumbnail) => onChangePreferredThumbnail(
+                currentPreferredThumbnail
+              )}
             />
           </div>
           <div className="flex-grow-1">

app/javascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js

@@ -44,6 +44,7 @@ export default class SampleDetailsContainers extends Component {
     this.handleAdd = this.handleAdd.bind(this);
     this.handleMove = this.handleMove.bind(this);
     this.toggleAddToReport = this.toggleAddToReport.bind(this);
+    this.updateContainerPreferredThumbnail = this.updateContainerPreferredThumbnail.bind(this);
     this.handleToggleMode = this.handleToggleMode.bind(this);
     this.isEqCId = this.isEqCId.bind(this);
     this.indexedContainers = this.indexedContainers.bind(this);
@@ -172,6 +173,10 @@ export default class SampleDetailsContainers extends Component {
     this.handleChange(container);
   }
 
+  updateContainerPreferredThumbnail() {
+    this.handleChange();
+  }
+
   handleToggleMode(mode) {
     this.setState({ mode });
   }
@@ -211,6 +216,7 @@ export default class SampleDetailsContainers extends Component {
             handleCommentTextChange={this.handleCommentTextChange}
             commentBoxVisible={commentBoxVisible}
             toggleCommentBox={this.toggleCommentBox}
+            updateContainerPreferredThumbnail={this.updateContainerPreferredThumbnail}
           />
           <ViewSpectra
             sample={sample}

app/javascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js

@@ -188,10 +188,18 @@ const headerBtnGroup = (
   );
 };
 
-const AnalysesHeader = ({
-  sample, container, mode, readOnly, isDisabled, handleRemove, handleUndo, handleSubmit, toggleAddToReport,
-}) => {
-
+function AnalysesHeader({
+  sample,
+  container,
+  mode,
+  readOnly,
+  isDisabled,
+  handleRemove,
+  handleUndo,
+  handleSubmit,
+  toggleAddToReport,
+  updateContainerPreferredThumbnail,
+}) {
   let kind = container.extended_metadata.kind || '';
   kind = (kind.split('|')[1] || kind).trim();
   const deleted = container.is_deleted;
@@ -205,20 +213,43 @@ const AnalysesHeader = ({
       return c;
     }),
   };
-   const attachment = getAttachmentFromContainer(container);
-
+  const attachment = getAttachmentFromContainer(container);
+  // Build list of saved, non-deleted attachment IDs (exclude is_new which don't have server IDs yet)
+  const allAttachments = container?.children?.flatMap((child) => (child.attachments || [])) || [];
+  const savedAttachments = allAttachments.filter((att) => !att.is_deleted && !att.is_new);
+  const attachmentsIds = savedAttachments
+    .map((att) => Number(att.id))
+    .filter((id) => !Number.isNaN(id) && id > 0);
+  // Get current preferred thumbnail (reassignment is handled by ContainerDatasets on deletion)
+  const preferredThumbnail = container?.extended_metadata?.preferred_thumbnail || null;
+
+  const onChangePreferredThumbnail = (currentPreferredThumbnail) => {
+    if (currentPreferredThumbnail !== preferredThumbnail) {
+      // Handle the change of preferred thumbnail
+      container.extended_metadata = {
+        ...container.extended_metadata,
+        preferred_thumbnail: currentPreferredThumbnail,
+      };
+      updateContainerPreferredThumbnail();
+    }
+  };
   return (
     <div className={`analysis-header w-100 d-flex gap-3 lh-base ${mode === 'edit' ? '' : 'order pe-2'}`}>
       <div className="preview border d-flex align-items-center">
-        {deleted ?
-          <i className="fa fa-ban text-body-tertiary fs-2 text-center d-block" /> :
-          <ImageModal
-            attachment={attachment}
-            popObject={{
-              title: container.name,
-            }}
-          />
-    }
+        {deleted
+          ? <i className="fa fa-ban text-body-tertiary fs-2 text-center d-block" /> : (
+            <ImageModal
+              attachment={attachment}
+              popObject={{
+                title: container.name,
+              }}
+              preferredThumbnail={preferredThumbnail}
+              ChildrenAttachmentsIds={attachmentsIds}
+              onChangePreferredThumbnail={(currentPreferredThumbnail) => onChangePreferredThumbnail(
+                currentPreferredThumbnail
+              )}
+            />
+          )}
       </div>
       <div className={"flex-grow-1" + (deleted ? "" : " analysis-header-fade")}>
         <div className="d-flex justify-content-between align-items-center">
@@ -246,6 +277,6 @@ const AnalysesHeader = ({
       </div>
     </div>
   );
-};
+}
 
 export { AnalysesHeader, AnalysisModeToggle };

app/javascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js

@@ -68,7 +68,8 @@ function ReactionsDisplay({
   handleCommentTextChange,
   rootContainer,
   commentBoxVisible,
-  toggleCommentBox
+  toggleCommentBox,
+  updateContainerPreferredThumbnail
 }) {
   return (
     <div>
@@ -116,6 +117,7 @@ function ReactionsDisplay({
                       handleRemove={handleRemove}
                       handleSubmit={handleSubmit}
                       toggleAddToReport={toggleAddToReport}
+                      updateContainerPreferredThumbnail={updateContainerPreferredThumbnail}
                     />
                   </AccordionHeaderWithButtons>
                 </Card.Header>
@@ -157,6 +159,7 @@ function ReactionsDisplay({
                 handleSubmit={handleSubmit}
                 handleUndo={handleUndo}
                 toggleAddToReport={toggleAddToReport}
+                updateContainerPreferredThumbnail={updateContainerPreferredThumbnail}
               />
             );
           })}

app/javascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersDnd.js

@@ -37,7 +37,7 @@ const orderDropCollect = (connect, monitor) => ({
 const ContainerRow = ({
   sample, container, mode, readOnly, isDisabled, handleRemove,
   handleSubmit, toggleAddToReport, handleUndo,
-  connectDragSource, connectDropTarget, isDragging, isOver, canDrop,
+  connectDragSource, connectDropTarget, isDragging, isOver, canDrop, updateContainerPreferredThumbnail
 }) => {
   let dndClass = " border";
   if (canDrop) {
@@ -65,6 +65,7 @@ const ContainerRow = ({
         handleRemove={handleRemove}
         handleSubmit={handleSubmit}
         toggleAddToReport={toggleAddToReport}
+        updateContainerPreferredThumbnail={updateContainerPreferredThumbnail}
       />
     </div>,
   );