[ANN] Matte.jl - interactive dashboards written in Julia

matte-logo
Hi julians, I’m really pleased to announce the release of my first julia package:
Matte.jl

Matte is a package for creating interactive dashboards in julia, inspired/based on material design. This simple example of interactive plotting shows the basic functionality.

I’m a long-time Shiny user, and that sort of functionality is what I had in mind for Matte.

Give it a try for yourself by installing from the General repository and then creating and running the included hello_world app (there are other examples too)

]add Matte
using Matte, Revise
matte_example("hello_world", "hello_world")
includet("app.jl")
run_app(HelloWorldApp)

Navigate your favourite browser to localhost:8000 / 0.0.0.0:8000 and (after a bit of a lag as julia compiles everything) you should see your brand new app.

You can find documentation here.

Some caveats

Lifecycle
Matte is very experimental!

I am very much not a web developer, so I apologise to anyone who is and looks at my code. I’m sure it’ll be very ugly and I have done things a totally terrible way.

Matte isn’t well tested – it’s just been me messing around with it. There are likely to
be many bugs. Please report any you find on github

Basic structure

Matte apps comprise three key elements:

  • A module that defines the app
  • A function that creates the UI
  • A module that defines the server-side logic

Matte has a simple logic: each function in the server module is an output in the UI. You access the output from these functions by using the function name as the id for output elements in the UI. Inputs work similarly: you assign each input in the UI an id; you access the value of the input by using its id as an argument to a function in the server module.

Let’s make this concrete with an example. Suppose we want to create an app that adds two numbers specified by our users. We define in our server module:

function my_add(number1, number2)
  number1 + number2
end

This relationship is expressed in our app accordingly:

The docs go in to lots more detail, so have a look at those if you’re interested and want
to learn more:

Acknowledgements

Matte leans very heavily on a whole bunch of great packages – Genie and HTTP on the julia side and the javascript packages Vue and Vuetify.

44 Likes

Hello world worked nicely for me, very cool! Ooooo, exciting…!

1 Like

Minor note: I realized that the colors in your logo aren’t the official Julia colors, which you can find here. Maybe you want to change that.

3 Likes

Oh thanks, that’s really helpful! I definitely just picked random red green and purple. Will change.

3 Likes

How this is different from Interact.jl. Does it shares backend?

It doesn’t share code with interact, no.

As I understand interact (though I’m by no means an expert) it’s more flexible and modular. It can be used in notebooks, or in web pages etc. But, as a result, to build a full dashboard is a bit more work (because you have lots of options and control, and have to make more choices). Matte is more like R’s shiny, where it does most of the lifting for you (the cost being that you don’t have as much ability to customise).

4 Likes

This looks pretty cool :slight_smile:

2 Likes

This is really awesome! How well does Matte.jl work with background updates of data? As in, could it be used to run a realtime-updating visualization?

I know @essenciary had plans to make dashboard building a part of Genie in the future, are you working with him on that?

That’s a good question, I haven’t experimented with it. I think you should just be able to update_output anytime you get a data update and it will ''just work". But it’s not something I’ve tested. I’ve found plots updating to be a bit slow, so if you want really high frequency updates it probably will be a bit too sluggish. But every second or two should be fine.

I haven’t spoken with essenciary about Genie integration, but I’d be happy to explore it. Matte is at this stage just my experiment in what this sort of functionality could look like; keen to keep evolving and exploring options!

That is fantastic, I’ll take a look today! Happy to hear Genie helped!
I’m also actively working on a similar project based on the same stack: Genie + Vue. I’ve actually made a talk proposal for JuliaCon on the topic, fingers crossed!

I’d love to have a chat and cooperate on this! Also, I’m planning on adding some Genie enhancements which will be useful for such apps. One is to make WebChannels work not only over WebSockets but also over AJAX.

9 Likes

That sounds really exciting, hopefully your talk gets up. Absolutely, I’d love to chat about how we could cooperate. I’ll send you a PM and we can figure out the best way forward.

2 Likes

Just curious. Is there anything you are not satisified with R shiny that made you move to Julia to accomplish what you have in mind?

Great question. I would say it wasn’t dissatisfaction with Shiny so much, as with R. I really like using Julia for numerical work that I do, and I thought it would be nice to be able to seamlessly hook a front-end up to that. (Not that I’ve been doing much numerical work of late, but in theory anyway). Matte is born from wanting to be able to unify my analysis and the front-end/dashboard I expose for end users in one language. And for that single language to be Julia, for the simple reason that I like using Julia.

(I should say that I still like R, I use it for a lot of my data wrangling work, I just like Julia better :grinning:)

6 Likes

How did I miss this? The name is great!

1 Like

