added button for deleting all ocr data

Author: twerkmeister

src/components/AnnotatorMenu.tsx

@@ -17,10 +17,12 @@ import DeleteObjectButton from "./MenuComponents/DeleteObjectButton";
 import ShowHelpRasterizationButton from "./MenuComponents/ShowHelpRasterizationButton";
 import PositionDisplay from "./MenuComponents/PositionDisplay";
 import ApplyPreAnnotatedDataButton from "./MenuComponents/ApplyPreAnnotatedDataButton";
+import DeleteOCRDataButton from "./MenuComponents/DeleteOCRDataButton";
 
 
 const AnnotatorMenu = () => {
     const isInSync = useStore(state => state.isInSync)
+    const ocrView = useStore(state => state.ocrView)
 
     return (<Box sx={{display: "flex", width: "100%", position: "fixed", "top": 0, "left": 0,
     zIndex: 99, background: "lightgrey"}}>
@@ -37,7 +39,7 @@ const AnnotatorMenu = () => {
         <SegmentTableButton/>
         <SetOCRViewButton/>
         <ApplyPreAnnotatedDataButton/>
-        <DeleteObjectButton/>
+        {ocrView ? <DeleteOCRDataButton/> : <DeleteObjectButton/>}
         {<SyncIndicator style={{background: isInSync ? "forestgreen" : "yellow"}}>💾</SyncIndicator>}
     </Box>)
 }

src/components/MenuComponents/DeleteOCRDataButton.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Button from '@mui/material/Button';
+import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
+import {Tooltip} from "@mui/material";
+import {useStore} from "../../store";
+
+const DeleteOCRDataButton = () => {
+    const tables = useStore(state => state.tables)
+    const ocrView = useStore(state => state.ocrView)
+    const updateCellText = useStore(state => state.updateCellText)
+    const selectedTable = useStore(state => state.selectedTable)
+    const [open, setOpen] = React.useState(false);
+
+    const handleDeleteStart = () => {
+        setOpen(true);
+    };
+
+    const handleDeleteStop = () => {
+        setOpen(false);
+    };
+
+    const disabled = selectedTable === undefined || tables[selectedTable] === undefined || !ocrView
+    const handleDelete = () => {
+        if (disabled || selectedTable === undefined) return
+        const table = tables[selectedTable]
+        if (table === undefined) return
+        table.cells.forEach((row, i) => {
+            row.forEach((cell, j) => {
+                updateCellText(i, j, "")
+            })
+        })
+        setOpen(false);
+    }
+
+    return <div>
+        <Tooltip title="alle Texte löschen">
+        <span>
+            <Button disabled={disabled} variant="contained" onClick={handleDeleteStart}><DeleteSweepIcon/></Button>
+        </span>
+        </Tooltip>
+        <Dialog
+            open={open}
+            onClose={handleDeleteStop}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">
+                {"Alle Textdaten löschen?"}
+            </DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    Möchtest Du alle Textdaten in dieser Tabelle löschen?
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleDeleteStop}>Nein</Button>
+                <Button onClick={handleDelete}>
+                    Ja 🗑️
+                </Button>
+            </DialogActions>
+        </Dialog>
+    </div>
+}
+
+export default DeleteOCRDataButton
+
+

src/components/SplitTable.tsx

@@ -99,7 +99,7 @@ const SplitTable = ({imageName}: SplitTableProps) => {
                                                               height: `${Math.round(Math.max(height(cellRectangle)*1.3-4, 20))}px`}}
                                                           onBlur={handleInputOnBlur(i, j)}
                                                           // little hack to update default cell text when ocr text changes
-                                                          key={`${i}_${j}_cell_text_${cell.ocr_text}`}
+                                                          key={`${i}_${j}_cell_text_${cell.ocr_text}_${cell.human_text}`}
                                                 />
                                             </div>
                                         </div>

src/store.ts

@@ -132,6 +132,7 @@ export type AnnotatorState = {
     setVirtualValueType: (valueIndex: number, label?: string) => void
     deleteVirtualValue: (valueIdnex: number) => void
     setVirtualValue: (valueIndex: number, value: string) => void
+
 }
 
 export const useStore = create<AnnotatorState>((set, get) => ({