Merge pull request #204 from Tauffer-Consulting/feature/display-results

feat: add html and pdf to display result
Tauffer-Consulting · Dec 8, 2023 · 8e37c73 · 8e37c73
2 parents 9e2f2e4 + bf2b0b7
commit 8e37c73
Show file tree

Hide file tree

Showing 6 changed files with 1,202 additions and 929 deletions.
diff --git a/frontend/Dockerfile.dev b/frontend/Dockerfile.dev
@@ -1,19 +1,14 @@
-# Refs:
-# https://dev.to/otomato_io/how-to-optimize-production-docker-images-running-nodejs-with-yarn-504b
-# https://snyk.io/blog/10-best-practices-to-containerize-nodejs-web-applications-with-docker/
-FROM node:18-alpine
-
-ENV VITE_API_ENV=dev
-
-# ENV PATH /app/node_modules/.bin:$PATH
+# Build Stage
+FROM node:18-alpine as build
 WORKDIR /usr/src/app
-COPY --chown=node:node . /usr/src/app
-RUN mkdir -p node_modules/.cache
-RUN chmod -R 777 node_modules/.cache
-RUN mkdir -p node_modules/.vite
-RUN chmod -R 777 node_modules/.vite
-
-RUN yarn install --frozen-lockfile && yarn cache clean
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
 
+# Final Stage
+FROM node:18-alpine
+WORKDIR /usr/src/app
+COPY --from=build /usr/src/app/node_modules ./node_modules
+COPY . .
+RUN chmod -R 777 node_modules/
 USER node
 CMD ["yarn", "start"]
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,17 +6,18 @@
     "node": ">=18 < 20"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@iconify/react": "^4.1.1",
     "@import-meta-env/cli": "^0.6.6",
     "@import-meta-env/unplugin": "^0.4.10",
-    "@material-ui/core": "^4.12.4",
     "@mui/icons-material": "^5.11.0",
-    "@mui/lab": "^5.0.0-alpha.113",
-    "@mui/material": "^5.11.1",
+    "@mui/lab": "^5.0.0-alpha.155",
+    "@mui/material": "^5.14.20",
     "@mui/x-data-grid": "^6.15.0",
     "@mui/x-date-pickers": "^6.5.0",
+    "@types/dompurify": "^3.0.5",
+    "@types/react": ">=18",
     "@types/react-dom": "^18.0.9",
     "@types/react-plotly.js": "^2.6.3",
     "@types/uuid": "^9.0.0",
@@ -27,6 +28,7 @@
     "cross-env": "^7.0.3",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.7",
+    "dompurify": "^3.0.6",
     "dotenv": "^16.3.1",
     "elkjs": "^0.8.2",
     "localforage": "^1.10.0",
@@ -36,6 +38,7 @@
     "react-draggable": "^4.4.5",
     "react-hook-form": "^7.45.1",
     "react-markdown": "9.0.0",
+    "react-pdf": "^7.5.1",
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.6.0",
     "react-toastify": "^9.1.1",

diff --git a/frontend/src/components/RenderPDF/index.tsx b/frontend/src/components/RenderPDF/index.tsx
@@ -0,0 +1,50 @@
+import type { PDFDocumentProxy } from "pdfjs-dist";
+import { useState } from "react";
+import { pdfjs, Document, Page } from "react-pdf";
+import "react-pdf/dist/esm/Page/AnnotationLayer.css";
+import "react-pdf/dist/esm/Page/TextLayer.css";
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  "pdfjs-dist/build/pdf.worker.min.js",
+  import.meta.url,
+).toString();
+
+const options = {
+  cMapUrl: "/cmaps/",
+  standardFontDataUrl: "/standard_fonts/",
+};
+
+type Props =
+  | {
+      base64Content: string;
+    }
+  | { file: string };
+
+export const RenderPDF: React.FC<Props> = (props) => {
+  const [numPages, setNumPages] = useState<number>(0);
+
+  const file =
+    "file" in props
+      ? props.file
+      : `data:application/pdf;base64,${props.base64Content}`;
+
+  function onDocumentLoadSuccess({
+    numPages: nextNumPages,
+  }: PDFDocumentProxy): void {
+    setNumPages(nextNumPages);
+  }
+
+  return (
+    <div style={{ overflow: "auto", maxWidth: "100%", width: "100%" }}>
+      <Document
+        file={file}
+        onLoadSuccess={onDocumentLoadSuccess}
+        options={options}
+      >
+        {Array.from(new Array(numPages), (el, index) => (
+          <Page key={`page_${index + 1}`} pageNumber={index + 1} width={650} />
+        ))}
+      </Document>
+    </div>
+  );
+};
diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/CustomTabPanel.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/CustomTabPanel.tsx
@@ -14,7 +14,7 @@ export function CustomTabPanel(props: TabPanelProps) {
       id={`simple-tabpanel-${index}`}
       aria-labelledby={`simple-tab-${index}`}
       style={{
-        height: "85%",
+        height: "calc(100% - 48px)",
       }}
       {...other}
     >

diff --git a/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/TaskResult.tsx b/frontend/src/features/myWorkflows/components/WorkflowDetail/CustomTabMenu/TaskResult.tsx
@@ -5,12 +5,13 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
+import { RenderPDF } from "components/RenderPDF";
+import DOMPurify from "dompurify";
 import { useCallback, type CSSProperties } from "react";
 import ReactMarkdown from "react-markdown";
 import Plot from "react-plotly.js";
 import remarkGfm from "remark-gfm";
 import "./styles.css";
-// import { PDFViewer, Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
 
 interface ITaskResultProps {
   isLoading: boolean;
@@ -86,26 +87,13 @@ export const TaskResult = (props: ITaskResultProps) => {
         );
 
       case "pdf":
-        return (
-          <div style={{ width: "100%", ...style }}>
-            PDF result display not yet implemented
-            {/* <PDFViewer>
-                            <Document file={`data:application/pdf;base64,${base64_content}`}>
-                                <Page pageNumber={1} />
-                            </Document>
-                        </PDFViewer> */}
-          </div>
-        );
-      case "html":
-        return (
-          <div style={{ width: "100%", ...style }}>
-            HTML result display not yet implemented
-          </div>
-          // <iframe
-          //     src={`data:text/html;base64,${base64_content}`}
-          //     style={{ width: '100%', height: '100%' }}
-          // />
-        );
+        return <RenderPDF base64Content={base64_content} />;
+      case "html": {
+        const decodedHTML = atob(base64_content);
+        const sanitizedHTML = DOMPurify.sanitize(decodedHTML);
+
+        return <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />;
+      }
       case "plotly_json": {
         const utf8String = atob(base64_content);
         const decodedJSON = JSON.parse(utf8String);
@@ -165,6 +153,8 @@ export const TaskResult = (props: ITaskResultProps) => {
   return (
     <Container
       sx={{
+        paddingX: "24px",
+        paddingY: "12px",
         height: "100%",
         width: "100%",
         display: "flex",