timeline-chart icon indicating copy to clipboard operation
timeline-chart copied to clipboard

Update pixi.js-legacy to latest major version

Open marcdumais-work opened this issue 6 months ago • 2 comments

What it does

Library pixi.js-legacy is at the center of timeline-chart. With v5.x having continued to work quite well, it has not been updated for 2 major versions (v7.x is the latest).

One of its runtime dependencies, parse-uri needs to be updated to avoid a potential "denial of service" vulnerability: image

Updating the version of pixi we use seems the only way to get rid of this vulnerability. But it's good to do once in a while anyway, to keep-up with a library that's really important to timeline-chart.

The reason we use the legacy pixi.js is because there are environments where timeline-chart is used, where no GPU acceleration is possible, so there needs to be a fall-back, when pixi's WebGL reenderer can't be used. This fallback is the CanvasRenderer, only available in legacy pixi at the moment.

Generally, we need to be careful to import pixi-related objects from pixi.js-legacy rather than the modular '@pixi/*'.

Misc:

  • try to do a better clean-up after each test
  • ran "yarn upgrade": currently zero vulnerability reported by "yarn audit"!
  • removed node 18 from ci-cd workflow, since one updated dependency is no longer compatible with this EoL version of node: error [email protected]: The engine "node" is incompatible with this module. Expected version ">=20.18.1". Got "18.20.8"

TODO:

  • fix cursors
  • fix mouse drag selection (from right to left does not show selected area)

How to test

CI passes The repo's example app starts and works:

yarn && yarn start

timeline-chart works as expected, when used in theia-trace-extension example application :

In theia-trace-extension, replace the current references to timeline-chart by a local one. One easy way is to replace the reference to timeline-chart, in "react-components" package.json. e.g.: "timeline-chart": "file:///home/<user>/git/timeline-chart/timeline-chart"

and then rebuild and start the browser example backend:

git clean -ffdx && yarn && yarn start:browser

Then connect to localhost:3000 using a browser

To start a chrome-based browser (here chromium) without WebGL :

chromium-browser --disable-3d-apis &

Note: this might not work if you already have some windows/tabs of this same browser opened.

To confirm that WebGL is disabled in timeline-chart, use the dev-tools and add a breakpoint in time-graph-container.ts, around line 41: image

"supported" should be false when there is no WebGL

A few lines down (l: 64), you can confirm that pixi has allocated a CanvasRenderer, which means a software renderer that does not use WebGL: image

Follow-ups

Will need to release a new version of timeline-chart to npm and then update the version of it being used in our other repositories.

Review checklist

  • [x] As an author, I have thoroughly tested my changes and carefully followed the instructions in this template

marcdumais-work avatar Jun 18 '25 13:06 marcdumais-work

There are quite a few dependencies failing the license check - opened IP tickets:

