Update parseq-tracevis UI and dependencies #342

zackthehuman · 2023-12-13T06:41:29Z

The trace visualizer UI hasn't been updated in many years. This lack of updates is catching up with us, since the JavaScript ecosystem moves fast. This PR introduces JavaScript tooling updates to get the trace visualizer at least somewhat up to date.

The high-level list of changes are:

Update nodejs to 20.8.1
Update npm to 8.15.0
Update bootstrap to v4 (not the latest, but still updated)
Replace PhantomJS with Puppeteer for integration testing
Updated the look and feel of the visualizer slightly due to changes in how bootstrap works in v4 and partly because the existing UI needs a facelift. There is still a lot of room for improvement, but I kept the minimalist approach while trying to improve some of the usability and visual alignment of things.
- The different view selectors have icons and correct mouse cursors.
- The JSON code is now monospaced.
- Labels and buttons are visually aligned and use the same vertical rhythm.
- The waterfall view's container has optional horizontal scrollbars rather than the entire page.
- The colors have been tweaked slightly due to changes in bootstrap.
- HTML markup has been updated to remove some of the inlined JavaScript.

Screenshot

PhantomJS has long been deprecated and is no longer maintained. A better choice is puppeteer, which uses Chrome/Chromium behind the scenes rather than Webkit. Updates node to 20.x and npm to 10.x since very old versions were being used and we want to be able to take advantage of recent JavaScript features.

aliciatang

Thanks for maintaining it!

aliciatang · 2024-01-09T18:40:14Z

subprojects/parseq-tracevis/build.gradle

@@ -11,10 +12,10 @@ apply plugin: 'com.github.node-gradle.node'

 node {
  // Version of node to use.
-  version = '6.11.2'
+  version = '20.8.1'


Wow 14 major versions! Very nice!

I was surprised that nothing totally broke after this many majors :)

aliciatang · 2024-01-09T18:43:48Z

subprojects/parseq-tracevis/package.json

+    "istanbul": "^0.4.5",
+    "jshint": "^2.13.6",
+    "mocha": "^10.2.0",
+    "puppeteer": "^21.3.8",
    "uglify-js": "2.6.0"


nit: not up for the latest version? 3.17.4?

aliciatang · 2024-01-09T18:45:36Z

subprojects/parseq-tracevis/trace.html

+  width: 20px;
+  height: 20px;


nit: not using rem for this one?

Hmm, let me see if I can revise this.

aliciatang · 2024-01-09T18:46:57Z

subprojects/parseq-tracevis/trace.html

+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+  <symbol id="shapes-square" viewBox="0 0 195.74 129.42">
+    <rect x="0.5" y="0.5" width="194.74" height="128.42" fill="blue" stroke="#000" stroke-miterlimit="10"/>
+  </symbol>
+
+  <symbol id="svg-icon-timetable" viewBox="0 0 24 24">
+    <path d="M14,12H15.5V14.82L17.94,16.23L17.19,17.53L14,15.69V12M4,2H18A2,2 0 0,1 20,4V10.1C21.24,11.36 22,13.09 22,15A7,7 0 0,1 15,22C13.09,22 11.36,21.24 10.1,20H4A2,2 0 0,1 2,18V4A2,2 0 0,1 4,2M4,15V18H8.67C8.24,17.09 8,16.07 8,15H4M4,8H10V5H4V8M18,8V5H12V8H18M4,13H8.29C8.63,11.85 9.26,10.82 10.1,10H4V13M15,10.15A4.85,4.85 0 0,0 10.15,15C10.15,17.68 12.32,19.85 15,19.85A4.85,4.85 0 0,0 19.85,15C19.85,12.32 17.68,10.15 15,10.15Z" />
+  </symbol>

