175175 </b-tooltip >
176176 </div >
177177 <div >
178- <b-tooltip label =" menu for selecting networks" type =" is-light" multilined >
179- <b-dropdown v-model =" showEdgetType" class =" is-right" aria-role =" list" >
180- <button class =" button is-light" slot =" trigger" >
181- <b-icon icon =" bars" ></b-icon >
182- </button >
183- <!-- need to fix the below -->
184- <b-dropdown-item v-for =" ( n, index ) in networks" :key =" index" :value =" n" @click =" setEdge(n)" >
185- <font color =" #202020" >{{ n }}</font >
186- </b-dropdown-item >
187- </b-dropdown >
188- </b-tooltip >
178+ <b-dropdown v-model =" showEdgeType" aria-role =" list" :triggers =" ['hover']" >
179+ <b-button label =" Link Type" type =" is-light" slot =" trigger" />
180+ <b-dropdown-item v-for =" ( n, index ) in networks" :key =" index" :value =" n" aria-role =" listitem" >
181+ <font color =" #202020" >{{ n }}</font >
182+ </b-dropdown-item >
183+ </b-dropdown >
189184 </div >
190185 <div class =" column" />
191186 </div >
@@ -552,9 +547,7 @@ export default {
552547 return ;
553548 }
554549
555- const nodes = this .nodes .map ( d => Object .create ( d ) );
556- // const links = this.edges.map( d => Object.create( d ) );
557-
550+ const nodes = this .nodes ;
558551 const links = this .edges .filter ( (d ) => {
559552 switch ( this .showEdgeType ) {
560553 case ' all' : {
@@ -571,7 +564,7 @@ export default {
571564 }
572565 }, this );
573566
574- const width = 600 ;
567+ const width = 600 ;
575568 const height = 400 ;
576569
577570 const simulation = d3 .forceSimulation ( nodes )
@@ -936,6 +929,10 @@ export default {
936929 this .generateGraph ();
937930 this .generateChord ();
938931 }
932+ },
933+
934+ showEdgeType : function () {
935+ this .generateGraph ();
939936 }
940937 },
941938
@@ -981,4 +978,8 @@ export default {
981978 .modal-card-title {
982979 color : whitesmoke ;
983980 }
981+
982+ .dropdown-item.is-active {
983+ background-color : whitesmoke ;
984+ }
984985 </style >
0 commit comments