192192 </div >
193193 </div >
194194 <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- <!-- need to fix the below -->
201- <b-dropdown-item v-for =" ( n, index ) in networks" :key =" index" :value =" n" @click =" setEdge(n)" >
202- <font color =" #202020" >{{ n }}</font >
203- </b-dropdown-item >
204- </b-dropdown >
205- </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 >
206201 </div >
207202 <div class =" column" />
208203 </div >
@@ -593,9 +588,7 @@ export default {
593588 return ;
594589 }
595590
596- const nodes = this .nodes .map ( d => Object .create ( d ) );
597- // const links = this.edges.map( d => Object.create( d ) );
598-
591+ const nodes = this .nodes ;
599592 const links = this .edges .filter ( (d ) => {
600593 switch ( this .showEdgeType ) {
601594 case ' all' : {
@@ -612,7 +605,7 @@ export default {
612605 }
613606 }, this );
614607
615- const width = 600 ;
608+ const width = 600 ;
616609 const height = 400 ;
617610
618611 const simulation = d3 .forceSimulation ( nodes )
@@ -982,6 +975,10 @@ export default {
982975 this .generateGraph ();
983976 this .generateChord ();
984977 }
978+ },
979+
980+ showEdgeType : function () {
981+ this .generateGraph ();
985982 }
986983 },
987984
@@ -1027,4 +1024,8 @@ export default {
10271024 .modal-card-title {
10281025 color : whitesmoke ;
10291026 }
1027+
1028+ .dropdown-item.is-active {
1029+ background-color : whitesmoke ;
1030+ }
10301031 </style >
0 commit comments