All files / app senseMapAddPair.tsx

81.48% Statements 22/27
25% Branches 1/4
90% Functions 9/10
84% Lines 21/25

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106                                      342x 342x   342x 342x   342x 342x 342x 342x                                                         8x   24x 24x       116x 326x                             8x 8x 8x             8x     8x 8x 8x 8x                    
import {Close} from '@mui/icons-material'
import {
  Autocomplete,
  Button,
  Chip,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  IconButton,
  Stack,
  TextField,
} from '@mui/material'
import {useContext, useState} from 'react'
import {ResourceContext, SenseMapSetter} from './resources'
import {SenseSelector} from './senseMapEdit'
 
export function AddSenseMapPair({coarseLabels, useNLTK}: {coarseLabels: readonly string[]; useNLTK: boolean}) {
  const [menuOpen, setMenuOpen] = useState(false)
  const toggleMenu = () => setMenuOpen(!menuOpen)
 
  const {senseMap, senseMapOptions} = useContext(ResourceContext)
  const setSenseMap = useContext(SenseMapSetter)
 
  const [fines, setFines] = useState<string[]>([])
  const [coarseInput, setCoarseInput] = useState<string | undefined>('')
  const [coarses, setCoarses] = useState<string[]>([])
  return (
    <>
      <Button sx={{position: 'absolute', left: 16, bottom: 16}} onClick={toggleMenu}>
        New Pairs
      </Button>
      <Dialog open={menuOpen} onClose={toggleMenu}>
        <DialogTitle>Sense Mappings</DialogTitle>
        <IconButton
          aria-label="close sense map editor"
          onClick={toggleMenu}
          sx={{
            position: 'absolute',
            right: 8,
            top: 12,
          }}
          className="close-button"
        >
          <Close />
        </IconButton>
        <DialogContent sx={{p: 1, minWidth: '500px'}}>
          <DialogContentText sx={{mb: 1}}>Define fine to coarse sense mappings:</DialogContentText>
          <Stack direction="row" spacing={1}>
            <SenseSelector selected={fines} setSelected={setFines} multi={true} useNLTK={useNLTK} />
            <Autocomplete
              componentsProps={{popper: {className: 'synset-select'}}}
              multiple
              disableCloseOnSelect
              options={coarseLabels}
              value={coarses}
              onChange={(_, value) => setCoarses([...value])}
              renderTags={(value: readonly string[], getTagProps) => {
                return value.map((option: string, index: number) => (
                  <Chip label={option} {...getTagProps({index})} key={option} />
                ))
              }}
              inputValue={coarseInput}
              onInputChange={(_, value) => setCoarseInput(value)}
              renderInput={params => <TextField {...params} size="small" label="Coarse Senses"></TextField>}
              filterSelectedOptions
              selectOnFocus
              clearOnEscape
              handleHomeEndKeys
              fullWidth
              freeSolo
            ></Autocomplete>
          </Stack>
        </DialogContent>
        <DialogActions sx={{justifyContent: 'space-between'}}>
          <Button onClick={toggleMenu}>Cancel</Button>
          <Button
            variant="contained"
            onClick={() => {
              const newMap = {...senseMap}
              fines.forEach(fine => {
                Iif (fine in senseMap) {
                  const newCoarses = [...newMap[fine]]
                  coarses.forEach(coarse => {
                    if (!newCoarses.includes(coarse)) newCoarses.push(coarse)
                  })
                  newMap[fine] = newCoarses
                } else {
                  newMap[fine] = coarses
                }
              })
              setSenseMap(newMap, {store: senseMapOptions.store})
              setFines([])
              setCoarses([])
              toggleMenu()
            }}
          >
            Add
          </Button>
        </DialogActions>
      </Dialog>
    </>
  )
}