added highlight plugin imports and changed workflow name to id for ma… (

#494) * added highlight plugin imports and changed workflow name to id for manual review queue * added css for highlight --------- Co-authored-by: Rahul Johny <[email protected]>
Zipstack · Jul 19, 2024 · 5d72022 · 5d72022
1 parent b0928b7
commit 5d72022
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 7 deletions.
diff --git a/backend/workflow_manager/endpoint/destination.py b/backend/workflow_manager/endpoint/destination.py
@@ -511,15 +511,15 @@ def _push_to_queue(
             file_content = remote_file.read()
             # Convert file content to a base64 encoded string
             file_content_base64 = base64.b64encode(file_content).decode("utf-8")
-            q_name = f"review_queue_{self.organization_id}_{workflow.workflow_name}"
+            q_name = f"review_queue_{self.organization_id}_{workflow.id}"
             queue_result = QueueResult(
                 file=file_name,
                 whisper_hash=meta_data["whisper-hash"],
                 status=QueueResultStatus.SUCCESS,
                 result=result,
                 workflow_id=str(self.workflow_id),
                 file_content=file_content_base64,
-            )
+            ).to_dict()
             # Convert the result dictionary to a JSON string
             queue_result_json = json.dumps(queue_result)
             conn = QueueUtils.get_queue_inst()

diff --git a/backend/workflow_manager/endpoint/queue_utils.py b/backend/workflow_manager/endpoint/queue_utils.py
@@ -39,3 +39,13 @@ class QueueResult:
     result: Any
     workflow_id: str
     file_content: str
+
+    def to_dict(self) -> Any:
+        return {
+            "file": self.file,
+            "whisper_hash": self.whisper_hash,
+            "status": self.status,
+            "result": self.result,
+            "workflow_id": self.workflow_id,
+            "file_content": self.file_content,
+        }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,6 +6,7 @@
     "@ant-design/icons": "^5.1.4",
     "@react-pdf-viewer/core": "^3.12.0",
     "@react-pdf-viewer/default-layout": "^3.12.0",
+    "@react-pdf-viewer/highlight": "^3.12.0",
     "@react-pdf-viewer/page-navigation": "^3.12.0",
     "@rjsf/antd": "^5.16.1",
     "@rjsf/core": "^5.8.1",
@@ -26,7 +27,7 @@
     "http-proxy-middleware": "^2.0.6",
     "js-cookie": "^3.0.5",
     "js-yaml": "^4.1.0",
-    "json-2-csv": "^5.5.4",
+    "json-2-csv": "^5.5.1",
     "markdown-to-jsx": "^7.2.1",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.45",

diff --git a/frontend/src/components/custom-tools/pdf-viewer/Highlight.css b/frontend/src/components/custom-tools/pdf-viewer/Highlight.css
@@ -0,0 +1,9 @@
+.pdf-container {
+    position: relative;
+}
+
+.highlight {
+    position: absolute;
+    background-color: yellow;
+    opacity: 0.5;
+}
diff --git a/frontend/src/components/custom-tools/pdf-viewer/PdfViewer.jsx b/frontend/src/components/custom-tools/pdf-viewer/PdfViewer.jsx
@@ -1,18 +1,43 @@
+import { useRef } from "react";
 import { Viewer, Worker } from "@react-pdf-viewer/core";
 import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
 import { pageNavigationPlugin } from "@react-pdf-viewer/page-navigation";
 import PropTypes from "prop-types";
+import { highlightPlugin } from "@react-pdf-viewer/highlight";
+import "@react-pdf-viewer/highlight/lib/styles/index.css";
+import "./Highlight.css";
 
-function PdfViewer({ fileUrl }) {
+let RenderHighlights;
+try {
+  RenderHighlights =
+    require("../../../plugins/pdf-highlight/RenderHighlights").RenderHighlights;
+} catch (err) {
+  // Do nothing, No plugin will be loaded.
+}
+
+function PdfViewer({ fileUrl, highlightData }) {
   const newPlugin = defaultLayoutPlugin();
   const pageNavigationPluginInstance = pageNavigationPlugin();
+  const parentRef = useRef(null);
+  let highlightPluginInstance = "";
+  if (RenderHighlights && highlightData) {
+    highlightPluginInstance = highlightPlugin({
+      renderHighlights: (props) => (
+        <RenderHighlights {...props} highlightData={highlightData} />
+      ),
+    });
+  }
 
   return (
-    <div className="doc-manager-body">
+    <div ref={parentRef} className="doc-manager-body">
       <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
         <Viewer
           fileUrl={fileUrl}
-          plugins={[newPlugin, pageNavigationPluginInstance]}
+          plugins={[
+            newPlugin,
+            pageNavigationPluginInstance,
+            highlightPluginInstance,
+          ]}
         />
       </Worker>
     </div>
@@ -21,6 +46,7 @@ function PdfViewer({ fileUrl }) {
 
 PdfViewer.propTypes = {
   fileUrl: PropTypes.any,
+  highlightData: PropTypes.array,
 };
 
 export { PdfViewer };