Bump frontend deps #7813

MichaelBuessemeyer · 2024-05-21T11:13:11Z

This PR updates some outdated frontend dependencies and replaces the markdown library with react-markdown. Moreover, prop types, esbuild loader, protobuffjs, and onnx web runtime are updated.

In order to fix the frontend tests, the new markdown library needs to be loaded lazily. Thus, I created the markdown_adapter.tsx file.

URL of deployed dev instance (used for testing):

https://bumpfrontenddeps.webknossos.xyz/

Steps to test:

Check whether wk works on a rudimentary level.
Check whether markdown is rendered correctly in: (Already tested by me but re-testing some of them might be helpful)
- the publication gallery
- the annotation description in the info tab an annotation
- task list view of a user
- new task info modal (shown upon opening a task)
- In the annotation view: Hovering the burger menu on the left to an annotation title should show the description

TODOs:

Test whether the current markdown rendering matches the previous settings options={{ html: false, breaks: true, linkify: true, }

Issues:

No issues exist for this

(Please delete unneeded items, merge only when none are left open)

~~[ ] Updated changelog~~ I'd say it is not needed as this is not user-facing.

- did not work :/

…p-frontend-deps

philippotto

awesome! the changes look very good. only left some smaller comments. will test once these are addressed.

package.json

philippotto · 2024-05-24T11:50:34Z

webpack.config.js

@@ -83,18 +77,21 @@ module.exports = function (env = {}) {
          ],
        },
        {
-          test: /\.tsx?$/,


why did you split tsx? into ts and tsx? the config looks the almost same or is there a difference because of the loader attribute?

Also a legacy from the debugging problems. Should be resolved now :)

philippotto · 2024-05-24T11:55:53Z

webpack.config.js

