Skip to content
Snippets Groups Projects
Commit 1a4ae178 authored by esikkala's avatar esikkala
Browse files

InstancePageTable: fix indentation

parent 304f8601
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/components/main_layout/InstancePageTable.js
+ 76
− 73
View file @ 1a4ae178
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import intl from 'react-intl-universal' import intl from 'react-intl-universal'
import withStyles from '@mui/styles/withStyles'; import withStyles from '@mui/styles/withStyles'
import clsx from 'clsx' import clsx from 'clsx'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import Table from '@mui/material/Table' import Table from '@mui/material/Table'
...@@ -126,79 +126,82 @@ class InstancePageTable extends React.Component { ...@@ -126,79 +126,82 @@ class InstancePageTable extends React.Component {
render = () => { render = () => {
const { classes, data, properties, screenSize, perspectiveConfig } = this.props const { classes, data, properties, screenSize, perspectiveConfig } = this.props
const perspectiveID = perspectiveConfig.id const perspectiveID = perspectiveConfig.id
return <> return (
{data && <>
<Table className={classes.instanceTable} size='small'> {data &&
<TableBody> <Table className={classes.instanceTable} size='small'>
{properties.map(row => { <TableBody>
const label = intl.get(`perspectives.${perspectiveID}.properties.${row.id}.label`) {properties.map(row => {
const description = intl.get(`perspectives.${perspectiveID}.properties.${row.id}.description`) const label = intl.get(`perspectives.${perspectiveID}.properties.${row.id}.label`)
const { const description = intl.get(`perspectives.${perspectiveID}.properties.${row.id}.description`)
id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth, const {
linkAsButton, collapsedMaxWords, showSource, sourceExternalLink, renderAsHTML, HTMLParserTask id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth,
} = row linkAsButton, collapsedMaxWords, showSource, sourceExternalLink, renderAsHTML, HTMLParserTask
let { previewImageHeight } = row } = row
if (screenSize === 'xs' || screenSize === 'sm') { let { previewImageHeight } = row
previewImageHeight = 50 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 ( </TableBody>
<TableRow key={row.id}> </Table>}
<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>}
</>;
} }
} }
......
src/client/components/main_layout/KnowledgeGraphMetadataTable.js
+ 1
− 1
View file @ 1a4ae178
import React, { useEffect } from 'react' import React, { useEffect } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import makeStyles from '@mui/styles/makeStyles'; import makeStyles from '@mui/styles/makeStyles'
import Table from '@mui/material/Table' import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody' import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell' import TableCell from '@mui/material/TableCell'
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment