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

Prettifier graph nodes #367

Merged
merged 10 commits into from
Apr 6, 2018
Merged

Prettifier graph nodes #367

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a2aaebb
update IP to new node
daming-lu Apr 2, 2018
d9aec25
Merge remote-tracking branch 'upstream/develop' into develop
daming-lu Apr 2, 2018
c8ff8a4
Merge remote-tracking branch 'upstream/develop' into develop
daming-lu Apr 3, 2018
9996d42
Merge remote-tracking branch 'upstream/develop' into develop
daming-lu Apr 4, 2018
f609af0
Merge remote-tracking branch 'upstream/develop' into develop
daming-lu Apr 5, 2018
7a897fc
Merge remote-tracking branch 'upstream/develop' into develop
daming-lu Apr 5, 2018
a71bc87
styling nodes
daming-lu Apr 6, 2018
df70d96
Merge remote-tracking branch 'upstream/develop' into develop
daming-lu Apr 6, 2018
0f7ffe3
Merge branch 'develop' into prettifier_graph_nodes
daming-lu Apr 6, 2018
2a8c62f
follow eslint
daming-lu Apr 6, 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
62 changes: 45 additions & 17 deletions frontend/src/graph/ui/Chart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,25 @@

// for d3 drawing
import * as d3 from 'd3';
import * as dagre from 'dagre';

export default {
props: ['fitScreen', 'download', 'scale', 'curNode'],
props: {
'fitScreen': {
type: Function,
required: true,
},
'download': {
type: Function,
required: true,
},
'scale': {
type: Number,
default: 1,
},
'curNode': {
type: Object,
default: {},
}},
computed: {
computedWidth() {
let scale = this.scale;
Expand Down Expand Up @@ -55,15 +70,16 @@
this.getOriginChartsData();
let chartScope = this;
getPluginGraphsGraph().then(({errno, data}) => {
let raw_data = data.data;
var data = raw_data;
let graphData = data.data;

// d3 svg drawing
let g = new dagreD3.graphlib.Graph()
.setGraph({})
.setDefaultEdgeLabel(function() {
return {};
});
return {};
});

// eslint-disable-next-line
let render = new dagreD3.render();
let nodeKeys = [];

Expand All @@ -76,23 +92,27 @@
};

// add input nodes
for (var i=0; i<data['input'].length; ++i) {
let curInputNode = data['input'][i];
var nodeKey = curInputNode['name'];
for (let i=0; i<graphData['input'].length; ++i) {
let curInputNode = graphData['input'][i];
let nodeKey = curInputNode['name'];
g.setNode(
nodeKey,
{
label: buildInputNodeLabel(curInputNode),
class: 'input',
style: 'stroke: #A3D39C; stroke-width: 3px; ' +
'stroke-dasharray: 5, 5;',
labelStyle: 'font-size: 0.8em;',

}
);
nodeKeys.push(nodeKey);
}

// add operator nodes then add edges from inputs to operator and from operator to output
for (var i=0; i<data['node'].length; ++i) {
let curOperatorNode = data['node'][i];
var nodeKey = 'opNode_' + i;
for (let i=0; i<graphData['node'].length; ++i) {
let curOperatorNode = graphData['node'][i];
let nodeKey = 'opNode_' + i;

// add operator node
let curOpLabel = curOperatorNode['opType'];
Expand All @@ -101,17 +121,25 @@
{
label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)),
class: 'operator',
style: 'opacity: 0.5;',

}
);
nodeKeys.push(nodeKey);

// add output node
let outputNodeKey = curOperatorNode['output'][0];
let outputPadding = ' '.repeat(Math.floor(outputNodeKey.length/2));
g.setNode(
outputNodeKey,
{
label: outputNodeKey + ' '.repeat(Math.floor(outputNodeKey.length/5)),
label: outputNodeKey + outputPadding,
class: 'output',
style: 'opacity: 0.5;' +
'stroke-width: 2px; ' +
'stroke-dasharray: 5, 5;',
shape: 'diamond',

}
);
nodeKeys.push(outputNodeKey);
Expand All @@ -134,14 +162,14 @@
svg.attr('viewBox', '0 0 ' + g.graph().width + ' ' + g.graph().height);

svg.selectAll('.node').on('click', function(d, i) {
this.curNode = g.node(d);
let nodeType = this.curNode.class;
chartScope.curNode = g.node(d);
let nodeType = chartScope.curNode.class;
let nodeInfo = null;
if (nodeType === 'operator') {
let opIndex = d.slice(7); // remove prefix "opNode_"
nodeInfo = data.node[opIndex];
nodeInfo = graphData.node[opIndex];
} else if (nodeType === 'input') {
nodeInfo = data.input[d-1];
nodeInfo = graphData.input[d-1];
} else {
nodeInfo = 'output';
}
Expand Down