From 17a4625e1ef37f73160dda923eefdf33c35effd3 Mon Sep 17 00:00:00 2001
From: mat <mat@northwestern.edu>
Date: Wed, 1 May 2024 18:09:09 -0400
Subject: [PATCH] Initialize new openseadragon instance once. (#208)

---
 src/components/Image/OSD/OSD.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Image/OSD/OSD.tsx b/src/components/Image/OSD/OSD.tsx
index b23fa583..cd2dd9a4 100644
--- a/src/components/Image/OSD/OSD.tsx
+++ b/src/components/Image/OSD/OSD.tsx
@@ -4,7 +4,7 @@ import {
   Wrapper,
 } from "src/components/Image/Image.styled";
 import OpenSeadragon, { Options } from "openseadragon";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import Controls from "src/components/Image/Controls/Controls";
 import { OpenSeadragonImageTypes } from "src/types/open-seadragon";
@@ -30,8 +30,14 @@ const OSD: React.FC<OSDProps> = ({
   const [osdUri, setOsdUri] = useState<string>();
   const [openSeadragon, setOpenSeadragon] = useState<OpenSeadragon.Viewer>();
 
+  const initializeOSD = useRef(false);
+
   useEffect(() => {
-    if (!openSeadragon) setOpenSeadragon(OpenSeadragon(config));
+    if (!initializeOSD.current) {
+      initializeOSD.current = true;
+
+      if (!openSeadragon) setOpenSeadragon(OpenSeadragon(config));
+    }
 
     return () => openSeadragon?.destroy();
   }, []);
@@ -43,7 +49,7 @@ const OSD: React.FC<OSDProps> = ({
 
   useEffect(() => {
     if (openSeadragon && uri !== osdUri) {
-      openSeadragon.forceRedraw();
+      openSeadragon?.forceRedraw();
       setOsdUri(uri);
     }
   }, [openSeadragon, osdUri, uri]);
@@ -52,7 +58,7 @@ const OSD: React.FC<OSDProps> = ({
     if (osdUri && openSeadragon) {
       switch (imageType) {
         case "simpleImage":
-          openSeadragon.addSimpleImage({
+          openSeadragon?.addSimpleImage({
             url: osdUri,
           });
           break;
@@ -62,8 +68,8 @@ const OSD: React.FC<OSDProps> = ({
               if (!tileSource)
                 throw new Error(`No tile source found for ${osdUri}`);
 
-              openSeadragon.addTiledImage({
-                tileSource: tileSource,
+              openSeadragon?.addTiledImage({
+                tileSource,
               });
             } catch (e) {
               console.error(e);
@@ -71,14 +77,14 @@ const OSD: React.FC<OSDProps> = ({
           });
           break;
         default:
-          openSeadragon.close();
+          openSeadragon?.close();
           console.warn(
             `Unable to render ${osdUri} in OpenSeadragon as type: "${imageType}"`,
           );
           break;
       }
     }
-  }, [imageType, osdUri, openSeadragon]);
+  }, [imageType, osdUri]);
 
   return (
     <Wrapper