From d1f0c7e906cd4a915f1f302c3e341b54389d5419 Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 09:00:25 -0800 Subject: [PATCH 01/37] New worker for iframe --- src/app/files/Iframe.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index d6f9157..d209d92 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -2,13 +2,16 @@ import styles from "./Iframe.module.css"; import { useState, useEffect, useRef } from "react"; import * as pdfjsLib from "pdfjs-dist"; -import "pdfjs-dist/web/pdf_viewer.css"; +import "pdfjs-dist/web/pdf_viewer.css"; +import workerSrc from 'pdfjs-dist/build/pdf.worker?worker&url'; // You will need to set the workerSrc for PDF.js -pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.mjs', - import.meta.url -).toString(); +pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js"; +// pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.mjs'; +// pdfjsLib.GlobalWorkerOptions.workerSrc = new URL( +// 'pdfjs-dist/build/pdf.worker.min.mjs', +// import.meta.url +// ).toString(); const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightColour, selectedPolygon, onBoxClick }) => { const [isLoading, setIsLoading] = useState(false); From c5163399c0d4707325a285174a4b51fdd5a8260f Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 09:12:53 -0800 Subject: [PATCH 02/37] Update rendering code --- src/app/files/Iframe.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index d209d92..abc3ba2 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -166,7 +166,8 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC useEffect(() => { if (pdfPage) { // If render is active, do not rerender - if (renderTaskRef.current) { + if (renderTaskRef.current) { + console.log('not rendering due to active render'); return; } @@ -177,6 +178,22 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC setIsLoading(false); } }, [pageWidth, pdfPage]) + + useEffect(() => { + if (pdfPage) { + // If render is active, do not rerender + if (renderTaskRef.current) { + console.log('not rendering due to active render'); + return; + } + + renderPDF(pdfPage); + + const extractedBoxes = extractBoxesFromJson(json); + setBoxes(extractedBoxes); + setIsLoading(false); + } + }, []) return ( <> From bcf9a32364a3c97ca5a83b1aa6885f9784e08056 Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 09:19:46 -0800 Subject: [PATCH 03/37] Update rendering code again --- src/app/files/Iframe.js | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index abc3ba2..2ae2408 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -177,23 +177,7 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC setBoxes(extractedBoxes); setIsLoading(false); } - }, [pageWidth, pdfPage]) - - useEffect(() => { - if (pdfPage) { - // If render is active, do not rerender - if (renderTaskRef.current) { - console.log('not rendering due to active render'); - return; - } - - renderPDF(pdfPage); - - const extractedBoxes = extractBoxesFromJson(json); - setBoxes(extractedBoxes); - setIsLoading(false); - } - }, []) + }, [pageWidth, pdfPage, canvasRef]) return ( <> From 89ea115bbaa81413de060294d4fab0cc92563c11 Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 09:30:42 -0800 Subject: [PATCH 04/37] Added print statment --- src/app/files/Iframe.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 2ae2408..c16fe21 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -171,13 +171,14 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC return; } + console.log(pageWidth); renderPDF(pdfPage); const extractedBoxes = extractBoxesFromJson(json); setBoxes(extractedBoxes); setIsLoading(false); } - }, [pageWidth, pdfPage, canvasRef]) + }, [pageWidth, pdfPage]) return ( <> From ab2a9f7ba6c90087e83a5c6257928fe5e878ea64 Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 10:45:48 -0800 Subject: [PATCH 05/37] Added render condition for cavas ref existing --- src/app/files/Iframe.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index c16fe21..1e54636 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -19,6 +19,7 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC const [boxes, setBoxes] = useState([]); const [pdfWidth, setPdfWidth] = useState(0); const [pdfPage, setPdfPage] = useState(null); + const [isCanvasReady, setIsCanvasReady] = useState(false); const canvasRef = useRef(null); const renderTaskRef = useRef(null); // Add ref to store the rendering task @@ -162,23 +163,27 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC asyncFetch(); }, []); + useEffect(() => { + if (canvasRef.current) { + setIsCanvasReady(true); + } + }); + // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { - if (pdfPage) { + if (pdfPage && isCanvasReady) { // If render is active, do not rerender - if (renderTaskRef.current) { - console.log('not rendering due to active render'); + if (renderTaskRef.current) { return; } - console.log(pageWidth); renderPDF(pdfPage); const extractedBoxes = extractBoxesFromJson(json); setBoxes(extractedBoxes); setIsLoading(false); } - }, [pageWidth, pdfPage]) + }, [pageWidth, pdfPage, isCanvasReady]) return ( <> From ac8386709a2a44f626f8a3f3c14ff34d9bf25486 Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 10:59:12 -0800 Subject: [PATCH 06/37] Added logging for canvas ref --- src/app/files/Iframe.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 1e54636..2814f92 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -165,7 +165,9 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC useEffect(() => { if (canvasRef.current) { - setIsCanvasReady(true); + console.warn("Canvas ref available.") + } else { + console.warn("Canvas ref not available yet."); } }); From 4f1476fde6342dad828a2526fe5f53ee2163c032 Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 11:08:07 -0800 Subject: [PATCH 07/37] Added logging for canvas ref --- src/app/files/Iframe.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 2814f92..027324c 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -155,8 +155,9 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC renderTaskRef.current = null; } ); + } else { + console.warn("Canvas ref not available yet."); } - }; useEffect(() => { @@ -164,11 +165,8 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC }, []); useEffect(() => { - if (canvasRef.current) { - console.warn("Canvas ref available.") - } else { - console.warn("Canvas ref not available yet."); - } + if (canvasRef.current) setIsCanvasReady(true); + }); // Whenever a new with is defined for this component, re render pdf and boxes to match it From 2714f3484673723028bfb159eb603e8716ba0256 Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 11:45:11 -0800 Subject: [PATCH 08/37] Added logging for canvas ref --- src/app/files/Iframe.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 027324c..b817ab4 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -132,6 +132,7 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC setPdfWidth(pdfWidth); if (canvasRef.current) { + console.warn("Canvas ref available."); const canvas = canvasRef.current; const context = canvas.getContext("2d"); canvas.height = viewport.height; @@ -166,7 +167,6 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC useEffect(() => { if (canvasRef.current) setIsCanvasReady(true); - }); // Whenever a new with is defined for this component, re render pdf and boxes to match it From a0de10b28162fa9dade51d2ad4a605fa7e6db48a Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 12:10:06 -0800 Subject: [PATCH 09/37] Update Iframe.js --- src/app/files/Iframe.js | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 027324c..59c47e1 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -155,8 +155,6 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC renderTaskRef.current = null; } ); - } else { - console.warn("Canvas ref not available yet."); } }; @@ -165,15 +163,34 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC }, []); useEffect(() => { - if (canvasRef.current) setIsCanvasReady(true); + if (canvasRef.current) { + setIsCanvasReady(true); + console.log("Canvas is ready"); + } + }, []); - }); + useEffect(() => { + console.log("Canvas Ref:", canvasRef.current); + if (!canvasRef.current) { + console.warn("Canvas ref is not available yet!"); + return; + } + setIsCanvasReady(true); + }, []); + + useEffect(() => { + console.log("Canvas Ref Available:", !!canvasRef.current); + console.log("isCanvasReady:", isCanvasReady); + }, [isCanvasReady]); // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { if (pdfPage && isCanvasReady) { + console.log("Rendering PDF..."); + // If render is active, do not rerender if (renderTaskRef.current) { + console.warn("Render task is running"); return; } From 774da200a90de241b699969eeee4720662421a2d Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 12:14:08 -0800 Subject: [PATCH 10/37] Added updated canvas check --- src/app/files/Iframe.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index b817ab4..ac12c53 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -167,7 +167,8 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC useEffect(() => { if (canvasRef.current) setIsCanvasReady(true); - }); + console.log(canvasRef.current) + }, [canvasRef.current]); // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { From 1e59eb3da699fc0801c33d11aaf3ea63546cc12b Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 14:16:50 -0800 Subject: [PATCH 11/37] Update Iframe.js --- src/app/files/Iframe.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 4e46b7c..9d00bde 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -156,6 +156,8 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC renderTaskRef.current = null; } ); + } else { + console.warn("Canvas ref is not available."); } }; @@ -168,7 +170,7 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC setIsCanvasReady(true); console.log("Canvas is ready"); } - }, []); + }, [canvasRef.current]); useEffect(() => { console.log("Canvas Ref:", canvasRef.current); @@ -186,6 +188,8 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { + console.log("Checking dependencies -> pdfPage:", pdfPage, "isCanvasReady:", isCanvasReady); + if (pdfPage && isCanvasReady) { console.log("Rendering PDF..."); From 7645ffc09fb3d4aa387025e52694dc76a4a58907 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 14:43:56 -0800 Subject: [PATCH 12/37] Update Iframe.js --- src/app/files/Iframe.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 9d00bde..9df5796 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -56,6 +56,10 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC setPdfPage(page); } }; + + useEffect(() => { + console.log("pageWidth:", pageWidth); + },[pageWidth]); const extractBoxesFromJson = (jsonData) => { const boxes = []; @@ -165,13 +169,6 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC asyncFetch(); }, []); - useEffect(() => { - if (canvasRef.current) { - setIsCanvasReady(true); - console.log("Canvas is ready"); - } - }, [canvasRef.current]); - useEffect(() => { console.log("Canvas Ref:", canvasRef.current); if (!canvasRef.current) { @@ -179,6 +176,7 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC return; } setIsCanvasReady(true); + console.log("Canvas is ready"); }, []); useEffect(() => { @@ -205,7 +203,7 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC setBoxes(extractedBoxes); setIsLoading(false); } - }, [pageWidth, pdfPage, isCanvasReady]) + }, [pageWidth, pdfPage, isCanvasReady]); return ( <> From 6d101939cb4a32732664c0dda262ea53919b4422 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 14:56:33 -0800 Subject: [PATCH 13/37] Update Iframe.js --- src/app/files/Iframe.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 9df5796..487a36a 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -202,6 +202,8 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC const extractedBoxes = extractBoxesFromJson(json); setBoxes(extractedBoxes); setIsLoading(false); + + console.log("loading...", isLoading); } }, [pageWidth, pdfPage, isCanvasReady]); From cf246ffc0905428111c85368fd26e91cea810c3b Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 15:03:01 -0800 Subject: [PATCH 14/37] Update Iframe.js --- src/app/files/Iframe.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 487a36a..0965592 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -170,19 +170,11 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC }, []); useEffect(() => { - console.log("Canvas Ref:", canvasRef.current); - if (!canvasRef.current) { - console.warn("Canvas ref is not available yet!"); - return; + if (canvasRef.current && !isCanvasReady) { + console.log("Canvas ref is now available."); + setIsCanvasReady(true); } - setIsCanvasReady(true); - console.log("Canvas is ready"); - }, []); - - useEffect(() => { - console.log("Canvas Ref Available:", !!canvasRef.current); - console.log("isCanvasReady:", isCanvasReady); - }, [isCanvasReady]); + }, [canvasRef]); // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { From 1d81ef103315d33a4df374fe7d3cb999ab788cea Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 15:17:10 -0800 Subject: [PATCH 15/37] Update Iframe.js --- src/app/files/Iframe.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 0965592..e5ed13c 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -171,14 +171,27 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC useEffect(() => { if (canvasRef.current && !isCanvasReady) { - console.log("Canvas ref is now available."); + console.log("Canvas ref is now available, setting isCanvasReady to true."); setIsCanvasReady(true); + } else { + console.warn("Canvas ref is still not available in production."); } - }, [canvasRef]); + }, [canvasRef, isCanvasReady]); + // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { - console.log("Checking dependencies -> pdfPage:", pdfPage, "isCanvasReady:", isCanvasReady); + console.log("Checking dependencies -> pdfPage:", pdfPage, "isCanvasReady:", isCanvasReady, "Canvas Ref Current", canvasRef.current); + + if (!pdfPage) { + console.warn("pdfPage is still null, useEffect will not run."); + return; + } + + if (!isCanvasReady) { + console.warn("Canvas is not ready, useEffect will not run."); + return; + } if (pdfPage && isCanvasReady) { console.log("Rendering PDF..."); From cbd6952f4e801df9c764fd2a1e5837e1c52bc159 Mon Sep 17 00:00:00 2001 From: David Onak Date: Mon, 10 Feb 2025 15:38:02 -0800 Subject: [PATCH 16/37] Added updated canvas check --- src/app/files/Iframe.js | 39 ++++++--------------------------------- 1 file changed, 6 insertions(+), 33 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index e5ed13c..584d463 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -56,10 +56,6 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC setPdfPage(page); } }; - - useEffect(() => { - console.log("pageWidth:", pageWidth); - },[pageWidth]); const extractBoxesFromJson = (jsonData) => { const boxes = []; @@ -161,56 +157,33 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC } ); } else { - console.warn("Canvas ref is not available."); + console.warn("Canvas ref not available yet."); } }; useEffect(() => { - asyncFetch(); + asyncFetch(); }, []); useEffect(() => { - if (canvasRef.current && !isCanvasReady) { - console.log("Canvas ref is now available, setting isCanvasReady to true."); - setIsCanvasReady(true); - } else { - console.warn("Canvas ref is still not available in production."); - } - }, [canvasRef, isCanvasReady]); - + if (canvasRef.current && canvasRef.current.height && canvasRef.current.width) setIsCanvasReady(true); + }); // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { - console.log("Checking dependencies -> pdfPage:", pdfPage, "isCanvasReady:", isCanvasReady, "Canvas Ref Current", canvasRef.current); - - if (!pdfPage) { - console.warn("pdfPage is still null, useEffect will not run."); - return; - } - - if (!isCanvasReady) { - console.warn("Canvas is not ready, useEffect will not run."); - return; - } - if (pdfPage && isCanvasReady) { - console.log("Rendering PDF..."); - // If render is active, do not rerender if (renderTaskRef.current) { - console.warn("Render task is running"); return; } - renderPDF(pdfPage); + renderPDF(pdfPage); const extractedBoxes = extractBoxesFromJson(json); setBoxes(extractedBoxes); setIsLoading(false); - - console.log("loading...", isLoading); } - }, [pageWidth, pdfPage, isCanvasReady]); + }, [pageWidth, pdfPage, isCanvasReady]) return ( <> From 0a7b048438950899944ad2602ca2aaa070516f08 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 15:45:04 -0800 Subject: [PATCH 17/37] Update Iframe.js --- src/app/files/Iframe.js | 357 ++++++++++++++++++---------------------- 1 file changed, 156 insertions(+), 201 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index e5ed13c..75b9dcd 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -2,7 +2,7 @@ import styles from "./Iframe.module.css"; import { useState, useEffect, useRef } from "react"; import * as pdfjsLib from "pdfjs-dist"; -import "pdfjs-dist/web/pdf_viewer.css"; +import "pdfjs-dist/web/pdf_viewer.css"; import workerSrc from 'pdfjs-dist/build/pdf.worker?worker&url'; // You will need to set the workerSrc for PDF.js @@ -13,238 +13,193 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js"; // import.meta.url // ).toString(); -const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightColour, selectedPolygon, onBoxClick }) => { - const [isLoading, setIsLoading] = useState(false); - const [isPdf, setIsPdf] = useState(true); +const Iframe = ({ fileName, folderName, pageWidth, json, highlightColour, selectedPolygon, onBoxClick }) => { + const [isLoading, setIsLoading] = useState(true); + const [isPdf, setIsPdf] = useState(true); const [boxes, setBoxes] = useState([]); const [pdfWidth, setPdfWidth] = useState(0); const [pdfPage, setPdfPage] = useState(null); - const [isCanvasReady, setIsCanvasReady] = useState(false); const canvasRef = useRef(null); - const renderTaskRef = useRef(null); // Add ref to store the rendering task - - let pdfName = fileName.replace(".json", ".pdf"); + const renderTaskRef = useRef(null); + + const pdfName = fileName.replace(".json", ".pdf"); + const submitData = { fileName: pdfName, folderName: folderName, }; - + //fetch pdf data from blob - const asyncFetch = async () => { - setIsLoading(true); - const response = await fetch("/api/readPDF", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(submitData), - }); - - if (!response.ok) { - setIsPdf(false); - throw new Error(response.statusText); - } else if (response.status === 203) { - console.log("No data"); - setIsPdf(false); - } else { - var pdf = await response.blob(); - const url = URL.createObjectURL(pdf); - const loadingTask = pdfjsLib.getDocument(url); - pdf = await loadingTask.promise; - const page = await pdf.getPage(1); - - setPdfPage(page); - } - }; + const fetchPdfData = async () => { + setIsLoading(true); + try { + const response = await fetch("/api/readPDF", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(submitData), + }); + + if (!response.ok || response.status === 203) { + setIsPdf(false); + return; + } + + const pdfBlob = await response.blob(); + const url = URL.createObjectURL(pdfBlob); + const loadingTask = pdfjsLib.getDocument(url); + const pdf = await loadingTask.promise; + const page = await pdf.getPage(1); + + setPdfPage(page); + } catch (error) { + console.error("Error fetching PDF data:", error); + setIsPdf(false); + } + }; useEffect(() => { console.log("pageWidth:", pageWidth); },[pageWidth]); - - const extractBoxesFromJson = (jsonData) => { - const boxes = []; - const DPI = 72; - var scaleFactor = pdfWidth > 0? pageWidth / pdfWidth : 1; - let colourIndex = 0; - - function extractCoords(coordsList) { - const combinedCoords = {}; - for (const coords of coordsList) { - Object.assign(combinedCoords, coords); - } - return [combinedCoords.x1, combinedCoords.y1, combinedCoords.x3, combinedCoords.y3]; - } - - function processCell(rowKey, columnKey, bundle) { - if (Array.isArray(bundle) && bundle.length > 1 && Array.isArray(bundle[1])) { - const coordsList = bundle[1]; - if (coordsList && coordsList.every(coord => typeof coord === "object")) { - const coords = extractCoords(coordsList); - if (coords.every(coord => coord !== undefined)) { - const uniqueKey = `${rowKey} - ${columnKey}`; - boxes.push({ - key: uniqueKey, - coords: coords.map(coord => coord * DPI * scaleFactor), - }); - colourIndex++; - } - } - } - } - - function processJson(data, parentKey = "") { - if (Array.isArray(data)) { - data.forEach((row, index) => { - if (typeof row === "object") { - const rowKey = `${parentKey} Row ${index + 1}`; - for (const [columnKey, cellValue] of Object.entries(row)) { - processCell(rowKey, columnKey, cellValue); - } - } - }); - } else if (typeof data === "object") { - for (const [key, value] of Object.entries(data)) { - const newKey = parentKey ? `${parentKey} ${key}`.trim() : key; - if (Array.isArray(value) && value.length > 1 && Array.isArray(value[1])) { - const coordsList = value[1]; - if (coordsList && coordsList.every(coord => typeof coord === "object")) { - const coords = extractCoords(coordsList); - if (coords.every(coord => coord !== undefined)) { - boxes.push({ - key: newKey, - coords: coords.map(coord => coord * DPI * scaleFactor), - }); - colourIndex++; - } - } - } else { - processJson(value, newKey); - } - } - } - } - - processJson(jsonData); - return boxes; - }; - - const renderPDF = async (page) => { - const scale = 1; - const pdfWidth = page.getViewport({ scale: scale }).width; - const viewport = page.getViewport({ scale: pageWidth / pdfWidth}); - setPdfWidth(pdfWidth); - + const extractBoxesFromJson = (jsonData) => { + const boxes = []; + const DPI = 72; + + const scaleFactor = pdfWidth > 0 ? pageWidth / pdfWidth : 1; + let colourIndex = 0; + + const extractCoords = (coordsList) => { + const combinedCoords = Object.assign({}, ...coordsList); + return [combinedCoords.x1, combinedCoords.y1, combinedCoords.x3, combinedCoords.y3]; + }; + + const processCell = (rowKey, columnKey, bundle) => { + if (Array.isArray(bundle) && bundle.length > 1 && Array.isArray(bundle[1])) { + const coordsList = bundle[1]; + if (coordsList && coordsList.every(coord => typeof coord === "object")) { + const coords = extractCoords(coordsList); + if (coords.every(coord => coord !== undefined)) { + const uniqueKey = `${rowKey} - ${columnKey}`; + boxes.push({ + key: uniqueKey, + coords: coords.map(coord => coord * DPI * scaleFactor), + }); + colourIndex++; + } + } + } + }; + + const processJson = (data, parentKey = "") => { + if (Array.isArray(data)) { + data.forEach((row, index) => { + if (typeof row === "object") { + const rowKey = `${parentKey} Row ${index + 1}`; + for (const [columnKey, cellValue] of Object.entries(row)) { + processCell(rowKey, columnKey, cellValue); + } + } + }); + } else if (typeof data === "object") { + for (const [key, value] of Object.entries(data)) { + const newKey = parentKey ? `${parentKey} ${key}`.trim() : key; + if (Array.isArray(value) && value.length > 1 && Array.isArray(value[1])) { + const coordsList = value[1]; + if (coordsList && coordsList.every(coord => typeof coord === "object")) { + const coords = extractCoords(coordsList); + if (coords.every(coord => coord !== undefined)) { + boxes.push({ + key: newKey, + coords: coords.map(coord => coord * DPI * scaleFactor), + }); + colourIndex++; + } + } + } else { + processJson(value, newKey); + } + } + } + }; + + processJson(jsonData); + return boxes; + }; + + const renderPDF = async (page) => { + const scale = 1; + const pdfWidth = page.getViewport({ scale }).width; + const viewport = page.getViewport({ scale: pageWidth / pdfWidth }); + setPdfWidth(pdfWidth); + if (canvasRef.current) { console.warn("Canvas ref available."); - const canvas = canvasRef.current; - const context = canvas.getContext("2d"); - canvas.height = viewport.height; - canvas.width = viewport.width; - + const canvas = canvasRef.current; + const context = canvas.getContext("2d"); + canvas.height = viewport.height; + canvas.width = viewport.width; + const renderContext = { canvasContext: context, viewport: viewport, }; - - const renderTask = page.render(renderContext); - renderTaskRef.current = renderTask; // Store the render task - await renderTask.promise.then( - function () { - // Render completed - renderTaskRef.current = null; - }, - function (error) { - // Handle error during rendering - console.error(error); - renderTaskRef.current = null; - } - ); + + const renderTask = page.render(renderContext); + renderTaskRef.current = renderTask; + await renderTask.promise.catch(console.error); + renderTaskRef.current = null; } else { console.warn("Canvas ref is not available."); } - }; - - useEffect(() => { - asyncFetch(); - }, []); + }; useEffect(() => { - if (canvasRef.current && !isCanvasReady) { - console.log("Canvas ref is now available, setting isCanvasReady to true."); - setIsCanvasReady(true); - } else { - console.warn("Canvas ref is still not available in production."); - } - }, [canvasRef, isCanvasReady]); - + fetchPdfData(); + }, []); - // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { - console.log("Checking dependencies -> pdfPage:", pdfPage, "isCanvasReady:", isCanvasReady, "Canvas Ref Current", canvasRef.current); - - if (!pdfPage) { - console.warn("pdfPage is still null, useEffect will not run."); - return; - } - - if (!isCanvasReady) { - console.warn("Canvas is not ready, useEffect will not run."); - return; - } - - if (pdfPage && isCanvasReady) { - console.log("Rendering PDF..."); - - // If render is active, do not rerender - if (renderTaskRef.current) { - console.warn("Render task is running"); - return; - } - - renderPDF(pdfPage); - - const extractedBoxes = extractBoxesFromJson(json); - setBoxes(extractedBoxes); - setIsLoading(false); + if (pdfPage && !renderTaskRef.current) { + renderPDF(pdfPage); + setBoxes(extractBoxesFromJson(json)); + setIsLoading(false); console.log("loading...", isLoading); } - }, [pageWidth, pdfPage, isCanvasReady]); - - return ( - <> - {isPdf ? ( - !isLoading ? ( -
- - {boxes.map((box) => ( -
+ {isPdf ? ( + !isLoading ? ( +
+ + {boxes.map((box) => ( +
{onBoxClick(box.key);}} + }} + onClick={() => onBoxClick(box.key)} > {/*
{box.key}
*/} -
- ))} -
- ) : ( -
Loading...
- ) - ) : ( -
No PDF file found
- )} - - ); -}; - -export default Iframe; \ No newline at end of file +
+ ))} +
+ ) : ( +
Loading...
+ ) + ) : ( +
No PDF file found
+ )} + + ); +}; + +export default Iframe; From eddec54b42a7af3d4168cfe0169305472460c216 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 16:06:23 -0800 Subject: [PATCH 18/37] Update Iframe.js --- src/app/files/Iframe.js | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 75b9dcd..cd112e7 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -19,6 +19,7 @@ const Iframe = ({ fileName, folderName, pageWidth, json, highlightColour, select const [boxes, setBoxes] = useState([]); const [pdfWidth, setPdfWidth] = useState(0); const [pdfPage, setPdfPage] = useState(null); + const [isCanvasReady, setIsCanvasReady] = useState(false); const canvasRef = useRef(null); const renderTaskRef = useRef(null); @@ -29,6 +30,19 @@ const Iframe = ({ fileName, folderName, pageWidth, json, highlightColour, select folderName: folderName, }; + useEffect(() => { + if (canvasRef.current) { + setIsCanvasReady(true); + } + }, [canvasRef.current]); + + useEffect(() => { + if (isCanvasReady) { + console.log("isCanvasReady", isCanvasReady); + console.log(canvasRef); + } + },[isCanvasReady, canvasRef]); + //fetch pdf data from blob const fetchPdfData = async () => { setIsLoading(true); @@ -160,13 +174,16 @@ const Iframe = ({ fileName, folderName, pageWidth, json, highlightColour, select useEffect(() => { if (pdfPage && !renderTaskRef.current) { renderPDF(pdfPage); - setBoxes(extractBoxesFromJson(json)); + const extractedBoxes = extractBoxesFromJson(json); + setBoxes(extractedBoxes); setIsLoading(false); - - console.log("loading...", isLoading); } }, [pdfPage, pageWidth, json]); + useEffect(() => { + console.log("Loading state changed:", isLoading); + }, [isLoading]); // Log after state changes + return ( <> {isPdf ? ( From 1757c64fad0ee678a324983cd6875b297470ad93 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 16:10:33 -0800 Subject: [PATCH 19/37] Update Iframe.js --- src/app/files/Iframe.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index cd112e7..4b3c59f 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -140,7 +140,7 @@ const Iframe = ({ fileName, folderName, pageWidth, json, highlightColour, select return boxes; }; - const renderPDF = async (page) => { + const renderPDF = async (page, canvasRef) => { const scale = 1; const pdfWidth = page.getViewport({ scale }).width; const viewport = page.getViewport({ scale: pageWidth / pdfWidth }); @@ -173,12 +173,12 @@ const Iframe = ({ fileName, folderName, pageWidth, json, highlightColour, select useEffect(() => { if (pdfPage && !renderTaskRef.current) { - renderPDF(pdfPage); + renderPDF(pdfPage, canvasRef); const extractedBoxes = extractBoxesFromJson(json); setBoxes(extractedBoxes); setIsLoading(false); } - }, [pdfPage, pageWidth, json]); + }, [pdfPage, pageWidth, canvasRef, json]); useEffect(() => { console.log("Loading state changed:", isLoading); From b3b42265558a2b829e909ec9fc8d4ecd0b362ab7 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 16:36:13 -0800 Subject: [PATCH 20/37] Update Iframe.js --- src/app/files/Iframe.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 4b3c59f..bf90239 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -37,9 +37,9 @@ const Iframe = ({ fileName, folderName, pageWidth, json, highlightColour, select }, [canvasRef.current]); useEffect(() => { + console.log("isCanvasReady", isCanvasReady); if (isCanvasReady) { - console.log("isCanvasReady", isCanvasReady); - console.log(canvasRef); + console.log("isCanvasReady", isCanvasReady, canvasRef); } },[isCanvasReady, canvasRef]); @@ -167,18 +167,22 @@ const Iframe = ({ fileName, folderName, pageWidth, json, highlightColour, select } }; - useEffect(() => { - fetchPdfData(); - }, []); + // useEffect(() => { + // fetchPdfData(); + // }, []); useEffect(() => { + if (!pdfPage) { + fetchPdfData(); + } + if (pdfPage && !renderTaskRef.current) { renderPDF(pdfPage, canvasRef); const extractedBoxes = extractBoxesFromJson(json); setBoxes(extractedBoxes); setIsLoading(false); } - }, [pdfPage, pageWidth, canvasRef, json]); + }, [pdfPage, pageWidth, json]); useEffect(() => { console.log("Loading state changed:", isLoading); From 86d1d8c63d15fdea8105a6c77492eee11930d1de Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 16:46:47 -0800 Subject: [PATCH 21/37] Update Iframe.js --- src/app/files/Iframe.js | 355 ++++++++++++++++++++-------------------- 1 file changed, 174 insertions(+), 181 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index bf90239..b225c7c 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -13,214 +13,207 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js"; // import.meta.url // ).toString(); -const Iframe = ({ fileName, folderName, pageWidth, json, highlightColour, selectedPolygon, onBoxClick }) => { - const [isLoading, setIsLoading] = useState(true); - const [isPdf, setIsPdf] = useState(true); +const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightColour, selectedPolygon, onBoxClick }) => { + const [isLoading, setIsLoading] = useState(false); + const [isPdf, setIsPdf] = useState(true); const [boxes, setBoxes] = useState([]); const [pdfWidth, setPdfWidth] = useState(0); const [pdfPage, setPdfPage] = useState(null); - const [isCanvasReady, setIsCanvasReady] = useState(false); const canvasRef = useRef(null); - const renderTaskRef = useRef(null); - - const pdfName = fileName.replace(".json", ".pdf"); - + const renderTaskRef = useRef(null); // Add ref to store the rendering task + + let pdfName = fileName.replace(".json", ".pdf"); const submitData = { fileName: pdfName, folderName: folderName, }; - - useEffect(() => { - if (canvasRef.current) { - setIsCanvasReady(true); - } - }, [canvasRef.current]); - - useEffect(() => { - console.log("isCanvasReady", isCanvasReady); - if (isCanvasReady) { - console.log("isCanvasReady", isCanvasReady, canvasRef); - } - },[isCanvasReady, canvasRef]); - + //fetch pdf data from blob - const fetchPdfData = async () => { - setIsLoading(true); - try { - const response = await fetch("/api/readPDF", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(submitData), - }); - - if (!response.ok || response.status === 203) { - setIsPdf(false); - return; - } - - const pdfBlob = await response.blob(); - const url = URL.createObjectURL(pdfBlob); - const loadingTask = pdfjsLib.getDocument(url); - const pdf = await loadingTask.promise; - const page = await pdf.getPage(1); - - setPdfPage(page); - } catch (error) { - console.error("Error fetching PDF data:", error); - setIsPdf(false); - } - }; - - useEffect(() => { - console.log("pageWidth:", pageWidth); - },[pageWidth]); - - const extractBoxesFromJson = (jsonData) => { - const boxes = []; - const DPI = 72; - - const scaleFactor = pdfWidth > 0 ? pageWidth / pdfWidth : 1; - let colourIndex = 0; - - const extractCoords = (coordsList) => { - const combinedCoords = Object.assign({}, ...coordsList); - return [combinedCoords.x1, combinedCoords.y1, combinedCoords.x3, combinedCoords.y3]; - }; - - const processCell = (rowKey, columnKey, bundle) => { - if (Array.isArray(bundle) && bundle.length > 1 && Array.isArray(bundle[1])) { - const coordsList = bundle[1]; - if (coordsList && coordsList.every(coord => typeof coord === "object")) { - const coords = extractCoords(coordsList); - if (coords.every(coord => coord !== undefined)) { - const uniqueKey = `${rowKey} - ${columnKey}`; - boxes.push({ - key: uniqueKey, - coords: coords.map(coord => coord * DPI * scaleFactor), - }); - colourIndex++; - } - } - } - }; - - const processJson = (data, parentKey = "") => { - if (Array.isArray(data)) { - data.forEach((row, index) => { - if (typeof row === "object") { - const rowKey = `${parentKey} Row ${index + 1}`; - for (const [columnKey, cellValue] of Object.entries(row)) { - processCell(rowKey, columnKey, cellValue); - } - } - }); - } else if (typeof data === "object") { - for (const [key, value] of Object.entries(data)) { - const newKey = parentKey ? `${parentKey} ${key}`.trim() : key; - if (Array.isArray(value) && value.length > 1 && Array.isArray(value[1])) { - const coordsList = value[1]; - if (coordsList && coordsList.every(coord => typeof coord === "object")) { - const coords = extractCoords(coordsList); - if (coords.every(coord => coord !== undefined)) { - boxes.push({ - key: newKey, - coords: coords.map(coord => coord * DPI * scaleFactor), - }); - colourIndex++; - } - } - } else { - processJson(value, newKey); - } - } - } - }; - - processJson(jsonData); - return boxes; - }; - - const renderPDF = async (page, canvasRef) => { - const scale = 1; - const pdfWidth = page.getViewport({ scale }).width; - const viewport = page.getViewport({ scale: pageWidth / pdfWidth }); - setPdfWidth(pdfWidth); + const asyncFetch = async () => { + setIsLoading(true); + const response = await fetch("/api/readPDF", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(submitData), + }); + + if (!response.ok) { + setIsPdf(false); + throw new Error(response.statusText); + } else if (response.status === 203) { + console.log("No data"); + setIsPdf(false); + } else { + var pdf = await response.blob(); + const url = URL.createObjectURL(pdf); + const loadingTask = pdfjsLib.getDocument(url); + pdf = await loadingTask.promise; + const page = await pdf.getPage(1); + + setPdfPage(page); + } + }; + + const extractBoxesFromJson = (jsonData) => { + const boxes = []; + const DPI = 72; + var scaleFactor = pdfWidth > 0? pageWidth / pdfWidth : 1; + let colourIndex = 0; + + function extractCoords(coordsList) { + const combinedCoords = {}; + for (const coords of coordsList) { + Object.assign(combinedCoords, coords); + } + return [combinedCoords.x1, combinedCoords.y1, combinedCoords.x3, combinedCoords.y3]; + } + + function processCell(rowKey, columnKey, bundle) { + if (Array.isArray(bundle) && bundle.length > 1 && Array.isArray(bundle[1])) { + const coordsList = bundle[1]; + if (coordsList && coordsList.every(coord => typeof coord === "object")) { + const coords = extractCoords(coordsList); + if (coords.every(coord => coord !== undefined)) { + const uniqueKey = `${rowKey} - ${columnKey}`; + boxes.push({ + key: uniqueKey, + coords: coords.map(coord => coord * DPI * scaleFactor), + }); + colourIndex++; + } + } + } + } + + function processJson(data, parentKey = "") { + if (Array.isArray(data)) { + data.forEach((row, index) => { + if (typeof row === "object") { + const rowKey = `${parentKey} Row ${index + 1}`; + for (const [columnKey, cellValue] of Object.entries(row)) { + processCell(rowKey, columnKey, cellValue); + } + } + }); + } else if (typeof data === "object") { + for (const [key, value] of Object.entries(data)) { + const newKey = parentKey ? `${parentKey} ${key}`.trim() : key; + if (Array.isArray(value) && value.length > 1 && Array.isArray(value[1])) { + const coordsList = value[1]; + if (coordsList && coordsList.every(coord => typeof coord === "object")) { + const coords = extractCoords(coordsList); + if (coords.every(coord => coord !== undefined)) { + boxes.push({ + key: newKey, + coords: coords.map(coord => coord * DPI * scaleFactor), + }); + colourIndex++; + } + } + } else { + processJson(value, newKey); + } + } + } + } + + processJson(jsonData); + return boxes; + }; + + const renderPDF = async (page) => { + const scale = 1; + const pdfWidth = page.getViewport({ scale: scale }).width; + const viewport = page.getViewport({ scale: pageWidth / pdfWidth}); + setPdfWidth(pdfWidth); + if (canvasRef.current) { - console.warn("Canvas ref available."); - const canvas = canvasRef.current; - const context = canvas.getContext("2d"); - canvas.height = viewport.height; - canvas.width = viewport.width; - + const canvas = canvasRef.current; + const context = canvas.getContext("2d"); + canvas.height = viewport.height; + canvas.width = viewport.width; + const renderContext = { canvasContext: context, viewport: viewport, }; - - const renderTask = page.render(renderContext); - renderTaskRef.current = renderTask; - await renderTask.promise.catch(console.error); - renderTaskRef.current = null; - } else { - console.warn("Canvas ref is not available."); + + const renderTask = page.render(renderContext); + renderTaskRef.current = renderTask; // Store the render task + await renderTask.promise.then( + function () { + // Render completed + renderTaskRef.current = null; + }, + function (error) { + // Handle error during rendering + console.error(error); + renderTaskRef.current = null; + } + ); } - }; - - // useEffect(() => { - // fetchPdfData(); + + }; + + // useEffect(() => { + // asyncFetch(); // }, []); + // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { if (!pdfPage) { - fetchPdfData(); + asyncFetch(); } - if (pdfPage && !renderTaskRef.current) { - renderPDF(pdfPage, canvasRef); + if (pdfPage) { + // If render is active, do not rerender + if (renderTaskRef.current) { + return; + } + + renderPDF(pdfPage); const extractedBoxes = extractBoxesFromJson(json); setBoxes(extractedBoxes); - setIsLoading(false); + setIsLoading(false); } - }, [pdfPage, pageWidth, json]); - - useEffect(() => { - console.log("Loading state changed:", isLoading); - }, [isLoading]); // Log after state changes - - return ( - <> - {isPdf ? ( - !isLoading ? ( -
- - {boxes.map((box) => ( -
+ {isPdf ? ( + !isLoading ? ( +
+ + {boxes.map((box) => ( +
onBoxClick(box.key)} + }} + onClick={()=>{onBoxClick(box.key);}} > {/*
{box.key}
*/} -
- ))} -
- ) : ( -
Loading...
- ) - ) : ( -
No PDF file found
- )} - - ); -}; - -export default Iframe; +
+ ))} +
+ ) : ( +
Loading...
+ ) + ) : ( +
No PDF file found
+ )} + + ); +}; + +export default Iframe; \ No newline at end of file From a9061373464b0066ee0a7a5b84c66b60b511e94d Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 17:04:17 -0800 Subject: [PATCH 22/37] Update Iframe.js --- src/app/files/Iframe.js | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index b225c7c..039e651 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -164,21 +164,25 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC // Whenever a new with is defined for this component, re render pdf and boxes to match it useEffect(() => { - if (!pdfPage) { - asyncFetch(); - } + const fetchRenderPdf = async () => { + if (!pdfPage) { + await asyncFetch(); + } - if (pdfPage) { - // If render is active, do not rerender - if (renderTaskRef.current) { - return; - } + if (pdfPage) { + // If render is active, do not rerender + if (renderTaskRef.current) { + return; + } - renderPDF(pdfPage); - const extractedBoxes = extractBoxesFromJson(json); - setBoxes(extractedBoxes); - setIsLoading(false); - } + renderPDF(pdfPage); + const extractedBoxes = extractBoxesFromJson(json); + setBoxes(extractedBoxes); + setIsLoading(false); + } + }; + + fetchRenderPdf(); }, [pageWidth, pdfPage]) return ( From 9353087910297d4b705ffb5ab61ed97a3519fb5e Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 17:28:56 -0800 Subject: [PATCH 23/37] disable editable for original data view --- src/app/components/EditableField.js | 4 +++- src/app/components/Polygon.js | 4 +++- src/app/files/PolygonList.js | 4 +++- src/app/filesOriginal/page.js | 1 + 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/app/components/EditableField.js b/src/app/components/EditableField.js index 99034d2..12dc09f 100644 --- a/src/app/components/EditableField.js +++ b/src/app/components/EditableField.js @@ -9,7 +9,8 @@ const EditableField = ({ handleUpdatePolygon, editedPolygons, handleFocus, - handleBlur + handleBlur, + isReadOnly = false }) => { let flagStyle = ''; @@ -34,6 +35,7 @@ const EditableField = ({ value={content} onChange={(e) => handleUpdatePolygon(polygonKey, e.target.value)} rows={1} + readOnly={isReadOnly} /> ) }; diff --git a/src/app/components/Polygon.js b/src/app/components/Polygon.js index 2c9f01c..e41a836 100644 --- a/src/app/components/Polygon.js +++ b/src/app/components/Polygon.js @@ -14,7 +14,8 @@ const Polygon = ({ collectPolygonKey, selectedPolygon, handlePolygonSelect, - handlePolygonDeselect + handlePolygonDeselect, + isReadOnly }) => { // Helper function for coordinates validation logic const areCoordinatesValid = (coordinates) => { @@ -76,6 +77,7 @@ const Polygon = ({ textAreaRefs={textAreaRefs} handleUpdatePolygon={handleUpdatePolygon} editedPolygons={editedPolygons} + isReadOnly={isReadOnly} /> ) diff --git a/src/app/files/PolygonList.js b/src/app/files/PolygonList.js index 850c118..c71349e 100644 --- a/src/app/files/PolygonList.js +++ b/src/app/files/PolygonList.js @@ -16,7 +16,8 @@ const PolygonList = ({ reFetchJson, selectedPolygon, handlePolygonSelect, - handlePolygonDeselect + handlePolygonDeselect, + isReadOnly }) => { const collectedPolygonKeys = new Set(); @@ -197,6 +198,7 @@ const PolygonList = ({ selectedPolygon={selectedPolygon} handlePolygonSelect={handlePolygonSelect} handlePolygonDeselect={handlePolygonDeselect} + isReadOnly={isReadOnly} /> ) })} diff --git a/src/app/filesOriginal/page.js b/src/app/filesOriginal/page.js index 67c3839..23d2e5d 100644 --- a/src/app/filesOriginal/page.js +++ b/src/app/filesOriginal/page.js @@ -345,6 +345,7 @@ const File = ({ searchParams }) => { selectedPolygon={selectedPolygon} handlePolygonSelect={handlePolygonSelect} handlePolygonDeselect={handlePolygonDeselect} + isReadOnly={true} />

