labo-components/app/components/resourceviewer/MetadataColumn.jsx

B&G UI components

import React from "react";
import PropTypes from "prop-types";
import IDUtil from "../../util/IDUtil"; // for generating unique CSS classnames for this component
import MetadataRow from "./metadataColumn/MetadataRow";
import { exportDataAsJSON } from "../workspace/helpers/Export";
import SearchAPI from '../../api/SearchAPI';
import { ENTITY_TYPE } from '../../util/EntityConstants';
import { ResourceViewerContext } from "./ResourceViewerContext";
import { ResourceEvents } from '../../ResourceViewer';

export default class MetadataColumn extends React.Component {
    static contextType = ResourceViewerContext;

    constructor(props){
        super(props);
    }

    componentDidMount = () => {
        this.context.resourceEvents.bind(ResourceEvents.SET_ENTITIES, this.onEntitiesSet);
    };

    componentWillUnmount = () => {
        this.context.resourceEvents.unbind(ResourceEvents.SET_ENTITIES, this.onEntitiesSet);
    };

    onEntitiesSet = entities => {
        console.debug('Repainting the metadata column');
        this.render();
    }

    onExport = () => exportDataAsJSON(this.context.resource);

    onMoreInfo = e => {
        e.preventDefault();
        const button = e.currentTarget;
        e.stopPropagation();
        if (this.props.onMoreInfo) {
            this.props.onMoreInfo(button.value);
        }
	};

    renderRow = (title, data, description) => {
        if (!data) return null;

        switch (title) {
            case "externalSourceInfo":
                if(!data.length || data.length <= 0) return [];

                return data.map(source => {
                    const newData = source.url ?
                        <a href={source.url} target="_blank" >{source.message || "External source"}</a> :
                        <span>{source.message}</span>
                    ;
                    return <MetadataRow key={title} title={title} description={description} data={newData}/>;
                });
            case "entities": //for rendering named entities of different types (see EntityConstants.js for types)
                return Object.keys(data).map(et => {
                    const entitiesOfType = data[et];
                    if( entitiesOfType.hasOwnProperty("error")) {
                        console.log("No person entities?");
                        console.log(entitiesOfType.error);
                    } else {

                    let newData = null
                    console.log("ent");
                    console.log(entitiesOfType);
                    if(Object.keys(entitiesOfType).length != 0) {

                        newData = Object.keys(entitiesOfType).map((key, index) => {
                            return ( //Use link and name to render link
                                <span key = {'props_key_' + index}>
                                    <button className="btn link"  value={key} onClick={this.onMoreInfo}>
                                        {entitiesOfType[key]["name"] + " (" + entitiesOfType[key]["roles"].join(", ") + ")"}
                                    </button>
                                <br/>
                                </span>
                            );
                        });
                        }
                        else{
                            newData = "No person information available"
                        }
                        console.log("new data");
                        console.log(newData);
                        return (
                            <MetadataRow
                                key={title}
                                title={et + 's'}
                                description={description}
                                data={<span>{newData}</span>}
                            />
                        );
                    }
                });
                break;
                //TODO this part should also be part of a function defined in the collectionConfig.getEntityConfig()

        }
        // Based on data type
        switch (typeof data) {
            case "string":
                return (
                    <MetadataRow
                        key={title}
                        title={title}
                        description={description}
                        data={<span>{data}</span>}
                    />
                ); break;

            case "object":
                // check for array
                if (data.length !== undefined) {
                    return this.renderRow(title, data.join(", "));
                } else if(title !== "entities") { //entities are rendered via the title
                    return Object.keys(data).map((key) =>
                        this.renderRow(key, data[key])
                    );
                }
                break;

            case "undefined":
                return null; break;

            default:
                return <div>Unknown type: {typeof data}</div>; break;
        }
    };

    render() {
        const resource = this.context.resource;

        // Define which fields should be shown
        // Specify key, and optionally the
        const fields = [
            { key: "title" },
            {
                key: "date",
                description:
                    "Date field: " +
                    (this.context.resource.dateField
                        ? this.context.resource.dateField
                        : "Unknown"),
            },
            { key: "description" },
            { key: "docType" },
            { key: "index" },
            { key: "resourceId" },
            { key: "specialProperties" },
            { key: "externalSourceInfo" },
            { key: "entities" }
        ];
        const metadata = fields.map((field) =>
            this.renderRow(field.key, resource[field.key], field.description)
        );

        return (
            <div className={IDUtil.cssClassName("metadata-column")}>
                <div className="fields">{metadata}</div>
                <div className="actions">
                    <button className="btn link" onClick={this.onExport}>
                        Full metadata
                    </button>
                </div>
            </div>
        );
    }
}

MetadataColumn.propTypes = {
    onMoreInfo: PropTypes.func.isRequired //what to do when the user clicks the more info item
};