Fix pdf viewer for analysis plugin

.github/workflows/review.yml

@@ -6,6 +6,9 @@ on:
     branches:
       - migration-merge
 
+env:
+  NODE_VERSION: '22.11.0'
+
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -26,7 +29,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
@@ -52,7 +55,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
@@ -81,7 +84,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
@@ -110,7 +113,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
@@ -139,7 +142,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.10.0
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'

.nvmrc

@@ -1 +1 @@
-v20.10.0
+v22.11.0

Dockerfile

@@ -1,4 +1,4 @@
-FROM timbru31/node-alpine-git:20 as builder
+FROM timbru31/node-alpine-git:22 as builder
 
 WORKDIR /tmp/nexus-web
 COPY . /tmp/nexus-web
@@ -13,7 +13,7 @@ RUN apk add --no-cache \
 RUN yarn
 RUN NODE_OPTIONS=--max-old-space-size=8192 yarn build
 
-FROM node:20-alpine
+FROM node:22-alpine
 ENV NODE_ENV=production
 WORKDIR /opt/nexus
 COPY --from=builder /tmp/nexus-web/dist /opt/nexus/dist

ci/docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3.3'
 services:
   cypress:
-    image: 'cypress/included:13.6.2'
+    image: 'cypress/included:13.15.2'
     depends_on:
       - fusion
       - delta

cypress.config.ts

