From a07e1f4e039e47153d2fac545bf4b7d7490d2388 Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Tue, 20 Aug 2024 13:22:15 +0100 Subject: [PATCH 01/11] Add symbol to list of widgets and sizes for bob --- src/ui/widgets/EmbeddedDisplay/bobParser.ts | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/ui/widgets/EmbeddedDisplay/bobParser.ts b/src/ui/widgets/EmbeddedDisplay/bobParser.ts index 7e743560..81a76d73 100644 --- a/src/ui/widgets/EmbeddedDisplay/bobParser.ts +++ b/src/ui/widgets/EmbeddedDisplay/bobParser.ts @@ -51,7 +51,8 @@ const BOB_WIDGET_MAPPING: { [key: string]: any } = { progressbar: "progressbar", rectangle: "shape", choice: "choicebutton", - scaledslider: "slidecontrol" + scaledslider: "slidecontrol", + symbol: "symbol" }; // Default width and height of widgets in Phoebus @@ -75,7 +76,8 @@ export const WIDGET_DEFAULT_SIZES: { [key: string]: [number, number] } = { polyline: [100, 20], progressbar: [100, 20], rectangle: [100, 20], - scaledslider: [400, 55] + scaledslider: [400, 55], + symbol: [100, 100] }; function bobParseType(props: any): string { @@ -206,6 +208,14 @@ function bobParseResizing(jsonProp: ElementCompact): string { } } +function bobParseSymbols(jsonProp: ElementCompact): string[] { + const symbols: string[] = []; + jsonProp["symbol"].forEach((item: any) => { + symbols.push(item._text); + }); + return symbols; +} + function bobGetTargetWidget(props: any): React.FC { const typeid = bobParseType(props); let targetWidget; @@ -257,7 +267,11 @@ export function parseBob( squareLed: ["square", opiParseBoolean], formatType: ["format", bobParseFormatType], stretchToFit: ["stretch_image", opiParseBoolean], - macros: ["macros", opiParseMacros] + macros: ["macros", opiParseMacros], + symbols: ["symbols", bobParseSymbols], + initialIndex: ["initial_index", bobParseNumber], + showIndex: ["show_index", opiParseBoolean], + fallbackSymbol: ["fallback_symbol", opiParseString] }; const complexParsers = { From e27336897646ac2f49eae745ef0ab6114182847e Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Tue, 20 Aug 2024 14:09:14 +0100 Subject: [PATCH 02/11] Update Symbol to reflect usage in Phoebus --- .../Symbol/__snapshots__/symbol.test.tsx.snap | 56 +++++++- src/ui/widgets/Symbol/symbol.test.tsx | 67 ++++++++- src/ui/widgets/Symbol/symbol.tsx | 128 ++++++++++++++++-- 3 files changed, 235 insertions(+), 16 deletions(-) diff --git a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap index 91dd8e17..494a5517 100644 --- a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap +++ b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap @@ -1,13 +1,63 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[` > matches snapshot 1`] = ` +exports[` from .bob file use arrayIndex to find index if value is an array 1`] = `
+ +
+ +`; + +exports[` from .bob file use fallbackSymbol if index out of range or no symbol provided 1`] = ` + +
+ +
+ +`; + +exports[` from .bob file use initialIndex if no props value provided 1`] = ` + +
+ +
+
+ + + 2 + + +
+ +`; + +exports[` from .opi file matches snapshot 1`] = ` + +
", (): void => { +describe(" from .opi file", (): void => { test("label is not shown if showLabel is false", (): void => { const symbolProps = { showBooleanLabel: false, @@ -41,3 +43,66 @@ describe("", (): void => { expect(asFragment()).toMatchSnapshot(); }); }); + + +describe(" from .bob file", (): void => { + test("index is not shown if showIndex is false", (): void => { + const symbolProps = { + symbols: ["img 1.gif"], + value: new DType({ stringValue: "0" }) + }; + + render(); + + expect(screen.queryByText("0")).not.toBeInTheDocument(); + }); + + test("index is added", (): void => { + const symbolProps = { + showIndex: true, + symbols: ["img 1.gif", "img 2.png"], + value: stringValue + }; + render(); + + expect(screen.getByText("1")).toBeInTheDocument(); + }); + + test("use initialIndex if no props value provided", (): void => { + const symbolProps = { + showIndex: true, + initialIndex: 2, + symbols: ["img 1.gif", "img 2.png", "img 3.svg"], + value: undefined + }; + const { asFragment } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); + }); + test("use fallbackSymbol if index out of range or no symbol provided", (): void => { + const symbolProps = { + symbols: ["img 1.gif"], + value: new DType({ doubleValue: 1 }) + }; + const { asFragment } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); + }); + test("use arrayIndex to find index if value is an array", (): void => { + const symbolProps = { + arrayIndex: 0, + symbols: ["img 1.gif", "img 2.png", "img 3.svg"], + value: arrayValue + }; + const { asFragment } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); + }); + +}); diff --git a/src/ui/widgets/Symbol/symbol.tsx b/src/ui/widgets/Symbol/symbol.tsx index 403b21de..86e968b2 100644 --- a/src/ui/widgets/Symbol/symbol.tsx +++ b/src/ui/widgets/Symbol/symbol.tsx @@ -9,10 +9,10 @@ import { ColorPropOpt, FloatPropOpt, BorderPropOpt, - StringProp, ChoicePropOpt, FontPropOpt, - ActionsPropType + ActionsPropType, + StringArrayPropOpt } from "../propTypes"; import { registerWidget } from "../register"; import { ImageComponent } from "../Image/image"; @@ -24,7 +24,8 @@ import { ExitFileContext, FileContext } from "../../../misc/fileContext"; import { DType } from "../../../types/dtypes"; const SymbolProps = { - imageFile: StringProp, + imageFile: StringPropOpt, + symbols: StringArrayPropOpt, alt: StringPropOpt, backgroundColor: ColorPropOpt, showBooleanLabel: BoolPropOpt, @@ -46,7 +47,13 @@ const SymbolProps = { visible: BoolPropOpt, stretchToFit: BoolPropOpt, actions: ActionsPropType, - font: FontPropOpt + font: FontPropOpt, + initialIndex: FloatPropOpt, + showIndex: BoolPropOpt, + arrayIndex: FloatPropOpt, + enabled: BoolPropOpt, + fallbackSymbol: StringPropOpt, + transparent: BoolPropOpt }; export type SymbolComponentProps = InferWidgetProps & @@ -58,15 +65,40 @@ export type SymbolComponentProps = InferWidgetProps & * @param props */ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => { + const { + showIndex = false, + arrayIndex = 0, + initialIndex = 0, + fallbackSymbol = "https://cs-web-symbol.diamond.ac.uk/catalogue/default.svg", + transparent = true, + backgroundColor = "white", + showBooleanLabel = false, + enabled = true + } = props; const style = commonCss(props as any); + // If symbols and not imagefile, we're in a bob file + const isBob = props.symbols ? true : false; + const symbols = props.symbols ? props.symbols : []; + + // Convert our value to an index, or use the initialIndex + const index = convertValueToIndex(props.value, initialIndex, arrayIndex); - let imageFile = props.imageFile; const regex = / [0-9]\./; + let imageFile = isBob ? symbols[index] : props.imageFile; + // If no provided image file + if (!imageFile) imageFile = fallbackSymbol; const intValue = DType.coerceDouble(props.value); - if (!isNaN(intValue)) { - imageFile = props.imageFile.replace(regex, ` ${intValue.toFixed(0)}.`); + if (!isNaN(intValue) && !isBob) { + imageFile = imageFile.replace(regex, ` ${intValue.toFixed(0)}.`); } + // Symbol in Phoebus has no label but can display index + const labelText = isBob + ? showIndex + ? index.toString() + : "" + : props.value?.getStringValue(); + let alignItems = "center"; let justifyContent = "center"; switch (props.labelPosition) { @@ -104,7 +136,7 @@ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => { const exitContext = useContext(ExitFileContext); const parentMacros = useContext(MacroContext).macros; function onClick(event: React.MouseEvent): void { - if (props.actions !== undefined) { + if (props.actions !== undefined && enabled) { executeActions( props.actions as WidgetActions, files, @@ -114,19 +146,32 @@ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => { } } + // Define label appearance + let labelDiv; + if (isBob) labelDiv = generateIndexLabel(index, showIndex); + // Note: I would've preferred to define the onClick on div that wraps // both sub-components, but replacing the fragment with a div, with the way // the image component is written causes many images to be of the incorrect size return ( <> - - {props.showBooleanLabel && ( + + {isBob ? ( + labelDiv + ) : showBooleanLabel ? ( <>
{
+ ) : ( + <> )} ); }; +/** + * Return a div element describing how the label should look + */ +function generateIndexLabel(index: number, showIndex: boolean): JSX.Element { + if (!showIndex) return <>; + // Create span + return ( +
+ + {index} + +
+ ); +} + +/** + * Convert the input value into an index for symbols + * @param value + */ +function convertValueToIndex( + value: DType | undefined, + initialIndex: number, + arrayIndex: number +): number { + // If no value, use initialIndex + if (value === undefined) return initialIndex; + // First we check if we have a string + const isArray = value.getArrayValue()?.length !== undefined ? true : false + if (isArray) { + // If is array, get index + const arrayValue = DType.coerceArray(value); + const idx = Number(arrayValue[arrayIndex]); + return Math.floor(idx); + } else { + console.log(value); + const intValue = DType.coerceDouble(value); + console.log(intValue); + if (!isNaN(intValue)) return Math.floor(intValue); + } + return initialIndex; +} + const SymbolWidgetProps = { ...SymbolProps, ...PVWidgetPropType From 95c84eaf5b1cca0c0205bb334283513b4a112e8a Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Tue, 20 Aug 2024 14:11:03 +0100 Subject: [PATCH 03/11] Prettier format changes and remove console statements --- src/ui/widgets/Symbol/symbol.test.tsx | 6 ++---- src/ui/widgets/Symbol/symbol.tsx | 4 +--- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/ui/widgets/Symbol/symbol.test.tsx b/src/ui/widgets/Symbol/symbol.test.tsx index b9b570b7..faa22976 100644 --- a/src/ui/widgets/Symbol/symbol.test.tsx +++ b/src/ui/widgets/Symbol/symbol.test.tsx @@ -4,8 +4,8 @@ import { SymbolComponent } from "./symbol"; import { DType } from "../../../types/dtypes"; const fakeValue = new DType({ stringValue: "Fake value" }); -const stringValue = new DType({ stringValue: "1.54" }) -const arrayValue = new DType({ arrayValue: Float64Array.from([2, 0]) }) +const stringValue = new DType({ stringValue: "1.54" }); +const arrayValue = new DType({ arrayValue: Float64Array.from([2, 0]) }); describe(" from .opi file", (): void => { test("label is not shown if showLabel is false", (): void => { @@ -44,7 +44,6 @@ describe(" from .opi file", (): void => { }); }); - describe(" from .bob file", (): void => { test("index is not shown if showIndex is false", (): void => { const symbolProps = { @@ -104,5 +103,4 @@ describe(" from .bob file", (): void => { expect(asFragment()).toMatchSnapshot(); }); - }); diff --git a/src/ui/widgets/Symbol/symbol.tsx b/src/ui/widgets/Symbol/symbol.tsx index 86e968b2..bbdfefc0 100644 --- a/src/ui/widgets/Symbol/symbol.tsx +++ b/src/ui/widgets/Symbol/symbol.tsx @@ -240,16 +240,14 @@ function convertValueToIndex( // If no value, use initialIndex if (value === undefined) return initialIndex; // First we check if we have a string - const isArray = value.getArrayValue()?.length !== undefined ? true : false + const isArray = value.getArrayValue()?.length !== undefined ? true : false; if (isArray) { // If is array, get index const arrayValue = DType.coerceArray(value); const idx = Number(arrayValue[arrayIndex]); return Math.floor(idx); } else { - console.log(value); const intValue = DType.coerceDouble(value); - console.log(intValue); if (!isNaN(intValue)) return Math.floor(intValue); } return initialIndex; From d52988870a945ba1be15a671093629495244a8ce Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Wed, 21 Aug 2024 13:20:56 +0100 Subject: [PATCH 04/11] Move CSS styling into module file --- .../Symbol/__snapshots__/symbol.test.tsx.snap | 5 ++-- src/ui/widgets/Symbol/symbol.module.css | 23 +++++++++++++++ src/ui/widgets/Symbol/symbol.tsx | 29 ++++--------------- 3 files changed, 31 insertions(+), 26 deletions(-) create mode 100644 src/ui/widgets/Symbol/symbol.module.css diff --git a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap index 494a5517..3b346565 100644 --- a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap +++ b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap @@ -40,7 +40,7 @@ exports[` from .bob file use initialIndex if no props value provided 1 style="justify-content: center; align-content: center;" > 2 @@ -61,7 +61,8 @@ exports[` from .opi file matches snapshot 1`] = ` />
{ ) : showBooleanLabel ? ( <>
@@ -206,22 +202,7 @@ function generateIndexLabel(index: number, showIndex: boolean): JSX.Element { // Create span return (
- + {index}
From 10da41170e35c43ade8925e54118bde34abed0af Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Wed, 21 Aug 2024 13:30:33 +0100 Subject: [PATCH 05/11] Update snapshot tests --- .../Symbol/__snapshots__/symbol.test.tsx.snap | 23 +++-------- src/ui/widgets/Symbol/symbol.test.tsx | 40 +++++++++++++++---- 2 files changed, 39 insertions(+), 24 deletions(-) diff --git a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap index 3b346565..acbe5fd7 100644 --- a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap +++ b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap @@ -1,52 +1,41 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[` from .bob file use arrayIndex to find index if value is an array 1`] = ` +exports[` from .bob file matches snapshot (using fallback symbol) 1`] = `
`; -exports[` from .bob file use fallbackSymbol if index out of range or no symbol provided 1`] = ` +exports[` from .bob file matches snapshot (with index) 1`] = `
`; -exports[` from .bob file use initialIndex if no props value provided 1`] = ` +exports[` from .bob file matches snapshot (without index) 1`] = `
-
- - - 2 - - -
`; diff --git a/src/ui/widgets/Symbol/symbol.test.tsx b/src/ui/widgets/Symbol/symbol.test.tsx index faa22976..5351427d 100644 --- a/src/ui/widgets/Symbol/symbol.test.tsx +++ b/src/ui/widgets/Symbol/symbol.test.tsx @@ -74,28 +74,54 @@ describe(" from .bob file", (): void => { symbols: ["img 1.gif", "img 2.png", "img 3.svg"], value: undefined }; + + render(); + + expect(screen.getByText("2")).toBeInTheDocument(); + }); + + test("use arrayIndex to find index if value is an array", (): void => { + const symbolProps = { + arrayIndex: 0, + showIndex: true, + symbols: ["img 1.gif", "img 2.png", "img 3.svg"], + value: arrayValue + }; + render(); + + expect(screen.getByText("2")).toBeInTheDocument(); + }); + + test("matches snapshot (without index)", (): void => { + const symbolProps = { + symbols: ["img 1.gif"], + value: new DType({ stringValue: "0" }) + }; + const { asFragment } = render( ); expect(asFragment()).toMatchSnapshot(); }); - test("use fallbackSymbol if index out of range or no symbol provided", (): void => { + + test("matches snapshot (with index)", (): void => { const symbolProps = { - symbols: ["img 1.gif"], - value: new DType({ doubleValue: 1 }) + symbols: ["img 1.gif", "img 2.png", "img 3.svg"], + value: new DType({ stringValue: "2" }) }; + const { asFragment } = render( ); expect(asFragment()).toMatchSnapshot(); }); - test("use arrayIndex to find index if value is an array", (): void => { + + test("matches snapshot (using fallback symbol)", (): void => { const symbolProps = { - arrayIndex: 0, - symbols: ["img 1.gif", "img 2.png", "img 3.svg"], - value: arrayValue + symbols: ["img 1.gif"], + value: new DType({ doubleValue: 1 }) }; const { asFragment } = render( From f7ed9e10e0f1c84bd384f74daf144508c8e3d290 Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Thu, 22 Aug 2024 13:43:56 +0100 Subject: [PATCH 06/11] Move label text into component --- src/ui/widgets/Symbol/symbol.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/ui/widgets/Symbol/symbol.tsx b/src/ui/widgets/Symbol/symbol.tsx index 61ef2432..5d9b0ee3 100644 --- a/src/ui/widgets/Symbol/symbol.tsx +++ b/src/ui/widgets/Symbol/symbol.tsx @@ -93,13 +93,6 @@ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => { imageFile = imageFile.replace(regex, ` ${intValue.toFixed(0)}.`); } - // Symbol in Phoebus has no label but can display index - const labelText = isBob - ? showIndex - ? index.toString() - : "" - : props.value?.getStringValue(); - let alignItems = "center"; let justifyContent = "center"; switch (props.labelPosition) { @@ -182,7 +175,7 @@ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => {
From c46b003c57f24bf9ac73a98a78ce1d6877d3162c Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Mon, 2 Dec 2024 11:21:55 +0000 Subject: [PATCH 07/11] Update snapshots --- .../Symbol/__snapshots__/symbol.test.tsx.snap | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) diff --git a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap index acbe5fd7..c11caca4 100644 --- a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap +++ b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap @@ -1,5 +1,44 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[` from .bob file > matches snapshot (using fallback symbol) 1`] = ` + +
+ +
+ +`; + +exports[` from .bob file > matches snapshot (with index) 1`] = ` + +
+ +
+ +`; + +exports[` from .bob file > matches snapshot (without index) 1`] = ` + +
+ +
+ +`; + exports[` from .bob file matches snapshot (using fallback symbol) 1`] = `
from .bob file matches snapshot (without index) 1`] = ` `; +exports[` from .opi file > matches snapshot 1`] = ` + +
+ +
+
+
+
+ + Fake value + +
+
+
+ +`; + exports[` from .opi file matches snapshot 1`] = `
Date: Mon, 9 Dec 2024 15:39:00 +0000 Subject: [PATCH 08/11] Fix symbol link parsing --- src/ui/widgets/EmbeddedDisplay/bobParser.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/widgets/EmbeddedDisplay/bobParser.ts b/src/ui/widgets/EmbeddedDisplay/bobParser.ts index 81a76d73..46aeab8e 100644 --- a/src/ui/widgets/EmbeddedDisplay/bobParser.ts +++ b/src/ui/widgets/EmbeddedDisplay/bobParser.ts @@ -210,8 +210,8 @@ function bobParseResizing(jsonProp: ElementCompact): string { function bobParseSymbols(jsonProp: ElementCompact): string[] { const symbols: string[] = []; - jsonProp["symbol"].forEach((item: any) => { - symbols.push(item._text); + Object.values(jsonProp["symbol"]).forEach((item: any) => { + symbols.push(item); }); return symbols; } From 5bb25f4e1af4141c47e12cabd049263f9b3bc866 Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Mon, 9 Dec 2024 15:46:40 +0000 Subject: [PATCH 09/11] Add parsing of rotation for bob files --- src/ui/widgets/EmbeddedDisplay/bobParser.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ui/widgets/EmbeddedDisplay/bobParser.ts b/src/ui/widgets/EmbeddedDisplay/bobParser.ts index 46aeab8e..5ee7a269 100644 --- a/src/ui/widgets/EmbeddedDisplay/bobParser.ts +++ b/src/ui/widgets/EmbeddedDisplay/bobParser.ts @@ -271,7 +271,8 @@ export function parseBob( symbols: ["symbols", bobParseSymbols], initialIndex: ["initial_index", bobParseNumber], showIndex: ["show_index", opiParseBoolean], - fallbackSymbol: ["fallback_symbol", opiParseString] + fallbackSymbol: ["fallback_symbol", opiParseString], + rotation: ["rotation", bobParseNumber] }; const complexParsers = { From 301890ca826e0dc6d52ebf243fefa309032603c8 Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Mon, 9 Dec 2024 15:57:45 +0000 Subject: [PATCH 10/11] Allow symbols to overflow image bounds when rotated --- src/ui/widgets/Image/image.tsx | 5 +- .../Symbol/__snapshots__/symbol.test.tsx.snap | 67 ++++--------------- src/ui/widgets/Symbol/symbol.test.tsx | 29 ++++++++ src/ui/widgets/Symbol/symbol.tsx | 1 + 4 files changed, 45 insertions(+), 57 deletions(-) diff --git a/src/ui/widgets/Image/image.tsx b/src/ui/widgets/Image/image.tsx index 01a06c42..1193df57 100644 --- a/src/ui/widgets/Image/image.tsx +++ b/src/ui/widgets/Image/image.tsx @@ -23,7 +23,8 @@ const ImageProps = { rotation: FloatPropOpt, flipHorizontal: BoolPropOpt, flipVertical: BoolPropOpt, - onClick: FuncPropOpt + onClick: FuncPropOpt, + overflow: BoolPropOpt }; export const ImageComponent = ( @@ -39,7 +40,7 @@ export const ImageComponent = ( let imageHeight: string | undefined = undefined; let imageWidth: string | undefined = undefined; - const overflow = "hidden"; + const overflow = props.overflow ? "visible" : "hidden"; if (props.stretchToFit) { imageWidth = "100%"; imageHeight = "100%"; diff --git a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap index c11caca4..10b4f8e6 100644 --- a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap +++ b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap @@ -3,7 +3,7 @@ exports[` from .bob file > matches snapshot (using fallback symbol) 1`] = `
from .bob file > matches snapshot (using fallback symbol) 1` exports[` from .bob file > matches snapshot (with index) 1`] = `
from .bob file > matches snapshot (with index) 1`] = ` `; -exports[` from .bob file > matches snapshot (without index) 1`] = ` +exports[` from .bob file > matches snapshot (with rotation) 1`] = `
-
- -`; - -exports[` from .bob file matches snapshot (using fallback symbol) 1`] = ` - -
-
`; -exports[` from .bob file matches snapshot (with index) 1`] = ` +exports[` from .bob file > matches snapshot (without index) 1`] = `
`; -exports[` from .bob file matches snapshot (without index) 1`] = ` +exports[` from .opi file > matches snapshot (with rotation) 1`] = `
@@ -81,7 +68,7 @@ exports[` from .bob file matches snapshot (without index) 1`] = ` exports[` from .opi file > matches snapshot 1`] = `
from .opi file > matches snapshot 1`] = `
`; - -exports[` from .opi file matches snapshot 1`] = ` - -
- -
-
-
-
- - Fake value - -
-
-
- -`; diff --git a/src/ui/widgets/Symbol/symbol.test.tsx b/src/ui/widgets/Symbol/symbol.test.tsx index 5351427d..4ec7f380 100644 --- a/src/ui/widgets/Symbol/symbol.test.tsx +++ b/src/ui/widgets/Symbol/symbol.test.tsx @@ -42,6 +42,21 @@ describe(" from .opi file", (): void => { expect(asFragment()).toMatchSnapshot(); }); + + test("matches snapshot (with rotation)", (): void => { + const symbolProps = { + showBooleanLabel: false, + imageFile: "img 1.gif", + value: fakeValue, + rotation: 45 + }; + + const { asFragment } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); + }); }); describe(" from .bob file", (): void => { @@ -129,4 +144,18 @@ describe(" from .bob file", (): void => { expect(asFragment()).toMatchSnapshot(); }); + + test("matches snapshot (with rotation)", (): void => { + const symbolProps = { + symbols: ["img 1.gif"], + value: new DType({ stringValue: "0" }), + rotation: 45 + }; + + const { asFragment } = render( + + ); + + expect(asFragment()).toMatchSnapshot(); + }); }); diff --git a/src/ui/widgets/Symbol/symbol.tsx b/src/ui/widgets/Symbol/symbol.tsx index 5d9b0ee3..ef94c242 100644 --- a/src/ui/widgets/Symbol/symbol.tsx +++ b/src/ui/widgets/Symbol/symbol.tsx @@ -154,6 +154,7 @@ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => { imageFile={imageFile} onClick={onClick} stretchToFit={true} + overflow={true} /> {isBob ? ( labelDiv From 009ccbf6150b12ecd7563010b25aeab2ad582ecc Mon Sep 17 00:00:00 2001 From: Abigail Alexander Date: Tue, 10 Dec 2024 10:38:01 +0000 Subject: [PATCH 11/11] Check if parsed symbol is string or object --- src/ui/widgets/EmbeddedDisplay/bobParser.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ui/widgets/EmbeddedDisplay/bobParser.ts b/src/ui/widgets/EmbeddedDisplay/bobParser.ts index 5ee7a269..53fa61e5 100644 --- a/src/ui/widgets/EmbeddedDisplay/bobParser.ts +++ b/src/ui/widgets/EmbeddedDisplay/bobParser.ts @@ -211,7 +211,9 @@ function bobParseResizing(jsonProp: ElementCompact): string { function bobParseSymbols(jsonProp: ElementCompact): string[] { const symbols: string[] = []; Object.values(jsonProp["symbol"]).forEach((item: any) => { - symbols.push(item); + // For a single symbol, we are passed a string. For multiple symbols + // we are passed an object, so we need to return string from it + symbols.push(typeof item === "string" ? item : item._text); }); return symbols; }