diagram: remove MUI and Emotion dependencies

src/app/package.json

@@ -7,6 +7,10 @@
   "license": "Apache-2.0",
   "browser": "lib.browser",
   "dependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/material": "^5.0.0",
     "@system-dynamics/core": "^1.0.0",
     "@system-dynamics/diagram": "^1.0.0",
     "@system-dynamics/engine2": "^2.0.0"

src/diagram/AuxIcon.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from './components/SvgIcon';
 
 import styles from './AuxIcon.module.css';
 
@@ -19,5 +19,3 @@ export const AuxIcon: React.FunctionComponent = (props) => {
 };
 
 AuxIcon.displayName = 'Variable';
-
-(AuxIcon as any).muiName = 'AuxIcon';

src/diagram/Editor.module.css

@@ -18,6 +18,19 @@
   width: 240px;
   margin-top: 12px;
   margin-left: 12px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
+}
+
+.snapshotCardContent {
+  padding: 16px;
+}
+
+.snapshotCardActions {
+  display: flex;
+  align-items: center;
+  padding: 8px;
 }
 
 .snapshotImg {
@@ -51,6 +64,9 @@
   right: 8px;
   height: 48px;
   width: 359px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
 }
 
 @media (min-width: 900px) and (max-width: 1199.95px) {
@@ -114,6 +130,3 @@
   background-color: var(--color-secondary);
 }
 
-:global(.MuiAutocomplete-option[data-focus="true"]) {
-  background: #ADD8E6;
-}

src/diagram/Editor.tsx

@@ -7,21 +7,13 @@ import * as React from 'react';
 import { List, Map, Set, Stack } from 'immutable';
 
 import clsx from 'clsx';
-import IconButton from '@mui/material/IconButton';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import Paper from '@mui/material/Paper';
-import Snackbar from '@mui/material/Snackbar';
-import ClearIcon from '@mui/icons-material/Clear';
-import EditIcon from '@mui/icons-material/Edit';
-import MenuIcon from '@mui/icons-material/Menu';
-import SpeedDial, { CloseReason } from '@mui/material/SpeedDial';
-import SpeedDialAction from '@mui/material/SpeedDialAction';
-import SpeedDialIcon from '@mui/material/SpeedDialIcon';
-import { Card } from '@mui/material';
-import Button from '@mui/material/Button';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
+import IconButton from './components/IconButton';
+import TextField from './components/TextField';
+import Autocomplete from './components/Autocomplete';
+import Snackbar from './components/Snackbar';
+import { ClearIcon, EditIcon, MenuIcon } from './components/icons';
+import SpeedDial, { CloseReason, SpeedDialAction, SpeedDialIcon } from './components/SpeedDial';
+import Button from './components/Button';
 import { canonicalize } from '@system-dynamics/core/canonicalize';
 
 import { Project as Engine2Project, SimlinErrorKind, SimlinUnitErrorKind } from '@system-dynamics/engine2';
@@ -416,17 +408,22 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     }));
   }
 
