Molstar localisation

Molstar localisation

We can use a function similar to this:

async function translateMolstarUi(parent: RefObject<HTMLDivElement | null>) {
    const btn = parent.current?.querySelector(
        'button[title="Reset Zoom"]'
    ) as HTMLButtonElement;
    if (btn) btn.title = "Custom Reset";
    const btn2 = parent.current?.querySelector(
        'button[title*="Set camera zoom to fit"]'
    ) as HTMLButtonElement;
    if (btn) {
        btn2.title = "Custom Reset Tooltip";
        btn2.textContent = "Custom Reset";
    }

    const screenshotBtn = parent.current?.querySelector(
        'button[title="Screenshot / State Snapshot"]'
    ) as HTMLButtonElement;
    if (screenshotBtn) screenshotBtn.style.display = "none";

    const toggleControlsBtn = parent.current?.querySelector(
        'button[title="Toggle Controls Panel"]'
    ) as HTMLButtonElement;
    if (toggleControlsBtn) toggleControlsBtn.style.display = "none";
}

Usage in initMolstar:

// Initialize Molstar viewer.
    const parentRef = createRef<HTMLDivElement>();
    useEffect(() => {
       // ...
        initMolstar(
            parentRef.current as HTMLDivElement,
            {
                showControls: true,
                isExpanded: false,
            },
            snapshot,
        ).then(async () => {
            translateMolstarUi(parentRef);
            // ...
        });

        return () => {
            // ...
        };
    }, [...]);