[Add] WSI Preview (Frontend)

Author: Jason Wang

web/apps/labelstudio/src/app/App.jsx

@@ -97,6 +97,18 @@ const content = document.querySelector("#main-content");
 
 render(<App content={content.innerHTML} />, root);
 
+setTimeout(() => {
+  const script = document.createElement('script');
+  script.src = '/static/js/openseadragon.js';
+  script.defer = true;
+  document.body.appendChild(script);
+  const script2 = document.createElement('script');
+  script2.src = '/static/js/jquery.min.js';
+  script2.defer = true;
+  document.body.appendChild(script2);
+
+}, 0)
+
 if (module?.hot) {
   module.hot.accept(); // Enable HMR for React components
 }

web/apps/labelstudio/src/pages/CreateProject/Config/Config.jsx

@@ -478,33 +478,36 @@ const Configurator = ({
         <div className={configClass.elem("editor")}>
           {configure === "code" && (
             <div className={configClass.elem("code")} style={{ display: configure === "code" ? undefined : "none" }}>
-              <CodeMirror
-                name="code"
-                id="edit_code"
-                value={config}
-                autoCloseTags={true}
-                smartIndent={true}
-                detach
-                extensions={["hint", "xml-hint"]}
-                options={{
-                  mode: "xml",
-                  theme: "default",
-                  lineNumbers: true,
-                  extraKeys: {
-                    "'<'": completeAfter,
-                    // "'/'": completeIfAfterLt,
-                    "' '": completeIfInTag,
-                    "'='": completeIfInTag,
-                    "Ctrl-Space": "autocomplete",
-                  },
-                  hintOptions: { schemaInfo: tags },
-                }}
-                // don't close modal with Escape while editing config
-                onKeyDown={(editor, e) => {
-                  if (e.code === "Escape") e.stopPropagation();
-                }}
-                onChange={(editor, data, value) => onChange(value)}
-              />
+              <textarea value={config} onChange={(e) => {
+                onChange(e.target.value);
+              }}></textarea>
+              {/*<CodeMirror*/}
+              {/*  name="code"*/}
+              {/*  id="edit_code"*/}
+              {/*  value={config}*/}
+              {/*  autoCloseTags={true}*/}
+              {/*  smartIndent={true}*/}
+              {/*  detach*/}
+              {/*  extensions={["hint", "xml-hint"]}*/}
+              {/*  options={{*/}
+              {/*    mode: "xml",*/}
+              {/*    theme: "default",*/}
+              {/*    lineNumbers: true,*/}
+              {/*    extraKeys: {*/}
+              {/*      "'<'": completeAfter,*/}
+              {/*      // "'/'": completeIfAfterLt,*/}
+              {/*      "' '": completeIfInTag,*/}
+              {/*      "'='": completeIfInTag,*/}
+              {/*      "Ctrl-Space": "autocomplete",*/}
+              {/*    },*/}
+              {/*    hintOptions: { schemaInfo: tags },*/}
+              {/*  }}*/}
+              {/*  // don't close modal with Escape while editing config*/}
+              {/*  onKeyDown={(editor, e) => {*/}
+              {/*    if (e.code === "Escape") e.stopPropagation();*/}
+              {/*  }}*/}
+              {/*  onChange={(editor, data, value) => onChange(value)}*/}
+              {/*/>*/}
             </div>
           )}
           {visualLoaded && (

web/libs/datamanager/src/components/CellViews/ImageCell.jsx

@@ -19,11 +19,18 @@ export const ImageCell = (column) => {
 
   if (!imgSrc) return null;
 
+  const getImageSrc = (src) => {
+    if (data.some(key => src?.includes(key))) {
+      return `${src}&level=6&col=0&row=0`;
+    }
+    return src;
+  }
+
   return renderImagePreview ? (
     <img
       {...imgDefaultProps}
       key={imgSrc}
-      src={imgSrc}
+      src={getImageSrc(imgSrc)}
       alt="Data"
       style={{
         maxHeight: "100%",

web/libs/editor/src/components/ImageView/Dragron.jsx

@@ -0,0 +1,53 @@
+import { observer } from "mobx-react";
+import { forwardRef, useCallback, useMemo, useEffect } from "react";
+import { Block, Elem } from '../../utils/bem';
+import { FF_LSDV_4711, isFF } from '../../utils/feature-flags';
+import messages from '../../utils/messages';
+import { ErrorMessage } from "../ErrorMessage/ErrorMessage";
+import { drawSeaDragon } from "./setOpenSeaDragon";
+
+export const RELATIVE_STAGE_WIDTH = 100;
+export const RELATIVE_STAGE_HEIGHT = 100;
+export const SNAP_TO_PIXEL_MODE = {
+  EDGE: "edge",
+  CENTER: "center",
+};
+
+export const Dragon = observer(
+  forwardRef(({imageStyles, imageEntity}, ref) => {
+    const getImageData = async (src) => {
+      fetch(src).then(response => {
+        if (!response.ok) {
+
+        }
+        return response.text();
+      }).then(xmlString => {
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(xmlString, "application/xml");
+        const imageElement = xmlDoc.documentElement;
+        const sizeElement = xmlDoc.querySelector("Size");
+
+        const tileSize = imageElement.getAttribute("TileSize");
+        const width = sizeElement.getAttribute("Width");
+        const height = sizeElement.getAttribute('Height')
+        viewer = drawSeaDragon(imageEntity.src, width -0,height-0,tileSize-0);
+      })
+
+    }
+
+    let viewer = null;
+    if (imageEntity.src) {
+      getImageData(imageEntity.src);
+    }
+    useEffect(() => {
+      if(viewer) {
+        viewer.destroy();
+        viewer = null;
+      }
+      if (imageEntity.src) {
+        getImageData(imageEntity.src);
+      }
+    }, [imageStyles, imageEntity.src])
+    return (<></>);
+  }),
+);

web/libs/editor/src/components/ImageView/ImageView.jsx

@@ -32,6 +32,7 @@ import {
 } from "../../utils/feature-flags";
 import { Pagination } from "../../common/Pagination/Pagination";
 import { Image } from "./Image";
+import { Dragon } from "./Dragron";
 
 Konva.showWarnings = false;
 
@@ -916,9 +917,21 @@ export default observer(
 
       const imageIsLoaded = item.imageIsLoaded || !isFF(FF_LSDV_4583_6);
       const isViewingAll = store.annotationStore.viewingAll;
-
+      const isDragon = (src) => {
+        if (!src) {
+          return true;
+        }
+        const data = ['.svs', '.csp','.sdpc', 'tiff', '.ndpi', '.scn', '.mrxs', '.bif','.svslide']
+        return !data.some(key => src?.includes(key));
+      }
       return (
-        <ObjectTag item={item} className={wrapperClasses.join(" ")}>
+        (!isDragon(item?.currentImageEntity?.src) ? <>
+              <>
+                <div id="img-mem-view" style={{width: '100%', height:'100%'}}></div>
+                <Dragon imageEntity={item.currentImageEntity}></Dragon>
+              </>
+            </> :
+            <ObjectTag item={item} className={wrapperClasses.join(" ")}>
           {paginationEnabled ? (
             <div
               className={styles.pagination}
@@ -1056,7 +1069,8 @@ export default observer(
             </div>
           )}
         </ObjectTag>
-      );
+      )
+        );
     }
   },
 );

web/libs/editor/src/components/ImageView/setOpenSeaDragon.ts

@@ -0,0 +1,57 @@
+let viewer: any = null;
+
+export const drawSeaDragon = (src: any, width: any, height: any, tileSize: any)=> {
+  const OpenSeaDragon = (window as any)?.OpenSeaDragon;
+  const container = document.querySelector('#img-mem-view');
+  if (!src || !height || !width || !tileSize) {
+    return;
+  }
+
+  if (viewer) {
+    viewer.destroy();
+    viewer = null;
+  }
+
+  if (!src && viewer) {
+    viewer.destroy();
+    viewer = null;
+    return;
+  }
+  if (!container && viewer) {
+    viewer.destroy();
+    viewer = null;
+  }
+
+  if (container && !viewer && OpenSeaDragon) {
+    viewer = new OpenSeadragon({
+        id: "img-mem-view",
+        tileSources: [
+          {
+            width,
+            height,
+            tileSize,
+            getTileUrl: function (level: string, x: string, y: string) {
+              return `${src}&level=${level}&row=${y}&col=${x}`;
+            }
+          }
+        ],
+        sequenceMode: true,
+        preserveViewport: true,
+        prefixUrl: "/static/images/",
+        showNavigator: true,
+        showRotationControl: true,
+        animationTime: 0.5,
+        blendTime: 0.1,
+        constrainDuringPan: true,
+        maxZoomPixelRatio: 2,
+        minZoomImageRatio: 1,
+        visibilityRatio: 1,
+        zoomPerScroll: 2,
+        timeout: 120000,
+        showNavigationControl: true,
+        setMouseNavEnabled: true,
+    });
+  }
+
+  return viewer;
+};