Skip to content

Commit 2b3cbf2

Browse files
abigailalexanderabigailalexander
authored
Merge pull request #60 from DiamondLightSource/update-symbol-widget
Update symbol widget
2 parents 6217326 + 009ccbf commit 2b3cbf2

File tree

6 files changed

+331
-29
lines changed

6 files changed

+331
-29
lines changed

‎src/ui/widgets/EmbeddedDisplay/bobParser.ts

+20-3
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ const BOB_WIDGET_MAPPING: { [key: string]: any } = {
5151
progressbar: "progressbar",
5252
rectangle: "shape",
5353
choice: "choicebutton",
54-
scaledslider: "slidecontrol"
54+
scaledslider: "slidecontrol",
55+
symbol: "symbol"
5556
};
5657

5758
// Default width and height of widgets in Phoebus
@@ -75,7 +76,8 @@ export const WIDGET_DEFAULT_SIZES: { [key: string]: [number, number] } = {
7576
polyline: [100, 20],
7677
progressbar: [100, 20],
7778
rectangle: [100, 20],
78-
scaledslider: [400, 55]
79+
scaledslider: [400, 55],
80+
symbol: [100, 100]
7981
};
8082

8183
function bobParseType(props: any): string {
@@ -206,6 +208,16 @@ function bobParseResizing(jsonProp: ElementCompact): string {
206208
}
207209
}
208210

