[LIMS-2144] Display static PNG as fallback for APNG viewer

package.json

@@ -3,8 +3,8 @@
   "version": "1.12.2",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
-    "@diamondlightsource/ui-components": "v2.2.4",
+    "@chakra-ui/react": "^2.10.9",
+    "@diamondlightsource/ui-components": "^2.3.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fullcalendar/core": "^6.1.19",

src/components/atlas/Atlas.tsx

@@ -75,7 +75,11 @@ export const Atlas = ({
       ) : (
         <img src={prependApiUrl(`dataGroups/${groupId}/atlas/image`)} alt='Atlas' />
       )}
-      <svg viewBox='0 0 512 512' className='static-png'>
+      <svg
+        viewBox='0 0 512 512'
+        className='static-png'
+        style={{ width: colours ? "95%" : undefined }}
+      >
         {data.gridSquares &&
           data.gridSquares.map((gridSquare, index) => (
             <rect

src/components/clem/ColourChannelDisplay.tsx

@@ -52,6 +52,7 @@ export const ColourChannelDisplay = ({
           src: `${prefix}?colour=${colour}`,
           hidden: !enabled,
         }))}
+        fallbackToPng={true}
       />
     </Box>
   );

src/components/visualisation/apngContainer.tsx

@@ -31,6 +31,7 @@ interface ApngView {
 export interface ApngContainerProps extends BoxProps {
   views: ApngView[];
   overlap?: boolean;
+  fallbackToPng?: boolean;
 }
 
 const OVERLAP_PROPS = {
@@ -44,6 +45,7 @@ const APNGContainer = ({
   height = "64vh",
   views,
   overlap = false,
+  fallbackToPng,
   ...props
 }: ApngContainerProps) => {
   const [frameLength, setFrameLength] = useState<number>();
@@ -103,6 +105,7 @@ const APNGContainer = ({
               frameIndex={frameIndex}
               caption={view.caption}
               src={view.src}
+              fallbackToPng={fallbackToPng}
             />
           </Box>
         ))}

src/components/visualisation/collectionTitle.tsx

@@ -1,6 +1,13 @@
-import { HStack, Heading, Link } from "@chakra-ui/layout";
-import { Tag, TagLeftIcon, TagLabel, TagProps } from "@chakra-ui/tag";
-import { Tooltip } from "@chakra-ui/tooltip";
+import {
+  Tooltip,
+  Tag,
+  TagLeftIcon,
+  TagLabel,
+  TagProps,
+  HStack,
+  Heading,
+  Link,
+} from "@chakra-ui/react";
 import { MdInfoOutline } from "react-icons/md";
 
 export interface CollectionTitleProps {

src/utils/api/client.ts

@@ -1,4 +1,4 @@
-import { createStandaloneToast } from "@chakra-ui/toast";
+import { createStandaloneToast } from "@chakra-ui/react";
 import { baseToast } from "@diamondlightsource/ui-components";
 const { toast } = createStandaloneToast();