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 summary_array = () => {
        return [["T5",props.collection["t5_summary"]], ["NLTK", props.collection["nltk_summary"]], ["BERT",props.collection["bert_summary"]]]
    }
 
    const generateSummary = async () => {
        if (summarizer === '') {
            return;
        }
        setOpen(true);
        let id = props.collection["collection_id"]

        await dbUpdateCollectionSummary(id, summarizer);
        props.onCollectionUpdate(await dbGetCollection(id));
        setOpen(false);
    }

    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>
            <Button onClick={generateSummary}>Generate Summary</Button>
            {
                summary_array().map((f) => {
                    return (
                        <div>
                            <h3>{f[0]}</h3>
                            <TextField disabled multiline maxRows={20} fullWidth label="Summary:" value={f[1]} />
                        </div>
                        
                    );
                })
            }
            {/* {summaries.map((summary) => summary)} */}

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

export default CollectionEditor;