@rcsb/rcsb-saguaro-app
Version:
RCSB 1D Saguaro Web App
84 lines (83 loc) • 7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GroupMemberItem = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const web_resources_json_1 = tslib_1.__importDefault(require("../../../RcsbServerConfig/web.resources.json"));
const DwEnums_1 = require("@rcsb/rcsb-api-tools/lib/RcsbDw/Types/DwEnums");
const TagDelimiter_1 = require("@rcsb/rcsb-api-tools/lib/RcsbUtils/TagDelimiter");
const bxs_cube_svg_1 = tslib_1.__importDefault(require("./icons/bxs-cube.svg"));
const NA = "N/A";
class GroupMemberItem extends react_1.default.Component {
constructor() {
super(...arguments);
this.imgNode = react_1.default.createRef();
}
render() {
var _a;
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { ref: this.imgNode, style: { position: "relative", minHeight: this.props.minHeight }, children: [imageIcon(this.props.item), (0, jsx_runtime_1.jsx)("img", { src: memberImgUrl(this.props.item, this.props.groupProvenanceId), alt: "image", style: { width: "100%" }, onLoad: this.minHeight.bind(this) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-light border-top p-md-4", children: [hasGroup3D(this.props.groupProvenanceId) ?
(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(bxs_cube_svg_1.default, Object.assign({}, GroupMemberItem.ICON_PROPS)), " ", (0, jsx_runtime_1.jsx)("strong", { children: "Explore in 3D" }), ": ", (0, jsx_runtime_1.jsx)("a", { href: alignment1d3dUrl(this.props.groupId, this.props.searchQuery), children: GroupMemberItem.SEQUENCE_ALIGNMENT_3D_LINK })] }) : null, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: memberSummaryUrlText(this.props.item, this.props.groupProvenanceId) }), (0, jsx_runtime_1.jsx)("span", { children: " - " }), (0, jsx_runtime_1.jsx)("a", { href: memberSummaryUrl(this.props.item, this.props.groupProvenanceId), children: "Summary" }), (0, jsx_runtime_1.jsx)("span", { children: " | " }), (0, jsx_runtime_1.jsx)("a", { href: member3DViewUrl(this.props.item, this.props.groupProvenanceId), children: "Structure" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, title: this.props.item.name, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Name: " }), this.props.item.name] }), (0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Organism: " }), this.props.item.taxNames.join(", ")] }), (0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, title: this.props.item.experimentalMethod, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Experimental Method: " }), (_a = this.props.item.experimentalMethod) !== null && _a !== void 0 ? _a : NA] }), ((0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Resolution: " }), this.props.item.resolution ? `${formatRes(this.props.item.resolution)} Å` : NA] })), this.props.item.molecularWeight ? ((0, jsx_runtime_1.jsxs)("div", { style: { textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }, children: [(0, jsx_runtime_1.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);
}
}
exports.GroupMemberItem = GroupMemberItem;
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 === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId)
return web_resources_json_1.default.rcsb_cdn.url + ei.entryId.toLowerCase().substring(1, 3) + "/" + ei.entryId.toLowerCase() + "/" + ei.entryId.toLowerCase() + "_model-1.jpeg";
return web_resources_json_1.default.rcsb_cdn.url + (ei.entityId && TagDelimiter_1.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 web_resources_json_1.default["1d3d-alignment"].url + groupId + (searchQuery ? web_resources_json_1.default["1d3d-alignment"].url_suffix + JSON.stringify(searchQuery) : "");
}
function memberSummaryUrl(ei, groupProvenanceId) {
if (groupProvenanceId === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId)
return web_resources_json_1.default.rcsb_entry.url + ei.entryId.toLowerCase();
return web_resources_json_1.default.rcsb_entry.url + ei.entryId.toLowerCase() + "#entity-" + ei.entityId;
}
function member3DViewUrl(ei, groupProvenanceId) {
return web_resources_json_1.default.rcsb_3d_view.url + ei.entryId.toLowerCase();
}
function memberSummaryUrlText(ei, groupProvenanceId) {
if (groupProvenanceId === DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId)
return ei.entryId;
return ei.entryId + TagDelimiter_1.TagDelimiter.entity + ei.entityId;
}
function hasGroup3D(groupProvenanceId) {
return groupProvenanceId !== DwEnums_1.GroupProvenanceId.ProvenanceMatchingDepositGroupId;
}
function imageIcon(ei) {
const isExperimental = ei.structureDeterminationMethodology === DwEnums_1.StructureDeterminationMethodology.Experimental || ei.structureDeterminationMethodology === DwEnums_1.StructureDeterminationMethodology.Integrative;
const isIntegrative = ei.structureDeterminationMethodology === DwEnums_1.StructureDeterminationMethodology.Integrative;
return ((0, jsx_runtime_1.jsx)("div", { style: {
position: "absolute",
top: "0.2em",
right: "0.2em"
}, children: (0, jsx_runtime_1.jsx)("div", { style: {
width: 28,
height: 28,
fontSize: 18,
position: "relative",
display: "inline-block",
color: "#FFF",
borderRadius: 4,
backgroundColor: isExperimental ? "#325880" : "#05d0e7"
}, children: (0, jsx_runtime_1.jsx)("span", { style: {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
}, className: `fa ${isExperimental ? (isIntegrative ? "fa-puzzle-piece" : "fa-flask") : "fa-desktop"}` }) }) }));
}