[BUG]: Sidebar Not Closing and Assurance Case Not Reloading After Adding or Deleting Elements

[kallewesterling]

When users add elements such as contexts or property claims to an assurance case via the sidebar interface, the sidebar remains open, and the assurance case view does not automatically refresh to reflect the new additions. This lack of visual feedback causes confusion and can lead users to inadvertently add multiple identical elements, thinking that their initial attempt was unsuccessful. Similarly, when deleting an element, the assurance case does not reload, making it unclear whether the deletion has taken effect, which can lead to repeated delete attempts.

Steps to Reproduce:

• Open an existing assurance case or create a new one.
• Add a new context or property claim to the goal using the sidebar.
• Observe that the sidebar does not close and the main assurance case view does not update but (a) if an element was added, it has been added (which leads multiple clicks to generate more than one element), and (b) causes a 404 (see console) if an element was deleted and the user clicks the button again.
• Attempt to delete an element and notice similar issues with lack of visual feedback.

Expected Behaviour:

When adding or deleting an element, the sidebar should close automatically, and the assurance case should reload immediately to display the changes. This should provide clear visual feedback to the user that their actions have been successfully executed.

Actual Behavior:

The sidebar remains open after adding or deleting elements, and the assurance case does not reload or update, leading to user confusion and potential duplication of elements or errors when user attempts to remove the same element multiple times.

[chrisdburr]

Screen recording demoing issue @RichGriff @cptanalatriste

https://github.com/alan-turing-institute/AssurancePlatform/assets/63010234/40b5f335-ed05-4708-948f-9901387c0721

[RichGriff]

@chrisdburr how many times did you select add? It seems that your azure server resources are slow (I noticed this myself in staging - especially with larger diagrams).

We can help with UI on the frontend to show a loading spinner and disabling the button while adding.

[chrisdburr]

I pressed add three times. The audio in the video has additional information, but you may have it muted.

[chrisdburr]

@RichGriff @cptanalatriste is this reproducible locally with the following file?

Explainability Pattern-2024-5-13T14-48-3.json

I don't want to go changing service plans on Azure until we know for sure that it is a resource issue.

Update

I have tested with the frontend running locally, and the backend on Azure. It's faster to add new elements, which reduces the risk of adding multiple elements, but it's still not quick.

Update 2

The size of the case does not appear to make a difference. Adding new elements to a blank case is also very slow on the staging environment. I do not recall it being this slow yesterday when I was creating a new case.

[chrisdburr]

Fix pushed by @cptanalatriste appears to have made significant improvements.

I would still recommend a UI adjustment on the following events:

• Add element
• Delete element

This could be a simple style change applied to the button to let the user know they have indeed clicked/pressed the button. There is no state change presently; just an on-hover state.

Or, it could be a more noticeable loading state that covers the sidebar and prevents further user interaction until the API returns the relevant message.

[cptanalatriste]

The performance improvement was made with this PR: https://github.com/alan-turing-institute/AssurancePlatform/pull/495/files

@kallewesterling @chrisdburr is this still an issue? Otherwise, please go ahead and close this issue

[chrisdburr]

I've not noticed any issues since the performance improvement you reference above, @cptanalatriste. Happy to close.