@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvRow/RcsbFvRowTrack.js

RCSB 1D Feature Viewer

import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { RcsbFvTrack } from "../RcsbFvTrack/RcsbFvTrack";
import { RcsbFvDefaultConfigValues } from "../RcsbFvConfig/RcsbFvDefaultConfigValues";
import * as classes from "../../scss/RcsbFvRow.module.scss";
import { EventType } from "../RcsbFvContextManager/RcsbFvContextManager";
import { asyncScheduler } from 'rxjs';
export class RcsbFvRowTrack extends React.Component {
    constructor(props) {
        super(props);
        /**Feature Viewer builder Async task*/
        this.asyncTask = null;
        this.state = {
            rowTrackHeight: RcsbFvDefaultConfigValues.trackHeight,
            rowTrackConfigData: this.props.rowTrackConfigData,
            mounted: false
        };
    }
    render() {
        return (_jsx("div", { className: classes.rcsbFvRowTrack, style: this.configStyle(), children: _jsx("div", { id: this.props.id, style: this.borderStyle() }) }));
    }
    componentDidMount() {
        this.subscription = this.subscribe();
        switch (this.props.renderSchedule) {
            case "sync":
                this.queueTask();
                break;
            case "fixed":
                this.rcsbFvTrackInit();
                break;
        }
    }
    componentWillUnmount() {
        this.subscription.unsubscribe();
        if (this.asyncTask)
            this.asyncTask.unsubscribe();
        if (this.rcsbFvTrack != null) {
            this.rcsbFvTrack.unsubscribe();
        }
    }
    subscribe() {
        return this.props.contextManager.subscribe((o) => {
            switch (o.eventType) {
                case EventType.ROW_READY:
                    this.renderTrack(o.eventData);
                    break;
            }
        });
    }
    renderTrack(rowData) {
        if (this.props.rowNumber - rowData.rowNumber == 1) {
            this.queueTask();
        }
    }
    queueTask() {
        var _a;
        (_a = this.asyncTask) === null || _a === void 0 ? void 0 : _a.unsubscribe();
        this.asyncTask = asyncScheduler.schedule(() => {
            this.rcsbFvTrackInit();
            this.props.contextManager.next({
                eventType: EventType.ROW_READY,
                eventData: {
                    rowId: this.props.id,
                    rowNumber: this.props.rowNumber
                }
            });
        });
    }
    rcsbFvTrackInit() {
        if (this.rcsbFvTrack)
            this.rcsbFvTrack.setConfig(this.props.rowTrackConfigData);
        else
            this.rcsbFvTrack = new RcsbFvTrack(this.props.rowTrackConfigData, this.props.xScale, this.props.selection, this.props.contextManager);
        this.updateHeight();
    }
    /**This method is called when the final track height is known, it updates React Component height State*/
    updateHeight() {
        const height = this.rcsbFvTrack.getTrackHeight();
        if (height != null) {
            this.setState({
                rowTrackHeight: height,
                mounted: true
            }, () => {
                this.props.callbackRcsbFvRow(this.state.rowTrackHeight);
            });
        }
    }
    /**
     * @return CSS style width and height for the cell
     * */
    configStyle() {
        let width = RcsbFvDefaultConfigValues.trackWidth;
        if (typeof this.props.rowTrackConfigData.trackWidth === "number") {
            width = this.props.rowTrackConfigData.trackWidth + 2 * RcsbFvDefaultConfigValues.borderWidth;
        }
        return {
            width: width,
            height: this.state.rowTrackHeight
        };
    }
    borderStyle() {
        var _a, _b, _c;
        const style = {};
        style.borderColor = (_a = this.props.rowTrackConfigData.borderColor) !== null && _a !== void 0 ? _a : RcsbFvDefaultConfigValues.borderColor;
        if (this.props.rowTrackConfigData.displayType != "axis" /* RcsbFvDisplayTypes.AXIS */) {
            style.borderLeft = (_b = this.props.rowTrackConfigData.borderWidth) !== null && _b !== void 0 ? _b : RcsbFvDefaultConfigValues.borderWidth + "px solid #DDD";
            style.borderRight = (_c = this.props.rowTrackConfigData.borderWidth) !== null && _c !== void 0 ? _c : RcsbFvDefaultConfigValues.borderWidth + "px solid #DDD";
        }
        return style;
    }
}