Skip to content

Commit

Permalink
Fix bugs and refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkrvivian
jkrvivian committed Feb 22, 2023
1 parent 54a941b commit 2934db7
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 68 deletions.
2 changes: 1 addition & 1 deletion ...rontend/build/app.397e726c031cc6118821.js → ...rontend/build/app.35773beb2c62d73fa72f.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions plugins/dashboard/frontend/build/app.35773beb2c62d73fa72f.js.map
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion plugins/dashboard/frontend/build/app.397e726c031cc6118821.js.map
View file

This file was deleted.

2 changes: 1 addition & 1 deletion plugins/dashboard/frontend/build/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html> <html> <head> <meta charset="utf-8"> <title>GoShimmer Dashboard</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/> </head> <body> <div id="root"></div> <script type="text/javascript" src="/app/a1e7322de4eb5154c0c3.js"></script><script type="text/javascript" src="/app/vendor.937e1f6ae55c57a9907f.js"></script><script type="text/javascript" src="/app/app.397e726c031cc6118821.js"></script></body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>GoShimmer Dashboard</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/> </head> <body> <div id="root"></div> <script type="text/javascript" src="/app/a1e7322de4eb5154c0c3.js"></script><script type="text/javascript" src="/app/vendor.937e1f6ae55c57a9907f.js"></script><script type="text/javascript" src="/app/app.35773beb2c62d73fa72f.js"></script></body> </html>
164 changes: 99 additions & 65 deletions plugins/dashboard/frontend/src/app/stores/VisualizerStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { action, observable, ObservableMap } from 'mobx';
import { registerHandler, WSMsgType } from "app/misc/WS";
import { RouterStore } from "mobx-react-router";
import { default as Viva } from 'vivagraphjs';
import {Block} from './ExplorerStore';

