Fix minor widget bugs

src/ui/widgets/ByteMonitor/byteMonitor.test.tsx

@@ -54,7 +54,7 @@ describe("<ByteMonitorComponent />", (): void => {
       startBit: 8,
       numBits: 16,
       horizontal: false,
-      squareLed: true,
+      square: true,
       bitReverse: true,
       effect3d: false,
       onColor: Color.fromRgba(200, 200, 200),

src/ui/widgets/ByteMonitor/byteMonitor.tsx

@@ -22,7 +22,7 @@ export const ByteMonitorProps = {
   startBit: IntPropOpt,
   horizontal: BoolPropOpt,
   bitReverse: BoolPropOpt,
-  squareLed: BoolPropOpt,
+  square: BoolPropOpt,
   ledBorder: IntPropOpt,
   ledBorderColor: ColorPropOpt,
   effect3d: BoolPropOpt
@@ -49,8 +49,8 @@ export const ByteMonitorComponent = (
     onColor = Color.fromRgba(0, 255, 0),
     offColor = Color.fromRgba(0, 100, 0),
     ledBorder = 2,
-    ledBorderColor = Color.fromRgba(150, 150, 150), // dark grey
-    squareLed = false,
+    ledBorderColor = Color.fromRgba(50, 50, 50, 178), // dark grey
+    square = false,
     effect3d = false,
     width = WIDGET_DEFAULT_SIZES["byte_monitor"][0],
     height = WIDGET_DEFAULT_SIZES["byte_monitor"][1]
@@ -73,7 +73,7 @@ export const ByteMonitorComponent = (
     height,
     border,
     horizontal,
-    squareLed
+    square
   );
   const ledArray: Array<JSX.Element> = [];
   dataValues.forEach((data: number, idx: number) => {
@@ -94,7 +94,7 @@ export const ByteMonitorComponent = (
     style["borderColor"] = ledBorderColor.toString();
     style["borderWidth"] = `${borderWidth}px`;
     // Set shape as square or circular
-    if (squareLed) {
+    if (square) {
       style.width = `${bitWidth + borderWidth}px`;
       style.height = `${bitHeight + borderWidth}px`;
     } else {
@@ -113,7 +113,7 @@ export const ByteMonitorComponent = (
       style["backgroundImage"] = `radial-gradient(circle at top left, white, ${
         data ? onColor?.toString() : offColor?.toString()
       })`;
-      if (!squareLed) {
+      if (!square) {
         style["borderColor"] = "transparent";
         style["backgroundImage"] +=
           ", radial-gradient(circle at top left, black,white)";

src/ui/widgets/EmbeddedDisplay/bobParser.ts

@@ -421,7 +421,7 @@ const BOB_SIMPLE_PARSERS: ParserDict = {
   imageFile: ["file", opiParseString],
   points: ["points", bobParsePoints],
   resize: ["resize", bobParseResizing],
-  squareLed: ["square", opiParseBoolean],
+  square: ["square", opiParseBoolean],
   formatType: ["format", bobParseFormatType],
   stretchToFit: ["stretch_image", opiParseBoolean],
   macros: ["macros", opiParseMacros],
@@ -512,7 +512,7 @@ export async function parseBob(
     traces: (props: ElementCompact) => bobParseTraces(props["traces"]),
     axes: (props: ElementCompact) => bobParseYAxes(props["y_axes"]),
     plt: async (props: ElementCompact) =>
-      await parsePlt(props["file"], props._attributes?.type)
+      await parsePlt(props["file"], filepath, props._attributes?.type)
   };
 
   const displayWidget = await parseWidget(

src/ui/widgets/EmbeddedDisplay/opiParser.ts

@@ -706,6 +706,7 @@ export const OPI_SIMPLE_PARSERS: ParserDict = {
   ledBorder: ["led_border", opiParseNumber],
   ledBorderColor: ["led_border_color", opiParseColor],
   bitReverse: ["bitReverse", opiParseBoolean],
+  square: ["square", opiParseBoolean],
   squareLed: ["square_led", opiParseBoolean],
   squareButton: ["square_button", opiParseBoolean],
   effect3d: ["effect_3d", opiParseBoolean],
@@ -775,7 +776,7 @@ function opiPatchRules(
   return widgetDescription;
 }
 
-function normalisePath(path: string, parentDir?: string): string {
+export function normalisePath(path: string, parentDir?: string): string {
   let prefix = parentDir ?? "";
   while (path.startsWith("../")) {
     path = path.substr(3);

src/ui/widgets/EmbeddedDisplay/pltParser.test.ts

@@ -97,7 +97,11 @@ describe("plt parser", (): void => {
     });
     const mockFetch = (): Promise<unknown> => mockFetchPromise;
     vi.spyOn(globalWithFetch, "fetch").mockImplementation(mockFetch);
-    const plt = await parsePlt({ _text: "fakefile.plt" }, "databrowser");
+    const plt = await parsePlt(
+      { _text: "fakefile.plt" },
+      "fakeDir",
+      "databrowser"
+    );
     expect(plt.backgroundColor).toEqual(Color.fromRgba(204, 204, 204));
     // Check custom props parsed correctly
     expect(plt.axes.length).toEqual(1);

src/ui/widgets/EmbeddedDisplay/pltParser.ts

@@ -4,7 +4,8 @@ import {
   XmlDescription,
   opiParseBoolean,
   opiParseString,
-  opiParseNumber
+  opiParseNumber,
+  normalisePath
 } from "./opiParser";
 import { parseChildProps, ParserDict } from "./parser";
 import { Axis } from "../../../types/axis";
@@ -187,12 +188,16 @@ function pltParseColor(jsonProp: ElementCompact) {
  */
 export async function parsePlt(
   file: ElementCompact,
+  parentDir: string,
   widgetType?: string | number
 ): Promise<Plt> {
   // TO DO - check file ext is plt
   let props = new Plt();
   if (widgetType === "databrowser" && typeof file._text === "string") {
-    const databrowser: XmlDescription = await fetchPltFile(file._text);
+    const databrowser: XmlDescription = await fetchPltFile(
+      file._text,
+      parentDir
+    );
     // Parse the simple props
     const [pvlist, pvAxes] = pltParsePvlist(databrowser["pvlist"]);
     const axes = pltParseAxes(databrowser["axes"], pvAxes);
@@ -210,7 +215,11 @@ export async function parsePlt(
  * @param file
  * @returns JSON object
  */
-async function fetchPltFile(file: string) {
+async function fetchPltFile(file: string, parentDir: string) {
+  // Patch filepath if relative path
+  if (parentDir && !file.startsWith("http")) {
+    file = normalisePath(file, parentDir);
+  }
   const filePromise = await fetch(file);
   const contents = await filePromise.text();
   // Convert it to a "compact format"

src/ui/widgets/Image/image.test.tsx

@@ -53,5 +53,14 @@ describe("<ImageComponent />", (): void => {
       }
       expect.assertions(1);
     });
+
+    test("opacity is applied", (): void => {
+      render(<ImageComponent imageFile="test.jpg#" opacity={0.33} />);
+      const img = screen.getByRole("img");
+
+      if ("style" in img) {
+        expect(img.style).toHaveProperty("opacity", "0.33");
+      }
+    });
   });
 });

src/ui/widgets/Image/image.tsx

@@ -28,7 +28,8 @@ const ImageProps = {
   overflow: BoolPropOpt,
   backgroundColor: ColorPropOpt,
   transparent: BoolPropOpt,
-  preserveRatio: BoolPropOpt
+  preserveRatio: BoolPropOpt,
+  opacity: FloatPropOpt
 };
 
 export const ImageComponent = (
@@ -39,7 +40,8 @@ export const ImageComponent = (
     flipHorizontal,
     flipVertical,
     stretchToFit = false,
-    preserveRatio = false
+    preserveRatio = false,
+    opacity = 1
   } = props;
 
   const onClick = (event: React.MouseEvent<HTMLDivElement>): void => {
@@ -84,7 +86,8 @@ export const ImageComponent = (
             flipHorizontal ? -1 : 1
           }) scaleY(${flipVertical ? -1 : 1})`,
           objectFit: ratio || !stretchToFit ? "contain" : "fill",
-          objectPosition: "top left"
+          objectPosition: "top left",
+          opacity: opacity
         }}
       />
     </div>

src/ui/widgets/LED/led.module.css

@@ -1,7 +1,6 @@
 .Led {
   width: 11px;
   height: 11px;
-  border-radius: 50%;
   background-color: #00ee00;
 }
 

src/ui/widgets/LED/led.test.tsx

@@ -86,19 +86,24 @@ describe("width property is used", (): void => {
     // Width in CS-Studio doesn't quite match width in the browser,
     // so whatever is input has 5 subtracted from it, this makes it
     // look more like CS-Studio
-    expect(renderedLed.props.style.width).toBe("5px");
-    expect(renderedLed.props.style.height).toBe("15px");
+    expect(renderedLed.props.style.width).toBe("10px");
+    expect(renderedLed.props.style.height).toBe("20px");
   });
 });
 
 describe("height property is used", (): void => {
   it("height changes the size of the LED", (): void => {
-    const renderedLed = renderLed({ ...DEFAULT_PROPS, height: 10 });
+    const renderedLed = renderLed({
+      ...DEFAULT_PROPS,
+      height: 10,
+      square: true
+    });
 
     // Width in CS-Studio doesn't quite match width in the browser,
     // so whatever is input has 5 subtracted from it, this makes it
     // look more like CS-Studio
-    expect(renderedLed.props.style.width).toBe("15px");
-    expect(renderedLed.props.style.height).toBe("5px");
+    expect(renderedLed.props.style.width).toBe("20px");
+    expect(renderedLed.props.style.height).toBe("10px");
+    expect(renderedLed.props.style.borderRadius).toBe("0%");
   });
 });

src/ui/widgets/LED/led.tsx

@@ -25,7 +25,8 @@ export const LedProps = {
   offColor: ColorPropOpt,
   lineColor: ColorPropOpt,
   alarmSensitive: BoolPropOpt,
-  bit: IntPropOpt
+  bit: IntPropOpt,
+  square: BoolPropOpt
 };
 
 export type LedComponentProps = InferWidgetProps<typeof LedProps> & PVComponent;
@@ -45,7 +46,8 @@ export const LedComponent = (props: LedComponentProps): JSX.Element => {
     width = WIDGET_DEFAULT_SIZES["led"][0],
     height = WIDGET_DEFAULT_SIZES["led"][1],
     alarmSensitive = false,
-    bit = -1
+    bit = -1,
+    square = false
   } = props;
 
   const { value } = getPvValueAndName(pvData);
@@ -65,11 +67,12 @@ export const LedComponent = (props: LedComponentProps): JSX.Element => {
   }
   style["backgroundColor"] = ledOn ? onColor?.toString() : offColor?.toString();
   style["border"] = `2px solid ${lineColor.toString()}`;
+  style["borderRadius"] = square ? "0%" : "50%";
 
   // make sizes similar to size in CS-Studio, five taken
   // away from default in css file too
-  style.width = `${width - 5}px`;
-  style.height = `${height - 5}px`;
+  style.width = `${width}px`;
+  style.height = `${height}px`;
 
   let className = classes.Led;
   if (alarmSensitive) {

src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (using fallback symbol) 1`
   >
     <img
       src="https://cs-web-symbol.diamond.ac.uk/catalogue/default_symbol.png"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
   </div>
 </DocumentFragment>
@@ -20,7 +20,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (with index) 1`] = `
   >
     <img
       src="img 3.svg"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
   </div>
 </DocumentFragment>
@@ -33,7 +33,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (with rotation) 1`] = `
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
+      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
   </div>
 </DocumentFragment>
@@ -46,7 +46,7 @@ exports[`<Symbol /> from .bob file > matches snapshot (without index) 1`] = `
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
   </div>
 </DocumentFragment>
@@ -59,7 +59,7 @@ exports[`<Symbol /> from .opi file > matches snapshot (with rotation) 1`] = `
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
+      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
   </div>
 </DocumentFragment>
@@ -72,7 +72,7 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: contain; object-position: top left; opacity: 1;"
     />
   </div>
   <div