Yuhsuan/1974 package update

.npmrc

@@ -0,0 +1 @@
+unsafe-perm = true

package.json

@@ -13,73 +13,85 @@
         "@testing-library/jest-dom": "^5.11.9",
         "@testing-library/react": "^12.0.0",
         "@testing-library/user-event": "^13.1.9",
-        "@types/gapi": "^0.0.40",
-        "@types/gapi.auth2": "^0.0.55",
-        "@types/jest": "^26.0.20",
-        "@types/jquery": "^3.5.5",
-        "@types/lodash": "^4.14.168",
-        "@types/node": "^16.3.2",
-        "@types/plotly.js": "^1.54.8",
-        "@types/prismjs": "^1.16.5",
+        "@types/gapi": "^0.0.44",
+        "@types/gapi.auth2": "^0.0.57",
+        "@types/jest": "^29.4.0",
+        "@types/jquery": "^3.5.16",
+        "@types/lodash": "^4.14.191",
+        "@types/node": "^18.14.6",
+        "@types/plotly.js": "^2.12.18",
+        "@types/prismjs": "^1.26.0",
         "@types/react": "^17.0.2",
-        "@types/react-color": "^3.0.1",
+        "@types/react-color": "^3.0.6",
         "@types/react-dom": "^17.0.1",
-        "@types/react-plotly.js": "^2.2.4",
-        "@types/react-virtualized-auto-sizer": "^1.0.0",
-        "@types/react-window": "^1.8.2",
+        "@types/react-plotly.js": "^2.6.0",
+        "@types/react-virtualized-auto-sizer": "^1.0.1",
+        "@types/react-window": "^1.8.5",
         "@types/tinycolor2": "^1.4.2",
-        "ajv": "^8.6.1",
-        "axios": "^0.21.1",
-        "chart.js": "^3.7.1",
-        "classnames": "^2.3.1",
-        "eslint-plugin-simple-import-sort": "^9.0.0",
+        "@typescript-eslint/parser": "^5.54.0",
+        "@typescript-eslint/eslint-plugin": "^5.54.0",
+        "ajv": "^8.12.0",
+        "assert": "^2.0.0",
+        "axios": "^1.3.4",
+        "buffer": "^6.0.3",
+        "chart.js": "^4.2.1",
+        "classnames": "^2.3.2",
+        "constants-browserify": "^1.0.0",
+        "crypto-browserify": "^3.12.0",
+        "eslint-plugin-simple-import-sort": "10.0.0",
         "fuzzy-search": "^3.2.1",
         "glob-to-regexp": "^0.4.1",
         "golden-layout": "^1.5.9",
-        "idb": "^6.1.3",
+        "idb": "^7.1.1",
         "jest-canvas-mock": "^2.4.0",
         "jwt-decode": "^3.1.2",
         "konva": "^8.1.1",
         "lodash": "^4.17.15",
-        "mnemonist": "^0.38.1",
-        "mobx": "^6.1.7",
-        "mobx-react": "^7.1.0",
+        "mnemonist": "^0.39.5",
+        "mobx": "^6.8.0",
+        "mobx-react": "^7.6.0",
         "moment": "^2.27.0",
         "npm-run-all": "^4.1.3",
-        "plotly.js": "^1.58.4",
-        "prettier": "2.6.2",
+        "os-browserify": "^0.3.0",
+        "patch-package": "^6.5.1",
+        "path-browserify": "^1.0.1",
+        "plotly.js": "^2.18.2",
+        "prettier": "2.8.4",
         "preval.macro": "^5.0.0",
-        "prismjs": "^1.23.0",
+        "prismjs": "^1.29.0",
         "protobufjs": "6.9.0",
         "raw-loader": "^4.0.2",
         "react": "^17.0.1",
-        "react-chartjs-2": "^3.1.1",
+        "react-chartjs-2": "^5.2.0",
         "react-color": "^2.17.3",
         "react-dom": "^17.0.1",
