@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
81 lines (80 loc) • 4.36 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { EventType, } from "../RcsbFvContextManager/RcsbFvContextManager";
import { RcsbFvDefaultConfigValues } from "../RcsbFvConfig/RcsbFvDefaultConfigValues";
import { RcsbFvRow } from "../RcsbFvRow/RcsbFvRow";
import * as classes from "../../scss/RcsbFvRow.module.scss";
import { RowConfigFactory } from "./Utils/RowConfigFactory";
import { AxisRow } from "./Components/AxisRow";
export class RcsbFvTable extends React.Component {
constructor(props) {
super(props);
this.xScale = props.xScale;
this.selection = props.selection;
this.boardId = props.boardId;
}
render() {
return (_jsxs("div", { id: this.boardId, className: classes.rcsbFvBoard, style: this.configStyle(), onMouseLeave: this.setMouseLeaveBoardCallback(), children: [this.props.boardConfigData.includeAxis ? this.getAxisRow() : null, border(this.props.boardConfigData), this.props.rowConfigData.filter((rowData) => {
return rowData.trackVisibility != false;
}).map((rowConfig, n) => {
var _a;
const rowId = rowConfig.trackId;
const rowNumber = n + (this.props.boardConfigData.includeAxis ? 1 : 0);
return (_jsx("div", { children: _jsx(RcsbFvRow, { id: rowId, boardId: this.boardId, rowNumber: rowNumber, rowConfigData: RowConfigFactory.getConfig(rowId, this.boardId, rowConfig, this.props.boardConfigData), xScale: this.xScale, selection: this.selection, contextManager: this.props.contextManager, renderSchedule: rowNumber == (this.props.boardConfigData.includeAxis ? 1 : 0) ? "sync" : ((_a = rowConfig.renderSchedule) !== null && _a !== void 0 ? _a : "async") }) }, rowConfig.key));
}), border(this.props.boardConfigData)] }));
}
setMouseLeaveBoardCallback() {
if (this.props.boardConfigData.highlightHoverPosition === true || typeof this.props.boardConfigData.highlightHoverCallback === "function")
return this.mouseLeaveBoardCallback.bind(this);
else
return undefined;
}
mouseLeaveBoardCallback() {
if (this.props.boardConfigData.highlightHoverPosition === true) {
this.props.contextManager.next({
eventType: EventType.SET_SELECTION,
eventData: {
elements: null,
mode: "hover"
}
});
}
if (this.props.boardConfigData.highlightHoverCallback) {
this.props.boardConfigData.highlightHoverCallback(this.selection.getSelected('hover').map(r => r.rcsbFvTrackDataElement));
}
}
getAxisRow() {
return (_jsx(AxisRow, { boardId: this.props.boardId, xScale: this.xScale, selection: this.selection, contextManager: this.props.contextManager, boardConfigData: this.props.boardConfigData }));
}
/**Returns the full track width (title+annotations)
* @return Board track full width
* */
configStyle() {
var _a;
let titleWidth = RcsbFvDefaultConfigValues.rowTitleWidth;
if (typeof this.props.boardConfigData.rowTitleWidth === "number") {
titleWidth = this.props.boardConfigData.rowTitleWidth;
}
let trackWidth = RcsbFvDefaultConfigValues.rowTitleWidth;
if (typeof this.props.boardConfigData.trackWidth === "number") {
trackWidth = this.props.boardConfigData.trackWidth;
}
return {
width: (titleWidth + trackWidth + ((_a = this.props.boardConfigData.borderWidth) !== null && _a !== void 0 ? _a : RcsbFvDefaultConfigValues.borderWidth) * 2 + RcsbFvDefaultConfigValues.titleAndTrackSpace)
};
}
}
function border(boardConfigData) {
const height = RcsbFvDefaultConfigValues.borderWidth;
return (_jsx("div", { style: {
width: "100%",
height
}, children: _jsx("div", { style: {
width: boardConfigData.trackWidth,
height: 0,
float: "right",
borderTop: height + "px solid #DDD",
borderLeft: RcsbFvDefaultConfigValues.borderWidth + "px solid #DDD",
borderRight: RcsbFvDefaultConfigValues.borderWidth + "px solid #DDD"
} }) }));
}