Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

2nd PR on Interactive Graph 0.0.3 #348

Merged
merged 6 commits into from
Mar 29, 2018
Merged

2nd PR on Interactive Graph 0.0.3 #348

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7bfe6ad
d3-dagre working with hacks (require in lib). TODO: render current graph
daming-lu Mar 28, 2018
b5ed70f
distinguish diff nodes
daming-lu Mar 29, 2018
62a03df
rm old code
daming-lu Mar 29, 2018
db16d0d
Merge branch 'develop' into add_more_info_to_node
daming-lu Mar 29, 2018
17eda0d
fix comments
daming-lu Mar 29, 2018
784d98d
Merge branch 'add_more_info_to_node' of github.com:daming-lu/VisualDL…
daming-lu Mar 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,17 @@
"csshint": "^0.3.3",
"cytoscape": "^3.2.11",
"cytoscape-dagre": "^2.2.0",
"d3": "^4.7.4",
"d3-format": "^1.2.1",
"dagre": "^0.8.2",
"dagre": "^0.7.4",
"dagre-d3": "^0.6.1",
"dagre-d3v4": "^0.5.0",
"echarts": "^3.8.5",
"file-saver": "^1.3.3",
"graphlib": "^1.0.5",
"htmlcs": "^0.4.1",
"lesslint": "^1.0.2",
"lodash": "^4.17.4",
"lodash": "^3.10.0 ",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there is reason for downgrading the version?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just tested and the higher version also works. I will work on how to get rid of dagre-d3 and use a combination of dagre and d3. The library dagre-d3 is not well-maintained. Think about the 'require' bug 😢

