[Fix] Frontend rendering issue.

Author: Jason Wang

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

@@ -37,7 +37,7 @@ const queryClient = new QueryClient({
 });
 
 const browserHistory = createBrowserHistory({
-  basename: baseURL.pathname || "/",
+  basename: "/label-studio",
   // callback is an async way to confirm or decline going to another page in the context of routing. It accepts `true` or `false`
   getUserConfirmation: (message, callback) => {
     // `history.block` doesn't block events, so in the case of listeners,

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

@@ -20,6 +20,7 @@ export const ImageCell = (column) => {
   if (!imgSrc) return null;
 
   const getImageSrc = (src) => {
+    const data = ['.svs', '.csp', '.sdpc', 'tiff', '.ndpi', '.scn', '.mrxs', '.bif', '.svslide'];
     if (data.some(key => src?.includes(key))) {
       return `${src}&level=6&col=0&row=0`;
     }

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

@@ -29,12 +29,15 @@ export const Dragon = observer(
 
         const tileSize = imageElement.getAttribute("TileSize");
         const width = sizeElement.getAttribute("Width");
-        const height = sizeElement.getAttribute('Height')
+        const height = sizeElement.getAttribute('Height');
+        console.log("width", width, "height", height, "tileSize", tileSize);
         viewer = drawSeaDragon(imageEntity.src, width -0,height-0,tileSize-0);
       })
 
     }
 
+    console.log("imageEntity", imageEntity);
+
     let viewer = null;
     if (imageEntity.src) {
       getImageData(imageEntity.src);

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

@@ -1,7 +1,9 @@
+import { ImageList } from "../../examples/image_list";
+
 let viewer: any = null;
 
 export const drawSeaDragon = (src: any, width: any, height: any, tileSize: any)=> {
-  const OpenSeaDragon = (window as any)?.OpenSeaDragon;
+  const OpenSeaDragon = (window as any)?.OpenSeadragon;
   const container = document.querySelector('#img-mem-view');
   if (!src || !height || !width || !tileSize) {
     return;
@@ -23,7 +25,7 @@ export const drawSeaDragon = (src: any, width: any, height: any, tileSize: any)=
   }
 
   if (container && !viewer && OpenSeaDragon) {
-    viewer = new OpenSeadragon({
+    viewer = new OpenSeaDragon({
         id: "img-mem-view",
         tileSources: [
           {
@@ -40,7 +42,9 @@ export const drawSeaDragon = (src: any, width: any, height: any, tileSize: any)=
         prefixUrl: "/static/images/",
         showNavigator: true,
         showRotationControl: true,
-        animationTime: 0.5,
+        animationTime: 2,
+        imageLoaderLimit: 6,
+        springStiffness: 3,
         blendTime: 0.1,
         constrainDuringPan: true,
         maxZoomPixelRatio: 2,

web/webpack.config.js

@@ -94,7 +94,7 @@ module.exports = composePlugins(
       config.output = {
         ...config.output,
         uniqueName: "labelstudio",
-        publicPath: isDevelopment && FRONTEND_HOSTNAME ? `${FRONTEND_HOSTNAME}/react-app/` : "auto",
+        publicPath: isDevelopment && FRONTEND_HOSTNAME ? `${FRONTEND_HOSTNAME}/react-app/` : "/label-studio",
         scriptType: "text/javascript",
       };