update main with dynamic (current qa/qc solution)

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.
+
 

package.json

@@ -10,6 +10,9 @@
   },
   "dependencies": {
     "@azure/storage-blob": "^12.17.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.6",
     "@uiw/react-json-view": "^2.0.0-alpha.17",
     "json-edit-react": "^1.8.1",
     "next": "14.0.3",

src/app/components/EditableField.js

@@ -1,5 +1,8 @@
 "use client";
 import styles from "./EditableField.module.css";
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import { useState, useEffect, useRef } from "react";
 
 const EditableField = ({
   polygonKey,
@@ -8,11 +11,14 @@ const EditableField = ({
   textAreaRefs,
   handleUpdatePolygon,
   editedPolygons,
+  highlightColor,
   handleFocus = () => {},
   handleBlur = () => {},
   isReadOnly
 }) => {
 
+  const [contentOld, setContentOld] = useState(content);
+
   let flagStyle = '';
   switch (flag) {
     case 1:
@@ -27,7 +33,26 @@ const EditableField = ({
   }
 
   return (
-    <textarea
+    (content === 'selected' || content === 'unselected')? 
+    <Select
+      sx={{
+        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+          borderColor: highlightColor,
+          borderWidth: '1px',
+        }
+      }}
+      className={`${styles.dropdown} ${flagStyle}`}
+      ref={(ref) => (textAreaRefs.current[polygonKey] = ref)}
+      onFocus={()=>{handleFocus(polygonKey);}}  
+      onBlur={handleBlur} 
+      value={content}
+      onChange={(e) => handleUpdatePolygon(polygonKey, e.target.value)}
+    >
+      <MenuItem value={'unselected'}>unselected</MenuItem>
+      <MenuItem value={'selected'}>selected</MenuItem>
+    </Select>
+
+    :<textarea
       onFocus={()=>{handleFocus(polygonKey);}}  
       onBlur={handleBlur} 
       ref={(ref) => (textAreaRefs.current[polygonKey] = ref)}

src/app/components/EditableField.module.css

@@ -20,9 +20,14 @@
 }
 
 .flagged {
-  color: red;
+  color: red !important;
 }
 
 .edited {
-  color: green;
+  color: green !important;
+}
+
+.dropdown {
+  width: 100%;
+  height: 28px !important;
 }

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
           )

src/app/components/Polygon.js

@@ -38,7 +38,7 @@ const Polygon = ({
       return polygon.map((row, rowIndex) =>
         Object.entries(row).map(([nestedKey, nestedValue]) => 
           renderPolygon(
-            `${polygonKey} Row ${rowIndex+1} - ${nestedKey}`,
+            `${polygonKey} Row ${rowIndex+1} -- ${nestedKey}`,
             nestedValue,
             textAreaRefs
           )
@@ -74,6 +74,7 @@ const Polygon = ({
               polygonKey={polygonKey}
               content={content}
               flag={flag}
+              highlightColor={highlightColor}
               textAreaRefs={textAreaRefs}
               handleUpdatePolygon={handleUpdatePolygon}
               editedPolygons={editedPolygons}

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  
     }
   };
 

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),   

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
           )
         )

src/app/files/PolygonList.js

@@ -90,6 +90,8 @@ const PolygonList = ({
   }, [json]);
 
   const handleUpdatePolygon = (polygonKey, newValue) => {
+    console.log("PolygonKey: "+polygonKey)
+    console.log("New Value: "+newValue)
     setEditedPolygons((prev) => new Set(prev).add(polygonKey));
 
     const updatePolygon = (data, targetKeys) => {
@@ -137,8 +139,10 @@ const PolygonList = ({
       return updatedData;
     };
 
-    const keyList = polygonKey.split(" - ");
+    const keyList = polygonKey.split(" -- ");
+    console.log(keyList);
     const updatedData = updatePolygon(json, keyList);
+    console.log(updatedData);
 
     changeHandler(updatedData);
   };

src/app/files/page.module.css

@@ -158,7 +158,8 @@
   max-width: 480px;
   height: 100%;  
   background-color: #fbf8f8;  
-  padding: 20px;   
+  padding: 20px;  
+  overflow-y: auto; 
   transform: translateX(100%);  
   transition: transform 0.3s ease;   
 }  

src/app/viewJson/ViewJson.module.css

@@ -1,6 +1,6 @@
 .textarea {
   max-width: 70vw;
-  margin-bottom: 100px;
+  margin-bottom: 25px;
 }
 
 .buttonWrap{

src/app/viewJson/page.module.css

@@ -4,7 +4,6 @@
 
     align-items: center;
     position: relative;
-
   }
 .note{
     margin-top: 10px;