"normalize.css": "^6.0.0",
"qs": "^6.5.1",
"vue": "^2.5.2",
Expand Down Expand Up @@ -67,15 +71,15 @@
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.5.8",
"webpack": "^2.4.1",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^2.7.0",
"webpack-dev-middleware": "^1.12.1",
"webpack-dev-server": "^2.4.2",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0",
"yargs": "^8.0.2",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2"
"yargs": "^8.0.2"
}
}
4 changes: 2 additions & 2 deletions frontend/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,13 @@ export default {
overflow scroll
border solid 1px $-left-border-color
background $-left-border-color
min-height 300px
min-height 1300px
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason to increase the min-height so much?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed it back. As I showed you, I will add scrolling functionality for the long graph.

padding 2% 0% 2% 2%
box-sizing border-box
.right
overflow scroll
width 300px
min-height 300px
min-height 1300px
position absolute
right 0
top 0
Expand Down
7 changes: 4 additions & 3 deletions frontend/src/graph/Graph.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<div class="visual-dl-page-container">
<div class="visual-dl-page-left">
<ui-chart
:fitScreen="fitScreen"
:download="download"
:scale="config.scale"
:fitScreen="fitScreen"
:download="download"
:scale="config.scale"
></ui-chart>
</div>
<div class="visual-dl-page-right">
Expand All @@ -24,6 +24,7 @@ import autoAdjustHeight from '../common/util/autoAdjustHeight';
import Config from './ui/Config'
import Chart from './ui/Chart';


export default {
components: {
'ui-config': Config,
Expand Down
194 changes: 84 additions & 110 deletions frontend/src/graph/ui/Chart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<template>
<div class="visual-dl-graph-charts">
<div id="container" class="cy draggable" ref="draggable"></div>
<svg class="visual-dl-page-left">
<g/>
</svg>
</div>
</template>
<script>
Expand All @@ -16,8 +18,16 @@

// https://github.com/taye/interact.js
import interact from 'interactjs';
import cytoscape from 'cytoscape';
import dagre from 'cytoscape-dagre';

// for cytoscape
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we will remove the cytoscape from the package.json, we can also remove this part.

//import cytoscape from 'cytoscape';
//import dagre from 'cytoscape-dagre';

// for d3 drawing
import * as d3 from "d3";
import * as dagre from "dagre";
import * as dagreD3 from 'dagre-d3';


export default {
props: ['fitScreen', 'download', 'scale'],
Expand All @@ -30,8 +40,6 @@
data() {
return {
myCY: null,
width: 800,
height: 600,
graphUrl: '',
};
},
Expand All @@ -50,121 +58,73 @@
}
},
mounted() {
var that = this;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for getting rid of this.

this.getOriginChartsData();
cytoscape.use( dagre );
getPluginGraphsGraph().then(({errno, data}) => {

getPluginGraphsGraph().then(({errno, data}) => {
var raw_data = data.data;
var data = raw_data;

var graph_data = {
nodes: [],
edges: []
};

var node_names = [];
for (var i = 0; i < data.input.length; ++i) {
graph_data.nodes.push({
data: {id: data.input[i].name, node_data: data.input[i].name}
});
node_names.push(data.input[i].name);
}

for (var i = 0; i < data.edges.length; ++i) {
var source = data.edges[i].source;
var target = data.edges[i].target;
// d3 svg drawing
var g = new dagreD3.graphlib.Graph()
.setGraph({})
.setDefaultEdgeLabel(function() { return {}; });
var render = new dagreD3.render();
var nodeKeys = [];

if (node_names.includes(source) === false) {
graph_data.nodes.push({
data: {id: source, node_data:source}
});
node_names.push(source);
}
var buildInputNodeLabel = function(inputNode) {
var nodeLabel = inputNode['data_type'] + ': ' + inputNode['shape'].join('x');
return nodeLabel + ' '.repeat(Math.floor(nodeLabel.length/5));
};

if (node_names.includes(target) === false) {
var node_data = target;
if (target.includes('node_')) {
// it is an operator node
var node_id = target.substring(5);
node_data = data.node[node_id].opType;
// add input nodes
for (var i=0; i<data['input'].length; ++i) {
var curInputNode = data['input'][i];
var nodeKey = curInputNode['name'];
g.setNode(
nodeKey,
{
label: buildInputNodeLabel(curInputNode),
class: "input"
}
graph_data.nodes.push({
data: {id: target, node_data:node_data}
});
node_names.push(target);
}

graph_data.edges.push({
data: {source: source, target: target}
});
);
nodeKeys.push(nodeKey);
}

// >> cy
var cy = cytoscape({
container: document.getElementById('container'),
// add operator nodes then add edges from inputs to operator and from operator to output
for (var i=0; i<data['node'].length; ++i) {
var curOperatorNode = data['node'][i];
var nodeKey = 'opNode_' + i;

boxSelectionEnabled: false,
autounselectify: true,

layout: {
name: 'dagre'
},

style: [
{
selector: 'node',
style: {
'width': 40,
'height': 40,
'content': 'data(node_data)',
'text-opacity': 0.5,
'text-valign': 'center',
'text-halign': 'right',
'background-color': '#11479e'
}
},
// add operator node
var curOpLabel = curOperatorNode['opType'];
g.setNode(
nodeKey,
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'width': 6,
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea'
}
label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)),
class: "operator"
}
],
elements: graph_data,
});
);
nodeKeys.push(nodeKey);

this.myCY = cy;

cy.nodes().forEach(function(node){
if (node.id().includes('node_')) {
node.style('width', '80px');
node.style('height', '36px');
node.style('shape', 'roundrectangle');
node.style('background-color', '#158c96');
node.style('text-valign', 'center');
node.style('text-halign', 'center');
// add output node
var outputNodeKey = curOperatorNode['output'][0];
g.setNode(
outputNodeKey,
{
label: outputNodeKey + ' '.repeat(Math.floor(outputNodeKey.length/5)),
class: "output"
}
);
nodeKeys.push(outputNodeKey);

// add edges from inputs to node and from node to output
for (var e=0; e<curOperatorNode['input'].length; ++e) {
g.setEdge(curOperatorNode['input'][e], nodeKey);
}
g.setEdge(nodeKey, curOperatorNode['output'][0]);
}

let collapsed = true;
node.on('tap', function(evt){
if (node.id().includes('node_')) {
collapsed = !collapsed;
if (!collapsed) {
node.style('width', '120px');
node.style('height', '54px');
} else {
node.style('width', '80px');
node.style('height', '36px');
}
}
});
});
render(d3.select("svg g"), g);
});
},

Expand Down Expand Up @@ -259,13 +219,27 @@
};
</script>
<style lang="stylus">
.cy
height: 100%
width: 70%
position: absolute
top: 0px
left: 0px

.node rect
.node circle
.node ellipse
.node polygon
stroke: #333
fill: #fff
stroke-width: 1.5px

.edgePath path.path
stroke: #333
fill: none
stroke-width: 1.5px

.operator
fill: red

.output
fill: green

.input
fill: purple

.visual-dl-graph-charts
width inherit
Expand Down