Update

app.py

@@ -1,4 +1,7 @@
+import os
 import re
+import uuid
+import json
 import argparse
 import torch
 import gradio as gr
@@ -10,7 +13,9 @@ from model import load_model
 from datetime import datetime
 from dateutil import parser
 from demo_assets import *
-from typing import List, Dict, Any
+from typing import List, Dict, Any, Optional, Tuple
+from dataclasses import dataclass
+from collections import defaultdict
 
 def get_args():
     parser = argparse.ArgumentParser()
@@ -82,23 +87,235 @@ elif args.task == 'token':
     elif args.label_encoding == 'boe':
         args.num_labels *= 3
 
-categories = ['Contact related', 'Gathering additional information', 'Defining problem',
-        'Treatment goal', 'Drug related', 'Therapeutic procedure related', 'Evaluating test result',
-        'Deferment', 'Advice and precaution', 'Legal and insurance related']
-unicode_symbols = [
-        "\U0001F91D",  # Handshake
-        "\U0001F50D",  # Magnifying glass
-        "\U0001F9E9",  # Puzzle piece
-        "\U0001F3AF",  # Target
-        "\U0001F48A",  # Pill
-        "\U00002702",  # Surgical scissors
-        "\U0001F9EA",  # Test tube
-        "\U000023F0",  # Alarm clock
-        "\U000026A0",  # Warning sign
-        "\U0001F4C4"   # Document
-        ]
-
-OTHERS_ID = 18
+@dataclass
+class KeyDef:
+    key: str
+    name: str
+    desc: str = ''
+    color: str = 'lightblue'
+    symbol: str = ''
+
+class AnnotationState:
+    def __init__(self):
+        self.entity_regex = r'\[\@.*?\#.*?\*\](?!\#)'
+        self.recommend_regex = r'\[\$.*?\#.*?\*\](?!\#)'
+        self.history = []
+        self.config_file = "configs/default.config"
+        self.press_commands = self.read_config()
+        # Internal state holds the actual annotations
+        self.annotations = []
+        self.raw_text = ""
+        
+    def read_config(self) -> List[KeyDef]:
+        if not os.path.exists(self.config_file):
+            default_config = [{
+                'key': key,
+                'name': name, 
+                'color': color,
+                'symbol': symbol
+                }
+                for key, name, color, symbol in zip(keys, categories, colors, unicode_symbols)
+                ]
+            os.makedirs("configs", exist_ok=True)
+            with open(self.config_file, 'w') as fp:
+                json.dump(default_config, fp)
+        
+        with open(self.config_file, 'r') as fp:
+            config_dict = json.load(fp)
+        
+        return [KeyDef(**entry) for entry in config_dict]
+
+    def get_cmd_by_key(self, key: str) -> Optional[KeyDef]:
+        return next((cmd for cmd in self.press_commands if cmd.key == key), None)
+
+    def set_text(self, text: str):
+        """Initialize with new text, clearing annotations"""
+        self.raw_text = text
+        self.annotations = []
+        self.history = []
+        
+    def add_annotation(self, start: int, end: int, entity_type: str) -> str:
+        """Add new annotation and return display text"""
+        # Save current state to history
+        self.history.append((self.raw_text, list(self.annotations)))
+        if len(self.history) > 20:
+            self.history.pop(0)
+            
+        # Add new annotation
+        self.annotations.append((start, end, entity_type))
+        return self.get_display_text()
+
+    def remove_annotation(self, start: int, end: int) -> str:
+        """Remove annotation at position if it exists, splitting spans if needed"""
+        self.history.append((self.raw_text, list(self.annotations)))
+        
+        new_annotations = []
+        
+        for a in self.annotations:
+            annotation_start, annotation_end, entity_type = a
+            
+            # If the current annotation does not overlap, keep it as is
+            if annotation_end < start or annotation_start > end:
+                new_annotations.append(a)
+            
+            # If the removed span is a proper subset, split the annotation
+            elif annotation_start < start and annotation_end > end:
+                new_annotations.append((annotation_start, start - 1, entity_type))
+                new_annotations.append((end + 1, annotation_end, entity_type))
+            
+            # If there's overlap with the start, but not the end
+            elif annotation_start < start <= annotation_end:
+                new_annotations.append((annotation_start, start - 1, entity_type))
+            
+            # If there's overlap with the end, but not the start
+            elif annotation_start <= end < annotation_end:
+                new_annotations.append((end + 1, annotation_end, entity_type))
+        
+        self.annotations = new_annotations
+        return self.get_display_text()
+
+    def undo(self) -> str:
+        """Undo last annotation action"""
+        if not self.history:
+            return self.get_display_text()
+            
+        self.raw_text, self.annotations = self.history.pop()
+        return self.get_display_text()
+
+    def get_display_text(self) -> str:
+        """Generate display text with HTML formatting for annotations"""
+        if not self.annotations:
+            return f'<div id="annotated-text">{self.raw_text}</div> <div id="legend"></div>'
+
+        # Sort annotations by start position
+        sorted_annotations = sorted(self.annotations, key=lambda x: (x[0], -x[1]))
+        
+        # Build display text with HTML spans
+        result = ['<div id="annotated-text">']
+        last_end = 0
+        
+        for start, end, entity_type in sorted_annotations:
+            if start < last_end and end > last_end:
+                start = last_end
+            elif start < last_end:
+                continue
+
+                
+            # Add text before annotation
+            result.append(self.raw_text[last_end:start])
+            
+            # Add annotated text with highlighting
+            text = self.raw_text[start:end]
+            cmd = self.get_cmd_by_key(entity_type)
+            color = cmd.color
+            result.append(f'<span style="background-color: {color};" title="{cmd.name}">{text}</span>') # Nicer tooltip
+            
+            last_end = end
+            
+        # Add remaining text
+        result.append(self.raw_text[last_end:])
+        result.append('</div>')
+
+        # Generate legend
+        legend = ['<div id="legend" style="margin-top: 10px;"><span style="font-weight: bold;">Legend:</span > '] # Margin and bold legend title
+        used_categories = sorted(list(set([a[2] for a in self.annotations])))
+        for cat in used_categories:
+            cmd = self.get_cmd_by_key(cat)
+            legend.append(f'<span style="background-color: {cmd.color}; padding: 3px 5px; border-radius: 3px; margin-right: 5px; font-size:0.9em; display: inline-block; vertical-align: middle; color: black; font-family: sans-serif;">{cmd.name}</span>') # Improved legend item styling
+        legend.append('</div>')
+        result.extend(legend)
+
+        return "".join(result)
+
+
+    def get_annotated_text(self, annotator_id=None, discharge_summary_id=None) -> dict:
+        """Generate a dictionary containing annotation data."""
+        unique_id = str(uuid.uuid4())[:8]
+        annotations = []
+        if self.annotations:
+            sorted_annotations = sorted(self.annotations, key=lambda x: (x[0], -x[1]))
+            for idx, (start, end, entity_type) in enumerate(sorted_annotations):
+                cmd = self.get_cmd_by_key(entity_type)
+                annotations.append({
+                    "decision": self.raw_text[start:end],
+                    "category": f'Category {categories.index(cmd.name) + 1}: {cmd.name}',
+                    "start_offset": start,
+                    "end_offset": end,
+                    "annotation_id": f'{unique_id}_{idx}'
+                })
+
+        return {
+            "annotator_id": annotator_id if annotator_id else None,
+            "discharge_summary_id": discharge_summary_id if discharge_summary_id else None,
+            "annotations": annotations
+        }
+
+def init_text(text):
+    if text:
+        state.set_text(text)
+        return state.get_display_text()
+    return "<div id='annotated-text'>Enter text to begin...</div>"
+
+def add_entity(cmd_key, start: int, end: int):
+    """Handle adding new entity annotations"""
+    if start == end:
+        return state.get_display_text(), "No text selected"
+        
+    cmd = state.get_cmd_by_key(cmd_key)
+    if not cmd:
+        return state.get_display_text(), "Invalid command"
+        
+    new_text = state.add_annotation(start, end, cmd.key)
+    return new_text, f"Added {cmd.name} entity"
+
+def remove_entity(start: int, end: int):
+    """Handle removal of annotations"""
+    if start == end:
+        return state.get_display_text(), "No text selected"
+    return state.remove_annotation(start, end), "Removed annotation"
+
+def undo():
+    """Handle undoing the last action"""
+    return state.undo(), "Undid last action"
+
+def download_annotations(annotator_id, discharge_summary_id):
+    """Generates and provides annotation data for download."""
+    annotation_data = state.get_annotated_text(annotator_id, discharge_summary_id)
+    with open(OUTPUT_PATH, 'w') as f:
+        json.dump(annotation_data, f, indent=4)
+    return OUTPUT_PATH
+
+
+
+def refresh_annotations(annotator_id, discharge_summary_id):
+    """Refreshes the displayed annotation JSON."""
+    return state.get_annotated_text(annotator_id, discharge_summary_id)
+
+
+def clear_annotations():
+    state.set_text(state.raw_text)  # Clears annotations by setting empty text
+    return gr.update(interactive=True, elem_classes=[]), state.get_display_text() # added value
+
+def model_predict(text):
+    """Placeholder for model prediction logic"""
+    output, t2c = predict(text)
+    spans = indicators_to_spans(output.argmax(-1), t2c)
+    spans = [(s, e, keys[c]) for c, s, e in spans]
+    return spans
+
+def apply_predictions(text):
+    predictions = model_predict(text)
+    state.set_text(text)
+    for start, end, entity_type in predictions:
+        state.add_annotation(start, end, entity_type)
+    return state.get_display_text()
+
+state = AnnotationState()
+all_keys = [f'"{cmd.key}"' for cmd in state.press_commands]
+key_list_str = f'[{", ".join(all_keys)}]'
+shortcut_js = shortcut_js_template%key_list_str
+        
+
 def postprocess_labels(text, logits, t2c):
     tags = [None for _ in text]
     labels = logits.argmax(-1)
