Skip to content

Automatic images – troubleshooting expander and content #220

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

Draft
rivalee wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Automatic images – troubleshooting expander and content #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
51 changes: 51 additions & 0 deletions app/views/_includes/images/image-troubleshooting.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
{% from "details/macro.njk" import details %}
{% from "button/macro.njk" import button %}

<div class="nhsuk-expander-group">
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

I think this is only needed where there are multiple expanders grouped together.

{% call details({
summaryText: "Image troubleshooting",
classes: "nhsuk-expander"
}) %}
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<h2>There are too few or too many images</h2>
<ul>
<li>Wait 15 seconds</li>
<li>Resend images from mammogram machine</li>
</ul>

{{ button({
text: "Resend images from mammogram machine",
href: "#",
classes: "app-button--small"
}) }}
Comment on lines +17 to +21
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

Might be better as secondary button? regular size too?


<p>or</p>
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

Unsure about semantics of a paragraph like this.


<p><a href="./images-manual" class="nhsuk-link">Record image information manually</a></p>
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

I somewhat feel we should actively record that there has been a fault and ask what the fault was. As it is we don't really know what's gone wrong - just that they've used the manual flow.

Comment on lines +17 to +25
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

The spacing between the button, 'or', and link feels uneven.


<h2>Images are blurred or obstructed</h2>
<ul>
<li>Retake the necessary image views</li>
Comment on lines +27 to +29
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

We might want to be cautious about advising when to take or not take images - should check with our SMEs.

<li>The new images will appear above (refresh image information if they do not)</li>
</ul>

<h2>Images are incorrectly labelled (views or participant info)</h2>
<ul>
<li>Change label details on the mammogram machine</li>
<li>Amended image details will appear above (refresh image information if they do not)</li>
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

As above, refers to refreshing image information whilst the button talks about resending.

</ul>

<p>or</p>

<p><a href="./images-manual" class="nhsuk-link">Record image information manually</a> – you can add notes to indicate what information needs to be corrected</p>
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

We've got a freetext area to go to a radiographer, but no dedicated place to say what's gone wrong. How would an admin member of staff know to look at this record to fix things?

Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

Suggested change
<p><a href="./images-manual" class="nhsuk-link">Record image information manually</a> – you can add notes to indicate what information needs to be corrected</p>
<p><a href="./images-manual" class="nhsuk-link">Record image information manually</a> – you can add notes to indicate what information needs to be corrected.</p>


<h2>Technical issues with the mammogram machine</h2>
<p><a href="./attended-not-screened-reason" class="nhsuk-link app-link--warning">Stop this appointment</a></p>
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

At this point I'm not sure we can link to attended-not-screened - you shouldn't get ANS status if we've taken images - which is more likely by this point.

If this include is shown from the images-automatic page, then we think we have images. If it's shown on the prior page we might still have images.

We perhaps need a new dedicated end page? Asks if any images were taken and details of what went wrong?


<p>Other appointments can be cancelled from the clinic list if this fault cannot be resolved.</p>
</div>
</div>
{% endcall %}

</div>
2 changes: 2 additions & 0 deletions app/views/events/images-automatic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,8 @@ <h2>Additional images</h2>
</div>
</div>

{% include "_includes/images/image-troubleshooting.njk" %}

Comment on lines +204 to +205
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

Feel like this might be better placed above.

{% endblock %}


9 changes: 1 addition & 8 deletions app/views/events/images-before-mammography.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,7 @@ <h1>{{ pageHeading }}</h1>
</a> #}
</p>

<hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">


<p>
<a class="nhsuk-link app-link--error" href="./images-manual">There is a problem with the images</a>
</p>


{% include "_includes/images/image-troubleshooting.njk" %}

{% include "screening-cannot-proceed-link.njk" %}
Copy link
Contributor

@edwardhorsford edwardhorsford Dec 24, 2025

Choose a reason for hiding this comment

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

We may want to think about this link. Is it still needed if we have the troubleshooting expander? Perhaps the expander needs a section about needing to stop prior to taking images (that can lead to the attended not screened page).


Expand Down