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- <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 >
205201 </div >
206202 <div class =" column" />
207203 </div >
@@ -582,14 +578,17 @@ export default {
582578 return ' #999' ;
583579 },
584580
581+ setEdge ( type ) {
582+ this .showEdgeType = type;
583+ this .resetNetwork ();
584+ },
585+
585586 generateGraph () {
586587 if ( this .nodes == null ) {
587588 return ;
588589 }
589590
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 ;
593592 const links = this .edges .filter ( (d ) => {
594593 switch ( this .showEdgeType ) {
595594 case ' all' : {
@@ -606,7 +605,7 @@ export default {
606605 }
607606 }, this );
608607
609- const width = 600 ;
608+ const width = 600 ;
610609 const height = 400 ;
611610
612611 const simulation = d3 .forceSimulation ( nodes )
@@ -976,6 +975,10 @@ export default {
976975 this .generateGraph ();
977976 this .generateChord ();
978977 }
978+ },
979+
980+ showEdgeType : function () {
981+ this .generateGraph ();
979982 }
980983 },
981984
@@ -1021,4 +1024,8 @@ export default {
10211024 .modal-card-title {
10221025 color : whitesmoke ;
10231026 }
1027+
1028+ .dropdown-item.is-active {
1029+ background-color : whitesmoke ;
1030+ }
10241031 </style >
0 commit comments