diff --git a/config/graphql/graphene_types.py b/config/graphql/graphene_types.py index ed2cd496..c17e26a4 100644 --- a/config/graphql/graphene_types.py +++ b/config/graphql/graphene_types.py @@ -456,6 +456,7 @@ def resolve_full_column_list(self, info): class DatacellType(AnnotatePermissionsForReadMixin, DjangoObjectType): data = GenericScalar() + corrected_data = GenericScalar() full_source_list = graphene.List(AnnotationType) def resolve_full_source_list(self, info): diff --git a/frontend/src/components/extracts/datagrid/ExtractCellFormatter.tsx b/frontend/src/components/extracts/datagrid/ExtractCellFormatter.tsx index db5d269c..78f5deb8 100644 --- a/frontend/src/components/extracts/datagrid/ExtractCellFormatter.tsx +++ b/frontend/src/components/extracts/datagrid/ExtractCellFormatter.tsx @@ -136,6 +136,12 @@ interface ExtractCellFormatterProps { column: any; } +/** + * ExtractCellFormatter component displays the content of a cell in the extract data grid. + * It handles displaying the value, editing, approving, and rejecting the cell. + * If the cell has correctedData, it displays that instead of the original data. + * It also provides a control to view the original value when correctedData is present. + */ export const ExtractCellFormatter: React.FC = ({ value, cellStatus, @@ -162,6 +168,7 @@ export const ExtractCellFormatter: React.FC = ({ const [isPopupOpen, setIsPopupOpen] = useState(false); const [isEditing, setIsEditing] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); + const [isOriginalModalOpen, setIsOriginalModalOpen] = useState(false); // New state for original value modal const getCellBackground = () => { if (!cellStatus) return "transparent"; @@ -178,6 +185,14 @@ export const ExtractCellFormatter: React.FC = ({ setIsModalOpen(false); }; + const openOriginalViewer = () => { + setIsOriginalModalOpen(true); + }; + + const closeOriginalModal = () => { + setIsOriginalModalOpen(false); + }; + const handleJsonEdit = (edit: any) => { const updatedValue = edit.updated_src; onEdit(cellId, updatedValue); @@ -190,8 +205,11 @@ export const ExtractCellFormatter: React.FC = ({ return "rgba(128, 128, 128, 1)"; }; + const displayedValue = + cellStatus?.correctedData != null ? cellStatus.correctedData : value; + const displayValue = () => { - if (typeof value === "object" && value !== null) { + if (typeof displayedValue === "object" && displayedValue !== null) { return (
= ({
); } else { - return
{String(value)}
; + return
{String(displayedValue)}
; } }; @@ -245,7 +263,10 @@ export const ExtractCellFormatter: React.FC = ({ color="grey" size="tiny" onClick={() => { - if (typeof value === "object" && value !== null) { + if ( + typeof displayedValue === "object" && + displayedValue !== null + ) { openViewer(); } else { setIsEditing(true); @@ -255,6 +276,17 @@ export const ExtractCellFormatter: React.FC = ({ disabled={readOnly || !isExtractComplete} title="Edit" /> + + + Original Value + + {typeof value === "object" && value !== null ? ( + + ) : ( +
{String(value)}
+ )} +
+ + + +
)}