Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MHV-66099 Images page (image download, image layout and format, download alerts) #34706

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+71 −15
Open

MHV-66099 Images page (image download, image layout and format, download alerts) #34706

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b9f07c4
MHV-66099
Wyzardsleeves Feb 14, 2025
cac105a
update radiology images auto-test
timothy-steele-va Feb 18, 2025
4f8e5f7
made updates suggested by Mike
Wyzardsleeves Feb 18, 2025
0e5474e
Merge branch 'MHV-66099_images_page_image_download_,_image_layout_,_f…
Wyzardsleeves Feb 18, 2025
6908321
updated test to accept a change that I made
Wyzardsleeves Feb 18, 2025
f9e34b9
resolved merge conflict
Wyzardsleeves Feb 18, 2025
cdee184
removed redundant header text
Wyzardsleeves Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion src/applications/mhv-medical-records/components/LabsAndTests/RadiologyDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
txtLine,
usePrintTitle,
} from '@department-of-veterans-affairs/mhv/exports';
import { VaAlert } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
import { mhvUrl } from '~/platform/site-wide/mhv/utilities';
import { isAuthenticatedWithSSOe } from '~/platform/user/authentication/selectors';
import PrintHeader from '../shared/PrintHeader';
Expand Down Expand Up @@ -68,7 +69,6 @@
const [pollInterval, setPollInterval] = useState(2000);

const [processingRequest, setProcessingRequest] = useState(false);

const radiologyDetails = useSelector(
state => state.mr.labsAndTests.labsAndTestsDetails,
);
Expand Down Expand Up @@ -99,7 +99,7 @@
setImageProcessingAlertRendered(true);
}
},
[processingAlertHeadingRef.current],

Check warning on line 102 in src/applications/mhv-medical-records/components/LabsAndTests/RadiologyDetails.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/mhv-medical-records/components/LabsAndTests/RadiologyDetails.jsx:102:5:React Hook useEffect has an unnecessary dependency: 'processingAlertHeadingRef.current'. Either exclude it or remove the dependency array. Mutable values like 'processingAlertHeadingRef.current' aren't valid dependencies because mutating them doesn't re-render the component.
);

useEffect(
Expand Down Expand Up @@ -387,6 +387,20 @@
label="Date and time performed"
labelClass="vads-font-weight-regular"
/>
{studyJob?.status === studyJobStatus.COMPLETE && (
<VaAlert
status="success"
visible
class="vads-u-margin-top--4 no-print"
role="alert"
data-testid="alert-download-started"
>
<h3 className="vads-u-font-size--lg vads-u-font-family--sans no-print">
Images ready
</h3>
{imageAlertComplete()}
</VaAlert>
)}
{downloadStarted && <DownloadSuccessAlert />}
<PrintDownload
description="L&TR Detail"
Expand Down
11 changes: 10 additions & 1 deletion src/applications/mhv-medical-records/components/shared/ImageGallery.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,19 @@ const ImageGallery = ({ imageList, imagesPerPage, studyId }) => {
if (imageList.length && imagesPerPage && studyId) {
return (
<>
<div>
<span>
{`Showing ${paginatedImages[currentPage - 1][0].index}
to ${paginatedImages[currentPage - 1][0].index +
(paginatedImages[currentPage - 1].length - 1)} of ${
imageList.length
} records from newest to oldest`}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Images aren't shown newest to oldest. Here's the correct wording from the ticket:
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing out this oversight.

</span>
</div>
<div className="vads-u-padding--0 vads-u-border-top--1px vads-u-border-color--gray-lighter vads-l-grid-container vads-l-row vads-u-margin-bottom--2">
{paginatedImages[currentPage - 1].map((image, idx) => (
<div
className="image-div vads-l-col--4"
className="image-div vads-l-col--6"
data-testid="image-div"
key={idx}
>
Expand Down
36 changes: 27 additions & 9 deletions src/applications/mhv-medical-records/containers/RadiologyImagesList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const RadiologyImagesList = ({ isTesting }) => {
isTesting || false,
);
const [isStudyJobsLoaded, setStudyJobsLoaded] = useState(isTesting || false);

const [diacomDownload, setDiacomDownload] = useState(false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file is called is "dicom" as opposed to "diacom". Can you correct all the instances?

const returnToDetailsPage = useCallback(
() => history.push(`/labs-and-tests/${labId}`),
[history, labId],
Expand Down Expand Up @@ -112,6 +112,11 @@ const RadiologyImagesList = ({ isTesting }) => {
[radiologyDetails, returnToDetailsPage],
);

const updateDiacomDownload = truth => {
setDiacomDownload(truth);
document.querySelector('#download-banner');
};

const renderImageContent = () => (
<>
<PrintHeader />
Expand All @@ -136,8 +141,8 @@ const RadiologyImagesList = ({ isTesting }) => {
VA care team to share them directly.
</p>
<p>
If you want to try to sharing these images yourself, you can download
them as DICOM files in a ZIP folder.
If you want to try sharing these images yourself, you can download them
as DICOM files in a ZIP folder.
</p>
<p>Here’s what to know:</p>
<ul>
Expand All @@ -160,12 +165,25 @@ const RadiologyImagesList = ({ isTesting }) => {
</ul>
<p>
{radiologyDetails?.studyId && (
<va-link
download
filetype="ZIP folder"
href={`${apiImagingPath}/${radiologyDetails.studyId}/dicom`}
text="Download DICOM files"
/>
<>
<va-banner
id="download-banner"
show-close={false}
headline="Download started"
type="success"
visible={diacomDownload}
>
Check your device’s downloads location for your file.
</va-banner>
<br />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't use <br /> tags. Instead you can use the VA Design System margin tags, or move the alert banner outside of the <p> tags.

<va-link
download
filetype="ZIP folder"
href={`${apiImagingPath}/${radiologyDetails.studyId}/dicom`}
text="Download DICOM files"
onClick={() => updateDiacomDownload(true)}
/>
</>
)}
</p>
</>
Expand Down
Loading