search

lunasec-io / lunasec

LunaSec - Dependency Security Scanner that automatically notifies you about vulnerabilities like Log4Shell or node-ipc in your Pull Requests and Builds. Protect yourself in 30 seconds with the LunaTrace GitHub App: https://github.com/marketplace/lunatrace-by-lunasec/
https://www.lunasec.io/
Other
1.44k stars 164 forks source link

NPM Package visualization #1096

Closed breadchris closed 1 year ago

breadchris commented 1 year ago 
# production db
DSN=postgres://xxx:xxx@localhost/lunatrace go run cmd/registryproxy/main.go
go build -o bin/analysiscli cmd/analysiscli/main.go
analysiscli visualize-package moment 2.29.4

index.html

<html>
  <script src="https://www.elgrapho.com/dist/v2.4.0/ElGrapho.min.js"></script>
  <script src="script.js"></script>
  <div id="container"></div>
</html>

script.js

// change this line with the generated package json 
fetch('./moment-2.29.4.json')
    .then((response) => response.json())
    .then((json) => {
                        let model = {
                                nodes: [],
                                edges: [],
                                steps: 100
                        };

                        json.nodes.forEach(function(node, n) {
                                model.nodes.push({
                                        group: node.group,
                                        value: node.name
                                });

                        });

                        json.links.forEach(function(link) {
                                let fromIndex = link.source;
                                let toIndex = link.target;

                                model.edges.push({
                                        from: fromIndex,
                                        to: toIndex
                                });
                        });
                        let graph = new ElGrapho({
                                container: document.getElementById('container'),
                                model: ElGrapho.layouts.Hairball(model),
                                width: window.screen.width,
                                height: window.screen.height,
                                debug: false,
                                nodeSize: 0.02,
                                edgeSize: 1,
                                darkMode: true,
                                glowBlend: 0.5,
                                nodeOutline: false,
                                arrows: true
                        });
                        graph.tooltipTemplate = function(index, el) {
        el.innerHTML = 'node index:' + index + ', node value: ' + model.nodes[index].value;
      };
                });