Merge pull request #151 from arayabrain/feature/update-outdated-packages

Feature/update outdated packages
arayabrain · Nov 10, 2023 · 35ceb65 · 35ceb65
2 parents 326788c + 11e2838
commit 35ceb65
Show file tree

Hide file tree

Showing 7 changed files with 839 additions and 650 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -6,51 +6,51 @@
   },
   "private": true,
   "dependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/lab": "^5.0.0-alpha.68",
-    "@mui/material": "^5.4.1",
-    "@mui/x-data-grid": "^6.11.1",
-    "@reduxjs/toolkit": "^1.6.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/colormap": "^2.3.1",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/lab": "^5.0.0-alpha.152",
+    "@mui/material": "^5.14.17",
+    "@mui/x-data-grid": "^6.18.1",
+    "@mui/x-tree-view": "^6.17.0",
+    "@reduxjs/toolkit": "^1.9.7",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/colormap": "^2.3.4",
     "@types/glob": "^8.1.0",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^16.0.0",
-    "@types/qs": "^6.9.7",
-    "@types/react": "^18.0.28",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^18.0.11",
+    "@types/jest": "^29.5.8",
+    "@types/node": "^20.9.0",
+    "@types/qs": "^6.9.10",
+    "@types/react": "^18.2.37",
+    "@types/react-color": "^3.0.10",
+    "@types/react-dom": "^18.2.15",
     "assert": "^2.1.0",
     "axios": "^1.6.0",
     "buffer": "^6.0.3",
     "colormap": "^2.3.2",
-    "flexlayout-react": "^0.5.12",
+    "flexlayout-react": "^0.7.13",
     "moment": "^2.29.4",
     "notistack": "^3.0.1",
-    "plotly.js": "^2.6.0",
+    "plotly.js": "^2.27.1",
     "qs": "^6.11.2",
     "react": "18.2.0",
     "react-app-rewired": "^2.2.1",
     "react-color": "^2.19.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
-    "react-linear-gradient-picker": "^2.0.2",
+    "react-linear-gradient-picker": "^3.0.1",
     "react-plotlyjs-ts": "^2.2.2",
     "react-redux": "^8.1.2",
-    "react-router-dom": "^6.6.2",
+    "react-router-dom": "^6.18.0",
     "react-scripts": "^5.0.1",
-    "reactflow": "^11.8.3",
+    "reactflow": "^11.9.4",
     "reselect": "^4.1.8",
     "stream-browserify": "^3.0.0",
-    "styled-components": "^5.3.0",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "styled-components": "^6.1.1",
+    "typescript": "^5.2.2",
+    "web-vitals": "^3.5.0"
   },
   "scripts": {
     "start": "react-app-rewired start --scripts-version react-scripts",
@@ -74,20 +74,23 @@
     ]
   },
   "devDependencies": {
-    "@types/plotly.js": "^1.54.16",
-    "@types/react-redux": "^7.1.25",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
-    "eslint": "^8.51.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-transform-private-property-in-object": "^7.23.3",
+    "@babel/runtime": "^7.23.2",
+    "@types/plotly.js": "^2.12.30",
+    "@types/react-redux": "^7.1.30",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-no-relative-import-paths": "^1.5.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
-    "lint-staged": "^11.1.2",
+    "lint-staged": "^15.0.2",
     "prettier": "^3.0.3",
     "process": "^0.11.10"
   },

diff --git a/frontend/src/components/Workspace/FlowChart/Dialog/FileSelectDialog.tsx b/frontend/src/components/Workspace/FlowChart/Dialog/FileSelectDialog.tsx
@@ -13,7 +13,8 @@ import DialogTitle from "@mui/material/DialogTitle"
 import LinearProgress from "@mui/material/LinearProgress"
 import { useTheme } from "@mui/material/styles"
 import Typography from "@mui/material/Typography"
-import { TreeView, TreeItem } from "@mui/x-tree-view"
+import { TreeItem } from "@mui/x-tree-view/TreeItem"
+import { TreeView } from "@mui/x-tree-view/TreeView"
 
 import { FILE_TREE_TYPE, FILE_TREE_TYPE_SET } from "api/files/Files"
 import { DialogContext } from "components/Workspace/FlowChart/Dialog/DialogContext"

