Merge branch 'dev' into hotfix/conditionally-disable-hotkeys

jest.config.js

@@ -24,7 +24,7 @@ module.exports = {
         "^.+\\.[t|j]sx?$": "babel-jest",
     },
 
-    transformIgnorePatterns: ["<rootDir>/node_modules/(?!(three|@exabyte-io/cove.js)/)"],
+    transformIgnorePatterns: ["<rootDir>/node_modules/(?!(three|color-diff|@exabyte-io/cove.js)/)"],
 
     // mock css files: https://jestjs.io/docs/en/webpack#handling-static-assets
     moduleNameMapper: {

package.json

@@ -39,7 +39,7 @@
         "@babel/runtime-corejs2": "7.16.7",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
-        "@exabyte-io/cove.js": "2023.8.18-0",
+        "@exabyte-io/cove.js": "2023.12.12-0",
         "@exabyte-io/periodic-table.js": "2022.5.5-2",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.9",
@@ -71,6 +71,7 @@
         "@babel/preset-typescript": "^7.22.5",
         "@exabyte-io/eslint-config": "^2023.8.29-1",
         "@exabyte-io/made.js": "2022.5.5-3",
+        "@exabyte-io/code.js": "2023.11.22-0",
         "@types/react": "^18.2.8",
         "@types/react-dom": "^18.2.4",
         "@types/underscore": "^1.11.9",

src/components/IconsToolbar.tsx

@@ -5,6 +5,7 @@ import NestedDropdown, {
 } from "@exabyte-io/cove.js/dist/mui/components/nested-dropdown/NestedDropdown";
 import PowerSettingsNew from "@mui/icons-material/PowerSettingsNew";
 import ButtonGroup from "@mui/material/ButtonGroup";
+import Paper from "@mui/material/Paper";
 import { SxProps, useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import React from "react";
@@ -35,75 +36,81 @@ function IconsToolbar(props: IconToolbarProps) {
     const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
     const toolbarStyle = {
         position: "absolute",
-        top: "25px",
-        left: "25px",
+        top: "1em",
+        left: "1em",
         boxShadow: theme.shadows[4],
     };
 
     const paperSx: SxProps = {
-        marginLeft: theme.spacing(2),
+        marginLeft: theme.spacing(1),
         boxShadow: theme.shadows[4],
     };
 
     return (
-        <ButtonGroup
-            key="toolbar-button-group"
-            orientation="vertical"
-            sx={toolbarStyle}
-            variant="outlined"
-            color="secondary"
-        >
-            <SquareIconButton
-                key="toggle-interactive"
-                title="Interactive"
-                data-name="Interactive"
-                onClick={handleToggleInteractive}
+        <Paper elevation={2}>
+            <ButtonGroup
+                key="toolbar-button-group"
+                orientation="vertical"
+                sx={toolbarStyle}
+                variant="outlined"
+                color="inherit"
             >
-                {isInteractive ? (
-                    <IconByName name="actions.close" sx={{ color: theme.palette.warning.main }} />
-                ) : (
-                    <PowerSettingsNew />
-                )}
-            </SquareIconButton>
-            {isInteractive &&
-                toolbarConfig.map((config) => {
-                    if (config.actions || config.contentObject) {
-                        return (
-                            <NestedDropdown
-                                /* eslint-disable-next-line react/jsx-props-no-spreading */
-                                {...config}
-                                actions={config.actions}
-                                contentObject={config.contentObject}
-                                key={config.key || config.id}
-                                data-name={config.id}
-                                paperPlacement={config.paperPlacement || "right-start"}
-                                paperSx={paperSx}
-                                isMobile={isMobile}
-                            >
-                                <SquareIconButton
+                <SquareIconButton
+                    key="toggle-interactive"
+                    size="large"
+                    title="Interactive"
+                    data-name="Interactive"
+                    onClick={handleToggleInteractive}
+                >
+                    {isInteractive ? (
+                        <IconByName
+                            name="actions.close"
+                            sx={{ color: theme.palette.warning.main }}
+                        />
+                    ) : (
+                        <PowerSettingsNew />
+                    )}
+                </SquareIconButton>
+                {isInteractive &&
+                    toolbarConfig.map((config) => {
+                        if (config.actions || config.contentObject) {
+                            return (
+                                <NestedDropdown
+                                    /* eslint-disable-next-line react/jsx-props-no-spreading */
+                                    {...config}
+                                    actions={config.actions}
+                                    contentObject={config.contentObject}
+                                    key={config.key || config.id}
                                     data-name={config.id}
-                                    key={`button-${config.key}` || `button-${config.id}`}
-                                    title={config.title}
-                                    onClick={config.onClick}
+                                    paperPlacement={config.paperPlacement || "right-start"}
+                                    paperSx={paperSx}
+                                    isMobile={isMobile}
                                 >
-                                    {config.leftIcon}
-                                </SquareIconButton>
-                            </NestedDropdown>
+                                    <SquareIconButton
+                                        data-name={config.id}
+                                        key={`button-${config.key}` || `button-${config.id}`}
+                                        title={config.title}
+                                        onClick={config.onClick}
+                                    >
+                                        {config.leftIcon}
+                                    </SquareIconButton>
+                                </NestedDropdown>
+                            );
+                        }
+                        const { id, key, title, onClick, leftIcon } = config;
+                        return (
+                            <SquareIconButton
+                                key={key || id}
+                                data-name={id}
+                                title={title}
+                                onClick={onClick}
+                            >
+                                {leftIcon}
+                            </SquareIconButton>
                         );
-                    }
-                    const { id, key, title, onClick, leftIcon } = config;
-                    return (
-                        <SquareIconButton
-                            key={key || id}
-                            data-name={id}
-                            title={title}
-                            onClick={onClick}
-                        >
-                            {leftIcon}
-                        </SquareIconButton>
-                    );
-                })}
-        </ButtonGroup>
+                    })}
+            </ButtonGroup>
+        </Paper>
     );
 }
 

src/components/ParametersMenu.tsx

@@ -1,7 +1,5 @@
 import Box from "@mui/material/Box";
-import Divider from "@mui/material/Divider";
 import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import React from "react";
@@ -32,51 +30,41 @@ function ParametersMenu(props: ParametersMenuProps) {
         handleChemicalConnectivityFactorChange,
     } = props;
 
-    const theme = useTheme();
-    const defaultTextFieldStyle = {
-        "& input": {
-            margin: theme.spacing(0.5),
-            height: theme.spacing(3),
-            padding: theme.spacing(1),
-            borderRadius: theme.spacing(0.5),
-        },
-    };
-
     return (
-        <Stack spacing={theme.spacing(1)} sx={{ margin: theme.spacing(2) }}>
-            <Typography variant="subtitle1">Atomic radius</Typography>
+        <Stack spacing={1.5} margin={2}>
+            <Typography variant="body1">Atomic radius</Typography>
             <Box>
                 <TextField
+                    fullWidth
                     label="Value"
                     type="number"
+                    size="small"
                     className="inverse stepper sphere-radius"
                     id="sphere-radius"
                     value={viewerSettings.atomRadiiScale}
                     onChange={handleSphereRadiusChange}
-                    sx={defaultTextFieldStyle}
                     inputProps={{
                         max: 10,
                         min: 0.1,
                         step: 0.1,
                     }}
                 />
             </Box>
-            <Divider />
-            <Typography variant="subtitle1">Repetition along vectors:</Typography>
-            <Stack key="repetition" direction="row" spacing={theme.spacing(2)}>
+            <Typography variant="body1">Repetition along vectors:</Typography>
+            <Stack key="repetition" direction="row" spacing={1}>
                 {["A", "B", "C"].map((label) => {
                     const key = `repetitionsAlongLatticeVector${label}` as ViewerSettingsKey;
 
                     return (
                         <Box key={label}>
                             <TextField
                                 label={label}
+                                size="small"
                                 type="number"
                                 className="inverse stepper cell-repetitions"
                                 id={`repetitionsAlongLatticeVector${label}`}
                                 value={viewerSettings[key]}
                                 onChange={handleCellRepetitionsChange}
-                                sx={defaultTextFieldStyle}
                                 inputProps={{
                                     max: 10,
                                     min: 1,
@@ -87,17 +75,17 @@ function ParametersMenu(props: ParametersMenuProps) {
                     );
                 })}
             </Stack>
-            <Divider />
-            <Typography variant="subtitle1">Chemical connectivity factor</Typography>
+            <Typography variant="body1">Chemical connectivity factor</Typography>
             <Box>
                 <TextField
+                    fullWidth
+                    size="small"
                     label="Value"
                     type="number"
                     className="inverse stepper cell-repetitions"
                     id="chemical-connectivity-factor"
                     value={viewerSettings.chemicalConnectivityFactor}
                     onChange={handleChemicalConnectivityFactorChange}
-                    sx={defaultTextFieldStyle}
                     inputProps={{
                         max: 2,
                         min: 0,

src/components/SquareIconButton.tsx

@@ -1,5 +1,4 @@
 import IconButton, { IconButtonProps } from "@mui/material/IconButton";
-import { useTheme } from "@mui/material/styles";
 import Tooltip, { TooltipProps } from "@mui/material/Tooltip";
 import React, { useEffect, useState } from "react";
 import _ from "underscore";
@@ -28,14 +27,9 @@ function SquareIconButton(props: SquareIconButtonProps) {
         isToggled = false,
     } = props;
     const [stateIsToggled, setStateIsToggled] = useState(isToggled);
-    const theme = useTheme();
 
     const defaultIconButtonStyle = {
         borderRadius: 0,
-        fontSize: theme.typography.h2.fontSize,
-        height: theme.spacing(6),
-        width: theme.spacing(6),
-        backgroundColor: theme.palette.background.paper,
     };
 
     useEffect(() => {
@@ -47,13 +41,11 @@ function SquareIconButton(props: SquareIconButtonProps) {
     };
 
     return (
-        <Tooltip
-            id={id}
-            title={title.toUpperCase()}
-            placement={tooltipPlacement}
-            disableInteractive
-        >
+        <Tooltip id={id} title={title} placement={tooltipPlacement} disableInteractive>
             <IconButton
+                disableFocusRipple
+                disableTouchRipple
+                size="large"
                 key={id}
                 aria-checked={isToggleable && stateIsToggled}
                 aria-label={label || title.toLowerCase()}

src/components/ThreeDEditor.jsx

@@ -25,8 +25,7 @@ import Spellcheck from "@mui/icons-material/Spellcheck";
 import SquareFootIcon from "@mui/icons-material/SquareFoot";
 import SwitchCamera from "@mui/icons-material/SwitchCamera";
 import ThreeDRotation from "@mui/icons-material/ThreeDRotation";
-import { StyledEngineProvider } from "@mui/material/styles";
-import setClass from "classnames";
+import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
 import $ from "jquery";
 import PropTypes from "prop-types";
 import React from "react";
@@ -652,7 +651,7 @@ export class ThreeDEditor extends React.Component {
 
         const { editable } = this.props;
         if (editable) {
-            toolbarConfig.splice(3, 0, {
+            toolbarConfig.splice(4, 0, {
                 id: "3DEdit",
                 title: "Edit [E]",
                 leftIcon: <Edit />,
@@ -663,13 +662,6 @@ export class ThreeDEditor extends React.Component {
         return toolbarConfig;
     }
 
-    /** Helper to construct a compound CSS classname based on interactivity state */
-    getThreeDEditorClassNames() {
-        const { isInteractive } = this.state;
-        const isInteractiveCls = isInteractive ? "" : "non-interactive";
-        return setClass("materials-designer-3d-editor", isInteractiveCls);
-    }
-
     onThreejsEditorModalHide(material) {
         let { isThreejsEditorModalShown } = this.state;
         isThreejsEditorModalShown = !isThreejsEditorModalShown;
@@ -708,7 +700,7 @@ export class ThreeDEditor extends React.Component {
         const { isInteractive } = this.state;
 
         return (
-            <div className={this.getThreeDEditorClassNames()}>
+            <div style={{ position: "relative" }}>
                 {this.renderCoverDiv()}
                 <IconsToolbar
                     toolbarConfig={this.getToolbarConfig()}
@@ -722,11 +714,11 @@ export class ThreeDEditor extends React.Component {
 
     render() {
         return (
-            <StyledEngineProvider injectFirst>
-                <ThemeProvider theme={DarkMaterialUITheme}>
+            <ThemeProvider theme={DarkMaterialUITheme}>
+                <ScopedCssBaseline enableColorScheme>
                     {this.renderWaveOrThreejsEditorModal()}
-                </ThemeProvider>
-            </StyledEngineProvider>
+                </ScopedCssBaseline>
+            </ThemeProvider>
         );
     }
 }

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />