Pass referenced terms to html parser

src/client/components/facet_results/ResultTableCell.js

@@ -10,7 +10,7 @@ const ResultTableCell = props => {
   const {
     data, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth,
     container, columnId, expanded, linkAsButton, collapsedMaxWords, showSource,
-    sourceExternalLink, renderAsHTML, HTMLParserTask, annotationData, previewImageHeight
+    sourceExternalLink, renderAsHTML, HTMLParserTask, referencedTerm, previewImageHeight
   } = props
   let cellContent = null
   const cellStyle = minWidth == null ? {} : { minWidth: minWidth }
@@ -39,7 +39,7 @@ const ResultTableCell = props => {
           collapsedMaxWords={collapsedMaxWords}
           renderAsHTML={renderAsHTML}
           HTMLParserTask={HTMLParserTask}
-          annotationData={annotationData}
+          referencedTerm={referencedTerm}
           numberedList={numberedList}
         />
       break

src/client/components/main_layout/InstanceHomePageTable.js

@@ -10,7 +10,6 @@ import ResultTableCell from '../facet_results/ResultTableCell'
 import Tooltip from '@material-ui/core/Tooltip'
 import IconButton from '@material-ui/core/IconButton'
 import InfoIcon from '@material-ui/icons/InfoOutlined'
-import has from 'lodash'
 
 const styles = theme => ({
   instanceTable: {
@@ -62,6 +61,10 @@ class InstanceHomePageTable extends React.Component {
               {properties.map(row => {
                 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, previewImageHeight,
+                  linkAsButton, collapsedMaxWords, showSource, sourceExternalLink, renderAsHTML, HTMLParserTask
+                } = row
                 return (
                   <TableRow key={row.id}>
                     <TableCell className={classes.labelCell}>
@@ -76,32 +79,24 @@ class InstanceHomePageTable extends React.Component {
                       </Tooltip>
                     </TableCell>
                     <ResultTableCell
-                      columnId={row.id}
-                      data={data[row.id]}
-                      valueType={row.valueType}
-                      makeLink={row.makeLink}
-                      externalLink={row.externalLink}
-                      sortValues={row.sortValues}
-                      sortBy={row.sortBy}
-                      numberedList={row.numberedList}
+                      columnId={id}
+                      data={data[id]}
+                      valueType={valueType}
+                      makeLink={makeLink}
+                      externalLink={externalLink}
+                      sortValues={sortValues}
+                      sortBy={sortBy}
+                      numberedList={numberedList}
                       container='cell'
                       expanded
-                      previewImageHeight={row.previewImageHeight}
-                      linkAsButton={has(row, 'linkAsButton')
-                        ? row.linkAsButton
-                        : null}
-                      collapsedMaxWords={has(row, 'collapsedMaxWords')
-                        ? row.collapsedMaxWords
-                        : null}
-                      showSource={has(row, 'showSource')
-                        ? row.showSource
-                        : null}
-                      sourceExternalLink={has(row, 'sourceExternalLink')
-                        ? row.sourceExternalLink
-                        : null}
-                      renderAsHTML={has(row, 'renderAsHTML')
-                        ? row.renderAsHTML
-                        : null}
+                      previewImageHeight={previewImageHeight}
+                      linkAsButton={linkAsButton}
+                      collapsedMaxWords={collapsedMaxWords}
+                      showSource={showSource}
+                      sourceExternalLink={sourceExternalLink}
+                      renderAsHTML={renderAsHTML}
+                      HTMLParserTask={HTMLParserTask}
+                      referencedTerm={data.referencedTerm}
                     />
                   </TableRow>
                 )

src/client/helpers/HTMLParser.js

@@ -2,10 +2,12 @@ import React from 'react'
 import ReactHtmlParser from 'react-html-parser'
 import { Link } from 'react-router-dom'
 import Tooltip from '@material-ui/core/Tooltip'
+import { arrayToObject } from './helpers'
 
 export default class HTMLParser {
   constructor (props) {
     this.props = props
+    this.referencedTermsObj = null
   }
 
   parseHTML (html) {
@@ -15,6 +17,7 @@ export default class HTMLParser {
         transform = this.addReactRouterLinks
         break
       case 'addAnnotationTooltips':
+        this.processReferencedTerms()
         transform = this.addAnnotationTooltips
         break
       default:
@@ -31,6 +34,13 @@ export default class HTMLParser {
     }
   }
 
+  processReferencedTerms = () => {
+    const { referencedTerm } = this.props
+    if (Array.isArray(referencedTerm)) {
+      this.referencedTermsObj = arrayToObject({ array: referencedTerm, keyField: 'id' })
+    }
+  }
+
   addAnnotationTooltips = (node, index) => {
     const props = this.props
     if (node.type === 'tag' && node.name === 'span' && node.attribs.name === 'namedentity' && node.attribs['data-link'] !== '') {
@@ -89,17 +99,16 @@ export default class HTMLParser {
   }
 
   renderAnnotation = uri => {
-    const props = this.props
     if (uri.startsWith('http://ldf.fi/ttp/')) {
       const localID = uri.replace('http://ldf.fi/ttp/', '')
       uri = `http://ldf.fi/ttp/${encodeURIComponent(localID)}`
     }
     return (
       <>
-        <li><i><small>URI:</small></i> <a href={uri} target='_blank' rel='noopener noreferrer'>{props.annotationData[uri].id}</a></li>
-        <li><i><small>dctems:hasFormat:</small></i> <a href={props.annotationData[uri].format} target='_blank' rel='noopener noreferrer'>{props.annotationData[uri].format}</a></li>
-        <li><i><small>skos:prefLabel:</small></i> {props.annotationData[uri].prefLabel}</li>
-        <li><i><small>rdfs:comment:</small></i> {props.annotationData[uri].comment}</li>
+        <li><i><small>URI:</small></i> <a href={uri} target='_blank' rel='noopener noreferrer'>{this.referencedTermsObj[uri].id}</a></li>
+        <li><i><small>dctems:hasFormat:</small></i> <a href={this.referencedTermsObj[uri].format} target='_blank' rel='noopener noreferrer'>{this.referencedTermsObj[uri].format}</a></li>
+        <li><i><small>skos:prefLabel:</small></i> {this.referencedTermsObj[uri].prefLabel}</li>
+        <li><i><small>rdfs:comment:</small></i> {this.referencedTermsObj[uri].comment}</li>
       </>
     )
   }