@@ -217,6 +434,7 @@ def get_structured_data(*inputs):
             data.append({
                 'date': date,
                 'timestamp': parser.parse(date),
+                'decision_cat': c,
                 'decision_type': categories[c], 'details': text[s:e]})
     return data
 
@@ -279,7 +497,7 @@ def create_timeline_plot(data: List[Dict[str, Any]]):
     fig.update_layout(height=600)
     return fig
 
-def filter_timeline(decision_type: str, start_date: str, end_date: str) -> px.scatter:
+def filter_timeline(decision_types: str, start_date: str, end_date: str) -> px.scatter:
     global structured_data
     filtered_data = structured_data
     if 'All' not in decision_types:
@@ -294,59 +512,33 @@ def filter_timeline(decision_type: str, start_date: str, end_date: str) -> px.sc
 def generate_summary(*inputs) -> str:
     global structured_data
     structured_data = get_structured_data(*inputs)
-    decision_types = {}
-    for event in structured_data:
-        decision_type = event['decision_type']
-        decision_types[decision_type] = decision_types.get(decision_type, 0) + 1
     
-    summary = "Decision Type Summary:\n"
-    for decision_type, count in decision_types.items():
-        summary += f"{decision_type}: {count}\n"
-    return summary, create_timeline_plot(structured_data)
+    dates = defaultdict(lambda: defaultdict(list))
+    for event in structured_data:
+        dates[event['date']][event['decision_cat']].append(event['details'])
+
+    out = ""
+    for date in sorted(dates.keys(), key = lambda x: parser.parse(x)):
+        out += f'## **[{date}]**\n\n'
+        decs = dates[date]
+        for c in decs:
+            out += f'### {unicode_symbols[c]} ***{categories[c]}***\n\n'
+            for dec in decs[c]:
+                out += f'{dec}\n\n'
+    return out, create_timeline_plot(structured_data)
 
 global sum_c
 sum_c = 1
