192
192
</div >
193
193
</div >
194
194
<div >
195
- <b-tooltip label =" menu for selecting networks" type =" is-light" multilined >
196
- <b-dropdown v-model =" showEdgetType" class =" is-right" aria-role =" list" >
197
- <button class =" button is-light" slot =" trigger" >
198
- <b-icon icon =" bars" ></b-icon >
199
- </button >
200
- <b-dropdown-item v-for =" ( n, index ) in networks" :key =" index" :value =" n" >
201
- <font color =" #202020" >{{ n }}</font >
202
- </b-dropdown-item >
203
- </b-dropdown >
204
- </b-tooltip >
195
+ <b-dropdown v-model =" showEdgeType" aria-role =" list" :triggers =" ['hover']" >
196
+ <b-button label =" Link Type" type =" is-light" slot =" trigger" />
197
+ <b-dropdown-item v-for =" ( n, index ) in networks" :key =" index" :value =" n" aria-role =" listitem" >
198
+ <font color =" #202020" >{{ n }}</font >
199
+ </b-dropdown-item >
200
+ </b-dropdown >
205
201
</div >
206
202
<div class =" column" />
207
203
</div >
@@ -582,14 +578,17 @@ export default {
582
578
return ' #999' ;
583
579
},
584
580
581
+ setEdge ( type ) {
582
+ this .showEdgeType = type;
583
+ this .resetNetwork ();
584
+ },
585
+
585
586
generateGraph () {
586
587
if ( this .nodes == null ) {
587
588
return ;
588
589
}
589
590
590
- const nodes = this .nodes .map ( d => Object .create ( d ) );
591
- // const links = this.edges.map( d => Object.create( d ) );
592
-
591
+ const nodes = this .nodes ;
593
592
const links = this .edges .filter ( (d ) => {
594
593
switch ( this .showEdgeType ) {
595
594
case ' all' : {
@@ -606,7 +605,7 @@ export default {
606
605
}
607
606
}, this );
608
607
609
- const width = 600 ;
608
+ const width = 600 ;
610
609
const height = 400 ;
611
610
612
611
const simulation = d3 .forceSimulation ( nodes )
@@ -976,6 +975,10 @@ export default {
976
975
this .generateGraph ();
977
976
this .generateChord ();
978
977
}
978
+ },
979
+
980
+ showEdgeType : function () {
981
+ this .generateGraph ();
979
982
}
980
983
},
981
984
@@ -1021,4 +1024,8 @@ export default {
1021
1024
.modal-card-title {
1022
1025
color : whitesmoke ;
1023
1026
}
1027
+
1028
+ .dropdown-item.is-active {
1029
+ background-color : whitesmoke ;
1030
+ }
1024
1031
</style >
0 commit comments