[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.

41 Likes

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

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.

2 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.

5 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.