@@ -26,6 +26,7 @@ export default defineConfig({
       ELECTRON_EXTRA_LAUNCH_ARGS: '--disable-gpu',
       NODE_TLS_REJECT_UNAUTHORIZED: 0,
     },
+
     setupNodeEvents(on, config) {
       on('before:browser:launch', (browser, launchOptions) => {
         launchOptions.args.push('--window-size=1920,1080');
@@ -148,7 +149,8 @@ export default defineConfig({
                 projectLabel,
                 resource: resourcePayload,
               });
-              if (!createResource) {
+              console.log('Created Resource', createdResource);
+              if (!createdResource) {
                 throw new Error('Test Resource was not created');
               }
               return createdResource;

package.json

@@ -7,7 +7,7 @@
   "url": "https://github.com/BlueBrain/nexus/issues/new?labels=fusion",
   "type": "module",
   "engine": {
-    "node": "20.10.0",
+    "node": "22.11.0",
     "npm": ">=9.8.1",
     "yarn": "1.22.x"
   },
@@ -101,7 +101,7 @@
     "react-infinite-scroll-component": "^4.5.3",
     "react-json-view": "^1.21.3",
     "react-mde": "^11.0.0",
-    "react-pdf": "7.5.1",
+    "react-pdf": "9.1.1",
     "react-player": "2.13.0",
     "react-query": "^3.13.4",
     "react-redux": "^8.0.2",
@@ -153,7 +153,7 @@
     "@types/lodash": "^4.14.202",
     "@types/morgan": "^1.7.35",
     "@types/mustache": "^4.2.5",
-    "@types/node": "^20.10.6",
+    "@types/node": "^22.9.0",
     "@types/object-hash": "^1.2.0",
     "@types/pluralize": "^0.0.29",
     "@types/qs": "^6.9.5",
@@ -175,7 +175,7 @@
     "@vitest/ui": "^1.1.1",
     "browserify-zlib": "^0.2.0",
     "css-loader": "^2.1.1",
-    "cypress": "^13.6.2",
+    "cypress": "^13.15.2",
     "cypress-file-upload": "^5.0.8",
     "esbuild": "^0.19.4",
     "esbuild-node-tsc": "^2.0.5",
@@ -231,7 +231,8 @@
   "resolutions": {
     "d3-interpolate": "2.0.1",
     "headers-polyfill": "3.0.10",
-    "history": "4.5.1"
+    "history": "4.5.1",
+    "canvas": "Automattic/node-canvas#master"
   },
   "overrides": {
     "d3-interpolate": "2.0.1"

src/shared/components/FileInfo/PDFFileInfo.tsx

@@ -54,7 +54,10 @@ export default ({
         <PDFThumbnail
           previewDisabled={previewDisabled}
           url={src}
-          onPreview={() => !previewDisabled && setIsVisible(true)}
+          onPreview={React.useCallback(
+            () => !previewDisabled && setIsVisible(true),
+            []
+          )}
         />
       )}
       {isVisible && src && (

src/shared/components/Preview/PDFPreview.tsx

@@ -16,7 +16,7 @@ import './PDFThumbnail.scss';
 import './PDFPreview.scss';
 
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.js',
+  'pdfjs-dist/build/pdf.worker.min.mjs',
   import.meta.url
 ).toString();
 
@@ -36,7 +36,7 @@ const PDFThumbnail = ({
     height: number;
     width: number;
   }>();
-
+  const [isReady, setIsReady] = React.useState(false);
   /**
    * Returns either height or width prop for specifying
    * size of PDF document for display on screen depending
@@ -55,37 +55,40 @@ const PDFThumbnail = ({
     return { width: Math.floor(bounds.width * 0.8) };
   }, [bounds, pdfDimensions]);
 
+  const onDocumentLoadSuccess = React.useCallback(() => {
+    setIsReady(true);
+  }, []);
   return (
     <div className="pdf-thumbnail-wrapper" ref={wrapperHeightRef}>
       <Document
         loading={<>loading...</>}
         file={url}
         onLoadError={console.error}
-        renderMode="svg"
-        options={{ isEvalSupported: false }}
+        onLoadSuccess={onDocumentLoadSuccess}
       >
-        <Page
-          className="pdf-thumbnail-page"
-          pageNumber={1}
-          renderMode="svg"
-          onLoadSuccess={page => {
-            setPdfDimensions({
-              height: page.originalHeight,
-              width: page.originalWidth,
-            });
-          }}
-          {...calculatePDFSizingProp}
-        >
-          {!previewDisabled && (
-            <div className="ant-image-mask" onClick={() => onPreview()}>
-              <div className="ant-image-mask-info">
-                <EyeOutlined size={16} />
-                <br />
-                Preview
+        {isReady && (
+          <Page
+            className="pdf-thumbnail-page"
+            pageNumber={1}
+            onLoadSuccess={page => {
+              setPdfDimensions({
+                height: page.originalHeight,
+                width: page.originalWidth,
+              });
+            }}
+            {...calculatePDFSizingProp}
+          >
+            {!previewDisabled && (
+              <div className="ant-image-mask" onClick={() => onPreview()}>
+                <div className="ant-image-mask-info">
+                  <EyeOutlined size={16} />
+                  <br />
+                  Preview
+                </div>
               </div>
-            </div>
-          )}
-        </Page>
+            )}
+          </Page>
+        )}
       </Document>
     </div>
   );
@@ -177,7 +180,6 @@ const PDFViewer: React.FC<{
                 <TransformComponent>
                   <Page
                     pageNumber={pageNumber}
-                    renderMode="svg"
                     renderTextLayer={false}
                     renderAnnotationLayer={false}
                     onLoadSuccess={page => {

src/shared/containers/AnalysisPlugin/__tests__/AnalysisPluginContainer.spec.tsx

@@ -1,4 +1,3 @@
-import { vi } from 'vitest';
 import { NexusProvider } from '@bbp/react-nexus';
 import { createNexusClient } from '@bbp/nexus-sdk/es';
 import { QueryClient, QueryClientProvider } from 'react-query';

vite.config.js

@@ -23,7 +23,7 @@ export default defineConfig(() => {
             console.log('⛔️ describe may not getting the latest tag')
         }
     }
-    
+
     return ({
         base: process.env.NODE_ENV === 'production' ? "/__BASE__/" : "/",
         plugins: [
@@ -88,7 +88,7 @@ export default defineConfig(() => {
                 output: {
                     manualChunks: {
                         lodash: ['lodash'],
-                        pdfjs: ['node_modules/pdfjs-dist/build/pdf.worker.min.js'],
+                        pdfjs: ['node_modules/pdfjs-dist/build/pdf.worker.min.mjs'],
                         codemirror: ["codemirror", "react-codemirror2"]
                     }
                 }