PSE2_FF
/
pse2_ff
0
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Add PDF text highlighting to PDF viewer

pull/68/head
Jaronim Pracht 2025-06-14 16:48:20 +02:00
parent 082317318a
commit b88eb0f4ce
6 changed files with 225 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project/frontend/src/components/KennzahlenTable.tsx
View File

@ -22,7 +22,7 @@ import type { KeyboardEvent } from "react";
import { fetchPutKPI } from "../util/api"; import { fetchPutKPI } from "../util/api";
interface KennzahlenTableProps { interface KennzahlenTableProps {
onPageClick?: (page: number) => void; onPageClick?: (page: number, text: string) => void;
pdfId: string; pdfId: string;
settings: Kennzahl[]; settings: Kennzahl[];
data: { data: {
@ -286,7 +286,10 @@ export default function KennzahlenTable({
<Link <Link
component="button" component="button"
onClick={() => onClick={() =>
onPageClick?.(Number(row.extractedValues.at(0)?.page)) onPageClick?.(
Number(row.extractedValues.at(0)?.page),
row.extractedValues.at(0)?.entity,
)
} }
sx={{ cursor: "pointer" }} sx={{ cursor: "pointer" }}
> >

103
project/frontend/src/components/pdfViewer.tsx
View File

@ -1,28 +1,42 @@
import { useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { Document, Page } from "react-pdf"; import { Document, Page } from "react-pdf";
import "react-pdf/dist/esm/Page/AnnotationLayer.css"; import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css"; import "react-pdf/dist/esm/Page/TextLayer.css";
import ArrowCircleLeftIcon from "@mui/icons-material/ArrowCircleLeft"; import ArrowCircleLeftIcon from "@mui/icons-material/ArrowCircleLeft";
import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight"; import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight";
import { Box, IconButton } from "@mui/material"; import { Box, IconButton } from "@mui/material";
import type {
CustomTextRenderer,
OnGetTextSuccess,
} from "node_modules/react-pdf/dist/esm/shared/types";
import { socket } from "../socket"; import { socket } from "../socket";
import { highlightPattern } from "../util/highlighting";
interface PDFViewerProps { interface PDFViewerProps {
pitchBookId: string; pitchBookId: string;
currentPage?: number; currentPage?: number;
onPageChange?: (page: number) => void; onPageChange?: (page: number) => void;
highlight: { text: string; page: number }[];
focusHighlight: { text: string; page: number };
} }
export default function PDFViewer({ export default function PDFViewer({
pitchBookId, pitchBookId,
currentPage, currentPage,
onPageChange, onPageChange,
highlight = [],
focusHighlight,
}: PDFViewerProps) { }: PDFViewerProps) {
const [numPages, setNumPages] = useState<number | null>(null); const [numPages, setNumPages] = useState<number | null>(null);
const [pageNumber, setPageNumber] = useState(currentPage || 1); const [pageNumber, setPageNumber] = useState(currentPage || 1);
const [containerWidth, setContainerWidth] = useState<number | null>(null); const [containerWidth, setContainerWidth] = useState<number | null>(null);
const [pdfKey, setPdfKey] = useState(Date.now()); const [pdfKey, setPdfKey] = useState(Date.now());
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [posHighlight, setPosHighlight] = useState<string[]>([]);
const [posHighlightFocus, setPosHighlightFocus] = useState<string[]>([]);
const [textContent, setTextContent] = useState<
{ posKey: string; text: string; i: number }[]
>([]);
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
setNumPages(numPages); setNumPages(numPages);
@ -44,7 +58,7 @@ export default function PDFViewer({
if (currentPage && currentPage !== pageNumber) { if (currentPage && currentPage !== pageNumber) {
setPageNumber(currentPage); setPageNumber(currentPage);
} }
}, [currentPage]); }, [currentPage, pageNumber]);
useEffect(() => { useEffect(() => {
const handleProgress = (data: { id: number; progress: number }) => { const handleProgress = (data: { id: number; progress: number }) => {
@ -65,6 +79,78 @@ export default function PDFViewer({
onPageChange?.(newPage); onPageChange?.(newPage);
}; };
const textRenderer: CustomTextRenderer = useCallback(
(textItem) => {
return highlightPattern(
textItem.str,
`${textItem.width};${textItem.height};${textItem.transform}`,
posHighlight,
posHighlightFocus,
);
},
[posHighlight, posHighlightFocus],
);
useEffect(() => {
const tmpPos: string[] = [];
const tmpPosHighlight: string[] = [];
const textItems = textContent.filter(
(e) => e.text !== "" && e.text !== " ",
);
textItems.forEach((e, i) => {
for (const s of highlight
.filter((h) => h.page === pageNumber)
.map((h) => h.text)) {
if (s.split(" ")[0] === e.text) {
if (
s.split(" ").reduce((prev, curr, j) => {
return prev && curr === textItems[i + j].text;
}, true)
) {
for (
let k = textItems[i].i;
k < textItems[i + s.split(" ").length].i;
k++
) {
tmpPos.push(textContent[k].posKey);
}
}
}
}
if (focusHighlight?.page === pageNumber) {
if (focusHighlight.text.split(" ")[0] === e.text) {
if (
focusHighlight.text.split(" ").reduce((prev, curr, j) => {
return prev && curr === textItems[i + j].text;
}, true)
) {
for (
let k = textItems[i].i;
k < textItems[i + focusHighlight.text.split(" ").length].i;
k++
) {
tmpPosHighlight.push(textContent[k].posKey);
}
}
}
}
});
setPosHighlight(tmpPos);
setPosHighlightFocus(tmpPosHighlight);
}, [highlight, focusHighlight, pageNumber, textContent]);
const onGetTextSuccess: OnGetTextSuccess = useCallback((fullText) => {
setTextContent(
fullText.items.map((e, i) => ({
posKey: `${"width" in e ? e.width : 0};${"height" in e ? e.height : 0};${"transform" in e ? e.transform : ""}`,
text: "str" in e ? e.str : "",
i,
})),
);
}, []);
return ( return (
<Box <Box
display="flex" display="flex"
@ -94,7 +180,12 @@ export default function PDFViewer({
onSourceError={(error) => console.error("Ungültige PDF:", error)} onSourceError={(error) => console.error("Ungültige PDF:", error)}
> >
{containerWidth && ( {containerWidth && (
<Page pageNumber={pageNumber} width={containerWidth * 0.98} /> <Page
pageNumber={pageNumber}
width={containerWidth * 0.98}
customTextRenderer={textRenderer}
onGetTextSuccess={onGetTextSuccess}
/>
)} )}
</Document> </Document>
</Box> </Box>
@ -113,8 +204,8 @@ export default function PDFViewer({
<ArrowCircleLeftIcon fontSize="large" /> <ArrowCircleLeftIcon fontSize="large" />
</IconButton> </IconButton>
<span> <span>
{pageNumber} / {numPages} {pageNumber} / {numPages}
</span> </span>
<IconButton <IconButton
disabled={pageNumber >= (numPages || 1)} disabled={pageNumber >= (numPages || 1)}
onClick={() => handlePageChange(pageNumber + 1)} onClick={() => handlePageChange(pageNumber + 1)}
@ -124,4 +215,4 @@ export default function PDFViewer({
</Box> </Box>
</Box> </Box>
); );
} }

2
project/frontend/src/main.tsx
View File

@ -3,6 +3,7 @@ import { ThemeProvider, createTheme } from "@mui/material/styles";
import { RouterProvider, createRouter } from "@tanstack/react-router"; import { RouterProvider, createRouter } from "@tanstack/react-router";
import { StrictMode } from "react"; import { StrictMode } from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import "react-pdf/dist/Page/TextLayer.css";
import "@fontsource/roboto/300.css"; import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css"; import "@fontsource/roboto/400.css";
@ -12,6 +13,7 @@ import "@fontsource/roboto/700.css";
import * as TanStackQueryProvider from "./integrations/tanstack-query/root-provider.tsx"; import * as TanStackQueryProvider from "./integrations/tanstack-query/root-provider.tsx";
import { pdfjs } from "react-pdf"; import { pdfjs } from "react-pdf";
// Import the generated route tree // Import the generated route tree
import { routeTree } from "./routeTree.gen"; import { routeTree } from "./routeTree.gen";

20
project/frontend/src/routes/extractedResult.$pitchBook.tsx
View File

@ -2,7 +2,7 @@ import ContentPasteIcon from "@mui/icons-material/ContentPaste";
import { Box, Button, Paper, Typography } from "@mui/material"; import { Box, Button, Paper, Typography } from "@mui/material";
import { useSuspenseQuery } from "@tanstack/react-query"; import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react"; import { useCallback, useState } from "react";
import KennzahlenTable from "../components/KennzahlenTable"; import KennzahlenTable from "../components/KennzahlenTable";
import PDFViewer from "../components/pdfViewer"; import PDFViewer from "../components/pdfViewer";
import { kpiQueryOptions, settingsQueryOptions } from "../util/query"; import { kpiQueryOptions, settingsQueryOptions } from "../util/query";
@ -21,6 +21,15 @@ function ExtractedResultsPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const status: "green" | "yellow" | "red" = "red"; const status: "green" | "yellow" | "red" = "red";
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [focusHighlight, setFocusHighlight] = useState({
page: 5,
text: "Langjährige",
});
const onSiteClick = useCallback((page: number, entity: string) => {
setCurrentPage(page);
setFocusHighlight({ page, text: entity });
}, []);
const statusColor = { const statusColor = {
red: "#f43131", red: "#f43131",
@ -72,7 +81,7 @@ function ExtractedResultsPage() {
> >
<KennzahlenTable <KennzahlenTable
settings={settings} settings={settings}
onPageClick={setCurrentPage} onPageClick={onSiteClick}
data={kpi} data={kpi}
pdfId={pitchBook} pdfId={pitchBook}
/> />
@ -105,6 +114,13 @@ function ExtractedResultsPage() {
pitchBookId={pitchBook} pitchBookId={pitchBook}
currentPage={currentPage} currentPage={currentPage}
onPageChange={setCurrentPage} onPageChange={setCurrentPage}
highlight={Object.values(kpi)
.map((item) => item.at(0))
.map((item) => ({
page: item?.page || -1,
text: item?.entity || "",
}))}
focusHighlight={focusHighlight}
/> />
</Paper> </Paper>
<Box <Box

165
project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx
View File

@ -1,6 +1,10 @@
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { import {
Box, Box,
Button, Dialog, DialogActions, DialogContent, Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText, DialogContentText,
DialogTitle, DialogTitle,
IconButton, IconButton,
@ -14,15 +18,18 @@ import {
TableHead, TableHead,
TableRow, TableRow,
TextField, TextField,
Typography Typography,
} from "@mui/material"; } from "@mui/material";
import {useMutation, useQueryClient, useSuspenseQuery} from "@tanstack/react-query"; import {
useMutation,
useQueryClient,
useSuspenseQuery,
} from "@tanstack/react-query";
import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { createFileRoute, useNavigate } from "@tanstack/react-router";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import PDFViewer from "../components/pdfViewer"; import PDFViewer from "../components/pdfViewer";
import { fetchPutKPI } from "../util/api";
import { kpiQueryOptions } from "../util/query"; import { kpiQueryOptions } from "../util/query";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import {fetchPutKPI} from "../util/api";
export const Route = createFileRoute("/extractedResult_/$pitchBook/$kpi")({ export const Route = createFileRoute("/extractedResult_/$pitchBook/$kpi")({
component: ExtractedResultsPage, component: ExtractedResultsPage,
@ -36,18 +43,17 @@ function ExtractedResultsPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { const { data: kpiData } = useSuspenseQuery(kpiQueryOptions(pitchBook));
data: kpiData
} = useSuspenseQuery(kpiQueryOptions(pitchBook));
const kpiValues = kpiData[kpi.toUpperCase()] || []; const kpiValues = kpiData[kpi.toUpperCase()] || [];
const [selectedIndex, setSelectedIndex] = useState(0); const [selectedIndex, setSelectedIndex] = useState(0);
const [currentPage, setCurrentPage] = useState(kpiValues[0]?.page || 1); const [currentPage, setCurrentPage] = useState(kpiValues[0]?.page || 1);
const [showConfirmDialog, setShowConfirmDialog] = useState(false); const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const [hasChanges, setHasChanges] = useState(false); const [hasChanges, setHasChanges] = useState(false);
const [customValue, setCustomValue] = useState(''); const [customValue, setCustomValue] = useState("");
const originalValue = kpiValues[0]?.entity || ''; const originalValue = kpiValues[0]?.entity || "";
const selectedValue = selectedIndex === -1 ? customValue : (kpiValues[selectedIndex]?.entity || ''); const selectedValue =
selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || "";
useEffect(() => { useEffect(() => {
setHasChanges(selectedValue !== originalValue); setHasChanges(selectedValue !== originalValue);
@ -56,10 +62,12 @@ function ExtractedResultsPage() {
const { mutate: updateKPI } = useMutation({ const { mutate: updateKPI } = useMutation({
mutationFn: () => { mutationFn: () => {
const updatedData = { ...kpiData }; const updatedData = { ...kpiData };
updatedData[kpi.toUpperCase()] = [{ updatedData[kpi.toUpperCase()] = [
...kpiValues[0], {
entity: selectedValue ...kpiValues[0],
}]; entity: selectedValue,
},
];
return fetchPutKPI(Number(pitchBook), updatedData); return fetchPutKPI(Number(pitchBook), updatedData);
}, },
onSuccess: () => { onSuccess: () => {
@ -68,26 +76,28 @@ function ExtractedResultsPage() {
}); });
navigate({ navigate({
to: "/extractedResult/$pitchBook", to: "/extractedResult/$pitchBook",
params: { pitchBook } params: { pitchBook },
}); });
}, },
onError: (error) => { onError: (error) => {
console.error('Error updating KPI:', error); console.error("Error updating KPI:", error);
} },
}); });
const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value; const value = event.target.value;
if (value === 'custom') { if (value === "custom") {
setSelectedIndex(-1); setSelectedIndex(-1);
} else { } else {
const index = parseInt(value); const index = Number.parseInt(value);
setSelectedIndex(index); setSelectedIndex(index);
setCustomValue(''); setCustomValue("");
} }
}; };
const handleCustomValueChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleCustomValueChange = (
event: React.ChangeEvent<HTMLInputElement>,
) => {
const value = event.target.value; const value = event.target.value;
setCustomValue(value); setCustomValue(value);
setSelectedIndex(-1); setSelectedIndex(-1);
@ -95,7 +105,7 @@ function ExtractedResultsPage() {
const handleRowClick = (index: number) => { const handleRowClick = (index: number) => {
setSelectedIndex(index); setSelectedIndex(index);
setCustomValue(''); setCustomValue("");
}; };
const handleBackClick = () => { const handleBackClick = () => {
@ -104,7 +114,7 @@ function ExtractedResultsPage() {
} else { } else {
navigate({ navigate({
to: "/extractedResult/$pitchBook", to: "/extractedResult/$pitchBook",
params: { pitchBook } params: { pitchBook },
}); });
} }
}; };
@ -113,7 +123,7 @@ function ExtractedResultsPage() {
setShowConfirmDialog(false); setShowConfirmDialog(false);
navigate({ navigate({
to: "/extractedResult/$pitchBook", to: "/extractedResult/$pitchBook",
params: { pitchBook } params: { pitchBook },
}); });
}; };
@ -127,9 +137,9 @@ function ExtractedResultsPage() {
return ( return (
<Box p={4}> <Box p={4}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}> <Box sx={{ display: "flex", alignItems: "center", mb: 3 }}>
<IconButton onClick={handleBackClick} sx={{ mr: 2 }}> <IconButton onClick={handleBackClick} sx={{ mr: 2 }}>
<ArrowBackIcon fontSize="large" sx={{ color: '#383838' }} /> <ArrowBackIcon fontSize="large" sx={{ color: "#383838" }} />
</IconButton> </IconButton>
<Typography variant="h5" fontWeight="bold"> <Typography variant="h5" fontWeight="bold">
Überprüfung der Kennzahl: {kpi} Überprüfung der Kennzahl: {kpi}
@ -175,8 +185,8 @@ function ExtractedResultsPage() {
<TableRow <TableRow
key={`${item.entity}_${item.page}_${index}`} key={`${item.entity}_${item.page}_${index}`}
sx={{ sx={{
'&:hover': { backgroundColor: '#f9f9f9' }, "&:hover": { backgroundColor: "#f9f9f9" },
cursor: 'pointer' cursor: "pointer",
}} }}
onClick={() => handleRowClick(index)} onClick={() => handleRowClick(index)}
> >
@ -184,14 +194,14 @@ function ExtractedResultsPage() {
<Box <Box
sx={{ sx={{
borderRadius: 1, borderRadius: 1,
padding: '4px 8px', padding: "4px 8px",
display: 'flex', display: "flex",
alignItems: 'center', alignItems: "center",
width: '100%', width: "100%",
cursor: 'pointer', cursor: "pointer",
'&:hover': { "&:hover": {
borderColor: '#ccc' borderColor: "#ccc",
} },
}} }}
> >
<Radio <Radio
@ -199,13 +209,13 @@ function ExtractedResultsPage() {
checked={selectedIndex === index} checked={selectedIndex === index}
onChange={handleRadioChange} onChange={handleRadioChange}
sx={{ sx={{
color: '#383838', color: "#383838",
'&.Mui-checked': { color: '#383838' }, "&.Mui-checked": { color: "#383838" },
padding: '4px', padding: "4px",
marginRight: 1, marginRight: 1,
'&:focus': { "&:focus": {
outline: 'none' outline: "none",
} },
}} }}
/> />
<span>{item.entity}</span> <span>{item.entity}</span>
@ -218,7 +228,7 @@ function ExtractedResultsPage() {
e.stopPropagation(); e.stopPropagation();
setCurrentPage(item.page); setCurrentPage(item.page);
}} }}
sx={{ cursor: 'pointer' }} sx={{ cursor: "pointer" }}
> >
{item.page} {item.page}
</Link> </Link>
@ -230,14 +240,14 @@ function ExtractedResultsPage() {
<TableCell> <TableCell>
<Box <Box
sx={{ sx={{
padding: '4px 8px', padding: "4px 8px",
display: 'flex', display: "flex",
alignItems: 'center', alignItems: "center",
width: '100%', width: "100%",
cursor: 'pointer', cursor: "pointer",
'&:hover': { "&:hover": {
borderColor: '#ccc' borderColor: "#ccc",
} },
}} }}
onClick={() => { onClick={() => {
setSelectedIndex(-1); setSelectedIndex(-1);
@ -245,16 +255,16 @@ function ExtractedResultsPage() {
> >
<Radio <Radio
value="custom" value="custom"
checked={selectedIndex === -1 && customValue !== ''} checked={selectedIndex === -1 && customValue !== ""}
onChange={handleRadioChange} onChange={handleRadioChange}
sx={{ sx={{
color: '#383838', color: "#383838",
'&.Mui-checked': { color: '#383838' }, "&.Mui-checked": { color: "#383838" },
padding: '4px', padding: "4px",
marginRight: 1, marginRight: 1,
'&:focus': { "&:focus": {
outline: 'none' outline: "none",
} },
}} }}
/> />
<TextField <TextField
@ -267,9 +277,9 @@ function ExtractedResultsPage() {
disableUnderline: true, disableUnderline: true,
}} }}
sx={{ sx={{
'& .MuiInput-input': { "& .MuiInput-input": {
padding: 0, padding: 0,
} },
}} }}
onClick={(e: React.MouseEvent) => { onClick={(e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
@ -300,13 +310,20 @@ function ExtractedResultsPage() {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
overflow: "auto", overflow: "auto",
padding: 2 padding: 2,
}} }}
> >
<PDFViewer <PDFViewer
pitchBookId={pitchBook} pitchBookId={pitchBook}
currentPage={currentPage} currentPage={currentPage}
onPageChange={setCurrentPage} onPageChange={setCurrentPage}
highlight={Object.values(kpiValues)
.flat()
.map((k) => ({ page: k.page, text: k.entity }))}
focusHighlight={{
page: kpiValues.at(selectedIndex)?.page || -1,
text: kpiValues.at(selectedIndex)?.entity || "",
}}
/> />
</Paper> </Paper>
<Box mt={2} display="flex" justifyContent="flex-end" gap={2}> <Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
@ -315,9 +332,9 @@ function ExtractedResultsPage() {
onClick={handleAcceptReview} onClick={handleAcceptReview}
disabled={!selectedValue} disabled={!selectedValue}
sx={{ sx={{
backgroundColor: '#383838', backgroundColor: "#383838",
'&:hover': { backgroundColor: '#2e2e2e' }, "&:hover": { backgroundColor: "#2e2e2e" },
'&.Mui-disabled': { backgroundColor: '#ccc' } "&.Mui-disabled": { backgroundColor: "#ccc" },
}} }}
> >
Überprüfung Annehmen Überprüfung Annehmen
@ -332,11 +349,11 @@ function ExtractedResultsPage() {
maxWidth="sm" maxWidth="sm"
fullWidth fullWidth
> >
<DialogTitle sx={{ fontSize: '1.25rem', fontWeight: 'bold' }}> <DialogTitle sx={{ fontSize: "1.25rem", fontWeight: "bold" }}>
Achtung Achtung
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText sx={{ fontSize: '1rem' }}> <DialogContentText sx={{ fontSize: "1rem" }}>
Alle vorgenommenen Änderungen werden verworfen. Alle vorgenommenen Änderungen werden verworfen.
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
@ -345,9 +362,9 @@ function ExtractedResultsPage() {
onClick={handleCancelDiscard} onClick={handleCancelDiscard}
variant="outlined" variant="outlined"
sx={{ sx={{
color: '#666', color: "#666",
borderColor: '#ddd', borderColor: "#ddd",
'&:hover': { backgroundColor: '#f5f5f5' } "&:hover": { backgroundColor: "#f5f5f5" },
}} }}
> >
Abbrechen Abbrechen
@ -356,8 +373,8 @@ function ExtractedResultsPage() {
onClick={handleConfirmDiscard} onClick={handleConfirmDiscard}
variant="contained" variant="contained"
sx={{ sx={{
backgroundColor: '#383838', backgroundColor: "#383838",
'&:hover': { backgroundColor: '#2e2e2e' } "&:hover": { backgroundColor: "#2e2e2e" },
}} }}
> >
Bestätigen Bestätigen
@ -366,4 +383,4 @@ function ExtractedResultsPage() {
</Dialog> </Dialog>
</Box> </Box>
); );
} }

12
project/frontend/src/util/highlighting.ts 100644
View File

@ -0,0 +1,12 @@
export const highlightPattern = (
text: string,
widthHeight: string,
pos: string[],
posFocus: string[],
) => {
if (posFocus.includes(widthHeight)) {
return `<mark style="background-color: orange;">${text}</mark>`;
}
return pos.includes(widthHeight) ? `<mark>${text}</mark>` : text;
};