+  <symbol id="svg-icon-timeline" viewBox="0 0 24 24">
+    <path d="M2,2H4V20H22V22H2V2M7,10H17V13H7V10M11,15H21V18H11V15M6,4H22V8H20V6H8V8H6V4Z" />
+  </symbol>
+
+  <symbol id="svg-icon-graph-outline" viewBox="0 0 24 24">
+    <path d="M19.5 17C19.36 17 19.24 17 19.11 17.04L17.5 13.8C17.95 13.35 18.25 12.71 18.25 12C18.25 10.62 17.13 9.5 15.75 9.5C15.61 9.5 15.5 9.5 15.35 9.54L13.74 6.3C14.21 5.84 14.5 5.21 14.5 4.5C14.5 3.12 13.38 2 12 2S9.5 3.12 9.5 4.5C9.5 5.2 9.79 5.84 10.26 6.29L8.65 9.54C8.5 9.5 8.39 9.5 8.25 9.5C6.87 9.5 5.75 10.62 5.75 12C5.75 12.71 6.04 13.34 6.5 13.79L4.89 17.04C4.76 17 4.64 17 4.5 17C3.12 17 2 18.12 2 19.5C2 20.88 3.12 22 4.5 22S7 20.88 7 19.5C7 18.8 6.71 18.16 6.24 17.71L7.86 14.46C8 14.5 8.12 14.5 8.25 14.5C8.38 14.5 8.5 14.5 8.63 14.46L10.26 17.71C9.79 18.16 9.5 18.8 9.5 19.5C9.5 20.88 10.62 22 12 22S14.5 20.88 14.5 19.5C14.5 18.12 13.38 17 12 17C11.87 17 11.74 17 11.61 17.04L10 13.8C10.45 13.35 10.75 12.71 10.75 12C10.75 11.3 10.46 10.67 10 10.21L11.61 6.96C11.74 7 11.87 7 12 7C12.13 7 12.26 7 12.39 6.96L14 10.21C13.54 10.66 13.25 11.3 13.25 12C13.25 13.38 14.37 14.5 15.75 14.5C15.88 14.5 16 14.5 16.13 14.46L17.76 17.71C17.29 18.16 17 18.8 17 19.5C17 20.88 18.12 22 19.5 22S22 20.88 22 19.5C22 18.12 20.88 17 19.5 17M4.5 20.5C3.95 20.5 3.5 20.05 3.5 19.5S3.95 18.5 4.5 18.5 5.5 18.95 5.5 19.5 5.05 20.5 4.5 20.5M13 19.5C13 20.05 12.55 20.5 12 20.5S11 20.05 11 19.5 11.45 18.5 12 18.5 13 18.95 13 19.5M7.25 12C7.25 11.45 7.7 11 8.25 11S9.25 11.45 9.25 12 8.8 13 8.25 13 7.25 12.55 7.25 12M11 4.5C11 3.95 11.45 3.5 12 3.5S13 3.95 13 4.5 12.55 5.5 12 5.5 11 5.05 11 4.5M14.75 12C14.75 11.45 15.2 11 15.75 11S16.75 11.45 16.75 12 16.3 13 15.75 13 14.75 12.55 14.75 12M19.5 20.5C18.95 20.5 18.5 20.05 18.5 19.5S18.95 18.5 19.5 18.5 20.5 18.95 20.5 19.5 20.05 20.5 19.5 20.5Z" />
+  </symbol>
+</svg>


nit: in a separate svg file for image?

I inlined it so there will be no delay in loading the file, and the SVG wasn't too big. I'd prefer to not load additional external files in this case.

zackthehuman · 2024-01-10T05:33:26Z

@aliciatang Thanks for the feedback. I will address the nits in a future update. I'd like to land this first. When I have cycles, I want to make more updates to the JS code and other parts of the UI.

zackthehuman added 10 commits December 12, 2023 22:28

Update npm packages with vulnerabilities

48df24d

add package-lock.json to pin dependency resolution

d93069f

update to bootstrap 4 and improve UI

fc76a12

UI improvements, icons, minor CSS tweaks for clarity

6a74c4d

no need for important

facd4f6

overflow result view for waterfall SVG

0661083

drop custom margin for bootstrap class, use URLSearchParams to parse URL

cb3ddb6

move puppeteer to dev deps

e097aa9

minor text tweaks to improve waterfall view

52bec64

zackthehuman added the enhancement label Dec 13, 2023

use npm 8.15.0 to play nicer with LinkedIn internal repo

d3fab2e

aliciatang approved these changes Jan 9, 2024

View reviewed changes

junchuanwang approved these changes Jan 10, 2024

View reviewed changes

zackthehuman merged commit 3656ae7 into master Jan 10, 2024
1 check passed

zackthehuman deleted the zmulgrew/traceviz-viewer-modernization branch January 10, 2024 05:32

zackthehuman mentioned this pull request Jan 11, 2024

Release 5.1.18 with trace visualizer updates #344

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update parseq-tracevis UI and dependencies #342

Update parseq-tracevis UI and dependencies #342

zackthehuman commented Dec 13, 2023 •

edited

Loading

aliciatang left a comment

aliciatang Jan 9, 2024

zackthehuman Jan 9, 2024

aliciatang Jan 9, 2024

aliciatang Jan 9, 2024

zackthehuman Jan 9, 2024

aliciatang Jan 9, 2024

zackthehuman Jan 9, 2024

zackthehuman commented Jan 10, 2024

Update parseq-tracevis UI and dependencies #342

Update parseq-tracevis UI and dependencies #342

Conversation

zackthehuman commented Dec 13, 2023 • edited Loading

Screenshot

aliciatang left a comment

Choose a reason for hiding this comment

aliciatang Jan 9, 2024

Choose a reason for hiding this comment

zackthehuman Jan 9, 2024

Choose a reason for hiding this comment

aliciatang Jan 9, 2024

Choose a reason for hiding this comment

aliciatang Jan 9, 2024

Choose a reason for hiding this comment

zackthehuman Jan 9, 2024

Choose a reason for hiding this comment

aliciatang Jan 9, 2024

Choose a reason for hiding this comment

zackthehuman Jan 9, 2024

Choose a reason for hiding this comment

zackthehuman commented Jan 10, 2024

zackthehuman commented Dec 13, 2023 •

edited

Loading