Feature #682
openSidexis Image Viewer – X-ray Image Viewing & Controls
0%
Description
Implement a Sidexis Image Viewer to allow users to view, manage, and interact with X-ray images pulled from the Sidexis system for a selected patient. The viewer should support multiple image formats, provide standard image manipulation controls, and allow limited image selection for comparison.
Scope & Subtasks¶
C-1.9.1 Image Gallery for Selected Patient
-
Display all Sidexis X-ray images for the selected patient in a gallery view.
-
Images should be loaded dynamically based on patient selection.
-
Supported image formats for Downloading:
- JPEG
- JPG
- PNG
- TIFF
- DCM
C-1.9.2 Image Viewer Controls
Implement the following controls within the image viewer:
- Zoom In
- Zoom Out
- Rotate
- Clockwise
- Anti-clockwise
- Pan
- Allow dragging the image when zoomed
- Print
- Print the currently selected image
- Download
- Download image in its original format
C-1.9.3 Image Selection Area
- Selected images from the gallery should appear in a dedicated image selection area.
- Maximum number of selected images allowed: 4
- If a 5th image is selected:
- The first selected image should be automatically replaced.
- Selected images should be visually highlighted and clearly distinguishable.
Acceptance Criteria
- User can view all Sidexis images for a selected patient.
- Viewer supports zoom, rotate, pan, print, and download actions smoothly.
- All supported image formats load correctly without errors.
- Image selection area enforces a maximum of 4 images.
- Selecting more than 4 images replaces the oldest selected image.
- UI behavior is consistent and responsive across supported browsers.
Updated by RishiKesh Tuniki about 1 month ago
- Tracker changed from Bug to Feature
- Severity deleted (
Select Severity)
Updated by RishiKesh Tuniki about 1 month ago
C-1.9.4 Seamless Integration & Dialog-Based Viewer
For seamless integration with the patient workflow and to maintain UI consistency with existing patient data modules:
- The Sidexis Image Viewer must be designed as a reusable dialog-based component.
- The viewer should be capable of being embedded inside modal/dialog boxes alongside other patient-related data (appointments, clinical notes, procedures, etc.).
- The dialog implementation must support:
- Responsive resizing
- Full-screen toggle (if available in the host dialog)
- Scrollable image gallery and selection areas
- Opening the viewer in a dialog should not require page navigation and must preserve the current patient context.
- The dialog viewer must load images dynamically based on the currently selected patient record.
- All viewer controls (zoom, rotate, pan, print, download, and image selection logic) must function identically inside the dialog view.
Additional Acceptance Criteria
- The image viewer can be opened inside a dialog/modal without UI distortion.
- Viewer integrates seamlessly with existing patient information panels.
- Dialog-based viewer supports responsive behavior on all supported screen sizes.
- No loss of state occurs when opening/closing the viewer dialog.
- Image loading and interaction remain performant inside the dialog environment.
Updated by RishiKesh Tuniki about 1 month ago
- Due date changed from 01/17/2026 to 01/20/2026
C-1.9.5 Download Support Enhancements
Download functionality must support all the mentioned formats :
- JPEG
- JPG
- PNG
- TIFF
- DCM
C-1.9.6 Image Selection Rules & Limits
-
The number of images selected for viewing must be:
- Minimum: 1
- Maximum: 4
-
All selected images must be simultaneously viewable within the viewer.
-
If a user attempts to select a 5th image :
- The first (oldest) selected image is automatically replaced.
-
Selection behavior must be intuitive and clearly communicated through UI feedback.
C-1.9.7 Image Metadata Display
-
Each image in the gallery view must display:
- Image name (file name)
-
Image names should be clearly readable and aligned consistently across the gallery.
C-1.9.8 Gallery Image Side Menu (Slide-Based Layout)
-
All images from the gallery must appear in a vertical side menu on the left side of the screen , similar to slide thumbnails in PowerPoint .
-
The side menu acts as a navigation panel for browsing all available Sidexis images for the selected patient.
-
Each thumbnail in the side menu must display:
- Image preview
- Image name (file name)
Image Selection Behavior
-
Selecting an image from the left-side gallery menu:
- Displays the image in the main viewer area.
- Marks the image as selected (visually highlighted).
-
A maximum of 4 images can be selected at any time.
-
Minimum selected images: 1 (at least one image must always remain selected).
-
If a user selects a 5th image :
- The first (oldest) selected image is automatically replaced.
-
All selected images must be viewable in the viewer area.
Visual Indicators
- The currently active image must be clearly highlighted in the left-side menu.
- Selected images must have a distinct visual state from unselected images.
- Hover and focus states should be consistent with existing UI standards.
C-1.9.9 Per-Image Controls for Selected Images
Each selected image must support individual image-level controls , including:
Image Manipulation Controls
- Zoom In / Zoom Out
- Rotate Clockwise
- Rotate Anti-clockwise
- Pan / Drag (when zoomed)
- Download (only the currently selected image, in original format)
Annotation (Read-Only / Temporary)
-
Brush Tool
- Allows freehand drawing/marking on the image for visual reference.
-
Eraser Tool
- Allows removal of brush markings.
Annotation Behavior & Restrictions
-
Brush and eraser annotations are temporary and read-only.
-
Annotations:
-
Must NOT be saved to the image file.
-
Must NOT be persisted to backend or storage.
-
Will be cleared on:
- Page refresh
- Viewer reload
- Dialog close/open
-
-
Annotation tools are intended only for visual inspection and discussion.
Isolation of Actions
- All controls (zoom, rotate, pan, brush, eraser, download) apply only to the currently active image.
- Actions performed on one selected image must not affect other selected images.
C-1.9.10 Bulk Download Options
-
Provide dedicated download options for:
- All selected images (up to 4)
- All images from the gallery
Updated Acceptance Criteria (Additions)
- Download works correctly for all supported image formats.
- Image selection enforces minimum 1 and maximum 4 images.
- Image names are visible and accurate in the gallery.
- Selected images appear as a slide-style menu on the left panel.
- Individual image controls operate independently.
- Bulk download options function correctly for both selected images and full gallery.
- UI remains responsive and consistent in both page view and dialog/modal view.
Updated by RishiKesh Tuniki 10 days ago
- Status changed from Resolved to In Progress
Requirement Clarification / Update¶
-
Images must be identified using the
GUIDfrom the dummy table namedPatients. -
Images should be retrieved from the S3 bucket, not from the physical folder .
-
A Windows Service is responsible for:
- Monitoring the physical folder
- Uploading/syncing images to the S3 bucket
-
The application/service should:
- Pull images only from the S3 bucket
- Use the
Patients.GUIDto map and fetch the corresponding images
Note:
Direct access to the local/physical image folder is not required from the application side once images are available in S3.
Updated by RishiKesh Tuniki 10 days ago
- Due date changed from 01/20/2026 to 02/11/2026
Requirement Clarification / Update¶¶
- Update the existing API to accept PatientId (GUID) as the input parameter.
- The API should retrieve patient images from the S3 bucket using the provided PatientId (GUID), which maps to Patients.GUID in the dummy Patients table.
- Images must be fetched only from the S3 bucket and not from the physical/local folder.
S3 & Testing Setup¶
- A new S3 bucket will be created specifically for this implementation.
- Dummy images will be uploaded to the new bucket and used for testing and validation .
Note
The application/API should not access the physical folder directly .