Fix miscellaneous bugs

src/connection/pvws.ts

@@ -107,11 +107,7 @@ function pvwsToDType(data: any): DType {
   }
 
   let dtime = undefined;
-  if (data.seconds) {
-    const datetime = new Date(0);
-    datetime.setSeconds(data.seconds);
-    dtime = new DTime(datetime);
-  }
+  if (data.seconds) dtime = new DTime(new Date(data.seconds * 1000));
 
   let stringVal = undefined;
   if (data.text !== undefined) {

src/ui/widgets/DynamicPage/dynamicPage.tsx

@@ -18,11 +18,14 @@ import {
   BorderPropOpt,
   BoolPropOpt
 } from "../propTypes";
-import { EmbeddedDisplay } from "../EmbeddedDisplay/embeddedDisplay";
+import {
+  EmbeddedDisplay,
+  EmbeddedDisplayPropsExtra
+} from "../EmbeddedDisplay/embeddedDisplay";
 import { Color } from "../../../types/color";
 import { RelativePosition } from "../../../types/position";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
-import { useTheme } from "@mui/material";
+import { phoebusTheme } from "../../../phoebusTheme";
 
 const DynamicPageProps = {
   location: StringProp,
@@ -33,9 +36,9 @@ const DynamicPageProps = {
 
 // Generic display widget to put other things inside
 export const DynamicPageComponent = (
-  props: InferWidgetProps<typeof DynamicPageProps>
+  props: InferWidgetProps<typeof DynamicPageProps> & EmbeddedDisplayPropsExtra
 ): JSX.Element => {
-  const theme = useTheme();
+  const theme = props.theme || phoebusTheme;
   const style = commonCss(props);
   const fileContext = useContext(FileContext);
 

src/ui/widgets/EmbeddedDisplay/embeddedDisplay.tsx

@@ -177,7 +177,7 @@ export const EmbeddedDisplay = (
       type: "display",
       position: props.position,
       backgroundColor:
-        description.backgroundColor ?? new Color("rgb(200,200,200"),
+        description.backgroundColor ?? new Color("rgb(255,255,255"),
       border:
         props.border ?? new Border(BorderStyle.Line, new Color("white"), 0),
       overflow: overflow,

src/ui/widgets/Image/image.tsx

@@ -9,7 +9,8 @@ import {
   StringPropOpt,
   FloatPropOpt,
   FuncPropOpt,
-  MacrosPropOpt
+  MacrosPropOpt,
+  ColorPropOpt
 } from "../propTypes";
 import { registerWidget } from "../register";
 
@@ -24,13 +25,20 @@ const ImageProps = {
   flipHorizontal: BoolPropOpt,
   flipVertical: BoolPropOpt,
   onClick: FuncPropOpt,
-  overflow: BoolPropOpt
+  overflow: BoolPropOpt,
+  backgroundColor: ColorPropOpt,
+  transparent: BoolPropOpt
 };
 
 export const ImageComponent = (
   props: InferWidgetProps<typeof ImageProps>
 ): JSX.Element => {
-  const { rotation = 0, flipHorizontal, flipVertical } = props;
+  const {
+    rotation = 0,
+    flipHorizontal,
+    flipVertical,
+    stretchToFit = false
+  } = props;
 
   const onClick = (event: React.MouseEvent<HTMLDivElement>): void => {
     if (props.onClick) {
@@ -69,7 +77,7 @@ export const ImageComponent = (
           transform: `rotate(${rotation}deg) scaleX(${
             flipHorizontal ? -1 : 1
           }) scaleY(${flipVertical ? -1 : 1})`,
-          objectFit: props.stretchToFit ? "fill" : "none",
+          objectFit: stretchToFit ? "fill" : "none",
           objectPosition: "top left"
         }}
       />

src/ui/widgets/Readback/__snapshots__/readback.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Readback /> > alarm-sensitive foreground colour 1`] = `
 <DocumentFragment>
   <div
-    class="MuiFormControl-root MuiTextField-root css-1ahahy7-MuiFormControl-root-MuiTextField-root"
+    class="MuiFormControl-root MuiTextField-root css-zlfaez-MuiFormControl-root-MuiTextField-root"
   >
     <div
       class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-multiline Mui-readOnly MuiInputBase-readOnly css-1cvskbr-MuiInputBase-root-MuiOutlinedInput-root"
@@ -13,6 +13,7 @@ exports[`<Readback /> > alarm-sensitive foreground colour 1`] = `
         class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline Mui-readOnly MuiInputBase-readOnly css-w4nesw-MuiInputBase-input-MuiOutlinedInput-input"
         id=":r5:"
         readonly=""
+        style="height: 0px; overflow: hidden;"
       >
         hello
       </textarea>

src/ui/widgets/Readback/readback.tsx

@@ -193,7 +193,6 @@ export const ReadbackComponent = (
       disabled={!enabled}
       value={displayedValue}
       multiline={wrapWords}
-      maxRows={"auto"}
       variant="outlined"
       slotProps={{
         input: {
@@ -211,11 +210,13 @@ export const ReadbackComponent = (
         },
         "& .MuiInputBase-input": {
           textAlign: textAlign,
-          font: font,
-          lineHeight: 1
+          font: font
         },
         "& .MuiInputBase-root": {
+          justifyContent: alignmentV,
+          flexDirection: "column",
           alignItems: alignmentV,
+          overflow: "hidden",
           color: foregroundColor,
           backgroundColor: backgroundColor
         },

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

@@ -3,11 +3,11 @@
 exports[`<Symbol /> from .bob file > matches snapshot (using fallback symbol) 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: visible; text-align: left; width: 100%; height: 100%;"
+    style="background-color: transparent; overflow: visible; text-align: left; width: 100%; height: 100%;"
   >
     <img
-      src="https://cs-web-symbol.diamond.ac.uk/catalogue/default.svg"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill; object-position: top left;"
+      src="https://cs-web-symbol.diamond.ac.uk/catalogue/default_symbol.png"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -16,11 +16,11 @@ exports[`<Symbol /> from .bob file > matches snapshot (using fallback symbol) 1`
 exports[`<Symbol /> from .bob file > matches snapshot (with index) 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: visible; text-align: left; width: 100%; height: 100%;"
+    style="background-color: transparent; overflow: visible; text-align: left; width: 100%; height: 100%;"
   >
     <img
       src="img 3.svg"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -29,11 +29,11 @@ exports[`<Symbol /> from .bob file > matches snapshot (with index) 1`] = `
 exports[`<Symbol /> from .bob file > matches snapshot (with rotation) 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: visible; text-align: left; width: 100%; height: 100%;"
+    style="background-color: transparent; overflow: visible; text-align: left; width: 100%; height: 100%;"
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: fill; object-position: top left;"
+      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -42,11 +42,11 @@ exports[`<Symbol /> from .bob file > matches snapshot (with rotation) 1`] = `
 exports[`<Symbol /> from .bob file > matches snapshot (without index) 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: visible; text-align: left; width: 100%; height: 100%;"
+    style="background-color: transparent; overflow: visible; text-align: left; width: 100%; height: 100%;"
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: fill; object-position: top left;"
+      style="display: block; transform: rotate(0deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -55,11 +55,11 @@ exports[`<Symbol /> from .bob file > matches snapshot (without index) 1`] = `
 exports[`<Symbol /> from .opi file > matches snapshot (with rotation) 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: visible; text-align: left; width: 100%; height: 100%;"
+    style="background-color: transparent; overflow: visible; text-align: left; width: 100%; height: 100%;"
   >
     <img
       src="img 1.gif"
-      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: fill; object-position: top left;"
+      style="display: block; transform: rotate(45deg) scaleX(1) scaleY(1); object-fit: none; object-position: top left;"
     />
   </div>
 </DocumentFragment>
@@ -68,7 +68,7 @@ exports[`<Symbol /> from .opi file > matches snapshot (with rotation) 1`] = `
 exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: visible; text-align: left; width: 100%; height: 100%;"
+    style="background-color: transparent; overflow: visible; text-align: left; width: 100%; height: 100%;"
   >
     <img
       src="img 1.gif"

src/ui/widgets/Symbol/symbol.tsx

@@ -70,7 +70,7 @@ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => {
     showIndex = false,
     arrayIndex = 0,
     initialIndex = 0,
-    fallbackSymbol = "https://cs-web-symbol.diamond.ac.uk/catalogue/default.svg",
+    fallbackSymbol = "https://cs-web-symbol.diamond.ac.uk/catalogue/default_symbol.png",
     transparent = true,
     backgroundColor = "white",
     showBooleanLabel = false,
@@ -151,9 +151,10 @@ export const SymbolComponent = (props: SymbolComponentProps): JSX.Element => {
     <>
       <ImageComponent
         {...props}
+        transparent
         imageFile={imageFile}
         onClick={onClick}
-        stretchToFit={showBooleanLabel ? false : true}
+        stretchToFit={false}
         overflow={true}
       />
       {isBob ? (