This looks great and I am keen to try it out, but it does not compile on my machine: (Windows 10, Julia 1.4.0). Missing a path apparently.

[ Info: Precompiling Matte [b0b859e2-eb2e-45cd-bd98-8fc21bfdc9fa]
ERROR: LoadError: InitError: UndefVarError: sorcepath not defined
Stacktrace:
 [1] filter_valid_cachefiles(::String, ::Array{String,1}) at D:\Users\paumi69p\.julia\packages\Revise\xLyiS\src\pkgs.jl:84
 [2] pkg_fileinfo(::Base.PkgId) at D:\Users\paumi69p\.julia\packages\Revise\xLyiS\src\pkgs.jl:99
 [3] parse_pkg_files(::Base.PkgId) at D:\Users\paumi69p\.julia\packages\Revise\xLyiS\src\pkgs.jl:163
 [4] __init__() at D:\Users\paumi69p\.julia\packages\Revise\xLyiS\src\Revise.jl:1201
 [5] _include_from_serialized(::String, ::Array{Any,1}) at .\loading.jl:697
 [6] _require_search_from_serialized(::Base.PkgId, ::String) at .\loading.jl:781
 [7] _require(::Base.PkgId) at .\loading.jl:1006
 [8] require(::Base.PkgId) at .\loading.jl:927
 [9] require(::Module, ::Symbol) at .\loading.jl:922
 [10] include(::Module, ::String) at .\Base.jl:377
 [11] top-level scope at none:2
 [12] eval at .\boot.jl:331 [inlined]
 [13] eval(::Expr) at .\client.jl:449
 [14] top-level scope at .\none:3
during initialization of module Revise
in expression starting at D:\Users\paumi69p\.julia\packages\Genie\9ipqT\src\Genie.jl:6
ERROR: LoadError: Failed to precompile Genie [c43c736e-a2d1-11e8-161f-af95117fbd1e] to D:\Users\paumi69p\.julia\compiled\v1.4\Genie\8eazC_fO3aY.ji.
Stacktrace:
 [1] error(::String) at .\error.jl:33
 [2] compilecache(::Base.PkgId, ::String) at .\loading.jl:1272
 [3] _require(::Base.PkgId) at .\loading.jl:1029
 [4] require(::Base.PkgId) at .\loading.jl:927
 [5] require(::Module, ::Symbol) at .\loading.jl:922
 [6] include(::Module, ::String) at .\Base.jl:377
 [7] top-level scope at none:2
 [8] eval at .\boot.jl:331 [inlined]
 [9] eval(::Expr) at .\client.jl:449
 [10] top-level scope at .\none:3
in expression starting at D:\Users\paumi69p\.julia\packages\Matte\nYRds\src\Matte.jl:3
ERROR: Failed to precompile Matte [b0b859e2-eb2e-45cd-bd98-8fc21bfdc9fa] to D:\Users\paumi69p\.julia\compiled\v1.4\Matte\VMBvG_fO3aY.ji.
Stacktrace:
 [1] error(::String) at .\error.jl:33
 [2] compilecache(::Base.PkgId, ::String) at .\loading.jl:1272
 [3] _require(::Base.PkgId) at .\loading.jl:1029
 [4] require(::Base.PkgId) at .\loading.jl:927
 [5] require(::Module, ::Symbol) at .\loading.jl:922'''

Thanks, and thanks for opening an issue on GitHub for it too. This seems to be an upstream issue with Revise (for which I’ve opened a PR). In the meantime, you can try downgrading Revise to v2.6.1 and see if that works:

]add Revise@2.6.1

Yes. That fixed it. Thanks! :smiley:

1 Like

Hello.

How is Matte.jl different from Stipple.jl?

How is Matte.jl and Stipple.jl different from Dash.jl? Thanks!

Matte is made possible by a range of excellent julia and javascript open source libraries. Of particular note: Genie.jl, Vuetify and Vue.js.

This makes it in some sense similar to Stipple.jl (and somehow compatible or competing only? easier to change your mind and switch between these two if you made the wrong choice?), also based on Genie.jl (the guy behind it is also behind Stipple), and the former uses Vue too.

Dash.jl is based on React however, not Vue, and to me these are mostly buzzwords, pros and cons explained in another thread, by @essenciary which competes with it. And uses Plotly.jl.

I imagine for simple uses, all three are ok, and similar. For more complex plots/functionality, there might be a difference (and vue or react “plugins” might matter). Besides the technical differences, I guess it’s also about which of these is more mature, and Stipple was updated days ago.

I do see “Matte is still highly experimental.” and it hasn’t been updated in 6 months (except for updated js dependency). Maybe the author realized it was redundant with Stipple?

1 Like