Visualize the NPM dependencies city ecosystem of your node project in VR
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 542 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/61898 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 2023436 / 542
2
5
10
14
15
16
22
24
27
29
31
36
43
48
56
63
74
78
83
87
89
95
96
99
104
106
107
117
119
121
122
125
126
128
130
132
134
135
136
141
143
146
148
152
155
157
159
161
165
166
168
170
173
176
180
181
185
191
194
196
197
198
199
206
207
209
210
211
212
216
219
220
227
228
229
231
232
233
236
250
252
256
258
260
263
264
267
271
273
275
276
278
282
286
292
293
298
299
300
302
312
316
321
322
324
339
341
342
343
344
351
352
354
355
356
357
359
369
370
372
373
376
378
379
380
382
383
387
390
394
395
401
405
406
410
411
413
415
416
421
426
430
437
438
440
441
443
444
445
446
448
449
450
451
458
464
468
472
475
476
479
481
493
494
498
499
502
509
513
516
517
520
522
524
525
531
534
535
537
538
541
00:00
SoftwareCodeSystem programmingAreaMetric systemPhysical systemBuildingHierarchyPrinciple of localityOrientation (vector space)SpiralAlgorithmElement (mathematics)Interactive televisionSource codeSelf-organizationSpiralBuildingAlgorithmVisualization (computer graphics)Source codeCharacteristic polynomialVirtual realityStudent's t-testPrototypeProjective planeLevel (video gaming)Java appletPhysical systemCASE <Informatik>Metric systemCodeWeb 2.0Revision controlDemo (music)NeuroinformatikGraph coloringAreaComputer animation
03:31
Color managementGamma functionCue sportsEmailHypothesisDirection (geometry)VisualizationComputer animation
04:04
Gamma functionProjective planeGreatest elementDemo (music)Cartesian coordinate systemGraph coloringLevel (video gaming)Different (Kate Ryan album)BuildingFormal grammarSoftware engineeringUser interfaceCASE <Informatik>Computer animation
05:10
Graphic designDew pointSoftware protection dongleBuildingLevel (video gaming)Visualization (computer graphics)BuildingCore dumpProjective planeComputer animationDiagram
06:38
Demo (music)RWE DeaGraph (mathematics)Asynchronous Transfer ModeGame theoryGamma functionDew pointGraphic designDiscrete element methodDampingDemo (music)BuildingAreaCodeVolume (thermodynamics)NumberCharacteristic polynomialMetric systemLine (geometry)Visualization (computer graphics)Total S.A.CuboidComputer animation
08:15
System callGamma functionRWE DeaUniform resource locatorDiscrete element methodRow (database)PrototypeNumberType theoryDefault (computer science)Graph coloringBuildingMetric systemComputer animation
08:54
Dynamic random-access memoryGraph coloringRight angleComputer animation
09:26
Computer wormGamma functionMeta elementComputer-generated imageryDampingDiscrete element methodMetric systemCategory of beingMultiplication signGraph coloringCASE <Informatik>Attribute grammarProjective planeRevision controlLevel (video gaming)Computer animation
11:19
Data Encryption StandardGamma functionGraphic designBuilding1 (number)Computer animation
12:16
Drum memoryDew pointNo free lunch in search and optimizationGraphic designMetric systemRepository (publishing)NumberArithmetic meanScripting languageLevel (video gaming)Visualization (computer graphics)Uniqueness quantificationVulnerability (computing)Computer animation
13:13
Discrete element methodVisualization (computer graphics)InformationNumberComputer animation
13:33
Wireless Markup LanguageGraphic designDew pointNumberRepository (publishing)Computer animation
13:52
Form (programming)Graphic designDegree (graph theory)Dew pointMetric systemAreaLine (geometry)Total S.A.Virtual realityLink (knot theory)Projective planeVisualization (computer graphics)Graph (mathematics)Set (mathematics)Computer animation
14:17
User interfaceTable (information)VirtualizationGame controllerDemo (music)TouchscreenInformationNeuroinformatikComputer animation
15:15
Gamma functionAreaTotal S.A.Metric systemLine (geometry)Decision tree learningDemo (music)Demo (music)Projective planeComputer animation
15:36
Graphic designRWE DeaPrisoner's dilemmaTotal S.A.Metric systemAreaLine (geometry)PermianMenu (computing)User interfaceVertex (graph theory)Computer animation
15:55
Gamma functionElectronic mailing listCartesian coordinate systemCodeVulnerability (computing)Repository (publishing)
16:54
Code
17:28
CodeUniform resource locatorScripting languageComputer fileComputer-generated imagery
18:42
Frame problemContent (media)Acoustic shadowRotationSphereRadiusCylinder (geometry)Clique-width
19:30
Digital filterNetwork topologyCylinder (geometry)Computer network
20:33
Cylinder (geometry)Computer networkComputer animationDiagram
21:41
Pole (complex analysis)Computer animation
22:34
Program flowchart
Transcript: English(auto-generated)
00:18
Got it? Hey, thank you for coming and thank you to the organizers as well for organizing this
00:27
FOSDEM and this JavaScript Dev Room. I'm Navid Moreno. I'm a PhD student at the Universidad Refran Carlos in Spain, Madrid. And I'm going to present you how to visualize the NPM dependency city ecosystem of Junot project in virtual reality.
00:43
I would like to say that this is not a technical talk. It's just a prototype that I designed. It's more related to academia and I'm a PhD student. So it's kind of showing new things and I have your opinion on probably if this work is useful or not. So first of all,
01:01
I'm talking about a city. How many of you know something about code city? Raise your hand. Code city? No? One, two, three. Okay, so the city metaphor in visualization is just to take the characteristics and layout of the city and then represent something with
01:22
them. And the city layout just means quarters and buildings. And in this case code city is one of the most known tool that uses this metaphor for visualizing Java software code. In this case, each building is a
01:42
source code of the Java project and the quarter is the level of the source code in the package of the Java project. So in this case we developed a new version of this city metaphor called city visualization using web technologies. It's related to the last talk that Fabian
02:08
gave us. We use WebXR and WebGL and everything related to web in this case is A-Frame. That's how many of you know of A-Frame? Probably
02:21
more, right? So we changed this metaphor a little bit, changing the algorithm of the layout of the buildings. We use a spiral algorithm instead of a pre-mapped layout because we want to reorganize the buildings in a different way because the layout is, the pre-mapped layout is too fixed and
02:43
when you have, when you want to add a new building there there are many problems. So in this visualization we have metrics that we can represent in the buildings and in the quarters. The quarters represent a three layout because, you know, you have quarters then you can have quarters at the top of the quarters and then and so.
03:03
And the buildings have different metrics like the area of the building, the height of the building, or the color of the building. We are using this metric to represent the NPM-dependent physical system of a project. So if you are in your computer right now or in your mobile phone, I
03:21
want to invite you to go to that URL or scan G-square and then visit this live demo and then you can follow the demo with me. So this is the demo. So this is the city, oh, sorry.
03:40
It's tinyurl.com slash Babia Fosden Babia is the name of the tool that I developed in my thesis. Just a minute. With your mobile phone you won't have as many as the direction that you can have with your computer, but you can have an idea and you can visualize the city.
04:04
So this is what you can see in the demo. This is the dependency city of a project. In this case is the user interface of Shorty Hut. That is a project for doing things. It's under the grammar lab project. So in this case, in this city
04:23
each building represents a dependency of the project. And we can, what we can see here is that, okay, there are buildings with different colors and so, but the first thing that we can see here is that the quarters are kind of elevated. We can see here a quarter, what this big quarter, this quarter, this quarter, this quarter, this quarter, and this quarter.
04:49
This quarter means the dependency level that your application has. And this first quarter, the big one, the first one is like the bottom or the package.json of the JMPO project where you define the first level of dependencies. Okay?
05:05
So we have the elevated city, we have to be clear of this. The second thing that we can see in this city is where the buildings are. Where the buildings, the quarter that the building is laying out means that this
05:26
this building or this package is in that level, in that dependency level. Okay? For instance, this building is in the first level of dependencies that you probably define this package in your package.json in your node project or whatever. And these three buildings that are laying out in this level
05:46
belong to the third level of dependencies of your project. Okay? I'm explaining this because it's just a matter of or explaining how the visualization works. And some buildings go through a quarter, which means that the building that goes through a quarter is
06:05
the owner of the dependencies that are in that building, in that quarter, sorry. In other words, this package is going through this quarter, so the dependencies this, this, and these are sub-dependencies of this quarter, of this building, sorry.
06:21
Okay? Again, for instance, this package is going through this quarter. So this dependency, this dependency, this dependency are two dependencies of this building, of this package. It has to be clear because it's kind of the core of this visualization. And
06:41
if you are in the demo you probably notice that there is kind of some buttons here that are the metrics available in this visualization. These metrics that are here only change the characteristics of the buildings. Okay?
07:00
So we are going to focus on the third level, first on this row, that is the heap, the height. I don't know if you can see clear what it says here. It's this, okay. Hey this means the height of the buildings and this now the height of the building represent the age of the package in number of days.
07:25
Okay, we have this metric, this numeric metric in height. The area of the buildings we have three metrics. Now we select this one that is log slash age, which means the lines of code of
07:40
the package divided by the age in days and you are probably wondering why divided by the age number of days because if you divide, if you multiply the height of the area of a building, of a box you have the volume. So if you compute these two metrics multiplying them you can have as a third metric the volume, as computed metric in this case, the volume of the buildings will be the lines of code in total.
08:07
But we can change this metric into size in bytes divided by age. We can click on the on the metric then the visualization is updated.
08:21
And the third one is the number of commit that the package has divided by the age in days. Probably this is not as important because in this project, on this prototype we are focused on the color of the buildings and now you realize why there are many metrics in the row of color. So
08:45
by default what you see as a color building is the type of license that the package has. In this case, we can see that there are many packages with a purple color, kind of a purple and then on the right we have this legend that says which
09:05
license is using. So with this color and this city we can have a quick overview of the packages that are using the same licenses or the same license or if a package is using a license that we don't want to have in our projects or so.
09:22
That's probably one of the goals of this metric color. Then we have two metrics that is time installed and time reappeared. These are not category metrics. These are numeric metrics. These metrics follow a heat map color from blue to red and this is interesting because
09:44
I think that you know pretty well the NPM ecosystem. When you are defining when you are installing a package in NPM, if NPM found a dependency
10:01
more than once, in the same version NPM will only install the dependency once. Right? We always know that. All of us know that. But if NPM found the same dependency defined in two different versions, then NPM will install the dependency twice in this case. So
10:20
this metric represents, as the color of the building, how many times the dependency of the package is installed. In other words, how many times the dependency is defined in different versions. And this one is how many times the dependency appears in the project.
10:43
There are less diversions because we are using, for instance, we added something in GraphQL and we use GraphQL in many things. Where we find many GraphQL, I don't know a package that uses GraphQL, but then we use another package that uses GraphQL as well. So this represents how many times this package appears.
11:04
How many times it stands there. And these two metrics are completely related to the first line that is the attributes line, I call it, and it's used for changing the transparency or the wireframe of the build, the wireframe features of the buildings.
11:24
Because now you notice that there are some buildings that are kind of transparent buildings, which means that these buildings are not installed. Okay, these buildings are replicas and only the solid ones are the ones that are in this installed, okay? And if we go with our
11:43
mouse or with our VR controller, over a building, we can see that if we hover a building with the mouse, we see here that this dependency is GraphQL and then some other buildings are highlighted in white as well, but only one of them, that is this one, is solid.
12:03
So it means GraphQL is defined in many many locations, but only installs one that is there. But appears nine times. We have also metrics related to the community of the, or the package of the community behind the repository of the package.
12:27
The first one is last at days, which means the days, the number of days since the last commit, so in a heat map from blue to red, if the package is red, means that probably this package has no activity in the last
12:43
maybe, for example, this, we can see this package here, this is script 002, 2000 years since the last commit, so probably this is kind of a smell, probably, in this kind of visualization. Also, we have the number of commits in the last year of the package, in the repository of the package,
13:05
the number of unique committers in the last year of the repository of the package, and of course the number of vulnerabilities that we can find with the npm audit tool as well, but this visualization has the goal of
13:21
merge all the information that we can retrieve from the package and then show it in this CD. And the last one is the number of issues radio, that is just the number of issues open of the repository divided by the number of issues closed in all the story of the other package.
13:42
So this is the first overview of the tool. I invite you to play with it. I was really quick. Of course, in the slides, there are plenty of QRs with
14:01
links to the documentation, links to the step-by-step tutorial in order to have this deep visualization with your own project, because what you need is just to have a project installed and then run a set of tools that I'm going to spread right now. But I said that this is for virtual reality. So
14:21
in academia, some researchers validated the city metaphor in virtual reality, agreeing that the notion of having a city in a table or something like that helps the user or the participant of a pyramid or whatever to have better information than using a computer or using a 2D screen. So that's the reason behind this
14:48
research. So in this case, we are using a MetaQuest 2 glasses. This is an experiment and then we have in the left controller the user interface that we already saw in the demo.
15:00
And then we can see that when we click on the buttons, you see that the city is updated instantly. I didn't tell you, but there is a second line, the user interface, because the demo, I forgot that, the demo
15:21
has four different projects to analyze in this city. Now we select the shorting hat, that is the project that we are selecting in this project, but also we have the data from the PM2 package, if you know PM2, you can click on it, we can click on the PM2 project and then the city is automatically updated.
15:40
We have also data from the portender user interface and the GitHub desktop user interface, because it's developed in Node. We're going to focus on the data, just to finish. This QR will redirect you to
16:02
this repository where I have all the codes that I use for having the data, because this is really, really easy to replicate, because what you saw here is just an HTML using A-Frame, using Babia, that is the tool that I developed, and then a JSON with all the data.
16:23
So now we're going to talk about how to produce a JSON, but you can produce a JSON whatever you want. So it's not a matter of, you can follow this tutorial or not. So the first step is to have your NPM package or application installed, of course, because we are representing the NPM
16:41
dependencies application. The second step is to use NPM to have the dependencies list and the vulnerabilities list.
22:49
Yeah, just a simple question.