Adding Interactive UI Components

00:00 In the previous lesson, I showed you how marimo determines cell execution order. In this lesson, I’ll introduce you to the UI features of the notebook.

00:10 marimo includes the ability to add UI components to a notebook, which you then associate with variables in your code, allowing you to make dynamic changes to values through the UI rather than editing the cell.

00:22 I don’t cover this in the course, but marimo also has a read-only mode, so you can share your notebook with someone who doesn’t know how to code, just giving them the UI and stopping them from mucking around in the cells and breaking something.

00:34 marimo provides all sorts of UI components, including buttons, check boxes, date pickers, dropdowns, sliders, and much more. To see a full list, go to the input section of the documentation.

00:50 To demonstrate the UI capabilities, I’m going to build a break-even analysis. This is a kind of calculation a company does when a product has both a fixed cost, like the price of buying machinery, and a variable cost, like the cost per product made.

01:04 The break-even analysis tells you how many products you have to sell to make back the money you spent to get going. For example, say I’m selling a box of chocolates.

01:14 Life is like a box of chocolates. You never know what you’re going to get, unless, of course, you own the chocolate factory and you’re the one putting the little chocolates in the box.

01:23 That and there’s those little maps. You often know what you’re going to get. What was I saying? Right. I’m selling chocolates. I need some machinery to pack the chocolates in the box, and that has a fixed cost of $50,000.

01:37 Each box of chocolates costs me $2 to make, and I’m going to sell them for $10. Something tells me these aren’t high-quality chocolates, but at least it keeps the math easier.

01:48 Now, what I want to know is how many boxes of chocolates do I need to sell to make back the cost of the machinery and cover the cost of each box, and it would be really convenient if I could adjust the values to see how the break-even amount changes.

02:02 Let’s head into the accounting office next to the kitchen and start up our new notebook.

02:08 I’m inside my new notebook called breakeven.py. I could just run the math, but it would be nice to visualize it as well. As such, I’m going to use Matplotlib.

02:19 There’s a bit more code here than the examples so far, so I’m not going to make you watch me type it all in. Like with all of our courses, the sample code is available in the supported materials dropdown just below this video.

02:34 I’ll start by defining some variables. The fixed_cost is our machinery. The unit_cost is the cost per box. The price is what I’m selling the box for, and upper_limit is a maximum value for the number of units to use in our calculation.

02:49 Can’t have the calculation running forever. By the way, if you haven’t seen the underscore notation before, Python supports it in numbers for a thousands separator, making it easier to read in your code.

03:01 I kind of like this feature. Now for the beefy chunk, the calculation and the graph.

03:08 The first value, break_even_quantity, is the number of units that need to be sold to break even. The second value is how much income that will provide.

03:17 If you didn’t want to graph it, this really is all you’d need, but then you wouldn’t have much of a dashboard, would you? To be able to graph the amounts involved, I need a series of numbers.

03:28 In this case, that series will be from zero to our upper_limit variable. Then I create two more series, one contains the total cost for each number of units, and the other for the corresponding income.

03:41 These lists are what get passed to Matplotlib to be graphed.

03:47 Speaking of graphing, these are the calls to Matplotlib that draw the lines in a line graph. I’m graphing two lines. The first is a line expressing total cost, and the second is a line expressing total income.

04:00 Each graph gets an x and y—the x being the range of units, and the y being the cost and the income, respectively. The marker argument allows me to specify an icon for the dots in the graph.

04:15 This code makes the graph prettier, adding labels for the X and Y axis, a legend, and a title. The vlines() call adds a vertical line to the graph.

04:25 I’m putting this at the break-even point to highlight the place where our cost line and income lines cross. To go with the vertical line, I’m adding some text to show the value at the intersection, and finally, this is what creates and displays the graph.

04:42 Let me hit run. Let me scroll back a bit. fixed_cost is not defined, except it is. Well, I failed to run this cell.

04:54 Using the global run instead, and that’s better.

05:00 There you go. A pretty chart showing the break-even value of 6,250 units. Now, if I want to adjust the numbers to see how it affects the outcome, I could do what I’ve done so far and play with the original variables in the cell where I defined them, but that’s not what you came here for.

05:17 Let’s add some UI components. I’m just going to scroll up here and insert a new cell before the variable definitions.

05:27 This code defines four new variables, each of which references an instance of a UI component. The first is a radio button with two values, 40,000 and 50,000.

05:38 The second is a slider that goes between two and five. The third is a text box, and the last is a dropdown with three choices in it. When I run the cell, these get defined, but they aren’t showing in the notebook yet.

05:54 To do that, I need to add some Markdown, scrolling back down, adding a Python cell,

06:01 and this Markdown will display the actual UI. Let me run it, and there you go. Great. Now I’ve got a UI, but it isn’t wired to anything. There’s one last step. Back up to the top.

06:16 I need to replace these hardcoded values with references to the UI components.

06:23 The UI components are Python objects. To get at their current value, you use the .value property on them. Note that the radio button is using text, so I need to convert it to an int for the fixed cost.

06:35 Likewise, for the price text box. I’ll rerun all the cells

06:42 and now when I scroll back down,

06:45 I can make a change to the unit_cost. The graph above changes as well. You see the difference. We’ve updated the values by using the UI and now the break-even is 7,142.

06:58 All else considered, this is a dashboard with very little code, which you can share with your colleagues and they can adjust it by playing with the UI.

07:08 Speaking of sharing things with your colleagues, to do that, they’ll need the same libraries installed as those you used in your notebook. In the next lesson, I’ll show you how to make that simpler.