feat(datasets): with link to external source and author affiliation

SwissDataScienceCenter · Nov 22, 2019 · 34190c1 · 34190c1
1 parent bff715f
commit 34190c1
Showing 1 changed file with 44 additions and 21 deletions.
diff --git a/src/dataset/Dataset.present.js b/src/dataset/Dataset.present.js
@@ -17,13 +17,13 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { Col, Card, CardHeader, CardBody, Table, Alert } from 'reactstrap';
+import { Row, Col, Card, CardHeader, CardBody, Table, Alert, Button } from 'reactstrap';
 import { Link }  from 'react-router-dom';
 import { Loader } from '../utils/UIComponents';
 import DOMPurify from 'dompurify';
 import { API_ERRORS } from '../api-client';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFile, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
+import { faFile, faProjectDiagram, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { GraphIndexingStatus } from '../project/Project';
 import KnowledgeGraphStatus from '../file/KnowledgeGraphStatus.container';
 import Time from '../utils/Time';
@@ -179,27 +179,50 @@ export default function DatasetView(props){
     return <Alert color="danger">Error 404: The dataset that was selected doesn't exist or couldn't be accessed</Alert>
 
   return <Col>
-    <div style={{paddingLeft:"4px"}}>
-      {
-        dataset.published !== undefined && dataset.published.datePublished !== undefined ?
-          <small style={{ display: 'block', paddingBottom:'8px'}} className="font-weight-light font-italic">
+    <Row>
+      <Col md={10} sm={12}>
+        {
+          dataset.published !== undefined && dataset.published.datePublished !== undefined ?
+            <small style={{ display: 'block', paddingBottom:'8px'}} className="font-weight-light font-italic">
             Uploaded on { Time.getReadableDate(dataset.published.datePublished) }.
-          </small>
-          : null
+            </small>
+            : null
+        }
+        <h4 key="datasetTitle">
+          {dataset.name}
+        </h4> 
+      </Col>
+      { dataset.url ? 
+        <Col md={2} sm={12}>
+          <a className="float-right" href={dataset.url} target="_blank" rel="noreferrer noopener">
+            <Button outline color="dark" >
+              <FontAwesomeIcon icon={faExternalLinkAlt} color="dark" /> Go to source
+            </Button>
+          </a>
+        </Col>
+        : null  
       }
-      <h4 key="datasetTitle">
-        {dataset.name}
-      </h4>
-      {
-        dataset.published !== undefined && dataset.published.creator !== undefined ?
-          <small style={{ display: 'block'}} className="font-weight-light">
-            {dataset.published.creator.map((creator) => creator.name).join("; ")}
-          </small>
-          : null
-      }
-      <p  style={{paddingTop:'12px'}} dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(dataset.description)}}>
-      </p>
-    </div>
+    </Row>
+    {
+      dataset.published !== undefined && dataset.published.creator !== undefined ?
+        <small style={{ display: 'block'}} className="font-weight-light">
+          {
+            dataset.published.creator
+              .map((creator) => creator.name + (creator.affiliation ? `(${creator.affiliation})`:"") )
+              .join("; ")
+          }
+        </small>
+        : null
+    }
+    <p  style={{paddingTop:'12px'}} dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(dataset.description)}}>
+    </p>
+    {
+      dataset.sameAs ? 
+        <div>
+          Imported from: <a href={dataset.url} target="_blank" rel="noreferrer noopener">{ dataset.sameAs } </a>
+        </div>
+        : null
+    }
     <br />
     <DisplayFiles
       projectsUrl={props.projectsUrl}