diff --git a/frontend/src/components/Workspace/FlowChart/FlowChartNode/HDF5FileNode.tsx b/frontend/src/components/Workspace/FlowChart/FlowChartNode/HDF5FileNode.tsx
@@ -12,7 +12,8 @@ import DialogContent from "@mui/material/DialogContent"
 import DialogTitle from "@mui/material/DialogTitle"
 import LinearProgress from "@mui/material/LinearProgress"
 import { useTheme } from "@mui/material/styles"
-import { TreeView, TreeItem } from "@mui/x-tree-view"
+import { TreeItem } from "@mui/x-tree-view/TreeItem"
+import { TreeView } from "@mui/x-tree-view/TreeView"
 
 import { FileSelect } from "components/Workspace/FlowChart/FlowChartNode/FileSelect"
 import { toHandleId } from "components/Workspace/FlowChart/FlowChartNode/FlowChartUtils"
@@ -155,8 +156,12 @@ const FileTreeView = memo(function FileTreeView({ nodeId }: NodeIdProps) {
     <div>
       {isLoading && <LinearProgress />}
       <TreeView>
-        {tree?.map((node) => (
-          <TreeNode key={nodeId} node={node} nodeId={nodeId} />
+        {tree?.map((node, i) => (
+          <TreeNode
+            key={`hdf5tree-${nodeId}-${i}`}
+            node={node}
+            nodeId={nodeId}
+          />
         ))}
       </TreeView>
     </div>
@@ -212,6 +217,7 @@ function useHDF5Tree(
     if (workspaceId && !isLoading && filePath) {
       dispatch(getHDF5Tree({ path: filePath, workspaceId }))
     }
-  }, [workspaceId, isLoading, filePath, dispatch])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspaceId, filePath])
   return [tree, isLoading]
 }
diff --git a/frontend/src/components/Workspace/FlowChart/TreeView.tsx b/frontend/src/components/Workspace/FlowChart/TreeView.tsx
@@ -7,7 +7,9 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight"
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
 import { styled, Typography } from "@mui/material"
 import IconButton from "@mui/material/IconButton"
-import { TreeView, TreeItem, treeItemClasses } from "@mui/x-tree-view"
+import { treeItemClasses } from "@mui/x-tree-view"
+import { TreeItem } from "@mui/x-tree-view/TreeItem"
+import { TreeView } from "@mui/x-tree-view/TreeView"
 
 import {
   DND_ITEM_TYPE_SET,

diff --git a/frontend/src/components/Workspace/Visualize/Plot/ImagePlot.tsx b/frontend/src/components/Workspace/Visualize/Plot/ImagePlot.tsx
@@ -375,7 +375,8 @@ const ImagePlotChart = memo(function ImagePlotChart({
   }
 
   const onChartClick = (event: PlotMouseEvent) => {
-    const point: PlotDatum = event.points[0] as PlotDatum
+    // use as unknown because original PlotDatum does not have z property
+    const point: PlotDatum = event.points[0] as unknown as PlotDatum
     if (point.curveNumber >= 1 && outputKey === "cell_roi") {
       setSelectRoi({
         x: Number(point.x),

diff --git a/frontend/src/components/common/ParamFormItemCreator.tsx b/frontend/src/components/common/ParamFormItemCreator.tsx
@@ -93,13 +93,15 @@ export function createParamFormItemComponent({
         dispatch(updateParamAction(splitValue(newValue)))
       }
     }
-    const valueField = Array.isArray(value) ? value[0] : (value as string) || ""
+    const valueField = Array.isArray(value)
+      ? value.toLocaleString()
+      : (value as string) || ""
     return (
       <TextField
         value={valueField === undefined ? "" : valueField}
         onChange={onChange}
         multiline
-        onBlur={isArray ? onBlur : undefined}
+        onBlur={isArray.current ? onBlur : undefined}
       />
     )
   })