WaveComponent.jsx

import PropTypes from "prop-types";
import React from "react";

import { Wave } from "../wave";

/*
 * Wrapper component for materials visualizer. Uses Wave class to render a material structure.
 * See below for property description.
 */
export class WaveComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // eslint-disable-next-line react/no-unused-state
            isFullscreen: false,
        };
    }

    componentDidMount() {
        this.initViewer();
    }

    // eslint-disable-next-line no-unused-vars
    componentDidUpdate(prevProps, prevState, snapshot) {
        const {
            structure: prevStructure,
            settings: prevSettings,
            isConventionalCellShown: prevIsConventionalCellShown,
            isDrawBondsEnabled: prevIsDrawBondsEnabled,
        } = prevProps;
        const {
            settings,
            structure,
            triggerHandleResize,
            isConventionalCellShown,
            isViewAdjustable,
            isDrawBondsEnabled,
        } = this.props;
        if (triggerHandleResize) this._handleResizeTransition();
        if (this.wave && !this.wave.bypassReloadViewer) {
            // recreate bonds asynchronously if structure is changed.
            this.reloadViewer(
                prevStructure.hash !== structure.hash ||
                    prevSettings.chemicalConnectivityFactor !==
                        settings.chemicalConnectivityFactor ||
                    prevIsConventionalCellShown !== isConventionalCellShown ||
                    prevIsDrawBondsEnabled !== isDrawBondsEnabled,
            );
        }

        if (this.shouldViewerAdjust(prevProps) && isViewAdjustable) {
            this.wave.adjustCamerasAndOrbitControlsToCell();
            this.wave.render();
        }
    }

    componentWillUnmount() {
        if (this._resizeTransitionTimeout) {
            clearTimeout(this._resizeTransitionTimeout);
            this._resizeTransitionTimeout = null;
        }
        this.wave?.dispose();
    }

    shouldViewerAdjust(prevProps) {
        const { cell } = this.props;
        const { cell: prevCell } = prevProps;
        const EPSILON = 1e-5; // Å; well below any physically meaningful lattice difference

        if (cell.units !== prevCell.units) return true;

        return ["ax", "ay", "az", "bx", "by", "bz", "cx", "cy", "cz"].some(
            (key) => Math.abs((cell[key] ?? 0) - (prevCell[key] ?? 0)) > EPSILON,
        );
    }

    _cleanViewer() {
        const el = this.rendererDomElement;
        while (el.firstChild) {
            el.removeChild(el.firstChild);
        }
    }

    initViewer() {
        // A prior Wave instance (e.g. from a "Reset View" re-init) must release its WebGL
        // context, resize observer, and editor listeners before a new one is constructed for
        // the same container, otherwise each reset leaks a full renderer.
        this.wave?.dispose();
        this._cleanViewer();
        const { structure, cell, settings, boundaryConditions } = this.props;
        this.wave = new Wave({
            DOMElement: this.rendererDomElement,
            structure,
            cell,
            settings,
            boundaryConditions,
        });
        // The height of the dom element is initially zero as css is loaded after component is rendered, hence below.
        this._handleResizeTransition();
    }

    _handleResizeTransition() {
        // TODO: use standard recommended way
        // This is a workaround: OrbitControls in Wave.js listens to resize events properly, but fails to resize the
        // renderer component on fullscreen event. Here we explicitly do that and wait for the event to finish, assuming
        // that 500 milliseconds is enough.
        //
        // The handle is retained so componentWillUnmount can cancel it: unmounting inside the
        // 500ms window otherwise ran handleResize() against an already-disposed renderer.
        // Any pending transition is superseded rather than stacked, since only the latest
        // container size matters.
        if (this._resizeTransitionTimeout) clearTimeout(this._resizeTransitionTimeout);
        this._resizeTransitionTimeout = setTimeout(() => {
            this._resizeTransitionTimeout = null;
            this.wave?.handleResize();
        }, 500);
    }

    reloadViewer(createBondsAsync) {
        // Deliberately not wrapped in try/catch. This used to swallow every exception into a
        // console.warn, justified by tests having no WebGL - but the suite now renders through
        // a real headless-gl context, so the only thing the catch achieved in production was
        // hiding genuine render failures behind a stale viewer and a console message.
        const { settings, structure, boundaryConditions, cell } = this.props;
        this.wave.updateSettings(settings);
        this.wave.setStructure(structure);
        this.wave.boundaryConditions = boundaryConditions;
        this.wave.setCell(cell);
        if (createBondsAsync) this.wave.createBondsAsync();
        this.wave.rebuildScene();
    }

    render() {
        return (
            <div
                id={this.id}
                className="three-renderer"
                ref={(el) => {
                    this.rendererDomElement = el;
                }}
            />
        );
    }
}

WaveComponent.propTypes = {
    // Whether to trigger handleResizeTransition() on update
    triggerHandleResize: PropTypes.bool.isRequired,
    // Wave settings
    // eslint-disable-next-line react/forbid-prop-types
    settings: PropTypes.object.isRequired,
    // Material structure to be visualized
    // eslint-disable-next-line react/forbid-prop-types
    structure: PropTypes.object.isRequired,
    // Expects "cell" property to represent the crystal unit cell for the atomic arrangement. Made.js UnitCell object.
    // eslint-disable-next-line react/forbid-prop-types
    cell: PropTypes.object.isRequired,
    // eslint-disable-next-line react/forbid-prop-types
    boundaryConditions: PropTypes.object.isRequired,
    isConventionalCellShown: PropTypes.bool.isRequired,
    isDrawBondsEnabled: PropTypes.bool.isRequired,
    isViewAdjustable: PropTypes.bool.isRequired,
};