diff --git a/src/client/components/main_layout/InstancePageTable.js b/src/client/components/main_layout/InstancePageTable.js index b882c1d681cc4500d0507f5d509bb554d840c2a9..c7af520cb9a7201a7045b428d4bb5534c2fde470 100644 --- a/src/client/components/main_layout/InstancePageTable.js +++ b/src/client/components/main_layout/InstancePageTable.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import intl from 'react-intl-universal' -import withStyles from '@mui/styles/withStyles'; +import withStyles from '@mui/styles/withStyles' import clsx from 'clsx' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import Table from '@mui/material/Table' @@ -126,79 +126,82 @@ class InstancePageTable extends React.Component { render = () => { const { classes, data, properties, screenSize, perspectiveConfig } = this.props const perspectiveID = perspectiveConfig.id - return <> - {data && - <Table className={classes.instanceTable} size='small'> - <TableBody> - {properties.map(row => { - const label = intl.get(`perspectives.${perspectiveID}.properties.${row.id}.label`) - const description = intl.get(`perspectives.${perspectiveID}.properties.${row.id}.description`) - const { - id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth, - linkAsButton, collapsedMaxWords, showSource, sourceExternalLink, renderAsHTML, HTMLParserTask - } = row - let { previewImageHeight } = row - if (screenSize === 'xs' || screenSize === 'sm') { - previewImageHeight = 50 + return ( + <> + {data && + <Table className={classes.instanceTable} size='small'> + <TableBody> + {properties.map(row => { + const label = intl.get(`perspectives.${perspectiveID}.properties.${row.id}.label`) + const description = intl.get(`perspectives.${perspectiveID}.properties.${row.id}.description`) + const { + id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth, + linkAsButton, collapsedMaxWords, showSource, sourceExternalLink, renderAsHTML, HTMLParserTask + } = row + let { previewImageHeight } = row + if (screenSize === 'xs' || screenSize === 'sm') { + previewImageHeight = 50 + } + const expanded = this.state.expandedRows.has(row.id) + return ( + <TableRow key={row.id}> + <TableCell className={classes.labelCell}> + {label} + <Tooltip + className={classes.tooltip} + title={description} + enterDelay={300} + > + <IconButton size='large'> + <InfoIcon /> + </IconButton> + </Tooltip> + </TableCell> + <TableCell className={classes.expandCell}> + {this.hasExpandableContent({ data: data[id], config: row }) && + <IconButton + className={clsx(classes.expand, { + [classes.expandOpen]: expanded + })} + onClick={this.handleExpandRow(row.id)} + aria-expanded={expanded} + aria-label='Show more' + size='large' + > + <ExpandMoreIcon /> + </IconButton>} + </TableCell> + <ResultTableCell + key={id} + columnId={id} + data={data[id]} + valueType={valueType} + makeLink={makeLink} + externalLink={externalLink} + sortValues={sortValues} + sortBy={sortBy} + numberedList={numberedList} + minWidth={minWidth} + previewImageHeight={previewImageHeight} + container='cell' + expanded={expanded} + shortenLabel={false} + linkAsButton={linkAsButton} + collapsedMaxWords={collapsedMaxWords} + showSource={showSource} + sourceExternalLink={sourceExternalLink} + renderAsHTML={renderAsHTML} + HTMLParserTask={HTMLParserTask} + referencedTerm={data.referencedTerm} + /> + </TableRow> + ) } - const expanded = this.state.expandedRows.has(row.id) - return ( - <TableRow key={row.id}> - <TableCell className={classes.labelCell}> - {label} - <Tooltip - className={classes.tooltip} - title={description} - enterDelay={300} - > - <IconButton size="large"> - <InfoIcon /> - </IconButton> - </Tooltip> - </TableCell> - <TableCell className={classes.expandCell}> - {this.hasExpandableContent({ data: data[id], config: row }) && - <IconButton - className={clsx(classes.expand, { - [classes.expandOpen]: expanded - })} - onClick={this.handleExpandRow(row.id)} - aria-expanded={expanded} - aria-label='Show more' - size="large"> - <ExpandMoreIcon /> - </IconButton>} - </TableCell> - <ResultTableCell - key={id} - columnId={id} - data={data[id]} - valueType={valueType} - makeLink={makeLink} - externalLink={externalLink} - sortValues={sortValues} - sortBy={sortBy} - numberedList={numberedList} - minWidth={minWidth} - previewImageHeight={previewImageHeight} - container='cell' - expanded={expanded} - shortenLabel={false} - linkAsButton={linkAsButton} - collapsedMaxWords={collapsedMaxWords} - showSource={showSource} - sourceExternalLink={sourceExternalLink} - renderAsHTML={renderAsHTML} - HTMLParserTask={HTMLParserTask} - referencedTerm={data.referencedTerm} - /> - </TableRow> - ); - } - )} - </TableBody> - </Table>} - </>; + )} + </TableBody> + </Table>} + </> + ) } } diff --git a/src/client/components/main_layout/KnowledgeGraphMetadataTable.js b/src/client/components/main_layout/KnowledgeGraphMetadataTable.js index 6c116a3fe686a5e54e6525521768c43c6cafb98d..19e25f377ab20169d0ce9d22299f295416ad5120 100644 --- a/src/client/components/main_layout/KnowledgeGraphMetadataTable.js +++ b/src/client/components/main_layout/KnowledgeGraphMetadataTable.js @@ -1,6 +1,6 @@ import React, { useEffect } from 'react' import PropTypes from 'prop-types' -import makeStyles from '@mui/styles/makeStyles'; +import makeStyles from '@mui/styles/makeStyles' import Table from '@mui/material/Table' import TableBody from '@mui/material/TableBody' import TableCell from '@mui/material/TableCell'