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

adambasha0 · 2025-09-05T09:43:37Z

PR: Preferred Thumbnail Selection for ImageModal:

1. Problem Description

Users could not select or display a preferred thumbnail for analysis-related attachments (samples, reactions, devices, research plans, cell lines).
The UI did not provide feedback while loading images, leading to a poor user experience.

2. Solution

Enable selection and display of a preferred thumbnail for analysis items.
Add a loading spinner to indicate image fetch progress.
Ensure all relevant parent components can pass and update preferred thumbnail information.
Expose preferred_thumbnail in the container API metadata.

3. Implementation

Refactored ImageModal to:
- Accept preferredThumbnail and onChangePreferredThumbnail props.
- Show a loading spinner while fetching images.
- Highlight and allow selection of the preferred thumbnail.
- Use robust integer comparison for thumbnail IDs.
- Clean up and optimize state handling.
- Updated all analysis-related parent components (sample, reaction, device, research plan, cell line) to:
- Pass new props to ImageModal.
- Handle preferred thumbnail changes and propagate them as needed.
Backend: Updated container entity to expose preferred_thumbnail in API responses.
To be discussed:
- It is not clear yet whether the inside genericContainer need to be updated as well.

github-actions · 2025-09-05T10:25:00Z

LCOV of commit `68046fd` during Continuous Integration #5990

Summary coverage rate:
  lines......: 66.5% (16252 of 24447 lines)
  functions..: no data found
  branches...: no data found

Files changed coverage rate: n/a

adambasha0 · 2025-09-05T10:53:38Z

Chemotion.dev.37.webm

Copilot

Pull Request Overview

This PR enables users to select and display a preferred thumbnail for analysis-related attachments across samples, reactions, devices, research plans, and cell lines. It adds thumbnail selection functionality with visual feedback including loading spinners and highlighted preferred thumbnails.

Refactored ImageModal component to support preferred thumbnail selection and display loading states
Updated all analysis-related parent components to pass preferred thumbnail props to ImageModal
Added backend support to expose preferred_thumbnail in container API metadata

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
app/javascript/src/utilities/imageHelper.js	Added debug logging for preferred attachment ID tracking
app/javascript/src/fetchers/AttachmentFetcher.js	Added debug logging for attachment fetcher parameters
app/javascript/src/components/common/ImageModal.js	Major refactor to support preferred thumbnail selection, loading states, and thumbnail pagination
app/javascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersDnd.js	Added updateContainerPreferredThumbnail prop to ContainerRow
app/javascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js	Added updateContainerPreferredThumbnail prop to ReactionsDisplay
app/javascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux.js	Updated AnalysesHeader to handle preferred thumbnail changes
app/javascript/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers.js	Added updateContainerPreferredThumbnail method and prop passing
app/javascript/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js	Added preferred thumbnail handling to research plan containers
app/javascript/src/apps/mydb/elements/details/deviceDescriptions/analysesTab/AnalysisHeader.js	Added preferred thumbnail handling to device description analysis
app/javascript/src/apps/mydb/elements/details/cellLines/analysesTab/Header.js	Added preferred thumbnail handling to cell line analysis
app/api/entities/container_entity.rb	Exposed preferred_thumbnail field in container API metadata

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-08T06:52:12Z

app/javascript/src/utilities/imageHelper.js

 * @returns {Promise<string>} A promise that resolves to a base64 image source string or a fallback SVG path.
 */
 const fetchImageSrcByAttachmentId = async (id) => {
+  console.log('preferred-attachment-id', id);


Remove debug console.log statement before merging to production. Debug logging should not be left in production code.

Suggested change

console.log('preferred-attachment-id', id);

Copilot · 2025-09-08T06:52:13Z

app/javascript/src/fetchers/AttachmentFetcher.js

        .filter((key) => key !== 'id')
        .map((key) => [key, params[key]])
    );
+    console.log(params, urlParams);


Remove debug console.log statement before merging to production. Debug logging should not be left in production code.

Suggested change

console.log(params, urlParams);

Copilot · 2025-09-08T06:52:13Z

app/javascript/src/components/common/ImageModal.js

  }

+  buildImageSrcArrayFromThumbnails(thumbnails) {
+    console.log(thumbnails);


Remove debug console.log statement before merging to production. Debug logging should not be left in production code.

Suggested change

console.log(thumbnails);

Copilot · 2025-09-08T06:52:13Z

app/javascript/src/components/common/ImageModal.js

+
+  fetchThumbnails() {
+    const { ChildrenAttachmentsIds } = this.props;
+    console.log('ChildrenAttachmentsIds', ChildrenAttachmentsIds);


Remove debug console.log statement before merging to production. Debug logging should not be left in production code.

Suggested change

console.log('ChildrenAttachmentsIds', ChildrenAttachmentsIds);

Copilot · 2025-09-08T06:52:13Z

app/javascript/src/components/common/ImageModal.js

+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      this.handleSetPreferred(thumb);
+                    }
+                  }}


[nitpick] Extract this keyboard event handler to a separate method to improve readability and reduce inline complexity.

Copilot · 2025-09-08T06:52:14Z

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

+  const onChangePreferredThumbnail = (currentPreferredThumbnail) => {
+    // Handle the change of preferred thumbnail
+    if (currentPreferredThumbnail !== preferredThumbnail) {
+      // Handle the change of preferred thumbnail


Remove duplicate comment. Both lines say 'Handle the change of preferred thumbnail'.

Suggested change

// Handle the change of preferred thumbnail

Copilot · 2025-09-08T06:52:14Z

...pt/src/apps/mydb/elements/details/researchPlans/analysesTab/ResearchPlanDetailsContainers.js

+      const onChangePreferredThumbnail = (currentPreferredThumbnail) => {
+        // Handle the change of preferred thumbnail
+        if (currentPreferredThumbnail !== preferredThumbnail) {
+          // Handle the change of preferred thumbnail


Remove duplicate comment. Both lines say 'Handle the change of preferred thumbnail'.

Suggested change

// Handle the change of preferred thumbnail

Copilot · 2025-09-08T06:52:14Z

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

+  const onChangePreferredThumbnail = (currentPreferredThumbnail) => {
+    // Handle the change of preferred thumbnail
+    if (currentPreferredThumbnail !== preferredThumbnail) {
+      // Handle the change of preferred thumbnail


Remove duplicate comment. Both lines say 'Handle the change of preferred thumbnail'.

Suggested change

// Handle the change of preferred thumbnail

Copilot · 2025-09-08T06:52:15Z

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

+    const onChangePreferredThumbnail = (currentPreferredThumbnail) => {
+      // Handle the change of preferred thumbnail
+      if (currentPreferredThumbnail !== preferredThumbnail) {
+        // Handle the change of preferred thumbnail


Remove duplicate comment. Both lines say 'Handle the change of preferred thumbnail'.

Suggested change

// Handle the change of preferred thumbnail

alizaib1217 · 2025-09-26T12:11:41Z

Hi @adambasha0! Great feature implementation overall. Here are the key issues and suggestions I found during review:

🐛 Functional Issues

Default Preferred Thumbnail Not Displayed: On first load, no thumbnail is highlighted as preferred in the thumbnail grid, even if one exists.

Preview Not Updated When Thumbnail Selected: Clicking a thumbnail in the grid marks it as preferred but doesn't update the main preview image above (i.e., in the modal).

Thumbnail Navigation Arrows Not Working: The left/right arrow buttons for paginating through thumbnails are non-functional.
Preferred Thumbnail Not Persisted in Modal View: After selecting a preferred thumbnail, it does not appear in the main view, even after closing and reopening the modal doesn't show the preferred thumbnail in the main preview area(i.e., in the modal).

🔧 Code Quality Issues

Debug Console Statements: Remove production console.log statements from:
- imageHelper.js:61
- AttachmentFetcher.js:26
- ImageModal.js:112, 124
Duplicate Comments: Clean up repeated "Handle the change of preferred thumbnail" comments in parent components.
Missing Error Handling: Add try-catch blocks for thumbnail fetch failures.
a. fetchThumbnails() method - Lines 125-128
b. fetchImageThumbnail() - Line 141, we are not resetting the loading state when fetchImageSrcByAttachmentId fails
Inline Event Handler: Extract keyboard handler (lines 217-222) to a separate method for better readability.

alizaib1217

Requested changes in above comment.

- Add preferred thumbnail functionality to ImageModal component - Enable thumbnail selection interface with pagination and visual feedback - Pass preferred thumbnail and children attachment IDs to ImageModal - Add thumbnail fetching capabilities via AttachmentFetcher - Implement thumbnail grid display with current selection highlighting - Add navigation controls for multi-page thumbnail viewing - Update analysis headers to support preferred thumbnail display - Include console logging for debugging preferred thumbnail functionality

Major refactor of ImageModal: - Added support for preferredThumbnail and onChangePreferredThumbnail props. - Added loading spinner UI while fetching images. - Improved preferred thumbnail highlighting and selection logic. - Fixed integer comparison for thumbnail IDs. - Cleaned up and optimized state handling. Updated usage of ImageModal in: - Sample analysis, reaction analysis, device description, cell line, and researchplan analysis modals/components - Changes done to pass new props and handle preferred thumbnail changes. Ensured all parent components propagate preferredThumbnail, ChildrenAttachmentsIds, and onChangePreferredThumbnail as needed. - Container API: Exposed preferred_thumbnail in container entity metadata.

…umbnail fetch error handling- remove debug logs

adambasha0 · 2025-10-13T13:47:13Z

Hi @alizaib1217, Thanks for the review. I fixed Code Quality issues.
Regarding:

Default Preferred Thumbnail Not Displayed/Preferred Thumbnail Not Persisted in Modal View: It should be only set by the user, not automatically.
I do not think the feature should handle Preview Not Updated When Thumbnail Selected as it is only about setting/updating the thumbnail, not the preview
Thumbnail Navigation Arrows are working

github-actions · 2025-10-13T14:03:59Z

LCOV of commit `cf7d5e4` during CI - Ruby Lint, RSpec, and code coverage #19

Summary coverage rate:
  lines......: 66.3% (16339 of 24655 lines)
  functions..: no data found
  branches...: no data found

Files changed coverage rate: n/a

alizaib1217 · 2025-10-20T08:19:42Z

Hi @alizaib1217, Thanks for the review. I fixed Code Quality issues. Regarding:

Default Preferred Thumbnail Not Displayed/Preferred Thumbnail Not Persisted in Modal View: It should be only set by the user, not automatically.

I do not think the feature should handle Preview Not Updated When Thumbnail Selected as it is only about setting/updating the thumbnail, not the preview

Thumbnail Navigation Arrows are working

Hi, Thanks for the quick response.

@adambasha0 Can you share a small video of thumbnail arrow working for more than 2 images? I have three images in dataset, and it seems disabled in the modal view. I am clicking the button, but nothing happens.

adambasha0 · 2025-10-21T07:14:03Z

Hi @alizaib1217, Thanks for the review. I fixed Code Quality issues. Regarding:

Default Preferred Thumbnail Not Displayed/Preferred Thumbnail Not Persisted in Modal View: It should be only set by the user, not automatically.

I do not think the feature should handle Preview Not Updated When Thumbnail Selected as it is only about setting/updating the thumbnail, not the preview

Thumbnail Navigation Arrows are working

Hi, Thanks for the quick response.

@adambasha0 Can you share a small video of thumbnail arrow working for more than 2 images? I have three images in dataset, and it seems disabled in the modal view. I am clicking the button, but nothing happens.

The current thumbnailsPerPage is 6. this means you have to upload at least 7 images for arrows to start working. Less than this you would only have 1 page and the arrows will be disabled

alizaib1217

Hi, looks good. Thanks for the update.

adambasha0 added this to the v3.0 milestone Sep 5, 2025

adambasha0 self-assigned this Sep 5, 2025

adambasha0 added the feature label Sep 5, 2025

adambasha0 requested review from alizaib1217 and Copilot September 8, 2025 06:50

Copilot AI reviewed Sep 8, 2025

View reviewed changes

PiTrem changed the title ~~Option to set thumbnail as preview in analysis tab for many model elements~~ feat: set which thumbnail to show as preview in analysis tab Sep 9, 2025

PiTrem changed the title ~~feat: set which thumbnail to show as preview in analysis tab~~ feat: set image thumbnail to show as preview in analysis tab Sep 9, 2025

PiTrem linked an issue Sep 23, 2025 that may be closed by this pull request

data analysis preview changes while upload from ELN to Repo #2548

Open

alizaib1217 requested changes Sep 26, 2025

View reviewed changes

adambasha0 added 4 commits October 13, 2025 12:39

Refactor: ui(image-modal) - extract thumbnail keyboard handler-add th…

cf7d5e4

…umbnail fetch error handling- remove debug logs

adambasha0 force-pushed the option-to-set-thumbnail-as-preview-in-analysis-tab branch from 68046fd to cf7d5e4 Compare October 13, 2025 13:47

PiTrem added a commit that referenced this pull request Oct 14, 2025

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

ed13301

alizaib1217 self-requested a review October 24, 2025 13:31

alizaib1217 approved these changes Oct 24, 2025

View reviewed changes

PiTrem added a commit that referenced this pull request Oct 27, 2025

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

703ea83

PiTrem linked an issue Oct 30, 2025 that may be closed by this pull request

analyses - switch images #2740

Open

PiTrem marked this pull request as draft October 30, 2025 08:20

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

adambasha0 commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 5, 2025

LCOV of commit 68046fd during Continuous Integration #5990

Uh oh!

adambasha0 commented Sep 5, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

alizaib1217 commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🐛 Functional Issues

🔧 Code Quality Issues

Uh oh!

alizaib1217 left a comment

Choose a reason for hiding this comment

Uh oh!

adambasha0 commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 13, 2025

LCOV of commit cf7d5e4 during CI - Ruby Lint, RSpec, and code coverage #19

Uh oh!

alizaib1217 commented Oct 20, 2025

Uh oh!

adambasha0 commented Oct 21, 2025

Uh oh!

alizaib1217 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

adambasha0 commented Sep 5, 2025 •

edited

Loading

LCOV of commit `68046fd` during Continuous Integration #5990

alizaib1217 commented Sep 26, 2025 •

edited

Loading

adambasha0 commented Oct 13, 2025 •

edited

Loading

LCOV of commit `cf7d5e4` during CI - Ruby Lint, RSpec, and code coverage #19