Fast Design widgets

I am a user of and contributor to Panel which stands on the shoulders of Bokeh.

I’ve started wrapping the Fast Design Web Components as Bokeh extensions. The look and feel is really awesome. And they come with a coherent design system which makes it really, really easy to change the look and feel including colors, rounding etc. And dark mode is the default mode!

They are open sourced by Microsoft and will probably power the experience of VS Code and Office in the future. I.e. by implementing these widgets as Bokeh Extensions we get access to a large, well supported ecosystem like also the predecessor or twin sister of Fast which is the Fluent Design System.

FYI. @Bryan. I think the Fast Design Widgets could bring the bokeh widgets a step further into the future. And by using some of the Fluid Design System components to create templates you can actually create really modern looking applications on top of Bokeh with no a lot of work. If you are interested in getting these widgets into Bokeh or have connections at Microsoft who could see the potential. Let me know.

You can find the source code for the bokeh extensions here

3 Likes

FastButton Added

fast-button

Check it out on binder.

FastCheckbox Added

fast-checkbox

FastTextInput Added

fast-text-input

FastAnchor Added

Use it via from awesome_panel_extensions.frameworks.fast import FastAnchor

Or checkout the reference guide

fast-anchor

1 Like

Hi @MarcSkovMadsen this is all really neat stuff as always. I thought I had mad an issue about the simplifying and standardizing a widget extension API / process, at least for some selection of common widgets, but I can’t seem to find it. Would you be interested to collaborate on this? I have high level ideas that I think would be a strong benefit to you and other users, but ideally this needs a technical champion that is motivated by real-world usage and experience. That basic notion is to afford an avenue to generate custom extensions for alternative widget implementations with much less work, e.g. by codifying standard expected hooks for a particular abstract widget type, and just passing the hook definitions to an API that can create the extension automatically.

1 Like

@Bryan. I created this one earlier today

I am sort of interested. It would be awesome to contributing to make Bokeh and Panel more awesome. I have a feeling that for me the most effective would be to work through the Fast widgets and from that knowledge and having two sets of implementation (Bokeh original + Fast) it would make sense to try to refactor and align.

1 Like

I’ve added a FastTextAreaInput and FastSwitch.

fast-switch

image

2 Likes

@MarcSkovMadsen I think we are on the same page. My high level idea here is that there would be value in a small, stable, well-defined API (or set of API hooks) for common widgets, so that e.g. adding a new “slider” is just a matter of supplying a few snippets of glue code, and not involve defining any new classes, or supplying a ton of boilerplate, or for that matter, dealing with the build system directly.

Keeping a concrete example, what “defines” a (single) slider? I would say:

  • start value
  • end value
  • current value
  • step

Adding a new slider need only be a matter of supplying the “getter” and “setter” code for these few things. For people (or downstream projects) that want to integrate their own widgets into Bokeh applications, but also maintain wide control over appearance and layout, keeping the extension interface surface extremely small means Bokeh does not get in their way when they try to do all their customizations.

If you ever wanted/ had the resources to update the bokeh widgets to a more modern look. And something that supports consistent, custom styling including dark theme out of the box. And something that is mature and not a total revolution. You should also take a look at https://shoelace.style/.

It’s seems pretty mature (2.0beta), has a lot of stars on github, looks and feels like a modern version of Bootstrap so it would just be an “updating” of the existing widgets and has most of the components you would need. The things missing as far as I can see is the range slider and the file upload.

But it also has a lot of additional components that I believe Bokeh/ Panel is lacking today to make it easy to create awesome looking analytics apps that support more advanced work flows.

FYI @Bryan, @Philipp_Rudiger

and there is a color picker that supports selecting the alpha value. Something that would be really nice to have to be able to let the user change the look and feel of plots and the app it self.