File size: 2,188 Bytes
03cc8ff
 
dceb63f
 
 
 
 
 
c9986d8
dceb63f
 
03cc8ff
dceb63f
 
 
03cc8ff
dceb63f
 
 
03cc8ff
c9986d8
dceb63f
c9986d8
 
 
 
03cc8ff
 
 
dceb63f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
03cc8ff
dceb63f
03cc8ff
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
"use client";

export default function ProgressBar({
    documents,
    selectedDocIndex,
    currentDoc,
    pageIdx,
    currentPageDatasets,
    annotatorName,
}) {
    if (!documents || documents.length === 0) return null;

    // 1. PDF progress: which doc out of total
    const docPosition = documents.findIndex(d => d.index === selectedDocIndex) + 1;
    const totalDocs = documents.length;

    // 2. Page progress: which page out of annotatable pages in current doc
    const totalPages = currentDoc?.annotatable_pages?.length ?? 0;
    const currentPage = totalPages > 0 ? pageIdx + 1 : 0;

    // 3. Mentions progress: verified by CURRENT USER vs total on current page
    const totalMentions = currentPageDatasets?.length ?? 0;
    const verifiedMentions = currentPageDatasets?.filter(ds => {
        const myValidation = (ds.validations || []).find(v => v.annotator === annotatorName);
        return myValidation?.human_validated === true;
    }).length ?? 0;

    return (
        <div className="progress-container">
            <div className="progress-pills">
                <div className="progress-pill">
                    <span className="pill-icon">๐Ÿ“„</span>
                    <span className="pill-label">PDF</span>
                    <span className="pill-value">{docPosition}/{totalDocs}</span>
                </div>
                <div className="pill-divider" />
                <div className="progress-pill">
                    <span className="pill-icon">๐Ÿ“‘</span>
                    <span className="pill-label">Page</span>
                    <span className="pill-value">{currentPage}/{totalPages}</span>
                </div>
                <div className="pill-divider" />
                <div className="progress-pill">
                    <span className="pill-icon">๐Ÿท๏ธ</span>
                    <span className="pill-label">Verified</span>
                    <span className={`pill-value ${verifiedMentions === totalMentions && totalMentions > 0 ? 'pill-complete' : ''}`}>
                        {verifiedMentions}/{totalMentions}
                    </span>
                </div>
            </div>
        </div>
    );
}