@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
86 lines (85 loc) • 4.97 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RcsbFvTable = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const RcsbFvContextManager_1 = require("../RcsbFvContextManager/RcsbFvContextManager");
const RcsbFvDefaultConfigValues_1 = require("../RcsbFvConfig/RcsbFvDefaultConfigValues");
const RcsbFvRow_1 = require("../RcsbFvRow/RcsbFvRow");
const classes = tslib_1.__importStar(require("../../scss/RcsbFvRow.module.scss"));
const RowConfigFactory_1 = require("./Utils/RowConfigFactory");
const AxisRow_1 = require("./Components/AxisRow");
class RcsbFvTable extends react_1.default.Component {
constructor(props) {
super(props);
this.xScale = props.xScale;
this.selection = props.selection;
this.boardId = props.boardId;
}
render() {
return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(RcsbFvRow_1.RcsbFvRow, { id: rowId, boardId: this.boardId, rowNumber: rowNumber, rowConfigData: RowConfigFactory_1.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: RcsbFvContextManager_1.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 ((0, jsx_runtime_1.jsx)(AxisRow_1.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_1.RcsbFvDefaultConfigValues.rowTitleWidth;
if (typeof this.props.boardConfigData.rowTitleWidth === "number") {
titleWidth = this.props.boardConfigData.rowTitleWidth;
}
let trackWidth = RcsbFvDefaultConfigValues_1.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_1.RcsbFvDefaultConfigValues.borderWidth) * 2 + RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.titleAndTrackSpace)
};
}
}
exports.RcsbFvTable = RcsbFvTable;
function border(boardConfigData) {
const height = RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.borderWidth;
return ((0, jsx_runtime_1.jsx)("div", { style: {
width: "100%",
height
}, children: (0, jsx_runtime_1.jsx)("div", { style: {
width: boardConfigData.trackWidth,
height: 0,
float: "right",
borderTop: height + "px solid #DDD",
borderLeft: RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.borderWidth + "px solid #DDD",
borderRight: RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.borderWidth + "px solid #DDD"
} }) }));
}