Skip to content

Introducing layout update menus (aka dropdowns) #770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Aug 3, 2016
Merged

Conversation

etpinard
Copy link
Contributor

@etpinard etpinard commented Jul 22, 2016

gifrecord_2016-07-22_180239

Native update menus are coming to plotly.js 🎉

Update menus are designed to expose top-level Plotly methods to manage on-click updates. Each buttons is declared with a method and an args field which are then translated in a Plotly[method] call. For example,

layout.updatemenus = [{
  buttons: [{
    method: 'restyle',
    args: [ 'marker.size', 'red' ]
  }]
}];

// is on-click translated to
Plotly.restyle(gd, 'marker.size', 'red')

I chose to link them to layout.updatemenus instead of e.g. layout.dropdowns to allow adding support for other menu views (e.g. static buttons) down the road.

TODOs:

  • add tests (once I get some 👍 on the attribute set + functionality)
  • agree on default styling cc @delekru
  • decide whether or not and which add more attributes
  • decide if we should validate the button args for a given button method or let plotly error out. Answer: let plotly error out.

cc @jackparmer @chriddyp

@etpinard
Copy link
Contributor Author

To reproduce the graph ⏫

function makeTrace(i) {
    return {
        y: Array.apply(null, Array(10)).map(() => Math.random()),
        line: { 
            shape: 'spline' ,
            color: 'red'
        },
        visible: i === 0,
        name: 'Data set ' + i,

    };
}

Plotly.plot(Tabs.fresh(), [0, 1, 2, 3].map(makeTrace), {
    updatemenus: [{
        buttons: [{
            method: 'restyle',
            args: ['line.color', 'red'],
            label: 'red'
        }, {
            method: 'restyle',
            args: ['line.color', 'blue'],
            label: 'blue'
        }, {
            method: 'restyle',
            args: ['line.color', 'green'],
            label: 'green'
        }] 
    }, {
        y: 0.7,
        buttons: [{
            method: 'restyle',
            args: ['visible', [true, false, false, false]],
            label: 'Data set 0'
        }, {
            method: 'restyle',
            args: ['visible', [false, true, false, false]],
            label: 'Data set 1'
        }, {
            method: 'restyle',
            args: ['visible', [false, false, true, false]],
            label: 'Data set 2'
        }, {
            method: 'restyle',
            args: ['visible', [false, false, false, true]],
            label: 'Data set 3'
        }]
    }]
});

@jackparmer
Copy link
Contributor

Nice!💃 from me once @delekru is happy with the dropdown colors and styling.

@delekru
Copy link

delekru commented Jul 25, 2016

@etpinard How about something simple like this?

dropdown

I can change the light-blue hover colour to something a bit more neutral if you'd like.

@etpinard
Copy link
Contributor Author

@delekru looks dope.

The styling constants are here and ⬇️. We would also need to change the default border width here.

The headers and buttons are svg <rect>.

@etpinard etpinard added this to the v1.16.0 milestone Jul 28, 2016
@etpinard
Copy link
Contributor Author

etpinard commented Jul 29, 2016

Screenie of the new @delekru -proof style:

image

... looking really dope.

etpinard added 11 commits August 1, 2016 19:26
- used in update menus (but possible more layout components
  down the road).
- For some reason, ../assets/mouse_event.js fails
  to detect the button elements in FF38 (like on CircleCI 2016/08/02),
  so dispatch the mouse event directly about the nodes instead
- must compare item width with a tolerance as the exact result
  is browser/font dependent (via getBBox)
// active bgcolor
// hover bgcolor
// gap between buttons
// gap between header & buttons
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we move this comment to an issue or link to an issue?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to #810

@bpostlethwaite
Copy link
Member

Looks nice and clean! I didn't get deep into the d3 code as I am not strong in the d3 arts but your commenting made it possible to understand what was going on, nice work!

💃

- the '_index' field now corresponds to the menu index
  in the user layout update menu container.
  This is a more 'consistent' field than e.g. the index in the menuData.
- the '_index' field is set at the default step
  -> no need to rely on relinkPrivateKeys.
@etpinard etpinard mentioned this pull request Aug 3, 2016
@etpinard etpinard merged commit 94be168 into master Aug 3, 2016
@etpinard etpinard deleted the layout-updatemenus branch August 3, 2016 15:06
etpinard added a commit that referenced this pull request Sep 1, 2016
- 'bottom' -> 'top'
- 'bottom' was misplaced in #770 when the attributes
   were ported over from range selectors
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature something new
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants