From 50068241342a3ccf172a1992c167f5ddbb7b9613 Mon Sep 17 00:00:00 2001
From: Abigail Alexander <abigail.alexander@diamond.ac.uk>
Date: Mon, 29 Jun 2026 11:28:54 +0100
Subject: [PATCH] Add disconnected symbol when urls all fail

---
 .../widgets/DynamicImage/demoImage.test.tsx   | 31 +++++++++++++++----
 src/ui/widgets/DynamicImage/demoImage.tsx     |  3 +-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/ui/widgets/DynamicImage/demoImage.test.tsx b/src/ui/widgets/DynamicImage/demoImage.test.tsx
index bd84e82..f74e45d 100644
--- a/src/ui/widgets/DynamicImage/demoImage.test.tsx
+++ b/src/ui/widgets/DynamicImage/demoImage.test.tsx
@@ -115,6 +115,7 @@ describe("DemoImageComponent", () => {
     });
 
     fireEvent.error(getByRole("img")); // move to second URL
+    fireEvent.error(getByRole("img")); // move to default URL
     fireEvent.error(getByRole("img")); // no more URLs → warning
 
     expect(showWarningMock).toHaveBeenCalledWith(
@@ -136,6 +137,7 @@ describe("DemoImageComponent", () => {
     );
 
     fireEvent.error(screen.getByRole("img")); // → b
+    fireEvent.error(screen.getByRole("img")); // → default
     fireEvent.error(screen.getByRole("img")); // → warning + reset
 
     // Trigger again → should start sequence again from second URL
@@ -172,7 +174,7 @@ describe("buildMjpgPvUrls", () => {
     expect(result).toEqual([]);
   });
 
-  it("returns empty array if endpoints are empty", () => {
+  it("returns empty array if endpoints empty", () => {
     const result = buildMjpgPvUrls([], "TEST:PV");
     expect(result).toEqual([]);
   });
@@ -183,30 +185,47 @@ describe("buildMjpgPvUrls", () => {
       "TEST:PV"
     );
 
-    expect(result).toEqual(["http://a/TEST:PV", "http://b/TEST:PV"]);
+    expect(result).toEqual([
+      "http://a/TEST:PV",
+      "http://b/TEST:PV",
+      "/images/disconnectedImage.svg"
+    ]);
   });
 
   it("removes pva:// prefix from pvName", () => {
     const result = buildMjpgPvUrls(["http://a"], "pva://TEST:PV");
 
-    expect(result).toEqual(["http://a/TEST:PV"]);
+    expect(result).toEqual([
+      "http://a/TEST:PV",
+      "/images/disconnectedImage.svg"
+    ]);
   });
 
   it("replaces :ARRAY suffix with :OUTPUT", () => {
     const result = buildMjpgPvUrls(["http://a"], "TEST:PV:ARRAY");
 
-    expect(result).toEqual(["http://a/TEST:PV:OUTPUT"]);
+    expect(result).toEqual([
+      "http://a/TEST:PV:OUTPUT",
+      "/images/disconnectedImage.svg"
+    ]);
   });
 
   it("handles both prefix removal and suffix replacement together", () => {
     const result = buildMjpgPvUrls(["http://a"], "pva://TEST:PV:ARRAY");
 
-    expect(result).toEqual(["http://a/TEST:PV:OUTPUT"]);
+    expect(result).toEqual([
+      "http://a/TEST:PV:OUTPUT",
+      "/images/disconnectedImage.svg"
+    ]);
   });
 
   it("builds urls for multiple endpoints", () => {
     const result = buildMjpgPvUrls(["http://a", "http://b"], "TEST:PV");
 
-    expect(result).toEqual(["http://a/TEST:PV", "http://b/TEST:PV"]);
+    expect(result).toEqual([
+      "http://a/TEST:PV",
+      "http://b/TEST:PV",
+      "/images/disconnectedImage.svg"
+    ]);
   });
 });
diff --git a/src/ui/widgets/DynamicImage/demoImage.tsx b/src/ui/widgets/DynamicImage/demoImage.tsx
index 7aba4f3..525e4c5 100644
--- a/src/ui/widgets/DynamicImage/demoImage.tsx
+++ b/src/ui/widgets/DynamicImage/demoImage.tsx
@@ -124,7 +124,8 @@ export const buildMjpgPvUrls = (
     ?.filter(x => x != null)
     ?.map((endpoint, i) => `${endpoint}/${trimmedPvName}`);
 
-  return additionalPvData ?? [];
+  additionalPvData.push("/images/disconnectedImage.svg");
+  return additionalPvData ?? ["/images/disconnectedImage.svg"];
 };
 
 const DemoImageWidgetProps = {