feat: add metadata table layout

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"