Browse Source

show details

master
Milan Pässler 11 months ago
parent
commit
47025d94a0
6 changed files with 64 additions and 12 deletions
  1. +3
    -2
      client/src/canvas.js
  2. +4
    -1
      client/src/force.js
  3. +39
    -7
      client/src/index.js
  4. +6
    -0
      client/src/state.js
  5. +4
    -2
      client/style.css
  6. +8
    -0
      server/index.js

+ 3
- 2
client/src/canvas.js View File

@@ -1,4 +1,5 @@
import { graph, selectedNode, setSelectedNode } from "./state";
import { restartSimulation } from "./force";

const dpr = window.devicePixelRatio || 1;
const canvas = document.getElementById("canvas");
@@ -105,7 +106,7 @@ const mouseDownHandler = (x, y, touchEvent) => {
if (view.draggedNode) {
view.dragStartOffsetX = view.draggedNode.x;
view.dragStartOffsetY = view.draggedNode.y;
simulation.restart();
restartSimulation();
} else {
view.dragStartOffsetX = view.offsetX;
view.dragStartOffsetY = view.offsetY;
@@ -125,7 +126,7 @@ const mouseMoveHandler = (x, y, touchEvent) => {
if (view.draggedNode) {
view.draggedNode.fx = view.dragStartOffsetX - (view.dragStartMouseX - x) / view.scale;
view.draggedNode.fy = view.dragStartOffsetY - (view.dragStartMouseY - y) / view.scale;
simulation.alpha(0.5);
restartSimulation();
} else {
view.offsetX = view.dragStartOffsetX - (view.dragStartMouseX - x) / view.scale;
view.offsetY = view.dragStartOffsetY - (view.dragStartMouseY - y) / view.scale;


+ 4
- 1
client/src/force.js View File

@@ -7,6 +7,10 @@ let linkForce = d3Force.forceLink([]).id(d => String(d.id));
export const updateGraph = () => {
simulation.nodes(nodesAsArray());
linkForce.links(graph.links);
restartSimulation();
};

export const restartSimulation = () => {
simulation.alpha(0.5);
simulation.restart();
};
@@ -15,4 +19,3 @@ simulation
.force("link", linkForce)
.force("charge", d3Force.forceManyBody())
.force("center", d3Force.forceCenter());


+ 39
- 7
client/src/index.js View File

@@ -1,12 +1,13 @@
import { graph, selectedNode, setGraph, setSelectedNode } from "./state";
import { graph, selectedNode, setGraph, setSelectedNode, nodesAsArray } from "./state";
import { updateGraph } from "./force";
import "./canvas";

const apiUri = "/api";
const backendSelect = document.getElementById("backend");
let currentRequestNumber = 0;
let loadedGraph;

const go = async (backend, name) => {
const go = async (backend, name, selected) => {
document.querySelector('#backend [value="' + backend + '"]').selected = true;

document.getElementById("name").blur();
@@ -25,15 +26,39 @@ const go = async (backend, name) => {
return;
}
if (currentRequestNumber !== thisRequest) return;

for (let id of Object.keys(newGraph.nodes)) {
newGraph.nodes[id].weight = Math.min(50, 5 + (newGraph.nodes[id].size / 5000000) || 0);
}
setGraph(newGraph);
document.getElementById("loading").classList.add("hidden");

for (let id of Object.keys(graph.nodes)) {
graph.nodes[id].weight = Math.min(50, 5 + (graph.nodes[id].size / 5000000) || 0);
if (!selected) {
setSelectedNode(nodesAsArray()[0]);
} else {
setSelectedNode(nodesAsArray().filter(node => node.id === selected)[0]);
}

updateGraph();
setSelectedNode(nodesAsArray().filter(n => n.name === name)[0]);
updateDetails();
};

const displaySize = (size) => `${Math.round(size / 1024 / 1024 * 10) / 10}MiB`;

const updateDetails = () => {
const details = document.getElementById("details");

details.innerHTML = `
${selectedNode ? `
<p><b>Package ${selectedNode.name}</b></p>
<p>Installed size: ${displaySize(selectedNode.size)}</p>
<br/>
` : ``}
${graph.details ? `
<p><b>Graph for package ${nodesAsArray()[0].name}</b></p>
<p>Total nodes: ${graph.details.count}</p>
<p>Total installed size: ${displaySize(graph.details.size)}</p>
` : ``}
`;
};

const handleSubmit = (evt) => {
@@ -49,7 +74,14 @@ const handleHashChange = () => {
if (hash.length < 2) return;
const backend = hash[0];
const name = hash[1];
go(backend, name);
const selected = hash[2];
const graphId = `${backend}:${name}`;
if (loadedGraph === graphId) {
updateDetails();
return;
}
loadedGraph = graphId;
go(backend, name, selected);
};

const fetchBackendList = async () => {


+ 6
- 0
client/src/state.js View File

@@ -11,6 +11,12 @@ export const setGraph = (val) => {

export const setSelectedNode = (val) => {
selectedNode = val;
const hash = window.location.hash.substr(1).split(":");
if (val) {
window.location.hash = `#${hash[0]}:${hash[1]}:${val.id}`;
} else {
window.location.hash = `#${hash[0]}:${hash[1]}`;
}
};

export const nodesAsArray = () => {


+ 4
- 2
client/style.css View File

@@ -33,12 +33,13 @@ canvas {
}

#menu {
color: white;
display: none;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.4);
background-color: rgba(100, 100, 100, 0.7);
height: 100vh;
padding: 15px;
padding-top: 75px;
@@ -57,7 +58,7 @@ canvas {
width: 50px;
height: 50px;
position: fixed;
z-index: 1;
z-index: 2;
margin: 0;
top: 0;
left: 0;
@@ -82,6 +83,7 @@ canvas {
top: 0;
left: 0;
background: #eee;
z-index: 1;
}

#checkbox:checked ~ #checkbox-bg .bar1 {


+ 8
- 0
server/index.js View File

@@ -18,6 +18,10 @@ const addNode = async (graph, backend, node) => {
...node,
deps: undefined,
}

graph.details.count++;
graph.details.size += Number(node.size);

const pendingRequests = [];
for (let link of node.deps || []) {
let neighbour;
@@ -40,6 +44,10 @@ const buildGraph = async (backend, name) => {
const graph = {
nodes: {},
links: [],
details: {
count: 0,
size: 0,
},
};
await addNode(graph, backend, await backend("name", name));
return graph;


Loading…
Cancel
Save