@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
117 lines (116 loc) • 4.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RcsbFvRowTrack = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const RcsbFvTrack_1 = require("../RcsbFvTrack/RcsbFvTrack");
const RcsbFvDefaultConfigValues_1 = require("../RcsbFvConfig/RcsbFvDefaultConfigValues");
const classes = tslib_1.__importStar(require("../../scss/RcsbFvRow.module.scss"));
const RcsbFvContextManager_1 = require("../RcsbFvContextManager/RcsbFvContextManager");
const rxjs_1 = require("rxjs");
class RcsbFvRowTrack extends react_1.default.Component {
constructor(props) {
super(props);
/**Feature Viewer builder Async task*/
this.asyncTask = null;
this.state = {
rowTrackHeight: RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.trackHeight,
rowTrackConfigData: this.props.rowTrackConfigData,
mounted: false
};
}
render() {
return ((0, jsx_runtime_1.jsx)("div", { className: classes.rcsbFvRowTrack, style: this.configStyle(), children: (0, jsx_runtime_1.jsx)("div", { id: this.props.id, style: this.borderStyle() }) }));
}
componentDidMount() {
this.subscription = this.subscribe();
switch (this.props.renderSchedule) {
case "sync":
this.queueTask();
break;
case "fixed":
this.rcsbFvTrackInit();
break;
}
}
componentWillUnmount() {
this.subscription.unsubscribe();
if (this.asyncTask)
this.asyncTask.unsubscribe();
if (this.rcsbFvTrack != null) {
this.rcsbFvTrack.unsubscribe();
}
}
subscribe() {
return this.props.contextManager.subscribe((o) => {
switch (o.eventType) {
case RcsbFvContextManager_1.EventType.ROW_READY:
this.renderTrack(o.eventData);
break;
}
});
}
renderTrack(rowData) {
if (this.props.rowNumber - rowData.rowNumber == 1) {
this.queueTask();
}
}
queueTask() {
var _a;
(_a = this.asyncTask) === null || _a === void 0 ? void 0 : _a.unsubscribe();
this.asyncTask = rxjs_1.asyncScheduler.schedule(() => {
this.rcsbFvTrackInit();
this.props.contextManager.next({
eventType: RcsbFvContextManager_1.EventType.ROW_READY,
eventData: {
rowId: this.props.id,
rowNumber: this.props.rowNumber
}
});
});
}
rcsbFvTrackInit() {
if (this.rcsbFvTrack)
this.rcsbFvTrack.setConfig(this.props.rowTrackConfigData);
else
this.rcsbFvTrack = new RcsbFvTrack_1.RcsbFvTrack(this.props.rowTrackConfigData, this.props.xScale, this.props.selection, this.props.contextManager);
this.updateHeight();
}
/**This method is called when the final track height is known, it updates React Component height State*/
updateHeight() {
const height = this.rcsbFvTrack.getTrackHeight();
if (height != null) {
this.setState({
rowTrackHeight: height,
mounted: true
}, () => {
this.props.callbackRcsbFvRow(this.state.rowTrackHeight);
});
}
}
/**
* @return CSS style width and height for the cell
* */
configStyle() {
let width = RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.trackWidth;
if (typeof this.props.rowTrackConfigData.trackWidth === "number") {
width = this.props.rowTrackConfigData.trackWidth + 2 * RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.borderWidth;
}
return {
width: width,
height: this.state.rowTrackHeight
};
}
borderStyle() {
var _a, _b, _c;
const style = {};
style.borderColor = (_a = this.props.rowTrackConfigData.borderColor) !== null && _a !== void 0 ? _a : RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.borderColor;
if (this.props.rowTrackConfigData.displayType != "axis" /* RcsbFvDisplayTypes.AXIS */) {
style.borderLeft = (_b = this.props.rowTrackConfigData.borderWidth) !== null && _b !== void 0 ? _b : RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.borderWidth + "px solid #DDD";
style.borderRight = (_c = this.props.rowTrackConfigData.borderWidth) !== null && _c !== void 0 ? _c : RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.borderWidth + "px solid #DDD";
}
return style;
}
}
exports.RcsbFvRowTrack = RcsbFvRowTrack;