function Details()

in document-json-explorer/src/Details.js [42:204]
160 lines of code
16 McCabe index (conditional complexity)

function Details(props) {
  const [open, setOpen] = useState(false);
  const [entity, setEntity] = useState(null);
  if (props.data === null) {
    return <NoData />;
  }
  const doc = props.data;
  return (
    <Box sx={{ overflowY: "auto" }}>
      <Paper sx={{ margin: "4px" }}>
        <Stack direction="column" spacing={1}>
          <Card variant="outlined">
            <CardContent>
              <Typography variant="h6">Details</Typography>
              <Typography variant="body1" component="ul">
                <li>Uri: {doc.uri ? doc.uri : "<none>"}</li>
                <li>MimeType: {doc.mimeType}</li>
                <li>Page Count: {doc.pages.length}</li>
                <li>
                  Human review status:{" "}
                  {props.data.humanReviewStatus
                    ? props.data.humanReviewStatus.state
                    : "undefined"}
                </li>
              </Typography>
            </CardContent>
          </Card>
          <Card variant="outlined">
            <CardContent>
              <Typography variant="h6">Pages</Typography>
              <TableContainer>
                <Table size="smalll">
                  <TableHead>
                    <TableRow>
                      <TableCell>Page Number</TableCell>
                      <TableCell>Width</TableCell>
                      <TableCell>Height</TableCell>
                      <TableCell>Units</TableCell>
                      <TableCell>Languages</TableCell>
                      <TableCell>Blocks</TableCell>
                      <TableCell>Paragraphs</TableCell>
                      <TableCell>Lines</TableCell>
                      <TableCell>Tokens</TableCell>
                      <TableCell>Tables</TableCell>
                      <TableCell>Form Fields</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {doc.pages.map((page) => (
                      <TableRow key={page.pageNumber}>
                        <TableCell>{page.pageNumber}</TableCell>
                        <TableCell>
                          {page.dimension ? page.dimension.width : "undefined"}
                        </TableCell>
                        <TableCell>
                          {page.dimension ? page.dimension.height : "undefined"}
                        </TableCell>
                        <TableCell>
                          {page.dimension ? page.dimension.unit : "undefined"}
                        </TableCell>
                        <TableCell>
                          {page.detectedLanguages
                            ? page.detectedLanguages.map(
                                (detectedLanguage) =>
                                  `${detectedLanguage.languageCode} `
                              )
                            : "undefined"}
                        </TableCell>
                        <TableCell>
                          {page.blocks ? page.blocks.length : "undefined"}
                        </TableCell>
                        <TableCell>
                          {page.paragraphs
                            ? page.paragraphs.length
                            : "undefined"}
                        </TableCell>
                        <TableCell>
                          {page.lines ? page.lines.length : "undefined"}
                        </TableCell>
                        <TableCell>
                          {page.tokens ? page.tokens.length : "undefined"}
                        </TableCell>
                        <TableCell>
                          {page.tables ? page.tables.length : "undefined"}
                        </TableCell>
                        <TableCell>
                          {page.formFields
                            ? page.formFields.length
                            : "undefined"}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            </CardContent>
          </Card>
          {
            //
            // ENTITIES
            //
          }
          <Card variant="outlined">
            <CardContent>
              <Typography variant="h6">Entities</Typography>
              <TableContainer>
                <Table size="smalll">
                  <TableHead>
                    <TableRow>
                      <TableCell>ID</TableCell>
                      <TableCell>Type</TableCell>
                      <TableCell>Confidence</TableCell>
                      <TableCell>Text</TableCell>
                      <TableCell>Normalized</TableCell>
                      <TableCell>Properties</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {doc.entities.map((entity) => (
                      <TableRow key={entity.id}>
                        <TableCell>
                          <IconButton
                            color="primary"
                            size="small"
                            onClick={() => {
                              setOpen(true);
                              setEntity(entity);
                            }}
                          >
                            <InfoIcon />
                          </IconButton>
                          {entity.id}
                        </TableCell>
                        <TableCell>{entity.type}</TableCell>
                        <TableCell>{entity.confidence}</TableCell>
                        <TableCell>{entity.mentionText}</TableCell>
                        <TableCell>
                          {entity.normalizedValue
                            ? entity.normalizedValue.text
                            : ""}
                        </TableCell>
                        <TableCell>
                          {entity.properties ? entity.properties.length : 0}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            </CardContent>
          </Card>
        </Stack>
      </Paper>
      <EntityInfoDialog
        open={open}
        entity={entity}
        close={() => {
          setOpen(false);
        }}
      />
    </Box>
  );
} // Details