feat: add metadata table layout

Author: chriswhong

app/components/Metadata.tsx

@@ -1,14 +1,113 @@
 import * as React from 'react'
-import { Meta } from '../models/dataset'
+import ExternalLink from './ExternalLink'
+import { Meta, Citation, License } from '../models/dataset'
 
 interface MetadataProps {
   meta: Meta
 }
 
+const renderValue = (value: string | string[] | Citation[] | object) => {
+  switch (typeof value) {
+    case 'string':
+    case 'number':
+      return <span>{value}</span>
+    case 'object':
+      return <span>{JSON.stringify(value)}</span>
+    default:
+      return <span>{JSON.stringify(value)}</span>
+  }
+}
+
+const renderChips = (value: string[] | undefined) => (
+  <div>
+    {value && value.map((d) => (<span key={d} className='chip'>{d}</span>))}
+  </div>
+)
+
+const renderLicense = (license: License) => (
+  <ExternalLink href={license.url}>
+    {license.type}
+  </ExternalLink>
+)
+
+const renderURL = (url: string) => (
+  <ExternalLink href={url}>{url}</ExternalLink>
+)
+
+const renderTable = (keys: string[], data: Meta) => {
+  return (
+    <div className='metadata-viewer-table-wrap'>
+      <table className='metadata-viewer-table'>
+        <tbody>
+          {keys.map((key) => {
+            const value = data[key]
+            let cellContent
+            switch (key) {
+              case 'theme':
+              case 'keywords':
+                cellContent = renderChips(value)
+                break
+              case 'license':
+                cellContent = renderLicense(value)
+                break
+              case 'accessURL':
+              case 'downloadURL':
+              case 'readmeURL':
+                cellContent = renderURL(value)
+                break
+              default:
+                cellContent = renderValue(value)
+            }
+
+            return (
+              <tr key={key} className='metadata-viewer-row'>
+                <td className='metadata-viewer-key'>{key}</td>
+                <td>{cellContent}</td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
 const Metadata: React.FunctionComponent<MetadataProps> = (props: MetadataProps) => {
+  const { meta } = props
+  const standardFields = [
+    'title',
+    'theme',
+    'keywords',
+    'description',
+    'license',
+    'accessURL',
+    'language',
+    'citations',
+    'contributors',
+    'accrualPeriodicity',
+    'downloadURL',
+    'homePath',
+    'identifier',
+    'readmePath',
+    'version'
+  ]
+
+  const ignoreFields = ['qri', 'path']
+
+  const standard = standardFields.filter((key) => !!meta[key])
+  const extra = Object.keys(meta).filter((key) => {
+    return !(~standardFields.findIndex((sKey) => (key === sKey)) || ~ignoreFields.findIndex((iKey) => (key === iKey)))
+  })
+
   return (
-    <div className='content'>
-      <pre>{JSON.stringify(props.meta, null, 2)}</pre>
+    <div className='content metadata-viewer-wrap'>
+      <h5 className='metadata-viewer-title'>Standard Metadata</h5>
+      {renderTable(standard, meta)}
+
+      {(extra.length > 0) && <div>
+        <h5 className='metadata-viewer-title'>Additional Metadata</h5>
+        {renderTable(extra, meta)}
+      </div>}
     </div>
   )
 }

app/models/dataset.ts

@@ -14,6 +14,11 @@ export interface User {
   email: string
 }
 
+export interface License {
+  type: string
+  url: string
+}
+
 export interface Meta {
   accessURL?: string
   accrualPeriodicity?: string
@@ -25,14 +30,12 @@ export interface Meta {
   identifier?: string
   keywords?: string[]
   language?: string[]
-  license?: {
-    type: string
-    url: string
-  }
+  license?: License
   readmeURL?: string
   title?: string
   theme?: string[]
   version?: string
+  [key: string]: any
 }
 
 export interface Commit {

app/scss/_metadata.scss

@@ -0,0 +1,53 @@
+.metadata-viewer-wrap {
+  padding: 20px;
+}
+
+.metadata-viewer-title {
+  margin-top: 30px;
+}
+
+.metadata-viewer-table-wrap {
+  width: 100%;
+  margin-top: 10px;
+  border-radius: 3px;
+  border: 1px solid #eee;
+  overflow: hidden;
+}
+
+.metadata-viewer-table {
+  width: 100%;
+}
+
+.metadata-viewer-row {
+  border-bottom: 1px solid #eee;
+}
+
+.metadata-viewer-key {
+  padding: 8px 8px;
+  font-size: .8rem;
+  font-weight: 600;
+  width: 112px;
+  text-align: right;
+}
+
+.metadata-viewer-link {
+  font-size: 17px;
+}
+
+.metadata-viewer-info {
+  color: $primary-light;
+}
+
+.metadata-viewer-data {
+  text-align: right;
+  color: $primary-light;
+  padding-right: 15px;
+}
+
+.chip {
+  background: #e4e4e4;
+  border-radius: 4px;
+  padding: 0px 8px;
+  margin: 2px 2px;
+  display: inline-block;
+}

app/scss/style.scss

@@ -33,6 +33,7 @@
 @import "flex";
 @import "toast";
 @import "body";
+@import "metadata";
 
 @import '~handsontable/dist/handsontable.full.css';
 @import "dialog"