fix(deps): security upgrades — 49→13 vulnerabilities + materialize-css removal

configuration/webpackDevServer.config.js

@@ -34,7 +34,15 @@ module.exports = function (proxy, allowedHost, options) {
       // remove last slash so user can land on `/test` instead of `/test/`
       publicPath: paths.publicUrlOrPath.slice(0, -1),
     },
-    https: getHttpsConfig(),
+    server: (() => {
+      const httpsConfig = getHttpsConfig();
+      if (httpsConfig && httpsConfig !== false) {
+        return typeof httpsConfig === 'object'
+          ? { type: 'https', options: httpsConfig }
+          : { type: 'https' };
+      }
+      return 'http';
+    })(),
     host,
     client: {
       // Silence WebpackDevServer's own logs since they're generally not useful.

package.json

@@ -75,7 +75,7 @@
     "@azure/core-auth": "^1.7.2",
     "@azure/identity": "^4.4.0",
     "@babel/runtime": "^7.23.1",
-    "@base-ui-components/react": "^1.0.0-rc.0",
+    "@base-ui/react": "^1.5.0",
     "@eonasdan/tempus-dominus": "^6.2.6",
     "@ffmpeg/core": "^0.12.6",
     "@ffmpeg/ffmpeg": "^0.12.10",
@@ -137,7 +137,6 @@
     "jquery": "^3.5.1",
     "lithosphere": "^1.6.0",
     "mark.js": "^8.11.1",
-    "materialize-css": "^1.0.0",
     "memorystore": "^1.6.2",
     "nipplejs": "^0.8.5",
     "node-fetch": "^2.6.1",
@@ -153,27 +152,26 @@
     "react-app-polyfill": "^3.0.0",
     "react-chartjs-2": "^4.3.1",
     "react-dom": "^18.2.0",
-    "react-pdf": "^7.7.3",
+    "react-pdf": "^10.4.1",
     "react-resize-detector": "^9.1.0",
     "regenerator-runtime": "^0.13.9",
     "reproject-bbox": "^0.4.1",
     "resolve": "1.15.0",
     "resolve-url-loader": "^5.0.0",
     "semver": "6.3",
-    "sequelize": "^6.33.0",
-    "sharp": "^0.31.2",
+    "sequelize": "^6.37.8",
+    "sharp": "^0.33.0",
     "showdown": "^2.1.0",
     "snap-bbox": "^0.2.0",
     "sortablejs": "^1.15.0",
     "swagger-ui-express": "5.0.1",
     "tippy.js": "^6.3.7",
     "ts-pnp": "1.1.6",
-    "turf": "^3.0.14",
     "util": "^0.12.3",
     "utm-utils": "^0.1.0",
-    "uuid": "^9.0.0",
+    "uuid": "^11.1.1",
     "winston": "3.19.0",
-    "ws": "8.18.3",
+    "ws": "~8.21.0",
     "xml2js": "^0.6.2",
     "zustand": "^4.5.7"
   },
@@ -244,7 +242,30 @@
     "webpack": "5.105.4",
     "webpack-bundle-analyzer": "4.10.2",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.2",
+    "webpack-dev-server": "^5.2.1",
     "webpack-manifest-plugin": "5.0.1"
+  },
+  "overrides": {
+    "protobufjs": "^7.5.8",
+    "@babel/plugin-transform-modules-systemjs": "^7.29.0",
+    "braces": "^3.0.3",
+    "micromatch": "^4.0.8",
+    "minimatch": "^3.1.4",
+    "picomatch": "^2.3.2",
+    "lodash": "^4.17.24",
+    "follow-redirects": "^1.15.12",
+    "postcss": "^8.5.10",
+    "ajv@^6": "^6.14.0",
+    "ajv@^8": "^8.18.0",
+    "dottie": "^2.0.7",
+    "svgo": "^3.3.3",
+    "underscore": "^1.13.8",
+    "diff": "^4.0.4",
+    "yaml": "^2.8.3",
+    "brace-expansion": "^1.1.13",
+    "elliptic": "^6.6.1",
+    "serialize-javascript": "^7.0.3",
+    "uuid": "^11.1.1",
+    "qs": "^6.15.2"
   }
 }

python-environment.yml

@@ -19,7 +19,7 @@ dependencies:
   - pip:
       - rasterio>=1.5.0
       - numpy>=2.0.0
-      - requests==2.32.3
+      - requests==2.33.0
       - rio_stac>=0.12.0
       - spiceypy==5.1.2
       - pymap3d==3.0.1

src/App.js

@@ -6,7 +6,8 @@ import F_ from './essence/Basics/Formulae_/Formulae_'
 
 import calls from './pre/calls'
 
