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
Enhancing H2O Model Validation App with h2oGPT Integration
As machine learning practitioners, we’re always on the lookout for innovative ways to streamline and
May 17, 2023 - by
Building a Manufacturing Product Defect Classification Model and Application using H2O Hydrogen Torch, H2O MLOps, and H2O Wave
Primary Authors: Nishaanthini Gnanavel and Genevieve Richards
Effective product quality control is of utmost importance in
May 15, 2023 - by
Insights from AI for Good Hackathon: Using Machine Learning to Tackle Pollution
At H2O.ai, we believe technology can be a force for good, and we're committed to
May 10, 2023 - by
Parul Pandey and Shivam Bansal
Democratization of LLMs
Every organization needs to own its GPT as simply as we need to own our
May 8, 2023 - by
Building the World’s Best Open-Source Large Language Model: H2O.ai’s Journey
At H2O.ai, we pride ourselves on developing world-class Machine Learning, Deep Learning, and AI platforms.
May 3, 2023 - by
Effortless Fine-Tuning of Large Language Models with Open-Source H2O LLM Studio
While the pace at which Large Language Models (LLMs) have been driving breakthroughs is remarkable,
May 1, 2023 - by
Request a Demo
Explore how to Make, Operate and Innovate with the H2O AI Cloud today