export class Vertex {
id: string;
Expand All @@ -20,6 +21,19 @@ class history {
vertices: Array<Vertex>;
}

const COLOR = {
BlockPending: "#b9b7bd",
BlockConfirmed: "#6c71c4",
TransactionPending: "#393e46",
TransactionConfirmed: "#fad02c",
Tip: "#cb4b16",
Unknown: "#b58900",
Line: "#586e75",
SelectedPastConeLine: "#e105f5",
SelectedFutureConeLine: "#51e05d",
Selected: "#859900"
}

const vertexSize = 20;

export class VisualizerStore {
Expand Down Expand Up @@ -47,13 +61,9 @@ export class VisualizerStore {

constructor(routerStore: RouterStore) {
this.routerStore = routerStore;
this.setup();
}

setup = async() => {
await this.fetchHistory();
registerHandler(WSMsgType.Vertex, this.addVertex);
registerHandler(WSMsgType.TipInfo, this.addTipInfo);
this.fetchHistory();
}

fetchHistory = async () => {
Expand Down Expand Up @@ -111,44 +121,45 @@ export class VisualizerStore {
let existing = this.vertices.get(vert.id);
if (existing) {
if (!existing.is_finalized && vert.is_finalized) {
existing.is_finalized = true;
this.finalized_count++;
}
// update parent1 and parent2 ids since we might be dealing
// with a vertex obj only created from a tip info
existing.parentIDsByType = vert.parentIDsByType;
vert = existing;
} else {
console.log(vert)
if (vert.is_finalized) {
this.finalized_count++;
// this.addTipInfo({id:vert.id, is_tip: false});
}
this.verticesIncomingOrder.push(vert.id);
this.checkLimit();
}
this.vertices.set(vert.id, vert);

if (this.draw) {
this.drawVertex(vert);
}
};

@action
addTipInfo = (tipInfo: TipInfo) => {
let vert = this.vertices.get(tipInfo.id);
if (!vert) {
// create a new empty one for now
console.log("node not exists, first seen as tip")
vert = new Vertex();
vert.id = tipInfo.id;
this.verticesIncomingOrder.push(vert.id);
this.checkLimit();
addTipInfo = async (tipInfo: TipInfo) => {
let v = this.vertices.get(tipInfo.id);
if (!v) {
v = new Vertex();
v.id = tipInfo.id;

// first seen as tip, get parents info
let res = await fetch(`/api/block/${tipInfo.id}`);
if (res.status === 200) {
let blk: Block = await res.json();
v.parentIDsByType = blk.parentsByType;
v.is_finalized = blk.acceptance;
}
this.verticesIncomingOrder.push(v.id);
}
this.tips_count += tipInfo.is_tip ? 1 : vert.is_tip ? -1 : 0;
vert.is_tip = tipInfo.is_tip;
this.vertices.set(vert.id, vert);

this.tips_count += tipInfo.is_tip ? 1 : v.is_tip ? -1 : 0;
v.is_tip = tipInfo.is_tip;
this.vertices.set(tipInfo.id, v);

if (this.draw) {
this.drawVertex(vert);
this.drawVertex(v);
}
};

Expand Down Expand Up @@ -178,58 +189,55 @@ export class VisualizerStore {
}

drawVertex = (vert: Vertex) => {
if (vert) {
let node;
let existing = this.graph.getNode(vert.id);
if (existing) {
// update coloring
let nodeUI = this.graphics.getNodeUI(vert.id);
nodeUI.color = parseColor(this.colorForVertexState(vert));
node = existing
} else {
node = this.graph.addNode(vert.id, vert);
}
let node = this.graph.getNode(vert.id);
if (node) {
// update coloring
let nodeUI = this.graphics.getNodeUI(vert.id);
nodeUI.color = parseColor(this.colorForVertexState(vert));
} else {
node = this.graph.addNode(vert.id, vert);
}

if (vert.parentIDsByType) {
Object.keys(vert.parentIDsByType).map((parentType) => {
vert.parentIDsByType[parentType].forEach((value) => {
// if value is valid AND (links is empty OR there is no between parent and children)
if (value && ((!node.links || !node.links.some(link => link.fromId === value)))) {
// draw the link only when the parent exists
let existing = this.graph.getNode(value);
if (existing) {
this.graph.addLink(value, vert.id);
}
if (vert.parentIDsByType) {
Object.keys(vert.parentIDsByType).map((parentType) => {
vert.parentIDsByType[parentType].forEach((value) => {
// if value is valid AND (links is empty OR there is no between parent and children)
if (value && ((!node.links || !node.links.some(link => link.fromId === value)))) {
// draw the link only when the parent exists
let parent = this.graph.getNode(value);
if (parent) {
this.graph.addLink(value, vert.id);
} else {
console.log("link not added, parent doesn't exist", value);
}
})
}
})
}
})
}
}

colorForVertexState = (vert: Vertex) => {
if (!vert) {
console.log("vert is not exists, can't decide color!")
return "#b58900";
return COLOR.Unknown;
}

// finalized
if (vert.is_finalized) {
if (vert.is_tx) {
return "#fad02c";
return COLOR.TransactionConfirmed;
}
return "#6c71c4"
return COLOR.BlockConfirmed;
}

if (vert.is_tip) {
return "#cb4b16";
return COLOR.Tip;
}

// pending
if (vert.is_tx) {
return "#393e46"
return COLOR.TransactionPending
}
return "#b9b7bd";
return COLOR.BlockPending;
}

start = () => {
Expand All @@ -254,7 +262,7 @@ export class VisualizerStore {
}
return Viva.Graph.View.webglSquare(vertexSize, this.colorForVertexState(node.data));
})
graphics.link(() => Viva.Graph.View.webglLine("#586e75"));
graphics.link(() => Viva.Graph.View.webglLine(COLOR.Line));
let ele = document.getElementById('visualizer');
this.renderer = Viva.Graph.View.renderer(this.graph, {
container: ele, graphics, layout,
Expand All @@ -277,8 +285,12 @@ export class VisualizerStore {
this.graphics = graphics;
this.renderer.run();

this.vertices.forEach((vertex) => {
this.drawVertex(vertex)
// draw vertices by order
this.verticesIncomingOrder.forEach((id) => {
let v = this.vertices.get(id);
if (v) {
this.drawVertex(v);
}
})
}

Expand All @@ -293,21 +305,41 @@ export class VisualizerStore {
@action
updateSelected = (vert: Vertex, viaClick?: boolean) => {
if (!vert) return;
console.log("selected:",vert)

this.selected = vert;
this.selected_via_click = !!viaClick;

// mutate links
let nodeUI = this.graphics.getNodeUI(vert.id);
this.selected_origin_color = nodeUI.color
nodeUI.color = parseColor("#859900");
nodeUI.color = parseColor(COLOR.Selected);
nodeUI.size = vertexSize * 1.5;

let node = this.graph.getNode(vert.id);
const seenForward = [];
const seenBackwards = [];
dfsIterator(this.graph, node, node => {
}, true,
link => {
const linkUI = this.graphics.getLinkUI(link.id);
linkUI.color = parseColor(COLOR.SelectedFutureConeLine);
},
seenBackwards
);
dfsIterator(this.graph, node, node => {
}, false,
link => {
const linkUI = this.graphics.getLinkUI(link.id);
linkUI.color = parseColor(COLOR.SelectedPastConeLine);
},
seenForward
);
}

resetLinks = () => {
this.graph.forEachLink(function (link) {
const linkUI = this.graphics.getLinkUI(link.id);
linkUI.color = parseColor("#586e75");
linkUI.color = parseColor(COLOR.Line);
});
}

Expand Down Expand Up @@ -335,15 +367,15 @@ export class VisualizerStore {
}, true,
link => {
const linkUI = this.graphics.getLinkUI(link.id);
linkUI.color = parseColor("#586e75");
linkUI.color = parseColor(COLOR.Line);
},
seenBackwards
);
dfsIterator(this.graph, node, node => {
}, false,
link => {
const linkUI = this.graphics.getLinkUI(link.id);
linkUI.color = parseColor("#586e75");
linkUI.color = parseColor(COLOR.Line);
},
seenForward
);
Expand Down Expand Up @@ -371,14 +403,16 @@ function dfsIterator(graph, node, cb, up, cbLinks: any = false, seenNodes = [])
}

for (const link of node.links) {
if (cbLinks) cbLinks(link);

// parents
if (!up && link.toId === node.id && !seenNodes.includes(graph.getNode(link.fromId))) {
if (cbLinks) cbLinks(link);
seenNodes.push(graph.getNode(link.fromId));
continue;
}

// children
if (up && link.fromId === node.id && !seenNodes.includes(graph.getNode(link.toId))) {
if (cbLinks) cbLinks(link);
seenNodes.push(graph.getNode(link.toId));
}
}
Expand Down

0 comments on commit 2934db7

Please sign in to comment.