@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
83 lines (82 loc) • 3.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BoardProgress = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const classes = tslib_1.__importStar(require("../../../scss/RcsbFvRow.module.scss"));
const RcsbFvDefaultConfigValues_1 = require("../../RcsbFvConfig/RcsbFvDefaultConfigValues");
const RcsbFvContextManager_1 = require("../../RcsbFvContextManager/RcsbFvContextManager");
const dom_1 = require("@floating-ui/dom");
class BoardProgress extends react_1.default.Component {
render() {
return ((0, jsx_runtime_1.jsxs)("div", { id: this.props.boardId + "_progressDiv" /* RcsbFvDOMConstants.PROGRESS_DIV_DOM_ID_PREFIX */, style: { position: "absolute", top: 0, left: 0, visibility: "hidden", minWidth: 150 }, className: classes.rowTrackBoardSatus, children: ["LOADING ", (0, jsx_runtime_1.jsx)("span", {})] }));
}
componentDidMount() {
this.subscription = this.subscribe();
const refDiv = document.querySelector("#" + this.props.boardId);
if (refDiv == null)
throw "Main board DOM element not found";
this.refDiv = refDiv;
const tooltipDiv = document.querySelector("#" + this.props.boardId + "_progressDiv" /* RcsbFvDOMConstants.PROGRESS_DIV_DOM_ID_PREFIX */);
if (tooltipDiv == null)
throw "Tooltip DOM element not found";
this.tooltipDiv = tooltipDiv;
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
subscribe() {
return this.props.contextManager.subscribe((o) => {
switch (o.eventType) {
case RcsbFvContextManager_1.EventType.FRACTION_COMPLETED:
this.rowReady(o.eventData);
break;
}
});
}
/**Row Track Board Ready Event
* @param fraction
* */
rowReady(fraction) {
if (fraction >= 100) {
this.statusComplete();
}
else {
if (this.tooltipDiv.style.visibility == 'hidden')
this.showStatus();
const statusDiv = document.querySelector("#" + this.props.boardId + "_progressDiv" /* RcsbFvDOMConstants.PROGRESS_DIV_DOM_ID_PREFIX */ + " > span");
if (statusDiv != null)
statusDiv.innerHTML = fraction.toString() + "%";
}
}
showStatus() {
const offsetHeight = this.props.boardConfigData.includeAxis === true ? 0 : -RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.trackAxisHeight - 2;
(0, dom_1.computePosition)(this.refDiv, this.tooltipDiv, {
placement: 'right-start',
middleware: [{
name: 'middleware',
fn(middlewareArguments) {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const overflow = yield (0, dom_1.detectOverflow)(middlewareArguments, {
rootBoundary: "viewport"
});
if (overflow.top > offsetHeight)
return { y: overflow.top + middlewareArguments.y - offsetHeight };
return {};
});
},
}]
}).then(({ x, y }) => {
Object.assign(this.tooltipDiv.style, {
left: `${x}px`,
top: `${y + offsetHeight}px`,
visibility: 'visible'
});
});
}
statusComplete() {
this.tooltipDiv.style.visibility = "hidden";
}
}
exports.BoardProgress = BoardProgress;