@@ -166,6 +169,11 @@ module.exports = function (env = {}) {
    },
    optimization: {
      minimize: env.production,
+      minimizer: [
+        new EsbuildPlugin({
+          target: buildTarget, // Syntax to transpile to (see options below for possible values)


Suggested change

target: buildTarget, // Syntax to transpile to (see options below for possible values)

target: buildTarget,

did you sanity check the size of the js modules in the devtools (master vs this branch)?

This branch:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: 8c3b61b77fee2ba4b6db.ttf (274 KiB) 4a3eef3e0a61b7eb3eda.ttf (269 KiB) 2f517e09eb2ca6650ff5.svg (730 KiB) 7a8b4f130182d19a2d7c.svg (897 KiB) main.js (1.49 MiB) vendors~onnx.js (529 KiB) vendors~main.js (4.7 MiB) ort-training-wasm-simd.wasm (10.7 MiB) ort-wasm-simd-threaded.jsep.wasm (18.6 MiB) ort-wasm-simd-threaded.wasm (10.2 MiB) ort-wasm-simd.jsep.wasm (16.6 MiB) ort-wasm-simd.wasm (10.1 MiB) ort-wasm-threaded.wasm (9.36 MiB) ort-wasm.wasm (9.28 MiB) models/vit_l_0b3195_decoder_quantized.onnx (8.34 MiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (6.36 MiB) vendors~main.css vendors~main.js main.css main.js

On the master:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: 4a3eef3e0a61b7eb3eda.ttf (269 KiB) 8c3b61b77fee2ba4b6db.ttf (274 KiB) 2f517e09eb2ca6650ff5.svg (730 KiB) 7a8b4f130182d19a2d7c.svg (897 KiB) main.js (1.53 MiB) vendors~onnx.js (547 KiB) vendors~main.js (4.76 MiB) models/vit_l_0b3195_decoder_quantized.onnx (8.34 MiB) ort-wasm-simd-threaded.wasm (9.5 MiB) ort-wasm-simd.wasm (9.55 MiB) ort-wasm-threaded.wasm (8.73 MiB) ort-wasm.wasm (8.8 MiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (6.45 MiB) vendors~main.css vendors~main.js main.css main.js

=> main size reduced :D
so it should be fine and it is faster than terser 🚀

philippotto · 2024-05-24T11:57:35Z

frontend/javascripts/libs/lazy_loader.tsx

+  loader: () => Promise<{ default: React.ComponentType<Props> }>,
+) {
+  const InternalComponent = React.lazy(loader) as any;
+  return function AsyncComponent(_props: Props) {


why the _ prefix? since the var is used, it can simply be props, right?

right, sorry. I had a lot of TS problems and this is a legacy of the debugging process 🙈

MichaelBuessemeyer

Thanks for your feedback and also checking for potential upgrades of other packages. I applied all of it :)

MichaelBuessemeyer · 2024-05-24T17:14:10Z

frontend/javascripts/libs/lazy_loader.tsx

+  loader: () => Promise<{ default: React.ComponentType<Props> }>,
+) {
+  const InternalComponent = React.lazy(loader) as any;
+  return function AsyncComponent(_props: Props) {


right, sorry. I had a lot of TS problems and this is a legacy of the debugging process 🙈

package.json

MichaelBuessemeyer · 2024-05-24T17:19:53Z

webpack.config.js

@@ -83,18 +77,21 @@ module.exports = function (env = {}) {
          ],
        },
        {
-          test: /\.tsx?$/,


Also a legacy from the debugging problems. Should be resolved now :)

MichaelBuessemeyer · 2024-05-24T17:23:53Z

webpack.config.js

@@ -166,6 +169,11 @@ module.exports = function (env = {}) {
    },
    optimization: {
      minimize: env.production,
+      minimizer: [
+        new EsbuildPlugin({
+          target: buildTarget, // Syntax to transpile to (see options below for possible values)


This branch:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: 8c3b61b77fee2ba4b6db.ttf (274 KiB) 4a3eef3e0a61b7eb3eda.ttf (269 KiB) 2f517e09eb2ca6650ff5.svg (730 KiB) 7a8b4f130182d19a2d7c.svg (897 KiB) main.js (1.49 MiB) vendors~onnx.js (529 KiB) vendors~main.js (4.7 MiB) ort-training-wasm-simd.wasm (10.7 MiB) ort-wasm-simd-threaded.jsep.wasm (18.6 MiB) ort-wasm-simd-threaded.wasm (10.2 MiB) ort-wasm-simd.jsep.wasm (16.6 MiB) ort-wasm-simd.wasm (10.1 MiB) ort-wasm-threaded.wasm (9.36 MiB) ort-wasm.wasm (9.28 MiB) models/vit_l_0b3195_decoder_quantized.onnx (8.34 MiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (6.36 MiB) vendors~main.css vendors~main.js main.css main.js

On the master:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: 4a3eef3e0a61b7eb3eda.ttf (269 KiB) 8c3b61b77fee2ba4b6db.ttf (274 KiB) 2f517e09eb2ca6650ff5.svg (730 KiB) 7a8b4f130182d19a2d7c.svg (897 KiB) main.js (1.53 MiB) vendors~onnx.js (547 KiB) vendors~main.js (4.76 MiB) models/vit_l_0b3195_decoder_quantized.onnx (8.34 MiB) ort-wasm-simd-threaded.wasm (9.5 MiB) ort-wasm-simd.wasm (9.55 MiB) ort-wasm-threaded.wasm (8.73 MiB) ort-wasm.wasm (8.8 MiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (6.45 MiB) vendors~main.css vendors~main.js main.css main.js

=> main size reduced :D
so it should be fine and it is faster than terser 🚀

philippotto

awesome 🥇

MichaelBuessemeyer added 2 commits May 17, 2024 17:19

update deps and replace react-remarkable with react-markdown

66ab8cc

downgrade esbuild again to hopefully fix the tests [ci skip]

f6561c6

- did not work :/

MichaelBuessemeyer added enhancement frontend labels May 21, 2024

MichaelBuessemeyer self-assigned this May 21, 2024

hotzenklotz mentioned this pull request May 21, 2024

Update React to v17 #7765

Merged

11 tasks

MichaelBuessemeyer added 5 commits May 21, 2024 13:26

Merge branch 'master' of github.com:scalableminds/webknossos into bum…

1b2cfc7

…p-frontend-deps

downgrade react-markdown to be compatible with our react version

797f827

write adapter to lazy load react markdown dependency

54fedea

Merge branch 'master' of github.com:scalableminds/webknossos into bum…

5fdc820

…p-frontend-deps

update yarn.lock

bd00b1b

MichaelBuessemeyer force-pushed the bump-frontend-deps branch from e5f56d2 to bd00b1b Compare May 22, 2024 09:26

MichaelBuessemeyer and others added 3 commits May 22, 2024 11:54

remove terser webpack plugin and replace it with esbuild loader minifier

21df30b

further upgrade esbuild-loader

f924685

Merge branch 'master' into bump-frontend-deps

fa73e03

MichaelBuessemeyer marked this pull request as ready for review May 23, 2024 14:17

MichaelBuessemeyer requested a review from philippotto May 23, 2024 14:17

philippotto requested changes May 24, 2024

View reviewed changes

MichaelBuessemeyer added 2 commits May 24, 2024 18:57

update esbuild to 0.20

d869dea

apply feedback

d5423ba

MichaelBuessemeyer commented May 24, 2024

View reviewed changes

philippotto approved these changes May 27, 2024

View reviewed changes

Merge branch 'master' into bump-frontend-deps

d1a2e5c

MichaelBuessemeyer merged commit e5e5854 into master May 27, 2024
2 checks passed

MichaelBuessemeyer deleted the bump-frontend-deps branch May 27, 2024 08:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump frontend deps #7813

Bump frontend deps #7813

MichaelBuessemeyer commented May 21, 2024 •

edited

Loading

philippotto left a comment

philippotto May 24, 2024

MichaelBuessemeyer May 24, 2024

philippotto May 24, 2024

philippotto May 24, 2024

MichaelBuessemeyer May 24, 2024 •

edited

Loading

philippotto May 24, 2024

MichaelBuessemeyer May 24, 2024

MichaelBuessemeyer left a comment

MichaelBuessemeyer May 24, 2024

MichaelBuessemeyer May 24, 2024

MichaelBuessemeyer May 24, 2024 •

edited

Loading

philippotto left a comment

	target: buildTarget, // Syntax to transpile to (see options below for possible values)
	target: buildTarget,

Bump frontend deps #7813

Bump frontend deps #7813

Conversation

MichaelBuessemeyer commented May 21, 2024 • edited Loading

URL of deployed dev instance (used for testing):

Steps to test:

TODOs:

Issues:

philippotto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MichaelBuessemeyer May 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MichaelBuessemeyer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MichaelBuessemeyer May 24, 2024 • edited Loading

Choose a reason for hiding this comment

philippotto left a comment

Choose a reason for hiding this comment

MichaelBuessemeyer commented May 21, 2024 •

edited

Loading

MichaelBuessemeyer May 24, 2024 •

edited

Loading

MichaelBuessemeyer May 24, 2024 •

edited

Loading