@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
79 lines (78 loc) • 3.43 kB
JavaScript
import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import * as classes from "../../../scss/RcsbFvRow.module.scss";
import { RcsbFvDefaultConfigValues } from "../../RcsbFvConfig/RcsbFvDefaultConfigValues";
import { EventType } from "../../RcsbFvContextManager/RcsbFvContextManager";
import { computePosition, detectOverflow } from "@floating-ui/dom";
export class BoardProgress extends React.Component {
render() {
return (_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 ", _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 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.trackAxisHeight - 2;
computePosition(this.refDiv, this.tooltipDiv, {
placement: 'right-start',
middleware: [{
name: 'middleware',
fn(middlewareArguments) {
return __awaiter(this, void 0, void 0, function* () {
const overflow = yield 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";
}
}