-SUM_INPUTS = 20
 structured_data = []
 
 device = model.backbone.device
-# colors = ['aqua', 'blue', 'fuchsia', 'teal', 'green', 'olive', 'lime', 'silver', 'purple', 'red',
-#         'yellow', 'navy', 'gray', 'white', 'maroon', 'black']
-colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd']
-
-color_map = {cat: colors[i] for i,cat in enumerate(categories)}
-
-det_desc = ['Admit, discharge, follow-up, referral', 
-        'Ordering test, consulting colleague, seeking external information',
-        'Diagnostic conclusion, evaluation of health state, etiological inference, prognostic judgment',
-        'Quantitative or qualitative',
-        'Start, stop, alter, maintain, refrain',
-        'Start, stop, alter, maintain, refrain',
-        'Positive, negative, ambiguous test results',
-        'Transfer responsibility, wait and see, change subject',
-        'Advice or precaution',
-        'Sick leave, drug refund, insurance, disability']
-
-desc = '### Zones (categories)\n'
-desc += '| | |\n| --- | --- |\n'
-for i,cat in enumerate(categories):
-    desc += f'| {unicode_symbols[i]} **{cat}** | {det_desc[i]}|\n'
-
-#colors
-#markdown labels
-#legend and desc
-#css font-size
-css = '.category-legend {border:1px dashed black;}'\
-        '.text-sm {font-size: 1.5rem; line-height: 200%;}'\
-        '.gr-sample-textbox {width: 1000px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}'\
-        '.text-limit label textarea {height: 150px !important; overflow: scroll; }'\
-        '.text-gray-500 {color: #111827; font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em;'\
-                'line-height: 1.6;}'\
-        '#sum-out {border: 2px solid #007bff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);'
-title='Clinical Decision Zoning'
-with gr.Blocks(title=title, css=css) as demo:
-    gr.Markdown(f'# {title}')
+
+with gr.Blocks(head=shortcut_js,
+                title='MedDecXtract', css=css) as demo:
+    gr.Image('assets/logo.png', height=100, container=False, show_download_button=False)
+    gr.Markdown(title)
     with gr.Tab("Label a Clinical Note"):
