Merge pull request #1180 from sandialabs/alex-bugfix

Convert PS controls bar to React
sandialabs · Sep 26, 2024 · 76117bf · 76117bf
2 parents 7a70775 + 2540bf6
commit 76117bf
Show file tree

Hide file tree

Showing 30 changed files with 4,100 additions and 4,029 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@fortawesome/fontawesome-svg-core": "^6",
     "@fortawesome/free-solid-svg-icons": "^6",
     "@fortawesome/react-fontawesome": "^0",
-    "@reduxjs/toolkit": "^1.9.3",
+    "@reduxjs/toolkit": "^2",
     "bootstrap": "^4",
     "buffer": "6.0.3",
     "chrono-node": "^2.7.5",
@@ -36,7 +36,7 @@
     "he": "1.2.0",
     "jquery": "^3",
     "jquery-knob": "1.2.11",
-    "jquery-ui": "1.13.2",
+    "jquery-ui": "^1",
     "jquery.scrollintoview": "^1.9.4",
     "knockout": "3.5.1",
     "knockout-mapping": "2.6.0",
@@ -46,21 +46,21 @@
     "parse-css-color": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
-    "react-redux": "^8",
-    "redux": "^4",
+    "react-redux": "^9",
+    "redux": "^5",
     "redux-logger": "3.0.6",
     "redux-throttle": "0.1.1",
-    "redux-thunk": "^2",
+    "redux-thunk": "^3",
     "redux-watch": "^1.2.0",
-    "slickgrid": "^3",
+    "slickgrid": "^5",
     "stream-browserify": "3.0.0",
     "three": "^0",
     "three-stl-loader": "1.0.6",
     "three-trackballcontrols": "0.9.0",
     "urijs": "1.19.11",
-    "uuid": "^9",
-    "vtk.js": "^27",
-    "wslink": "^1",
+    "uuid": "^10",
+    "vtk.js": "^32",
+    "wslink": "^2",
     "zipinfo.js": "1.0.0"
   },
   "devDependencies": {
@@ -80,49 +80,52 @@
     "@types/core-js": "^2.5.4",
     "@types/d3": "^3",
     "@types/d3v7": "npm:@types/d3@^7.4.0",
+    "@types/he": "^1.2.3",
     "@types/jest": "^29",
     "@types/jquery": "^3.5.5",
     "@types/jsdom": "^21",
     "@types/lodash": "^4.14.191",
-    "@types/node": "^20",
+    "@types/node": "^22",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-test-renderer": "^18",
-    "@types/sinon": "^10.0.0",
-    "@types/uuid": "^9",
+    "@types/redux-watch": "^1.1.2",
+    "@types/sinon": "^17",
+    "@types/sortablejs": "^1.15.8",
+    "@types/uuid": "^10",
     "autoprefixer": "^10.1.0",
     "babel-jest": "^29",
     "babel-loader": "^9",
     "babel-plugin-module-resolver": "^5",
     "babelify": "^10.0.0",
     "clean-webpack-plugin": "^4",
-    "copy-webpack-plugin": "^11",
-    "css-loader": "^6",
-    "eslint": "^8",
+    "copy-webpack-plugin": "^12",
+    "css-loader": "^7",
+    "eslint": "^9",
     "eslint-plugin-react": "^7.22.0",
     "file-loader": "^6.2.0",
-    "html-loader": "^4",
+    "html-loader": "^5",
     "html-webpack-plugin": "^5.0.0-beta.4",
-    "imports-loader": "^4",
+    "imports-loader": "^5",
     "jest": "^29",
     "jest-fetch-mock": "^3.0.1",
     "less": "^4.0.0",
-    "less-loader": "^11",
+    "less-loader": "^12",
     "node-fetch-polyfill": "^2.0.6",
     "prettier": "^3",
     "react-test-renderer": "^18",
     "sass": "^1",
-    "sass-loader": "^13",
+    "sass-loader": "^16",
     "shader-loader": "^1.3.1",
-    "sinon": "^15",
-    "style-loader": "^3",
+    "sinon": "^19",
+    "style-loader": "^4",
     "typescript": "^5",
     "url-loader": "^4.1.1",
     "webpack": "^5.11.1",
     "webpack-bundle-analyzer": "^4.3.0",
     "webpack-cli": "^5",
-    "webpack-dev-server": "^4.7.3",
-    "webpack-merge": "^5.7.3",
+    "webpack-dev-server": "^5",
+    "webpack-merge": "^6",
     "webpack-node-modules-list": "^0.4.1",
     "whatwg-fetch": "^3.5.0",
     "worker-loader": "^3.0.7"

diff --git a/web-server/components/ControlsDropdown.tsx b/web-server/components/ControlsDropdown.tsx
@@ -4,34 +4,34 @@
 
 import React from "react";
 
-interface IDropdownItems {
-  key: string;
-  name: string;
-  type?: string;
-  style: {};
+export interface IDropdownItems {
+  key?: number | string;
+  name?: string;
+  type?: "divider" | "header";
+  style?: {};
   set_selected?: SetSelectedFunction;
   selected?: boolean;
 }
 
-type SetSelectedFunction = (
+export type SetSelectedFunction = (
+  key: number | string,
   state_label: string,
-  key: string,
-  trigger: string,
+  trigger?: string,
   e?: React.MouseEvent<HTMLButtonElement>,
   props?: Record<string, unknown>,
 ) => void;
 
 interface ControlsDropdownProps {
   items: IDropdownItems[];
-  selected: string;
+  selected: string | number;
   set_selected: SetSelectedFunction;
   state_label: string;
-  trigger: string;
+  trigger?: string;
   button_style: string;
   id: string;
   title: string;
   label: string;
-  single: boolean;
+  single?: boolean;
 }
 
 /**
@@ -73,7 +73,7 @@ class ControlsDropdown extends React.Component<ControlsDropdownProps> {
             className={"dropdown-item" + (selected ? " active" : "")}
             onClick={(e) =>
               set_selected_function(
-                item.key,
+                item.key!,
                 this.props.state_label,
                 this.props.trigger,
                 e,