Custom widgets

Work in progress

This tutorial is being written. It will show how to write widgets that read the selected rows of the factory and save edits like the built-in ones, for instance a summary of the selected patient or a timeline of their notes. The helpers these widgets need are not public yet.

The factory widgets cover tables, texts, forms and PDFs, but a view can hold any Pret component next to them. A common case is an annotation guide, kept in a panel beside the text so annotators check the rules without leaving the tab.

Add a guide panel

In metanno-home/recipes/oncology_review.py from Design your view, write the guide as a component:

from pret_joy import Typography


def guide():
    """
    Show the annotation rules of the project
    """
    return Stack(
        Typography("Annotation guide", level="title-md"),
        Typography("Tumeur: any tumor mention, including negated ones."),
        Typography("TNM: the complete stage, such as cT3N1M0."),
        Typography("Site: the organ of the primary tumor."),
        spacing=1,
        sx={"p": 1},
    )

then add it as a panel of the layout, stacked as a tab with the note fields:

     layout = Layout(
         Panel(notes, key="Notes"),
         Panel(text, key="Text", header=header),
         Panel(Stack(form, Divider(), toolbar, spacing=1), key="Note"),
+        Panel(guide(), key="Guide"),
         Panel(entities, key="Entities"),
         default_config={
             ...
-                        {"tabs": ["Note"], "size": 50},
+                        {"tabs": ["Note", "Guide"], "size": 50},

Click the reload button of the tab toolbar: a Guide tab now sits next to Note.

Pret components are written in Python like React components, the Pret tutorials show how to give them a state and make them interactive.

Custom widgets

Add a guide panel

Next