Browse Source

client: add queued count

master
Milan Pässler 1 year ago
parent
commit
e490d8cf8b
3 changed files with 51 additions and 18 deletions
  1. +1
    -0
      client/index.html
  2. +41
    -18
      client/src/index.js
  3. +9
    -0
      client/style.css

+ 1
- 0
client/index.html View File

@@ -12,6 +12,7 @@
<form id="inputs">
<input type="text" id="derivation">
<input type="submit" id="go" value="Go">
<p class="hidden" id="queued">Queued: <span id="queued-count"></span></p>
</form>
<noscript>JavaScript is required to use nixpkgs reference viewer</noscript>
</body>


+ 41
- 18
client/src/index.js View File

@@ -21,6 +21,7 @@ const graph = {
nodes: {},
links: []
};
let queued = 0;
let simulation = d3Force.forceSimulation();
let linkForce = d3Force.forceLink([]).id(d => String(d.hash));
const canvas = document.getElementById('canvas');
@@ -66,35 +67,56 @@ function nodesAsArray() {
return Object.keys(graph.nodes).map((key) => graph.nodes[key]);
}

function updateQueued(newQueued) {
queued = newQueued;

let queuedP = document.getElementById("queued");
let queuedSpan = document.getElementById("queued-count");

if (queued === 0) {
queuedP.classList.add("hidden");
} else {
queuedP.classList.remove("hidden");
queuedSpan.textContent = queued;
}
}

function addNode(node) {
if (graph.nodes[node.hash]) return;

console.log(!!node.hash);

graph.nodes[node.hash] = node;
node.references.forEach(async (link) => {
let neighbour = await fetchHash(link.hash);
neighbour.weight = 5;
addNode(neighbour);
graph.links.push({
source: node.hash,
target: neighbour.hash
if (!graph.nodes[node.hash]) {
graph.nodes[node.hash] = node;
node.references.forEach(async (link) => {
let neighbour;
try {
neighbour = await fetchHash(link.hash);
} catch(err) {
console.log(node);
return;
}
neighbour.weight = 5;
addNode(neighbour);
graph.links.push({
source: node.hash,
target: neighbour.hash
});
linkForce.links(graph.links);
simulation.alpha(0.5);
simulation.restart();
});
linkForce.links(graph.links);
simulation.alpha(0.5);
simulation.restart();
});

simulation.alpha(0.5);
simulation.restart();
simulation.nodes(nodesAsArray());
simulation.nodes(nodesAsArray());
}
updateQueued(queued-1);
}

function fetchName(name) {
updateQueued(queued+1);
return fetch(`http://127.0.0.1:8080/name/${name}`)
.then(resp => resp.json());
}
function fetchHash(hash) {
updateQueued(queued+1);
return fetch(`http://127.0.0.1:8080/hash/${hash}`)
.then(resp => resp.json());
}
@@ -107,6 +129,7 @@ function init() {
.force("center", d3Force.forceCenter());

async function go() {
document.getElementById("derivation").blur();
graph.nodes = {};
graph.links = [];
const name = document.getElementById("derivation").value;


+ 9
- 0
client/style.css View File

@@ -14,3 +14,12 @@ canvas {
top: 0;
left: 0;
}

.hidden {
display: none !important;
}

#queued {
color: white;
fontSize: 10em;
}

Loading…
Cancel
Save