Custom mode bar buttons - active status

plotly.js
1

I’ve added some custom buttons to the mode bar and am looking to make them function like the standard buttons i.e. clicking on them turns them darker ( modebar-btn active class ). So far I can’t seem to get any step closer, even manually changing the class with DOM queries doesn’t seem to work.

I’ve tried to confgure the buttons as much as possible like the standard ones, according to their source code.

modebarButtons: [[
         {
           name: 'pickp',
           title: 'Select P wave',
           icon: {
            'width': 512,
            'height': 512,
            'path': "M175.536-164.135h35.977c22.232,0,36.341,16.225,36.341,37.399 c0,21.163-14.108,37.387-36.341,37.387h-35.977V-164.135z M122.618-70.291c0,16.577,9.876,27.511,27.523,27.511h62.43 c51.871,0,90.317-33.872,90.317-84.309c0-51.507-39.868-83.615-88.201-83.615h-39.151v-57.856 c0-17.647-11.287-27.511-26.465-27.511c-15.167,0-26.453,9.865-26.453,27.511V-70.291L122.618-70.291z",
            'transform': 'matrix(1.25 0 0 -1.25 0 45)'
           },  
           click: () => { this.setMode('P') },
           attr: 'pickmode',
           val: 'P'
         },
         {
           name: 'picks',
           title: 'Select S wave',
           icon: {
            'width': 512,
            'height': 512,
            'path': "M274.432-73.818c0-13.756-9.17-26.101-23.62-26.101c-14.473,0-25.759,10.581-46.933,10.581\
                  c-15.167,0-28.922-8.112-28.922-22.938c0-36.329,117.828-13.05,117.828-104.061c0-50.449-41.631-81.852-90.317-81.852\
                  c-27.159,0-85.72,6.349-85.72,39.515c0,13.756,9.17,25.042,23.632,25.042c16.577,0,36.341-13.756,59.267-13.756\
                  c23.29,0,35.988,13.062,35.988,30.345c0,41.62-117.828,16.577-117.828,98.429c0,49.38,40.562,80.077,87.484,80.077\
                  C225.052-38.536,274.432-45.954,274.432-73.818",
            'transform': 'matrix(1.25 0 0 -1.25 0 45)'
           },
           click: (gd, ev) => { this.setMode('S') },
           attr: 'pickmode',
           val: 'S'
         }, "zoom2d", "pan2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d"
       ]],

Do I need to integrate something in my click handler to make this work? Input would be appreciated.

2

Thanks for writing in.

We don’t expose a way to toggle the modebar-btn active class in custom modebar buttons at the moment unfortunately.

This would be a nice addition to the library though. Maybe we could add an addition function handler active: () => {} which would turn on the active class if it returns true and turns it off otherwise.