-import UserInterfaceLayout from './essence/Basics/UserInterface_/components/Layout/UserInterfaceLayout'
+import UserInterfaceLayout from './essence/Basics/UserInterface_/components/Layout/UserInterfaceLayout'
+import ToastRenderer from './design-system/components/Toast/ToastRenderer'
 
 // Ensure useReactUI is always set (defensive fallback for non-standard bootstrap)
 ;(function () {
@@ -114,7 +115,8 @@ function initApp() {
 function App() {
     return (
         <div className='App'>
-            <UserInterfaceLayout />
+            <UserInterfaceLayout />
+            <ToastRenderer />
         </div>
     )
 }

src/css/mmgisUI.css

@@ -1085,32 +1085,7 @@ input::-webkit-inner-spin-button {
     max-width: 500px;
     width: auto;
 }
-.mmgisToast {
-    z-index: 1000;
-    border-radius: 8px;
-    top: 0;
-    width: auto;
-    margin-top: 8px;
-    position: relative;
-    max-width: 100%;
-    height: auto;
-    line-height: 1.5em;
-    background-color: var(--color-a);
-    border: 1px solid var(--color-a1);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    padding: 10px 25px;
-    color: var(--color-f);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: default;
-}
-.mmgisToast.failure {
-    background-color: var(--color-a);
-    border-left: 3px solid var(--color-r1);
-}
+
 
 /*spinner1*/
 .mmgis-spinner1 {

src/design-system/components/Button/Button.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button as BaseButton } from '@base-ui-components/react/button'
+import { Button as BaseButton } from '@base-ui/react/button'
 import styles from './Button.module.css'
 
 function Button({ variant = 'secondary', size = 'md', className, children, ...props }) {

src/design-system/components/IconButton/IconButton.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Button as BaseButton } from '@base-ui-components/react/button'
+import { Button as BaseButton } from '@base-ui/react/button'
 import styles from './IconButton.module.css'
 
 const IconButton = forwardRef(function IconButton({ size = 'md', active, className, children, ...props }, ref) {

src/design-system/components/Modal/Modal.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dialog } from '@base-ui-components/react/dialog'
+import { Dialog } from '@base-ui/react/dialog'
 import styles from './Modal.module.css'
 
 function Modal({ open, onOpenChange, children, className, ...props }) {

src/design-system/components/Toast/Toast.js

@@ -1,4 +1,4 @@
-import M from 'materialize-css'
+import { Toast as BaseToast } from '@base-ui/react/toast'
 
 /**
  * Toast utility for displaying notification messages.
@@ -11,39 +11,35 @@ import M from 'materialize-css'
  *
  * Default duration is 3500ms.
  */
+export const toastManager = BaseToast.createToastManager()
+
 const DEFAULT_DURATION = 3500
+const activeIds = new Set()
+
+function addToast(options) {
+    const timeout = options.timeout || DEFAULT_DURATION
+    const id = toastManager.add(options)
+    activeIds.add(id)
+    setTimeout(() => activeIds.delete(id), timeout + 500)
+    return id
+}
 
 const Toast = {
     info(message, duration) {
-        M.toast({
-            html: message,
-            displayLength: duration || DEFAULT_DURATION,
-            classes: 'mmgisToast info',
-        })
+        addToast({ title: message, type: 'info', timeout: duration || DEFAULT_DURATION })
     },
     success(message, duration) {
-        M.toast({
-            html: message,
-            displayLength: duration || DEFAULT_DURATION,
-            classes: 'mmgisToast success',
-        })
+        addToast({ title: message, type: 'success', timeout: duration || DEFAULT_DURATION })
     },
     warning(message, duration) {
-        M.toast({
-            html: message,
-            displayLength: duration || DEFAULT_DURATION,
-            classes: 'mmgisToast warning',
-        })
+        addToast({ title: message, type: 'warning', timeout: duration || DEFAULT_DURATION })
     },
     error(message, duration) {
-        M.toast({
-            html: message,
-            displayLength: duration || DEFAULT_DURATION,
-            classes: 'mmgisToast failure',
-        })
+        addToast({ title: message, type: 'error', timeout: duration || DEFAULT_DURATION })
     },
     dismissAll() {
-        M.Toast.dismissAll()
+        activeIds.forEach((id) => toastManager.close(id))
+        activeIds.clear()
     },
 }
 

src/design-system/components/Toast/ToastRenderer.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { Toast } from '@base-ui/react/toast'
+import { toastManager } from './Toast'
+
+const transitionCSS = `
+.mmgisToastRoot {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    opacity: 1;
+    transform: translateY(0);
+}
+.mmgisToastRoot[data-starting-style] {
+    opacity: 0;
+    transform: translateY(-12px);
+}
+.mmgisToastRoot[data-ending-style] {
+    opacity: 0;
+    transform: translateY(12px);
+}
+`
+
+const viewportStyle = {
+    position: 'fixed',
+    top: '48px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    zIndex: 1000000,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '6px',
+    pointerEvents: 'none',
+    maxWidth: '90vw',
+}
+
+const baseToastStyle = {
+    borderRadius: '8px',
+    width: 'auto',
+    maxWidth: '100%',
+    lineHeight: '1.4em',
+    fontSize: '14px',
+    backgroundColor: 'var(--color-a)',
+    border: '1px solid var(--color-a1)',
+    boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+    backdropFilter: 'blur(12px)',
+    WebkitBackdropFilter: 'blur(12px)',
+    padding: '8px 20px',
+    color: 'var(--color-f)',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'default',
+    pointerEvents: 'auto',
+}
+
+const variantBorder = {
+    info: '3px solid var(--color-mmgis)',
+    success: '3px solid #4caf50',
+    warning: '3px solid #ff9800',
+    error: '3px solid var(--color-r1)',
+}
+
+function ToastList() {
+    const { toasts } = Toast.useToastManager()
+    return toasts.map((toast) => {
+        const type = toast.type
+        const style = type && variantBorder[type]
+            ? { ...baseToastStyle, borderLeft: variantBorder[type] }
+            : baseToastStyle
+        return (
+            <Toast.Root
+                key={toast.id}
+                toast={toast}
+                style={style}
+                className="mmgisToastRoot"
+            >
+                <Toast.Content>
+                    <Toast.Title render={<span />} />
+                </Toast.Content>
+            </Toast.Root>
+        )
+    })
+}
+
+export default function ToastRenderer() {
+    return (
+        <Toast.Provider toastManager={toastManager}>
+            <style>{transitionCSS}</style>
+            <Toast.Portal>
+                <Toast.Viewport style={viewportStyle}>
+                    <ToastList />
+                </Toast.Viewport>
+            </Toast.Portal>
+        </Toast.Provider>
+    )
+}