@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
95 lines (94 loc) • 4.93 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { RcsbFvDefaultConfigValues } from "../RcsbFvConfig/RcsbFvDefaultConfigValues";
import { RcsbFvRowTitle } from "./RcsbFvRowTitle";
import { RcsbFvRowTrack } from "./RcsbFvRowTrack";
import * as classes from "../../scss/RcsbFvRow.module.scss";
import { EventType } from "../RcsbFvContextManager/RcsbFvContextManager";
import { CSSTransition } from 'react-transition-group';
/**Board track React Component className*/
export class RcsbFvRow extends React.Component {
constructor(props) {
super(props);
this.state = {
rowHeight: RcsbFvDefaultConfigValues.trackHeight,
display: true,
mounted: false,
rowConfigData: this.props.rowConfigData,
titleGlow: false
};
this.rowRef = React.createRef();
}
render() {
var _a;
const classNames = this.props.rowConfigData.displayType === "axis" /* RcsbFvDisplayTypes.AXIS */ ? classes.rcsbFvRow + " " + classes.rcsbFvRowAxis : classes.rcsbFvRow;
return (_jsx(CSSTransition, { in: this.state.display, timeout: RcsbFvDefaultConfigValues.rowHideTransitionTimeout, classNames: classes.rcsbFvRow, onEntering: () => {
this.props.contextManager.next({ eventType: EventType.BOARD_HOVER, eventData: true });
}, onExited: () => {
this.props.contextManager.next({ eventType: EventType.BOARD_HOVER, eventData: true });
}, nodeRef: this.rowRef, children: _jsxs("div", { onMouseEnter: () => { this.hoverRow(true); }, onMouseLeave: () => { this.hoverRow(false); }, className: classNames + ((this.state.titleGlow && this.state.display) ? " " + classes.rcsbFvGlowTitle : ""), style: this.configStyle(), ref: this.rowRef, children: [_jsx(RcsbFvRowTitle, Object.assign({ data: this.props.rowConfigData, rowTitleHeight: this.state.rowHeight, isGlowing: this.state.titleGlow }, (_a = this.props.rowConfigData.externalRowTitle) === null || _a === void 0 ? void 0 : _a.rowTitleAdditionalProps)), _jsx(RcsbFvRowTrack, { id: this.props.id, rowNumber: this.props.rowNumber, rowTrackConfigData: this.props.rowConfigData, xScale: this.props.xScale, selection: this.props.selection, contextManager: this.props.contextManager, callbackRcsbFvRow: this.callbackRcsbFvRowTrack.bind(this), renderSchedule: this.props.renderSchedule })] }) }));
}
componentDidMount() {
this.subscription = this.subscribe();
}
componentWillUnmount() {
if (this.subscription != null) {
this.subscription.unsubscribe();
}
}
/**Subscribe className to rxjs events (adding tracks, change scale, update board config)
* @return rxjs Subscription object
* */
subscribe() {
return this.props.contextManager.subscribe((obj) => {
if (obj.eventType === EventType.TRACK_HIDE) {
const vis = obj.eventData;
if (vis.trackId === this.props.rowConfigData.trackId) {
this.changeClass(vis.visibility);
}
}
else if (obj.eventType === EventType.ROW_HOVER) {
const trackId = obj.eventData;
this.checkHoveredRow(trackId);
}
});
}
hoverRow(flag) {
if (!this.props.rowConfigData.hideRowGlow) {
this.setState(() => ({ titleGlow: flag }));
this.props.contextManager.next({
eventType: EventType.ROW_HOVER,
eventData: (this.props.rowConfigData.displayType != "axis" /* RcsbFvDisplayTypes.AXIS */ && flag) ? this.props.id : null
});
}
}
checkHoveredRow(trackId) {
if (trackId != this.props.id && this.state.titleGlow) {
this.setState(() => ({ titleGlow: false }));
}
}
changeClass(display) {
this.setState({ display: display });
}
/**This function will be called once the final height of the track is known*/
callbackRcsbFvRowTrack(rcsbRowTrackHeight) {
this.setState({ rowHeight: rcsbRowTrackHeight, mounted: true });
}
/**Returns the full track width (title+annotations) and height
* @return Board track full width
* */
configStyle() {
let titleWidth = RcsbFvDefaultConfigValues.rowTitleWidth;
if (typeof this.props.rowConfigData.rowTitleWidth === "number") {
titleWidth = this.props.rowConfigData.rowTitleWidth;
}
let trackWidth = RcsbFvDefaultConfigValues.trackWidth;
if (typeof this.props.rowConfigData.trackWidth === "number") {
trackWidth = this.props.rowConfigData.trackWidth + 2 * RcsbFvDefaultConfigValues.borderWidth;
}
return {
width: (titleWidth + trackWidth + RcsbFvDefaultConfigValues.titleAndTrackSpace),
height: this.state.rowHeight,
};
}
}