+        gr.Markdown(label_desc)
         with gr.Row():
             with gr.Column():
                 gr.Markdown("## Enter a Discharge Summary or Clinical Note"),
@@ -359,33 +551,18 @@ with gr.Blocks(title=title, css=css) as demo:
                 gr.Markdown("## Labeled Summary or Note"),
                 text_out = gr.Highlight(label="", combine_adjacent=True, show_legend=False, color_map=color_map)
         gr.Examples(text_examples, inputs=text_input)
-    with gr.Tab("Summarize Patient History"):
-        with gr.Row():
-            with gr.Column():
-                sum_inputs = [gr.Text(label='Clinical Note 1', elem_classes='text-limit')]
-                sum_inputs.extend([gr.Text(label='Clinical Note %d'%i, visible=False, elem_classes='text-limit')
-                    for i in range(2, SUM_INPUTS + 1)])
-                sum_btn = gr.Button('Run')
-                with gr.Row():
-                    ex_add = gr.Button("+")
-                    ex_sub = gr.Button("-")
-                upload = gr.File(label='Upload clinical notes', file_types=['text'], file_count='multiple')
-                gr.Examples(sum_examples, inputs=upload,
-                        fn = update_inputs, outputs=sum_inputs, run_on_click=True)
-            with gr.Column():
-                gr.Markdown("## Summarized Clinical Decision History")
-                sum_out = gr.Markdown(elem_id='sum-out')
-    with gr.Tab("Timeline Visualization Tool"):
+    with gr.Tab("Patient History Visualization"):
+        gr.Markdown(vis_desc)
         with gr.Column():
