@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
135 lines (134 loc) • 6.71 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RcsbFvBoard = 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 RcsbFvContextManager_1 = require("../RcsbFvContextManager/RcsbFvContextManager");
const RcsbFvUI_1 = require("../RcsbFvUI/RcsbFvUI");
const RcsbFvTable_1 = require("./RcsbFvTable");
const BoardGlow_1 = require("./Components/BoardGlow");
const RowGlow_1 = require("./Components/RowGlow");
const BoardProgress_1 = require("./Components/BoardProgress");
/**Board React Component className*/
class RcsbFvBoard extends react_1.default.Component {
constructor(props) {
super(props);
/**Promise resolve callback when board is complete*/
this.resolveOnReady = undefined;
this.state = {
/**Array of configurations for each board track*/
rowConfigData: this.props.rowConfigData,
/**Board global configuration*/
boardConfigData: this.props.boardConfigData,
/**Row Track Board rendered status (%)*/
progressStatus: 0
};
this.resolveOnReady = props.resolve;
this.xScale = props.xScale;
this.selection = props.selection;
}
render() {
this.renderStarts();
return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rcsbFvRootContainer, onMouseOver: this.setMouseOverCallback(), onMouseLeave: this.setMouseLeaveCallback(), children: [this.state.boardConfigData.disableMenu ? null : (0, jsx_runtime_1.jsx)(RcsbFvUI_1.RcsbFvUI, { boardId: this.props.boardId, boardConfigData: this.state.boardConfigData, contextManager: this.props.contextManager, xScale: this.xScale }), (0, jsx_runtime_1.jsx)(BoardGlow_1.BoardGlow, { boardId: this.props.boardId, boardConfigData: this.state.boardConfigData, contextManager: this.props.contextManager }), (0, jsx_runtime_1.jsx)(RowGlow_1.RowGlow, { boardId: this.props.boardId, boardConfigData: this.state.boardConfigData, contextManager: this.props.contextManager }), (0, jsx_runtime_1.jsx)(RcsbFvTable_1.RcsbFvTable, { boardId: this.props.boardId, xScale: this.xScale, selection: this.selection, contextManager: this.props.contextManager, boardConfigData: this.state.boardConfigData, rowConfigData: this.state.rowConfigData }), (0, jsx_runtime_1.jsx)("div", { id: this.props.boardId + "_tooltip" /* RcsbFvDOMConstants.TOOLTIP_DOM_ID_PREFIX */, className: classes.rcsbFvTooltip, ["popper-hidden" /* RcsbFvDOMConstants.POPPER_HIDDEN */]: "" }), (0, jsx_runtime_1.jsx)("div", { id: this.props.boardId + "_tooltipDescription" /* RcsbFvDOMConstants.TOOLTIP_DESCRIPTION_DOM_ID_PREFIX */, className: classes.rcsbFvTooltipDescription, ["popper-hidden" /* RcsbFvDOMConstants.POPPER_HIDDEN */]: "" }), (0, jsx_runtime_1.jsx)(BoardProgress_1.BoardProgress, { boardId: this.props.boardId, boardConfigData: this.state.boardConfigData, rowConfigData: this.state.rowConfigData, contextManager: this.props.contextManager })] }));
}
componentDidMount() {
this.subscription = this.subscribe();
this.checkReadyState();
}
componentWillUnmount() {
this.subscription.unsubscribe();
this.props.contextManager.unsubscribeAll();
}
componentDidUpdate(prevProps, prevState, snapshot) {
this.checkReadyState(prevState);
}
/**Subscribe className to rxjs events (adding tracks, change scale, update board config)
* @return rxjs Subscription object
* */
subscribe() {
return this.props.contextManager.subscribe((obj) => {
switch (obj.eventType) {
case RcsbFvContextManager_1.EventType.UPDATE_BOARD_CONFIG:
this.resetReadyStatus(obj.eventResolve);
this.updateBoardConfig(obj.eventData);
break;
case RcsbFvContextManager_1.EventType.BOARD_READY:
this.boardReady();
break;
}
});
}
/**Updates board configuration
* @param configData Board and track configuration interface
* */
updateBoardConfig(configData) {
if (configData.rowConfigData != null && configData.boardConfigData != null) {
this.setState({
rowConfigData: configData.rowConfigData,
boardConfigData: Object.assign(Object.assign({}, this.state.boardConfigData), configData.boardConfigData)
});
}
else if (configData.boardConfigData != null) {
this.setState({
boardConfigData: Object.assign(Object.assign({}, this.state.boardConfigData), configData.boardConfigData)
});
}
else if (configData.rowConfigData != null) {
this.setState({
rowConfigData: configData.rowConfigData
});
}
}
setMouseOverCallback() {
if (this.state.boardConfigData.hideTrackFrameGlow)
return undefined;
else
return this.onMouseOver.bind(this);
}
setMouseLeaveCallback() {
if (this.state.boardConfigData.hideTrackFrameGlow)
return undefined;
else
return this.onMouseLeave.bind(this);
}
onMouseOver() {
this.boardHover(true);
}
onMouseLeave() {
this.boardHover(false);
}
resetReadyStatus(eventResolve) {
this.resolveOnReady = eventResolve;
}
checkReadyState(prevState) {
if ((!this.state.rowConfigData) ||
(this.state.rowConfigData.length == 0) ||
(prevState && this.state.rowConfigData.map(r => r.key).sort().join("-") == prevState.rowConfigData.map(r => r.key).sort().join("-"))) {
this.boardReady();
}
}
renderStarts() {
if (typeof this.state.boardConfigData.onFvRenderStartsCallback === "function")
this.state.boardConfigData.onFvRenderStartsCallback();
if (typeof this.state.boardConfigData.selectionChangeCallback === "function")
this.selection.setSelectionChangeCallback(this.state.boardConfigData.selectionChangeCallback);
}
/**
* Trigger Board Ready Event
**/
boardReady() {
if (typeof this.resolveOnReady === "function") {
this.resolveOnReady();
this.resolveOnReady = undefined;
}
}
boardHover(flag) {
this.props.contextManager.next({
eventType: RcsbFvContextManager_1.EventType.BOARD_HOVER,
eventData: flag
});
}
}
exports.RcsbFvBoard = RcsbFvBoard;