-        "react-iframe": "^1.8.0",
+        "react-iframe": "^1.8.5",
         "react-konva": "^17.0.2-4",
-        "react-plotly.js": "^2.5.1",
-        "react-resize-detector": "^6.6.0",
-        "react-rnd": "^9.2.0",
-        "react-scripts": "^4.0.2",
-        "react-scroll-to-bottom": "^4.1.0",
-        "react-simple-code-editor": "^0.11.0",
+        "react-plotly.js": "^2.6.0",
+        "react-resize-detector": "^8.0.4",
+        "react-rnd": "^10.4.1",
+        "react-scripts": "^5.0.1",
+        "react-scroll-to-bottom": "^4.2.0",
+        "react-simple-code-editor": "^0.13.1",
         "react-split-pane": "^0.1.91",
-        "react-virtualized-auto-sizer": "^1.0.4",
-        "react-window": "^1.8.6",
-        "rxjs": "^7.2.0",
-        "sass": "^1.52.3",
+        "react-virtualized-auto-sizer": "^1.0.7",
+        "react-window": "^1.8.8",
+        "rxjs": "^7.8.0",
+        "sass": "^1.58.3",
         "semver": "^7.3.8",
-        "source-map-explorer": "^2.5.2",
+        "source-map-explorer": "^2.5.3",
+        "stream-browserify": "^3.0.0",
         "stats-js": "^1.0.1",
-        "tinycolor2": "^1.4.1",
-        "typescript": "^4.1.5",
-        "uuid": "^8.3.2",
+        "tinycolor2": "^1.6.0",
+        "typescript": "^4.9.5",
+        "util": "^0.12.5",
+        "uuid": "^9.0.0",
         "worker-loader": "^3.0.8"
     },
     "scripts": {
         "git-info": "./git-info.sh",
         "analyze": "source-map-explorer build/static/js/main.*",
+        "postinstall": "patch-package",
         "start": "npm run git-info; react-scripts start",
         "build": "npm run git-info; npm-run-all build-wrappers build-protobuf build-ts",
         "build-docker": "npm run git-info; npm-run-all build-wrappers-docker build-protobuf build-ts",
@@ -154,12 +166,11 @@
     },
     "jest": {
         "transformIgnorePatterns": [
-            "node_modules/(?!(konva|@blueprintjs))"
+            "node_modules/(?!(konva|@blueprintjs|axios))"
         ],
         "moduleNameMapper": {
             "canvas": "jest-canvas-mock",
-            "zfp_wrapper": "<rootDir>/src/__mocks__/ZFPWorkerMock.js",
-            "^!raw-loader!(.*)$": "<rootDir>/src/services/GLSL/$1"
+            "zfp_wrapper": "<rootDir>/src/__mocks__/ZFPWorkerMock.js"
         }            
     }    
 }

patches/react-scripts+5.0.1.patch