Null Field List

From 4b02b3490afa911f8533f822149950c3ab8f84f1 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Mon, 10 Feb 2025 17:45:12 -0800 Subject: [PATCH 24/37] fix original data view. add page reload after saving data. --- src/app/files/PolygonList.js | 5 +++-- src/app/filesOriginal/page.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/files/PolygonList.js b/src/app/files/PolygonList.js index c71349e..15a76df 100644 --- a/src/app/files/PolygonList.js +++ b/src/app/files/PolygonList.js @@ -142,11 +142,12 @@ const PolygonList = ({ changeHandler(updatedData); }; - const handleSave = () => { + const handleSave = async () => { setEditedPolygons(new Set()); setIsEditing(false); - onClickHandler(updateJson); + await onClickHandler(updateJson); + window.location.reload(); }; const handleCancel = () => { diff --git a/src/app/filesOriginal/page.js b/src/app/filesOriginal/page.js index 23d2e5d..e3aea48 100644 --- a/src/app/filesOriginal/page.js +++ b/src/app/filesOriginal/page.js @@ -55,7 +55,7 @@ const File = ({ searchParams }) => { //fetch json data from blob const asyncFetch = async () => { setIsLoading(true); - const Response = await fetch("/api/jsonDataModified", { + const Response = await fetch("/api/jsonData", { method: "POST", headers: { "Content-Type": "application/json", From 76540ed79ce6b0879c87f4b52d291c0a97f39339 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Thu, 13 Feb 2025 13:00:30 -0800 Subject: [PATCH 25/37] fix original view code --- src/app/components/EditableField.js | 2 +- src/app/files/PolygonList.js | 5 ++--- src/app/files/page.js | 1 - src/app/filesOriginal/page.js | 1 - 4 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/app/components/EditableField.js b/src/app/components/EditableField.js index 12dc09f..4853531 100644 --- a/src/app/components/EditableField.js +++ b/src/app/components/EditableField.js @@ -10,7 +10,7 @@ const EditableField = ({ editedPolygons, handleFocus, handleBlur, - isReadOnly = false + isReadOnly }) => { let flagStyle = ''; diff --git a/src/app/files/PolygonList.js b/src/app/files/PolygonList.js index 15a76df..a36a0dc 100644 --- a/src/app/files/PolygonList.js +++ b/src/app/files/PolygonList.js @@ -6,7 +6,6 @@ import { useState, useEffect, useRef } from "react"; const PolygonList = ({ fileName, folderName, - originalFile, json, setJsonData, setPolygonKeys, @@ -17,7 +16,7 @@ const PolygonList = ({ selectedPolygon, handlePolygonSelect, handlePolygonDeselect, - isReadOnly + isReadOnly = false }) => { const collectedPolygonKeys = new Set(); @@ -175,7 +174,7 @@ const PolygonList = ({ return (
- {isEditing && !originalFile ? ( + {isEditing ? ( <> diff --git a/src/app/files/page.js b/src/app/files/page.js index e019cae..5f42ec4 100644 --- a/src/app/files/page.js +++ b/src/app/files/page.js @@ -406,7 +406,6 @@ const File = ({ searchParams }) => { { Date: Thu, 13 Feb 2025 13:18:03 -0800 Subject: [PATCH 26/37] fix cancel edit to refresh; slide menu shadow style minor update --- src/app/files/PolygonList.js | 13 +++++++------ src/app/files/page.module.css | 2 +- src/app/filesOriginal/page.module.css | 2 +- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/app/files/PolygonList.js b/src/app/files/PolygonList.js index a36a0dc..59da675 100644 --- a/src/app/files/PolygonList.js +++ b/src/app/files/PolygonList.js @@ -32,9 +32,9 @@ const PolygonList = ({ reFetch(); }; - const cancelChange = () => { - reFetchJson(); - }; + // const cancelChange = () => { + // reFetchJson(); + // }; // Used to track items has been edited const [updateJson, setUpdateJson] = useState(json); @@ -150,10 +150,11 @@ const PolygonList = ({ }; const handleCancel = () => { - setEditedPolygons(new Set()); - setIsEditing(false); + // setEditedPolygons(new Set()); + // setIsEditing(false); - cancelChange(); + // cancelChange(); + window.location.reload(); }; useEffect(() => { diff --git a/src/app/files/page.module.css b/src/app/files/page.module.css index f0eae50..becf8ea 100644 --- a/src/app/files/page.module.css +++ b/src/app/files/page.module.css @@ -158,5 +158,5 @@ .openDrawer { transform: translateX(0); - box-shadow: -2px 0 5px rgba(0,0,0,0.5); + box-shadow: -2px 0 10px rgba(0,0,0,0.2); } diff --git a/src/app/filesOriginal/page.module.css b/src/app/filesOriginal/page.module.css index 0a5fb16..1c2255e 100644 --- a/src/app/filesOriginal/page.module.css +++ b/src/app/filesOriginal/page.module.css @@ -159,7 +159,7 @@ .openDrawer { transform: translateX(0); - box-shadow: -2px 0 5px rgba(0,0,0,0.5); + box-shadow: -2px 0 10px rgba(0,0,0,0.2); } .version{ From dbe24cb620e441a58dfd897736b78349b38e7c4e Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Thu, 13 Feb 2025 17:15:24 -0800 Subject: [PATCH 27/37] fix max width to pdf --- src/app/files/page.js | 22 +- src/app/files/page.module.css | 11 +- src/app/filesOriginal/page.js | 22 +- src/app/filesOriginal/page.module.css | 327 +++++++++++++------------- 4 files changed, 194 insertions(+), 188 deletions(-) diff --git a/src/app/files/page.js b/src/app/files/page.js index 5f42ec4..f0ce9c2 100644 --- a/src/app/files/page.js +++ b/src/app/files/page.js @@ -345,17 +345,6 @@ const File = ({ searchParams }) => { verified={verified} reFetch={asyncFetchStatus} /> - -
- - - -
{/* This return statement will contain calls the React elements created for the 2 other containers */} @@ -398,6 +387,17 @@ const File = ({ searchParams }) => { > {isEditingTable ? "Close Editing" : "Edit Table"} */} + +
+ + + +
diff --git a/src/app/files/page.module.css b/src/app/files/page.module.css index becf8ea..b24d354 100644 --- a/src/app/files/page.module.css +++ b/src/app/files/page.module.css @@ -14,6 +14,9 @@ display: flex; justify-content: center; /* Horizontally centers the content */ margin: 0 auto; /* Centers the container horizontally */ + flex-direction: column; + width: 100%; + max-width: 1200px; } .error { color: red; @@ -115,7 +118,7 @@ .polygonOverlay { flex-grow: 1; - min-width: 0; + min-width: 640px; height: fit-content; padding: 10px; border: 1px solid #ddd; @@ -127,13 +130,13 @@ flex-direction: column; gap: 10px; width: 30%; - min-width:250px; + min-width:260px; max-width: 480px; height: calc(100vh - 20px); max-height: 100vh; position: sticky; top: 10px; - left: 0; + /* left: 0; */ padding: 10px; background-color: #f9f9f9; @@ -147,7 +150,7 @@ top: 0; right: 0; width: 30%; - min-width:250px; + min-width:420px; max-width: 480px; height: 100%; background-color: #fbf8f8; diff --git a/src/app/filesOriginal/page.js b/src/app/filesOriginal/page.js index 0a9db3e..55386b6 100644 --- a/src/app/filesOriginal/page.js +++ b/src/app/filesOriginal/page.js @@ -311,21 +311,21 @@ const File = ({ searchParams }) => {
) : ( <> -
- - - -
-
+ +
+ + + +
diff --git a/src/app/filesOriginal/page.module.css b/src/app/filesOriginal/page.module.css index 1c2255e..3c5332d 100644 --- a/src/app/filesOriginal/page.module.css +++ b/src/app/filesOriginal/page.module.css @@ -1,166 +1,169 @@ .allPage { - /* margin-bottom: 80px; */ - } - - .backButton { - border: 1px solid #2a2a2a; - background-color: white; - padding: 2px; - position: sticky; - top: 10px; - } - - .container { - display: flex; - justify-content: center; /* Horizontally centers the content */ - margin: 0 auto; /* Centers the container horizontally */ - } - .error { - color: red; - - margin: auto; - } - .linkStyle { - position: absolute; - top: 10px; - right: 10px; - padding: 5px 5px; - background-color: #f0f0f0; - color: #000; - border: 1px solid #ccc; - font-size: 0.8em; - font-weight: 600; - border-radius: 5px; - text-decoration: none; - transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; - } - .linkStyle2 { - position: absolute; - top: 10px; - right: 230px; - padding: 5px 5px; - background-color: #f0f0f0; - color: #000; - border: 1px solid #ccc; - font-size: 0.8em; - font-weight: 600; - border-radius: 5px; - text-decoration: none; - transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; - } - - .linkStyle3 { - position: absolute; - top: 10px; - right: 120px; - padding: 5px 5px; - background-color: #f0f0f0; - color: #000; - border: 1px solid #ccc; - font-size: 0.8em; - font-weight: 600; - border-radius: 5px; - text-decoration: none; - transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; - } - - .linkStyle:hover, - .linkStyle2:hover, - .linkStyle3:hover { - background-color: #ddd; - cursor: pointer; - color: red; - text-decoration: underline; - font-weight: 600; - } - - .fileName { - display: flex; - align-items: center; - margin-bottom: 21px; - margin-top: 12px; - } - - .modifiedLink { - display: flex; - align-items: center; - text-decoration: none; - color: red; - } - - .modifiedLink :hover { - text-decoration: underline; - font-weight: 600; - } - - .toolsContainer { - display: flex; - align-items: stretch; - gap: 10px; - margin-bottom: 10px; - } - - .layoutContainer { - display: flex; - justify-content: space-between; - width: 100%; - /* min-height: 1000px; */ - gap: 10px; - } - - .layoutContainer h4 { - margin: 0; - padding: 0; - /* margin-bottom: 12px; */ - } - - .polygonOverlay { - flex-grow: 1; - min-width: 0; - height: fit-content; - padding: 10px; - border: 1px solid #ddd; - border-radius: 5px; - } - - .polygonsContainer { - display: flex; - flex-direction: column; - gap: 10px; - width: 30%; - min-width:250px; - max-width: 480px; - height: calc(100vh - 20px); - max-height: 100vh; - position: sticky; - top: 10px; - left: 0; - - padding: 10px; - background-color: #f9f9f9; - border: 1px solid #ddd; - border-radius: 5px; - } - - .jsonDrawer { - z-index: 100; - position: fixed; - top: 0; - right: 0; - width: 30%; - min-width:250px; - max-width: 480px; - height: 100%; - background-color: #fbf8f8; - padding: 20px; - transform: translateX(100%); - transition: transform 0.3s ease; - } - - .openDrawer { - transform: translateX(0); - box-shadow: -2px 0 10px rgba(0,0,0,0.2); - } + /* margin-bottom: 80px; */ +} + +.backButton { + border: 1px solid #2a2a2a; + background-color: white; + padding: 2px; + position: sticky; + top: 10px; +} + +.container { + display: flex; + justify-content: center; /* Horizontally centers the content */ + margin: 0 auto; /* Centers the container horizontally */ + flex-direction: column; + width: 100%; + max-width: 1200px; +} +.error { + color: red; + + margin: auto; +} +.linkStyle { + position: absolute; + top: 10px; + right: 10px; + padding: 5px 5px; + background-color: #f0f0f0; + color: #000; + border: 1px solid #ccc; + font-size: 0.8em; + font-weight: 600; + border-radius: 5px; + text-decoration: none; + transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; +} +.linkStyle2 { + position: absolute; + top: 10px; + right: 230px; + padding: 5px 5px; + background-color: #f0f0f0; + color: #000; + border: 1px solid #ccc; + font-size: 0.8em; + font-weight: 600; + border-radius: 5px; + text-decoration: none; + transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; +} + +.linkStyle3 { + position: absolute; + top: 10px; + right: 120px; + padding: 5px 5px; + background-color: #f0f0f0; + color: #000; + border: 1px solid #ccc; + font-size: 0.8em; + font-weight: 600; + border-radius: 5px; + text-decoration: none; + transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; +} + +.linkStyle:hover, +.linkStyle2:hover, +.linkStyle3:hover { + background-color: #ddd; + cursor: pointer; + color: red; + text-decoration: underline; + font-weight: 600; +} + +.fileName { + display: flex; + align-items: center; + margin-bottom: 21px; + margin-top: 12px; +} + +.modifiedLink { + display: flex; + align-items: center; + text-decoration: none; + color: red; +} + +.modifiedLink :hover { + text-decoration: underline; + font-weight: 600; +} + +.toolsContainer { + display: flex; + align-items: stretch; + gap: 10px; + margin-bottom: 10px; +} + +.layoutContainer { + display: flex; + justify-content: space-between; + width: 100%; + /* min-height: 1000px; */ + gap: 10px; +} + +.layoutContainer h4 { + margin: 0; + padding: 0; + /* margin-bottom: 12px; */ +} + +.polygonOverlay { + flex-grow: 1; + min-width: 640px; + height: fit-content; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; +} + +.polygonsContainer { + display: flex; + flex-direction: column; + gap: 10px; + width: 30%; + min-width:260px; + max-width: 480px; + height: calc(100vh - 20px); + max-height: 100vh; + position: sticky; + top: 10px; + /* left: 0; */ + + padding: 10px; + background-color: #f9f9f9; + border: 1px solid #ddd; + border-radius: 5px; +} + +.jsonDrawer { + z-index: 100; + position: fixed; + top: 0; + right: 0; + width: 30%; + min-width:420px; + max-width: 480px; + height: 100%; + background-color: #fbf8f8; + padding: 20px; + transform: translateX(100%); + transition: transform 0.3s ease; +} + +.openDrawer { + transform: translateX(0); + box-shadow: -2px 0 10px rgba(0,0,0,0.2); +} .version{ margin-left: 10px; From ad66be713b4f5f0cef35da7988ff53272f1ebddb Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Thu, 13 Feb 2025 20:39:55 -0800 Subject: [PATCH 28/37] add editable to null field component. fix view json original data. --- src/app/components/EditableField.js | 4 +- src/app/components/NullField.js | 93 +++++++++++++++++++++++++++ src/app/files/PolygonList.js | 41 +++++++++--- src/app/files/PolygonList.module.css | 16 ++++- src/app/files/page.js | 10 +-- src/app/files/page.module.css | 4 ++ src/app/filesOriginal/page.js | 10 +-- src/app/filesOriginal/page.module.css | 4 ++ src/app/viewJson/pageComp.js | 4 +- 9 files changed, 163 insertions(+), 23 deletions(-) create mode 100644 src/app/components/NullField.js diff --git a/src/app/components/EditableField.js b/src/app/components/EditableField.js index 4853531..bced717 100644 --- a/src/app/components/EditableField.js +++ b/src/app/components/EditableField.js @@ -8,8 +8,8 @@ const EditableField = ({ textAreaRefs, handleUpdatePolygon, editedPolygons, - handleFocus, - handleBlur, + handleFocus = () => {}, + handleBlur = () => {}, isReadOnly }) => { diff --git a/src/app/components/NullField.js b/src/app/components/NullField.js new file mode 100644 index 0000000..e126cf5 --- /dev/null +++ b/src/app/components/NullField.js @@ -0,0 +1,93 @@ +"use client"; +import styles from "./Polygon.module.css"; +import EditableField from "./EditableField"; +import { useState, useEffect, useRef } from "react"; + +const NullField = ({ + polygonKey, + polygon, + textAreaRefs, + polygonRef, + handleUpdatePolygon, + editedPolygons, + setHasNullField, + isReadOnly +}) => { + const hasSetNull = useRef(false); + + // Helper function for coordinates validation logic + const areCoordinatesValid = (coordinates) => { + return ( + Array.isArray(coordinates) && + typeof coordinates === "object" && + ["x1", "y1", "x2", "y2", "x3", "y3", "x4", "y4"].every((requiredKey) => + coordinates.some((coord) => coord[requiredKey] != null) + ) + ); + }; + + const renderNullField = (polygonKey, polygon, textAreaRefs) => { + if (polygonKey.toLowerCase() === "verified" || polygonKey.toLowerCase() === "model id") return null; + + const content = polygon[0]; + + // Recursion to handle nested objects + if (Array.isArray(polygon) && typeof content === "object" && content != null) { + return polygon.map((row, rowIndex) => + Object.entries(row).map(([nestedKey, nestedValue]) => + renderNullField( + `${polygonKey} Row ${rowIndex+1} - ${nestedKey}`, + nestedValue, + textAreaRefs + ) + ) + ); + } + + // Render polygon if the content is string or null, with valid coordinates + if (typeof content === "string" || content === null) { + const coordinates = polygon[1]; + const flag = polygon[4]; + + if (!areCoordinatesValid(coordinates)) { + if (!hasSetNull.current) { + hasSetNull.current = true; + } + + return ( +
(polygonRef.current[polygonKey] = ref)} + className={styles.polygonItem} + > +
+ {polygonKey} +
+ +
+ ) + } + } + + return null; + }; + + // Set true if null field exist + useEffect(() => { + if (hasSetNull.current) { + setHasNullField(true); + } + }, [setHasNullField]); + + return renderNullField(polygonKey, polygon, textAreaRefs); +}; + +export default NullField; diff --git a/src/app/files/PolygonList.js b/src/app/files/PolygonList.js index 59da675..6cde472 100644 --- a/src/app/files/PolygonList.js +++ b/src/app/files/PolygonList.js @@ -1,6 +1,7 @@ "use client"; import styles from "./PolygonList.module.css"; import Polygon from "../components/Polygon"; +import NullField from "../components/NullField"; import { useState, useEffect, useRef } from "react"; const PolygonList = ({ @@ -16,6 +17,7 @@ const PolygonList = ({ selectedPolygon, handlePolygonSelect, handlePolygonDeselect, + setHasNullField, isReadOnly = false }) => { const collectedPolygonKeys = new Set(); @@ -174,16 +176,16 @@ const PolygonList = ({ }, [clickedPolygon]) return ( + <> + {isEditing ? ( + <> + + + + ) : null} + +

Polygon List

- {isEditing ? ( - <> - - - - ) : null} - - {/*

Polygon List

*/} - {Object.entries(json).map(([key, value]) => { return ( ) })} -
+ +

Null Field List

+
+ {Object.entries(json).map(([key, value]) => { + return ( + + ) + })} +
+ ); }; diff --git a/src/app/files/PolygonList.module.css b/src/app/files/PolygonList.module.css index 6a2e686..2f7d147 100644 --- a/src/app/files/PolygonList.module.css +++ b/src/app/files/PolygonList.module.css @@ -1,5 +1,5 @@ .polygonList { - height: 80%; + height: 70%; display: flex; flex-direction: column; gap: 10px; @@ -11,6 +11,20 @@ overflow-y: auto; } +.nullFieldList { + /* height: 20%; */ + display: flex; + flex-direction: column; + flex: 1; + gap: 10px; + /* padding: 10px; */ + background-color: #f9f9f9; + /* border: 1px solid #ddd; */ + /* border-radius: 5px; */ + overflow-x: hidden; + overflow-y: auto; +} + .saveChange { z-index: 99; opacity: 0.8; diff --git a/src/app/files/page.js b/src/app/files/page.js index f0ce9c2..6caff06 100644 --- a/src/app/files/page.js +++ b/src/app/files/page.js @@ -5,7 +5,7 @@ import Link from "next/link"; import LogoHeader from "../components/LogoHeader"; import Iframe from "./Iframe"; import PolygonList from "./PolygonList"; -import NullFieldList from "./NullFieldList"; +// import NullFieldList from "./NullFieldList"; import HighlightColorSelector from "../components/HighlightColorSelector"; import NullFieldIndicator from "../components/NullFieldIndicator"; import Image from "next/image"; @@ -402,7 +402,7 @@ const File = ({ searchParams }) => {
-

Polygon List

+ {/*

Polygon List

*/} { selectedPolygon={selectedPolygon} handlePolygonSelect={handlePolygonSelect} handlePolygonDeselect={handlePolygonDeselect} + setHasNullField={setHasNullField} /> -

Null Field List

+ {/*

Null Field List

+ /> */}
@@ -445,6 +446,7 @@ const File = ({ searchParams }) => {
{setViewJson(false);}} diff --git a/src/app/files/page.module.css b/src/app/files/page.module.css index b24d354..aeb64d4 100644 --- a/src/app/files/page.module.css +++ b/src/app/files/page.module.css @@ -144,6 +144,10 @@ border-radius: 5px; } +.polygonsContainer > h4 + div { + margin-bottom: 10px; +} + .jsonDrawer { z-index: 100; position: fixed; diff --git a/src/app/filesOriginal/page.js b/src/app/filesOriginal/page.js index 55386b6..daa8c1b 100644 --- a/src/app/filesOriginal/page.js +++ b/src/app/filesOriginal/page.js @@ -3,7 +3,7 @@ import styles from "./page.module.css"; import LogoHeader from "../components/LogoHeader"; import Iframe from "../files/Iframe"; import PolygonList from "../files/PolygonList"; -import NullFieldList from "../files/NullFieldList"; +// import NullFieldList from "../files/NullFieldList"; import HighlightColorSelector from "../components/HighlightColorSelector"; import NullFieldIndicator from "../components/NullFieldIndicator"; import Image from "next/image"; @@ -330,7 +330,7 @@ const File = ({ searchParams }) => {
-

Polygon List

+ {/*

Polygon List

*/} { selectedPolygon={selectedPolygon} handlePolygonSelect={handlePolygonSelect} handlePolygonDeselect={handlePolygonDeselect} + setHasNullField={setHasNullField} isReadOnly={true} /> -

Null Field List

+ {/*

Null Field List

+ /> */}
@@ -374,6 +375,7 @@ const File = ({ searchParams }) => {
{setViewJson(false);}} diff --git a/src/app/filesOriginal/page.module.css b/src/app/filesOriginal/page.module.css index 3c5332d..745b1c4 100644 --- a/src/app/filesOriginal/page.module.css +++ b/src/app/filesOriginal/page.module.css @@ -145,6 +145,10 @@ border-radius: 5px; } +.polygonsContainer > h4 + div { + margin-bottom: 10px; +} + .jsonDrawer { z-index: 100; position: fixed; diff --git a/src/app/viewJson/pageComp.js b/src/app/viewJson/pageComp.js index 99975ac..61aed13 100644 --- a/src/app/viewJson/pageComp.js +++ b/src/app/viewJson/pageComp.js @@ -4,14 +4,14 @@ import { useState, useEffect } from "react"; import styles from "./page.module.css"; import ViewJson from "./ViewJson"; -const JsonPage = ({ folderName, fileName, onClose }) => { +const JsonPage = ({ directoryPath, folderName, fileName, onClose }) => { const [isLoading, setIsLoading] = useState(true); const [jsonData, setJsonData] = useState({}); //fetch json data from blob const asyncFetch = async () => { setIsLoading(true); - const Response = await fetch("/api/jsonDataModified", { + const Response = await fetch(directoryPath, { method: "POST", headers: { "Content-Type": "application/json", From ec53ada32b188f58f9c31af8daf6259467e539fb Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Thu, 13 Feb 2025 21:04:06 -0800 Subject: [PATCH 29/37] add null editable bg colour --- src/app/components/EditableField.js | 2 +- src/app/components/EditableField.module.css | 4 ++++ src/app/files/PolygonList.module.css | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/components/EditableField.js b/src/app/components/EditableField.js index bced717..2ca2c69 100644 --- a/src/app/components/EditableField.js +++ b/src/app/components/EditableField.js @@ -31,7 +31,7 @@ const EditableField = ({ onFocus={()=>{handleFocus(polygonKey);}} onBlur={handleBlur} ref={(ref) => (textAreaRefs.current[polygonKey] = ref)} - className={`${styles.labelText} ${flagStyle}`} + className={`${styles.labelText} ${flagStyle} ${!content ? styles.nullLabelText : ''}`} value={content} onChange={(e) => handleUpdatePolygon(polygonKey, e.target.value)} rows={1} diff --git a/src/app/components/EditableField.module.css b/src/app/components/EditableField.module.css index a5a44e3..0b7d5d7 100644 --- a/src/app/components/EditableField.module.css +++ b/src/app/components/EditableField.module.css @@ -15,6 +15,10 @@ outline: none; } +.nullLabelText { + background: #fef4e4; +} + .flagged { color: red; } diff --git a/src/app/files/PolygonList.module.css b/src/app/files/PolygonList.module.css index 2f7d147..bf27a46 100644 --- a/src/app/files/PolygonList.module.css +++ b/src/app/files/PolygonList.module.css @@ -1,5 +1,5 @@ .polygonList { - height: 70%; + height: 60%; display: flex; flex-direction: column; gap: 10px; From c4f8787bca8a01b54105024ba83188e7fab1e2f0 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Fri, 14 Feb 2025 09:35:32 -0800 Subject: [PATCH 30/37] Update HighlightColorSelector.js --- src/app/components/HighlightColorSelector.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app/components/HighlightColorSelector.js b/src/app/components/HighlightColorSelector.js index a36056f..ebb93c6 100644 --- a/src/app/components/HighlightColorSelector.js +++ b/src/app/components/HighlightColorSelector.js @@ -7,6 +7,7 @@ const colors = [ ]; const HighlightColorSelector = ({ highlightColor, setHighlightColor }) => { + const [prevColor, setPrevColor] = useState(highlightColor); const [isOpen, setIsOpen] = useState(false); const selectorRef = useRef(null); @@ -45,8 +46,11 @@ const HighlightColorSelector = ({ highlightColor, setHighlightColor }) => { key={color} className={styles.dropdownItem} style={{ backgroundColor: color }} + onMouseOver={() => setHighlightColor(color)} + onMouseOut={() => setHighlightColor(prevColor)} onClick={(e) => { setHighlightColor(color); + setPrevColor(color); setIsOpen(!isOpen); }} /> From bc9cae6b429fd2ee7ae4286dac1c892c9767f522 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Tue, 18 Feb 2025 16:15:26 -0800 Subject: [PATCH 31/37] remove update form setting button --- src/app/components/homePage/FileNameReader.js | 2 - src/app/components/homePage/UpdateSetting.js | 73 ----------- .../homePage/UpdateSetting.module.css | 122 ------------------ 3 files changed, 197 deletions(-) delete mode 100644 src/app/components/homePage/UpdateSetting.js delete mode 100644 src/app/components/homePage/UpdateSetting.module.css diff --git a/src/app/components/homePage/FileNameReader.js b/src/app/components/homePage/FileNameReader.js index db4a321..dc65a27 100644 --- a/src/app/components/homePage/FileNameReader.js +++ b/src/app/components/homePage/FileNameReader.js @@ -5,7 +5,6 @@ import Link from "next/link"; import styles from "./FileNameReader.module.css"; import { useState, useEffect } from "react"; import LogPage from "./LogPage"; -import UpdateSetting from "./UpdateSetting"; // this component reads the file names and folder name from the bc16Data folder // then combines the file names and folder names as an array of objects: [ {folderName: folderName, fileName: fileName}, ....] @@ -94,7 +93,6 @@ const FileNameReader = () => { - )} diff --git a/src/app/components/homePage/UpdateSetting.js b/src/app/components/homePage/UpdateSetting.js deleted file mode 100644 index 46b50d6..0000000 --- a/src/app/components/homePage/UpdateSetting.js +++ /dev/null @@ -1,73 +0,0 @@ -import { useState, useEffect } from "react"; -import styles from "./UpdateSetting.module.css"; - -const UpdateSetting = (folderNames) => { - const [isToggled, setIsToggled] = useState(false); - - const onClickHandler = async () => { - const Response = await fetch("/api/saveFormSetting", { - method: "POST", - body: JSON.stringify(folderNames), - headers: { - "Content-Type": "application/json", - }, - }); - - if (!Response.ok) { - alert("Error"); - } else { - alert("Success"); - setIsToggled(false); - } - }; - return ( - <> - - {isToggled && ( - <> -
setIsToggled(!isToggled)} - >
-
setIsToggled(false)} - > -
Import folder names
- -
- This will update folder names in the formSetting.json file. You - only need to do this during the initial setup of the web app or - when there are updates to the folders -
- -
- - -
-
- - )} - - ); -}; - -export default UpdateSetting; diff --git a/src/app/components/homePage/UpdateSetting.module.css b/src/app/components/homePage/UpdateSetting.module.css deleted file mode 100644 index 709a89c..0000000 --- a/src/app/components/homePage/UpdateSetting.module.css +++ /dev/null @@ -1,122 +0,0 @@ -.backdrop { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ - z-index: 1000; /* Ensure the backdrop stays above other elements */ -} - -.confirmWindow { - position: fixed; - width: 500px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for depth */ - z-index: 1001; /* Ensure the error window stays above the backdrop */ -} - -.confirmWindow p { - font-size: 1.2em; - margin-bottom: 16px; -} - -.title { - font-size: 1.5em; - margin-bottom: 16px; - font-weight: 550; -} - -.warming { - color: red; - font-size: 0.9em; - margin-bottom: 16px; -} - -.buttonWrapper { - display: flex; - justify-content: center; - margin-top: 16px; -} - -.cancel { - margin: 0 10px; - padding: 10px; - height: 100%; - border: none; - border-radius: 5px; - background-color: #9e0000; - color: white; - font-size: 1.2rem; - cursor: pointer; - transition: all 0.3s ease-in-out; -} -.submit { - margin: 0 10px; - padding: 10px; - height: 100%; - border: none; - border-radius: 5px; - background-color: #2c3e50; - color: white; - font-size: 1.2rem; - cursor: pointer; - transition: all 0.3s ease-in-out; -} - -.submit:hover { - background-color: #067bf0; -} -.cancel:hover { - background-color: #ff0000; -} - -.formField { - padding: 10px; -} -.importButton { -} -.importButton2 { - z-index: 99; - opacity: 0.6; - position: fixed; - top: 80px; - right: 50px; - display: flex; - align-items: center; - gap: 3.4px; - - background-color: #fff; - border-radius: 24px; - border-style: none; - box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px, - rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0; - box-sizing: border-box; - color: #3c4043; - cursor: pointer; - fill: currentcolor; - font-size: 14px; - font-weight: 500; - height: 30px; - line-height: normal; - padding: 2px 24px; - text-transform: none; - transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), - opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - width: 155px; - will-change: transform, opacity; -} -.reportButton:hover { - background: #f6f9fe; - color: #174ea6; - - opacity: 1; -} From 675234b1b04d9d81ee9cf05e73acdd4412556471 Mon Sep 17 00:00:00 2001 From: haydenDFO <162184368+haydenDFO@users.noreply.github.com> Date: Tue, 18 Feb 2025 16:15:37 -0800 Subject: [PATCH 32/37] remove update form setting button --- src/app/components/homePage/FileNameReader.js | 2 - src/app/components/homePage/UpdateSetting.js | 73 ----------- .../homePage/UpdateSetting.module.css | 122 ------------------ 3 files changed, 197 deletions(-) delete mode 100644 src/app/components/homePage/UpdateSetting.js delete mode 100644 src/app/components/homePage/UpdateSetting.module.css diff --git a/src/app/components/homePage/FileNameReader.js b/src/app/components/homePage/FileNameReader.js index db4a321..dc65a27 100644 --- a/src/app/components/homePage/FileNameReader.js +++ b/src/app/components/homePage/FileNameReader.js @@ -5,7 +5,6 @@ import Link from "next/link"; import styles from "./FileNameReader.module.css"; import { useState, useEffect } from "react"; import LogPage from "./LogPage"; -import UpdateSetting from "./UpdateSetting"; // this component reads the file names and folder name from the bc16Data folder // then combines the file names and folder names as an array of objects: [ {folderName: folderName, fileName: fileName}, ....] @@ -94,7 +93,6 @@ const FileNameReader = () => { - )} diff --git a/src/app/components/homePage/UpdateSetting.js b/src/app/components/homePage/UpdateSetting.js deleted file mode 100644 index 46b50d6..0000000 --- a/src/app/components/homePage/UpdateSetting.js +++ /dev/null @@ -1,73 +0,0 @@ -import { useState, useEffect } from "react"; -import styles from "./UpdateSetting.module.css"; - -const UpdateSetting = (folderNames) => { - const [isToggled, setIsToggled] = useState(false); - - const onClickHandler = async () => { - const Response = await fetch("/api/saveFormSetting", { - method: "POST", - body: JSON.stringify(folderNames), - headers: { - "Content-Type": "application/json", - }, - }); - - if (!Response.ok) { - alert("Error"); - } else { - alert("Success"); - setIsToggled(false); - } - }; - return ( - <> - - {isToggled && ( - <> -
setIsToggled(!isToggled)} - >
-
setIsToggled(false)} - > -
Import folder names
- -
- This will update folder names in the formSetting.json file. You - only need to do this during the initial setup of the web app or - when there are updates to the folders -
- -
- - -
-
- - )} - - ); -}; - -export default UpdateSetting; diff --git a/src/app/components/homePage/UpdateSetting.module.css b/src/app/components/homePage/UpdateSetting.module.css deleted file mode 100644 index 709a89c..0000000 --- a/src/app/components/homePage/UpdateSetting.module.css +++ /dev/null @@ -1,122 +0,0 @@ -.backdrop { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ - z-index: 1000; /* Ensure the backdrop stays above other elements */ -} - -.confirmWindow { - position: fixed; - width: 500px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for depth */ - z-index: 1001; /* Ensure the error window stays above the backdrop */ -} - -.confirmWindow p { - font-size: 1.2em; - margin-bottom: 16px; -} - -.title { - font-size: 1.5em; - margin-bottom: 16px; - font-weight: 550; -} - -.warming { - color: red; - font-size: 0.9em; - margin-bottom: 16px; -} - -.buttonWrapper { - display: flex; - justify-content: center; - margin-top: 16px; -} - -.cancel { - margin: 0 10px; - padding: 10px; - height: 100%; - border: none; - border-radius: 5px; - background-color: #9e0000; - color: white; - font-size: 1.2rem; - cursor: pointer; - transition: all 0.3s ease-in-out; -} -.submit { - margin: 0 10px; - padding: 10px; - height: 100%; - border: none; - border-radius: 5px; - background-color: #2c3e50; - color: white; - font-size: 1.2rem; - cursor: pointer; - transition: all 0.3s ease-in-out; -} - -.submit:hover { - background-color: #067bf0; -} -.cancel:hover { - background-color: #ff0000; -} - -.formField { - padding: 10px; -} -.importButton { -} -.importButton2 { - z-index: 99; - opacity: 0.6; - position: fixed; - top: 80px; - right: 50px; - display: flex; - align-items: center; - gap: 3.4px; - - background-color: #fff; - border-radius: 24px; - border-style: none; - box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px, - rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0; - box-sizing: border-box; - color: #3c4043; - cursor: pointer; - fill: currentcolor; - font-size: 14px; - font-weight: 500; - height: 30px; - line-height: normal; - padding: 2px 24px; - text-transform: none; - transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), - opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - width: 155px; - will-change: transform, opacity; -} -.reportButton:hover { - background: #f6f9fe; - color: #174ea6; - - opacity: 1; -} From 898cbb639932384c928cd317d92e7ecca9bafd0a Mon Sep 17 00:00:00 2001 From: David Onak <54957341+DavidOnak@users.noreply.github.com> Date: Wed, 26 Feb 2025 11:39:31 -0800 Subject: [PATCH 33/37] Fix file status retreival --- src/app/components/homePage/FileNameList.js | 101 ++++++++++++-------- 1 file changed, 62 insertions(+), 39 deletions(-) diff --git a/src/app/components/homePage/FileNameList.js b/src/app/components/homePage/FileNameList.js index c733a22..2967c7e 100644 --- a/src/app/components/homePage/FileNameList.js +++ b/src/app/components/homePage/FileNameList.js @@ -32,45 +32,68 @@ const FileNameList = ({ filesByFolder, fileStatus }) => { //fetching the firle status - const asyncFetch = async () => { - setIsReload(true); - const Response = await fetch("/api/fileStatus", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(uniqueFolderNames), - }); - if (!Response.ok) { - throw new Error(Response.statusText); - } else if (Response.status === 203) { - console.log("No data"); - setIsReload(false); - } else { - const reader = Response.body.getReader(); - const readData = async () => { - try { - while (true) { - const { done, value } = await reader.read(); - if (done) { - break; - } - // `value` contains the chunk of data as a Uint8Array - const jsonString = new TextDecoder().decode(value); - // Parse the JSON string into an object - const dataObject = JSON.parse(jsonString); - fileStatus(dataObject); - setFileStatusJson(dataObject); - setIsReload(false); - } - } catch (error) { - console.error("Error reading response:", error); - } finally { - reader.releaseLock(); // Release the reader's lock when done - } - }; - - readData(); + const asyncFetch = async () => { + // Prevent multiple simultaneous executions + if (isReload) return; + + try { + setIsReload(true); + + const response = await fetch("/api/fileStatus", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(uniqueFolderNames), + }); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } else if (response.status === 203) { + console.log("No data"); + setIsReload(false); + } else { + const reader = response.body.getReader(); + const textDecoder = new TextDecoder(); + let rawResponse = ""; + + const readData = async () => { + try { + let done = false; + while (!done) { + const { done: chunkDone, value } = await reader.read(); + done = chunkDone; + + if (value) { + rawResponse += textDecoder.decode(value, { stream: !done }); + } + } + + // Log the raw response for debugging + console.log("Raw response:", rawResponse); + + // Attempt to parse the raw response + try { + const dataObject = JSON.parse(rawResponse); + fileStatus(dataObject); + setFileStatusJson(dataObject); + } catch (jsonError) { + console.error("JSON parse error:", jsonError); + console.error("Invalid JSON received:", rawResponse); + } + } catch (error) { + console.error("Error reading response:", error); + } finally { + reader.releaseLock(); + setIsReload(false); + } + }; + + await readData(); + } + } catch (error) { + console.error("Fetch error:", error); + setIsReload(false); // Ensure to reset the state even on error } }; From 03be89b21325a577c3886efda4954f15a4b16ce5 Mon Sep 17 00:00:00 2001 From: David Onak <54957341+DavidOnak@users.noreply.github.com> Date: Wed, 26 Feb 2025 12:04:20 -0800 Subject: [PATCH 34/37] Updated readme with debugging note --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index ce5fead..4ab68cf 100644 --- a/README.md +++ b/README.md @@ -40,4 +40,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. +## Debugging +In order for the script to create individual polygon objects for all values in a nested object, a delimitor of ' -- ' is added. If any field name in a JSON file contains this demimitor, it will prevent the field from being updated. + From 7cf0a3cca95a1006b3a668ccff380a312ab9c296 Mon Sep 17 00:00:00 2001 From: David Onak <54957341+DavidOnak@users.noreply.github.com> Date: Wed, 26 Feb 2025 15:42:30 -0800 Subject: [PATCH 35/37] Updated polygon box highlighting --- src/app/files/Iframe.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/files/Iframe.js b/src/app/files/Iframe.js index 039e651..759ef47 100644 --- a/src/app/files/Iframe.js +++ b/src/app/files/Iframe.js @@ -77,7 +77,7 @@ const Iframe = ({ fileName, folderName, pageWidth, json, polygonKeys, highlightC if (coordsList && coordsList.every(coord => typeof coord === "object")) { const coords = extractCoords(coordsList); if (coords.every(coord => coord !== undefined)) { - const uniqueKey = `${rowKey} - ${columnKey}`; + const uniqueKey = `${rowKey} -- ${columnKey}`; boxes.push({ key: uniqueKey, coords: coords.map(coord => coord * DPI * scaleFactor), From 2b2308447f0c8b3b4633d81cbd2fec2b4f59365a Mon Sep 17 00:00:00 2001 From: David Onak <54957341+DavidOnak@users.noreply.github.com> Date: Thu, 27 Feb 2025 08:09:07 -0800 Subject: [PATCH 36/37] Fixed null field polygons with new delimitor --- src/app/components/NullField.js | 2 +- src/app/files/NullFieldList.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/NullField.js b/src/app/components/NullField.js index e126cf5..ac8f6a2 100644 --- a/src/app/components/NullField.js +++ b/src/app/components/NullField.js @@ -36,7 +36,7 @@ const NullField = ({ return polygon.map((row, rowIndex) => Object.entries(row).map(([nestedKey, nestedValue]) => renderNullField( - `${polygonKey} Row ${rowIndex+1} - ${nestedKey}`, + `${polygonKey} Row ${rowIndex+1} -- ${nestedKey}`, nestedValue, textAreaRefs ) diff --git a/src/app/files/NullFieldList.js b/src/app/files/NullFieldList.js index 5964b02..b6dd568 100644 --- a/src/app/files/NullFieldList.js +++ b/src/app/files/NullFieldList.js @@ -24,7 +24,7 @@ const NullFieldList = ({ json, setHasNullField }) => { return polygon.map((row, rowIndex) => Object.entries(row).map(([nestedKey, nestedValue]) => renderNullField( - `${key} Row ${rowIndex+1} - ${nestedKey}`, + `${key} Row ${rowIndex+1} -- ${nestedKey}`, nestedValue ) ) From 3357844c353b1b112e8b2994f41e9cc6e6e86dce Mon Sep 17 00:00:00 2001 From: David Onak Date: Thu, 17 Apr 2025 08:49:49 -0700 Subject: [PATCH 37/37] Added back Update Settings button (turns out we need it) --- src/app/components/homePage/FileNameReader.js | 2 + src/app/components/homePage/UpdateSetting.js | 73 +++++++++++ .../homePage/UpdateSetting.module.css | 122 ++++++++++++++++++ 3 files changed, 197 insertions(+) create mode 100644 src/app/components/homePage/UpdateSetting.js create mode 100644 src/app/components/homePage/UpdateSetting.module.css diff --git a/src/app/components/homePage/FileNameReader.js b/src/app/components/homePage/FileNameReader.js index dc65a27..db4a321 100644 --- a/src/app/components/homePage/FileNameReader.js +++ b/src/app/components/homePage/FileNameReader.js @@ -5,6 +5,7 @@ import Link from "next/link"; import styles from "./FileNameReader.module.css"; import { useState, useEffect } from "react"; import LogPage from "./LogPage"; +import UpdateSetting from "./UpdateSetting"; // this component reads the file names and folder name from the bc16Data folder // then combines the file names and folder names as an array of objects: [ {folderName: folderName, fileName: fileName}, ....] @@ -93,6 +94,7 @@ const FileNameReader = () => { + )} diff --git a/src/app/components/homePage/UpdateSetting.js b/src/app/components/homePage/UpdateSetting.js new file mode 100644 index 0000000..46b50d6 --- /dev/null +++ b/src/app/components/homePage/UpdateSetting.js @@ -0,0 +1,73 @@ +import { useState, useEffect } from "react"; +import styles from "./UpdateSetting.module.css"; + +const UpdateSetting = (folderNames) => { + const [isToggled, setIsToggled] = useState(false); + + const onClickHandler = async () => { + const Response = await fetch("/api/saveFormSetting", { + method: "POST", + body: JSON.stringify(folderNames), + headers: { + "Content-Type": "application/json", + }, + }); + + if (!Response.ok) { + alert("Error"); + } else { + alert("Success"); + setIsToggled(false); + } + }; + return ( + <> + + {isToggled && ( + <> +
setIsToggled(!isToggled)} + >
+
setIsToggled(false)} + > +
Import folder names
+ +
+ This will update folder names in the formSetting.json file. You + only need to do this during the initial setup of the web app or + when there are updates to the folders +
+ +
+ + +
+
+ + )} + + ); +}; + +export default UpdateSetting; diff --git a/src/app/components/homePage/UpdateSetting.module.css b/src/app/components/homePage/UpdateSetting.module.css new file mode 100644 index 0000000..709a89c --- /dev/null +++ b/src/app/components/homePage/UpdateSetting.module.css @@ -0,0 +1,122 @@ +.backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ + z-index: 1000; /* Ensure the backdrop stays above other elements */ +} + +.confirmWindow { + position: fixed; + width: 500px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for depth */ + z-index: 1001; /* Ensure the error window stays above the backdrop */ +} + +.confirmWindow p { + font-size: 1.2em; + margin-bottom: 16px; +} + +.title { + font-size: 1.5em; + margin-bottom: 16px; + font-weight: 550; +} + +.warming { + color: red; + font-size: 0.9em; + margin-bottom: 16px; +} + +.buttonWrapper { + display: flex; + justify-content: center; + margin-top: 16px; +} + +.cancel { + margin: 0 10px; + padding: 10px; + height: 100%; + border: none; + border-radius: 5px; + background-color: #9e0000; + color: white; + font-size: 1.2rem; + cursor: pointer; + transition: all 0.3s ease-in-out; +} +.submit { + margin: 0 10px; + padding: 10px; + height: 100%; + border: none; + border-radius: 5px; + background-color: #2c3e50; + color: white; + font-size: 1.2rem; + cursor: pointer; + transition: all 0.3s ease-in-out; +} + +.submit:hover { + background-color: #067bf0; +} +.cancel:hover { + background-color: #ff0000; +} + +.formField { + padding: 10px; +} +.importButton { +} +.importButton2 { + z-index: 99; + opacity: 0.6; + position: fixed; + top: 80px; + right: 50px; + display: flex; + align-items: center; + gap: 3.4px; + + background-color: #fff; + border-radius: 24px; + border-style: none; + box-shadow: rgba(0, 0, 0, 0.2) 0 3px 5px -1px, + rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0; + box-sizing: border-box; + color: #3c4043; + cursor: pointer; + fill: currentcolor; + font-size: 14px; + font-weight: 500; + height: 30px; + line-height: normal; + padding: 2px 24px; + text-transform: none; + transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), + opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + width: 155px; + will-change: transform, opacity; +} +.reportButton:hover { + background: #f6f9fe; + color: #174ea6; + + opacity: 1; +}