Compare commits

..

No commits in common. "83e2514bfbf1d4c2ecf3ff7d6f53a4c943732a63" and "41a37b3d7d0793ab511d52e6375d019007776716" have entirely different histories.

6 changed files with 84 additions and 225 deletions

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, text: string) => void; onPageClick?: (page: number) => void;
pdfId: string; pdfId: string;
settings: Kennzahl[]; settings: Kennzahl[];
data: { data: {
@ -286,10 +286,7 @@ export default function KennzahlenTable({
<Link <Link
component="button" component="button"
onClick={() => onClick={() =>
onPageClick?.( onPageClick?.(Number(row.extractedValues.at(0)?.page))
Number(row.extractedValues.at(0)?.page),
row.extractedValues.at(0)?.entity || "",
)
} }
sx={{ cursor: "pointer" }} sx={{ cursor: "pointer" }}
> >

View File

@ -1,42 +1,28 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { 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);
@ -58,7 +44,7 @@ export default function PDFViewer({
if (currentPage && currentPage !== pageNumber) { if (currentPage && currentPage !== pageNumber) {
setPageNumber(currentPage); setPageNumber(currentPage);
} }
}, [currentPage, pageNumber]); }, [currentPage]);
useEffect(() => { useEffect(() => {
const handleProgress = (data: { id: number; progress: number }) => { const handleProgress = (data: { id: number; progress: number }) => {
@ -79,78 +65,6 @@ 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"
@ -180,12 +94,7 @@ export default function PDFViewer({
onSourceError={(error) => console.error("Ungültige PDF:", error)} onSourceError={(error) => console.error("Ungültige PDF:", error)}
> >
{containerWidth && ( {containerWidth && (
<Page <Page pageNumber={pageNumber} width={containerWidth * 0.98} />
pageNumber={pageNumber}
width={containerWidth * 0.98}
customTextRenderer={textRenderer}
onGetTextSuccess={onGetTextSuccess}
/>
)} )}
</Document> </Document>
</Box> </Box>

View File

@ -3,7 +3,6 @@ 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";
@ -13,7 +12,6 @@ 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";

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 { useCallback, useState } from "react"; import { 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,15 +21,6 @@ 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",
@ -81,7 +72,7 @@ function ExtractedResultsPage() {
> >
<KennzahlenTable <KennzahlenTable
settings={settings} settings={settings}
onPageClick={onSiteClick} onPageClick={setCurrentPage}
data={kpi} data={kpi}
pdfId={pitchBook} pdfId={pitchBook}
/> />
@ -114,13 +105,6 @@ 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

View File

@ -1,10 +1,6 @@
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { import {
Box, Box,
Button, Button, Dialog, DialogActions, DialogContent,
Dialog,
DialogActions,
DialogContent,
DialogContentText, DialogContentText,
DialogTitle, DialogTitle,
IconButton, IconButton,
@ -18,18 +14,15 @@ import {
TableHead, TableHead,
TableRow, TableRow,
TextField, TextField,
Typography, Typography
} from "@mui/material"; } from "@mui/material";
import { import {useMutation, useQueryClient, useSuspenseQuery} from "@tanstack/react-query";
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,
@ -43,17 +36,18 @@ function ExtractedResultsPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { data: kpiData } = useSuspenseQuery(kpiQueryOptions(pitchBook)); const {
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 = const selectedValue = selectedIndex === -1 ? customValue : (kpiValues[selectedIndex]?.entity || '');
selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || "";
useEffect(() => { useEffect(() => {
setHasChanges(selectedValue !== originalValue); setHasChanges(selectedValue !== originalValue);
@ -62,12 +56,10 @@ 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], ...kpiValues[0],
entity: selectedValue, entity: selectedValue
}, }];
];
return fetchPutKPI(Number(pitchBook), updatedData); return fetchPutKPI(Number(pitchBook), updatedData);
}, },
onSuccess: () => { onSuccess: () => {
@ -76,28 +68,26 @@ 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 = Number.parseInt(value); const index = parseInt(value);
setSelectedIndex(index); setSelectedIndex(index);
setCustomValue(""); setCustomValue('');
} }
}; };
const handleCustomValueChange = ( const handleCustomValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
event: React.ChangeEvent<HTMLInputElement>,
) => {
const value = event.target.value; const value = event.target.value;
setCustomValue(value); setCustomValue(value);
setSelectedIndex(-1); setSelectedIndex(-1);
@ -105,7 +95,7 @@ function ExtractedResultsPage() {
const handleRowClick = (index: number) => { const handleRowClick = (index: number) => {
setSelectedIndex(index); setSelectedIndex(index);
setCustomValue(""); setCustomValue('');
}; };
const handleBackClick = () => { const handleBackClick = () => {
@ -114,7 +104,7 @@ function ExtractedResultsPage() {
} else { } else {
navigate({ navigate({
to: "/extractedResult/$pitchBook", to: "/extractedResult/$pitchBook",
params: { pitchBook }, params: { pitchBook }
}); });
} }
}; };
@ -123,7 +113,7 @@ function ExtractedResultsPage() {
setShowConfirmDialog(false); setShowConfirmDialog(false);
navigate({ navigate({
to: "/extractedResult/$pitchBook", to: "/extractedResult/$pitchBook",
params: { pitchBook }, params: { pitchBook }
}); });
}; };
@ -137,9 +127,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}
@ -185,8 +175,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)}
> >
@ -194,14 +184,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
@ -209,13 +199,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>
@ -228,7 +218,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>
@ -240,14 +230,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);
@ -255,16 +245,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
@ -277,9 +267,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();
@ -310,20 +300,13 @@ 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}>
@ -332,9 +315,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
@ -349,11 +332,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>
@ -362,9 +345,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
@ -373,8 +356,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

View File

@ -1,12 +0,0 @@
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;
};