Skip to content
Snippets Groups Projects
Commit 62b321a2 authored by Alex Complojer's avatar Alex Complojer
Browse files

manual graph layout & optimizations

new arango endpoint
parent 044d6042
No related branches found
No related tags found
1 merge request!2Draft: Preview Version / POC: A4F Graph Analyizer
Pipeline #13097 failed
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
border: 1px solid black; border: 1px solid black;
padding: 20px; padding: 10px;
font-weight: bold; font-weight: bold;
" "
> >
...@@ -64,6 +64,7 @@ ...@@ -64,6 +64,7 @@
fab fab
class="mt-2 push-right" class="mt-2 push-right"
small small
v-if="false"
@click=" @click="
overlay = true overlay = true
resetGraph() resetGraph()
...@@ -83,13 +84,9 @@ ...@@ -83,13 +84,9 @@
<v-card <v-card
color="transparent" color="transparent"
style="position: absolute; top: 80px; left: 20px; z-index: 1000" style="position: absolute; top: 80px; left: 20px; z-index: 1000"
v-if="selectedNode.vertex" v-if="selectedNode.vertex && false"
> >
<vue-json-pretty <vue-json-pretty :data="selectedNode" style="width: 500px"></vue-json-pretty>
:data="selectedNode"
style="width: 500px"
v-if="false"
></vue-json-pretty>
</v-card> </v-card>
</div> </div>
</v-col> </v-col>
...@@ -120,7 +117,7 @@ export default { ...@@ -120,7 +117,7 @@ export default {
return { return {
// TODO: serverside proxy to hide non-test credentials // TODO: serverside proxy to hide non-test credentials
arango: { arango: {
url: "http://100.76.120.39:8529", url: "https://graph-db.software.bz.it/",
user: "dashboard", user: "dashboard",
pass: "dashboard", pass: "dashboard",
draggedNode: null, draggedNode: null,
...@@ -148,6 +145,7 @@ export default { ...@@ -148,6 +145,7 @@ export default {
filter: null, filter: null,
current: null, current: null,
overlay: true, overlay: true,
currentBinNode: {},
token: "", token: "",
graph: { graph: {
sigma: false, sigma: false,
...@@ -226,6 +224,8 @@ export default { ...@@ -226,6 +224,8 @@ export default {
this.detail_vertexes = {} this.detail_vertexes = {}
}, },
changePackageView: async function() { changePackageView: async function() {
this.resetHoverNode()
this.overlay = true this.overlay = true
this.vertexes["local_srcfile"] = [] this.vertexes["local_srcfile"] = []
this.vertexes["upstr_srcfile"] = [] this.vertexes["upstr_srcfile"] = []
...@@ -462,13 +462,19 @@ export default { ...@@ -462,13 +462,19 @@ export default {
fa2Layout.start() fa2Layout.start()
*/ */
let sourcepackage_clusters = {}
let sourcepackage_index = 0
let sourcefile_grid_index = 0
const selection_atts = this.currentBinNode
sourcefile_grid_index = selection_atts.x || 0
this.graph[containerId].forEachNode(node => { this.graph[containerId].forEachNode(node => {
const degree = this.graph[containerId].degree(node)
const atts = this.graph[containerId].getNodeAttributes(node) const atts = this.graph[containerId].getNodeAttributes(node)
let size = 5 let size = 5
if (atts["label"] && atts["label"].indexOf(".patch") != -1) { if (atts["label"] && atts["label"].indexOf(".patch") != -1) {
size = size + 2
this.graph[containerId].setNodeAttribute(node, "patch", true) this.graph[containerId].setNodeAttribute(node, "patch", true)
} }
...@@ -480,17 +486,28 @@ export default { ...@@ -480,17 +486,28 @@ export default {
// trivial clustering // trivial clustering
if (containerId == "sigma") { if (containerId == "sigma") {
// move own upstream sources to the left, and others to the right
if ( if (
atts.vertex.upstr_srcpkg && atts.vertex.upstr_srcpkg &&
atts.vertex.upstr_srcpkg.indexOf("git://git.openembedded.org/") != -1 atts.vertex.upstr_srcpkg.indexOf("git://git.openembedded.org/") != -1
) { ) {
this.graph[containerId].setNodeAttribute(node, "x", atts.x - 500) this.graph[containerId].setNodeAttribute(node, "y", atts.y - 0)
} else if (atts.vertex.upstr_srcpkg) {
this.graph[containerId].setNodeAttribute(node, "x", atts.x + 500)
} }
// move all upstream sources a level higher
if (atts.collection == "upstr_srcfile") { if (atts.collection == "upstr_srcfile") {
this.graph[containerId].setNodeAttribute(node, "y", atts.y + 1000) this.graph[containerId].setNodeAttribute(node, "y", atts.y + 1000)
if (typeof sourcepackage_clusters[atts.vertex.upstr_srcpkg] == "undefined") {
sourcepackage_clusters[atts.vertex.upstr_srcpkg] = atts.y + sourcepackage_index * 500
sourcepackage_index++
}
this.graph[containerId].setNodeAttribute(
node,
"y",
sourcepackage_clusters[atts.vertex.upstr_srcpkg]
)
} }
if (atts.collection == "elf") { if (atts.collection == "elf") {
...@@ -500,18 +517,47 @@ export default { ...@@ -500,18 +517,47 @@ export default {
if (atts.collection == "local_srcfile") { if (atts.collection == "local_srcfile") {
this.graph[containerId].setNodeAttribute(node, "y", atts.y + 500) this.graph[containerId].setNodeAttribute(node, "y", atts.y + 500)
} }
if (atts.vertex.upstr_srcpkg) {
const license = atts.vertex.license == "" ? "MISSING LICENSE" : atts.vertex.license
this.graph[containerId].setNodeAttribute(
node,
"label",
"[" + license + "] " + atts.label.split(":")[2]
)
}
} }
}) })
if (containerId == "sigma") {
let hindex = 0
let sourcepackage_clusters = {}
this.graph[containerId].forEachNode(node => {
const atts = this.graph[containerId].getNodeAttributes(node)
if (atts.collection == "upstr_srcfile") {
if (typeof sourcepackage_clusters[atts.vertex.upstr_srcpkg] == "undefined") {
sourcepackage_clusters[atts.vertex.upstr_srcpkg] = sourcefile_grid_index
} else {
sourcepackage_clusters[atts.vertex.upstr_srcpkg] += 30
}
// we assume 1:1
const neighbors = this.graph[containerId].neighbors(node)
neighbors.forEach(val => {
const vatts = this.graph[containerId].getNodeAttributes(val)
this.graph[containerId].setNodeAttribute(
val,
"x",
sourcepackage_clusters[atts.vertex.upstr_srcpkg]
)
this.graph[containerId].setNodeAttribute(val, "y", atts.y - 250)
// this.graph[containerId].setNodeAttribute(node, "y", atts.y + 500)
this.graph[containerId].setNodeAttribute(
node,
"x",
sourcepackage_clusters[atts.vertex.upstr_srcpkg]
)
// this.graph[containerId].setNodeAttribute(node, "y", vatts.y - hindex)
hindex += 2
})
}
})
}
const container = document.getElementById(containerId) const container = document.getElementById(containerId)
// only update graph if renderer exists // only update graph if renderer exists
...@@ -525,6 +571,36 @@ export default { ...@@ -525,6 +571,36 @@ export default {
// else create renderers // else create renderers
let renderer = new Sigma(this.graph[containerId], container, { let renderer = new Sigma(this.graph[containerId], container, {
labelColor: { color: "#888" }, labelColor: { color: "#888" },
labelRenderer: function(context, data, settings) {
if (!data.label) return
var size = settings.labelSize,
font = settings.labelFont,
weight = settings.labelWeight,
color = settings.labelColor.attribute
? data[settings.labelColor.attribute] || settings.labelColor.color || "#000"
: settings.labelColor.color
context.fillStyle = color
context.font = ""
.concat(weight, " ")
.concat(size, "px ")
.concat(font)
if (data.vertex && data.vertex.license && data.vertex.license != "") {
context.fillText(data.vertex.license, data.x + data.size + 3, data.y + size / 3 - 20)
}
var splitted = data.label.split(":")
if (data.vertex && data.vertex.upstr_srcpkg && data.vertex.upstr_srcpkg != "") {
context.fillText(
data.vertex.upstr_srcpkg,
data.x + data.size + 3,
data.y + size / 3 + 20
)
}
context.fillText(splitted[splitted.length - 1], data.x + data.size + 3, data.y + size / 3)
},
renderEdgeLabels: true, renderEdgeLabels: true,
allowInvalidContainer: true, allowInvalidContainer: true,
defaultEdgeType: "arrow" defaultEdgeType: "arrow"
...@@ -543,6 +619,8 @@ export default { ...@@ -543,6 +619,8 @@ export default {
} }
if (res.nodeType == "startnode" && res.vertex.path != this.startVertex) { if (res.nodeType == "startnode" && res.vertex.path != this.startVertex) {
res.hidden = true res.hidden = true
} else if (res.nodeType == "startnode") {
this.currentBinNode = JSON.parse(JSON.stringify(res))
} }
if ( if (
...@@ -616,7 +694,7 @@ export default { ...@@ -616,7 +694,7 @@ export default {
this.done = [] this.done = []
this.graphstate.hoveredNeighbors = new Set(this.getRelevantNeighbors(node)) this.graphstate.hoveredNeighbors = new Set(this.getRelevantNeighbors(node))
this.selectedNode = atts this.selectedNode = atts
if (atts.collection == "local_srcfile") { if (atts.collection == "local_srcfile" || atts.collection == "local_binfile") {
if (typeof this.selections["local_srcfile"] == "undefined") if (typeof this.selections["local_srcfile"] == "undefined")
this.selections["local_srcfile"] = {} this.selections["local_srcfile"] = {}
this.selections["local_srcfile"].current = [atts.label] this.selections["local_srcfile"].current = [atts.label]
...@@ -635,7 +713,7 @@ export default { ...@@ -635,7 +713,7 @@ export default {
this.graphstate.hoveredNode = undefined this.graphstate.hoveredNode = undefined
this.graphstate.hoveredNeighbors = undefined this.graphstate.hoveredNeighbors = undefined
this.graphstate.suggestions = undefined this.graphstate.suggestions = undefined
this.renderer["sigma"].refresh() if (this.renderer["sigma"]) this.renderer["sigma"].refresh()
}, },
refreshGraph(containerId = "sigma", styles = "height: 800px; width: 100%") { refreshGraph(containerId = "sigma", styles = "height: 800px; width: 100%") {
var g = document.querySelector("#" + containerId) var g = document.querySelector("#" + containerId)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment