Yuhsuan/1974 package update

[YuHsuan-Hwang]

Description

This PR is for #1974 package upgrades.

---

1. Package upgrades with additional fixes:

axios (for http request)

• added additional config to run unit tests

react-rnd (for floating widgets and dialogs)

• Resizing floating widgets causes extra y position change. This is caused by the change of position definition in onResizeStop and is fixed by manually adding the height of the root menu.

  video

  Screen.Recording.2023-03-06.at.3.15.29.PM.mov

typescript

• updated the typescript-eslint packages to support eslint checks
• minor type fix in getSnippets()

react-scripts v5

• There are several issues with webpack v5 configuration. We are using webpack via react-scripts, so we can not directly change the webpack configuration. Therefore, we create a patch version of react-scripts by patch-package. A react-scripts+5.0.1.patch file is created in the /patches directory, and now npm install calls "postinstall": "patch-package" after install to apply the changes in the .patch file. (ref)

  details of the config changes

  1. We get error messages from node modules created by webassembly, and this is because webpack v5 no longer supports some packages. It's a long-existing issue for create-react-app. Added devDependencies of the packages in Carta, and added package paths in the webpack config. (ref)

  2. raw-loader is deprecated in webpack v5. Replaced with asset modules. (ref)

  3. Extra warnings from webpack. This may be caused by the optimization in webpack v5 which does not allow editting files in node_modules directly. Fixed by adding snapshot.managedPaths config. (ref, ref)

  4. CI node 12 and 14 fails with the new postinstall build process. It is because the Docker containers run as a root user, and root user is required for Github actions. This is fixed by adding file .npmrc with settings unsafe-perm = true. If we remove CI node 12 and 14 in the future, we can remove this file. (ref, ref)

• minor type fix in StokesAnalysisComponent

Chart.js (for histogram plot, contour dialog histogram plot, render config histogram plot, XY profiler, Z profiler, stokes analysis widget QU/PI/PA line plots and QU scatter plot)

• fixed renamed variable in PlotContainerComponent (migration doc)
• rename scale id “x/y-axis-0” to “x/y” to avoid additional axis (migration doc: default id “x/y” can not be override in v4). “x-axis-1” is confusing without “x/y-axis-0”, so it is also renamed to “x-secondary”.
• add imports and register them to react-chartjs-2 (migration doc, FAQ)
• add legend import to fix missing legend
• minor type fix in PlotContainerComponent
• adjust the workaround of avoid previous lines remaining in the graph. Looks like the scatter plot will not update the line components when we set showLine: false. showLine is now always true, and the width of the lines is 0 when the plot type is points.

---

2. Package upgrades without additional fixes:

major version jump

• Plotly.js (for catalog scatter plot and histogram plot) (low-risk maintenance release)
• idb (for data storage in telemetry)
• react-resize-detector (handle element resize)
• uuid (for generating user id in telemetry)
• @types/jest, @types/node (typescript definitions)
• eslint-plugin-simple-import-sort (import format)

minor version jump

• mobx, mobx-react
• sass
• ajv (config validation)
• mnemonist (for tile cache)
• react-iframe (used in ExternalPageDialogComponent) (looks like this component is not used)
• react-scroll-to-bottom (auto scroll to bottom in the Log widget)
• react-simple-code-editor (code snippet editor), prismjs (code snippet syntax highlighting)
• react-virtualized-auto-sizer, react-window (for rendering large list in the region list widget and in the header info widget of file browser dialog)
• rxjs (for data stream)
• tinycolor2 (handling color)
• @types/node, @types/gapi, @types/gapi.auth2, @types/jquery, @types/lodash, @types/prismjs, @types/react-color, @types/react-virtualized-auto-sizer, @types/react-window (typescript definitions)
• classnames, prettier, source-map-explorer (code maintenance related)

---

3. remaining outdated packages:

• blueprintjs v3->4: assigned in another issue, in progress
• protobufjs: assigned in another issue
• react, react-dom v17->18: blueprintjs v4 has better compatibility with react 18
• testing-library: require react v18
• konva, react-konva: better compatibility with react 18
• golden-layout: v2 does not support react

We can set react, testing-library, and konva upgrades as a ToDo after the blueprintjs upgrade is merged.

Checklist

For linked issues (if there are):

• assignee and label added
• ZenHub issue connection, board status, and estimate updated

For the pull request:

• reviewers and assignee added
• ZenHub estimate, milestone, and release (if needed) added
• e2e test passing / corresponding fix added
• changelog updated / no changelog update needed
• protobuf updated to the latest dev commit / no protobuf update needed
• BackendService unchanged / BackendService changed and corresponding ICD test fix added

[kswang1029]

a blind run of e2e tests is promising. no regression is observed. I will have some more detailed tests for each changed libraries.

[kswang1029]

@YuHsuan-Hwang mostly it is looking good from manual tests. There is one issue about plotting profile data in points. Please refer to the following video for the problem. All the profile plotters with the three styles (step, line, point) have the same problem.

Screen.Recording.2023-03-14.at.11.20.13.mov

[YuHsuan-Hwang]

There is one issue about plotting profile data in points. Please refer to the following video for the problem. All the profile plotters with the three styles (step, line, point) have the same problem.

@kswang1029 Fixed by adjust the chartjs bug workaround.
Looks like the scatter plot will not update the line components when we set showLine: false. showLine is now always true, and the width of the lines is 0 when the plot type is points.

[kswang1029]

There is one issue about plotting profile data in points. Please refer to the following video for the problem. All the profile plotters with the three styles (step, line, point) have the same problem.

@kswang1029 Fixed by adjust the chartjs bug workaround. Looks like the scatter plot will not update the line components when we set showLine: false. showLine is now always true, and the width of the lines is 0 when the plot type is points.

sounds like another workaround?🤔

[kswang1029]

this is looking good now. no regression from e2e tests. With additional manual tests to chartjs plots, I do not see regressions as far as I can tell. 👍