@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
130 lines (129 loc) • 6.18 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import * as classes from "../../scss/RcsbFvRow.module.scss";
import { EventType } from "../RcsbFvContextManager/RcsbFvContextManager";
import { RcsbFvUI } from "../RcsbFvUI/RcsbFvUI";
import { RcsbFvTable } from "./RcsbFvTable";
import { BoardGlow } from "./Components/BoardGlow";
import { RowGlow } from "./Components/RowGlow";
import { BoardProgress } from "./Components/BoardProgress";
/**Board React Component className*/
export class RcsbFvBoard extends React.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 (_jsxs("div", { className: classes.rcsbFvRootContainer, onMouseOver: this.setMouseOverCallback(), onMouseLeave: this.setMouseLeaveCallback(), children: [this.state.boardConfigData.disableMenu ? null : _jsx(RcsbFvUI, { boardId: this.props.boardId, boardConfigData: this.state.boardConfigData, contextManager: this.props.contextManager, xScale: this.xScale }), _jsx(BoardGlow, { boardId: this.props.boardId, boardConfigData: this.state.boardConfigData, contextManager: this.props.contextManager }), _jsx(RowGlow, { boardId: this.props.boardId, boardConfigData: this.state.boardConfigData, contextManager: this.props.contextManager }), _jsx(RcsbFvTable, { boardId: this.props.boardId, xScale: this.xScale, selection: this.selection, contextManager: this.props.contextManager, boardConfigData: this.state.boardConfigData, rowConfigData: this.state.rowConfigData }), _jsx("div", { id: this.props.boardId + "_tooltip" /* RcsbFvDOMConstants.TOOLTIP_DOM_ID_PREFIX */, className: classes.rcsbFvTooltip, ["popper-hidden" /* RcsbFvDOMConstants.POPPER_HIDDEN */]: "" }), _jsx("div", { id: this.props.boardId + "_tooltipDescription" /* RcsbFvDOMConstants.TOOLTIP_DESCRIPTION_DOM_ID_PREFIX */, className: classes.rcsbFvTooltipDescription, ["popper-hidden" /* RcsbFvDOMConstants.POPPER_HIDDEN */]: "" }), _jsx(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 EventType.UPDATE_BOARD_CONFIG:
this.resetReadyStatus(obj.eventResolve);
this.updateBoardConfig(obj.eventData);
break;
case 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: EventType.BOARD_HOVER,
eventData: flag
});
}
}