-            sum_inputs2 = [gr.Text(label='Clinical Note 1', elem_classes='text-limit')]
-            sum_inputs2.extend([gr.Text(label='Clinical Note %d'%i, visible=False, elem_classes='text-limit')
+            sum_inputs = [gr.Text(label='Clinical Note 1', elem_classes='text-limit')]
+            sum_inputs.extend([gr.Text(label='Clinical Note %d'%i, visible=False, elem_classes='text-limit')
                 for i in range(2, SUM_INPUTS + 1)])
             with gr.Row():
-                ex_add2 = gr.Button("+")
-                ex_sub2 = gr.Button("-")
-            upload2 = gr.File(label='Upload clinical notes', file_types=['text'], file_count='multiple')
-            gr.Examples(sum_examples, inputs=upload2,
-                    fn = update_inputs, outputs=sum_inputs2, run_on_click=True)
+                ex_add = gr.Button("+")
+                ex_sub = gr.Button("-")
+            upload = gr.File(label='Upload clinical notes', file_types=['text'], file_count='multiple')
+            gr.Examples(sum_examples, inputs=upload,
+                    fn = update_inputs, outputs=sum_inputs, run_on_click=True)
         with gr.Column():
             with gr.Row():
                 decision_type = gr.Dropdown(["All"] + categories,
@@ -399,19 +576,102 @@ with gr.Blocks(title=title, css=css) as demo:
             timeline_plot = gr.Plot()
             
             summary_button = gr.Button("Generate Summary")
-            summary_output = gr.Textbox(label="Summary")
+            with gr.Accordion('Summary'):
+                summary_output = gr.Markdown(elem_id='sum-out') #gr.Textbox(label="Summary")
+    with gr.Tab("Interactive Text Annotator"):
+        gr.Markdown(annotator_desc)
+        with gr.Row():
+            with gr.Column():
+                annot_text_input = gr.Textbox(
+                    label="Enter Text to Annotate",
+                    placeholder="Enter or paste text here...",
+                    lines=5,
+                    elem_id='annot_text_input'
+                )
+                gr.Examples(text_examples, inputs=annot_text_input) 
+                msg_output = gr.Textbox(label="Status Messages", interactive=False)
+            display_area = gr.HTML(
+                label="Annotated Text",
+                value="<div id='annotated-text'><i>Output box</i></div>"
+            )
+        
+        k = 3  # Set the maximum number of buttons per row
+        num_buttons = len(state.press_commands)
+        rows = (num_buttons + k - 1) // k
+        entity_buttons = []
+        with gr.Group():
+            predict_btn = gr.Button("Generate Predictions", size='lg', variant='primary')
+            for i in range(rows):
+                with gr.Row():
+                    for j in range(min(k, num_buttons - i * k)):
+                        real_idx = i * k + j
+                        cmd = state.press_commands[real_idx]
+                        entity_buttons.append(
+                            gr.Button(f"{cmd.symbol} {cmd.name} ({cmd.key})",
+                                    elem_id=f'btn_{cmd.key}',
+                                    size='sm'))
+                    if i == (rows - 1):
+                        remove_btn = gr.Button("Remove (q)", size='sm', variant='secondary', elem_id='btn_q')
+                        undo_btn = gr.Button("Undo (z)", size='sm', elem_id='btn_z')
+            clear_btn = gr.Button("Clear Annotations", size='lg', variant='stop')
+
+        
+        with gr.Accordion("Download/View Annotations \U0001F4BE", open=False): # Combined Accordion
+            with gr.Row():
+                annotator_id = gr.Textbox(label="Annotator ID", placeholder="Enter your annotator ID")
+                discharge_summary_id = gr.Textbox(label="Discharge Summary ID", placeholder="Enter the discharge summary ID")
+            
+            with gr.Row():
+                download_file = gr.File(interactive=False, visible=True, label="Download") # download_btn renamed and made into gr.File
+                annotations_json = gr.JSON(label="Annotations JSON")
+            
+            refresh_btn = gr.Button("🔄 Refresh Annotations", elem_id="refresh_btn") # Renamed for clarity
+            download_btn = gr.Button("Download Annotated Text", elem_id="download_btn") # Added a button to trigger download
+
+        
+        # Hidden state components for selection
+        selection_start = gr.Number(value=0, visible=False)
+        selection_end = gr.Number(value=0, visible=False)
+
     gr.Markdown(desc)
 
     # Functions
+    # Wire up event handlers
+    annot_text_input.change(init_text, annot_text_input, display_area)
+    
+    # Wire up the buttons with the selection JavaScript
+    for btn, cmd in zip(entity_buttons, state.press_commands):
+        btn.click(lambda s=None, e=None, c=cmd.key: add_entity(c, s, e),[selection_start, selection_end], [display_area, msg_output], js=select_js).then(
+        lambda: gr.update(interactive=state.annotations == [], elem_classes=[] if state.annotations == [] else ['locked-input']),  # Disable input if annotations exist
+        outputs=annot_text_input
+    )
+        
+    remove_btn.click( remove_entity, [selection_start, selection_end], [display_area, msg_output], js=select_js).then(
+        lambda: gr.update(interactive=state.annotations == [], elem_classes=[] if state.annotations == [] else ['locked-input']),
+        outputs=annot_text_input
+    )
+    
+    undo_btn.click(undo, None, [display_area, msg_output]).then(
+        lambda: gr.update(interactive=state.annotations == [], elem_classes=[] if state.annotations == [] else ['locked-input']),
+        outputs=annot_text_input
+    )
+    
+    download_btn.click(download_annotations, [annotator_id, discharge_summary_id], download_file) # Output to download_file
+    refresh_btn.click(refresh_annotations, [annotator_id, discharge_summary_id], annotations_json) # No change in functionality
+
+
+    clear_btn.click(clear_annotations, outputs=[annot_text_input, display_area])
+
+    predict_btn.click(apply_predictions, annot_text_input, display_area).then(
+        lambda: gr.update(interactive=state.annotations == [], elem_classes=[] if state.annotations == [] else ['locked-input']),
+        outputs=text_input
+    )
+
     text_input.submit(process, inputs=text_input, outputs=text_out)
     text_btn.click(process, inputs=text_input, outputs=text_out)
     upload.change(update_inputs, inputs=upload, outputs=sum_inputs)
-    upload2.change(update_inputs, inputs=upload2, outputs=sum_inputs2)
     ex_add.click(add_ex, inputs=sum_inputs, outputs=sum_inputs)
     ex_sub.click(sub_ex, inputs=sum_inputs, outputs=sum_inputs)
-    ex_add2.click(add_ex, inputs=sum_inputs2, outputs=sum_inputs2)
-    ex_sub2.click(sub_ex, inputs=sum_inputs2, outputs=sum_inputs2)
-    sum_btn.click(process_sum, inputs=sum_inputs, outputs=sum_out)
     filter_button.click(filter_timeline, inputs=[decision_type, start_date, end_date], outputs=timeline_plot)
-    summary_button.click(generate_summary, inputs=sum_inputs2, outputs=[summary_output, timeline_plot])
+    summary_button.click(generate_summary, inputs=sum_inputs, outputs=[summary_output, timeline_plot])
 demo.launch(share=True)

demo_assets.py

@@ -1,3 +1,7 @@
+OTHERS_ID = 18
+SUM_INPUTS = 20
+OUTPUT_PATH = 'meddec_annots.json'
+
 sum_examples = [
         [['examples/note%d.txt'%i for i in range(1,n)]]
         for n in range(5,1, -1)
@@ -18,3 +22,199 @@ text_examples = [
             "..."
             "Call your PCP or return to the ED for fevers/chills/shakes, chest pain, shortness of breath, pain at the site of your dialysis catheter, nausea, vomiting, or swelling in your legs/feet. "]
             ]
+
+keys = ['c', 'g', 'p', 't', 'd', 'p', 'e', 'f', 'a', 'l']
+categories = ['Contact related', 'Gathering additional information', 'Defining problem',
+        'Treatment goal', 'Drug related', 'Therapeutic procedure related', 'Evaluating test result',
+        'Deferment', 'Advice and precaution', 'Legal and insurance related']
+det_desc = ['Admit, discharge, follow-up, referral', 
+        'Ordering test, consulting colleague, seeking external information',
+        'Diagnostic conclusion, evaluation of health state, etiological inference, prognostic judgment',
+        'Quantitative or qualitative',
+        'Start, stop, alter, maintain, refrain',
+        'Start, stop, alter, maintain, refrain',
+        'Positive, negative, ambiguous test results',
+        'Transfer responsibility, wait and see, change subject',
+        'Advice or precaution',
+        'Sick leave, drug refund, insurance, disability']
+unicode_symbols = [
+        "\U0001F91D",  # Handshake
+        "\U0001F50D",  # Magnifying glass
+        "\U0001F9E9",  # Puzzle piece
+        "\U0001F3AF",  # Target
+        "\U0001F48A",  # Pill
+        "\U00002702",  # Surgical scissors
+        "\U0001F9EA",  # Test tube
+        "\U000023F0",  # Alarm clock
+        "\U000026A0",  # Warning sign
+        "\U0001F4C4"   # Document
+        ]
+
+colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd']
+
+color_map = {cat: colors[i] for i,cat in enumerate(categories)}
+
+
+annotator_desc = """
+## Interactive Text Annotator
+
+This tool allows you to manually annotate medical text for detailed analysis and model training.  Follow these steps:
+
+1. **Input Text:** Enter or paste the text you want to annotate into the text box. You can also use the provided examples.
+2. **Generate Predictions (Optional):** Click "Generate Predictions" to pre-annotate the text using a machine learning model. This can serve as a starting point, which you can then review and modify.  Note: Generating predictions will lock the input textbox to prevent accidental edits.
+3. **Select Text:** In the **output box below**, highlight the portion of the text you wish to annotate.
+4. **Annotate:** Click one of the category buttons to apply the annotation to the selected text. The selected text will be highlighted with the corresponding color.
+5. **Remove/Undo:**
+    * **Remove (q):** Click "Remove" or press 'q' to remove the annotation from the selected text.
+    * **Undo (z):** Click "Undo" or press 'z' to revert the last annotation action.
+6. **Download/View Annotations:**
+    * **Annotator ID & Discharge Summary ID:** Enter an identifier for the annotator and an optional ID for the discharge summary. These IDs will be included in the downloaded JSON data.
+    * **Refresh Annotations:** Click "Refresh Annotations" to display the current annotations in JSON format.
+    * **Download Annotated Text:** Click "Download Annotated Text" to save your annotations as a JSON file.
+7. **Clear Annotations:** Click "Clear Annotations" to remove all annotations and start over. This will also unlock the input textbox.
+
+
+**Keyboard Shortcuts:**
+
+* Use the keys indicated on the buttons to annotate selections.
+* `q`: Remove annotation
+* `z`: Undo last action
+"""
+
+label_desc = """
+## Label a Clinical Note
+
+This tool allows you to quickly identify and categorize key clinical decisions within a single clinical note.
+
+1. **Input Text:** Enter or paste the clinical note into the text box. You can also select from the provided examples.
+2. **Run:** Click the "Run" button to process the text.
+3. **View Results:** The labeled output will be displayed, highlighting the identified clinical decisions with color-coded categories.
+
+This provides a simplified overview of the patient's history and key decisions at a glance.
+"""
+vis_desc = """
+## Patient History Visualization
+
+This tool allows you to visualize the timeline of clinical decisions across multiple clinical notes for a single patient.
+
+1. **Upload Clinical Notes:** Upload multiple clinical notes in text format. You can also select from the provided examples.
+2. **Add/Remove Notes:** Use the "+" and "-" buttons to add or remove input fields for additional notes.
+3. **Filter Timeline:**
+    * **Decision Type:** Select one or more decision types from the dropdown menu to filter the timeline. Select "All" to display all decision types.
+    * **Start/End Date:** Enter a start and end date (MM/DD/YYYY) to filter the timeline by date range.
+    * **Filter:** Click the "Filter Timeline" button to apply the selected filters.
+4. **Generate Summary:** Click the "Generate Summary" button to generate a summarized view of the clinical decisions organized by date and category. This will also update the timeline plot.
+5. **View Timeline:** The interactive timeline plot displays the clinical decisions over time. Hover over each data point to view details.
+
+This visualization helps to understand the progression of clinical decisions and identify trends in patient care.
+"""
+
+
+title = """
+<h1 style="text-align: center;">Medical Decisions Extraction, Visualization, and Annotation</h1>
+
+<p style="font-size:1.2em;">This application offers three interactive tools for working with clinical text data:</p>
+<p style="font-size:1.2em;">1. <b>Label a Clinical Note:</b> Process individual notes and receive highlighted key clinical decisions.</br>
+2. <b>Patient History Visualization:</b> Upload multiple notes to visualize the timeline of decisions.</br>
+3. <b>Interactive Text Annotator:</b> Manually annotate text for detailed analysis and model training.</p>
+"""
+
+desc = '### Decision Categories\n'
+desc += '| | |\n| --- | --- |\n'
+for i,cat in enumerate(categories):
+    desc += f'| {unicode_symbols[i]} **{cat}** | {det_desc[i]}|\n'
+
+shortcut_js_template = """
+<script>
+function shortcuts(e) {
+switch (e.target.tagName.toLowerCase()) {
+        case "input":
+        case "textarea":
+        break;
+        default:
+        if (e.key.toLowerCase() === 'q') {
+                document.getElementById('btn_q').click();
+        } else if (e.key.toLowerCase() === 'z') {
+                document.getElementById('btn_z').click();
+        } else {
+                const buttonKeys = %s;
+                for (const key of buttonKeys) {
+                if (e.key.toLowerCase() === key) {
+                        document.getElementById(`btn_${key}`).click();
+                        break;
+                }
+                }
+        }
+}
+}
+document.addEventListener('keypress', shortcuts, false);
+</script>
+"""
+
+# JavaScript for handling text selection
+select_js = """
+function(x) {
+const element = document.getElementById('annotated-text');
+if (!element) {
+        console.log("Element not found");
+        return [0, 0];
+}
+
+const selection = window.getSelection();
+if (!selection.rangeCount) {
+        console.log("No selection found");
+        return [0, 0];
+}
+
+const range = selection.getRangeAt(0);
+
+if (!element.contains(range.commonAncestorContainer)) {
+        console.log("Selection not within element");
+        return [0, 0];
+}
+
+const start = getCharacterOffset(element, range.startContainer, range.startOffset);
+const end = getCharacterOffset(element, range.endContainer, range.endOffset);
+
+
+console.log("Selection:", start, end);
+return [start, end];
+
+
+function getCharacterOffset(root, node, offset) {
+        let currentOffset = 0;
+
+        const iterator = document.createNodeIterator(root, NodeFilter.SHOW_TEXT);
+        let currentNode;
+
+        while (currentNode = iterator.nextNode()) {
+        if (currentNode === node) {
+                return currentOffset + offset;
+        }
+        currentOffset += currentNode.textContent.length;
+        }
+        return currentOffset;
+}
+}
+"""
+
+css="""
+.category-legend {border:1px dashed black;}
+.text-sm {font-size: 1.5rem; line-height: 200%;}
+.gr-sample-textbox {width: 1000px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+.gallery {width: 1000px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+.text-limit label textarea {height: 150px !important; overflow: scroll; }
+.text-gray-500 {color: #111827; font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; 'line-height: 1.6;}
+#sum-out {border: 2px solid #007bff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); max-height: 300px; overflow-y: auto;}
+#annotated-text { font-family: monospace; padding: 10px; border: 1px solid #ccc; }
+#refresh_btn { max-width: 20px; max-height: 40px;}
+.locked-input { background-color: #f0f0f0; border: 1px solid #ccc; pointer-events: none; }
+body {
+  --text-sm: 12px;
+  --text-md: 16px;
+  --text-lg: 18px;
+  --input-text-size: 16px;
+  --section-text-size: 16px;
+  --input-background: --neutral-50;
+  }
+"""