[FEAT]: Gather information on beaker new features

[YohannParis]

We need to integrate the following features from Beaker into Terarium:

• Syntax highlighting
• Hints (autocomplete functionality)
• Keyboard shortcuts similar to those in Jupyter Notebook

Please analyze the beaker-ts package to understand how these features are implemented. Based on your findings, assess whether it is feasible to update our own interface and components or if we should leverage the existing implementations from Beaker.

[blanchco]

Based on some initial findings - it looks like we already support syntax hightlighting and have some shortcuts that we can use with the dataset transformer:

As for autocomplete it looks like we might have the ability to use autocomplete with our current setup but it might be broken, will take a look into it further

[blanchco]

• Key bindings: this uses a custom directive to implement within the beaker library, which we might be able to do this ourselves: https://github.com/jataware/beaker-kernel/blob/27063277d38d4862e3466e2a3116424ca9b7656b/beaker-vue/src/pages/DevInterface.vue#L278-L332

• Syntax highlighting: Do we want it to look like beaker's? We already have syntax highlighting available: Beaker:

  

Terarium:

• Autocomplete: Seems to be broken on our cell component...but its there. https://github.com/DARPA-ASKEM/terarium/blob/412a24f7b5fc14d98dde66d72e21d3de111d6bde/packages/client/hmi-client/src/components/llm/tera-beaker-response-code-cell.vue#L96-L120

[blanchco]

The Jupyterlabs completer will not be the same behaviour as the one from beaker...we can use the beaker component or use the ace editor one where the completer is easy to implement and has similar behaviour. We would need to rewrite our response cell component in that case which will take some time

[blanchco]

Tried making a test component using the beaker-vue library yesterday but wasn't able to import the library properly. Reached out to @mattprintz and some fixes are being made for us to import it. If we need these features now it might be best to refactor our own code cell component if we can't use the beaker-vue library in time. We can take some inspiration from the beaker-vue components.

[blanchco]

To note, beaker uses vue-codemirror as their editor. We use jupyter lab cells which are a little difficult to work with. We also use the ace editor for other components.

[mattprintz]

We use jupyter lab cells

Note: Jupyterlab cells use codemirror as well.

[blanchco]

Final thoughts:

We are looking at integrating features from Beaker into Terarium, focusing on syntax highlighting, autocomplete functionality, and keyboard shortcuts. For my investigation it looks like Terarium already supports syntax highlighting and some keyboard shortcuts, though there is room for improvement, particularly in autocomplete functionality, which appears to be broken.

Key findings:

Syntax Highlighting: Terarium has this feature, but there's a decision to be made on whether to adopt Beaker's style.

Autocomplete: The existing implementation in Terarium is incomplete or broken with jupyter cells. The jupyter library is a pain to work with and I'd rather not spend time continuing trying to work with it. We can use the Beaker component or the Ace editor which has autocomplete built in, the latter may require significant refactoring since the Beaker component has a lot of logic behind how it renders the output in it's cells which we would have to rewrite.

Keyboard Shortcuts: Beaker uses custom directives for its key bindings, we can either copy Beaker's key bindings or use own here, its flexible. We could implement this ourselves but again will require us to figure out how/when these keyboard events will be handled and fired.

Recommendations

There are a couple of ways to implement these features for our notebook:

1. Import and Use Beaker Components for Notebook. This approach will be much faster to implement since it has keybindings ready to go and handles much of the notebook logic. However, we will be limited to the beaker library but it seems pretty flexible. We will also need to wait so that we have the ability to import the component properly. We can initially use all Beaker components and then gradually move over and use our own components as we see fit

• [ ] Create the notebook using Beaker components.
• [ ] Add keybindings.
• [ ] TODO later: Create our own terarium cell components to be used rather than beaker's cell components.
• [ ] Optional: We may want to use code mirror rather than ace editor in this case for all of our other components

2. Complete Refactor of Our Own Cell Component Using Ace Editor (or CodeMirror). This approach allows for more customization but will require significant refactoring and a lot more time. We would effectively be copying a lot of code from the beaker library:
   • [ ] Create code cell components with our own editor.
   • [ ] Handle cell component outputs.
   • [ ] Handle and add keybinding events.
   • [ ] Optional: a refactor of notebook as well, the way it's currently implement is kind of buggy

[mattprintz]

It IS possible to customize your components. Let's discuss this further.

[mattprintz]

Information on customization, copy/pasted from Slack for transparency/posterity:

So, the main thing is that the beaker vue components are designed to be mix-and-match. So you should be able to use the BeakerSession component around raw Terarium (tm) components, assuming you update the tm components to fetch the session using inject(). And then inside your tm component, you should be able to import/use the beaker CodeEditor component. So you could write your own component that has all looks exactly like it does now, but switch out the tm way of generating a session with the session component and switch out the Ace Editor component with beaker's CodeEditor and that would be fine. You'd probably have to make a couple changes on setting/fetching/executing the contents of the editor, but that should be relatively minor.

If you want to use the whole notebook look/feel, you can design your own components as separate .vue files, and then tell the notebook components to render your .vue files instead of the defaults

This is done by providing :cell-map={'code': TmCodeWidget, ...} as seen here: https://github.com/jataware/beaker-kernel/blob/2917cbf8ad866cd827c7841ab664a89c9125acf4/beaker-vue/src/pages/DevInterface.vue#L40

This basically says, whenever you have a cell in a notebook of type 'code' render it using the TmCodeWidget component

If you just want to style the elements, beaker-vue has a rudimentary theming solution, defined here: https://github.com/jataware/beaker-kernel/blob/2917cbf8ad866cd827c7841ab664a89c9125acf4/beaker-vue/src/plugins/[theme.ts](https://github.com/jataware/beaker-kernel/blob/2917cbf8ad866cd827c7841ab664a89c9125acf4/beaker-vue/src/plugins/theme.ts)

It uses primevue themes if you guys already use that. If not, you can start with an existing theme. Make a copy of it, and then modify it so the colors and things look good. We are trying to only (or at least mostly) use variables defined in the themes to allow for this customization, but I'm positive that there is still a lot of unthemed stuff in the components for now. If you run in to something that needs to be controllable by theme but isn't, I'm sure we could add that pretty quickly, or you could submit a PR or something.

Keep in mind that the components in pages are examples of implementations and not something that you would be expected to import. I.e. they are top-level apps, not really components suitable for embedding in tm

So, you basically have options, all the way from: use with functionality "as-is", but change the colors/styling, all the way to defining custom components where you mix-and-match predefined and custom elements.