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 generateSummary = async () => {
        setOpen(true);
        let id = props.collection["collection_id"]

        if (summarizer === "T5 Summarizer") {
            await dbUpdateCollectionSummary(id)
        } else if (summarizer === "BERT Summarizer") {
            await dbUpdateCollectionSummaryBERT(id)
        } else if (summarizer === "NLTK Summarizer") {
            await dbUpdateCollectionSummaryNLTK(id)
        }
        // await dbUpdateCollectionSummaryBERT(id)
        console.log(id,props.collection)
        props.onCollectionUpdate(await dbGetCollection(id))
        setOpen(false);
    }


    // 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 Summarizer">T5 Summarizer</MenuItem>
                        <MenuItem value="NLTK Summarizer">NLTK Summarizer</MenuItem>
                        <MenuItem value="BERT Summarizer">BERT Summarizer</MenuItem>
                    </Select>
                </ListItem>
            </List>
            <h3>Generated Summary:</h3>
            <TextField disabled multiline maxRows={20} fullWidth label="Summary:" value={props.collection["t5_summary"]}/>
            <Button onClick={generateSummary}>Generate Summary</Button>

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

export default CollectionEditor;