Let’s have a look at how to provide our users with a truly amazing experience when we need to allow them to edit pieces of code or configuration.
We will use one of the most popular and well-known code editors called Monaco editor which powers VSCode. The resulting app will have the editor on the left side and a markdown card on the right to showcase how to actually capture the data and communicate with Wave.
H2O Wave has a built-in mechanism for editing a multiline text via its ui.textbox component, but it has significant downsides:
No syntax highlighting.
Regular font instead of monospaced which tends to be more readable.
No find/replace functionality and other editor goodies.
The app consists of 2 parts:
Python part — regular Wave app.
All the code is loaded using require.js, but you can consider it an implementation detail. The only Wave-related thing to note is events. We fire 2 kinds:
Save event — when the user hits CMD or CTRL + S, used for updating our left-hand side markdown card.
Change event — when the user types something, used to mark the editor card as dirty using *.
Once the editor has been created, we want to also setup up listeners from which we will emit Wave events using window.wave.emit function. These are located within editor.addAction and editor.onDidChangeModelContent.
The Python part
The first thing we need to create is a single HTML div element that will serve as a container into which Monaco renders its magic. We can use ui.markup_card as it’s designed for this exact purpose — rendering raw HTML. We also give the div a unique ID to easily select it in our JS file. Lastly, we want the editor to take up all the available card space so a few extra styles are necessary.
Then we just render a ui.markdown_card to display saved text and demonstrate how can Wave and Monaco communicate.
Handling the events then is a piece of cake.
Using less than 100 total lines of code you get syntax highlighting and rich editing capabilities almost for free. Not bad at all I would say 🙂
About the Author
In my free time, I teach ballroom dancing at both competitive and social level (as a former ballroom dancer).
Leave a Reply
10 Consejos para Convertirte en un Científico de Datos Exitoso
En este mundo que no deja de cambiar y sorprendernos, como científicos de datos debemos
January 19, 2023 - by
Explaining models built in H2O-3 — Part 1
Machine Learning explainability refers to understanding and interpreting the decisions and predictions made by a
December 22, 2022 - by
H2O.ai at NeurIPS 2022
H2O.ai is proud to participate in the 36th Conference on Neural Information Processing Systems (NeurIPS)
December 6, 2022 - by
Marcos V. Conde
A Brief Overview of AI Governance for Responsible Machine Learning Systems
Our paper “A Brief Overview of AI Governance for Responsible Machine Learning Systems” was recently
November 30, 2022 - by
Navdeep Gill, Abhishek Mathur and Marcos V. Conde
H2O World Dallas Customer Talks
After three long years of not having an #H2OWorld, we finally held our first one
November 24, 2022 - by
New in Wave 0.24.0
Another Wave release has arrived with quite a few exciting new features. Let's quickly go
November 21, 2022 - by
Request a Demo
Explore how to Make, Operate and Innovate with the H2O AI Cloud today