Feature/hover lab view

[meganrm]

Problem

Estimated review size: small

the toggle between "Lab View" and "Molecular View" was too jarring (the whole screen changed and didn't allow for side by side comparison.

Solution

Have the "lab view" be just a small overlay that shows the cuvette instead of changing the whole panel.

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

Steps to Verify:

1. bun dev
2. click forward
3. now when you open the lab view, it's a little overlay

Screenshots (optional):

Design

Implementation

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated no new comments.

Suppressed comments (5)

src/components/ScaleBar.tsx:13

• Destructured keys must be alphabetical under the project guideline, so className should come before productColor.

const ScaleBar: React.FC<ScaleBarProps> = ({ productColor, className }) => {

src/components/ViewSwitch.tsx:55

• On non-intro pages this branch removes all text from the toggle, while LabIcon has no accessible SVG name (src/components/icons/Lab.tsx:5-11), so assistive technology encounters an unnamed button. Give the toggle a state-aware accessible name and expose its pressed state.

                        {/* on the first page we show text, but on other pages we just show the icon */}
                        {isFirstPageOfFirstModule
                            ? `${isLabViewOpen ? "Simulation" : "Lab"} view`
                            : null}

src/components/shared/ButtonLibrary.tsx:97

• active is a styling-only wrapper prop, but {...props} also passes it through AntD to the native button. This produces an invalid boolean DOM attribute warning whenever this component receives active; omit the wrapper prop from the forwarded object.

            {...props}
            className={classNames(props.className, { [styles.active]: active })}

src/components/ScaleBar.tsx:2

• The project guideline requires external imports to be alphabetized; classnames should precede react.

This issue also appears on line 13 of the same file.

import React from "react";
import classNames from "classnames";

src/components/LabView.tsx:20

• Destructured context keys must be alphabetical under the project guideline; order these as module, page, then setViewportType.

    const { page, module, setViewportType } = useSimulariumUi();