211+
function bobParseSymbols(jsonProp: ElementCompact): string[] {
212+
const symbols: string[] = [];
213+
Object.values(jsonProp["symbol"]).forEach((item: any) => {
214+
// For a single symbol, we are passed a string. For multiple symbols
215+
// we are passed an object, so we need to return string from it
216+
symbols.push(typeof item === "string" ? item : item._text);
217+
});
218+
return symbols;
219+
}
220+
209221
function bobGetTargetWidget(props: any): React.FC {
210222
const typeid = bobParseType(props);
211223
let targetWidget;
@@ -257,7 +269,12 @@ export function parseBob(
257269
squareLed: ["square", opiParseBoolean],
258270
formatType: ["format", bobParseFormatType],
259271
stretchToFit: ["stretch_image", opiParseBoolean],
260-
macros: ["macros", opiParseMacros]
272+
macros: ["macros", opiParseMacros],
273+
symbols: ["symbols", bobParseSymbols],
274+
initialIndex: ["initial_index", bobParseNumber],
275+
showIndex: ["show_index", opiParseBoolean],
276+
fallbackSymbol: ["fallback_symbol", opiParseString],
277+
rotation: ["rotation", bobParseNumber]
261278
};
262279

263280
const complexParsers = {

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@ const ImageProps = {
2323
rotation: FloatPropOpt,
2424
flipHorizontal: BoolPropOpt,
2525
flipVertical: BoolPropOpt,
26-
onClick: FuncPropOpt
26+
onClick: FuncPropOpt,
27+
overflow: BoolPropOpt
2728
};
2829

2930
export const ImageComponent = (
@@ -39,7 +40,7 @@ export const ImageComponent = (
3940

4041
let imageHeight: string | undefined = undefined;
4142
let imageWidth: string | undefined = undefined;
42-
const overflow = "hidden";
43+
const overflow = props.overflow ? "visible" : "hidden";
4344
if (props.stretchToFit) {
4445
imageWidth = "100%";
4546
imageHeight = "100%";

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

+70-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,83 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`<Symbol /> > matches snapshot 1`] = `
3+
exports[`<Symbol /> from .bob file > matches snapshot (using fallback symbol) 1`] = `
44
<DocumentFragment>
55
<div
6-
style="overflow: hidden; text-align: left;"
6+
style="overflow: visible; text-align: left; width: 100%; height: 100%;"
7+
>
8+
<img
9+
src="https://cs-web-symbol.diamond.ac.uk/catalogue/default.svg"
10+
style="width: 100%; height: 100%; display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill;"
11+
/>
12+
</div>
13+
</DocumentFragment>
14+
`;
15+
16+
exports[`<Symbol /> from .bob file > matches snapshot (with index) 1`] = `
17+
<DocumentFragment>
18+
<div
19+
style="overflow: visible; text-align: left; width: 100%; height: 100%;"
20+
>
21+
<img
22+
src="img 3.svg"
23+
style="width: 100%; height: 100%; display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill;"
24+
/>
25+
</div>
26+
</DocumentFragment>
27+
`;
28+
29+
exports[`<Symbol /> from .bob file > matches snapshot (with rotation) 1`] = `
30+
<DocumentFragment>
31+
<div
32+
style="overflow: visible; text-align: left; width: 100%; height: 100%;"
33+
>
34+
<img
35+
src="img 1.gif"
36+
style="width: 100%; height: 100%; display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: fill;"
37+
/>
38+
</div>
39+
</DocumentFragment>
40+
`;
41+
42+
exports[`<Symbol /> from .bob file > matches snapshot (without index) 1`] = `
43+
<DocumentFragment>
44+
<div
45+
style="overflow: visible; text-align: left; width: 100%; height: 100%;"
46+
>
47+
<img
48+
src="img 1.gif"
49+
style="width: 100%; height: 100%; display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill;"
50+
/>
51+
</div>
52+
</DocumentFragment>
53+
`;
54+
55+
exports[`<Symbol /> from .opi file > matches snapshot (with rotation) 1`] = `
56+
<DocumentFragment>
57+
<div
58+
style="overflow: visible; text-align: left; width: 100%; height: 100%;"
59+
>
60+
<img
61+
src="img 1.gif"
62+
style="width: 100%; height: 100%; display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: fill;"
63+
/>
64+
</div>
65+
</DocumentFragment>
66+
`;
67+
68+
exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
69+
<DocumentFragment>
70+
<div
71+
style="overflow: visible; text-align: left; width: 100%; height: 100%;"
772
>
873
<img
974
src="img 1.gif"
10-
style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: none;"
75+
style="width: 100%; height: 100%; display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill;"
1176
/>
1277
</div>
1378
<div
14-
style="background-color: transparent; position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; display: flex; align-items: center; justify-content: center;"
79+
class="_SymbolLabel_7b7af1"
80+
style="background-color: transparent; align-items: center; justify-content: center;"
1581
>
1682
<div
1783
style="padding: 5%;"

‎src/ui/widgets/Symbol/symbol.module.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.IndexLabel {
2+
height: 30px;
3+
width: 30px;
4+
border-radius: 50%;
5+
background-color: black;
6+
border: 1px solid white;
7+
opacity: 50%;
8+
color: white;
9+
position: absolute;
10+
top: calc(50% - 15px);
11+
left: calc(50% - 15px);
12+
text-align: center;
13+
font-size: math;
14+
}
15+
16+
.SymbolLabel {
17+
position: absolute;
18+
height: 100%;
19+
width: 100%;
20+
top: 0;
21+
left: 0;
22+
display: flex;
23+
}

‎src/ui/widgets/Symbol/symbol.test.tsx

+119-1
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { SymbolComponent } from "./symbol";
44
import { DType } from "../../../types/dtypes";
55

66
const fakeValue = new DType({ stringValue: "Fake value" });
7+
const stringValue = new DType({ stringValue: "1.54" });
8+
const arrayValue = new DType({ arrayValue: Float64Array.from([2, 0]) });
79

8-
describe("<Symbol />", (): void => {
10+
describe("<Symbol /> from .opi file", (): void => {
911
test("label is not shown if showLabel is false", (): void => {
1012
const symbolProps = {
1113
showBooleanLabel: false,
@@ -40,4 +42,120 @@ describe("<Symbol />", (): void => {
4042

4143
expect(asFragment()).toMatchSnapshot();
4244
});
45+
46+
test("matches snapshot (with rotation)", (): void => {
47+
const symbolProps = {
48+
showBooleanLabel: false,
49+
imageFile: "img 1.gif",
50+
value: fakeValue,
51+
rotation: 45
52+
};
53+
54+
const { asFragment } = render(
55+
<SymbolComponent {...(symbolProps as any)} />
56+
);
57+
58+
expect(asFragment()).toMatchSnapshot();
59+
});
60+
});
61+
62+
describe("<Symbol /> from .bob file", (): void => {
63+
test("index is not shown if showIndex is false", (): void => {
64+
const symbolProps = {
65+
symbols: ["img 1.gif"],
66+
value: new DType({ stringValue: "0" })
67+
};
68+
69+
render(<SymbolComponent {...(symbolProps as any)} />);
70+
71+
expect(screen.queryByText("0")).not.toBeInTheDocument();
72+
});
73+
74+
test("index is added", (): void => {
75+
const symbolProps = {
76+
showIndex: true,
77+
symbols: ["img 1.gif", "img 2.png"],
78+
value: stringValue
79+
};
80+
render(<SymbolComponent {...(symbolProps as any)} />);
81+
82+
expect(screen.getByText("1")).toBeInTheDocument();
83+
});
84+
85+
test("use initialIndex if no props value provided", (): void => {
86+
const symbolProps = {
87+
showIndex: true,
88+
initialIndex: 2,
89+
symbols: ["img 1.gif", "img 2.png", "img 3.svg"],
90+
value: undefined
91+
};
92+
93+
render(<SymbolComponent {...(symbolProps as any)} />);
94+
95+
expect(screen.getByText("2")).toBeInTheDocument();
96+
});
97+
98+
test("use arrayIndex to find index if value is an array", (): void => {
99+
const symbolProps = {
100+
arrayIndex: 0,
101+
showIndex: true,
102+
symbols: ["img 1.gif", "img 2.png", "img 3.svg"],
103+
value: arrayValue
104+
};
105+
render(<SymbolComponent {...(symbolProps as any)} />);
106+
107+
expect(screen.getByText("2")).toBeInTheDocument();
108+
});
109+
110+
test("matches snapshot (without index)", (): void => {
111+
const symbolProps = {
112+
symbols: ["img 1.gif"],
113+
value: new DType({ stringValue: "0" })
114+
};
115+
116+
const { asFragment } = render(
117+
<SymbolComponent {...(symbolProps as any)} />
118+
);
119+
120+
expect(asFragment()).toMatchSnapshot();
121+
});
122+
123+
test("matches snapshot (with index)", (): void => {
124+
const symbolProps = {
125+
symbols: ["img 1.gif", "img 2.png", "img 3.svg"],
126+
value: new DType({ stringValue: "2" })
127+
};
128+
129+
const { asFragment } = render(
130+
<SymbolComponent {...(symbolProps as any)} />
131+
);
132+
133+
expect(asFragment()).toMatchSnapshot();
134+
});
135+
136+
test("matches snapshot (using fallback symbol)", (): void => {
137+
const symbolProps = {
138+
symbols: ["img 1.gif"],
139+
value: new DType({ doubleValue: 1 })
140+
};
141+
const { asFragment } = render(
142+
<SymbolComponent {...(symbolProps as any)} />
143+
);
144+
145+
expect(asFragment()).toMatchSnapshot();
146+
});
147+
148+
test("matches snapshot (with rotation)", (): void => {
149+
const symbolProps = {
150+
symbols: ["img 1.gif"],
151+
value: new DType({ stringValue: "0" }),
152+
rotation: 45
153+
};
154+
155+
const { asFragment } = render(
156+
<SymbolComponent {...(symbolProps as any)} />
157+
);
158+
159+
expect(asFragment()).toMatchSnapshot();
160+
});
43161
});

0 commit comments

Comments
 (0)