@rcsb/rcsb-saguaro-app/lib/RcsbGroupWeb/RcsbGroupView/RcsbGroupMembers/GroupMemberItem.js

RCSB 1D Saguaro Web App

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import resource from "../../../RcsbServerConfig/web.resources.json";
import { GroupProvenanceId, StructureDeterminationMethodology } from "@rcsb/rcsb-api-tools/lib/RcsbDw/Types/DwEnums";
import { TagDelimiter } from "@rcsb/rcsb-api-tools/lib/RcsbUtils/TagDelimiter";
import BxCube from "./icons/bxs-cube.svg";
const NA = "N/A";
export class GroupMemberItem extends React.Component {
    constructor() {
        super(...arguments);
        this.imgNode = React.createRef();
    }
    render() {
        var _a;
        return (_jsxs("div", { children: [_jsxs("div", { ref: this.imgNode, style: { position: "relative", minHeight: this.props.minHeight }, children: [imageIcon(this.props.item), _jsx("img", { src: memberImgUrl(this.props.item, this.props.groupProvenanceId), alt: "image", style: { width: "100%" }, onLoad: this.minHeight.bind(this) })] }), _jsxs("div", { className: "bg-light border-top p-md-4", children: [hasGroup3D(this.props.groupProvenanceId) ?
                            _jsxs("div", { children: [_jsx(BxCube, Object.assign({}, GroupMemberItem.ICON_PROPS)), " ", _jsx("strong", { children: "Explore in 3D" }), ": ", _jsx("a", { href: alignment1d3dUrl(this.props.groupId, this.props.searchQuery), children: GroupMemberItem.SEQUENCE_ALIGNMENT_3D_LINK })] }) : null, _jsxs("div", { children: [_jsx("strong", { children: memberSummaryUrlText(this.props.item, this.props.groupProvenanceId) }), _jsx("span", { children: " - " }), _jsx("a", { href: memberSummaryUrl(this.props.item, this.props.groupProvenanceId), children: "Summary" }), _jsx("span", { children: " | " }), _jsx("a", { href: member3DViewUrl(this.props.item, this.props.groupProvenanceId), children: "Structure" })] }), _jsxs("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, title: this.props.item.name, children: [_jsx("strong", { children: "Name: " }), this.props.item.name] }), _jsxs("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, children: [_jsx("strong", { children: "Organism: " }), this.props.item.taxNames.join(", ")] }), _jsxs("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, title: this.props.item.experimentalMethod, children: [_jsx("strong", { children: "Experimental Method: " }), (_a = this.props.item.experimentalMethod) !== null && _a !== void 0 ? _a : NA] }), (_jsxs("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, children: [_jsx("strong", { children: "Resolution: " }), this.props.item.resolution ? `${formatRes(this.props.item.resolution)} Å` : NA] })), this.props.item.molecularWeight ? (_jsxs("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, children: [_jsx("strong", { children: "Molecular Weight: " }), `${this.props.item.molecularWeight} kDa`] })) : null] })] }));
    }
    minHeight() {
        if (this.props.minHeight !== this.imgNode.current.offsetHeight)
            this.props.setMinHeight(this.imgNode.current.offsetHeight);
    }
}
GroupMemberItem.SEQUENCE_ALIGNMENT_3D_LINK = "Sequence Alignments";
GroupMemberItem.ICON_PROPS = {
    width: 15,
    height: 15,
    viewBox: "0 0 24 24"
};
function formatRes(x) {
    return Math.round(x * 10) / 10;
}
function memberImgUrl(ei, groupProvenanceId) {
    if (groupProvenanceId === GroupProvenanceId.ProvenanceMatchingDepositGroupId)
        return resource.rcsb_cdn.url + ei.entryId.toLowerCase().substring(1, 3) + "/" + ei.entryId.toLowerCase() + "/" + ei.entryId.toLowerCase() + "_model-1.jpeg";
    return resource.rcsb_cdn.url + (ei.entityId && TagDelimiter.isRcsbId(ei.entityId) ? ei.entryId.toLowerCase().substring(1, 3) + "/" + ei.entryId.toLowerCase() : "") + "/" + ei.entryId.toLowerCase() + "_chain-" + ei.asymId + ".jpeg";
}
function alignment1d3dUrl(groupId, searchQuery) {
    return resource["1d3d-alignment"].url + groupId + (searchQuery ? resource["1d3d-alignment"].url_suffix + JSON.stringify(searchQuery) : "");
}
function memberSummaryUrl(ei, groupProvenanceId) {
    if (groupProvenanceId === GroupProvenanceId.ProvenanceMatchingDepositGroupId)
        return resource.rcsb_entry.url + ei.entryId.toLowerCase();
    return resource.rcsb_entry.url + ei.entryId.toLowerCase() + "#entity-" + ei.entityId;
}
function member3DViewUrl(ei, groupProvenanceId) {
    return resource.rcsb_3d_view.url + ei.entryId.toLowerCase();
}
function memberSummaryUrlText(ei, groupProvenanceId) {
    if (groupProvenanceId === GroupProvenanceId.ProvenanceMatchingDepositGroupId)
        return ei.entryId;
    return ei.entryId + TagDelimiter.entity + ei.entityId;
}
function hasGroup3D(groupProvenanceId) {
    return groupProvenanceId !== GroupProvenanceId.ProvenanceMatchingDepositGroupId;
}
function imageIcon(ei) {
    const isExperimental = ei.structureDeterminationMethodology === StructureDeterminationMethodology.Experimental || ei.structureDeterminationMethodology === StructureDeterminationMethodology.Integrative;
    const isIntegrative = ei.structureDeterminationMethodology === StructureDeterminationMethodology.Integrative;
    return (_jsx("div", { style: {
            position: "absolute",
            top: "0.2em",
            right: "0.2em"
        }, children: _jsx("div", { style: {
                width: 28,
                height: 28,
                fontSize: 18,
                position: "relative",
                display: "inline-block",
                color: "#FFF",
                borderRadius: 4,
                backgroundColor: isExperimental ? "#325880" : "#05d0e7"
            }, children: _jsx("span", { style: {
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)"
                }, className: `fa ${isExperimental ? (isIntegrative ? "fa-puzzle-piece" : "fa-flask") : "fa-desktop"}` }) }) }));
}
//# sourceMappingURL=GroupMemberItem.js.map