NickAkhmetov/CAT-661 Fix View PDF button disappearance (#3594)

hubmapconsortium · Nov 5, 2024 · 604b7fe · 604b7fe
1 parent 91b3263
commit 604b7fe
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 29 deletions.
diff --git a/CHANGELOG-cat-661.md b/CHANGELOG-cat-661.md
@@ -0,0 +1,2 @@
+- Fix View PDF button disappearing while PDF is processing.
+- Remove square white background behind PDF modal's close button.
diff --git a/context/app/static/js/components/detailPage/files/PDFViewer/PDFViewer.tsx b/context/app/static/js/components/detailPage/files/PDFViewer/PDFViewer.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Document, Page } from 'react-pdf';
 import Modal from '@mui/material/Modal';
 import Button from '@mui/material/Button';
@@ -18,47 +18,59 @@ interface PDFFile {
   numPages: number;
 }
 
+interface PDFLoadingIndicatorProps {
+  isProcessingPDF: boolean;
+  onLoadSuccess: (pdfObj: PDFFile) => void;
+  pdfUrl: string;
+}
+function PDFLoadingIndicator({ isProcessingPDF, onLoadSuccess, pdfUrl }: PDFLoadingIndicatorProps) {
+  if (!isProcessingPDF) {
+    return null;
+  }
+  return (
+    <Document
+      file={pdfUrl}
+      onLoadSuccess={onLoadSuccess}
+      loading={<LinearProgress sx={{ maxWidth: '100px' }} />}
+      error={
+        <Box display="flex">
+          <ErrorIcon />
+          <Typography>Failed to load</Typography>
+        </Box>
+      }
+    />
+  );
+}
+
 function PDFViewer({ pdfUrl }: PDFViewerProps) {
   const [currentPageNum, setCurrentPageNum] = useState(1);
   const [open, setOpen] = useState(false);
   const [pdf, setPdf] = useState<PDFFile>();
   const [isProcessingPDF, setIsProcessingPDF] = useState(false);
 
-  const handleClose = () => {
+  const onLoadSuccess = useCallback((pdfObj: PDFFile) => {
+    setOpen(true);
+    setPdf(pdfObj);
+  }, []);
+
+  const handleClose = useCallback(() => {
     setOpen(false);
     setIsProcessingPDF(false);
-  };
+  }, []);
 
   return (
     <>
-      {(!isProcessingPDF || open) && (
-        <Box minWidth="125px">
-          {/* We don't open the modal here because there may be an error processing the PDF. */}
-          <Button type="button" onClick={() => setIsProcessingPDF(true)} variant="outlined">
-            View PDF
-          </Button>
-        </Box>
-      )}
-      {isProcessingPDF && (
-        <Document
-          file={pdfUrl}
-          onLoadSuccess={(pdfObj) => {
-            setOpen(true);
-            setPdf(pdfObj);
-          }}
-          loading={<LinearProgress sx={{ maxWidth: '100px' }} />}
-          error={
-            <Box display="flex">
-              <ErrorIcon />
-              <Typography>Failed to load</Typography>
-            </Box>
-          }
-        />
-      )}
+      <Box minWidth="125px">
+        {/* We don't open the modal here because there may be an error processing the PDF. */}
+        <Button type="button" onClick={() => setIsProcessingPDF(true)} variant="outlined">
+          View PDF
+        </Button>
+      </Box>
+      <PDFLoadingIndicator isProcessingPDF={isProcessingPDF} onLoadSuccess={onLoadSuccess} pdfUrl={pdfUrl} />
       <Modal open={open} onClose={handleClose} aria-labelledby="pdf-viewer-modal" aria-describedby="pdf-viewer-modal">
         <ModalContentWrapper>
           <Document file={pdfUrl}>
-            <Page pageNumber={currentPageNum} renderTextLayer={false} />
+            <Page pageNumber={currentPageNum} renderTextLayer={false} renderAnnotationLayer={false} />
           </Document>
           {pdf && (
             <PDFViewerControlButtons

diff --git a/context/app/static/js/components/detailPage/files/PDFViewer/style.ts b/context/app/static/js/components/detailPage/files/PDFViewer/style.ts
@@ -23,7 +23,7 @@ const StyledIconButton = styled(IconButton)({
 
 const StyledCloseIcon = styled(CancelRoundedIcon)({
   backgroundColor: '#fff',
-  borderCadius: '100%',
+  borderRadius: '100%',
 });
 
 const ErrorIcon = styled(ErrorRoundedIcon)(({ theme }) => ({