@@ -0,0 +1,41 @@
+diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
+index e465d8e..62552b7 100644
+--- a/node_modules/react-scripts/config/webpack.config.js
++++ b/node_modules/react-scripts/config/webpack.config.js
+@@ -345,6 +345,24 @@ module.exports = function (webpackEnv) {
+           babelRuntimeRegenerator,
+         ]),
+       ],
++      fallback: {
++        // the packages need to be added as carta devDependencies
++        fs: require.resolve('fs-extra'),
++        assert: require.resolve('assert'),
++        buffer: require.resolve('buffer'),
++        constants: require.resolve('constants-browserify'),
++        crypto: require.resolve('crypto-browserify'),
++        path: require.resolve('path-browserify'),
++        stream: require.resolve('stream-browserify'),
++        util: require.resolve('util')
++      }
++    },
++    // optimization in webpack v5 does not allow editting files in node_modules directly
++    // unless we opt-out of this optimization with snapshot.managedPaths
++    snapshot: {
++      managedPaths: [
++        /^(.+?[\\/]node_modules[\\/](?!(carta-protobuf|ast_wrapper|carta_computation|gsl_wrapper|zfp_wrapper))(@.+?[\\/])?.+?)[\\/]/,
++      ],
+     },
+     module: {
+       strictExportPresence: true,
+@@ -361,6 +379,11 @@ module.exports = function (webpackEnv) {
+           // match the requirements. When no loader matches it will fall
+           // back to the "file" loader at the end of the loader list.
+           oneOf: [
++            // load glsl files as strings
++            {
++              test: /\.glsl$/,
++              type: 'asset/source',
++            },
+             // TODO: Merge this config once `image/avif` is in the mime-db
+             // https://github.com/jshttp/mime-db
+             {

src/components/FloatingWidget/FloatingWidgetComponent.tsx

@@ -138,7 +138,11 @@ export class FloatingWidgetComponent extends React.Component<FloatingWidgetCompo
                     widgetConfig.setDefaultPosition(data.lastX, data.lastY);
                 }}
                 onResizeStop={(e, direction, element, delta, position) => {
-                    widgetConfig.setDefaultPosition(position.x, position.y);
+                    // manually add the height of the root-menu div to position y
+                    // work-around for the change of the position definition from react-rnd v9 (absolute position) to v10 (relative position from the bounds)
+                    const rootMenuHeight = 40;
+                    const absPosition = {x: position.x, y: position.y + rootMenuHeight};
+                    widgetConfig.setDefaultPosition(absPosition.x, absPosition.y);
                     widgetConfig.setDefaultSize(widgetConfig.defaultWidth + delta.width, widgetConfig.defaultHeight + delta.height);
                 }}
             >

src/components/Shared/LinePlot/LinePlotComponent.tsx

@@ -542,20 +542,20 @@ export class LinePlotComponent extends React.Component<LinePlotComponentProps> {
 
     private exportSubPlotImage(visible: boolean) {
         const scatterChart = this.plotRef;
-        scatterChart.config["_config"].options.scales["x-axis-0"].ticks.display = visible;
+        scatterChart.config["_config"].options.scales["x"].ticks.display = visible;
         let tickMarkLength = 10;
         if (!visible) {
             tickMarkLength = 0;
         }
-        scatterChart.config["_config"].options.scales["x-axis-0"].grid.tickLength = tickMarkLength;
-        scatterChart.config["_config"].options.scales["x-axis-0"].title.display = visible;
+        scatterChart.config["_config"].options.scales["x"].grid.tickLength = tickMarkLength;
+        scatterChart.config["_config"].options.scales["x"].title.display = visible;
         scatterChart.update();
     }
 
     private showPlotxAxes() {
         const scatterChart = this.plotRef;
         if (this.props.isGroupSubPlot === true) {
-            if (scatterChart && scatterChart.config["_config"].options.scales["x-axis-0"].ticks.display === false) {
+            if (scatterChart && scatterChart.config["_config"].options.scales["x"].ticks.display === false) {
                 return true;
             }
         }

src/components/Shared/LinePlot/PlotContainer/PlotContainerComponent.tsx

@@ -1,13 +1,15 @@
 import * as React from "react";
 import {Scatter} from "react-chartjs-2";
 import {Colors} from "@blueprintjs/core";
-import {Chart, ChartArea, ChartDataset, ChartOptions, Plugin, Scale, Tick} from "chart.js";
+import {Chart, ChartArea, ChartDataset, ChartOptions, Legend, LinearScale, LineElement, LogarithmicScale, Plugin, PointElement, Scale, Tick} from "chart.js";
 import * as _ from "lodash";
 import tinycolor from "tinycolor2";
 
 import {PlotType} from "components/Shared";
 import {clamp, toExponential, toFixed} from "utilities";
 
+Chart.register(Legend, LinearScale, LineElement, LogarithmicScale, PointElement);
+
 export enum TickType {
     Automatic,
     Scientific,
@@ -76,8 +78,8 @@ export class PlotContainerComponent extends React.Component<PlotContainerProps>
 
     private afterChartLayout = (chart: Chart) => {
         if (this.props.isGroupSubPlot) {
-            var xScale = chart.scales["x-axis-0"];
-            var yScale = chart.scales["y-axis-0"];
+            var xScale = chart.scales["x"];
+            var yScale = chart.scales["y"];
             const currentWidth = chart.width;
 
             chart.chartArea.left = 85;
@@ -371,7 +373,7 @@ export class PlotContainerComponent extends React.Component<PlotContainerProps>
                 }
             },
             scales: {
-                "x-axis-0": {
+                x: {
                     position: "bottom",
                     min: this.props.xMin,
                     max: this.props.xMax,
@@ -389,13 +391,15 @@ export class PlotContainerComponent extends React.Component<PlotContainerProps>
                         callback: PlotContainerComponent.GetCallbackForTickType(this.props.tickTypeX)
                     },
                     grid: {
-                        drawBorder: false,
                         color: grid => (grid.index === 0 && this.props.xZeroLineColor ? this.props.xZeroLineColor : gridColor),
                         lineWidth: grid => (grid.index === 0 && this.props.zeroLineWidth ? this.props.zeroLineWidth : 1),
                         tickLength: this.props.xTickMarkLength === 0 ? this.props.xTickMarkLength : 10
+                    },
+                    border: {
+                        display: false
                     }
                 },
-                "x-axis-1": {
+                "x-secondary": {
                     position: "top",
                     min: this.props.xMin,
                     max: this.props.xMax,
@@ -410,7 +414,7 @@ export class PlotContainerComponent extends React.Component<PlotContainerProps>
                         callback: this.props.topAxisTickFormatter ? this.props.topAxisTickFormatter : PlotContainerComponent.GetCallbackForTickType(this.props.tickTypeX)
                     }
                 },
-                "y-axis-0": {
+                y: {
                     min: this.props.yMin,
                     max: this.props.yMax,
                     title: {
@@ -425,9 +429,11 @@ export class PlotContainerComponent extends React.Component<PlotContainerProps>
                         callback: PlotContainerComponent.GetCallbackForTickType(this.props.tickTypeY)
                     },
                     grid: {
-                        drawBorder: false,
                         color: grid => (grid.index === 0 && this.props.xZeroLineColor ? this.props.xZeroLineColor : gridColor),
                         lineWidth: grid => (grid.index === 0 && this.props.zeroLineWidth ? this.props.zeroLineWidth : 1)
+                    },
+                    border: {
+                        display: false
                     }
                 }
             },
@@ -438,16 +444,16 @@ export class PlotContainerComponent extends React.Component<PlotContainerProps>
         };
 
         if (this.props.logY) {
-            plotOptions.scales["y-axis-0"].afterBuildTicks = this.filterYLogTicks;
-            plotOptions.scales["y-axis-0"].type = "logarithmic";
+            plotOptions.scales["y"].afterBuildTicks = this.filterYLogTicks;
+            plotOptions.scales["y"].type = "logarithmic";
         } else {
-            plotOptions.scales["y-axis-0"].afterBuildTicks = this.filterYLinearTicks;
-            plotOptions.scales["y-axis-0"].type = "linear";
+            plotOptions.scales["y"].afterBuildTicks = this.filterYLinearTicks;
+            plotOptions.scales["y"].type = "linear";
         }
 
         let plotData: ChartDataset<"scatter">[] = [];
         if (this.props.data?.length) {
-            const datasetConfig: ChartDataset = {
+            const datasetConfig: ChartDataset<"scatter"> = {
                 label: "LineGraph",
                 type: "scatter",
                 data: this.props.logY ? PlotContainerComponent.ConvertLogData(this.props.data) : this.props.data,
@@ -456,11 +462,13 @@ export class PlotContainerComponent extends React.Component<PlotContainerProps>
                 order: this.props.order ? this.props.order : 0
             };
             if (this.props.plotType === PlotType.POINTS) {
-                datasetConfig.showLine = false;
-                datasetConfig.borderWidth = 0;
-                datasetConfig.borderColor = "rgba(0, 0, 0, 0)";
                 datasetConfig.pointRadius = this.props.pointRadius ? this.props.pointRadius : 1;
                 datasetConfig.pointBackgroundColor = lineColor;
+
+                // chartjs bug workaround: plot 0 width lines to avoid previous lines remaining in the graph
+                datasetConfig.showLine = true;
+                datasetConfig.borderWidth = 0;
+                datasetConfig.borderColor = "rgba(0, 0, 0, 0)";
             } else {
                 datasetConfig.pointRadius = 0;
                 datasetConfig.showLine = true;
@@ -502,7 +510,7 @@ export class PlotContainerComponent extends React.Component<PlotContainerProps>
                 if (currentOpacity < 1.0) {
                     currentLineColor = tinycolor(currentLineColor).setAlpha(currentOpacity).toRgbString();
                 }
-                const multiPlotDatasetConfig: ChartDataset = {
+                const multiPlotDatasetConfig: ChartDataset<"scatter"> = {
                     type: "scatter",
                     label: key,
                     data: this.props.logY ? PlotContainerComponent.ConvertLogData(props.data) : props.data,
@@ -533,10 +541,13 @@ export class PlotContainerComponent extends React.Component<PlotContainerProps>
                 let currentLineWidth = props.borderWidth ? props.borderWidth : this.props.borderWidth;
 
                 if (props.type === PlotType.POINTS) {
-                    multiPlotDatasetConfig.showLine = false;
                     multiPlotDatasetConfig.pointStyle = "circle";
                     multiPlotDatasetConfig.pointRadius = currentPointRadius ? currentPointRadius : 1;
+
+                    // chartjs bug workaround: plot 0 width lines to avoid previous lines remaining in the graph
+                    multiPlotDatasetConfig.showLine = true;
                     multiPlotDatasetConfig.borderWidth = 0;
+                    multiPlotDatasetConfig.borderColor = "rgba(0, 0, 0, 0)";
                 } else if (props.type === PlotType.LINES || props.type === PlotType.STEPS) {
                     multiPlotDatasetConfig.showLine = true;
                     multiPlotDatasetConfig.pointRadius = 0.5;

src/components/StokesAnalysis/StokesAnalysisComponent.tsx

@@ -1214,7 +1214,7 @@ export class StokesAnalysisComponent extends React.Component<WidgetProps> {
                 paLinePlotProps.markers.push(cursor);
                 piLinePlotProps.markers.push(cursor);
                 quLinePlotProps.markers.push(cursor);
-                if (cursor && cursor.value && typeof cursor.value !== undefined) {
+                if (cursor && cursor.value && typeof cursor.value !== "undefined") {
                     channel.channelHovered = cursor.value;
                 }
             }
@@ -1238,7 +1238,7 @@ export class StokesAnalysisComponent extends React.Component<WidgetProps> {
                 piLinePlotProps.markers.push(channelCurrent, channelRequired);
                 quLinePlotProps.markers.push(channelCurrent, channelRequired);
 
-                if (channelCurrent && channelCurrent.value && typeof channelCurrent.value !== undefined) {
+                if (channelCurrent && channelCurrent.value && typeof channelCurrent.value !== "undefined") {
                     channel.channelCurrent = channelCurrent.value;
                 }
             }

src/services/ApiService.ts

@@ -440,7 +440,7 @@ export class ApiService {
     };
 
     public getSnippets = async () => {
-        let savedSnippets: {[name: string]: any};
+        let savedSnippets: {[name: string]: Snippet};
         if (ApiService.RuntimeConfig.apiAddress) {
             try {
                 const url = `${ApiService.RuntimeConfig.apiAddress}/database/snippets`;