Skip to content

update vis-network #2969

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

Merged
merged 8 commits into from
Jan 22, 2020
Merged

update vis-network #2969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f7555bc
update vis-network
antgonza Jan 12, 2020
092d4c9
improve sizes
antgonza Jan 13, 2020
4fe73b4
add cython to conda create -q --yes -n qiita
antgonza Jan 13, 2020
0ab07f4
fix job creation in JS
antgonza Jan 15, 2020
5300dab
fix #2554
antgonza Jan 16, 2020
681b5f5
improving position
antgonza Jan 16, 2020
ffd957f
focus on new job [skip ci]
antgonza Jan 16, 2020
0cde4a4
addressing @ElDeveloper comments
antgonza Jan 22, 2020
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
2 changes: 1 addition & 1 deletion .travis.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ before_install:
install:
# install a few of the dependencies that pip would otherwise try to install
# when intalling scikit-bio
- travis_retry conda create -q --yes -n qiita python=3.6 pip libgfortran numpy nginx
- travis_retry conda create -q --yes -n qiita python=3.6 pip libgfortran numpy nginx cython
- source activate qiita
- pip install -U pip
- 'echo "backend: Agg" > ~/matplotlibrc'
Expand Down
47 changes: 28 additions & 19 deletions qiita_pet/static/js/networkVue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -713,22 +713,12 @@ Vue.component('processing-graph', {
**/
addJobNodeToGraph: function(job_info) {
let vm = this;
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks like this line is no longer used.

Copy link
Member Author

Choose a reason for hiding this comment

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

We do as we need to add vm.new_job_info below.

// Fun fact - although it seems counterintuitive, in vis.Network we
// first need to add the edge and then we can add the node. It doesn't
// make sense, but it is how it works
$(job_info.inputs).each(function(){
vm.edges_ds.add({id: vm.edges_ds.length + 1, from: this, to: job_info.id});
});
var node_info = vm.colorScheme.in_construction;
vm.nodes_ds.add({id: job_info.id, shape: node_info['shape'], group: "job", shape: 'dot', label: formatNodeLabel(job_info.label), color: node_info, status: 'in_construction'});
$(job_info.outputs).each(function(){
var out_name = this[0];
var out_type = this[1];
var n_id = job_info.id + ":" + out_name;
vm.edges_ds.add({id: vm.edges_ds.length + 1, from: job_info.id, to: n_id });
vm.nodes_ds.add({id: n_id, shape: 'dot', label: formatNodeLabel(out_name + "\n(" + out_type + ")"), group: "type", name: out_name, type: out_type});
});
vm.network.redraw();

vm.new_job_info = {
job_id: job_info.id,
scale: vm.network.getScale()
}
vm.updateGraph();
},

/**
Expand All @@ -753,10 +743,11 @@ Vue.component('processing-graph', {
edges: vm.edges_ds
};
var options = {
autoResize: true,
clickToUse: true,
nodes: {
font: {
size: 16,
size: 15,
color: '#000000'
},
size: 13,
Expand All @@ -766,10 +757,13 @@ Vue.component('processing-graph', {
color: 'grey'
},
layout: {
randomSeed: 1,
improvedLayout: true,
hierarchical: {
direction: "LR",
sortMethod: "directed",
levelSeparation: 260
sortMethod : 'directed',
levelSeparation: 190,
shakeTowards: 'roots'
}
},
interaction: {
Expand All @@ -794,6 +788,15 @@ Vue.component('processing-graph', {
};

vm.network = new vis.Network(container, data, options);
vm.network.on("stabilized", function (params) {
if (vm.new_job_info !== null){
vm.network.focus(vm.new_job_info["job_id"], {
scale: vm.new_job_info["scale"]
});
vm.new_job_info = null;
}
});

vm.network.on("click", function (properties) {
var ids = properties.nodes;
if (ids.length == 0) {
Expand Down Expand Up @@ -974,11 +977,16 @@ Vue.component('processing-graph', {
// data in a way that Vis.Network likes it
// Format edge list data
for(var i = 0; i < data.edges.length; i++) {
// forcing a string
data.edges[i][0] = data.edges[i][0].toString()
data.edges[i][1] = data.edges[i][1].toString()
vm.edges.push({from: data.edges[i][0], to: data.edges[i][1], arrows:'to'});
}
// Format node list data
for(var i = 0; i < data.nodes.length; i++) {
var node_info = vm.colorScheme[data.nodes[i][4]];
// forcing a string
data.nodes[i][2] = data.nodes[i][2].toString()
vm.nodes.push({id: data.nodes[i][2], shape: node_info['shape'], label: formatNodeLabel(data.nodes[i][3]), type: data.nodes[i][1], group: data.nodes[i][0], color: node_info, status: data.nodes[i][4]});
if (data.nodes[i][1] === 'job') {
job_status = data.nodes[i][4];
Expand Down Expand Up @@ -1084,6 +1092,7 @@ Vue.component('processing-graph', {
**/
mounted() {
let vm = this;
vm.new_job_info = null;
// This initialPoll is used ONLY if the graph doesn't exist yet
vm.initialPoll = false;
// This variable is used to show the update countdown on the interface
Expand Down
1 change: 1 addition & 0 deletions qiita_pet/static/vendor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ Qiita relies on the following JavaScript libraries:
- [tag-it.js](http://aehlke.github.io/tag-it/).
- [underscore.js](http://underscorejs.org/).
- [vis.js](http://visjs.org/).
- [vis-network.js](https://unpkg.com/browse/vis-network@6.5.2)
- [vue.js](https://vuejs.org).
- [ol.js](https://openlayers.org/).
- [platform.js](https://github.com/bestiejs/platform.js).
44 changes: 43 additions & 1 deletion qiita_pet/static/vendor/css/vis-network.min.css
100755 → 100644
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 27 additions & 0 deletions qiita_pet/static/vendor/js/vis-network.min.js
View file
Open in desktop

Large diffs are not rendered by default.

44 changes: 0 additions & 44 deletions qiita_pet/static/vendor/js/vis.min.js
View file
Open in desktop

This file was deleted.

5 changes: 2 additions & 3 deletions qiita_pet/templates/sitebase.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>{{portal_styling.title}}</title>
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/vis-network.min.css" type="text/css">
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/jquery-ui.structure.min.css" type="text/css">
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/jquery-ui.theme.min.css" type="text/css">
Expand All @@ -29,8 +30,6 @@
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/chosen.css" type="text/css">
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/jquery.dataTables.min.css" type="text/css">
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/css/style.css" type="text/css">
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/vis.min.css" type="text/css">
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/vis-network.min.css" type="text/css">
{% if portal_styling.custom_css %}
<style type="text/css">
{% raw portal_styling.custom_css %}
Expand All @@ -45,7 +44,7 @@
<script src="{% raw qiita_config.portal_dir %}/static/vendor/js/jquery.dataTables.plugin.natural.js" type="text/javascript"></script>
<script src="{% raw qiita_config.portal_dir %}/static/vendor/js/vue.min.js"></script>
<script src="{% raw qiita_config.portal_dir %}/static/js/qiita.js"></script>
<script src="{% raw qiita_config.portal_dir %}/static/vendor/js/vis.min.js"></script>
<script src="{% raw qiita_config.portal_dir %}/static/vendor/js/vis-network.min.js"></script>
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/platform.js"></script>
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/js/networkVue.js"></script>
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/js/sampleTemplateVue.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion qiita_pet/templates/study_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{% set study_title_msg = study_title.replace('"', '\\"') %}
<link rel="stylesheet" src="{% raw qiita_config.portal_dir %}/static/vendor/css/vis.min.css" type="text/css">
<link rel="stylesheet" src="{% raw qiita_config.portal_dir %}/static/vendor/css/vis-network.min.css" type="text/css">
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/vis.min.js"></script>
<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/vis-network.min.js"></script>
<script type="text/javascript">
function validate_delete_study_text() {
if ($("#study-alias").val() == "{% raw study_title_msg %}") {
Expand Down