This content is either not correctly mapped by the system, or requires review. A review is required for npm/npmjs/@nx/nx-win32-arm64-msvc/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22031 . A review is required for npm/npmjs/@pixi/runner/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22032 . A review is required for npm/npmjs/@pixi/ticker/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22033 . A review is required for npm/npmjs/@nx/nx-linux-arm64-gnu/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22034 . A review is required for npm/npmjs/@pixi/canvas-text/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22035 . A review is required for npm/npmjs/@pixi/particle-container/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22036 . A review is required for npm/npmjs/@pixi/text/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22037 . A review is required for npm/npmjs/@nx/nx-linux-arm-gnueabihf/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22038 . A review is required for npm/npmjs/@pixi/mesh/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22039 . A review is required for npm/npmjs/@pixi/text-html/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22040 . A review is required for npm/npmjs/@pixi/extract/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22041 . A review is required for npm/npmjs/@pixi/canvas-sprite/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22042 . A review is required for npm/npmjs/@pixi/prepare/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22043 . A review is required for npm/npmjs/@pixi/mesh-extras/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22044 . A review is required for npm/npmjs/@nx/nx-darwin-arm64/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22045 . A review is required for npm/npmjs/@pixi/settings/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22046 . A review is required for npm/npmjs/-/terser/5.43.0. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22047 . A review is required for npm/npmjs/@pixi/filter-displacement/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22048 . A review is required for npm/npmjs/@nx/nx-linux-x64-gnu/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22049 . A review is required for npm/npmjs/@pixi/display/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22050 . A review is required for npm/npmjs/@pixi/accessibility/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22051 . A review is required for npm/npmjs/@pixi/canvas-sprite-tiling/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22052 . A review is required for npm/npmjs/@pixi/mixin-get-child-by-name/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22053 . A review is required for npm/npmjs/@nx/nx-win32-x64-msvc/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22054 . A review is required for npm/npmjs/@pixi/constants/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22055 . A review is required for npm/npmjs/@pixi/sprite-tiling/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22056 . A review is required for npm/npmjs/@pixi/mixin-get-global-position/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22057 . A review is required for npm/npmjs/@pixi/graphics/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22058 . A review is required for npm/npmjs/@pixi/text-bitmap/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22059 . A review is required for npm/npmjs/@pixi/core/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22060 . A review is required for npm/npmjs/@pixi/sprite/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22061 . A review is required for npm/npmjs/-/pixi.js/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22062 . A review is required for npm/npmjs/@pixi/app/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22063 . A review is required for npm/npmjs/@pixi/canvas-particle-container/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22064 . A review is required for npm/npmjs/@pixi/filter-color-matrix/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22065 . A review is required for npm/npmjs/@pixi/canvas-display/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22066 . A review is required for npm/npmjs/@nx/nx-linux-arm64-musl/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22067 . A review is required for npm/npmjs/-/dedent/1.6.0. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22068 . A review is required for npm/npmjs/-/pixi.js-legacy/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22069 . A review is required for npm/npmjs/@pixi/filter-blur/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22070 . A review is required for npm/npmjs/@nx/nx-linux-x64-musl/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22071 . A review is required for npm/npmjs/@pixi/compressed-textures/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22072 . A review is required for npm/npmjs/@pixi/canvas-graphics/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22073 . A review is required for npm/npmjs/@pixi/spritesheet/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22074 . A review is required for npm/npmjs/@pixi/filter-noise/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22075 . A review is required for npm/npmjs/@pixi/filter-alpha/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22076 . A review is required for npm/npmjs/@pixi/math/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22077 . A review is required for npm/npmjs/@pixi/sprite-animated/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22078 . A review is required for npm/npmjs/-/nx/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22079 . A review is required for npm/npmjs/@pixi/events/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22080 . A review is required for npm/npmjs/@nx/nx-freebsd-x64/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22081 . A review is required for npm/npmjs/@nx/devkit/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22082 . A review is required for npm/npmjs/@pixi/canvas-renderer/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22083 . A review is required for npm/npmjs/@pixi/color/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22084 . A review is required for npm/npmjs/@pixi/canvas-prepare/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22085 . A review is required for npm/npmjs/@pixi/canvas-extract/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22086 . A review is required for npm/npmjs/@pixi/canvas-mesh/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22087 . A review is required for npm/npmjs/@pixi/filter-fxaa/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22088 . A review is required for npm/npmjs/@nx/nx-darwin-x64/20.8.2. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22089 . A review is required for npm/npmjs/@pixi/extensions/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22090 . A review is required for npm/npmjs/@pixi/mixin-cache-as-bitmap/7.4.3. A review request was created https://gitlab.eclipse.org/eclipsefdn/emo-team/iplab/-/issues/22091 .

marcdumais-work avatar Jun 18 '25 14:06 marcdumais-work

Thanks for the upgrade. I tested it and it works quite well. However, I noticed an issue when running this change in the theia-trace-extension. The horizontal scrollbar is not working well, when opening a timeline-chart view. I can grab it but I can move it left or right. I think this should be fixed with the upgrade.

bhufmann avatar Jun 25 '25 15:06 bhufmann