-  handleDialClick = (_event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+  handleDialClick = (_event: React.MouseEvent<HTMLButtonElement>) => {
     this.setState({
       dialOpen: !this.state.dialOpen,
       selectedTool: this.state.dialOpen ? undefined : this.state.selectedTool,
     });
   };
 
-  handleDialClose = (e: React.SyntheticEvent<{}>, reason: CloseReason) => {
+  handleDialClose = (e: React.SyntheticEvent, reason: CloseReason) => {
     if (reason === 'mouseLeave' || reason === 'blur') {
       return;
     }
+    // When an action is clicked, close the dial but keep the selected tool
+    if (reason === 'actionClick') {
+      this.setState({ dialOpen: false });
+      return;
+    }
     this.setState({
       dialOpen: false,
       selectedTool: undefined,
@@ -1681,7 +1678,7 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     const status = this.state.status;
 
     return (
-      <Paper className={styles.searchBar} elevation={2}>
+      <div className={styles.searchBar}>
         <IconButton
           className={styles.menuButton}
           color="inherit"
@@ -1709,7 +1706,7 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
         </div>
         <div className={styles.divider} />
         <Status status={status} onClick={this.handleStatusClick} />
-      </Paper>
+      </div>
     );
   }
 
@@ -2045,31 +2042,31 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     this.setState({ selectedTool: undefined });
   };
 
-  handleSelectStock = (e: React.MouseEvent<HTMLDivElement>) => {
+  handleSelectStock = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
     this.setState({
       selectedTool: 'stock',
     });
   };
 
-  handleSelectFlow = (e: React.MouseEvent<HTMLDivElement>) => {
+  handleSelectFlow = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
     this.setState({
       selectedTool: 'flow',
     });
   };
 
-  handleSelectAux = (e: React.MouseEvent<HTMLDivElement>) => {
+  handleSelectAux = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
     this.setState({
       selectedTool: 'aux',
     });
   };
 
-  handleSelectLink = (e: React.MouseEvent<HTMLDivElement>) => {
+  handleSelectLink = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
     this.setState({
@@ -2363,16 +2360,16 @@ export class Editor extends React.PureComponent<EditorProps, EditorState> {
     }
 
     return (
-      <Card className={styles.snapshotCard} elevation={2}>
-        <CardContent>
+      <div className={styles.snapshotCard}>
+        <div className={styles.snapshotCardContent}>
           <img src={URL.createObjectURL(snapshotBlob)} className={styles.snapshotImg} alt="diagram snapshot" />
-        </CardContent>
-        <CardActions>
+        </div>
+        <div className={styles.snapshotCardActions}>
           <Button size="small" color="primary" onClick={this.handleClearSnapshot}>
             Close
           </Button>
-        </CardActions>
-      </Card>
+        </div>
+      </div>
     );
   }
 

src/diagram/ErrorDetails.module.css

@@ -1,5 +1,8 @@
 .card {
   width: 359px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
 }
 
 @media (min-width: 900px) and (max-width: 1199.95px) {
@@ -15,6 +18,7 @@
 }
 
 .inner {
+  padding: 16px;
   padding-top: 72px;
 }
 

src/diagram/ErrorDetails.tsx

@@ -5,7 +5,6 @@
 import * as React from 'react';
 
 import { List, Map } from 'immutable';
-import { Card, CardContent, Typography } from '@mui/material';
 
 import { SimError, ModelError, EquationError, ErrorCode, UnitError } from '@system-dynamics/core/datamodel';
 import { errorCodeDescription } from '@system-dynamics/engine2';
@@ -32,7 +31,7 @@ export class ErrorDetails extends React.PureComponent<ErrorDetailsProps> {
       )
     ) {
       errors.push(
-        <Typography className={styles.list}>simulation error: {errorCodeDescription(simError.code)}</Typography>,
+        <div className={styles.list}>simulation error: {errorCodeDescription(simError.code)}</div>,
       );
     }
     if (!modelErrors.isEmpty()) {
@@ -42,40 +41,40 @@ export class ErrorDetails extends React.PureComponent<ErrorDetailsProps> {
         }
         const details = err.details;
         errors.push(
-          <Typography className={styles.list}>
+          <div className={styles.list}>
             model error: {errorCodeDescription(err.code)}
             {details ? `: ${details}` : undefined}
-          </Typography>,
+          </div>,
         );
       }
     }
     for (const [ident, errs] of varErrors) {
       for (const err of errs) {
         errors.push(
-          <Typography className={styles.list}>
+          <div className={styles.list}>
             variable "{ident}" error: {errorCodeDescription(err.code)}
-          </Typography>,
+          </div>,
         );
       }
     }
     for (const [ident, errs] of varUnitErrors) {
       for (const err of errs) {
         const details = err.details;
         errors.push(
-          <Typography className={styles.list}>
+          <div className={styles.list}>
             variable "{ident}" unit error: {errorCodeDescription(err.code)}
             {details ? `: ${details}` : undefined}
-          </Typography>,
+          </div>,
         );
       }
     }
 
     return (
-      <Card className={styles.card} elevation={1}>
-        <CardContent className={styles.inner}>
-          {errors.length > 0 ? errors : <Typography className={styles.yay}>Your model is error free!</Typography>}
-        </CardContent>
-      </Card>
+      <div className={styles.card}>
+        <div className={styles.inner}>
+          {errors.length > 0 ? errors : <div className={styles.yay}>Your model is error free!</div>}
+        </div>
+      </div>
     );
   }
 }

src/diagram/ErrorToast.tsx

@@ -5,13 +5,9 @@
 import * as React from 'react';
 
 import clsx from 'clsx';
-import IconButton from '@mui/material/IconButton';
-import SnackbarContent from '@mui/material/SnackbarContent';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import CloseIcon from '@mui/icons-material/Close';
-import ErrorIcon from '@mui/icons-material/Error';
-import InfoIcon from '@mui/icons-material/Info';
-import WarningIcon from '@mui/icons-material/Warning';
+import IconButton from './components/IconButton';
+import { SnackbarContent } from './components/Snackbar';
+import { CheckCircleIcon, CloseIcon, ErrorIcon, InfoIcon, WarningIcon } from './components/icons';
 
 import styles from './ErrorToast.module.css';
 

src/diagram/FlowIcon.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from './components/SvgIcon';
 
 import styles from './FlowIcon.module.css';
 
@@ -27,5 +27,3 @@ export class FlowIcon extends React.PureComponent {
     );
   }
 }
-
-(FlowIcon as any).muiName = 'FlowIcon';

src/diagram/LinkIcon.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon from './components/SvgIcon';
 
 import styles from './LinkIcon.module.css';
 
@@ -28,5 +28,3 @@ export class LinkIcon extends React.PureComponent {
     );
   }
 }
-
-(LinkIcon as any).muiName = 'LinkIcon';

src/diagram/LookupEditor.module.css

@@ -34,3 +34,13 @@
 .buttonRight {
   float: right;
 }
+
+.cardContent {
+  padding: 16px;
+}
+
+.cardActions {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}

src/diagram/LookupEditor.tsx

@@ -5,7 +5,8 @@
 import * as React from 'react';
 
 import { List } from 'immutable';
-import { Button, CardActions, CardContent, TextField } from '@mui/material';
+import Button from './components/Button';
+import TextField from './components/TextField';
 
 import { defined } from '@system-dynamics/core/common';
 import {
@@ -359,7 +360,7 @@ export class LookupEditor extends React.PureComponent<LookupEditorProps, LookupE
 
     return (
       <div>
-        <CardContent>
+        <div className={styles.cardContent}>
           <TextField
             className={styles.yAxisMax}
             error={yScaleError}
@@ -415,8 +416,8 @@ export class LookupEditor extends React.PureComponent<LookupEditorProps, LookupE
             type="number"
             margin="normal"
           />
-        </CardContent>
-        <CardActions>
+        </div>
+        <div className={styles.cardActions}>
           <Button size="small" color="secondary" onClick={this.handleLookupRemove} className={styles.buttonLeft}>
             Remove
           </Button>
@@ -428,7 +429,7 @@ export class LookupEditor extends React.PureComponent<LookupEditorProps, LookupE
               Save
             </Button>
           </div>
-        </CardActions>
+        </div>
       </div>
     );
   }