feat: set image thumbnail to show as preview in analysis tab by adambasha0 · Pull Request #2671 · ComPlat/chemotion_ELN

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.}

app/javascript/src/utilities/imageHelper.js

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);

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

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.

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.

nicolejung · 2026-02-26T13:47:04Z

Hi all, do you have a video for how the functions looks like after the extension/correction? Or a description of how it works? Actually I find it quite challenging to follow the discussion and get an idea of how the function looks like atm.

github-actions · 2026-02-26T16:44:38Z

app/api/entities/container_entity.rb

        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']


Metrics/CyclomaticComplexity: Cyclomatic complexity for extended_metadata is too high. [9/7]

github-actions · 2026-02-26T16:44:38Z

app/api/entities/container_entity.rb

        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']


Metrics/PerceivedComplexity: Perceived complexity for extended_metadata is too high. [10/8]

github-actions · 2026-02-26T16:44:38Z

app/api/entities/container_entity.rb

        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']


Metrics/BlockLength: Block has too many lines. [26/25]

github-actions · 2026-02-26T16:57:03Z

LCOV of commit `15cf3bc` during CI - Ruby Lint, RSpec, and code coverage #942

Summary coverage rate:
  lines......: 66.8% (18221 of 27261 lines)
  functions..: no data found
  branches...: no data found

Files changed coverage rate: n/a

adambasha0 · 2026-02-26T17:04:05Z

Hi all, do you have a video for how the functions looks like after the extension/correction? Or a description of how it works? Actually I find it quite challenging to follow the discussion and get an idea of how the function looks like atm.

Hi @nicolejung, you can check the functionality of the feature using this instance:
https://ab-option-to-set-thumbnail-as-preview-in-analysis-tab-deploy.chemdev.scc.kit.edu/

- 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

github-actions · 2026-03-04T17:30:36Z

LCOV of commit `e38b6b4` during CI - Ruby Lint, RSpec, and code coverage #1023

Summary coverage rate:
  lines......: 66.9% (18261 of 27303 lines)
  functions..: no data found
  branches...: no data found

Files changed coverage rate: n/a

github-actions · 2026-03-05T15:55:36Z

LCOV of commit `e28f6d9` during CI - Ruby Lint, RSpec, and code coverage #1029

Summary coverage rate:
  lines......: 66.9% (18260 of 27304 lines)
  functions..: no data found
  branches...: no data found

Files changed coverage rate: n/a

github-actions · 2026-03-06T13:36:19Z

LCOV of commit `ef2ad9e` during CI - Ruby Lint, RSpec, and code coverage #1031

Summary coverage rate:
  lines......: 66.9% (18260 of 27304 lines)
  functions..: no data found
  branches...: no data found

Files changed coverage rate: n/a

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 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

adambasha0 force-pushed the option-to-set-thumbnail-as-preview-in-analysis-tab branch from cf7d5e4 to 15cf3bc Compare February 26, 2026 16:42

github-actions bot reviewed Feb 26, 2026

View reviewed changes

adambasha0 added 4 commits March 4, 2026 17:13

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

e34dfd6

…umbnail fetch error handling- remove debug logs

refactor

e38b6b4

adambasha0 force-pushed the option-to-set-thumbnail-as-preview-in-analysis-tab branch from 15cf3bc to e38b6b4 Compare March 4, 2026 17:13

feat: assign preview image on choosing prefered thumbnail

e28f6d9

refactor

ef2ad9e

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!

Uh oh!

Copilot AI Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

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!

nicolejung commented Feb 26, 2026

Uh oh!

github-actions bot Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot Feb 26, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Feb 26, 2026

LCOV of commit 15cf3bc during CI - Ruby Lint, RSpec, and code coverage #942

Uh oh!

adambasha0 commented Feb 26, 2026

Uh oh!

github-actions bot commented Mar 4, 2026

LCOV of commit e38b6b4 during CI - Ruby Lint, RSpec, and code coverage #1023

Uh oh!

github-actions bot commented Mar 5, 2026

LCOV of commit e28f6d9 during CI - Ruby Lint, RSpec, and code coverage #1029

Uh oh!

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

LCOV of commit `15cf3bc` during CI - Ruby Lint, RSpec, and code coverage #942

LCOV of commit `e38b6b4` during CI - Ruby Lint, RSpec, and code coverage #1023

LCOV of commit `e28f6d9` during CI - Ruby Lint, RSpec, and code coverage #1029

LCOV of commit `ef2ad9e` during CI - Ruby Lint, RSpec, and code coverage #1031