collection_editor.js

// import './login.css';
import { Backdrop, Box, Button, CircularProgress, TextField, List, ListItem, ListItemButton, ListItemText, ListItemIcon, Select, MenuItem } from '@mui/material';
import React, { useState, useEffect } from 'react'
import { dbGetCollection, dbGetItems, dbUpdateCollectionGlob, dbUpdateCollectionSummary, dbUpdateCollectionSummaryNLTK, dbUpdateCollectionSummaryBERT } from './database_util';

import AddIcon from '@mui/icons-material/Add';

const CollectionEditor = (props) => {
    const [open, setOpen] = useState(false);
    const [summarizer, setSummarizer] = useState('');

    const updateGlob = (event) => {
        // console.log();

        let copy =  JSON.parse(JSON.stringify(props.collection))

        copy["collection_data"]["glob"] = event.target.value

        props.onCollectionUpdate(copy)

        // console.log(copy);

    }

    const [summaries, setSummaries] = useState([]);
 
    const generateSummary = async () => {
        if (summarizer === '') {
            return;
        }
        setOpen(true);
        let id = props.collection["collection_id"]
        let newSummary = "";
        const existingIndex = summaries.findIndex(summary => {
            if (summary && summary.key.startsWith(summarizer.replace(" ", ""))) {
                return true;
            }
            return false;
        });

        let newTextField;

        if (existingIndex !== -1) {
            // Update the existing summary
            const existingSummary = summaries[existingIndex];
            await updateCollectionSummary(id);
            props.onCollectionUpdate(await dbGetCollection(id));
            setOpen(false);
            newTextField = <TextField disabled multiline maxRows={20} fullWidth label="Summary:" value={props.collection[`${summarizer}_summary`]} />;
            newSummary = React.cloneElement(existingSummary, {}, [<h3>{summarizer.toUpperCase()} Summary:</h3>, newTextField]);
            const updatedSummaries = [...summaries];
            updatedSummaries[existingIndex] = newSummary;
            setSummaries(updatedSummaries);
        } else {
            // Create a new summary
            await updateCollectionSummary(id);
            props.onCollectionUpdate(await dbGetCollection(id));
            setOpen(false);
            newTextField = <TextField disabled multiline maxRows={20} fullWidth label="Summary:" value={props.collection[`${summarizer}_summary`]} />;
            newSummary = <div key={`${summarizer.replace(" ", "")}Summary`}><h3>{summarizer.toUpperCase()} Summary:</h3>{newTextField}</div>;
            setSummaries([...summaries, newSummary]);
        }
    }

    const updateCollectionSummary = async (id) => {
        switch (summarizer) {
            case "t5":
                await dbUpdateCollectionSummary(id);
                break;
            case "bert":
                await dbUpdateCollectionSummaryBERT(id);
                break;
            case "nltk":
                await dbUpdateCollectionSummaryNLTK(id);
                break;
            default:
                break;
        }
    }


    // console.log("loadedRawFiles", props.loadedRawFiles)

    return (
        <Box>
            <h1>{props.collection["collection_name"]}</h1>

            <h3>Loaded Files</h3>
            
            <List sx={{boxShadow:1}}>
            {
                props.loadedRawFiles.map((f) => {
                    return (
                        <ListItem>
                            <ListItemButton>
                                <ListItemText>
                                    {f}
                                </ListItemText>
                            </ListItemButton>
                        </ListItem>
                    );
                })
            }
            </List>
            <List sx={{boxShadow:1}}>
                <ListItem>
                    <ListItemText>
                        Please select which summarizer you would like to use to generate the summary
                    </ListItemText>
                    <Select 
                        value={summarizer} 
                        onChange={(e) => setSummarizer(e.target.value)} 
                        sx={{ width: "300px" }}
                    >
                        <MenuItem value="t5">T5 Summarizer</MenuItem>
                        <MenuItem value="nltk">NLTK Summarizer</MenuItem>
                        <MenuItem value="bert">BERT Summarizer</MenuItem>
                    </Select>
                </ListItem>
            </List>
            {/* <h3>Generated Summary:</h3>
            <TextField disabled multiline maxRows={20} fullWidth label="Summary:" value={props.collection["collection_summary"]}/> */}
            <Button onClick={generateSummary}>Generate Summary</Button>
            {summaries.map((summary) => summary)}

            <Backdrop
                open={open}
            >
                <CircularProgress/>
            </Backdrop>
        </Box>
    );
}

export default CollectionEditor;