Unify props for ResultTableCell

src/client/components/facet_results/ResultTable.js

@@ -17,7 +17,6 @@ import ResultTableHead from './ResultTableHead'
 import TablePagination from '@material-ui/core/TablePagination'
 import ResultTablePaginationActions from './ResultTablePaginationActions'
 import history from '../../History'
-import has from 'lodash'
 
 const styles = theme => ({
   tableContainer: {
@@ -177,10 +176,18 @@ class ResultTable extends React.Component {
   }
 
   rowRenderer = row => {
-    const { classes } = this.props
+    const { classes, screenSize } = this.props
     const expanded = this.state.expandedRows.has(row.id)
     let hasExpandableContent = false
     const dataCells = this.props.data.properties.map(column => {
+      const {
+        id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth,
+        linkAsButton, collapsedMaxWords, sourceExternalLink, renderAsHTML, HTMLParserTask
+      } = column
+      let { previewImageHeight } = column
+      if (screenSize === 'xs' || screenSize === 'sm') {
+        previewImageHeight = 50
+      }
       if (column.onlyOnInstancePage) { return null }
       const columnData = row[column.id] == null ? '-' : row[column.id]
       const isArray = Array.isArray(columnData)
@@ -202,28 +209,26 @@ class ResultTable extends React.Component {
       }
       return (
         <ResultTableCell
-          key={column.id}
-          columnId={column.id}
+          key={id}
+          columnId={id}
           data={columnData}
-          valueType={column.valueType}
-          makeLink={column.makeLink}
-          externalLink={column.externalLink}
-          sortValues={column.sortValues}
-          sortBy={column.sortBy}
-          numberedList={column.numberedList}
-          minWidth={column.minWidth}
-          previewImageHeight={column.previewImageHeight}
+          valueType={valueType}
+          makeLink={makeLink}
+          externalLink={externalLink}
+          sortValues={sortValues}
+          sortBy={sortBy}
+          numberedList={numberedList}
+          minWidth={minWidth}
+          previewImageHeight={previewImageHeight}
           container='cell'
           expanded={expanded}
-          linkAsButton={has(column, 'linkAsButton')
-            ? column.linkAsButton
-            : null}
-          collapsedMaxWords={has(column, 'collapsedMaxWords')
-            ? column.collapsedMaxWords
-            : null}
-          renderAsHTML={has(column, 'renderAsHTML')
-            ? column.renderAsHTML
-            : null}
+          linkAsButton={linkAsButton}
+          collapsedMaxWords={collapsedMaxWords}
+          showSource={false}
+          sourceExternalLink={sourceExternalLink}
+          renderAsHTML={renderAsHTML}
+          HTMLParserTask={HTMLParserTask}
+          referencedTerm={columnData.referencedTerm}
         />
       )
     })

src/client/components/facet_results/ResultTableCell.js

@@ -13,7 +13,9 @@ const ResultTableCell = props => {
     sourceExternalLink, renderAsHTML, HTMLParserTask, referencedTerm, previewImageHeight
   } = props
   let cellContent = null
-  const cellStyle = { minWidth }
+  const cellStyle = {
+    ...(minWidth && { minWidth })
+  }
   switch (valueType) {
     case 'object':
       cellContent =

src/client/components/main_layout/InstanceHomePageTable.js

@@ -15,7 +15,7 @@ import InfoIcon from '@material-ui/icons/InfoOutlined'
 
 const styles = theme => ({
   instanceTable: {
-    maxWidth: 800,
+    maxWidth: 1200,
     width: '100%',
     [theme.breakpoints.down('md')]: {
       tableLayout: 'fixed',
@@ -37,9 +37,11 @@ const styles = theme => ({
     alignItems: 'center',
     justifyContent: 'center'
   },
-  // labelCell: {
-  //   maxWidth: 250
-  // },
+  labelCell: {
+    [theme.breakpoints.down('md')]: {
+      paddingRight: 0
+    }
+  },
   tooltip: {
     marginTop: -3
   },
@@ -47,7 +49,10 @@ const styles = theme => ({
     paddingRight: 0,
     paddingTop: 0,
     paddingBottom: 0,
-    width: 32
+    width: 32,
+    [theme.breakpoints.down('md')]: {
+      paddingLeft: 0
+    }
   },
   expand: {
     transform: 'rotate(0deg)',
@@ -121,7 +126,7 @@ class InstanceHomePageTable extends React.Component {
                 const label = intl.get(`perspectives.${resultClass}.properties.${row.id}.label`)
                 const description = intl.get(`perspectives.${resultClass}.properties.${row.id}.description`)
                 const {
-                  id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList,
+                  id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth,
                   linkAsButton, collapsedMaxWords, showSource, sourceExternalLink, renderAsHTML, HTMLParserTask
                 } = row
                 let { previewImageHeight } = row
@@ -157,6 +162,7 @@ class InstanceHomePageTable extends React.Component {
                         </IconButton>}
                     </TableCell>
                     <ResultTableCell
+                      key={id}
                       columnId={id}
                       data={data[id]}
                       valueType={valueType}
@@ -165,9 +171,10 @@ class InstanceHomePageTable extends React.Component {
                       sortValues={sortValues}
                       sortBy={sortBy}
                       numberedList={numberedList}
+                      minWidth={minWidth}
+                      previewImageHeight={previewImageHeight}
                       container='cell'
                       expanded={expanded}
-                      previewImageHeight={previewImageHeight}
                       linkAsButton={linkAsButton}
                       collapsedMaxWords={collapsedMaxWords}
                       showSource={showSource}