demo/ClinicalNote.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Clinical Note: Medication, Condition, and Adverse Reaction\n",
    "#### Named Entity, Entity Attributes, and Entity Relation Visualization"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ie_viz import serve, render"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We use a sample clinical note generated by GPT-4o."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "text = \"\"\"\n",
    "Dr. Emily Johnson, a cardiologist at Green Valley Hospital, recently treated a 45-year-old male patient with \n",
    "a history of hypertension and Type 2 diabetes. The patient was prescribed Lisinopril, 10 mg once daily, to manage his blood pressure, \n",
    "and Metformin, 500 mg twice daily, for glucose control. During a follow-up visit, the patient reported occasional dizziness and fatigue. \n",
    "After reviewing the symptoms, Dr. Johnson decided to adjust the Lisinopril dosage to 5 mg and advised the patient to monitor his \n",
    "blood pressure levels closely over the next two weeks.\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Define entities. It must be a list of dictionaries. Each dictionary must has ```entity_id```, ```start```, ```end``` keys. ```attr``` key is an optional dictionary."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "entities = [\n",
    "            {'entity_id': '0', 'start': 124, 'end': 136, 'attr': {'Type': 'condition'}}, \n",
    "            {'entity_id': '1', 'start': 141, 'end': 156, 'attr': {'Type': 'condition'}}, \n",
    "            {'entity_id': '2', 'start': 185, 'end': 195, 'attr': {'Type': 'medication', 'Dosage': '10 mg', 'Frequency': 'once daily'}}, \n",
    "            {'entity_id': '3', 'start': 250, 'end': 259, 'attr': {'Type': 'medication', 'Dosage': '500 mg', 'Frequency': 'twice daily'}}, \n",
    "            {'entity_id': '4', 'start': 360, 'end': 369, 'attr': {'Type': 'adverse_reaction'}}, \n",
    "            {'entity_id': '5', 'start': 374, 'end': 381, 'attr': {'Type': 'adverse_reaction'}}\n",
    "           ]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Define relations. It must be a list of dictionaries with ```entity_1_id``` and ```entity_2_id```. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "relations = [\n",
    "             {'entity_1_id': '2', 'entity_2_id': '4'}, \n",
    "             {'entity_1_id': '2', 'entity_2_id': '5'}, \n",
    "             {'entity_1_id': '3', 'entity_2_id': '4'}, \n",
    "             {'entity_1_id': '3', 'entity_2_id': '5'}\n",
    "            ]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If using non-interactive environment, the an option is to use ```ie_viz.serve()``` function to start a Flask App. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name 'serve' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
      "Cell \u001b[0;32mIn[1], line 1\u001b[0m\n\u001b[0;32m----> 1\u001b[0m \u001b[43mserve\u001b[49m(text, entities, relations, host\u001b[38;5;241m=\u001b[39m\u001b[38;5;124m'\u001b[39m\u001b[38;5;124m0.0.0.0\u001b[39m\u001b[38;5;124m'\u001b[39m, port\u001b[38;5;241m=\u001b[39m\u001b[38;5;241m5000\u001b[39m)\n",
      "\u001b[0;31mNameError\u001b[0m: name 'serve' is not defined"
     ]
    }
   ],
   "source": [
    "serve(text, entities, relations, host='0.0.0.0', port=5000)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here, we use the ```ie_viz.render()``` function to get HTML and display in Jupyter notebook with ```IPython.display```. "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Display entities only (minimal display)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "html_content = render(text, entities)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <iframe srcdoc=\"\n",
       "    &lt;html&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;title&gt;Named Entity Visualization&lt;/title&gt;\n",
       "        &lt;style&gt;\n",
       "        /* Default (Light) Theme */\n",
       ":root {\n",
       "    --background-color: #ffffff;\n",
       "    --text-color: #000000;\n",
       "    --path-color: #000208;\n",
       "    --tooltip-background-color: #333333;\n",
       "    --icon-color: #000000;\n",
       "}\n",
       "\n",
       "/* Dark Theme */\n",
       "body.dark-theme {\n",
       "    --background-color: #1f1f1f;\n",
       "    --text-color: #ffffff;\n",
       "    --path-color: #9C27B0;\n",
       "    --tooltip-background-color: #444444;\n",
       "    --icon-color: #ffffff;\n",
       "}\n",
       "\n",
       "body {\n",
       "    background-color: var(--background-color);\n",
       "    color: var(--text-color);\n",
       "}\n",
       "\n",
       ".entity-mark {\n",
       "    padding-right: 0.3em;\n",
       "    padding-left: 0.3em;\n",
       "    padding-top: 0.05em;\n",
       "    padding-bottom: 0.05em;\n",
       "    margin: 0 0.1em;\n",
       "    line-height: 1;\n",
       "    border-radius: 0.35em;\n",
       "    background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);\n",
       "    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */\n",
       "    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */\n",
       "} \n",
       "\n",
       "\n",
       "\n",
       ".custom-tooltip {\n",
       "    word-wrap: break-word; /* Ensures long words break into the next line */\n",
       "    overflow-wrap: break-word; /* Ensures content stays within bounds */\n",
       "    box-sizing: border-box; /* Ensures padding/borders don&#x27;t affect width calculations */\n",
       "    position: absolute;\n",
       "    background-color: var(--tooltip-background-color);\n",
       "    color: #fff;\n",
       "    padding: 8px; /* Slightly larger padding */\n",
       "    border-radius: 8px; /* More rounded corners */\n",
       "    z-index: 6;\n",
       "    white-space: normal;\n",
       "    pointer-events: none;\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */\n",
       "    transition: opacity 0.3s ease; /* Smooth transition for opacity */\n",
       "    opacity: 0.8; /* Slightly transparent */\n",
       "}\n",
       "\n",
       "#display-textbox {\n",
       "    width: 100%;\n",
       "    z-index: 1;\n",
       "    word-wrap: break-word;\n",
       "    overflow-wrap: break-word;\n",
       "    white-space: normal;\n",
       "    position: absolute;\n",
       "    line-height: 1.5;\n",
       "    padding: 1.5rem;\n",
       "    \n",
       "    /* Add white background, shadow and rounded corners */\n",
       "    background-color: var(--background-color);\n",
       "    border-radius: 12px;\n",
       "    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",
       "    \n",
       "    /* Hide horizontal scrollbar and only show vertical when needed */\n",
       "    overflow-x: hidden;\n",
       "    overflow-y: auto;\n",
       "}\n",
       "\n",
       "\n",
       "#display-relation {\n",
       "    width: 100%;\n",
       "    position: absolute;\n",
       "    z-index: 2;\n",
       "    pointer-events: none; /* Make the SVG non-interactive */\n",
       "    top: 0; \n",
       "    left: 0; \n",
       "}\n",
       "\n",
       ".relation-path {\n",
       "    opacity: 0.6;\n",
       "\tstroke: var(--path-color);\n",
       "    stroke-width: 2; /* Set the stroke width */\n",
       "    fill: none; /* Ensure the path is not filled */\n",
       "}\n",
       "\n",
       "#display-textbox-container {\n",
       "    left: 0%;\n",
       "    width: 95%;\n",
       "    height: 95%;\n",
       "    position: absolute;\n",
       "    transition: width 0.3s ease-in-out; \n",
       "}\n",
       "\n",
       "\n",
       ".theme-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 0.5rem; /* Position it at the leftmost position */\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".theme-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       "\n",
       ".filters-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 2.5rem;\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".filters-button svg {\n",
       "    width: 100%;\n",
       "    height: 100%;\n",
       "}\n",
       "\n",
       ".filters-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       ".filters-panel {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    width: 33.333%;\n",
       "    height: 100%;\n",
       "    background-color: var(--background-color);\n",
       "    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n",
       "    transform: translateX(-100%);\n",
       "    transition: transform 0.3s ease-in-out;\n",
       "    z-index: 5;\n",
       "    overflow-y: auto;\n",
       "}\n",
       "\n",
       ".filters-panel.open {\n",
       "    transform: translateX(0);\n",
       "}\n",
       "\n",
       ".filters-overlay {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    width: 100%;\n",
       "    height: 100%;\n",
       "    background-color: rgba(0, 0, 0, 0.5);\n",
       "    opacity: 0;\n",
       "    visibility: hidden;\n",
       "    transition: all 0.3s ease-in-out;\n",
       "    z-index: 4;\n",
       "}\n",
       "\n",
       ".filters-overlay.open {\n",
       "    opacity: 1;\n",
       "    visibility: visible;\n",
       "}\n",
       "\n",
       ".filter-section {\n",
       "    border-bottom: 1px solid rgba(128, 128, 128, 0.2);\n",
       "    padding-bottom: 1rem;\n",
       "}\n",
       "\n",
       ".filter-section:last-child {\n",
       "    border-bottom: none;\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;] {\n",
       "    cursor: pointer;\n",
       "}\n",
       "\n",
       ".filter-section label {\n",
       "    cursor: pointer;\n",
       "    user-select: none;\n",
       "}\n",
       "\n",
       "/* Customize checkboxes */\n",
       ".filter-section input[type=&quot;checkbox&quot;] {\n",
       "    appearance: none;\n",
       "    -webkit-appearance: none;\n",
       "    width: 16px;\n",
       "    height: 16px;\n",
       "    border: 2px solid var(--text-color);\n",
       "    border-radius: 3px;\n",
       "    outline: none;\n",
       "    vertical-align: middle;\n",
       "    position: relative;\n",
       "    margin-right: 8px;\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;]:checked {\n",
       "    background-color: var(--text-color);\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;]:checked::before {\n",
       "    content: &quot;✓&quot;;\n",
       "    position: absolute;\n",
       "    color: var(--background-color);\n",
       "    font-size: 12px;\n",
       "    top: 50%;\n",
       "    left: 50%;\n",
       "    transform: translate(-50%, -50%);\n",
       "}\n",
       "\n",
       ".attribute-filters {\n",
       "    color: var(--text-color);\n",
       "}\n",
       "\n",
       "/* Toggle Switch Styles */\n",
       ".toggle-switch {\n",
       "    position: relative;\n",
       "    display: inline-block;\n",
       "    width: 48px;\n",
       "    height: 24px;\n",
       "    margin-left: 10px;\n",
       "}\n",
       "\n",
       ".toggle-switch input {\n",
       "    opacity: 0;\n",
       "    width: 0;\n",
       "    height: 0;\n",
       "}\n",
       "\n",
       ".toggle-slider {\n",
       "    position: absolute;\n",
       "    cursor: pointer;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    right: 0;\n",
       "    bottom: 0;\n",
       "    background-color: rgba(128, 128, 128, 0.3);\n",
       "    transition: .4s;\n",
       "    border-radius: 24px;\n",
       "}\n",
       "\n",
       ".toggle-slider:before {\n",
       "    position: absolute;\n",
       "    content: &quot;&quot;;\n",
       "    height: 18px;\n",
       "    width: 18px;\n",
       "    left: 3px;\n",
       "    bottom: 3px;\n",
       "    background-color: var(--background-color);\n",
       "    transition: .4s;\n",
       "    border-radius: 50%;\n",
       "}\n",
       "\n",
       ".toggle-switch input:checked + .toggle-slider {\n",
       "    background-color: var(--text-color);\n",
       "}\n",
       "\n",
       ".toggle-switch input:checked + .toggle-slider:before {\n",
       "    transform: translateX(24px);\n",
       "}\n",
       "\n",
       ".logic-toggle {\n",
       "    font-size: 0.9em;\n",
       "    opacity: 0.9;\n",
       "}\n",
       "\n",
       ".table-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       ".table-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 4.5rem;\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".table-panel {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    right: 0;\n",
       "    width: 50%;\n",
       "    height: 100%;\n",
       "    background-color: var(--background-color);\n",
       "    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);\n",
       "    transform: translateX(100%);\n",
       "    transition: transform 0.3s ease-in-out;\n",
       "    z-index: 5;\n",
       "    overflow-y: auto;\n",
       "    padding: 2rem;\n",
       "}\n",
       "\n",
       ".table-close-button {\n",
       "    position: absolute;\n",
       "    top: 1rem;\n",
       "    right: 1rem;\n",
       "    background: none;\n",
       "    border: none;\n",
       "    cursor: pointer;\n",
       "    padding: 0.5rem;\n",
       "    color: inherit;\n",
       "    border-radius: 0.25rem;\n",
       "}\n",
       "\n",
       ".table-close-button:hover {\n",
       "    background-color: rgba(0, 0, 0, 0.1);\n",
       "}\n",
       "\n",
       ".dark-theme .table-close-button:hover {\n",
       "    background-color: rgba(255, 255, 255, 0.1);\n",
       "}\n",
       "\n",
       ".table-panel.open {\n",
       "    transform: translateX(0);\n",
       "}\n",
       "\n",
       ".table-panel table {\n",
       "    width: 100%;\n",
       "    border-collapse: separate;\n",
       "    border-spacing: 0;\n",
       "    margin-bottom: 2rem;\n",
       "    border-radius: 8px;\n",
       "    overflow: hidden;\n",
       "    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",
       "}\n",
       "\n",
       ".table-panel th {\n",
       "    background-color: var(--background-color);\n",
       "    color: var(--text-color);\n",
       "    font-weight: 600;\n",
       "    text-transform: uppercase;\n",
       "    font-size: 0.85rem;\n",
       "    letter-spacing: 0.05em;\n",
       "    padding: 0.75rem 1rem;\n",
       "    border-bottom: 2px solid rgba(128, 128, 128, 0.2);\n",
       "    position: sticky;\n",
       "    top: 0;\n",
       "    z-index: 10;\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       ".table-panel td {\n",
       "    padding: 0.5rem 1rem;\n",
       "    border-bottom: 1px solid rgba(128, 128, 128, 0.1);\n",
       "    color: var(--text-color);\n",
       "    font-size: 0.95rem;\n",
       "    line-height: 1.4;\n",
       "    max-width: 300px;\n",
       "    overflow: hidden;\n",
       "    text-overflow: ellipsis;\n",
       "    white-space: nowrap;\n",
       "}\n",
       "\n",
       ".table-panel tr:last-child td {\n",
       "    border-bottom: none;\n",
       "}\n",
       "\n",
       ".table-panel tbody tr:hover {\n",
       "    background-color: rgba(128, 128, 128, 0.05);\n",
       "    transition: background-color 0.2s ease;\n",
       "}\n",
       "\n",
       "/* Add alternating row colors */\n",
       ".table-panel tbody tr:nth-child(even) {\n",
       "    background-color: rgba(128, 128, 128, 0.02);\n",
       "}\n",
       "\n",
       "/* Add responsive scrolling for table content */\n",
       ".table-panel {\n",
       "    scrollbar-width: thin;\n",
       "    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar {\n",
       "    width: 8px;\n",
       "    height: 8px;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar-track {\n",
       "    background: transparent;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar-thumb {\n",
       "    background-color: rgba(128, 128, 128, 0.3);\n",
       "    border-radius: 4px;\n",
       "}\n",
       " \n",
       ".table-panel .table-section h2 {\n",
       "    color: var(--text-color);\n",
       "    font-size: 1.25rem;\n",
       "    font-weight: 600;\n",
       "    margin: 2rem 0 1rem;\n",
       "    padding-bottom: 0.5rem;\n",
       "    border-bottom: 2px solid rgba(128, 128, 128, 0.2);\n",
       "}\n",
       "\n",
       "#display-textbox-container.with-table {\n",
       "    left: 0%;\n",
       "    width: 45%;\n",
       "}\n",
       "\n",
       ".entity-table-mark {\n",
       "    padding-right: 0.3em;\n",
       "    padding-left: 0.3em;\n",
       "    padding-top: 0.05em;\n",
       "    padding-bottom: 0.05em;\n",
       "    margin: 0 0.1em;\n",
       "    line-height: 1;\n",
       "    border-radius: 0.35em;\n",
       "    background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);\n",
       "    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */\n",
       "} \n",
       "\n",
       ".entity-highlight {\n",
       "    text-shadow: 0 0 0.5px currentColor;\n",
       "    font-synthesis: none;\n",
       "    transition: all 0.3s ease;\n",
       "}\n",
       "\n",
       "/* Use the entity&#x27;s background color for glow via JavaScript */\n",
       ".entity-highlight-glow {\n",
       "    box-shadow: 0 0 8px currentColor, 0 0 12px currentColor;\n",
       "} \n",
       "        &lt;/style&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body&gt;\n",
       "        &lt;div id=&quot;display-textbox-container&quot;&gt;\n",
       "            &lt;div id=&quot;display-textbox&quot;&gt;&lt;/div&gt;\n",
       "            &lt;svg id=&quot;display-relation&quot;&gt;&lt;/svg&gt;\n",
       "        &lt;/div&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot;&gt;\n",
       "            // Embed the data as JavaScript variables\n",
       "            const data = {&quot;text&quot;: &quot;\\nDr. Emily Johnson, a cardiologist at Green Valley Hospital, recently treated a 45-year-old male patient with \\na history of hypertension and Type 2 diabetes. The patient was prescribed Lisinopril, 10 mg once daily, to manage his blood pressure, \\nand Metformin, 500 mg twice daily, for glucose control. During a follow-up visit, the patient reported occasional dizziness and fatigue. \\nAfter reviewing the symptoms, Dr. Johnson decided to adjust the Lisinopril dosage to 5 mg and advised the patient to monitor his \\nblood pressure levels closely over the next two weeks.\\n&quot;, &quot;entities&quot;: [{&quot;entity_id&quot;: &quot;0&quot;, &quot;start&quot;: 124, &quot;end&quot;: 136, &quot;attr&quot;: {&quot;Type&quot;: &quot;condition&quot;}}, {&quot;entity_id&quot;: &quot;1&quot;, &quot;start&quot;: 141, &quot;end&quot;: 156, &quot;attr&quot;: {&quot;Type&quot;: &quot;condition&quot;}}, {&quot;entity_id&quot;: &quot;2&quot;, &quot;start&quot;: 185, &quot;end&quot;: 195, &quot;attr&quot;: {&quot;Type&quot;: &quot;medication&quot;, &quot;Dosage&quot;: &quot;10 mg&quot;, &quot;Frequency&quot;: &quot;once daily&quot;}}, {&quot;entity_id&quot;: &quot;3&quot;, &quot;start&quot;: 250, &quot;end&quot;: 259, &quot;attr&quot;: {&quot;Type&quot;: &quot;medication&quot;, &quot;Dosage&quot;: &quot;500 mg&quot;, &quot;Frequency&quot;: &quot;twice daily&quot;}}, {&quot;entity_id&quot;: &quot;4&quot;, &quot;start&quot;: 360, &quot;end&quot;: 369, &quot;attr&quot;: {&quot;Type&quot;: &quot;adverse_reaction&quot;}}, {&quot;entity_id&quot;: &quot;5&quot;, &quot;start&quot;: 374, &quot;end&quot;: 381, &quot;attr&quot;: {&quot;Type&quot;: &quot;adverse_reaction&quot;}}], &quot;theme&quot;: &quot;light&quot;, &quot;light_theme_colors&quot;: [{&quot;color_name&quot;: &quot;blue&quot;, &quot;color_code&quot;: &quot;#1f77b4&quot;}, {&quot;color_name&quot;: &quot;orange&quot;, &quot;color_code&quot;: &quot;#ff7f0e&quot;}, {&quot;color_name&quot;: &quot;green&quot;, &quot;color_code&quot;: &quot;#2ca02c&quot;}, {&quot;color_name&quot;: &quot;red&quot;, &quot;color_code&quot;: &quot;#d62728&quot;}, {&quot;color_name&quot;: &quot;purple&quot;, &quot;color_code&quot;: &quot;#9467bd&quot;}, {&quot;color_name&quot;: &quot;brown&quot;, &quot;color_code&quot;: &quot;#8c564b&quot;}, {&quot;color_name&quot;: &quot;pink&quot;, &quot;color_code&quot;: &quot;#e377c2&quot;}, {&quot;color_name&quot;: &quot;gray&quot;, &quot;color_code&quot;: &quot;#7f7f7f&quot;}, {&quot;color_name&quot;: &quot;yellow-green&quot;, &quot;color_code&quot;: &quot;#bcbd22&quot;}, {&quot;color_name&quot;: &quot;cyan&quot;, &quot;color_code&quot;: &quot;#17becf&quot;}, {&quot;color_name&quot;: &quot;teal&quot;, &quot;color_code&quot;: &quot;#008080&quot;}, {&quot;color_name&quot;: &quot;gold&quot;, &quot;color_code&quot;: &quot;#ffd700&quot;}, {&quot;color_name&quot;: &quot;lavender&quot;, &quot;color_code&quot;: &quot;#e6e6fa&quot;}, {&quot;color_name&quot;: &quot;salmon&quot;, &quot;color_code&quot;: &quot;#fa8072&quot;}, {&quot;color_name&quot;: &quot;turquoise&quot;, &quot;color_code&quot;: &quot;#40e0d0&quot;}, {&quot;color_name&quot;: &quot;magenta&quot;, &quot;color_code&quot;: &quot;#ff00ff&quot;}, {&quot;color_name&quot;: &quot;lime&quot;, &quot;color_code&quot;: &quot;#00ff00&quot;}, {&quot;color_name&quot;: &quot;navy&quot;, &quot;color_code&quot;: &quot;#000080&quot;}, {&quot;color_name&quot;: &quot;beige&quot;, &quot;color_code&quot;: &quot;#f5f5dc&quot;}, {&quot;color_name&quot;: &quot;coral&quot;, &quot;color_code&quot;: &quot;#ff7f50&quot;}], &quot;dark_theme_colors&quot;: [{&quot;color_name&quot;: &quot;deep orange&quot;, &quot;color_code&quot;: &quot;#FF5722&quot;}, {&quot;color_name&quot;: &quot;green&quot;, &quot;color_code&quot;: &quot;#4CAF50&quot;}, {&quot;color_name&quot;: &quot;blue&quot;, &quot;color_code&quot;: &quot;#2196F3&quot;}, {&quot;color_name&quot;: &quot;yellow&quot;, &quot;color_code&quot;: &quot;#FFEB3B&quot;}, {&quot;color_name&quot;: &quot;purple&quot;, &quot;color_code&quot;: &quot;#9C27B0&quot;}, {&quot;color_name&quot;: &quot;light blue&quot;, &quot;color_code&quot;: &quot;#03A9F4&quot;}, {&quot;color_name&quot;: &quot;amber&quot;, &quot;color_code&quot;: &quot;#FFC107&quot;}, {&quot;color_name&quot;: &quot;pink&quot;, &quot;color_code&quot;: &quot;#FF4081&quot;}, {&quot;color_name&quot;: &quot;light green&quot;, &quot;color_code&quot;: &quot;#8BC34A&quot;}, {&quot;color_name&quot;: &quot;orange&quot;, &quot;color_code&quot;: &quot;#FF9800&quot;}, {&quot;color_name&quot;: &quot;deep purple&quot;, &quot;color_code&quot;: &quot;#673AB7&quot;}, {&quot;color_name&quot;: &quot;dark teal&quot;, &quot;color_code&quot;: &quot;#004D40&quot;}, {&quot;color_name&quot;: &quot;midnight blue&quot;, &quot;color_code&quot;: &quot;#191970&quot;}, {&quot;color_name&quot;: &quot;chocolate&quot;, &quot;color_code&quot;: &quot;#D2691E&quot;}, {&quot;color_name&quot;: &quot;dark cyan&quot;, &quot;color_code&quot;: &quot;#008B8B&quot;}, {&quot;color_name&quot;: &quot;crimson&quot;, &quot;color_code&quot;: &quot;#DC143C&quot;}, {&quot;color_name&quot;: &quot;olive&quot;, &quot;color_code&quot;: &quot;#808000&quot;}, {&quot;color_name&quot;: &quot;dark red&quot;, &quot;color_code&quot;: &quot;#8B0000&quot;}, {&quot;color_name&quot;: &quot;steel blue&quot;, &quot;color_code&quot;: &quot;#4682B4&quot;}, {&quot;color_name&quot;: &quot;indigo&quot;, &quot;color_code&quot;: &quot;#4B0082&quot;}]};\n",
       "            \n",
       "            // Original JavaScript logic\n",
       "            class DisplayTextBoxManager {\n",
       "    constructor(light_theme_colors, dark_theme_colors) {\n",
       "        this.light_theme_colors = light_theme_colors;\n",
       "        this.dark_theme_colors = dark_theme_colors;\n",
       "    }\n",
       "\n",
       "\n",
       "    updateEntities(text, entities, currentTheme) {\n",
       "        // Clear current display textbox\n",
       "        var textElement = document.getElementById(&quot;display-textbox&quot;);\n",
       "        textElement.innerHTML = &#x27;&#x27;;\n",
       "\n",
       "        // If no entities\n",
       "        if (!entities || entities.length === 0) {\n",
       "            text.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                textElement.appendChild(document.createTextNode(line));\n",
       "                if (index &lt; array.length - 1) {\n",
       "                    textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                }\n",
       "            });\n",
       "            return null;\n",
       "        }\n",
       "\n",
       "        // Sort entities by start index\n",
       "        entities.forEach(entity =&gt; {\n",
       "            entity.start = parseInt(entity.start);\n",
       "            entity.end = parseInt(entity.end);\n",
       "        });\n",
       "        entities.sort((a, b) =&gt; a.start - b.start);\n",
       "\n",
       "        // Add entities to the display textbox\n",
       "        var lastIndex = 0;\n",
       "        entities.forEach(entity =&gt; {\n",
       "            // Add text before the entity\n",
       "            if (lastIndex &lt; entity.start) {\n",
       "                var nonEntityText = text.substring(lastIndex, entity.start);\n",
       "                nonEntityText.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                    textElement.appendChild(document.createTextNode(line));\n",
       "                    if (index &lt; array.length - 1) {\n",
       "                        textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                    }\n",
       "                });\n",
       "            }\n",
       "\n",
       "            // Add the entity text\n",
       "            var entityText = text.substring(entity.start, entity.end);\n",
       "            var entityElement = document.createElement(&quot;mark&quot;);\n",
       "            entityElement.id = entity.entity_id;\n",
       "            entityElement.setAttribute(&#x27;entity-id&#x27;, entity.entity_id);\n",
       "            entityElement.className = &quot;entity-mark&quot;;\n",
       "            entityElement.textContent = entityText;\n",
       "            entityElement.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, true));\n",
       "            entityElement.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, false));\n",
       "\n",
       "            // Assign entity color. If no color is provided, use the default background color in CSS\n",
       "            if (entity.color !== undefined) {\n",
       "                entityElement.style.background = &#x27;none&#x27;;\n",
       "                // if entity.color is a string, use it as the background color\n",
       "                if (typeof entity.color === &#x27;string&#x27;) {\n",
       "                    entityElement.style.backgroundColor = entity.color;\n",
       "                }\n",
       "                // if entity.color is a integer, use it as the index of the color palette\n",
       "                else if (typeof entity.color === &#x27;number&#x27;) {\n",
       "                    if (currentTheme === &#x27;light&#x27;) {\n",
       "                        entityElement.style.backgroundColor = this.light_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                    }\n",
       "                    else {\n",
       "                        entityElement.style.backgroundColor = this.dark_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            entityElement.addEventListener(&#x27;mouseenter&#x27;, (event) =&gt; {\n",
       "                if (entity.attr) {\n",
       "                    const prettyAttributes = JSON.stringify(entity.attr, null, 2).replace(/\\n/g, &#x27;&lt;br&gt;&#x27;).replace(/  /g, &#x27;&amp;nbsp;&amp;nbsp;&#x27;);\n",
       "                    this.showTooltip(event, `Entity ID: ${entity.entity_id}&lt;br&gt;Text: ${entityText}&lt;br&gt;Attributes: ${prettyAttributes}`);\n",
       "                }\n",
       "                else {\n",
       "                    this.showTooltip(event, `Entity ID: ${entity.entity_id}&lt;br&gt;Text: ${entityText}`);\n",
       "                }\n",
       "            });\n",
       "\n",
       "            entityElement.addEventListener(&#x27;mouseleave&#x27;, (event) =&gt; {\n",
       "                this.hideTooltip();\n",
       "            });\n",
       "            textElement.appendChild(entityElement);\n",
       "\n",
       "            lastIndex = entity.end;\n",
       "            });\n",
       "\n",
       "            // Add remaining text after the last entity\n",
       "            if (lastIndex &lt; text.length) {\n",
       "                var remainingText = text.substring(lastIndex);\n",
       "                remainingText.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                    textElement.appendChild(document.createTextNode(line));\n",
       "                    if (index &lt; array.length - 1) {\n",
       "                        textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                    }\n",
       "                });\n",
       "            }\n",
       "    }\n",
       "\n",
       "    \n",
       "    showTooltip(event, content) {\n",
       "        // Remove any existing tooltip\n",
       "        var existingTooltip = document.getElementById(&quot;custom-tooltip&quot;);\n",
       "        if (existingTooltip) {\n",
       "            existingTooltip.remove();\n",
       "        }\n",
       "\n",
       "        // Create a new tooltip\n",
       "        var tooltip = document.createElement(&quot;div&quot;);\n",
       "        tooltip.id = &quot;custom-tooltip&quot;;\n",
       "        tooltip.className = &quot;custom-tooltip&quot;;\n",
       "        tooltip.innerHTML = content;\n",
       "        document.body.appendChild(tooltip); \n",
       "\n",
       "        // Limit the tooltip width to 1/3 of the screen width\n",
       "        var maxWidth = window.innerWidth / 3;\n",
       "        tooltip.style.maxWidth = maxWidth + &quot;px&quot;;\n",
       "        \n",
       "        // Position the tooltip\n",
       "        var rect = event.target.getBoundingClientRect();\n",
       "        var x = rect.left + window.scrollX;\n",
       "        // 5px above the entity\n",
       "        var y = rect.top + window.scrollY - tooltip.offsetHeight - 5; \n",
       "\n",
       "        // Ensure the tooltip doesn&#x27;t go off-screen\n",
       "        if (x + tooltip.offsetWidth &gt; window.innerWidth) {\n",
       "            // 10px padding from the right edge\n",
       "            x = window.innerWidth - tooltip.offsetWidth - 10; \n",
       "        }\n",
       "        if (y &lt; 0) {\n",
       "            // 5px below the entity if it goes off-screen\n",
       "            y = rect.bottom + window.scrollY + 5; \n",
       "        }\n",
       "\n",
       "        tooltip.style.left = x + &quot;px&quot;;\n",
       "        tooltip.style.top = y + &quot;px&quot;;\n",
       "    }\n",
       "\n",
       "    hideTooltip() {\n",
       "        var tooltip = document.getElementById(&quot;custom-tooltip&quot;);\n",
       "        if (tooltip) {\n",
       "            tooltip.remove();\n",
       "        }\n",
       "    }\n",
       "\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        // Find all entities with this ID in the text display\n",
       "        const textEntities = document.querySelectorAll(`mark[entity-id=&quot;${entityId}&quot;]`);\n",
       "        \n",
       "        textEntities.forEach(entity =&gt; {\n",
       "            if (isEnter) {\n",
       "                entity.classList.add(&#x27;entity-highlight&#x27;);\n",
       "                // Get the background color and use it for the glow\n",
       "                const style = window.getComputedStyle(entity);\n",
       "                const backgroundColor = style.backgroundColor;\n",
       "                const glowColor = backgroundColor === &#x27;rgba(0, 0, 0, 0)&#x27; || backgroundColor === &#x27;transparent&#x27; ? &#x27;#3f87a6&#x27; : backgroundColor;\n",
       "                entity.style.boxShadow = `0 0 8px ${glowColor}, 0 0 12px ${glowColor}`;\n",
       "            } else {\n",
       "                entity.classList.remove(&#x27;entity-highlight&#x27;);\n",
       "                entity.style.boxShadow = &#x27;&#x27;;\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "\n",
       "    alineDisplayRelation() {\n",
       "        // Get the display-textbox (div) and display-relation (svg) elements\n",
       "        const textDiv = document.getElementById(&quot;display-textbox&quot;);\n",
       "        const svgContainer = document.getElementById(&quot;display-relation&quot;);\n",
       "        \n",
       "        if (!textDiv || !svgContainer) {\n",
       "            console.error(&quot;Required elements not found&quot;);\n",
       "            return;\n",
       "        }\n",
       "    \n",
       "        // Get dimensions of the display-textbox\n",
       "        const textDivRect = textDiv.getBoundingClientRect();\n",
       "    \n",
       "        // Set dimensions of the SVG container\n",
       "        svgContainer.style.height = `${textDivRect.height}px`;\n",
       "        svgContainer.style.width = `${textDivRect.width}px`;\n",
       "        \n",
       "        // Ensure SVG viewport is set correctly\n",
       "        svgContainer.setAttribute(&#x27;viewBox&#x27;, `0 0 ${textDivRect.width} ${textDivRect.height}`);\n",
       "    }\n",
       "\n",
       "    updateRelations(relations, r) {\n",
       "        // Get the display-textbox (div) and display-relation (svg) elements\n",
       "        const textDiv = document.getElementById(&quot;display-textbox&quot;);\n",
       "        const svgContainer = document.getElementById(&quot;display-relation&quot;);\n",
       "        \n",
       "        if (!textDiv || !svgContainer) {\n",
       "            console.error(&quot;Required elements not found for updating relations&quot;);\n",
       "            return;\n",
       "        }\n",
       "    \n",
       "        const textDivRect = textDiv.getBoundingClientRect();\n",
       "    \n",
       "        // Clear current relation lines\n",
       "        svgContainer.innerHTML = &#x27;&#x27;;\n",
       "    \n",
       "        // If no relations\n",
       "        if (!relations || relations.length === 0) {\n",
       "            return null;\n",
       "        }\n",
       "    \n",
       "        relations.forEach((rel, index) =&gt; {\n",
       "            const entity1Element = document.getElementById(rel.entity_1_id);\n",
       "            const entity2Element = document.getElementById(rel.entity_2_id);\n",
       "    \n",
       "            // Check if elements exist\n",
       "            if (!entity1Element || !entity2Element) {\n",
       "                console.error(&#x27;Entity elements not found:&#x27;, {\n",
       "                    relation: rel,\n",
       "                    entity1Found: !!entity1Element,\n",
       "                    entity2Found: !!entity2Element\n",
       "                });\n",
       "                return;\n",
       "            }\n",
       "    \n",
       "            const entity1Rect = entity1Element.getBoundingClientRect();\n",
       "            const entity2Rect = entity2Element.getBoundingClientRect();\n",
       "    \n",
       "            // Get the computed style of the entity elements\n",
       "            const entity1Style = window.getComputedStyle(entity1Element);\n",
       "            const entity2Style = window.getComputedStyle(entity2Element);\n",
       "            const entity1LineHeight = parseFloat(entity1Style.lineHeight);\n",
       "            const entity2LineHeight = parseFloat(entity2Style.lineHeight);\n",
       "    \n",
       "            // Calculate the number of lines\n",
       "            const entity1Lines = entity1Rect.height / entity1LineHeight;\n",
       "            const entity2Lines = entity2Rect.height / entity2LineHeight;\n",
       "    \n",
       "            // Handle line-broken entity\n",
       "            const entity1X = entity1Lines &gt; 2 \n",
       "                ? (entity1Rect.right - textDivRect.left)\n",
       "                : (entity1Rect.left + entity1Rect.width / 2 - textDivRect.left);\n",
       "            \n",
       "            const entity1Y = entity1Rect.top - textDivRect.top;\n",
       "            \n",
       "            const entity2X = entity2Lines &gt; 2 \n",
       "                ? (entity2Rect.right - textDivRect.left)\n",
       "                : (entity2Rect.left + entity2Rect.width / 2 - textDivRect.left);\n",
       "            \n",
       "            const entity2Y = entity2Rect.top - textDivRect.top;\n",
       "    \n",
       "            // start with entity on left\n",
       "            var startX = null;\n",
       "            var startY = null;\n",
       "            var endX = null;\n",
       "            var endY = null;\n",
       "            if (entity1X &lt; entity2X) {\n",
       "                startX = entity1X;\n",
       "                startY = entity1Y;\n",
       "                endX = entity2X;\n",
       "                endY = entity2Y;\n",
       "            } else {\n",
       "                startX = entity2X;\n",
       "                startY = entity2Y;\n",
       "                endX = entity1X;\n",
       "                endY = entity1Y;\n",
       "            }\n",
       "    \n",
       "            // Create the SVG path\n",
       "            const path = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;path&quot;);\n",
       "            let pathD;\n",
       "            // If start and end entities are on the same y-axis\n",
       "            if (startY === endY) {\n",
       "                pathD = `M${startX} ${startY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${startY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            // If start entity is below end entities\n",
       "            else if (startY &gt; endY) {\n",
       "                pathD = `M${startX} ${startY} L${startX} ${endY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${endY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            // If start entity is above end entities\n",
       "            else {\n",
       "                pathD = `M${startX} ${startY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${startY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            \n",
       "            path.setAttribute(&quot;d&quot;, pathD);\n",
       "            path.setAttribute(&quot;class&quot;, &quot;relation-path&quot;);\n",
       "            svgContainer.appendChild(path);\n",
       "        });\n",
       "    }\n",
       "\n",
       "}\n",
       "class FilterManager {\n",
       "    constructor(onFilterChange) {\n",
       "        this.onFilterChange = onFilterChange;\n",
       "        this.filterState = null;\n",
       "    }\n",
       "\n",
       "    extractAttributeFilters(entities) {\n",
       "        const attributeFilters = new Map();\n",
       "        \n",
       "        entities.forEach(entity =&gt; {\n",
       "            if (entity.attr) {\n",
       "                Object.entries(entity.attr).forEach(([key, value]) =&gt; {\n",
       "                    if (!attributeFilters.has(key)) {\n",
       "                        attributeFilters.set(key, new Set());\n",
       "                    }\n",
       "                    attributeFilters.get(key).add(value);\n",
       "                });\n",
       "            }\n",
       "        });\n",
       "        \n",
       "        this.filterState = {\n",
       "            keys: Array.from(attributeFilters.entries()).map(([key, values]) =&gt; ({\n",
       "                key,\n",
       "                values: Array.from(values),\n",
       "                selected: true,\n",
       "                valueFilters: Array.from(values).map(value =&gt; ({\n",
       "                    value,\n",
       "                    selected: true\n",
       "                }))\n",
       "            })),\n",
       "            useAndLogic: false\n",
       "        };\n",
       "\n",
       "        return this.filterState;\n",
       "    }\n",
       "\n",
       "    handleFilterChange() {\n",
       "        if (this.onFilterChange) {\n",
       "            this.onFilterChange(this.filterState);\n",
       "        }\n",
       "    }\n",
       "\n",
       "    createFilterUI(panel) {\n",
       "        const filterContainer = document.createElement(&#x27;div&#x27;);\n",
       "        filterContainer.className = &#x27;attribute-filters&#x27;;\n",
       "        filterContainer.style.padding = &#x27;0 2rem 2rem 2rem&#x27;;\n",
       "    \n",
       "        // Add logic toggle switch\n",
       "        const logicToggleContainer = document.createElement(&#x27;div&#x27;);\n",
       "        logicToggleContainer.className = &#x27;logic-toggle&#x27;;\n",
       "        logicToggleContainer.style.marginBottom = &#x27;1.5rem&#x27;;\n",
       "        logicToggleContainer.style.padding = &#x27;1rem&#x27;;\n",
       "        logicToggleContainer.style.backgroundColor = &#x27;rgba(128, 128, 128, 0.1)&#x27;;\n",
       "        logicToggleContainer.style.borderRadius = &#x27;4px&#x27;;\n",
       "    \n",
       "        const logicLabel = document.createElement(&#x27;label&#x27;);\n",
       "        logicLabel.className = &#x27;logic-label&#x27;;\n",
       "        logicLabel.style.display = &#x27;flex&#x27;;\n",
       "        logicLabel.style.alignItems = &#x27;center&#x27;;\n",
       "        logicLabel.style.justifyContent = &#x27;space-between&#x27;;\n",
       "        logicLabel.style.cursor = &#x27;pointer&#x27;;\n",
       "    \n",
       "        const labelText = document.createElement(&#x27;span&#x27;);\n",
       "        labelText.textContent = &#x27;Logic between attribute keys: &#x27;;\n",
       "        labelText.style.marginRight = &#x27;8px&#x27;;\n",
       "    \n",
       "        const toggleContainer = document.createElement(&#x27;div&#x27;);\n",
       "        toggleContainer.style.display = &#x27;flex&#x27;;\n",
       "        toggleContainer.style.alignItems = &#x27;center&#x27;;\n",
       "        toggleContainer.style.gap = &#x27;8px&#x27;;\n",
       "    \n",
       "        const orText = document.createElement(&#x27;span&#x27;);\n",
       "        orText.textContent = &#x27;OR&#x27;;\n",
       "        orText.style.fontSize = &#x27;0.9em&#x27;;\n",
       "    \n",
       "        const toggleSwitch = document.createElement(&#x27;div&#x27;);\n",
       "        toggleSwitch.className = &#x27;toggle-switch&#x27;;\n",
       "    \n",
       "        const toggleInput = document.createElement(&#x27;input&#x27;);\n",
       "        toggleInput.type = &#x27;checkbox&#x27;;\n",
       "        toggleInput.checked = this.filterState.useAndLogic;\n",
       "        toggleInput.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "            this.filterState.useAndLogic = e.target.checked;\n",
       "            this.handleFilterChange();\n",
       "        });\n",
       "    \n",
       "        const toggleSlider = document.createElement(&#x27;span&#x27;);\n",
       "        toggleSlider.className = &#x27;toggle-slider&#x27;;\n",
       "    \n",
       "        const andText = document.createElement(&#x27;span&#x27;);\n",
       "        andText.textContent = &#x27;AND&#x27;;\n",
       "        andText.style.fontSize = &#x27;0.9em&#x27;;\n",
       "    \n",
       "        toggleSwitch.appendChild(toggleInput);\n",
       "        toggleSwitch.appendChild(toggleSlider);\n",
       "    \n",
       "        toggleContainer.appendChild(orText);\n",
       "        toggleContainer.appendChild(toggleSwitch);\n",
       "        toggleContainer.appendChild(andText);\n",
       "    \n",
       "        logicLabel.appendChild(labelText);\n",
       "        logicLabel.appendChild(toggleContainer);\n",
       "        logicToggleContainer.appendChild(logicLabel);\n",
       "        filterContainer.appendChild(logicToggleContainer);\n",
       "    \n",
       "        // Create attribute key sections\n",
       "        this.filterState.keys.forEach(filter =&gt; {\n",
       "            const keySection = document.createElement(&#x27;div&#x27;);\n",
       "            keySection.className = &#x27;filter-section&#x27;;\n",
       "            keySection.style.marginBottom = &#x27;1rem&#x27;;\n",
       "    \n",
       "            const keyCheckbox = document.createElement(&#x27;input&#x27;);\n",
       "            keyCheckbox.type = &#x27;checkbox&#x27;;\n",
       "            keyCheckbox.checked = filter.selected;\n",
       "            keyCheckbox.id = `filter-${filter.key}`;\n",
       "            keyCheckbox.style.marginRight = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "            const keyLabel = document.createElement(&#x27;label&#x27;);\n",
       "            keyLabel.htmlFor = `filter-${filter.key}`;\n",
       "            keyLabel.textContent = filter.key;\n",
       "            keyLabel.style.fontWeight = &#x27;bold&#x27;;\n",
       "    \n",
       "            const valuesContainer = document.createElement(&#x27;div&#x27;);\n",
       "            valuesContainer.style.marginLeft = &#x27;1.5rem&#x27;;\n",
       "            valuesContainer.style.marginTop = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "            keySection.appendChild(keyCheckbox);\n",
       "            keySection.appendChild(keyLabel);\n",
       "    \n",
       "            filter.valueFilters.forEach(valueFilter =&gt; {\n",
       "                const valueDiv = document.createElement(&#x27;div&#x27;);\n",
       "                valueDiv.style.marginBottom = &#x27;0.25rem&#x27;;\n",
       "    \n",
       "                const valueCheckbox = document.createElement(&#x27;input&#x27;);\n",
       "                valueCheckbox.type = &#x27;checkbox&#x27;;\n",
       "                valueCheckbox.checked = valueFilter.selected;\n",
       "                valueCheckbox.id = `filter-${filter.key}-${valueFilter.value}`;\n",
       "                valueCheckbox.style.marginRight = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "                const valueLabel = document.createElement(&#x27;label&#x27;);\n",
       "                valueLabel.htmlFor = `filter-${filter.key}-${valueFilter.value}`;\n",
       "                valueLabel.textContent = valueFilter.value;\n",
       "    \n",
       "                valueDiv.appendChild(valueCheckbox);\n",
       "                valueDiv.appendChild(valueLabel);\n",
       "                valuesContainer.appendChild(valueDiv);\n",
       "    \n",
       "                valueCheckbox.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "                    valueFilter.selected = e.target.checked;\n",
       "                    this.handleFilterChange();\n",
       "                });\n",
       "            });\n",
       "    \n",
       "            keySection.appendChild(valuesContainer);\n",
       "            filterContainer.appendChild(keySection);\n",
       "    \n",
       "            keyCheckbox.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "                filter.selected = e.target.checked;\n",
       "                filter.valueFilters.forEach(valueFilter =&gt; {\n",
       "                    valueFilter.selected = e.target.checked;\n",
       "                    const valueCheckbox = document.getElementById(`filter-${filter.key}-${valueFilter.value}`);\n",
       "                    if (valueCheckbox) {\n",
       "                        valueCheckbox.checked = e.target.checked;\n",
       "                    }\n",
       "                });\n",
       "                this.handleFilterChange();\n",
       "            });\n",
       "        });\n",
       "    \n",
       "        panel.appendChild(filterContainer);\n",
       "    }\n",
       "}\n",
       "class TableManager {\n",
       "    constructor(light_theme_colors, dark_theme_colors) {\n",
       "        this.light_theme_colors = light_theme_colors;\n",
       "        this.dark_theme_colors = dark_theme_colors;\n",
       "        this.entityTable = null;\n",
       "        this.relationTable = null;\n",
       "    }\n",
       "\n",
       "    createTablePanel(text, entities, relations, currentTheme) {\n",
       "        const panel = document.createElement(&#x27;div&#x27;);\n",
       "        panel.className = &#x27;table-panel&#x27;;\n",
       "\n",
       "        const closeButton = document.createElement(&#x27;button&#x27;);\n",
       "        closeButton.className = &#x27;table-close-button&#x27;;\n",
       "        closeButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;line x1=&quot;18&quot; y1=&quot;6&quot; x2=&quot;6&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;6&quot; y1=&quot;6&quot; x2=&quot;18&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&#x27;;\n",
       "        closeButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            panel.classList.remove(&#x27;open&#x27;);\n",
       "            document.getElementById(&#x27;display-textbox-container&#x27;).classList.remove(&#x27;with-table&#x27;);\n",
       "        });\n",
       "        panel.appendChild(closeButton);\n",
       "        \n",
       "        const content = document.createElement(&#x27;div&#x27;);\n",
       "        \n",
       "        const entitySection = document.createElement(&#x27;div&#x27;);\n",
       "        entitySection.className = &#x27;table-section&#x27;;\n",
       "        entitySection.innerHTML = &#x27;&lt;h2&gt;Entities&lt;/h2&gt;&#x27;;\n",
       "        const entityTable = document.createElement(&#x27;table&#x27;);\n",
       "        entitySection.appendChild(entityTable);\n",
       "        content.appendChild(entitySection);\n",
       "        this.entityTable = entityTable;\n",
       "        this.updateEntityTable(text, entities, currentTheme);\n",
       "\n",
       "        if (data.relations) {\n",
       "            const relationSection = document.createElement(&#x27;div&#x27;);\n",
       "            relationSection.className = &#x27;table-section&#x27;;\n",
       "            relationSection.innerHTML = &#x27;&lt;h2&gt;Relations&lt;/h2&gt;&#x27;;\n",
       "            const relationTable = document.createElement(&#x27;table&#x27;);\n",
       "            relationSection.appendChild(relationTable);\n",
       "            content.appendChild(relationSection);\n",
       "            this.relationTable = relationTable;\n",
       "            this.updateRelationTable(text, entities, relations, currentTheme);\n",
       "        }\n",
       "\n",
       "        panel.appendChild(content);\n",
       "        return panel;\n",
       "    }\n",
       "\n",
       "    updateEntityTable(text, entities, currentTheme) {\n",
       "        if (!this.entityTable) return;\n",
       "        this.entityTable.innerHTML = &#x27;&#x27;;\n",
       "        \n",
       "        const thead = document.createElement(&#x27;thead&#x27;);\n",
       "        const tbody = document.createElement(&#x27;tbody&#x27;);\n",
       "\n",
       "        const attributeKeys = new Set();\n",
       "        entities.forEach(entity =&gt; {\n",
       "            if (entity.attr) {\n",
       "                Object.keys(entity.attr).forEach(key =&gt; attributeKeys.add(key));\n",
       "            }\n",
       "        });\n",
       "        const sortedAttributeKeys = Array.from(attributeKeys).sort();\n",
       "\n",
       "        const headerRow = document.createElement(&#x27;tr&#x27;);\n",
       "        [&#x27;ID&#x27;, &#x27;Text&#x27;, ...sortedAttributeKeys].forEach(header =&gt; {\n",
       "            const th = document.createElement(&#x27;th&#x27;);\n",
       "            th.textContent = header;\n",
       "            headerRow.appendChild(th);\n",
       "        });\n",
       "        thead.appendChild(headerRow);\n",
       "\n",
       "        entities.forEach(entity =&gt; {\n",
       "            const row = document.createElement(&#x27;tr&#x27;);\n",
       "            \n",
       "            const idCell = document.createElement(&#x27;td&#x27;);\n",
       "            idCell.textContent = entity.entity_id;\n",
       "            row.appendChild(idCell);\n",
       "            \n",
       "            const textCell = document.createElement(&#x27;td&#x27;);\n",
       "            const entityMark = document.createElement(&#x27;mark&#x27;);\n",
       "            entityMark.className = &#x27;entity-table-mark&#x27;;\n",
       "            entityMark.setAttribute(&#x27;entity-id&#x27;, entity.entity_id);\n",
       "            entityMark.textContent = text.substring(entity.start, entity.end);\n",
       "            entityMark.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, true));\n",
       "            entityMark.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, false));\n",
       "            \n",
       "            if (entity.color !== undefined) {\n",
       "                entityMark.style.background = &#x27;none&#x27;;\n",
       "                if (typeof entity.color === &#x27;string&#x27;) {\n",
       "                    entityMark.style.backgroundColor = entity.color;\n",
       "                } else if (typeof entity.color === &#x27;number&#x27;) {\n",
       "                    entityMark.style.backgroundColor = currentTheme === &#x27;light&#x27; ? \n",
       "                        this.light_theme_colors[entity.color][&quot;color_code&quot;] : \n",
       "                        this.dark_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                }\n",
       "            }\n",
       "\n",
       "            textCell.appendChild(entityMark);\n",
       "            row.appendChild(textCell);\n",
       "            \n",
       "            sortedAttributeKeys.forEach(attrKey =&gt; {\n",
       "                const attrCell = document.createElement(&#x27;td&#x27;);\n",
       "                if (entity.attr &amp;&amp; entity.attr[attrKey] !== undefined) {\n",
       "                    attrCell.textContent = entity.attr[attrKey];\n",
       "                } else {\n",
       "                    attrCell.textContent = &#x27;-&#x27;;\n",
       "                    attrCell.style.color = &#x27;rgba(128, 128, 128, 0.5)&#x27;;\n",
       "                }\n",
       "                row.appendChild(attrCell);\n",
       "            });\n",
       "\n",
       "            tbody.appendChild(row);\n",
       "        });\n",
       "\n",
       "        this.entityTable.appendChild(thead);\n",
       "        this.entityTable.appendChild(tbody);\n",
       "    }\n",
       "\n",
       "    updateRelationTable(text, entities, relations, currentTheme) {\n",
       "        if (!this.relationTable) return;\n",
       "        this.relationTable.innerHTML = &#x27;&#x27;;\n",
       "        \n",
       "        const thead = document.createElement(&#x27;thead&#x27;);\n",
       "        const tbody = document.createElement(&#x27;tbody&#x27;);\n",
       "\n",
       "        const headerRow = document.createElement(&#x27;tr&#x27;);\n",
       "        [&#x27;Entity 1 ID&#x27;, &#x27;Entity 1&#x27;, &#x27;Entity 2 ID&#x27;, &#x27;Entity 2&#x27;].forEach(header =&gt; {\n",
       "            const th = document.createElement(&#x27;th&#x27;);\n",
       "            th.textContent = header;\n",
       "            headerRow.appendChild(th);\n",
       "        });\n",
       "        thead.appendChild(headerRow);\n",
       "\n",
       "        relations.forEach(relation =&gt; {\n",
       "            const row = document.createElement(&#x27;tr&#x27;);\n",
       "            \n",
       "            const entity1IdCell = document.createElement(&#x27;td&#x27;);\n",
       "            entity1IdCell.textContent = relation.entity_1_id;\n",
       "            row.appendChild(entity1IdCell);\n",
       "\n",
       "            const entity1Cell = document.createElement(&#x27;td&#x27;);\n",
       "            const entity1 = entities.find(e =&gt; e.entity_id === relation.entity_1_id);\n",
       "            if (entity1) {\n",
       "                const entityMark1 = document.createElement(&#x27;mark&#x27;);\n",
       "                entityMark1.className = &#x27;entity-table-mark&#x27;;\n",
       "                entityMark1.setAttribute(&#x27;entity-id&#x27;, entity1.entity_id);\n",
       "                entityMark1.textContent = text.substring(entity1.start, entity1.end);\n",
       "                entityMark1.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity1.entity_id, true));\n",
       "                entityMark1.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity1.entity_id, false));\n",
       "                \n",
       "                if (entity1.color !== undefined) {\n",
       "                    entityMark1.style.background = &#x27;none&#x27;;\n",
       "                    entityMark1.style.backgroundColor = typeof entity1.color === &#x27;string&#x27; ? \n",
       "                        entity1.color : \n",
       "                        (currentTheme === &#x27;light&#x27; ? \n",
       "                            this.light_theme_colors[entity1.color][&quot;color_code&quot;] : \n",
       "                            this.dark_theme_colors[entity1.color][&quot;color_code&quot;]);\n",
       "                }\n",
       "                entity1Cell.appendChild(entityMark1);\n",
       "            } else {\n",
       "                entity1Cell.textContent = relation.entity_1_id;\n",
       "            }\n",
       "            row.appendChild(entity1Cell);\n",
       "            \n",
       "            const entity2IdCell = document.createElement(&#x27;td&#x27;);\n",
       "            entity2IdCell.textContent = relation.entity_2_id;\n",
       "            row.appendChild(entity2IdCell);\n",
       "\n",
       "            const entity2Cell = document.createElement(&#x27;td&#x27;);\n",
       "            const entity2 = entities.find(e =&gt; e.entity_id === relation.entity_2_id);\n",
       "            if (entity2) {\n",
       "                const entityMark2 = document.createElement(&#x27;mark&#x27;);\n",
       "                entityMark2.className = &#x27;entity-table-mark&#x27;;\n",
       "                entityMark2.setAttribute(&#x27;entity-id&#x27;, entity2.entity_id);\n",
       "                entityMark2.textContent = text.substring(entity2.start, entity2.end);\n",
       "                entityMark2.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity2.entity_id, true));\n",
       "                entityMark2.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity2.entity_id, false));\n",
       "                \n",
       "                if (entity2.color !== undefined) {\n",
       "                    entityMark2.style.background = &#x27;none&#x27;;\n",
       "                    entityMark2.style.backgroundColor = typeof entity2.color === &#x27;string&#x27; ? \n",
       "                        entity2.color : \n",
       "                        (currentTheme === &#x27;light&#x27; ? \n",
       "                            this.light_theme_colors[entity2.color][&quot;color_code&quot;] : \n",
       "                            this.dark_theme_colors[entity2.color][&quot;color_code&quot;]);\n",
       "                }\n",
       "                entity2Cell.appendChild(entityMark2);\n",
       "            } else {\n",
       "                entity2Cell.textContent = relation.entity_2_id;\n",
       "            }\n",
       "            row.appendChild(entity2Cell);\n",
       "            \n",
       "            tbody.appendChild(row);\n",
       "        });\n",
       "\n",
       "        this.relationTable.appendChild(thead);\n",
       "        this.relationTable.appendChild(tbody);\n",
       "    }\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        const textEntities = document.querySelectorAll(`mark[entity-id=&quot;${entityId}&quot;]`);\n",
       "        textEntities.forEach(entity =&gt; {\n",
       "            if (isEnter) {\n",
       "                entity.classList.add(&#x27;entity-highlight&#x27;);\n",
       "                const style = window.getComputedStyle(entity);\n",
       "                const backgroundColor = style.backgroundColor;\n",
       "                const glowColor = backgroundColor === &#x27;rgba(0, 0, 0, 0)&#x27; || backgroundColor === &#x27;transparent&#x27; ? &#x27;#3f87a6&#x27; : backgroundColor;\n",
       "                entity.style.boxShadow = `0 0 8px ${glowColor}, 0 0 12px ${glowColor}`;\n",
       "            } else {\n",
       "                entity.classList.remove(&#x27;entity-highlight&#x27;);\n",
       "                entity.style.boxShadow = &#x27;&#x27;;\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "}\n",
       "class App {\n",
       "    constructor(data) {\n",
       "        // Store initial data\n",
       "        this.data = data;\n",
       "        this.currentTheme = data.theme;\n",
       "        this.activeEntities = data.entities;\n",
       "        this.activeRelations = data.relations || null;\n",
       "        this.relationPathLevel = 5;\n",
       "\n",
       "        // Initialize managers\n",
       "        this.displayManager = new DisplayTextBoxManager(\n",
       "            data.light_theme_colors,\n",
       "            data.dark_theme_colors\n",
       "        );\n",
       "        this.filterManager = new FilterManager(this.applyFilters.bind(this));\n",
       "        this.tableManager = new TableManager(\n",
       "            data.light_theme_colors,\n",
       "            data.dark_theme_colors\n",
       "        );\n",
       "\n",
       "        // Bind methods\n",
       "        this.toggleTheme = this.toggleTheme.bind(this);\n",
       "        this.initializeUI = this.initializeUI.bind(this);\n",
       "        this.handleEntityHighlight = this.handleEntityHighlight.bind(this);\n",
       "    }\n",
       "\n",
       "    async initialize() {\n",
       "        // Wait for DOM to be fully loaded\n",
       "        if (document.readyState === &#x27;loading&#x27;) {\n",
       "            await new Promise(resolve =&gt; {\n",
       "                document.addEventListener(&#x27;DOMContentLoaded&#x27;, resolve);\n",
       "            });\n",
       "        }\n",
       "\n",
       "        // Initialize UI elements\n",
       "        this.initializeUI();\n",
       "\n",
       "        // Set initial theme\n",
       "        if (this.data.theme === &#x27;dark&#x27;) {\n",
       "            document.body.classList.add(&#x27;dark-theme&#x27;);\n",
       "        }\n",
       "\n",
       "        // Initialize displays\n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "\n",
       "        if (this.activeRelations) {\n",
       "            this.displayManager.alineDisplayRelation();\n",
       "            this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "\n",
       "            // Add event listeners for relations\n",
       "            window.addEventListener(&#x27;scroll&#x27;, () =&gt; {\n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "            });\n",
       "\n",
       "            window.addEventListener(&#x27;resize&#x27;, () =&gt; {\n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "            });\n",
       "        }\n",
       "    }\n",
       "\n",
       "    initializeUI() {\n",
       "        const header = document.createElement(&#x27;div&#x27;);\n",
       "        header.className = &#x27;header-container&#x27;;\n",
       "        document.body.appendChild(header);\n",
       "\n",
       "        const themeButton = this.createThemeButton();\n",
       "        header.appendChild(themeButton);\n",
       "\n",
       "        const {filterButton, filterPanel, filterOverlay} = this.createFilterElements();\n",
       "        header.appendChild(filterButton);\n",
       "        document.body.appendChild(filterPanel);\n",
       "        document.body.appendChild(filterOverlay);\n",
       "\n",
       "        const filterState = this.filterManager.extractAttributeFilters(this.data.entities);\n",
       "        this.filterManager.createFilterUI(filterPanel.querySelector(&#x27;div&#x27;));\n",
       "\n",
       "        const {tableButton, tablePanel} = this.createTableElements();\n",
       "        header.appendChild(tableButton);\n",
       "        document.body.appendChild(tablePanel);\n",
       "\n",
       "        this.setupEventListeners(filterButton, filterPanel, filterOverlay, tableButton, tablePanel);\n",
       "    }\n",
       "\n",
       "    createThemeButton() {\n",
       "        const themeButton = document.createElement(&#x27;button&#x27;);\n",
       "        themeButton.className = &#x27;theme-button&#x27;;\n",
       "        themeButton.innerHTML = `&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;\n",
       "            &lt;path d=&quot;M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z&quot;&gt;&lt;/path&gt;\n",
       "        &lt;/svg&gt;`;\n",
       "        themeButton.addEventListener(&#x27;click&#x27;, this.toggleTheme);\n",
       "        return themeButton;\n",
       "    }\n",
       "\n",
       "    createFilterElements() {\n",
       "        const filterButton = document.createElement(&#x27;button&#x27;);\n",
       "        filterButton.className = &#x27;filters-button&#x27;;\n",
       "        filterButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;polygon points=&quot;22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3&quot;&gt;&lt;/polygon&gt;&lt;/svg&gt;&#x27;;\n",
       "\n",
       "        const filterPanel = document.createElement(&#x27;div&#x27;);\n",
       "        filterPanel.className = &#x27;filters-panel&#x27;;\n",
       "        filterPanel.innerHTML = &#x27;&lt;div style=&quot;padding: 2rem;&quot;&gt;&lt;h2 style=&quot;margin-bottom: 1rem; font-size: 1.5rem;&quot;&gt;Filters&lt;/h2&gt;&lt;/div&gt;&#x27;;\n",
       "\n",
       "        const filterOverlay = document.createElement(&#x27;div&#x27;);\n",
       "        filterOverlay.className = &#x27;filters-overlay&#x27;;\n",
       "\n",
       "        return { filterButton, filterPanel, filterOverlay };\n",
       "    }\n",
       "\n",
       "    createTableElements() {\n",
       "        const tableButton = document.createElement(&#x27;button&#x27;);\n",
       "        tableButton.className = &#x27;table-button&#x27;;\n",
       "        tableButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;18&quot; height=&quot;18&quot; rx=&quot;2&quot; ry=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;3&quot; y1=&quot;9&quot; x2=&quot;21&quot; y2=&quot;9&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;3&quot; y1=&quot;15&quot; x2=&quot;21&quot; y2=&quot;15&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&#x27;;\n",
       "\n",
       "        const tablePanel = this.tableManager.createTablePanel(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "\n",
       "        return { tableButton, tablePanel };\n",
       "    }\n",
       "\n",
       "    setupEventListeners(filterButton, filterPanel, filterOverlay, tableButton, tablePanel) {\n",
       "        // Filter panel events\n",
       "        filterButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            filterPanel.classList.toggle(&#x27;open&#x27;);\n",
       "            filterOverlay.classList.toggle(&#x27;open&#x27;);\n",
       "        });\n",
       "\n",
       "        filterOverlay.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            filterPanel.classList.remove(&#x27;open&#x27;);\n",
       "            filterOverlay.classList.remove(&#x27;open&#x27;);\n",
       "        });\n",
       "\n",
       "        // Table panel events\n",
       "        tableButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            tablePanel.classList.toggle(&#x27;open&#x27;);\n",
       "            const container = document.getElementById(&#x27;display-textbox-container&#x27;);\n",
       "            container.classList.toggle(&#x27;with-table&#x27;);\n",
       "            \n",
       "            if (this.activeRelations) {\n",
       "                setTimeout(() =&gt; {\n",
       "                    this.displayManager.alineDisplayRelation();\n",
       "                    this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "                }, 300);\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "\n",
       "    toggleTheme() {\n",
       "        this.currentTheme = this.currentTheme === &#x27;light&#x27; ? &#x27;dark&#x27; : &#x27;light&#x27;;\n",
       "        document.body.classList.toggle(&#x27;dark-theme&#x27;);\n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        this.tableManager.updateEntityTable(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        if (this.activeRelations) {\n",
       "            this.tableManager.updateRelationTable(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "        }\n",
       "    }\n",
       "\n",
       "    applyFilters(filterState) {\n",
       "        this.activeEntities = this.data.entities.filter(entity =&gt; {\n",
       "            if (!entity.attr) return false;\n",
       "            \n",
       "            const selectedFilters = filterState.keys.filter(f =&gt; f.selected);\n",
       "            if (selectedFilters.length === 0) return true;\n",
       "\n",
       "            const matchesFilter = (filter) =&gt; {\n",
       "                const entityValue = entity.attr[filter.key];\n",
       "                if (!entityValue) return false;\n",
       "                return filter.valueFilters.some(valueFilter =&gt; \n",
       "                    valueFilter.selected &amp;&amp; valueFilter.value === entityValue\n",
       "                );\n",
       "            };\n",
       "\n",
       "            return filterState.useAndLogic ? \n",
       "                selectedFilters.every(matchesFilter) : \n",
       "                selectedFilters.some(matchesFilter);\n",
       "        });\n",
       "        \n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        this.tableManager.updateEntityTable(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        \n",
       "        if (this.data.relations) {\n",
       "            requestAnimationFrame(() =&gt; {\n",
       "                const activeEntityIds = new Set(this.activeEntities.map(e =&gt; e.entity_id));\n",
       "                \n",
       "                this.activeRelations = this.data.relations.filter(rel =&gt; {\n",
       "                    const entity1Exists = document.getElementById(rel.entity_1_id) !== null;\n",
       "                    const entity2Exists = document.getElementById(rel.entity_2_id) !== null;\n",
       "                    return activeEntityIds.has(rel.entity_1_id) &amp;&amp; \n",
       "                           activeEntityIds.has(rel.entity_2_id) &amp;&amp;\n",
       "                           entity1Exists &amp;&amp; entity2Exists;\n",
       "                });\n",
       "                \n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "                if (this.activeRelations) {\n",
       "                    this.tableManager.updateRelationTable(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "                }\n",
       "            });\n",
       "        }\n",
       "    }\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        this.displayManager.handleEntityHighlight(entityId, isEnter);\n",
       "        this.tableManager.handleEntityHighlight(entityId, isEnter);\n",
       "    }\n",
       "}\n",
       "\n",
       "// Initialize the application when the script loads\n",
       "const app = new App(data);\n",
       "app.initialize();\n",
       "\n",
       "        &lt;/script&gt;\n",
       "    &lt;/body&gt;\n",
       "    &lt;/html&gt;\n",
       "    \" width=\"100%\" height=\"300px\" style=\"border:none;\"></iframe>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import html\n",
    "from IPython.display import display, HTML\n",
    "\n",
    "iframe_html = f\"\"\"\n",
    "    <iframe srcdoc=\"{html.escape(html_content)}\" width=\"100%\" height=\"300px\" style=\"border:none;\"></iframe>\n",
    "\"\"\"\n",
    "display(HTML(iframe_html))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Display entities and relations"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [],
   "source": [
    "html_content = render(text, entities, relations)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <iframe srcdoc=\"\n",
       "    &lt;html&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;title&gt;Named Entity Visualization&lt;/title&gt;\n",
       "        &lt;style&gt;\n",
       "        /* Default (Light) Theme */\n",
       ":root {\n",
       "    --background-color: #ffffff;\n",
       "    --text-color: #000000;\n",
       "    --path-color: #000208;\n",
       "    --tooltip-background-color: #333333;\n",
       "    --icon-color: #000000;\n",
       "}\n",
       "\n",
       "/* Dark Theme */\n",
       "body.dark-theme {\n",
       "    --background-color: #1f1f1f;\n",
       "    --text-color: #ffffff;\n",
       "    --path-color: #9C27B0;\n",
       "    --tooltip-background-color: #444444;\n",
       "    --icon-color: #ffffff;\n",
       "}\n",
       "\n",
       "body {\n",
       "    background-color: var(--background-color);\n",
       "    color: var(--text-color);\n",
       "}\n",
       "\n",
       ".entity-mark {\n",
       "    padding-right: 0.3em;\n",
       "    padding-left: 0.3em;\n",
       "    padding-top: 0.05em;\n",
       "    padding-bottom: 0.05em;\n",
       "    margin: 0 0.1em;\n",
       "    line-height: 1;\n",
       "    border-radius: 0.35em;\n",
       "    background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);\n",
       "    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */\n",
       "    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */\n",
       "} \n",
       "\n",
       "\n",
       "\n",
       ".custom-tooltip {\n",
       "    word-wrap: break-word; /* Ensures long words break into the next line */\n",
       "    overflow-wrap: break-word; /* Ensures content stays within bounds */\n",
       "    box-sizing: border-box; /* Ensures padding/borders don&#x27;t affect width calculations */\n",
       "    position: absolute;\n",
       "    background-color: var(--tooltip-background-color);\n",
       "    color: #fff;\n",
       "    padding: 8px; /* Slightly larger padding */\n",
       "    border-radius: 8px; /* More rounded corners */\n",
       "    z-index: 6;\n",
       "    white-space: normal;\n",
       "    pointer-events: none;\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */\n",
       "    transition: opacity 0.3s ease; /* Smooth transition for opacity */\n",
       "    opacity: 0.8; /* Slightly transparent */\n",
       "}\n",
       "\n",
       "#display-textbox {\n",
       "    width: 100%;\n",
       "    z-index: 1;\n",
       "    word-wrap: break-word;\n",
       "    overflow-wrap: break-word;\n",
       "    white-space: normal;\n",
       "    position: absolute;\n",
       "    line-height: 1.5;\n",
       "    padding: 1.5rem;\n",
       "    \n",
       "    /* Add white background, shadow and rounded corners */\n",
       "    background-color: var(--background-color);\n",
       "    border-radius: 12px;\n",
       "    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",
       "    \n",
       "    /* Hide horizontal scrollbar and only show vertical when needed */\n",
       "    overflow-x: hidden;\n",
       "    overflow-y: auto;\n",
       "}\n",
       "\n",
       "\n",
       "#display-relation {\n",
       "    width: 100%;\n",
       "    position: absolute;\n",
       "    z-index: 2;\n",
       "    pointer-events: none; /* Make the SVG non-interactive */\n",
       "    top: 0; \n",
       "    left: 0; \n",
       "}\n",
       "\n",
       ".relation-path {\n",
       "    opacity: 0.6;\n",
       "\tstroke: var(--path-color);\n",
       "    stroke-width: 2; /* Set the stroke width */\n",
       "    fill: none; /* Ensure the path is not filled */\n",
       "}\n",
       "\n",
       "#display-textbox-container {\n",
       "    left: 0%;\n",
       "    width: 95%;\n",
       "    height: 95%;\n",
       "    position: absolute;\n",
       "    transition: width 0.3s ease-in-out; \n",
       "}\n",
       "\n",
       "\n",
       ".theme-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 0.5rem; /* Position it at the leftmost position */\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".theme-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       "\n",
       ".filters-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 2.5rem;\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".filters-button svg {\n",
       "    width: 100%;\n",
       "    height: 100%;\n",
       "}\n",
       "\n",
       ".filters-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       ".filters-panel {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    width: 33.333%;\n",
       "    height: 100%;\n",
       "    background-color: var(--background-color);\n",
       "    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n",
       "    transform: translateX(-100%);\n",
       "    transition: transform 0.3s ease-in-out;\n",
       "    z-index: 5;\n",
       "    overflow-y: auto;\n",
       "}\n",
       "\n",
       ".filters-panel.open {\n",
       "    transform: translateX(0);\n",
       "}\n",
       "\n",
       ".filters-overlay {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    width: 100%;\n",
       "    height: 100%;\n",
       "    background-color: rgba(0, 0, 0, 0.5);\n",
       "    opacity: 0;\n",
       "    visibility: hidden;\n",
       "    transition: all 0.3s ease-in-out;\n",
       "    z-index: 4;\n",
       "}\n",
       "\n",
       ".filters-overlay.open {\n",
       "    opacity: 1;\n",
       "    visibility: visible;\n",
       "}\n",
       "\n",
       ".filter-section {\n",
       "    border-bottom: 1px solid rgba(128, 128, 128, 0.2);\n",
       "    padding-bottom: 1rem;\n",
       "}\n",
       "\n",
       ".filter-section:last-child {\n",
       "    border-bottom: none;\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;] {\n",
       "    cursor: pointer;\n",
       "}\n",
       "\n",
       ".filter-section label {\n",
       "    cursor: pointer;\n",
       "    user-select: none;\n",
       "}\n",
       "\n",
       "/* Customize checkboxes */\n",
       ".filter-section input[type=&quot;checkbox&quot;] {\n",
       "    appearance: none;\n",
       "    -webkit-appearance: none;\n",
       "    width: 16px;\n",
       "    height: 16px;\n",
       "    border: 2px solid var(--text-color);\n",
       "    border-radius: 3px;\n",
       "    outline: none;\n",
       "    vertical-align: middle;\n",
       "    position: relative;\n",
       "    margin-right: 8px;\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;]:checked {\n",
       "    background-color: var(--text-color);\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;]:checked::before {\n",
       "    content: &quot;✓&quot;;\n",
       "    position: absolute;\n",
       "    color: var(--background-color);\n",
       "    font-size: 12px;\n",
       "    top: 50%;\n",
       "    left: 50%;\n",
       "    transform: translate(-50%, -50%);\n",
       "}\n",
       "\n",
       ".attribute-filters {\n",
       "    color: var(--text-color);\n",
       "}\n",
       "\n",
       "/* Toggle Switch Styles */\n",
       ".toggle-switch {\n",
       "    position: relative;\n",
       "    display: inline-block;\n",
       "    width: 48px;\n",
       "    height: 24px;\n",
       "    margin-left: 10px;\n",
       "}\n",
       "\n",
       ".toggle-switch input {\n",
       "    opacity: 0;\n",
       "    width: 0;\n",
       "    height: 0;\n",
       "}\n",
       "\n",
       ".toggle-slider {\n",
       "    position: absolute;\n",
       "    cursor: pointer;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    right: 0;\n",
       "    bottom: 0;\n",
       "    background-color: rgba(128, 128, 128, 0.3);\n",
       "    transition: .4s;\n",
       "    border-radius: 24px;\n",
       "}\n",
       "\n",
       ".toggle-slider:before {\n",
       "    position: absolute;\n",
       "    content: &quot;&quot;;\n",
       "    height: 18px;\n",
       "    width: 18px;\n",
       "    left: 3px;\n",
       "    bottom: 3px;\n",
       "    background-color: var(--background-color);\n",
       "    transition: .4s;\n",
       "    border-radius: 50%;\n",
       "}\n",
       "\n",
       ".toggle-switch input:checked + .toggle-slider {\n",
       "    background-color: var(--text-color);\n",
       "}\n",
       "\n",
       ".toggle-switch input:checked + .toggle-slider:before {\n",
       "    transform: translateX(24px);\n",
       "}\n",
       "\n",
       ".logic-toggle {\n",
       "    font-size: 0.9em;\n",
       "    opacity: 0.9;\n",
       "}\n",
       "\n",
       ".table-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       ".table-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 4.5rem;\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".table-panel {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    right: 0;\n",
       "    width: 50%;\n",
       "    height: 100%;\n",
       "    background-color: var(--background-color);\n",
       "    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);\n",
       "    transform: translateX(100%);\n",
       "    transition: transform 0.3s ease-in-out;\n",
       "    z-index: 5;\n",
       "    overflow-y: auto;\n",
       "    padding: 2rem;\n",
       "}\n",
       "\n",
       ".table-close-button {\n",
       "    position: absolute;\n",
       "    top: 1rem;\n",
       "    right: 1rem;\n",
       "    background: none;\n",
       "    border: none;\n",
       "    cursor: pointer;\n",
       "    padding: 0.5rem;\n",
       "    color: inherit;\n",
       "    border-radius: 0.25rem;\n",
       "}\n",
       "\n",
       ".table-close-button:hover {\n",
       "    background-color: rgba(0, 0, 0, 0.1);\n",
       "}\n",
       "\n",
       ".dark-theme .table-close-button:hover {\n",
       "    background-color: rgba(255, 255, 255, 0.1);\n",
       "}\n",
       "\n",
       ".table-panel.open {\n",
       "    transform: translateX(0);\n",
       "}\n",
       "\n",
       ".table-panel table {\n",
       "    width: 100%;\n",
       "    border-collapse: separate;\n",
       "    border-spacing: 0;\n",
       "    margin-bottom: 2rem;\n",
       "    border-radius: 8px;\n",
       "    overflow: hidden;\n",
       "    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",
       "}\n",
       "\n",
       ".table-panel th {\n",
       "    background-color: var(--background-color);\n",
       "    color: var(--text-color);\n",
       "    font-weight: 600;\n",
       "    text-transform: uppercase;\n",
       "    font-size: 0.85rem;\n",
       "    letter-spacing: 0.05em;\n",
       "    padding: 0.75rem 1rem;\n",
       "    border-bottom: 2px solid rgba(128, 128, 128, 0.2);\n",
       "    position: sticky;\n",
       "    top: 0;\n",
       "    z-index: 10;\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       ".table-panel td {\n",
       "    padding: 0.5rem 1rem;\n",
       "    border-bottom: 1px solid rgba(128, 128, 128, 0.1);\n",
       "    color: var(--text-color);\n",
       "    font-size: 0.95rem;\n",
       "    line-height: 1.4;\n",
       "    max-width: 300px;\n",
       "    overflow: hidden;\n",
       "    text-overflow: ellipsis;\n",
       "    white-space: nowrap;\n",
       "}\n",
       "\n",
       ".table-panel tr:last-child td {\n",
       "    border-bottom: none;\n",
       "}\n",
       "\n",
       ".table-panel tbody tr:hover {\n",
       "    background-color: rgba(128, 128, 128, 0.05);\n",
       "    transition: background-color 0.2s ease;\n",
       "}\n",
       "\n",
       "/* Add alternating row colors */\n",
       ".table-panel tbody tr:nth-child(even) {\n",
       "    background-color: rgba(128, 128, 128, 0.02);\n",
       "}\n",
       "\n",
       "/* Add responsive scrolling for table content */\n",
       ".table-panel {\n",
       "    scrollbar-width: thin;\n",
       "    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar {\n",
       "    width: 8px;\n",
       "    height: 8px;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar-track {\n",
       "    background: transparent;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar-thumb {\n",
       "    background-color: rgba(128, 128, 128, 0.3);\n",
       "    border-radius: 4px;\n",
       "}\n",
       " \n",
       ".table-panel .table-section h2 {\n",
       "    color: var(--text-color);\n",
       "    font-size: 1.25rem;\n",
       "    font-weight: 600;\n",
       "    margin: 2rem 0 1rem;\n",
       "    padding-bottom: 0.5rem;\n",
       "    border-bottom: 2px solid rgba(128, 128, 128, 0.2);\n",
       "}\n",
       "\n",
       "#display-textbox-container.with-table {\n",
       "    left: 0%;\n",
       "    width: 45%;\n",
       "}\n",
       "\n",
       ".entity-table-mark {\n",
       "    padding-right: 0.3em;\n",
       "    padding-left: 0.3em;\n",
       "    padding-top: 0.05em;\n",
       "    padding-bottom: 0.05em;\n",
       "    margin: 0 0.1em;\n",
       "    line-height: 1;\n",
       "    border-radius: 0.35em;\n",
       "    background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);\n",
       "    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */\n",
       "} \n",
       "\n",
       ".entity-highlight {\n",
       "    text-shadow: 0 0 0.5px currentColor;\n",
       "    font-synthesis: none;\n",
       "    transition: all 0.3s ease;\n",
       "}\n",
       "\n",
       "/* Use the entity&#x27;s background color for glow via JavaScript */\n",
       ".entity-highlight-glow {\n",
       "    box-shadow: 0 0 8px currentColor, 0 0 12px currentColor;\n",
       "} \n",
       "        &lt;/style&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body&gt;\n",
       "        &lt;div id=&quot;display-textbox-container&quot;&gt;\n",
       "            &lt;div id=&quot;display-textbox&quot;&gt;&lt;/div&gt;\n",
       "            &lt;svg id=&quot;display-relation&quot;&gt;&lt;/svg&gt;\n",
       "        &lt;/div&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot;&gt;\n",
       "            // Embed the data as JavaScript variables\n",
       "            const data = {&quot;text&quot;: &quot;\\nDr. Emily Johnson, a cardiologist at Green Valley Hospital, recently treated a 45-year-old male patient with \\na history of hypertension and Type 2 diabetes. The patient was prescribed Lisinopril, 10 mg once daily, to manage his blood pressure, \\nand Metformin, 500 mg twice daily, for glucose control. During a follow-up visit, the patient reported occasional dizziness and fatigue. \\nAfter reviewing the symptoms, Dr. Johnson decided to adjust the Lisinopril dosage to 5 mg and advised the patient to monitor his \\nblood pressure levels closely over the next two weeks.\\n&quot;, &quot;entities&quot;: [{&quot;entity_id&quot;: &quot;0&quot;, &quot;start&quot;: 124, &quot;end&quot;: 136, &quot;attr&quot;: {&quot;Type&quot;: &quot;condition&quot;}}, {&quot;entity_id&quot;: &quot;1&quot;, &quot;start&quot;: 141, &quot;end&quot;: 156, &quot;attr&quot;: {&quot;Type&quot;: &quot;condition&quot;}}, {&quot;entity_id&quot;: &quot;2&quot;, &quot;start&quot;: 185, &quot;end&quot;: 195, &quot;attr&quot;: {&quot;Type&quot;: &quot;medication&quot;, &quot;Dosage&quot;: &quot;10 mg&quot;, &quot;Frequency&quot;: &quot;once daily&quot;}}, {&quot;entity_id&quot;: &quot;3&quot;, &quot;start&quot;: 250, &quot;end&quot;: 259, &quot;attr&quot;: {&quot;Type&quot;: &quot;medication&quot;, &quot;Dosage&quot;: &quot;500 mg&quot;, &quot;Frequency&quot;: &quot;twice daily&quot;}}, {&quot;entity_id&quot;: &quot;4&quot;, &quot;start&quot;: 360, &quot;end&quot;: 369, &quot;attr&quot;: {&quot;Type&quot;: &quot;adverse_reaction&quot;}}, {&quot;entity_id&quot;: &quot;5&quot;, &quot;start&quot;: 374, &quot;end&quot;: 381, &quot;attr&quot;: {&quot;Type&quot;: &quot;adverse_reaction&quot;}}], &quot;theme&quot;: &quot;light&quot;, &quot;light_theme_colors&quot;: [{&quot;color_name&quot;: &quot;blue&quot;, &quot;color_code&quot;: &quot;#1f77b4&quot;}, {&quot;color_name&quot;: &quot;orange&quot;, &quot;color_code&quot;: &quot;#ff7f0e&quot;}, {&quot;color_name&quot;: &quot;green&quot;, &quot;color_code&quot;: &quot;#2ca02c&quot;}, {&quot;color_name&quot;: &quot;red&quot;, &quot;color_code&quot;: &quot;#d62728&quot;}, {&quot;color_name&quot;: &quot;purple&quot;, &quot;color_code&quot;: &quot;#9467bd&quot;}, {&quot;color_name&quot;: &quot;brown&quot;, &quot;color_code&quot;: &quot;#8c564b&quot;}, {&quot;color_name&quot;: &quot;pink&quot;, &quot;color_code&quot;: &quot;#e377c2&quot;}, {&quot;color_name&quot;: &quot;gray&quot;, &quot;color_code&quot;: &quot;#7f7f7f&quot;}, {&quot;color_name&quot;: &quot;yellow-green&quot;, &quot;color_code&quot;: &quot;#bcbd22&quot;}, {&quot;color_name&quot;: &quot;cyan&quot;, &quot;color_code&quot;: &quot;#17becf&quot;}, {&quot;color_name&quot;: &quot;teal&quot;, &quot;color_code&quot;: &quot;#008080&quot;}, {&quot;color_name&quot;: &quot;gold&quot;, &quot;color_code&quot;: &quot;#ffd700&quot;}, {&quot;color_name&quot;: &quot;lavender&quot;, &quot;color_code&quot;: &quot;#e6e6fa&quot;}, {&quot;color_name&quot;: &quot;salmon&quot;, &quot;color_code&quot;: &quot;#fa8072&quot;}, {&quot;color_name&quot;: &quot;turquoise&quot;, &quot;color_code&quot;: &quot;#40e0d0&quot;}, {&quot;color_name&quot;: &quot;magenta&quot;, &quot;color_code&quot;: &quot;#ff00ff&quot;}, {&quot;color_name&quot;: &quot;lime&quot;, &quot;color_code&quot;: &quot;#00ff00&quot;}, {&quot;color_name&quot;: &quot;navy&quot;, &quot;color_code&quot;: &quot;#000080&quot;}, {&quot;color_name&quot;: &quot;beige&quot;, &quot;color_code&quot;: &quot;#f5f5dc&quot;}, {&quot;color_name&quot;: &quot;coral&quot;, &quot;color_code&quot;: &quot;#ff7f50&quot;}], &quot;dark_theme_colors&quot;: [{&quot;color_name&quot;: &quot;deep orange&quot;, &quot;color_code&quot;: &quot;#FF5722&quot;}, {&quot;color_name&quot;: &quot;green&quot;, &quot;color_code&quot;: &quot;#4CAF50&quot;}, {&quot;color_name&quot;: &quot;blue&quot;, &quot;color_code&quot;: &quot;#2196F3&quot;}, {&quot;color_name&quot;: &quot;yellow&quot;, &quot;color_code&quot;: &quot;#FFEB3B&quot;}, {&quot;color_name&quot;: &quot;purple&quot;, &quot;color_code&quot;: &quot;#9C27B0&quot;}, {&quot;color_name&quot;: &quot;light blue&quot;, &quot;color_code&quot;: &quot;#03A9F4&quot;}, {&quot;color_name&quot;: &quot;amber&quot;, &quot;color_code&quot;: &quot;#FFC107&quot;}, {&quot;color_name&quot;: &quot;pink&quot;, &quot;color_code&quot;: &quot;#FF4081&quot;}, {&quot;color_name&quot;: &quot;light green&quot;, &quot;color_code&quot;: &quot;#8BC34A&quot;}, {&quot;color_name&quot;: &quot;orange&quot;, &quot;color_code&quot;: &quot;#FF9800&quot;}, {&quot;color_name&quot;: &quot;deep purple&quot;, &quot;color_code&quot;: &quot;#673AB7&quot;}, {&quot;color_name&quot;: &quot;dark teal&quot;, &quot;color_code&quot;: &quot;#004D40&quot;}, {&quot;color_name&quot;: &quot;midnight blue&quot;, &quot;color_code&quot;: &quot;#191970&quot;}, {&quot;color_name&quot;: &quot;chocolate&quot;, &quot;color_code&quot;: &quot;#D2691E&quot;}, {&quot;color_name&quot;: &quot;dark cyan&quot;, &quot;color_code&quot;: &quot;#008B8B&quot;}, {&quot;color_name&quot;: &quot;crimson&quot;, &quot;color_code&quot;: &quot;#DC143C&quot;}, {&quot;color_name&quot;: &quot;olive&quot;, &quot;color_code&quot;: &quot;#808000&quot;}, {&quot;color_name&quot;: &quot;dark red&quot;, &quot;color_code&quot;: &quot;#8B0000&quot;}, {&quot;color_name&quot;: &quot;steel blue&quot;, &quot;color_code&quot;: &quot;#4682B4&quot;}, {&quot;color_name&quot;: &quot;indigo&quot;, &quot;color_code&quot;: &quot;#4B0082&quot;}], &quot;relations&quot;: [{&quot;entity_1_id&quot;: &quot;2&quot;, &quot;entity_2_id&quot;: &quot;4&quot;}, {&quot;entity_1_id&quot;: &quot;2&quot;, &quot;entity_2_id&quot;: &quot;5&quot;}, {&quot;entity_1_id&quot;: &quot;3&quot;, &quot;entity_2_id&quot;: &quot;4&quot;}, {&quot;entity_1_id&quot;: &quot;3&quot;, &quot;entity_2_id&quot;: &quot;5&quot;}]};\n",
       "            \n",
       "            // Original JavaScript logic\n",
       "            class DisplayTextBoxManager {\n",
       "    constructor(light_theme_colors, dark_theme_colors) {\n",
       "        this.light_theme_colors = light_theme_colors;\n",
       "        this.dark_theme_colors = dark_theme_colors;\n",
       "    }\n",
       "\n",
       "\n",
       "    updateEntities(text, entities, currentTheme) {\n",
       "        // Clear current display textbox\n",
       "        var textElement = document.getElementById(&quot;display-textbox&quot;);\n",
       "        textElement.innerHTML = &#x27;&#x27;;\n",
       "\n",
       "        // If no entities\n",
       "        if (!entities || entities.length === 0) {\n",
       "            text.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                textElement.appendChild(document.createTextNode(line));\n",
       "                if (index &lt; array.length - 1) {\n",
       "                    textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                }\n",
       "            });\n",
       "            return null;\n",
       "        }\n",
       "\n",
       "        // Sort entities by start index\n",
       "        entities.forEach(entity =&gt; {\n",
       "            entity.start = parseInt(entity.start);\n",
       "            entity.end = parseInt(entity.end);\n",
       "        });\n",
       "        entities.sort((a, b) =&gt; a.start - b.start);\n",
       "\n",
       "        // Add entities to the display textbox\n",
       "        var lastIndex = 0;\n",
       "        entities.forEach(entity =&gt; {\n",
       "            // Add text before the entity\n",
       "            if (lastIndex &lt; entity.start) {\n",
       "                var nonEntityText = text.substring(lastIndex, entity.start);\n",
       "                nonEntityText.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                    textElement.appendChild(document.createTextNode(line));\n",
       "                    if (index &lt; array.length - 1) {\n",
       "                        textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                    }\n",
       "                });\n",
       "            }\n",
       "\n",
       "            // Add the entity text\n",
       "            var entityText = text.substring(entity.start, entity.end);\n",
       "            var entityElement = document.createElement(&quot;mark&quot;);\n",
       "            entityElement.id = entity.entity_id;\n",
       "            entityElement.setAttribute(&#x27;entity-id&#x27;, entity.entity_id);\n",
       "            entityElement.className = &quot;entity-mark&quot;;\n",
       "            entityElement.textContent = entityText;\n",
       "            entityElement.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, true));\n",
       "            entityElement.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, false));\n",
       "\n",
       "            // Assign entity color. If no color is provided, use the default background color in CSS\n",
       "            if (entity.color !== undefined) {\n",
       "                entityElement.style.background = &#x27;none&#x27;;\n",
       "                // if entity.color is a string, use it as the background color\n",
       "                if (typeof entity.color === &#x27;string&#x27;) {\n",
       "                    entityElement.style.backgroundColor = entity.color;\n",
       "                }\n",
       "                // if entity.color is a integer, use it as the index of the color palette\n",
       "                else if (typeof entity.color === &#x27;number&#x27;) {\n",
       "                    if (currentTheme === &#x27;light&#x27;) {\n",
       "                        entityElement.style.backgroundColor = this.light_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                    }\n",
       "                    else {\n",
       "                        entityElement.style.backgroundColor = this.dark_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            entityElement.addEventListener(&#x27;mouseenter&#x27;, (event) =&gt; {\n",
       "                if (entity.attr) {\n",
       "                    const prettyAttributes = JSON.stringify(entity.attr, null, 2).replace(/\\n/g, &#x27;&lt;br&gt;&#x27;).replace(/  /g, &#x27;&amp;nbsp;&amp;nbsp;&#x27;);\n",
       "                    this.showTooltip(event, `Entity ID: ${entity.entity_id}&lt;br&gt;Text: ${entityText}&lt;br&gt;Attributes: ${prettyAttributes}`);\n",
       "                }\n",
       "                else {\n",
       "                    this.showTooltip(event, `Entity ID: ${entity.entity_id}&lt;br&gt;Text: ${entityText}`);\n",
       "                }\n",
       "            });\n",
       "\n",
       "            entityElement.addEventListener(&#x27;mouseleave&#x27;, (event) =&gt; {\n",
       "                this.hideTooltip();\n",
       "            });\n",
       "            textElement.appendChild(entityElement);\n",
       "\n",
       "            lastIndex = entity.end;\n",
       "            });\n",
       "\n",
       "            // Add remaining text after the last entity\n",
       "            if (lastIndex &lt; text.length) {\n",
       "                var remainingText = text.substring(lastIndex);\n",
       "                remainingText.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                    textElement.appendChild(document.createTextNode(line));\n",
       "                    if (index &lt; array.length - 1) {\n",
       "                        textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                    }\n",
       "                });\n",
       "            }\n",
       "    }\n",
       "\n",
       "    \n",
       "    showTooltip(event, content) {\n",
       "        // Remove any existing tooltip\n",
       "        var existingTooltip = document.getElementById(&quot;custom-tooltip&quot;);\n",
       "        if (existingTooltip) {\n",
       "            existingTooltip.remove();\n",
       "        }\n",
       "\n",
       "        // Create a new tooltip\n",
       "        var tooltip = document.createElement(&quot;div&quot;);\n",
       "        tooltip.id = &quot;custom-tooltip&quot;;\n",
       "        tooltip.className = &quot;custom-tooltip&quot;;\n",
       "        tooltip.innerHTML = content;\n",
       "        document.body.appendChild(tooltip); \n",
       "\n",
       "        // Limit the tooltip width to 1/3 of the screen width\n",
       "        var maxWidth = window.innerWidth / 3;\n",
       "        tooltip.style.maxWidth = maxWidth + &quot;px&quot;;\n",
       "        \n",
       "        // Position the tooltip\n",
       "        var rect = event.target.getBoundingClientRect();\n",
       "        var x = rect.left + window.scrollX;\n",
       "        // 5px above the entity\n",
       "        var y = rect.top + window.scrollY - tooltip.offsetHeight - 5; \n",
       "\n",
       "        // Ensure the tooltip doesn&#x27;t go off-screen\n",
       "        if (x + tooltip.offsetWidth &gt; window.innerWidth) {\n",
       "            // 10px padding from the right edge\n",
       "            x = window.innerWidth - tooltip.offsetWidth - 10; \n",
       "        }\n",
       "        if (y &lt; 0) {\n",
       "            // 5px below the entity if it goes off-screen\n",
       "            y = rect.bottom + window.scrollY + 5; \n",
       "        }\n",
       "\n",
       "        tooltip.style.left = x + &quot;px&quot;;\n",
       "        tooltip.style.top = y + &quot;px&quot;;\n",
       "    }\n",
       "\n",
       "    hideTooltip() {\n",
       "        var tooltip = document.getElementById(&quot;custom-tooltip&quot;);\n",
       "        if (tooltip) {\n",
       "            tooltip.remove();\n",
       "        }\n",
       "    }\n",
       "\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        // Find all entities with this ID in the text display\n",
       "        const textEntities = document.querySelectorAll(`mark[entity-id=&quot;${entityId}&quot;]`);\n",
       "        \n",
       "        textEntities.forEach(entity =&gt; {\n",
       "            if (isEnter) {\n",
       "                entity.classList.add(&#x27;entity-highlight&#x27;);\n",
       "                // Get the background color and use it for the glow\n",
       "                const style = window.getComputedStyle(entity);\n",
       "                const backgroundColor = style.backgroundColor;\n",
       "                const glowColor = backgroundColor === &#x27;rgba(0, 0, 0, 0)&#x27; || backgroundColor === &#x27;transparent&#x27; ? &#x27;#3f87a6&#x27; : backgroundColor;\n",
       "                entity.style.boxShadow = `0 0 8px ${glowColor}, 0 0 12px ${glowColor}`;\n",
       "            } else {\n",
       "                entity.classList.remove(&#x27;entity-highlight&#x27;);\n",
       "                entity.style.boxShadow = &#x27;&#x27;;\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "\n",
       "    alineDisplayRelation() {\n",
       "        // Get the display-textbox (div) and display-relation (svg) elements\n",
       "        const textDiv = document.getElementById(&quot;display-textbox&quot;);\n",
       "        const svgContainer = document.getElementById(&quot;display-relation&quot;);\n",
       "        \n",
       "        if (!textDiv || !svgContainer) {\n",
       "            console.error(&quot;Required elements not found&quot;);\n",
       "            return;\n",
       "        }\n",
       "    \n",
       "        // Get dimensions of the display-textbox\n",
       "        const textDivRect = textDiv.getBoundingClientRect();\n",
       "    \n",
       "        // Set dimensions of the SVG container\n",
       "        svgContainer.style.height = `${textDivRect.height}px`;\n",
       "        svgContainer.style.width = `${textDivRect.width}px`;\n",
       "        \n",
       "        // Ensure SVG viewport is set correctly\n",
       "        svgContainer.setAttribute(&#x27;viewBox&#x27;, `0 0 ${textDivRect.width} ${textDivRect.height}`);\n",
       "    }\n",
       "\n",
       "    updateRelations(relations, r) {\n",
       "        // Get the display-textbox (div) and display-relation (svg) elements\n",
       "        const textDiv = document.getElementById(&quot;display-textbox&quot;);\n",
       "        const svgContainer = document.getElementById(&quot;display-relation&quot;);\n",
       "        \n",
       "        if (!textDiv || !svgContainer) {\n",
       "            console.error(&quot;Required elements not found for updating relations&quot;);\n",
       "            return;\n",
       "        }\n",
       "    \n",
       "        const textDivRect = textDiv.getBoundingClientRect();\n",
       "    \n",
       "        // Clear current relation lines\n",
       "        svgContainer.innerHTML = &#x27;&#x27;;\n",
       "    \n",
       "        // If no relations\n",
       "        if (!relations || relations.length === 0) {\n",
       "            return null;\n",
       "        }\n",
       "    \n",
       "        relations.forEach((rel, index) =&gt; {\n",
       "            const entity1Element = document.getElementById(rel.entity_1_id);\n",
       "            const entity2Element = document.getElementById(rel.entity_2_id);\n",
       "    \n",
       "            // Check if elements exist\n",
       "            if (!entity1Element || !entity2Element) {\n",
       "                console.error(&#x27;Entity elements not found:&#x27;, {\n",
       "                    relation: rel,\n",
       "                    entity1Found: !!entity1Element,\n",
       "                    entity2Found: !!entity2Element\n",
       "                });\n",
       "                return;\n",
       "            }\n",
       "    \n",
       "            const entity1Rect = entity1Element.getBoundingClientRect();\n",
       "            const entity2Rect = entity2Element.getBoundingClientRect();\n",
       "    \n",
       "            // Get the computed style of the entity elements\n",
       "            const entity1Style = window.getComputedStyle(entity1Element);\n",
       "            const entity2Style = window.getComputedStyle(entity2Element);\n",
       "            const entity1LineHeight = parseFloat(entity1Style.lineHeight);\n",
       "            const entity2LineHeight = parseFloat(entity2Style.lineHeight);\n",
       "    \n",
       "            // Calculate the number of lines\n",
       "            const entity1Lines = entity1Rect.height / entity1LineHeight;\n",
       "            const entity2Lines = entity2Rect.height / entity2LineHeight;\n",
       "    \n",
       "            // Handle line-broken entity\n",
       "            const entity1X = entity1Lines &gt; 2 \n",
       "                ? (entity1Rect.right - textDivRect.left)\n",
       "                : (entity1Rect.left + entity1Rect.width / 2 - textDivRect.left);\n",
       "            \n",
       "            const entity1Y = entity1Rect.top - textDivRect.top;\n",
       "            \n",
       "            const entity2X = entity2Lines &gt; 2 \n",
       "                ? (entity2Rect.right - textDivRect.left)\n",
       "                : (entity2Rect.left + entity2Rect.width / 2 - textDivRect.left);\n",
       "            \n",
       "            const entity2Y = entity2Rect.top - textDivRect.top;\n",
       "    \n",
       "            // start with entity on left\n",
       "            var startX = null;\n",
       "            var startY = null;\n",
       "            var endX = null;\n",
       "            var endY = null;\n",
       "            if (entity1X &lt; entity2X) {\n",
       "                startX = entity1X;\n",
       "                startY = entity1Y;\n",
       "                endX = entity2X;\n",
       "                endY = entity2Y;\n",
       "            } else {\n",
       "                startX = entity2X;\n",
       "                startY = entity2Y;\n",
       "                endX = entity1X;\n",
       "                endY = entity1Y;\n",
       "            }\n",
       "    \n",
       "            // Create the SVG path\n",
       "            const path = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;path&quot;);\n",
       "            let pathD;\n",
       "            // If start and end entities are on the same y-axis\n",
       "            if (startY === endY) {\n",
       "                pathD = `M${startX} ${startY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${startY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            // If start entity is below end entities\n",
       "            else if (startY &gt; endY) {\n",
       "                pathD = `M${startX} ${startY} L${startX} ${endY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${endY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            // If start entity is above end entities\n",
       "            else {\n",
       "                pathD = `M${startX} ${startY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${startY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            \n",
       "            path.setAttribute(&quot;d&quot;, pathD);\n",
       "            path.setAttribute(&quot;class&quot;, &quot;relation-path&quot;);\n",
       "            svgContainer.appendChild(path);\n",
       "        });\n",
       "    }\n",
       "\n",
       "}\n",
       "class FilterManager {\n",
       "    constructor(onFilterChange) {\n",
       "        this.onFilterChange = onFilterChange;\n",
       "        this.filterState = null;\n",
       "    }\n",
       "\n",
       "    extractAttributeFilters(entities) {\n",
       "        const attributeFilters = new Map();\n",
       "        \n",
       "        entities.forEach(entity =&gt; {\n",
       "            if (entity.attr) {\n",
       "                Object.entries(entity.attr).forEach(([key, value]) =&gt; {\n",
       "                    if (!attributeFilters.has(key)) {\n",
       "                        attributeFilters.set(key, new Set());\n",
       "                    }\n",
       "                    attributeFilters.get(key).add(value);\n",
       "                });\n",
       "            }\n",
       "        });\n",
       "        \n",
       "        this.filterState = {\n",
       "            keys: Array.from(attributeFilters.entries()).map(([key, values]) =&gt; ({\n",
       "                key,\n",
       "                values: Array.from(values),\n",
       "                selected: true,\n",
       "                valueFilters: Array.from(values).map(value =&gt; ({\n",
       "                    value,\n",
       "                    selected: true\n",
       "                }))\n",
       "            })),\n",
       "            useAndLogic: false\n",
       "        };\n",
       "\n",
       "        return this.filterState;\n",
       "    }\n",
       "\n",
       "    handleFilterChange() {\n",
       "        if (this.onFilterChange) {\n",
       "            this.onFilterChange(this.filterState);\n",
       "        }\n",
       "    }\n",
       "\n",
       "    createFilterUI(panel) {\n",
       "        const filterContainer = document.createElement(&#x27;div&#x27;);\n",
       "        filterContainer.className = &#x27;attribute-filters&#x27;;\n",
       "        filterContainer.style.padding = &#x27;0 2rem 2rem 2rem&#x27;;\n",
       "    \n",
       "        // Add logic toggle switch\n",
       "        const logicToggleContainer = document.createElement(&#x27;div&#x27;);\n",
       "        logicToggleContainer.className = &#x27;logic-toggle&#x27;;\n",
       "        logicToggleContainer.style.marginBottom = &#x27;1.5rem&#x27;;\n",
       "        logicToggleContainer.style.padding = &#x27;1rem&#x27;;\n",
       "        logicToggleContainer.style.backgroundColor = &#x27;rgba(128, 128, 128, 0.1)&#x27;;\n",
       "        logicToggleContainer.style.borderRadius = &#x27;4px&#x27;;\n",
       "    \n",
       "        const logicLabel = document.createElement(&#x27;label&#x27;);\n",
       "        logicLabel.className = &#x27;logic-label&#x27;;\n",
       "        logicLabel.style.display = &#x27;flex&#x27;;\n",
       "        logicLabel.style.alignItems = &#x27;center&#x27;;\n",
       "        logicLabel.style.justifyContent = &#x27;space-between&#x27;;\n",
       "        logicLabel.style.cursor = &#x27;pointer&#x27;;\n",
       "    \n",
       "        const labelText = document.createElement(&#x27;span&#x27;);\n",
       "        labelText.textContent = &#x27;Logic between attribute keys: &#x27;;\n",
       "        labelText.style.marginRight = &#x27;8px&#x27;;\n",
       "    \n",
       "        const toggleContainer = document.createElement(&#x27;div&#x27;);\n",
       "        toggleContainer.style.display = &#x27;flex&#x27;;\n",
       "        toggleContainer.style.alignItems = &#x27;center&#x27;;\n",
       "        toggleContainer.style.gap = &#x27;8px&#x27;;\n",
       "    \n",
       "        const orText = document.createElement(&#x27;span&#x27;);\n",
       "        orText.textContent = &#x27;OR&#x27;;\n",
       "        orText.style.fontSize = &#x27;0.9em&#x27;;\n",
       "    \n",
       "        const toggleSwitch = document.createElement(&#x27;div&#x27;);\n",
       "        toggleSwitch.className = &#x27;toggle-switch&#x27;;\n",
       "    \n",
       "        const toggleInput = document.createElement(&#x27;input&#x27;);\n",
       "        toggleInput.type = &#x27;checkbox&#x27;;\n",
       "        toggleInput.checked = this.filterState.useAndLogic;\n",
       "        toggleInput.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "            this.filterState.useAndLogic = e.target.checked;\n",
       "            this.handleFilterChange();\n",
       "        });\n",
       "    \n",
       "        const toggleSlider = document.createElement(&#x27;span&#x27;);\n",
       "        toggleSlider.className = &#x27;toggle-slider&#x27;;\n",
       "    \n",
       "        const andText = document.createElement(&#x27;span&#x27;);\n",
       "        andText.textContent = &#x27;AND&#x27;;\n",
       "        andText.style.fontSize = &#x27;0.9em&#x27;;\n",
       "    \n",
       "        toggleSwitch.appendChild(toggleInput);\n",
       "        toggleSwitch.appendChild(toggleSlider);\n",
       "    \n",
       "        toggleContainer.appendChild(orText);\n",
       "        toggleContainer.appendChild(toggleSwitch);\n",
       "        toggleContainer.appendChild(andText);\n",
       "    \n",
       "        logicLabel.appendChild(labelText);\n",
       "        logicLabel.appendChild(toggleContainer);\n",
       "        logicToggleContainer.appendChild(logicLabel);\n",
       "        filterContainer.appendChild(logicToggleContainer);\n",
       "    \n",
       "        // Create attribute key sections\n",
       "        this.filterState.keys.forEach(filter =&gt; {\n",
       "            const keySection = document.createElement(&#x27;div&#x27;);\n",
       "            keySection.className = &#x27;filter-section&#x27;;\n",
       "            keySection.style.marginBottom = &#x27;1rem&#x27;;\n",
       "    \n",
       "            const keyCheckbox = document.createElement(&#x27;input&#x27;);\n",
       "            keyCheckbox.type = &#x27;checkbox&#x27;;\n",
       "            keyCheckbox.checked = filter.selected;\n",
       "            keyCheckbox.id = `filter-${filter.key}`;\n",
       "            keyCheckbox.style.marginRight = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "            const keyLabel = document.createElement(&#x27;label&#x27;);\n",
       "            keyLabel.htmlFor = `filter-${filter.key}`;\n",
       "            keyLabel.textContent = filter.key;\n",
       "            keyLabel.style.fontWeight = &#x27;bold&#x27;;\n",
       "    \n",
       "            const valuesContainer = document.createElement(&#x27;div&#x27;);\n",
       "            valuesContainer.style.marginLeft = &#x27;1.5rem&#x27;;\n",
       "            valuesContainer.style.marginTop = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "            keySection.appendChild(keyCheckbox);\n",
       "            keySection.appendChild(keyLabel);\n",
       "    \n",
       "            filter.valueFilters.forEach(valueFilter =&gt; {\n",
       "                const valueDiv = document.createElement(&#x27;div&#x27;);\n",
       "                valueDiv.style.marginBottom = &#x27;0.25rem&#x27;;\n",
       "    \n",
       "                const valueCheckbox = document.createElement(&#x27;input&#x27;);\n",
       "                valueCheckbox.type = &#x27;checkbox&#x27;;\n",
       "                valueCheckbox.checked = valueFilter.selected;\n",
       "                valueCheckbox.id = `filter-${filter.key}-${valueFilter.value}`;\n",
       "                valueCheckbox.style.marginRight = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "                const valueLabel = document.createElement(&#x27;label&#x27;);\n",
       "                valueLabel.htmlFor = `filter-${filter.key}-${valueFilter.value}`;\n",
       "                valueLabel.textContent = valueFilter.value;\n",
       "    \n",
       "                valueDiv.appendChild(valueCheckbox);\n",
       "                valueDiv.appendChild(valueLabel);\n",
       "                valuesContainer.appendChild(valueDiv);\n",
       "    \n",
       "                valueCheckbox.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "                    valueFilter.selected = e.target.checked;\n",
       "                    this.handleFilterChange();\n",
       "                });\n",
       "            });\n",
       "    \n",
       "            keySection.appendChild(valuesContainer);\n",
       "            filterContainer.appendChild(keySection);\n",
       "    \n",
       "            keyCheckbox.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "                filter.selected = e.target.checked;\n",
       "                filter.valueFilters.forEach(valueFilter =&gt; {\n",
       "                    valueFilter.selected = e.target.checked;\n",
       "                    const valueCheckbox = document.getElementById(`filter-${filter.key}-${valueFilter.value}`);\n",
       "                    if (valueCheckbox) {\n",
       "                        valueCheckbox.checked = e.target.checked;\n",
       "                    }\n",
       "                });\n",
       "                this.handleFilterChange();\n",
       "            });\n",
       "        });\n",
       "    \n",
       "        panel.appendChild(filterContainer);\n",
       "    }\n",
       "}\n",
       "class TableManager {\n",
       "    constructor(light_theme_colors, dark_theme_colors) {\n",
       "        this.light_theme_colors = light_theme_colors;\n",
       "        this.dark_theme_colors = dark_theme_colors;\n",
       "        this.entityTable = null;\n",
       "        this.relationTable = null;\n",
       "    }\n",
       "\n",
       "    createTablePanel(text, entities, relations, currentTheme) {\n",
       "        const panel = document.createElement(&#x27;div&#x27;);\n",
       "        panel.className = &#x27;table-panel&#x27;;\n",
       "\n",
       "        const closeButton = document.createElement(&#x27;button&#x27;);\n",
       "        closeButton.className = &#x27;table-close-button&#x27;;\n",
       "        closeButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;line x1=&quot;18&quot; y1=&quot;6&quot; x2=&quot;6&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;6&quot; y1=&quot;6&quot; x2=&quot;18&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&#x27;;\n",
       "        closeButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            panel.classList.remove(&#x27;open&#x27;);\n",
       "            document.getElementById(&#x27;display-textbox-container&#x27;).classList.remove(&#x27;with-table&#x27;);\n",
       "        });\n",
       "        panel.appendChild(closeButton);\n",
       "        \n",
       "        const content = document.createElement(&#x27;div&#x27;);\n",
       "        \n",
       "        const entitySection = document.createElement(&#x27;div&#x27;);\n",
       "        entitySection.className = &#x27;table-section&#x27;;\n",
       "        entitySection.innerHTML = &#x27;&lt;h2&gt;Entities&lt;/h2&gt;&#x27;;\n",
       "        const entityTable = document.createElement(&#x27;table&#x27;);\n",
       "        entitySection.appendChild(entityTable);\n",
       "        content.appendChild(entitySection);\n",
       "        this.entityTable = entityTable;\n",
       "        this.updateEntityTable(text, entities, currentTheme);\n",
       "\n",
       "        if (data.relations) {\n",
       "            const relationSection = document.createElement(&#x27;div&#x27;);\n",
       "            relationSection.className = &#x27;table-section&#x27;;\n",
       "            relationSection.innerHTML = &#x27;&lt;h2&gt;Relations&lt;/h2&gt;&#x27;;\n",
       "            const relationTable = document.createElement(&#x27;table&#x27;);\n",
       "            relationSection.appendChild(relationTable);\n",
       "            content.appendChild(relationSection);\n",
       "            this.relationTable = relationTable;\n",
       "            this.updateRelationTable(text, entities, relations, currentTheme);\n",
       "        }\n",
       "\n",
       "        panel.appendChild(content);\n",
       "        return panel;\n",
       "    }\n",
       "\n",
       "    updateEntityTable(text, entities, currentTheme) {\n",
       "        if (!this.entityTable) return;\n",
       "        this.entityTable.innerHTML = &#x27;&#x27;;\n",
       "        \n",
       "        const thead = document.createElement(&#x27;thead&#x27;);\n",
       "        const tbody = document.createElement(&#x27;tbody&#x27;);\n",
       "\n",
       "        const attributeKeys = new Set();\n",
       "        entities.forEach(entity =&gt; {\n",
       "            if (entity.attr) {\n",
       "                Object.keys(entity.attr).forEach(key =&gt; attributeKeys.add(key));\n",
       "            }\n",
       "        });\n",
       "        const sortedAttributeKeys = Array.from(attributeKeys).sort();\n",
       "\n",
       "        const headerRow = document.createElement(&#x27;tr&#x27;);\n",
       "        [&#x27;ID&#x27;, &#x27;Text&#x27;, ...sortedAttributeKeys].forEach(header =&gt; {\n",
       "            const th = document.createElement(&#x27;th&#x27;);\n",
       "            th.textContent = header;\n",
       "            headerRow.appendChild(th);\n",
       "        });\n",
       "        thead.appendChild(headerRow);\n",
       "\n",
       "        entities.forEach(entity =&gt; {\n",
       "            const row = document.createElement(&#x27;tr&#x27;);\n",
       "            \n",
       "            const idCell = document.createElement(&#x27;td&#x27;);\n",
       "            idCell.textContent = entity.entity_id;\n",
       "            row.appendChild(idCell);\n",
       "            \n",
       "            const textCell = document.createElement(&#x27;td&#x27;);\n",
       "            const entityMark = document.createElement(&#x27;mark&#x27;);\n",
       "            entityMark.className = &#x27;entity-table-mark&#x27;;\n",
       "            entityMark.setAttribute(&#x27;entity-id&#x27;, entity.entity_id);\n",
       "            entityMark.textContent = text.substring(entity.start, entity.end);\n",
       "            entityMark.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, true));\n",
       "            entityMark.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, false));\n",
       "            \n",
       "            if (entity.color !== undefined) {\n",
       "                entityMark.style.background = &#x27;none&#x27;;\n",
       "                if (typeof entity.color === &#x27;string&#x27;) {\n",
       "                    entityMark.style.backgroundColor = entity.color;\n",
       "                } else if (typeof entity.color === &#x27;number&#x27;) {\n",
       "                    entityMark.style.backgroundColor = currentTheme === &#x27;light&#x27; ? \n",
       "                        this.light_theme_colors[entity.color][&quot;color_code&quot;] : \n",
       "                        this.dark_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                }\n",
       "            }\n",
       "\n",
       "            textCell.appendChild(entityMark);\n",
       "            row.appendChild(textCell);\n",
       "            \n",
       "            sortedAttributeKeys.forEach(attrKey =&gt; {\n",
       "                const attrCell = document.createElement(&#x27;td&#x27;);\n",
       "                if (entity.attr &amp;&amp; entity.attr[attrKey] !== undefined) {\n",
       "                    attrCell.textContent = entity.attr[attrKey];\n",
       "                } else {\n",
       "                    attrCell.textContent = &#x27;-&#x27;;\n",
       "                    attrCell.style.color = &#x27;rgba(128, 128, 128, 0.5)&#x27;;\n",
       "                }\n",
       "                row.appendChild(attrCell);\n",
       "            });\n",
       "\n",
       "            tbody.appendChild(row);\n",
       "        });\n",
       "\n",
       "        this.entityTable.appendChild(thead);\n",
       "        this.entityTable.appendChild(tbody);\n",
       "    }\n",
       "\n",
       "    updateRelationTable(text, entities, relations, currentTheme) {\n",
       "        if (!this.relationTable) return;\n",
       "        this.relationTable.innerHTML = &#x27;&#x27;;\n",
       "        \n",
       "        const thead = document.createElement(&#x27;thead&#x27;);\n",
       "        const tbody = document.createElement(&#x27;tbody&#x27;);\n",
       "\n",
       "        const headerRow = document.createElement(&#x27;tr&#x27;);\n",
       "        [&#x27;Entity 1 ID&#x27;, &#x27;Entity 1&#x27;, &#x27;Entity 2 ID&#x27;, &#x27;Entity 2&#x27;].forEach(header =&gt; {\n",
       "            const th = document.createElement(&#x27;th&#x27;);\n",
       "            th.textContent = header;\n",
       "            headerRow.appendChild(th);\n",
       "        });\n",
       "        thead.appendChild(headerRow);\n",
       "\n",
       "        relations.forEach(relation =&gt; {\n",
       "            const row = document.createElement(&#x27;tr&#x27;);\n",
       "            \n",
       "            const entity1IdCell = document.createElement(&#x27;td&#x27;);\n",
       "            entity1IdCell.textContent = relation.entity_1_id;\n",
       "            row.appendChild(entity1IdCell);\n",
       "\n",
       "            const entity1Cell = document.createElement(&#x27;td&#x27;);\n",
       "            const entity1 = entities.find(e =&gt; e.entity_id === relation.entity_1_id);\n",
       "            if (entity1) {\n",
       "                const entityMark1 = document.createElement(&#x27;mark&#x27;);\n",
       "                entityMark1.className = &#x27;entity-table-mark&#x27;;\n",
       "                entityMark1.setAttribute(&#x27;entity-id&#x27;, entity1.entity_id);\n",
       "                entityMark1.textContent = text.substring(entity1.start, entity1.end);\n",
       "                entityMark1.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity1.entity_id, true));\n",
       "                entityMark1.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity1.entity_id, false));\n",
       "                \n",
       "                if (entity1.color !== undefined) {\n",
       "                    entityMark1.style.background = &#x27;none&#x27;;\n",
       "                    entityMark1.style.backgroundColor = typeof entity1.color === &#x27;string&#x27; ? \n",
       "                        entity1.color : \n",
       "                        (currentTheme === &#x27;light&#x27; ? \n",
       "                            this.light_theme_colors[entity1.color][&quot;color_code&quot;] : \n",
       "                            this.dark_theme_colors[entity1.color][&quot;color_code&quot;]);\n",
       "                }\n",
       "                entity1Cell.appendChild(entityMark1);\n",
       "            } else {\n",
       "                entity1Cell.textContent = relation.entity_1_id;\n",
       "            }\n",
       "            row.appendChild(entity1Cell);\n",
       "            \n",
       "            const entity2IdCell = document.createElement(&#x27;td&#x27;);\n",
       "            entity2IdCell.textContent = relation.entity_2_id;\n",
       "            row.appendChild(entity2IdCell);\n",
       "\n",
       "            const entity2Cell = document.createElement(&#x27;td&#x27;);\n",
       "            const entity2 = entities.find(e =&gt; e.entity_id === relation.entity_2_id);\n",
       "            if (entity2) {\n",
       "                const entityMark2 = document.createElement(&#x27;mark&#x27;);\n",
       "                entityMark2.className = &#x27;entity-table-mark&#x27;;\n",
       "                entityMark2.setAttribute(&#x27;entity-id&#x27;, entity2.entity_id);\n",
       "                entityMark2.textContent = text.substring(entity2.start, entity2.end);\n",
       "                entityMark2.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity2.entity_id, true));\n",
       "                entityMark2.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity2.entity_id, false));\n",
       "                \n",
       "                if (entity2.color !== undefined) {\n",
       "                    entityMark2.style.background = &#x27;none&#x27;;\n",
       "                    entityMark2.style.backgroundColor = typeof entity2.color === &#x27;string&#x27; ? \n",
       "                        entity2.color : \n",
       "                        (currentTheme === &#x27;light&#x27; ? \n",
       "                            this.light_theme_colors[entity2.color][&quot;color_code&quot;] : \n",
       "                            this.dark_theme_colors[entity2.color][&quot;color_code&quot;]);\n",
       "                }\n",
       "                entity2Cell.appendChild(entityMark2);\n",
       "            } else {\n",
       "                entity2Cell.textContent = relation.entity_2_id;\n",
       "            }\n",
       "            row.appendChild(entity2Cell);\n",
       "            \n",
       "            tbody.appendChild(row);\n",
       "        });\n",
       "\n",
       "        this.relationTable.appendChild(thead);\n",
       "        this.relationTable.appendChild(tbody);\n",
       "    }\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        const textEntities = document.querySelectorAll(`mark[entity-id=&quot;${entityId}&quot;]`);\n",
       "        textEntities.forEach(entity =&gt; {\n",
       "            if (isEnter) {\n",
       "                entity.classList.add(&#x27;entity-highlight&#x27;);\n",
       "                const style = window.getComputedStyle(entity);\n",
       "                const backgroundColor = style.backgroundColor;\n",
       "                const glowColor = backgroundColor === &#x27;rgba(0, 0, 0, 0)&#x27; || backgroundColor === &#x27;transparent&#x27; ? &#x27;#3f87a6&#x27; : backgroundColor;\n",
       "                entity.style.boxShadow = `0 0 8px ${glowColor}, 0 0 12px ${glowColor}`;\n",
       "            } else {\n",
       "                entity.classList.remove(&#x27;entity-highlight&#x27;);\n",
       "                entity.style.boxShadow = &#x27;&#x27;;\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "}\n",
       "class App {\n",
       "    constructor(data) {\n",
       "        // Store initial data\n",
       "        this.data = data;\n",
       "        this.currentTheme = data.theme;\n",
       "        this.activeEntities = data.entities;\n",
       "        this.activeRelations = data.relations || null;\n",
       "        this.relationPathLevel = 5;\n",
       "\n",
       "        // Initialize managers\n",
       "        this.displayManager = new DisplayTextBoxManager(\n",
       "            data.light_theme_colors,\n",
       "            data.dark_theme_colors\n",
       "        );\n",
       "        this.filterManager = new FilterManager(this.applyFilters.bind(this));\n",
       "        this.tableManager = new TableManager(\n",
       "            data.light_theme_colors,\n",
       "            data.dark_theme_colors\n",
       "        );\n",
       "\n",
       "        // Bind methods\n",
       "        this.toggleTheme = this.toggleTheme.bind(this);\n",
       "        this.initializeUI = this.initializeUI.bind(this);\n",
       "        this.handleEntityHighlight = this.handleEntityHighlight.bind(this);\n",
       "    }\n",
       "\n",
       "    async initialize() {\n",
       "        // Wait for DOM to be fully loaded\n",
       "        if (document.readyState === &#x27;loading&#x27;) {\n",
       "            await new Promise(resolve =&gt; {\n",
       "                document.addEventListener(&#x27;DOMContentLoaded&#x27;, resolve);\n",
       "            });\n",
       "        }\n",
       "\n",
       "        // Initialize UI elements\n",
       "        this.initializeUI();\n",
       "\n",
       "        // Set initial theme\n",
       "        if (this.data.theme === &#x27;dark&#x27;) {\n",
       "            document.body.classList.add(&#x27;dark-theme&#x27;);\n",
       "        }\n",
       "\n",
       "        // Initialize displays\n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "\n",
       "        if (this.activeRelations) {\n",
       "            this.displayManager.alineDisplayRelation();\n",
       "            this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "\n",
       "            // Add event listeners for relations\n",
       "            window.addEventListener(&#x27;scroll&#x27;, () =&gt; {\n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "            });\n",
       "\n",
       "            window.addEventListener(&#x27;resize&#x27;, () =&gt; {\n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "            });\n",
       "        }\n",
       "    }\n",
       "\n",
       "    initializeUI() {\n",
       "        const header = document.createElement(&#x27;div&#x27;);\n",
       "        header.className = &#x27;header-container&#x27;;\n",
       "        document.body.appendChild(header);\n",
       "\n",
       "        const themeButton = this.createThemeButton();\n",
       "        header.appendChild(themeButton);\n",
       "\n",
       "        const {filterButton, filterPanel, filterOverlay} = this.createFilterElements();\n",
       "        header.appendChild(filterButton);\n",
       "        document.body.appendChild(filterPanel);\n",
       "        document.body.appendChild(filterOverlay);\n",
       "\n",
       "        const filterState = this.filterManager.extractAttributeFilters(this.data.entities);\n",
       "        this.filterManager.createFilterUI(filterPanel.querySelector(&#x27;div&#x27;));\n",
       "\n",
       "        const {tableButton, tablePanel} = this.createTableElements();\n",
       "        header.appendChild(tableButton);\n",
       "        document.body.appendChild(tablePanel);\n",
       "\n",
       "        this.setupEventListeners(filterButton, filterPanel, filterOverlay, tableButton, tablePanel);\n",
       "    }\n",
       "\n",
       "    createThemeButton() {\n",
       "        const themeButton = document.createElement(&#x27;button&#x27;);\n",
       "        themeButton.className = &#x27;theme-button&#x27;;\n",
       "        themeButton.innerHTML = `&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;\n",
       "            &lt;path d=&quot;M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z&quot;&gt;&lt;/path&gt;\n",
       "        &lt;/svg&gt;`;\n",
       "        themeButton.addEventListener(&#x27;click&#x27;, this.toggleTheme);\n",
       "        return themeButton;\n",
       "    }\n",
       "\n",
       "    createFilterElements() {\n",
       "        const filterButton = document.createElement(&#x27;button&#x27;);\n",
       "        filterButton.className = &#x27;filters-button&#x27;;\n",
       "        filterButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;polygon points=&quot;22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3&quot;&gt;&lt;/polygon&gt;&lt;/svg&gt;&#x27;;\n",
       "\n",
       "        const filterPanel = document.createElement(&#x27;div&#x27;);\n",
       "        filterPanel.className = &#x27;filters-panel&#x27;;\n",
       "        filterPanel.innerHTML = &#x27;&lt;div style=&quot;padding: 2rem;&quot;&gt;&lt;h2 style=&quot;margin-bottom: 1rem; font-size: 1.5rem;&quot;&gt;Filters&lt;/h2&gt;&lt;/div&gt;&#x27;;\n",
       "\n",
       "        const filterOverlay = document.createElement(&#x27;div&#x27;);\n",
       "        filterOverlay.className = &#x27;filters-overlay&#x27;;\n",
       "\n",
       "        return { filterButton, filterPanel, filterOverlay };\n",
       "    }\n",
       "\n",
       "    createTableElements() {\n",
       "        const tableButton = document.createElement(&#x27;button&#x27;);\n",
       "        tableButton.className = &#x27;table-button&#x27;;\n",
       "        tableButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;18&quot; height=&quot;18&quot; rx=&quot;2&quot; ry=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;3&quot; y1=&quot;9&quot; x2=&quot;21&quot; y2=&quot;9&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;3&quot; y1=&quot;15&quot; x2=&quot;21&quot; y2=&quot;15&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&#x27;;\n",
       "\n",
       "        const tablePanel = this.tableManager.createTablePanel(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "\n",
       "        return { tableButton, tablePanel };\n",
       "    }\n",
       "\n",
       "    setupEventListeners(filterButton, filterPanel, filterOverlay, tableButton, tablePanel) {\n",
       "        // Filter panel events\n",
       "        filterButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            filterPanel.classList.toggle(&#x27;open&#x27;);\n",
       "            filterOverlay.classList.toggle(&#x27;open&#x27;);\n",
       "        });\n",
       "\n",
       "        filterOverlay.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            filterPanel.classList.remove(&#x27;open&#x27;);\n",
       "            filterOverlay.classList.remove(&#x27;open&#x27;);\n",
       "        });\n",
       "\n",
       "        // Table panel events\n",
       "        tableButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            tablePanel.classList.toggle(&#x27;open&#x27;);\n",
       "            const container = document.getElementById(&#x27;display-textbox-container&#x27;);\n",
       "            container.classList.toggle(&#x27;with-table&#x27;);\n",
       "            \n",
       "            if (this.activeRelations) {\n",
       "                setTimeout(() =&gt; {\n",
       "                    this.displayManager.alineDisplayRelation();\n",
       "                    this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "                }, 300);\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "\n",
       "    toggleTheme() {\n",
       "        this.currentTheme = this.currentTheme === &#x27;light&#x27; ? &#x27;dark&#x27; : &#x27;light&#x27;;\n",
       "        document.body.classList.toggle(&#x27;dark-theme&#x27;);\n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        this.tableManager.updateEntityTable(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        if (this.activeRelations) {\n",
       "            this.tableManager.updateRelationTable(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "        }\n",
       "    }\n",
       "\n",
       "    applyFilters(filterState) {\n",
       "        this.activeEntities = this.data.entities.filter(entity =&gt; {\n",
       "            if (!entity.attr) return false;\n",
       "            \n",
       "            const selectedFilters = filterState.keys.filter(f =&gt; f.selected);\n",
       "            if (selectedFilters.length === 0) return true;\n",
       "\n",
       "            const matchesFilter = (filter) =&gt; {\n",
       "                const entityValue = entity.attr[filter.key];\n",
       "                if (!entityValue) return false;\n",
       "                return filter.valueFilters.some(valueFilter =&gt; \n",
       "                    valueFilter.selected &amp;&amp; valueFilter.value === entityValue\n",
       "                );\n",
       "            };\n",
       "\n",
       "            return filterState.useAndLogic ? \n",
       "                selectedFilters.every(matchesFilter) : \n",
       "                selectedFilters.some(matchesFilter);\n",
       "        });\n",
       "        \n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        this.tableManager.updateEntityTable(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        \n",
       "        if (this.data.relations) {\n",
       "            requestAnimationFrame(() =&gt; {\n",
       "                const activeEntityIds = new Set(this.activeEntities.map(e =&gt; e.entity_id));\n",
       "                \n",
       "                this.activeRelations = this.data.relations.filter(rel =&gt; {\n",
       "                    const entity1Exists = document.getElementById(rel.entity_1_id) !== null;\n",
       "                    const entity2Exists = document.getElementById(rel.entity_2_id) !== null;\n",
       "                    return activeEntityIds.has(rel.entity_1_id) &amp;&amp; \n",
       "                           activeEntityIds.has(rel.entity_2_id) &amp;&amp;\n",
       "                           entity1Exists &amp;&amp; entity2Exists;\n",
       "                });\n",
       "                \n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "                if (this.activeRelations) {\n",
       "                    this.tableManager.updateRelationTable(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "                }\n",
       "            });\n",
       "        }\n",
       "    }\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        this.displayManager.handleEntityHighlight(entityId, isEnter);\n",
       "        this.tableManager.handleEntityHighlight(entityId, isEnter);\n",
       "    }\n",
       "}\n",
       "\n",
       "// Initialize the application when the script loads\n",
       "const app = new App(data);\n",
       "app.initialize();\n",
       "\n",
       "        &lt;/script&gt;\n",
       "    &lt;/body&gt;\n",
       "    &lt;/html&gt;\n",
       "    \" width=\"100%\" height=\"300px\" style=\"border:none;\"></iframe>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import html\n",
    "from IPython.display import display, HTML\n",
    "\n",
    "iframe_html = f\"\"\"\n",
    "    <iframe srcdoc=\"{html.escape(html_content)}\" width=\"100%\" height=\"300px\" style=\"border:none;\"></iframe>\n",
    "\"\"\"\n",
    "display(HTML(iframe_html))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Display entities with color codes"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "html_content = render(text, entities, relations, color_attr_key=\"Type\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <iframe srcdoc=\"\n",
       "    &lt;html&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;title&gt;Named Entity Visualization&lt;/title&gt;\n",
       "        &lt;style&gt;\n",
       "        /* Default (Light) Theme */\n",
       ":root {\n",
       "    --background-color: #ffffff;\n",
       "    --text-color: #000000;\n",
       "    --path-color: #000208;\n",
       "    --tooltip-background-color: #333333;\n",
       "    --icon-color: #000000;\n",
       "}\n",
       "\n",
       "/* Dark Theme */\n",
       "body.dark-theme {\n",
       "    --background-color: #1f1f1f;\n",
       "    --text-color: #ffffff;\n",
       "    --path-color: #9C27B0;\n",
       "    --tooltip-background-color: #444444;\n",
       "    --icon-color: #ffffff;\n",
       "}\n",
       "\n",
       "body {\n",
       "    background-color: var(--background-color);\n",
       "    color: var(--text-color);\n",
       "}\n",
       "\n",
       ".entity-mark {\n",
       "    padding-right: 0.3em;\n",
       "    padding-left: 0.3em;\n",
       "    padding-top: 0.05em;\n",
       "    padding-bottom: 0.05em;\n",
       "    margin: 0 0.1em;\n",
       "    line-height: 1;\n",
       "    border-radius: 0.35em;\n",
       "    background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);\n",
       "    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */\n",
       "    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */\n",
       "} \n",
       "\n",
       "\n",
       "\n",
       ".custom-tooltip {\n",
       "    word-wrap: break-word; /* Ensures long words break into the next line */\n",
       "    overflow-wrap: break-word; /* Ensures content stays within bounds */\n",
       "    box-sizing: border-box; /* Ensures padding/borders don&#x27;t affect width calculations */\n",
       "    position: absolute;\n",
       "    background-color: var(--tooltip-background-color);\n",
       "    color: #fff;\n",
       "    padding: 8px; /* Slightly larger padding */\n",
       "    border-radius: 8px; /* More rounded corners */\n",
       "    z-index: 6;\n",
       "    white-space: normal;\n",
       "    pointer-events: none;\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */\n",
       "    transition: opacity 0.3s ease; /* Smooth transition for opacity */\n",
       "    opacity: 0.8; /* Slightly transparent */\n",
       "}\n",
       "\n",
       "#display-textbox {\n",
       "    width: 100%;\n",
       "    z-index: 1;\n",
       "    word-wrap: break-word;\n",
       "    overflow-wrap: break-word;\n",
       "    white-space: normal;\n",
       "    position: absolute;\n",
       "    line-height: 1.5;\n",
       "    padding: 1.5rem;\n",
       "    \n",
       "    /* Add white background, shadow and rounded corners */\n",
       "    background-color: var(--background-color);\n",
       "    border-radius: 12px;\n",
       "    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",
       "    \n",
       "    /* Hide horizontal scrollbar and only show vertical when needed */\n",
       "    overflow-x: hidden;\n",
       "    overflow-y: auto;\n",
       "}\n",
       "\n",
       "\n",
       "#display-relation {\n",
       "    width: 100%;\n",
       "    position: absolute;\n",
       "    z-index: 2;\n",
       "    pointer-events: none; /* Make the SVG non-interactive */\n",
       "    top: 0; \n",
       "    left: 0; \n",
       "}\n",
       "\n",
       ".relation-path {\n",
       "    opacity: 0.6;\n",
       "\tstroke: var(--path-color);\n",
       "    stroke-width: 2; /* Set the stroke width */\n",
       "    fill: none; /* Ensure the path is not filled */\n",
       "}\n",
       "\n",
       "#display-textbox-container {\n",
       "    left: 0%;\n",
       "    width: 95%;\n",
       "    height: 95%;\n",
       "    position: absolute;\n",
       "    transition: width 0.3s ease-in-out; \n",
       "}\n",
       "\n",
       "\n",
       ".theme-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 0.5rem; /* Position it at the leftmost position */\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".theme-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       "\n",
       ".filters-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 2.5rem;\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".filters-button svg {\n",
       "    width: 100%;\n",
       "    height: 100%;\n",
       "}\n",
       "\n",
       ".filters-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       ".filters-panel {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    width: 33.333%;\n",
       "    height: 100%;\n",
       "    background-color: var(--background-color);\n",
       "    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n",
       "    transform: translateX(-100%);\n",
       "    transition: transform 0.3s ease-in-out;\n",
       "    z-index: 5;\n",
       "    overflow-y: auto;\n",
       "}\n",
       "\n",
       ".filters-panel.open {\n",
       "    transform: translateX(0);\n",
       "}\n",
       "\n",
       ".filters-overlay {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    width: 100%;\n",
       "    height: 100%;\n",
       "    background-color: rgba(0, 0, 0, 0.5);\n",
       "    opacity: 0;\n",
       "    visibility: hidden;\n",
       "    transition: all 0.3s ease-in-out;\n",
       "    z-index: 4;\n",
       "}\n",
       "\n",
       ".filters-overlay.open {\n",
       "    opacity: 1;\n",
       "    visibility: visible;\n",
       "}\n",
       "\n",
       ".filter-section {\n",
       "    border-bottom: 1px solid rgba(128, 128, 128, 0.2);\n",
       "    padding-bottom: 1rem;\n",
       "}\n",
       "\n",
       ".filter-section:last-child {\n",
       "    border-bottom: none;\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;] {\n",
       "    cursor: pointer;\n",
       "}\n",
       "\n",
       ".filter-section label {\n",
       "    cursor: pointer;\n",
       "    user-select: none;\n",
       "}\n",
       "\n",
       "/* Customize checkboxes */\n",
       ".filter-section input[type=&quot;checkbox&quot;] {\n",
       "    appearance: none;\n",
       "    -webkit-appearance: none;\n",
       "    width: 16px;\n",
       "    height: 16px;\n",
       "    border: 2px solid var(--text-color);\n",
       "    border-radius: 3px;\n",
       "    outline: none;\n",
       "    vertical-align: middle;\n",
       "    position: relative;\n",
       "    margin-right: 8px;\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;]:checked {\n",
       "    background-color: var(--text-color);\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;]:checked::before {\n",
       "    content: &quot;✓&quot;;\n",
       "    position: absolute;\n",
       "    color: var(--background-color);\n",
       "    font-size: 12px;\n",
       "    top: 50%;\n",
       "    left: 50%;\n",
       "    transform: translate(-50%, -50%);\n",
       "}\n",
       "\n",
       ".attribute-filters {\n",
       "    color: var(--text-color);\n",
       "}\n",
       "\n",
       "/* Toggle Switch Styles */\n",
       ".toggle-switch {\n",
       "    position: relative;\n",
       "    display: inline-block;\n",
       "    width: 48px;\n",
       "    height: 24px;\n",
       "    margin-left: 10px;\n",
       "}\n",
       "\n",
       ".toggle-switch input {\n",
       "    opacity: 0;\n",
       "    width: 0;\n",
       "    height: 0;\n",
       "}\n",
       "\n",
       ".toggle-slider {\n",
       "    position: absolute;\n",
       "    cursor: pointer;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    right: 0;\n",
       "    bottom: 0;\n",
       "    background-color: rgba(128, 128, 128, 0.3);\n",
       "    transition: .4s;\n",
       "    border-radius: 24px;\n",
       "}\n",
       "\n",
       ".toggle-slider:before {\n",
       "    position: absolute;\n",
       "    content: &quot;&quot;;\n",
       "    height: 18px;\n",
       "    width: 18px;\n",
       "    left: 3px;\n",
       "    bottom: 3px;\n",
       "    background-color: var(--background-color);\n",
       "    transition: .4s;\n",
       "    border-radius: 50%;\n",
       "}\n",
       "\n",
       ".toggle-switch input:checked + .toggle-slider {\n",
       "    background-color: var(--text-color);\n",
       "}\n",
       "\n",
       ".toggle-switch input:checked + .toggle-slider:before {\n",
       "    transform: translateX(24px);\n",
       "}\n",
       "\n",
       ".logic-toggle {\n",
       "    font-size: 0.9em;\n",
       "    opacity: 0.9;\n",
       "}\n",
       "\n",
       ".table-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       ".table-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 4.5rem;\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".table-panel {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    right: 0;\n",
       "    width: 50%;\n",
       "    height: 100%;\n",
       "    background-color: var(--background-color);\n",
       "    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);\n",
       "    transform: translateX(100%);\n",
       "    transition: transform 0.3s ease-in-out;\n",
       "    z-index: 5;\n",
       "    overflow-y: auto;\n",
       "    padding: 2rem;\n",
       "}\n",
       "\n",
       ".table-close-button {\n",
       "    position: absolute;\n",
       "    top: 1rem;\n",
       "    right: 1rem;\n",
       "    background: none;\n",
       "    border: none;\n",
       "    cursor: pointer;\n",
       "    padding: 0.5rem;\n",
       "    color: inherit;\n",
       "    border-radius: 0.25rem;\n",
       "}\n",
       "\n",
       ".table-close-button:hover {\n",
       "    background-color: rgba(0, 0, 0, 0.1);\n",
       "}\n",
       "\n",
       ".dark-theme .table-close-button:hover {\n",
       "    background-color: rgba(255, 255, 255, 0.1);\n",
       "}\n",
       "\n",
       ".table-panel.open {\n",
       "    transform: translateX(0);\n",
       "}\n",
       "\n",
       ".table-panel table {\n",
       "    width: 100%;\n",
       "    border-collapse: separate;\n",
       "    border-spacing: 0;\n",
       "    margin-bottom: 2rem;\n",
       "    border-radius: 8px;\n",
       "    overflow: hidden;\n",
       "    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",
       "}\n",
       "\n",
       ".table-panel th {\n",
       "    background-color: var(--background-color);\n",
       "    color: var(--text-color);\n",
       "    font-weight: 600;\n",
       "    text-transform: uppercase;\n",
       "    font-size: 0.85rem;\n",
       "    letter-spacing: 0.05em;\n",
       "    padding: 0.75rem 1rem;\n",
       "    border-bottom: 2px solid rgba(128, 128, 128, 0.2);\n",
       "    position: sticky;\n",
       "    top: 0;\n",
       "    z-index: 10;\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       ".table-panel td {\n",
       "    padding: 0.5rem 1rem;\n",
       "    border-bottom: 1px solid rgba(128, 128, 128, 0.1);\n",
       "    color: var(--text-color);\n",
       "    font-size: 0.95rem;\n",
       "    line-height: 1.4;\n",
       "    max-width: 300px;\n",
       "    overflow: hidden;\n",
       "    text-overflow: ellipsis;\n",
       "    white-space: nowrap;\n",
       "}\n",
       "\n",
       ".table-panel tr:last-child td {\n",
       "    border-bottom: none;\n",
       "}\n",
       "\n",
       ".table-panel tbody tr:hover {\n",
       "    background-color: rgba(128, 128, 128, 0.05);\n",
       "    transition: background-color 0.2s ease;\n",
       "}\n",
       "\n",
       "/* Add alternating row colors */\n",
       ".table-panel tbody tr:nth-child(even) {\n",
       "    background-color: rgba(128, 128, 128, 0.02);\n",
       "}\n",
       "\n",
       "/* Add responsive scrolling for table content */\n",
       ".table-panel {\n",
       "    scrollbar-width: thin;\n",
       "    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar {\n",
       "    width: 8px;\n",
       "    height: 8px;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar-track {\n",
       "    background: transparent;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar-thumb {\n",
       "    background-color: rgba(128, 128, 128, 0.3);\n",
       "    border-radius: 4px;\n",
       "}\n",
       " \n",
       ".table-panel .table-section h2 {\n",
       "    color: var(--text-color);\n",
       "    font-size: 1.25rem;\n",
       "    font-weight: 600;\n",
       "    margin: 2rem 0 1rem;\n",
       "    padding-bottom: 0.5rem;\n",
       "    border-bottom: 2px solid rgba(128, 128, 128, 0.2);\n",
       "}\n",
       "\n",
       "#display-textbox-container.with-table {\n",
       "    left: 0%;\n",
       "    width: 45%;\n",
       "}\n",
       "\n",
       ".entity-table-mark {\n",
       "    padding-right: 0.3em;\n",
       "    padding-left: 0.3em;\n",
       "    padding-top: 0.05em;\n",
       "    padding-bottom: 0.05em;\n",
       "    margin: 0 0.1em;\n",
       "    line-height: 1;\n",
       "    border-radius: 0.35em;\n",
       "    background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);\n",
       "    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */\n",
       "} \n",
       "\n",
       ".entity-highlight {\n",
       "    text-shadow: 0 0 0.5px currentColor;\n",
       "    font-synthesis: none;\n",
       "    transition: all 0.3s ease;\n",
       "}\n",
       "\n",
       "/* Use the entity&#x27;s background color for glow via JavaScript */\n",
       ".entity-highlight-glow {\n",
       "    box-shadow: 0 0 8px currentColor, 0 0 12px currentColor;\n",
       "} \n",
       "        &lt;/style&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body&gt;\n",
       "        &lt;div id=&quot;display-textbox-container&quot;&gt;\n",
       "            &lt;div id=&quot;display-textbox&quot;&gt;&lt;/div&gt;\n",
       "            &lt;svg id=&quot;display-relation&quot;&gt;&lt;/svg&gt;\n",
       "        &lt;/div&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot;&gt;\n",
       "            // Embed the data as JavaScript variables\n",
       "            const data = {&quot;text&quot;: &quot;\\nDr. Emily Johnson, a cardiologist at Green Valley Hospital, recently treated a 45-year-old male patient with \\na history of hypertension and Type 2 diabetes. The patient was prescribed Lisinopril, 10 mg once daily, to manage his blood pressure, \\nand Metformin, 500 mg twice daily, for glucose control. During a follow-up visit, the patient reported occasional dizziness and fatigue. \\nAfter reviewing the symptoms, Dr. Johnson decided to adjust the Lisinopril dosage to 5 mg and advised the patient to monitor his \\nblood pressure levels closely over the next two weeks.\\n&quot;, &quot;entities&quot;: [{&quot;entity_id&quot;: &quot;0&quot;, &quot;start&quot;: 124, &quot;end&quot;: 136, &quot;attr&quot;: {&quot;Type&quot;: &quot;condition&quot;}, &quot;color&quot;: 1}, {&quot;entity_id&quot;: &quot;1&quot;, &quot;start&quot;: 141, &quot;end&quot;: 156, &quot;attr&quot;: {&quot;Type&quot;: &quot;condition&quot;}, &quot;color&quot;: 1}, {&quot;entity_id&quot;: &quot;2&quot;, &quot;start&quot;: 185, &quot;end&quot;: 195, &quot;attr&quot;: {&quot;Type&quot;: &quot;medication&quot;, &quot;Dosage&quot;: &quot;10 mg&quot;, &quot;Frequency&quot;: &quot;once daily&quot;}, &quot;color&quot;: 0}, {&quot;entity_id&quot;: &quot;3&quot;, &quot;start&quot;: 250, &quot;end&quot;: 259, &quot;attr&quot;: {&quot;Type&quot;: &quot;medication&quot;, &quot;Dosage&quot;: &quot;500 mg&quot;, &quot;Frequency&quot;: &quot;twice daily&quot;}, &quot;color&quot;: 0}, {&quot;entity_id&quot;: &quot;4&quot;, &quot;start&quot;: 360, &quot;end&quot;: 369, &quot;attr&quot;: {&quot;Type&quot;: &quot;adverse_reaction&quot;}, &quot;color&quot;: 2}, {&quot;entity_id&quot;: &quot;5&quot;, &quot;start&quot;: 374, &quot;end&quot;: 381, &quot;attr&quot;: {&quot;Type&quot;: &quot;adverse_reaction&quot;}, &quot;color&quot;: 2}], &quot;theme&quot;: &quot;light&quot;, &quot;light_theme_colors&quot;: [{&quot;color_name&quot;: &quot;blue&quot;, &quot;color_code&quot;: &quot;#1f77b4&quot;}, {&quot;color_name&quot;: &quot;orange&quot;, &quot;color_code&quot;: &quot;#ff7f0e&quot;}, {&quot;color_name&quot;: &quot;green&quot;, &quot;color_code&quot;: &quot;#2ca02c&quot;}, {&quot;color_name&quot;: &quot;red&quot;, &quot;color_code&quot;: &quot;#d62728&quot;}, {&quot;color_name&quot;: &quot;purple&quot;, &quot;color_code&quot;: &quot;#9467bd&quot;}, {&quot;color_name&quot;: &quot;brown&quot;, &quot;color_code&quot;: &quot;#8c564b&quot;}, {&quot;color_name&quot;: &quot;pink&quot;, &quot;color_code&quot;: &quot;#e377c2&quot;}, {&quot;color_name&quot;: &quot;gray&quot;, &quot;color_code&quot;: &quot;#7f7f7f&quot;}, {&quot;color_name&quot;: &quot;yellow-green&quot;, &quot;color_code&quot;: &quot;#bcbd22&quot;}, {&quot;color_name&quot;: &quot;cyan&quot;, &quot;color_code&quot;: &quot;#17becf&quot;}, {&quot;color_name&quot;: &quot;teal&quot;, &quot;color_code&quot;: &quot;#008080&quot;}, {&quot;color_name&quot;: &quot;gold&quot;, &quot;color_code&quot;: &quot;#ffd700&quot;}, {&quot;color_name&quot;: &quot;lavender&quot;, &quot;color_code&quot;: &quot;#e6e6fa&quot;}, {&quot;color_name&quot;: &quot;salmon&quot;, &quot;color_code&quot;: &quot;#fa8072&quot;}, {&quot;color_name&quot;: &quot;turquoise&quot;, &quot;color_code&quot;: &quot;#40e0d0&quot;}, {&quot;color_name&quot;: &quot;magenta&quot;, &quot;color_code&quot;: &quot;#ff00ff&quot;}, {&quot;color_name&quot;: &quot;lime&quot;, &quot;color_code&quot;: &quot;#00ff00&quot;}, {&quot;color_name&quot;: &quot;navy&quot;, &quot;color_code&quot;: &quot;#000080&quot;}, {&quot;color_name&quot;: &quot;beige&quot;, &quot;color_code&quot;: &quot;#f5f5dc&quot;}, {&quot;color_name&quot;: &quot;coral&quot;, &quot;color_code&quot;: &quot;#ff7f50&quot;}], &quot;dark_theme_colors&quot;: [{&quot;color_name&quot;: &quot;deep orange&quot;, &quot;color_code&quot;: &quot;#FF5722&quot;}, {&quot;color_name&quot;: &quot;green&quot;, &quot;color_code&quot;: &quot;#4CAF50&quot;}, {&quot;color_name&quot;: &quot;blue&quot;, &quot;color_code&quot;: &quot;#2196F3&quot;}, {&quot;color_name&quot;: &quot;yellow&quot;, &quot;color_code&quot;: &quot;#FFEB3B&quot;}, {&quot;color_name&quot;: &quot;purple&quot;, &quot;color_code&quot;: &quot;#9C27B0&quot;}, {&quot;color_name&quot;: &quot;light blue&quot;, &quot;color_code&quot;: &quot;#03A9F4&quot;}, {&quot;color_name&quot;: &quot;amber&quot;, &quot;color_code&quot;: &quot;#FFC107&quot;}, {&quot;color_name&quot;: &quot;pink&quot;, &quot;color_code&quot;: &quot;#FF4081&quot;}, {&quot;color_name&quot;: &quot;light green&quot;, &quot;color_code&quot;: &quot;#8BC34A&quot;}, {&quot;color_name&quot;: &quot;orange&quot;, &quot;color_code&quot;: &quot;#FF9800&quot;}, {&quot;color_name&quot;: &quot;deep purple&quot;, &quot;color_code&quot;: &quot;#673AB7&quot;}, {&quot;color_name&quot;: &quot;dark teal&quot;, &quot;color_code&quot;: &quot;#004D40&quot;}, {&quot;color_name&quot;: &quot;midnight blue&quot;, &quot;color_code&quot;: &quot;#191970&quot;}, {&quot;color_name&quot;: &quot;chocolate&quot;, &quot;color_code&quot;: &quot;#D2691E&quot;}, {&quot;color_name&quot;: &quot;dark cyan&quot;, &quot;color_code&quot;: &quot;#008B8B&quot;}, {&quot;color_name&quot;: &quot;crimson&quot;, &quot;color_code&quot;: &quot;#DC143C&quot;}, {&quot;color_name&quot;: &quot;olive&quot;, &quot;color_code&quot;: &quot;#808000&quot;}, {&quot;color_name&quot;: &quot;dark red&quot;, &quot;color_code&quot;: &quot;#8B0000&quot;}, {&quot;color_name&quot;: &quot;steel blue&quot;, &quot;color_code&quot;: &quot;#4682B4&quot;}, {&quot;color_name&quot;: &quot;indigo&quot;, &quot;color_code&quot;: &quot;#4B0082&quot;}], &quot;relations&quot;: [{&quot;entity_1_id&quot;: &quot;2&quot;, &quot;entity_2_id&quot;: &quot;4&quot;}, {&quot;entity_1_id&quot;: &quot;2&quot;, &quot;entity_2_id&quot;: &quot;5&quot;}, {&quot;entity_1_id&quot;: &quot;3&quot;, &quot;entity_2_id&quot;: &quot;4&quot;}, {&quot;entity_1_id&quot;: &quot;3&quot;, &quot;entity_2_id&quot;: &quot;5&quot;}]};\n",
       "            \n",
       "            // Original JavaScript logic\n",
       "            class DisplayTextBoxManager {\n",
       "    constructor(light_theme_colors, dark_theme_colors) {\n",
       "        this.light_theme_colors = light_theme_colors;\n",
       "        this.dark_theme_colors = dark_theme_colors;\n",
       "    }\n",
       "\n",
       "\n",
       "    updateEntities(text, entities, currentTheme) {\n",
       "        // Clear current display textbox\n",
       "        var textElement = document.getElementById(&quot;display-textbox&quot;);\n",
       "        textElement.innerHTML = &#x27;&#x27;;\n",
       "\n",
       "        // If no entities\n",
       "        if (!entities || entities.length === 0) {\n",
       "            text.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                textElement.appendChild(document.createTextNode(line));\n",
       "                if (index &lt; array.length - 1) {\n",
       "                    textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                }\n",
       "            });\n",
       "            return null;\n",
       "        }\n",
       "\n",
       "        // Sort entities by start index\n",
       "        entities.forEach(entity =&gt; {\n",
       "            entity.start = parseInt(entity.start);\n",
       "            entity.end = parseInt(entity.end);\n",
       "        });\n",
       "        entities.sort((a, b) =&gt; a.start - b.start);\n",
       "\n",
       "        // Add entities to the display textbox\n",
       "        var lastIndex = 0;\n",
       "        entities.forEach(entity =&gt; {\n",
       "            // Add text before the entity\n",
       "            if (lastIndex &lt; entity.start) {\n",
       "                var nonEntityText = text.substring(lastIndex, entity.start);\n",
       "                nonEntityText.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                    textElement.appendChild(document.createTextNode(line));\n",
       "                    if (index &lt; array.length - 1) {\n",
       "                        textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                    }\n",
       "                });\n",
       "            }\n",
       "\n",
       "            // Add the entity text\n",
       "            var entityText = text.substring(entity.start, entity.end);\n",
       "            var entityElement = document.createElement(&quot;mark&quot;);\n",
       "            entityElement.id = entity.entity_id;\n",
       "            entityElement.setAttribute(&#x27;entity-id&#x27;, entity.entity_id);\n",
       "            entityElement.className = &quot;entity-mark&quot;;\n",
       "            entityElement.textContent = entityText;\n",
       "            entityElement.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, true));\n",
       "            entityElement.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, false));\n",
       "\n",
       "            // Assign entity color. If no color is provided, use the default background color in CSS\n",
       "            if (entity.color !== undefined) {\n",
       "                entityElement.style.background = &#x27;none&#x27;;\n",
       "                // if entity.color is a string, use it as the background color\n",
       "                if (typeof entity.color === &#x27;string&#x27;) {\n",
       "                    entityElement.style.backgroundColor = entity.color;\n",
       "                }\n",
       "                // if entity.color is a integer, use it as the index of the color palette\n",
       "                else if (typeof entity.color === &#x27;number&#x27;) {\n",
       "                    if (currentTheme === &#x27;light&#x27;) {\n",
       "                        entityElement.style.backgroundColor = this.light_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                    }\n",
       "                    else {\n",
       "                        entityElement.style.backgroundColor = this.dark_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            entityElement.addEventListener(&#x27;mouseenter&#x27;, (event) =&gt; {\n",
       "                if (entity.attr) {\n",
       "                    const prettyAttributes = JSON.stringify(entity.attr, null, 2).replace(/\\n/g, &#x27;&lt;br&gt;&#x27;).replace(/  /g, &#x27;&amp;nbsp;&amp;nbsp;&#x27;);\n",
       "                    this.showTooltip(event, `Entity ID: ${entity.entity_id}&lt;br&gt;Text: ${entityText}&lt;br&gt;Attributes: ${prettyAttributes}`);\n",
       "                }\n",
       "                else {\n",
       "                    this.showTooltip(event, `Entity ID: ${entity.entity_id}&lt;br&gt;Text: ${entityText}`);\n",
       "                }\n",
       "            });\n",
       "\n",
       "            entityElement.addEventListener(&#x27;mouseleave&#x27;, (event) =&gt; {\n",
       "                this.hideTooltip();\n",
       "            });\n",
       "            textElement.appendChild(entityElement);\n",
       "\n",
       "            lastIndex = entity.end;\n",
       "            });\n",
       "\n",
       "            // Add remaining text after the last entity\n",
       "            if (lastIndex &lt; text.length) {\n",
       "                var remainingText = text.substring(lastIndex);\n",
       "                remainingText.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                    textElement.appendChild(document.createTextNode(line));\n",
       "                    if (index &lt; array.length - 1) {\n",
       "                        textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                    }\n",
       "                });\n",
       "            }\n",
       "    }\n",
       "\n",
       "    \n",
       "    showTooltip(event, content) {\n",
       "        // Remove any existing tooltip\n",
       "        var existingTooltip = document.getElementById(&quot;custom-tooltip&quot;);\n",
       "        if (existingTooltip) {\n",
       "            existingTooltip.remove();\n",
       "        }\n",
       "\n",
       "        // Create a new tooltip\n",
       "        var tooltip = document.createElement(&quot;div&quot;);\n",
       "        tooltip.id = &quot;custom-tooltip&quot;;\n",
       "        tooltip.className = &quot;custom-tooltip&quot;;\n",
       "        tooltip.innerHTML = content;\n",
       "        document.body.appendChild(tooltip); \n",
       "\n",
       "        // Limit the tooltip width to 1/3 of the screen width\n",
       "        var maxWidth = window.innerWidth / 3;\n",
       "        tooltip.style.maxWidth = maxWidth + &quot;px&quot;;\n",
       "        \n",
       "        // Position the tooltip\n",
       "        var rect = event.target.getBoundingClientRect();\n",
       "        var x = rect.left + window.scrollX;\n",
       "        // 5px above the entity\n",
       "        var y = rect.top + window.scrollY - tooltip.offsetHeight - 5; \n",
       "\n",
       "        // Ensure the tooltip doesn&#x27;t go off-screen\n",
       "        if (x + tooltip.offsetWidth &gt; window.innerWidth) {\n",
       "            // 10px padding from the right edge\n",
       "            x = window.innerWidth - tooltip.offsetWidth - 10; \n",
       "        }\n",
       "        if (y &lt; 0) {\n",
       "            // 5px below the entity if it goes off-screen\n",
       "            y = rect.bottom + window.scrollY + 5; \n",
       "        }\n",
       "\n",
       "        tooltip.style.left = x + &quot;px&quot;;\n",
       "        tooltip.style.top = y + &quot;px&quot;;\n",
       "    }\n",
       "\n",
       "    hideTooltip() {\n",
       "        var tooltip = document.getElementById(&quot;custom-tooltip&quot;);\n",
       "        if (tooltip) {\n",
       "            tooltip.remove();\n",
       "        }\n",
       "    }\n",
       "\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        // Find all entities with this ID in the text display\n",
       "        const textEntities = document.querySelectorAll(`mark[entity-id=&quot;${entityId}&quot;]`);\n",
       "        \n",
       "        textEntities.forEach(entity =&gt; {\n",
       "            if (isEnter) {\n",
       "                entity.classList.add(&#x27;entity-highlight&#x27;);\n",
       "                // Get the background color and use it for the glow\n",
       "                const style = window.getComputedStyle(entity);\n",
       "                const backgroundColor = style.backgroundColor;\n",
       "                const glowColor = backgroundColor === &#x27;rgba(0, 0, 0, 0)&#x27; || backgroundColor === &#x27;transparent&#x27; ? &#x27;#3f87a6&#x27; : backgroundColor;\n",
       "                entity.style.boxShadow = `0 0 8px ${glowColor}, 0 0 12px ${glowColor}`;\n",
       "            } else {\n",
       "                entity.classList.remove(&#x27;entity-highlight&#x27;);\n",
       "                entity.style.boxShadow = &#x27;&#x27;;\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "\n",
       "    alineDisplayRelation() {\n",
       "        // Get the display-textbox (div) and display-relation (svg) elements\n",
       "        const textDiv = document.getElementById(&quot;display-textbox&quot;);\n",
       "        const svgContainer = document.getElementById(&quot;display-relation&quot;);\n",
       "        \n",
       "        if (!textDiv || !svgContainer) {\n",
       "            console.error(&quot;Required elements not found&quot;);\n",
       "            return;\n",
       "        }\n",
       "    \n",
       "        // Get dimensions of the display-textbox\n",
       "        const textDivRect = textDiv.getBoundingClientRect();\n",
       "    \n",
       "        // Set dimensions of the SVG container\n",
       "        svgContainer.style.height = `${textDivRect.height}px`;\n",
       "        svgContainer.style.width = `${textDivRect.width}px`;\n",
       "        \n",
       "        // Ensure SVG viewport is set correctly\n",
       "        svgContainer.setAttribute(&#x27;viewBox&#x27;, `0 0 ${textDivRect.width} ${textDivRect.height}`);\n",
       "    }\n",
       "\n",
       "    updateRelations(relations, r) {\n",
       "        // Get the display-textbox (div) and display-relation (svg) elements\n",
       "        const textDiv = document.getElementById(&quot;display-textbox&quot;);\n",
       "        const svgContainer = document.getElementById(&quot;display-relation&quot;);\n",
       "        \n",
       "        if (!textDiv || !svgContainer) {\n",
       "            console.error(&quot;Required elements not found for updating relations&quot;);\n",
       "            return;\n",
       "        }\n",
       "    \n",
       "        const textDivRect = textDiv.getBoundingClientRect();\n",
       "    \n",
       "        // Clear current relation lines\n",
       "        svgContainer.innerHTML = &#x27;&#x27;;\n",
       "    \n",
       "        // If no relations\n",
       "        if (!relations || relations.length === 0) {\n",
       "            return null;\n",
       "        }\n",
       "    \n",
       "        relations.forEach((rel, index) =&gt; {\n",
       "            const entity1Element = document.getElementById(rel.entity_1_id);\n",
       "            const entity2Element = document.getElementById(rel.entity_2_id);\n",
       "    \n",
       "            // Check if elements exist\n",
       "            if (!entity1Element || !entity2Element) {\n",
       "                console.error(&#x27;Entity elements not found:&#x27;, {\n",
       "                    relation: rel,\n",
       "                    entity1Found: !!entity1Element,\n",
       "                    entity2Found: !!entity2Element\n",
       "                });\n",
       "                return;\n",
       "            }\n",
       "    \n",
       "            const entity1Rect = entity1Element.getBoundingClientRect();\n",
       "            const entity2Rect = entity2Element.getBoundingClientRect();\n",
       "    \n",
       "            // Get the computed style of the entity elements\n",
       "            const entity1Style = window.getComputedStyle(entity1Element);\n",
       "            const entity2Style = window.getComputedStyle(entity2Element);\n",
       "            const entity1LineHeight = parseFloat(entity1Style.lineHeight);\n",
       "            const entity2LineHeight = parseFloat(entity2Style.lineHeight);\n",
       "    \n",
       "            // Calculate the number of lines\n",
       "            const entity1Lines = entity1Rect.height / entity1LineHeight;\n",
       "            const entity2Lines = entity2Rect.height / entity2LineHeight;\n",
       "    \n",
       "            // Handle line-broken entity\n",
       "            const entity1X = entity1Lines &gt; 2 \n",
       "                ? (entity1Rect.right - textDivRect.left)\n",
       "                : (entity1Rect.left + entity1Rect.width / 2 - textDivRect.left);\n",
       "            \n",
       "            const entity1Y = entity1Rect.top - textDivRect.top;\n",
       "            \n",
       "            const entity2X = entity2Lines &gt; 2 \n",
       "                ? (entity2Rect.right - textDivRect.left)\n",
       "                : (entity2Rect.left + entity2Rect.width / 2 - textDivRect.left);\n",
       "            \n",
       "            const entity2Y = entity2Rect.top - textDivRect.top;\n",
       "    \n",
       "            // start with entity on left\n",
       "            var startX = null;\n",
       "            var startY = null;\n",
       "            var endX = null;\n",
       "            var endY = null;\n",
       "            if (entity1X &lt; entity2X) {\n",
       "                startX = entity1X;\n",
       "                startY = entity1Y;\n",
       "                endX = entity2X;\n",
       "                endY = entity2Y;\n",
       "            } else {\n",
       "                startX = entity2X;\n",
       "                startY = entity2Y;\n",
       "                endX = entity1X;\n",
       "                endY = entity1Y;\n",
       "            }\n",
       "    \n",
       "            // Create the SVG path\n",
       "            const path = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;path&quot;);\n",
       "            let pathD;\n",
       "            // If start and end entities are on the same y-axis\n",
       "            if (startY === endY) {\n",
       "                pathD = `M${startX} ${startY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${startY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            // If start entity is below end entities\n",
       "            else if (startY &gt; endY) {\n",
       "                pathD = `M${startX} ${startY} L${startX} ${endY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${endY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            // If start entity is above end entities\n",
       "            else {\n",
       "                pathD = `M${startX} ${startY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${startY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            \n",
       "            path.setAttribute(&quot;d&quot;, pathD);\n",
       "            path.setAttribute(&quot;class&quot;, &quot;relation-path&quot;);\n",
       "            svgContainer.appendChild(path);\n",
       "        });\n",
       "    }\n",
       "\n",
       "}\n",
       "class FilterManager {\n",
       "    constructor(onFilterChange) {\n",
       "        this.onFilterChange = onFilterChange;\n",
       "        this.filterState = null;\n",
       "    }\n",
       "\n",
       "    extractAttributeFilters(entities) {\n",
       "        const attributeFilters = new Map();\n",
       "        \n",
       "        entities.forEach(entity =&gt; {\n",
       "            if (entity.attr) {\n",
       "                Object.entries(entity.attr).forEach(([key, value]) =&gt; {\n",
       "                    if (!attributeFilters.has(key)) {\n",
       "                        attributeFilters.set(key, new Set());\n",
       "                    }\n",
       "                    attributeFilters.get(key).add(value);\n",
       "                });\n",
       "            }\n",
       "        });\n",
       "        \n",
       "        this.filterState = {\n",
       "            keys: Array.from(attributeFilters.entries()).map(([key, values]) =&gt; ({\n",
       "                key,\n",
       "                values: Array.from(values),\n",
       "                selected: true,\n",
       "                valueFilters: Array.from(values).map(value =&gt; ({\n",
       "                    value,\n",
       "                    selected: true\n",
       "                }))\n",
       "            })),\n",
       "            useAndLogic: false\n",
       "        };\n",
       "\n",
       "        return this.filterState;\n",
       "    }\n",
       "\n",
       "    handleFilterChange() {\n",
       "        if (this.onFilterChange) {\n",
       "            this.onFilterChange(this.filterState);\n",
       "        }\n",
       "    }\n",
       "\n",
       "    createFilterUI(panel) {\n",
       "        const filterContainer = document.createElement(&#x27;div&#x27;);\n",
       "        filterContainer.className = &#x27;attribute-filters&#x27;;\n",
       "        filterContainer.style.padding = &#x27;0 2rem 2rem 2rem&#x27;;\n",
       "    \n",
       "        // Add logic toggle switch\n",
       "        const logicToggleContainer = document.createElement(&#x27;div&#x27;);\n",
       "        logicToggleContainer.className = &#x27;logic-toggle&#x27;;\n",
       "        logicToggleContainer.style.marginBottom = &#x27;1.5rem&#x27;;\n",
       "        logicToggleContainer.style.padding = &#x27;1rem&#x27;;\n",
       "        logicToggleContainer.style.backgroundColor = &#x27;rgba(128, 128, 128, 0.1)&#x27;;\n",
       "        logicToggleContainer.style.borderRadius = &#x27;4px&#x27;;\n",
       "    \n",
       "        const logicLabel = document.createElement(&#x27;label&#x27;);\n",
       "        logicLabel.className = &#x27;logic-label&#x27;;\n",
       "        logicLabel.style.display = &#x27;flex&#x27;;\n",
       "        logicLabel.style.alignItems = &#x27;center&#x27;;\n",
       "        logicLabel.style.justifyContent = &#x27;space-between&#x27;;\n",
       "        logicLabel.style.cursor = &#x27;pointer&#x27;;\n",
       "    \n",
       "        const labelText = document.createElement(&#x27;span&#x27;);\n",
       "        labelText.textContent = &#x27;Logic between attribute keys: &#x27;;\n",
       "        labelText.style.marginRight = &#x27;8px&#x27;;\n",
       "    \n",
       "        const toggleContainer = document.createElement(&#x27;div&#x27;);\n",
       "        toggleContainer.style.display = &#x27;flex&#x27;;\n",
       "        toggleContainer.style.alignItems = &#x27;center&#x27;;\n",
       "        toggleContainer.style.gap = &#x27;8px&#x27;;\n",
       "    \n",
       "        const orText = document.createElement(&#x27;span&#x27;);\n",
       "        orText.textContent = &#x27;OR&#x27;;\n",
       "        orText.style.fontSize = &#x27;0.9em&#x27;;\n",
       "    \n",
       "        const toggleSwitch = document.createElement(&#x27;div&#x27;);\n",
       "        toggleSwitch.className = &#x27;toggle-switch&#x27;;\n",
       "    \n",
       "        const toggleInput = document.createElement(&#x27;input&#x27;);\n",
       "        toggleInput.type = &#x27;checkbox&#x27;;\n",
       "        toggleInput.checked = this.filterState.useAndLogic;\n",
       "        toggleInput.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "            this.filterState.useAndLogic = e.target.checked;\n",
       "            this.handleFilterChange();\n",
       "        });\n",
       "    \n",
       "        const toggleSlider = document.createElement(&#x27;span&#x27;);\n",
       "        toggleSlider.className = &#x27;toggle-slider&#x27;;\n",
       "    \n",
       "        const andText = document.createElement(&#x27;span&#x27;);\n",
       "        andText.textContent = &#x27;AND&#x27;;\n",
       "        andText.style.fontSize = &#x27;0.9em&#x27;;\n",
       "    \n",
       "        toggleSwitch.appendChild(toggleInput);\n",
       "        toggleSwitch.appendChild(toggleSlider);\n",
       "    \n",
       "        toggleContainer.appendChild(orText);\n",
       "        toggleContainer.appendChild(toggleSwitch);\n",
       "        toggleContainer.appendChild(andText);\n",
       "    \n",
       "        logicLabel.appendChild(labelText);\n",
       "        logicLabel.appendChild(toggleContainer);\n",
       "        logicToggleContainer.appendChild(logicLabel);\n",
       "        filterContainer.appendChild(logicToggleContainer);\n",
       "    \n",
       "        // Create attribute key sections\n",
       "        this.filterState.keys.forEach(filter =&gt; {\n",
       "            const keySection = document.createElement(&#x27;div&#x27;);\n",
       "            keySection.className = &#x27;filter-section&#x27;;\n",
       "            keySection.style.marginBottom = &#x27;1rem&#x27;;\n",
       "    \n",
       "            const keyCheckbox = document.createElement(&#x27;input&#x27;);\n",
       "            keyCheckbox.type = &#x27;checkbox&#x27;;\n",
       "            keyCheckbox.checked = filter.selected;\n",
       "            keyCheckbox.id = `filter-${filter.key}`;\n",
       "            keyCheckbox.style.marginRight = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "            const keyLabel = document.createElement(&#x27;label&#x27;);\n",
       "            keyLabel.htmlFor = `filter-${filter.key}`;\n",
       "            keyLabel.textContent = filter.key;\n",
       "            keyLabel.style.fontWeight = &#x27;bold&#x27;;\n",
       "    \n",
       "            const valuesContainer = document.createElement(&#x27;div&#x27;);\n",
       "            valuesContainer.style.marginLeft = &#x27;1.5rem&#x27;;\n",
       "            valuesContainer.style.marginTop = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "            keySection.appendChild(keyCheckbox);\n",
       "            keySection.appendChild(keyLabel);\n",
       "    \n",
       "            filter.valueFilters.forEach(valueFilter =&gt; {\n",
       "                const valueDiv = document.createElement(&#x27;div&#x27;);\n",
       "                valueDiv.style.marginBottom = &#x27;0.25rem&#x27;;\n",
       "    \n",
       "                const valueCheckbox = document.createElement(&#x27;input&#x27;);\n",
       "                valueCheckbox.type = &#x27;checkbox&#x27;;\n",
       "                valueCheckbox.checked = valueFilter.selected;\n",
       "                valueCheckbox.id = `filter-${filter.key}-${valueFilter.value}`;\n",
       "                valueCheckbox.style.marginRight = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "                const valueLabel = document.createElement(&#x27;label&#x27;);\n",
       "                valueLabel.htmlFor = `filter-${filter.key}-${valueFilter.value}`;\n",
       "                valueLabel.textContent = valueFilter.value;\n",
       "    \n",
       "                valueDiv.appendChild(valueCheckbox);\n",
       "                valueDiv.appendChild(valueLabel);\n",
       "                valuesContainer.appendChild(valueDiv);\n",
       "    \n",
       "                valueCheckbox.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "                    valueFilter.selected = e.target.checked;\n",
       "                    this.handleFilterChange();\n",
       "                });\n",
       "            });\n",
       "    \n",
       "            keySection.appendChild(valuesContainer);\n",
       "            filterContainer.appendChild(keySection);\n",
       "    \n",
       "            keyCheckbox.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "                filter.selected = e.target.checked;\n",
       "                filter.valueFilters.forEach(valueFilter =&gt; {\n",
       "                    valueFilter.selected = e.target.checked;\n",
       "                    const valueCheckbox = document.getElementById(`filter-${filter.key}-${valueFilter.value}`);\n",
       "                    if (valueCheckbox) {\n",
       "                        valueCheckbox.checked = e.target.checked;\n",
       "                    }\n",
       "                });\n",
       "                this.handleFilterChange();\n",
       "            });\n",
       "        });\n",
       "    \n",
       "        panel.appendChild(filterContainer);\n",
       "    }\n",
       "}\n",
       "class TableManager {\n",
       "    constructor(light_theme_colors, dark_theme_colors) {\n",
       "        this.light_theme_colors = light_theme_colors;\n",
       "        this.dark_theme_colors = dark_theme_colors;\n",
       "        this.entityTable = null;\n",
       "        this.relationTable = null;\n",
       "    }\n",
       "\n",
       "    createTablePanel(text, entities, relations, currentTheme) {\n",
       "        const panel = document.createElement(&#x27;div&#x27;);\n",
       "        panel.className = &#x27;table-panel&#x27;;\n",
       "\n",
       "        const closeButton = document.createElement(&#x27;button&#x27;);\n",
       "        closeButton.className = &#x27;table-close-button&#x27;;\n",
       "        closeButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;line x1=&quot;18&quot; y1=&quot;6&quot; x2=&quot;6&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;6&quot; y1=&quot;6&quot; x2=&quot;18&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&#x27;;\n",
       "        closeButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            panel.classList.remove(&#x27;open&#x27;);\n",
       "            document.getElementById(&#x27;display-textbox-container&#x27;).classList.remove(&#x27;with-table&#x27;);\n",
       "        });\n",
       "        panel.appendChild(closeButton);\n",
       "        \n",
       "        const content = document.createElement(&#x27;div&#x27;);\n",
       "        \n",
       "        const entitySection = document.createElement(&#x27;div&#x27;);\n",
       "        entitySection.className = &#x27;table-section&#x27;;\n",
       "        entitySection.innerHTML = &#x27;&lt;h2&gt;Entities&lt;/h2&gt;&#x27;;\n",
       "        const entityTable = document.createElement(&#x27;table&#x27;);\n",
       "        entitySection.appendChild(entityTable);\n",
       "        content.appendChild(entitySection);\n",
       "        this.entityTable = entityTable;\n",
       "        this.updateEntityTable(text, entities, currentTheme);\n",
       "\n",
       "        if (data.relations) {\n",
       "            const relationSection = document.createElement(&#x27;div&#x27;);\n",
       "            relationSection.className = &#x27;table-section&#x27;;\n",
       "            relationSection.innerHTML = &#x27;&lt;h2&gt;Relations&lt;/h2&gt;&#x27;;\n",
       "            const relationTable = document.createElement(&#x27;table&#x27;);\n",
       "            relationSection.appendChild(relationTable);\n",
       "            content.appendChild(relationSection);\n",
       "            this.relationTable = relationTable;\n",
       "            this.updateRelationTable(text, entities, relations, currentTheme);\n",
       "        }\n",
       "\n",
       "        panel.appendChild(content);\n",
       "        return panel;\n",
       "    }\n",
       "\n",
       "    updateEntityTable(text, entities, currentTheme) {\n",
       "        if (!this.entityTable) return;\n",
       "        this.entityTable.innerHTML = &#x27;&#x27;;\n",
       "        \n",
       "        const thead = document.createElement(&#x27;thead&#x27;);\n",
       "        const tbody = document.createElement(&#x27;tbody&#x27;);\n",
       "\n",
       "        const attributeKeys = new Set();\n",
       "        entities.forEach(entity =&gt; {\n",
       "            if (entity.attr) {\n",
       "                Object.keys(entity.attr).forEach(key =&gt; attributeKeys.add(key));\n",
       "            }\n",
       "        });\n",
       "        const sortedAttributeKeys = Array.from(attributeKeys).sort();\n",
       "\n",
       "        const headerRow = document.createElement(&#x27;tr&#x27;);\n",
       "        [&#x27;ID&#x27;, &#x27;Text&#x27;, ...sortedAttributeKeys].forEach(header =&gt; {\n",
       "            const th = document.createElement(&#x27;th&#x27;);\n",
       "            th.textContent = header;\n",
       "            headerRow.appendChild(th);\n",
       "        });\n",
       "        thead.appendChild(headerRow);\n",
       "\n",
       "        entities.forEach(entity =&gt; {\n",
       "            const row = document.createElement(&#x27;tr&#x27;);\n",
       "            \n",
       "            const idCell = document.createElement(&#x27;td&#x27;);\n",
       "            idCell.textContent = entity.entity_id;\n",
       "            row.appendChild(idCell);\n",
       "            \n",
       "            const textCell = document.createElement(&#x27;td&#x27;);\n",
       "            const entityMark = document.createElement(&#x27;mark&#x27;);\n",
       "            entityMark.className = &#x27;entity-table-mark&#x27;;\n",
       "            entityMark.setAttribute(&#x27;entity-id&#x27;, entity.entity_id);\n",
       "            entityMark.textContent = text.substring(entity.start, entity.end);\n",
       "            entityMark.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, true));\n",
       "            entityMark.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, false));\n",
       "            \n",
       "            if (entity.color !== undefined) {\n",
       "                entityMark.style.background = &#x27;none&#x27;;\n",
       "                if (typeof entity.color === &#x27;string&#x27;) {\n",
       "                    entityMark.style.backgroundColor = entity.color;\n",
       "                } else if (typeof entity.color === &#x27;number&#x27;) {\n",
       "                    entityMark.style.backgroundColor = currentTheme === &#x27;light&#x27; ? \n",
       "                        this.light_theme_colors[entity.color][&quot;color_code&quot;] : \n",
       "                        this.dark_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                }\n",
       "            }\n",
       "\n",
       "            textCell.appendChild(entityMark);\n",
       "            row.appendChild(textCell);\n",
       "            \n",
       "            sortedAttributeKeys.forEach(attrKey =&gt; {\n",
       "                const attrCell = document.createElement(&#x27;td&#x27;);\n",
       "                if (entity.attr &amp;&amp; entity.attr[attrKey] !== undefined) {\n",
       "                    attrCell.textContent = entity.attr[attrKey];\n",
       "                } else {\n",
       "                    attrCell.textContent = &#x27;-&#x27;;\n",
       "                    attrCell.style.color = &#x27;rgba(128, 128, 128, 0.5)&#x27;;\n",
       "                }\n",
       "                row.appendChild(attrCell);\n",
       "            });\n",
       "\n",
       "            tbody.appendChild(row);\n",
       "        });\n",
       "\n",
       "        this.entityTable.appendChild(thead);\n",
       "        this.entityTable.appendChild(tbody);\n",
       "    }\n",
       "\n",
       "    updateRelationTable(text, entities, relations, currentTheme) {\n",
       "        if (!this.relationTable) return;\n",
       "        this.relationTable.innerHTML = &#x27;&#x27;;\n",
       "        \n",
       "        const thead = document.createElement(&#x27;thead&#x27;);\n",
       "        const tbody = document.createElement(&#x27;tbody&#x27;);\n",
       "\n",
       "        const headerRow = document.createElement(&#x27;tr&#x27;);\n",
       "        [&#x27;Entity 1 ID&#x27;, &#x27;Entity 1&#x27;, &#x27;Entity 2 ID&#x27;, &#x27;Entity 2&#x27;].forEach(header =&gt; {\n",
       "            const th = document.createElement(&#x27;th&#x27;);\n",
       "            th.textContent = header;\n",
       "            headerRow.appendChild(th);\n",
       "        });\n",
       "        thead.appendChild(headerRow);\n",
       "\n",
       "        relations.forEach(relation =&gt; {\n",
       "            const row = document.createElement(&#x27;tr&#x27;);\n",
       "            \n",
       "            const entity1IdCell = document.createElement(&#x27;td&#x27;);\n",
       "            entity1IdCell.textContent = relation.entity_1_id;\n",
       "            row.appendChild(entity1IdCell);\n",
       "\n",
       "            const entity1Cell = document.createElement(&#x27;td&#x27;);\n",
       "            const entity1 = entities.find(e =&gt; e.entity_id === relation.entity_1_id);\n",
       "            if (entity1) {\n",
       "                const entityMark1 = document.createElement(&#x27;mark&#x27;);\n",
       "                entityMark1.className = &#x27;entity-table-mark&#x27;;\n",
       "                entityMark1.setAttribute(&#x27;entity-id&#x27;, entity1.entity_id);\n",
       "                entityMark1.textContent = text.substring(entity1.start, entity1.end);\n",
       "                entityMark1.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity1.entity_id, true));\n",
       "                entityMark1.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity1.entity_id, false));\n",
       "                \n",
       "                if (entity1.color !== undefined) {\n",
       "                    entityMark1.style.background = &#x27;none&#x27;;\n",
       "                    entityMark1.style.backgroundColor = typeof entity1.color === &#x27;string&#x27; ? \n",
       "                        entity1.color : \n",
       "                        (currentTheme === &#x27;light&#x27; ? \n",
       "                            this.light_theme_colors[entity1.color][&quot;color_code&quot;] : \n",
       "                            this.dark_theme_colors[entity1.color][&quot;color_code&quot;]);\n",
       "                }\n",
       "                entity1Cell.appendChild(entityMark1);\n",
       "            } else {\n",
       "                entity1Cell.textContent = relation.entity_1_id;\n",
       "            }\n",
       "            row.appendChild(entity1Cell);\n",
       "            \n",
       "            const entity2IdCell = document.createElement(&#x27;td&#x27;);\n",
       "            entity2IdCell.textContent = relation.entity_2_id;\n",
       "            row.appendChild(entity2IdCell);\n",
       "\n",
       "            const entity2Cell = document.createElement(&#x27;td&#x27;);\n",
       "            const entity2 = entities.find(e =&gt; e.entity_id === relation.entity_2_id);\n",
       "            if (entity2) {\n",
       "                const entityMark2 = document.createElement(&#x27;mark&#x27;);\n",
       "                entityMark2.className = &#x27;entity-table-mark&#x27;;\n",
       "                entityMark2.setAttribute(&#x27;entity-id&#x27;, entity2.entity_id);\n",
       "                entityMark2.textContent = text.substring(entity2.start, entity2.end);\n",
       "                entityMark2.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity2.entity_id, true));\n",
       "                entityMark2.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity2.entity_id, false));\n",
       "                \n",
       "                if (entity2.color !== undefined) {\n",
       "                    entityMark2.style.background = &#x27;none&#x27;;\n",
       "                    entityMark2.style.backgroundColor = typeof entity2.color === &#x27;string&#x27; ? \n",
       "                        entity2.color : \n",
       "                        (currentTheme === &#x27;light&#x27; ? \n",
       "                            this.light_theme_colors[entity2.color][&quot;color_code&quot;] : \n",
       "                            this.dark_theme_colors[entity2.color][&quot;color_code&quot;]);\n",
       "                }\n",
       "                entity2Cell.appendChild(entityMark2);\n",
       "            } else {\n",
       "                entity2Cell.textContent = relation.entity_2_id;\n",
       "            }\n",
       "            row.appendChild(entity2Cell);\n",
       "            \n",
       "            tbody.appendChild(row);\n",
       "        });\n",
       "\n",
       "        this.relationTable.appendChild(thead);\n",
       "        this.relationTable.appendChild(tbody);\n",
       "    }\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        const textEntities = document.querySelectorAll(`mark[entity-id=&quot;${entityId}&quot;]`);\n",
       "        textEntities.forEach(entity =&gt; {\n",
       "            if (isEnter) {\n",
       "                entity.classList.add(&#x27;entity-highlight&#x27;);\n",
       "                const style = window.getComputedStyle(entity);\n",
       "                const backgroundColor = style.backgroundColor;\n",
       "                const glowColor = backgroundColor === &#x27;rgba(0, 0, 0, 0)&#x27; || backgroundColor === &#x27;transparent&#x27; ? &#x27;#3f87a6&#x27; : backgroundColor;\n",
       "                entity.style.boxShadow = `0 0 8px ${glowColor}, 0 0 12px ${glowColor}`;\n",
       "            } else {\n",
       "                entity.classList.remove(&#x27;entity-highlight&#x27;);\n",
       "                entity.style.boxShadow = &#x27;&#x27;;\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "}\n",
       "class App {\n",
       "    constructor(data) {\n",
       "        // Store initial data\n",
       "        this.data = data;\n",
       "        this.currentTheme = data.theme;\n",
       "        this.activeEntities = data.entities;\n",
       "        this.activeRelations = data.relations || null;\n",
       "        this.relationPathLevel = 5;\n",
       "\n",
       "        // Initialize managers\n",
       "        this.displayManager = new DisplayTextBoxManager(\n",
       "            data.light_theme_colors,\n",
       "            data.dark_theme_colors\n",
       "        );\n",
       "        this.filterManager = new FilterManager(this.applyFilters.bind(this));\n",
       "        this.tableManager = new TableManager(\n",
       "            data.light_theme_colors,\n",
       "            data.dark_theme_colors\n",
       "        );\n",
       "\n",
       "        // Bind methods\n",
       "        this.toggleTheme = this.toggleTheme.bind(this);\n",
       "        this.initializeUI = this.initializeUI.bind(this);\n",
       "        this.handleEntityHighlight = this.handleEntityHighlight.bind(this);\n",
       "    }\n",
       "\n",
       "    async initialize() {\n",
       "        // Wait for DOM to be fully loaded\n",
       "        if (document.readyState === &#x27;loading&#x27;) {\n",
       "            await new Promise(resolve =&gt; {\n",
       "                document.addEventListener(&#x27;DOMContentLoaded&#x27;, resolve);\n",
       "            });\n",
       "        }\n",
       "\n",
       "        // Initialize UI elements\n",
       "        this.initializeUI();\n",
       "\n",
       "        // Set initial theme\n",
       "        if (this.data.theme === &#x27;dark&#x27;) {\n",
       "            document.body.classList.add(&#x27;dark-theme&#x27;);\n",
       "        }\n",
       "\n",
       "        // Initialize displays\n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "\n",
       "        if (this.activeRelations) {\n",
       "            this.displayManager.alineDisplayRelation();\n",
       "            this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "\n",
       "            // Add event listeners for relations\n",
       "            window.addEventListener(&#x27;scroll&#x27;, () =&gt; {\n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "            });\n",
       "\n",
       "            window.addEventListener(&#x27;resize&#x27;, () =&gt; {\n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "            });\n",
       "        }\n",
       "    }\n",
       "\n",
       "    initializeUI() {\n",
       "        const header = document.createElement(&#x27;div&#x27;);\n",
       "        header.className = &#x27;header-container&#x27;;\n",
       "        document.body.appendChild(header);\n",
       "\n",
       "        const themeButton = this.createThemeButton();\n",
       "        header.appendChild(themeButton);\n",
       "\n",
       "        const {filterButton, filterPanel, filterOverlay} = this.createFilterElements();\n",
       "        header.appendChild(filterButton);\n",
       "        document.body.appendChild(filterPanel);\n",
       "        document.body.appendChild(filterOverlay);\n",
       "\n",
       "        const filterState = this.filterManager.extractAttributeFilters(this.data.entities);\n",
       "        this.filterManager.createFilterUI(filterPanel.querySelector(&#x27;div&#x27;));\n",
       "\n",
       "        const {tableButton, tablePanel} = this.createTableElements();\n",
       "        header.appendChild(tableButton);\n",
       "        document.body.appendChild(tablePanel);\n",
       "\n",
       "        this.setupEventListeners(filterButton, filterPanel, filterOverlay, tableButton, tablePanel);\n",
       "    }\n",
       "\n",
       "    createThemeButton() {\n",
       "        const themeButton = document.createElement(&#x27;button&#x27;);\n",
       "        themeButton.className = &#x27;theme-button&#x27;;\n",
       "        themeButton.innerHTML = `&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;\n",
       "            &lt;path d=&quot;M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z&quot;&gt;&lt;/path&gt;\n",
       "        &lt;/svg&gt;`;\n",
       "        themeButton.addEventListener(&#x27;click&#x27;, this.toggleTheme);\n",
       "        return themeButton;\n",
       "    }\n",
       "\n",
       "    createFilterElements() {\n",
       "        const filterButton = document.createElement(&#x27;button&#x27;);\n",
       "        filterButton.className = &#x27;filters-button&#x27;;\n",
       "        filterButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;polygon points=&quot;22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3&quot;&gt;&lt;/polygon&gt;&lt;/svg&gt;&#x27;;\n",
       "\n",
       "        const filterPanel = document.createElement(&#x27;div&#x27;);\n",
       "        filterPanel.className = &#x27;filters-panel&#x27;;\n",
       "        filterPanel.innerHTML = &#x27;&lt;div style=&quot;padding: 2rem;&quot;&gt;&lt;h2 style=&quot;margin-bottom: 1rem; font-size: 1.5rem;&quot;&gt;Filters&lt;/h2&gt;&lt;/div&gt;&#x27;;\n",
       "\n",
       "        const filterOverlay = document.createElement(&#x27;div&#x27;);\n",
       "        filterOverlay.className = &#x27;filters-overlay&#x27;;\n",
       "\n",
       "        return { filterButton, filterPanel, filterOverlay };\n",
       "    }\n",
       "\n",
       "    createTableElements() {\n",
       "        const tableButton = document.createElement(&#x27;button&#x27;);\n",
       "        tableButton.className = &#x27;table-button&#x27;;\n",
       "        tableButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;18&quot; height=&quot;18&quot; rx=&quot;2&quot; ry=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;3&quot; y1=&quot;9&quot; x2=&quot;21&quot; y2=&quot;9&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;3&quot; y1=&quot;15&quot; x2=&quot;21&quot; y2=&quot;15&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&#x27;;\n",
       "\n",
       "        const tablePanel = this.tableManager.createTablePanel(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "\n",
       "        return { tableButton, tablePanel };\n",
       "    }\n",
       "\n",
       "    setupEventListeners(filterButton, filterPanel, filterOverlay, tableButton, tablePanel) {\n",
       "        // Filter panel events\n",
       "        filterButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            filterPanel.classList.toggle(&#x27;open&#x27;);\n",
       "            filterOverlay.classList.toggle(&#x27;open&#x27;);\n",
       "        });\n",
       "\n",
       "        filterOverlay.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            filterPanel.classList.remove(&#x27;open&#x27;);\n",
       "            filterOverlay.classList.remove(&#x27;open&#x27;);\n",
       "        });\n",
       "\n",
       "        // Table panel events\n",
       "        tableButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            tablePanel.classList.toggle(&#x27;open&#x27;);\n",
       "            const container = document.getElementById(&#x27;display-textbox-container&#x27;);\n",
       "            container.classList.toggle(&#x27;with-table&#x27;);\n",
       "            \n",
       "            if (this.activeRelations) {\n",
       "                setTimeout(() =&gt; {\n",
       "                    this.displayManager.alineDisplayRelation();\n",
       "                    this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "                }, 300);\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "\n",
       "    toggleTheme() {\n",
       "        this.currentTheme = this.currentTheme === &#x27;light&#x27; ? &#x27;dark&#x27; : &#x27;light&#x27;;\n",
       "        document.body.classList.toggle(&#x27;dark-theme&#x27;);\n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        this.tableManager.updateEntityTable(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        if (this.activeRelations) {\n",
       "            this.tableManager.updateRelationTable(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "        }\n",
       "    }\n",
       "\n",
       "    applyFilters(filterState) {\n",
       "        this.activeEntities = this.data.entities.filter(entity =&gt; {\n",
       "            if (!entity.attr) return false;\n",
       "            \n",
       "            const selectedFilters = filterState.keys.filter(f =&gt; f.selected);\n",
       "            if (selectedFilters.length === 0) return true;\n",
       "\n",
       "            const matchesFilter = (filter) =&gt; {\n",
       "                const entityValue = entity.attr[filter.key];\n",
       "                if (!entityValue) return false;\n",
       "                return filter.valueFilters.some(valueFilter =&gt; \n",
       "                    valueFilter.selected &amp;&amp; valueFilter.value === entityValue\n",
       "                );\n",
       "            };\n",
       "\n",
       "            return filterState.useAndLogic ? \n",
       "                selectedFilters.every(matchesFilter) : \n",
       "                selectedFilters.some(matchesFilter);\n",
       "        });\n",
       "        \n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        this.tableManager.updateEntityTable(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        \n",
       "        if (this.data.relations) {\n",
       "            requestAnimationFrame(() =&gt; {\n",
       "                const activeEntityIds = new Set(this.activeEntities.map(e =&gt; e.entity_id));\n",
       "                \n",
       "                this.activeRelations = this.data.relations.filter(rel =&gt; {\n",
       "                    const entity1Exists = document.getElementById(rel.entity_1_id) !== null;\n",
       "                    const entity2Exists = document.getElementById(rel.entity_2_id) !== null;\n",
       "                    return activeEntityIds.has(rel.entity_1_id) &amp;&amp; \n",
       "                           activeEntityIds.has(rel.entity_2_id) &amp;&amp;\n",
       "                           entity1Exists &amp;&amp; entity2Exists;\n",
       "                });\n",
       "                \n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "                if (this.activeRelations) {\n",
       "                    this.tableManager.updateRelationTable(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "                }\n",
       "            });\n",
       "        }\n",
       "    }\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        this.displayManager.handleEntityHighlight(entityId, isEnter);\n",
       "        this.tableManager.handleEntityHighlight(entityId, isEnter);\n",
       "    }\n",
       "}\n",
       "\n",
       "// Initialize the application when the script loads\n",
       "const app = new App(data);\n",
       "app.initialize();\n",
       "\n",
       "        &lt;/script&gt;\n",
       "    &lt;/body&gt;\n",
       "    &lt;/html&gt;\n",
       "    \" width=\"100%\" height=\"300px\" style=\"border:none;\"></iframe>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import html\n",
    "from IPython.display import display, HTML\n",
    "\n",
    "iframe_html = f\"\"\"\n",
    "    <iframe srcdoc=\"{html.escape(html_content)}\" width=\"100%\" height=\"300px\" style=\"border:none;\"></iframe>\n",
    "\"\"\"\n",
    "display(HTML(iframe_html))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Display entities with customized color codes"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "def color_map_func(entity):\n",
    "    if entity['attr'][\"Type\"] == \"medication\":\n",
    "        return \"#03fc24\" # Green\n",
    "    elif entity['attr'][\"Type\"] == \"condition\":\n",
    "        return \"#fca903\" # Orange\n",
    "    elif entity['attr'][\"Type\"] == \"adverse_reaction\":\n",
    "        return \"#fc0307\" # Red\n",
    "    else:\n",
    "        return \"#03A9F4\" # Blue\n",
    "    \n",
    "html_content = render(text, entities, relations, theme=\"dark\", color_map_func=color_map_func)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <iframe srcdoc=\"\n",
       "    &lt;html&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;title&gt;Named Entity Visualization&lt;/title&gt;\n",
       "        &lt;style&gt;\n",
       "        /* Default (Light) Theme */\n",
       ":root {\n",
       "    --background-color: #ffffff;\n",
       "    --text-color: #000000;\n",
       "    --path-color: #000208;\n",
       "    --tooltip-background-color: #333333;\n",
       "    --icon-color: #000000;\n",
       "}\n",
       "\n",
       "/* Dark Theme */\n",
       "body.dark-theme {\n",
       "    --background-color: #1f1f1f;\n",
       "    --text-color: #ffffff;\n",
       "    --path-color: #9C27B0;\n",
       "    --tooltip-background-color: #444444;\n",
       "    --icon-color: #ffffff;\n",
       "}\n",
       "\n",
       "body {\n",
       "    background-color: var(--background-color);\n",
       "    color: var(--text-color);\n",
       "}\n",
       "\n",
       ".entity-mark {\n",
       "    padding-right: 0.3em;\n",
       "    padding-left: 0.3em;\n",
       "    padding-top: 0.05em;\n",
       "    padding-bottom: 0.05em;\n",
       "    margin: 0 0.1em;\n",
       "    line-height: 1;\n",
       "    border-radius: 0.35em;\n",
       "    background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);\n",
       "    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */\n",
       "    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */\n",
       "} \n",
       "\n",
       "\n",
       "\n",
       ".custom-tooltip {\n",
       "    word-wrap: break-word; /* Ensures long words break into the next line */\n",
       "    overflow-wrap: break-word; /* Ensures content stays within bounds */\n",
       "    box-sizing: border-box; /* Ensures padding/borders don&#x27;t affect width calculations */\n",
       "    position: absolute;\n",
       "    background-color: var(--tooltip-background-color);\n",
       "    color: #fff;\n",
       "    padding: 8px; /* Slightly larger padding */\n",
       "    border-radius: 8px; /* More rounded corners */\n",
       "    z-index: 6;\n",
       "    white-space: normal;\n",
       "    pointer-events: none;\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */\n",
       "    transition: opacity 0.3s ease; /* Smooth transition for opacity */\n",
       "    opacity: 0.8; /* Slightly transparent */\n",
       "}\n",
       "\n",
       "#display-textbox {\n",
       "    width: 100%;\n",
       "    z-index: 1;\n",
       "    word-wrap: break-word;\n",
       "    overflow-wrap: break-word;\n",
       "    white-space: normal;\n",
       "    position: absolute;\n",
       "    line-height: 1.5;\n",
       "    padding: 1.5rem;\n",
       "    \n",
       "    /* Add white background, shadow and rounded corners */\n",
       "    background-color: var(--background-color);\n",
       "    border-radius: 12px;\n",
       "    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",
       "    \n",
       "    /* Hide horizontal scrollbar and only show vertical when needed */\n",
       "    overflow-x: hidden;\n",
       "    overflow-y: auto;\n",
       "}\n",
       "\n",
       "\n",
       "#display-relation {\n",
       "    width: 100%;\n",
       "    position: absolute;\n",
       "    z-index: 2;\n",
       "    pointer-events: none; /* Make the SVG non-interactive */\n",
       "    top: 0; \n",
       "    left: 0; \n",
       "}\n",
       "\n",
       ".relation-path {\n",
       "    opacity: 0.6;\n",
       "\tstroke: var(--path-color);\n",
       "    stroke-width: 2; /* Set the stroke width */\n",
       "    fill: none; /* Ensure the path is not filled */\n",
       "}\n",
       "\n",
       "#display-textbox-container {\n",
       "    left: 0%;\n",
       "    width: 95%;\n",
       "    height: 95%;\n",
       "    position: absolute;\n",
       "    transition: width 0.3s ease-in-out; \n",
       "}\n",
       "\n",
       "\n",
       ".theme-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 0.5rem; /* Position it at the leftmost position */\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".theme-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       "\n",
       ".filters-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 2.5rem;\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".filters-button svg {\n",
       "    width: 100%;\n",
       "    height: 100%;\n",
       "}\n",
       "\n",
       ".filters-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       ".filters-panel {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    width: 33.333%;\n",
       "    height: 100%;\n",
       "    background-color: var(--background-color);\n",
       "    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);\n",
       "    transform: translateX(-100%);\n",
       "    transition: transform 0.3s ease-in-out;\n",
       "    z-index: 5;\n",
       "    overflow-y: auto;\n",
       "}\n",
       "\n",
       ".filters-panel.open {\n",
       "    transform: translateX(0);\n",
       "}\n",
       "\n",
       ".filters-overlay {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    width: 100%;\n",
       "    height: 100%;\n",
       "    background-color: rgba(0, 0, 0, 0.5);\n",
       "    opacity: 0;\n",
       "    visibility: hidden;\n",
       "    transition: all 0.3s ease-in-out;\n",
       "    z-index: 4;\n",
       "}\n",
       "\n",
       ".filters-overlay.open {\n",
       "    opacity: 1;\n",
       "    visibility: visible;\n",
       "}\n",
       "\n",
       ".filter-section {\n",
       "    border-bottom: 1px solid rgba(128, 128, 128, 0.2);\n",
       "    padding-bottom: 1rem;\n",
       "}\n",
       "\n",
       ".filter-section:last-child {\n",
       "    border-bottom: none;\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;] {\n",
       "    cursor: pointer;\n",
       "}\n",
       "\n",
       ".filter-section label {\n",
       "    cursor: pointer;\n",
       "    user-select: none;\n",
       "}\n",
       "\n",
       "/* Customize checkboxes */\n",
       ".filter-section input[type=&quot;checkbox&quot;] {\n",
       "    appearance: none;\n",
       "    -webkit-appearance: none;\n",
       "    width: 16px;\n",
       "    height: 16px;\n",
       "    border: 2px solid var(--text-color);\n",
       "    border-radius: 3px;\n",
       "    outline: none;\n",
       "    vertical-align: middle;\n",
       "    position: relative;\n",
       "    margin-right: 8px;\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;]:checked {\n",
       "    background-color: var(--text-color);\n",
       "}\n",
       "\n",
       ".filter-section input[type=&quot;checkbox&quot;]:checked::before {\n",
       "    content: &quot;✓&quot;;\n",
       "    position: absolute;\n",
       "    color: var(--background-color);\n",
       "    font-size: 12px;\n",
       "    top: 50%;\n",
       "    left: 50%;\n",
       "    transform: translate(-50%, -50%);\n",
       "}\n",
       "\n",
       ".attribute-filters {\n",
       "    color: var(--text-color);\n",
       "}\n",
       "\n",
       "/* Toggle Switch Styles */\n",
       ".toggle-switch {\n",
       "    position: relative;\n",
       "    display: inline-block;\n",
       "    width: 48px;\n",
       "    height: 24px;\n",
       "    margin-left: 10px;\n",
       "}\n",
       "\n",
       ".toggle-switch input {\n",
       "    opacity: 0;\n",
       "    width: 0;\n",
       "    height: 0;\n",
       "}\n",
       "\n",
       ".toggle-slider {\n",
       "    position: absolute;\n",
       "    cursor: pointer;\n",
       "    top: 0;\n",
       "    left: 0;\n",
       "    right: 0;\n",
       "    bottom: 0;\n",
       "    background-color: rgba(128, 128, 128, 0.3);\n",
       "    transition: .4s;\n",
       "    border-radius: 24px;\n",
       "}\n",
       "\n",
       ".toggle-slider:before {\n",
       "    position: absolute;\n",
       "    content: &quot;&quot;;\n",
       "    height: 18px;\n",
       "    width: 18px;\n",
       "    left: 3px;\n",
       "    bottom: 3px;\n",
       "    background-color: var(--background-color);\n",
       "    transition: .4s;\n",
       "    border-radius: 50%;\n",
       "}\n",
       "\n",
       ".toggle-switch input:checked + .toggle-slider {\n",
       "    background-color: var(--text-color);\n",
       "}\n",
       "\n",
       ".toggle-switch input:checked + .toggle-slider:before {\n",
       "    transform: translateX(24px);\n",
       "}\n",
       "\n",
       ".logic-toggle {\n",
       "    font-size: 0.9em;\n",
       "    opacity: 0.9;\n",
       "}\n",
       "\n",
       ".table-button:hover {\n",
       "    transform: scale(1.05);\n",
       "    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n",
       "}\n",
       "\n",
       ".table-button {\n",
       "    position: fixed;\n",
       "    top: 0.5rem;\n",
       "    left: 4.5rem;\n",
       "    width: 1.5rem;\n",
       "    height: 1.5rem;\n",
       "    border-radius: 50%;\n",
       "    color: var(--icon-color);\n",
       "    background-color: var(--background-color);\n",
       "    border: 1px solid var(--text-color);\n",
       "    cursor: pointer;\n",
       "    z-index: 4;\n",
       "    display: flex;\n",
       "    align-items: center;\n",
       "    justify-content: center;\n",
       "    transition: all 0.3s ease;\n",
       "    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n",
       "    padding: 0.25rem;\n",
       "}\n",
       "\n",
       ".table-panel {\n",
       "    position: fixed;\n",
       "    top: 0;\n",
       "    right: 0;\n",
       "    width: 50%;\n",
       "    height: 100%;\n",
       "    background-color: var(--background-color);\n",
       "    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);\n",
       "    transform: translateX(100%);\n",
       "    transition: transform 0.3s ease-in-out;\n",
       "    z-index: 5;\n",
       "    overflow-y: auto;\n",
       "    padding: 2rem;\n",
       "}\n",
       "\n",
       ".table-close-button {\n",
       "    position: absolute;\n",
       "    top: 1rem;\n",
       "    right: 1rem;\n",
       "    background: none;\n",
       "    border: none;\n",
       "    cursor: pointer;\n",
       "    padding: 0.5rem;\n",
       "    color: inherit;\n",
       "    border-radius: 0.25rem;\n",
       "}\n",
       "\n",
       ".table-close-button:hover {\n",
       "    background-color: rgba(0, 0, 0, 0.1);\n",
       "}\n",
       "\n",
       ".dark-theme .table-close-button:hover {\n",
       "    background-color: rgba(255, 255, 255, 0.1);\n",
       "}\n",
       "\n",
       ".table-panel.open {\n",
       "    transform: translateX(0);\n",
       "}\n",
       "\n",
       ".table-panel table {\n",
       "    width: 100%;\n",
       "    border-collapse: separate;\n",
       "    border-spacing: 0;\n",
       "    margin-bottom: 2rem;\n",
       "    border-radius: 8px;\n",
       "    overflow: hidden;\n",
       "    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n",
       "}\n",
       "\n",
       ".table-panel th {\n",
       "    background-color: var(--background-color);\n",
       "    color: var(--text-color);\n",
       "    font-weight: 600;\n",
       "    text-transform: uppercase;\n",
       "    font-size: 0.85rem;\n",
       "    letter-spacing: 0.05em;\n",
       "    padding: 0.75rem 1rem;\n",
       "    border-bottom: 2px solid rgba(128, 128, 128, 0.2);\n",
       "    position: sticky;\n",
       "    top: 0;\n",
       "    z-index: 10;\n",
       "    text-align: left;\n",
       "}\n",
       "\n",
       ".table-panel td {\n",
       "    padding: 0.5rem 1rem;\n",
       "    border-bottom: 1px solid rgba(128, 128, 128, 0.1);\n",
       "    color: var(--text-color);\n",
       "    font-size: 0.95rem;\n",
       "    line-height: 1.4;\n",
       "    max-width: 300px;\n",
       "    overflow: hidden;\n",
       "    text-overflow: ellipsis;\n",
       "    white-space: nowrap;\n",
       "}\n",
       "\n",
       ".table-panel tr:last-child td {\n",
       "    border-bottom: none;\n",
       "}\n",
       "\n",
       ".table-panel tbody tr:hover {\n",
       "    background-color: rgba(128, 128, 128, 0.05);\n",
       "    transition: background-color 0.2s ease;\n",
       "}\n",
       "\n",
       "/* Add alternating row colors */\n",
       ".table-panel tbody tr:nth-child(even) {\n",
       "    background-color: rgba(128, 128, 128, 0.02);\n",
       "}\n",
       "\n",
       "/* Add responsive scrolling for table content */\n",
       ".table-panel {\n",
       "    scrollbar-width: thin;\n",
       "    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar {\n",
       "    width: 8px;\n",
       "    height: 8px;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar-track {\n",
       "    background: transparent;\n",
       "}\n",
       "\n",
       ".table-panel::-webkit-scrollbar-thumb {\n",
       "    background-color: rgba(128, 128, 128, 0.3);\n",
       "    border-radius: 4px;\n",
       "}\n",
       " \n",
       ".table-panel .table-section h2 {\n",
       "    color: var(--text-color);\n",
       "    font-size: 1.25rem;\n",
       "    font-weight: 600;\n",
       "    margin: 2rem 0 1rem;\n",
       "    padding-bottom: 0.5rem;\n",
       "    border-bottom: 2px solid rgba(128, 128, 128, 0.2);\n",
       "}\n",
       "\n",
       "#display-textbox-container.with-table {\n",
       "    left: 0%;\n",
       "    width: 45%;\n",
       "}\n",
       "\n",
       ".entity-table-mark {\n",
       "    padding-right: 0.3em;\n",
       "    padding-left: 0.3em;\n",
       "    padding-top: 0.05em;\n",
       "    padding-bottom: 0.05em;\n",
       "    margin: 0 0.1em;\n",
       "    line-height: 1;\n",
       "    border-radius: 0.35em;\n",
       "    background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);\n",
       "    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */\n",
       "} \n",
       "\n",
       ".entity-highlight {\n",
       "    text-shadow: 0 0 0.5px currentColor;\n",
       "    font-synthesis: none;\n",
       "    transition: all 0.3s ease;\n",
       "}\n",
       "\n",
       "/* Use the entity&#x27;s background color for glow via JavaScript */\n",
       ".entity-highlight-glow {\n",
       "    box-shadow: 0 0 8px currentColor, 0 0 12px currentColor;\n",
       "} \n",
       "        &lt;/style&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body&gt;\n",
       "        &lt;div id=&quot;display-textbox-container&quot;&gt;\n",
       "            &lt;div id=&quot;display-textbox&quot;&gt;&lt;/div&gt;\n",
       "            &lt;svg id=&quot;display-relation&quot;&gt;&lt;/svg&gt;\n",
       "        &lt;/div&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot;&gt;\n",
       "            // Embed the data as JavaScript variables\n",
       "            const data = {&quot;text&quot;: &quot;\\nDr. Emily Johnson, a cardiologist at Green Valley Hospital, recently treated a 45-year-old male patient with \\na history of hypertension and Type 2 diabetes. The patient was prescribed Lisinopril, 10 mg once daily, to manage his blood pressure, \\nand Metformin, 500 mg twice daily, for glucose control. During a follow-up visit, the patient reported occasional dizziness and fatigue. \\nAfter reviewing the symptoms, Dr. Johnson decided to adjust the Lisinopril dosage to 5 mg and advised the patient to monitor his \\nblood pressure levels closely over the next two weeks.\\n&quot;, &quot;entities&quot;: [{&quot;entity_id&quot;: &quot;0&quot;, &quot;start&quot;: 124, &quot;end&quot;: 136, &quot;attr&quot;: {&quot;Type&quot;: &quot;condition&quot;}, &quot;color&quot;: &quot;#fca903&quot;}, {&quot;entity_id&quot;: &quot;1&quot;, &quot;start&quot;: 141, &quot;end&quot;: 156, &quot;attr&quot;: {&quot;Type&quot;: &quot;condition&quot;}, &quot;color&quot;: &quot;#fca903&quot;}, {&quot;entity_id&quot;: &quot;2&quot;, &quot;start&quot;: 185, &quot;end&quot;: 195, &quot;attr&quot;: {&quot;Type&quot;: &quot;medication&quot;, &quot;Dosage&quot;: &quot;10 mg&quot;, &quot;Frequency&quot;: &quot;once daily&quot;}, &quot;color&quot;: &quot;#03fc24&quot;}, {&quot;entity_id&quot;: &quot;3&quot;, &quot;start&quot;: 250, &quot;end&quot;: 259, &quot;attr&quot;: {&quot;Type&quot;: &quot;medication&quot;, &quot;Dosage&quot;: &quot;500 mg&quot;, &quot;Frequency&quot;: &quot;twice daily&quot;}, &quot;color&quot;: &quot;#03fc24&quot;}, {&quot;entity_id&quot;: &quot;4&quot;, &quot;start&quot;: 360, &quot;end&quot;: 369, &quot;attr&quot;: {&quot;Type&quot;: &quot;adverse_reaction&quot;}, &quot;color&quot;: &quot;#fc0307&quot;}, {&quot;entity_id&quot;: &quot;5&quot;, &quot;start&quot;: 374, &quot;end&quot;: 381, &quot;attr&quot;: {&quot;Type&quot;: &quot;adverse_reaction&quot;}, &quot;color&quot;: &quot;#fc0307&quot;}], &quot;theme&quot;: &quot;dark&quot;, &quot;light_theme_colors&quot;: [{&quot;color_name&quot;: &quot;blue&quot;, &quot;color_code&quot;: &quot;#1f77b4&quot;}, {&quot;color_name&quot;: &quot;orange&quot;, &quot;color_code&quot;: &quot;#ff7f0e&quot;}, {&quot;color_name&quot;: &quot;green&quot;, &quot;color_code&quot;: &quot;#2ca02c&quot;}, {&quot;color_name&quot;: &quot;red&quot;, &quot;color_code&quot;: &quot;#d62728&quot;}, {&quot;color_name&quot;: &quot;purple&quot;, &quot;color_code&quot;: &quot;#9467bd&quot;}, {&quot;color_name&quot;: &quot;brown&quot;, &quot;color_code&quot;: &quot;#8c564b&quot;}, {&quot;color_name&quot;: &quot;pink&quot;, &quot;color_code&quot;: &quot;#e377c2&quot;}, {&quot;color_name&quot;: &quot;gray&quot;, &quot;color_code&quot;: &quot;#7f7f7f&quot;}, {&quot;color_name&quot;: &quot;yellow-green&quot;, &quot;color_code&quot;: &quot;#bcbd22&quot;}, {&quot;color_name&quot;: &quot;cyan&quot;, &quot;color_code&quot;: &quot;#17becf&quot;}, {&quot;color_name&quot;: &quot;teal&quot;, &quot;color_code&quot;: &quot;#008080&quot;}, {&quot;color_name&quot;: &quot;gold&quot;, &quot;color_code&quot;: &quot;#ffd700&quot;}, {&quot;color_name&quot;: &quot;lavender&quot;, &quot;color_code&quot;: &quot;#e6e6fa&quot;}, {&quot;color_name&quot;: &quot;salmon&quot;, &quot;color_code&quot;: &quot;#fa8072&quot;}, {&quot;color_name&quot;: &quot;turquoise&quot;, &quot;color_code&quot;: &quot;#40e0d0&quot;}, {&quot;color_name&quot;: &quot;magenta&quot;, &quot;color_code&quot;: &quot;#ff00ff&quot;}, {&quot;color_name&quot;: &quot;lime&quot;, &quot;color_code&quot;: &quot;#00ff00&quot;}, {&quot;color_name&quot;: &quot;navy&quot;, &quot;color_code&quot;: &quot;#000080&quot;}, {&quot;color_name&quot;: &quot;beige&quot;, &quot;color_code&quot;: &quot;#f5f5dc&quot;}, {&quot;color_name&quot;: &quot;coral&quot;, &quot;color_code&quot;: &quot;#ff7f50&quot;}], &quot;dark_theme_colors&quot;: [{&quot;color_name&quot;: &quot;deep orange&quot;, &quot;color_code&quot;: &quot;#FF5722&quot;}, {&quot;color_name&quot;: &quot;green&quot;, &quot;color_code&quot;: &quot;#4CAF50&quot;}, {&quot;color_name&quot;: &quot;blue&quot;, &quot;color_code&quot;: &quot;#2196F3&quot;}, {&quot;color_name&quot;: &quot;yellow&quot;, &quot;color_code&quot;: &quot;#FFEB3B&quot;}, {&quot;color_name&quot;: &quot;purple&quot;, &quot;color_code&quot;: &quot;#9C27B0&quot;}, {&quot;color_name&quot;: &quot;light blue&quot;, &quot;color_code&quot;: &quot;#03A9F4&quot;}, {&quot;color_name&quot;: &quot;amber&quot;, &quot;color_code&quot;: &quot;#FFC107&quot;}, {&quot;color_name&quot;: &quot;pink&quot;, &quot;color_code&quot;: &quot;#FF4081&quot;}, {&quot;color_name&quot;: &quot;light green&quot;, &quot;color_code&quot;: &quot;#8BC34A&quot;}, {&quot;color_name&quot;: &quot;orange&quot;, &quot;color_code&quot;: &quot;#FF9800&quot;}, {&quot;color_name&quot;: &quot;deep purple&quot;, &quot;color_code&quot;: &quot;#673AB7&quot;}, {&quot;color_name&quot;: &quot;dark teal&quot;, &quot;color_code&quot;: &quot;#004D40&quot;}, {&quot;color_name&quot;: &quot;midnight blue&quot;, &quot;color_code&quot;: &quot;#191970&quot;}, {&quot;color_name&quot;: &quot;chocolate&quot;, &quot;color_code&quot;: &quot;#D2691E&quot;}, {&quot;color_name&quot;: &quot;dark cyan&quot;, &quot;color_code&quot;: &quot;#008B8B&quot;}, {&quot;color_name&quot;: &quot;crimson&quot;, &quot;color_code&quot;: &quot;#DC143C&quot;}, {&quot;color_name&quot;: &quot;olive&quot;, &quot;color_code&quot;: &quot;#808000&quot;}, {&quot;color_name&quot;: &quot;dark red&quot;, &quot;color_code&quot;: &quot;#8B0000&quot;}, {&quot;color_name&quot;: &quot;steel blue&quot;, &quot;color_code&quot;: &quot;#4682B4&quot;}, {&quot;color_name&quot;: &quot;indigo&quot;, &quot;color_code&quot;: &quot;#4B0082&quot;}], &quot;relations&quot;: [{&quot;entity_1_id&quot;: &quot;2&quot;, &quot;entity_2_id&quot;: &quot;4&quot;}, {&quot;entity_1_id&quot;: &quot;2&quot;, &quot;entity_2_id&quot;: &quot;5&quot;}, {&quot;entity_1_id&quot;: &quot;3&quot;, &quot;entity_2_id&quot;: &quot;4&quot;}, {&quot;entity_1_id&quot;: &quot;3&quot;, &quot;entity_2_id&quot;: &quot;5&quot;}]};\n",
       "            \n",
       "            // Original JavaScript logic\n",
       "            class DisplayTextBoxManager {\n",
       "    constructor(light_theme_colors, dark_theme_colors) {\n",
       "        this.light_theme_colors = light_theme_colors;\n",
       "        this.dark_theme_colors = dark_theme_colors;\n",
       "    }\n",
       "\n",
       "\n",
       "    updateEntities(text, entities, currentTheme) {\n",
       "        // Clear current display textbox\n",
       "        var textElement = document.getElementById(&quot;display-textbox&quot;);\n",
       "        textElement.innerHTML = &#x27;&#x27;;\n",
       "\n",
       "        // If no entities\n",
       "        if (!entities || entities.length === 0) {\n",
       "            text.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                textElement.appendChild(document.createTextNode(line));\n",
       "                if (index &lt; array.length - 1) {\n",
       "                    textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                }\n",
       "            });\n",
       "            return null;\n",
       "        }\n",
       "\n",
       "        // Sort entities by start index\n",
       "        entities.forEach(entity =&gt; {\n",
       "            entity.start = parseInt(entity.start);\n",
       "            entity.end = parseInt(entity.end);\n",
       "        });\n",
       "        entities.sort((a, b) =&gt; a.start - b.start);\n",
       "\n",
       "        // Add entities to the display textbox\n",
       "        var lastIndex = 0;\n",
       "        entities.forEach(entity =&gt; {\n",
       "            // Add text before the entity\n",
       "            if (lastIndex &lt; entity.start) {\n",
       "                var nonEntityText = text.substring(lastIndex, entity.start);\n",
       "                nonEntityText.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                    textElement.appendChild(document.createTextNode(line));\n",
       "                    if (index &lt; array.length - 1) {\n",
       "                        textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                    }\n",
       "                });\n",
       "            }\n",
       "\n",
       "            // Add the entity text\n",
       "            var entityText = text.substring(entity.start, entity.end);\n",
       "            var entityElement = document.createElement(&quot;mark&quot;);\n",
       "            entityElement.id = entity.entity_id;\n",
       "            entityElement.setAttribute(&#x27;entity-id&#x27;, entity.entity_id);\n",
       "            entityElement.className = &quot;entity-mark&quot;;\n",
       "            entityElement.textContent = entityText;\n",
       "            entityElement.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, true));\n",
       "            entityElement.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, false));\n",
       "\n",
       "            // Assign entity color. If no color is provided, use the default background color in CSS\n",
       "            if (entity.color !== undefined) {\n",
       "                entityElement.style.background = &#x27;none&#x27;;\n",
       "                // if entity.color is a string, use it as the background color\n",
       "                if (typeof entity.color === &#x27;string&#x27;) {\n",
       "                    entityElement.style.backgroundColor = entity.color;\n",
       "                }\n",
       "                // if entity.color is a integer, use it as the index of the color palette\n",
       "                else if (typeof entity.color === &#x27;number&#x27;) {\n",
       "                    if (currentTheme === &#x27;light&#x27;) {\n",
       "                        entityElement.style.backgroundColor = this.light_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                    }\n",
       "                    else {\n",
       "                        entityElement.style.backgroundColor = this.dark_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            entityElement.addEventListener(&#x27;mouseenter&#x27;, (event) =&gt; {\n",
       "                if (entity.attr) {\n",
       "                    const prettyAttributes = JSON.stringify(entity.attr, null, 2).replace(/\\n/g, &#x27;&lt;br&gt;&#x27;).replace(/  /g, &#x27;&amp;nbsp;&amp;nbsp;&#x27;);\n",
       "                    this.showTooltip(event, `Entity ID: ${entity.entity_id}&lt;br&gt;Text: ${entityText}&lt;br&gt;Attributes: ${prettyAttributes}`);\n",
       "                }\n",
       "                else {\n",
       "                    this.showTooltip(event, `Entity ID: ${entity.entity_id}&lt;br&gt;Text: ${entityText}`);\n",
       "                }\n",
       "            });\n",
       "\n",
       "            entityElement.addEventListener(&#x27;mouseleave&#x27;, (event) =&gt; {\n",
       "                this.hideTooltip();\n",
       "            });\n",
       "            textElement.appendChild(entityElement);\n",
       "\n",
       "            lastIndex = entity.end;\n",
       "            });\n",
       "\n",
       "            // Add remaining text after the last entity\n",
       "            if (lastIndex &lt; text.length) {\n",
       "                var remainingText = text.substring(lastIndex);\n",
       "                remainingText.split(&#x27;\\n&#x27;).forEach((line, index, array) =&gt; {\n",
       "                    textElement.appendChild(document.createTextNode(line));\n",
       "                    if (index &lt; array.length - 1) {\n",
       "                        textElement.appendChild(document.createElement(&quot;br&quot;));\n",
       "                    }\n",
       "                });\n",
       "            }\n",
       "    }\n",
       "\n",
       "    \n",
       "    showTooltip(event, content) {\n",
       "        // Remove any existing tooltip\n",
       "        var existingTooltip = document.getElementById(&quot;custom-tooltip&quot;);\n",
       "        if (existingTooltip) {\n",
       "            existingTooltip.remove();\n",
       "        }\n",
       "\n",
       "        // Create a new tooltip\n",
       "        var tooltip = document.createElement(&quot;div&quot;);\n",
       "        tooltip.id = &quot;custom-tooltip&quot;;\n",
       "        tooltip.className = &quot;custom-tooltip&quot;;\n",
       "        tooltip.innerHTML = content;\n",
       "        document.body.appendChild(tooltip); \n",
       "\n",
       "        // Limit the tooltip width to 1/3 of the screen width\n",
       "        var maxWidth = window.innerWidth / 3;\n",
       "        tooltip.style.maxWidth = maxWidth + &quot;px&quot;;\n",
       "        \n",
       "        // Position the tooltip\n",
       "        var rect = event.target.getBoundingClientRect();\n",
       "        var x = rect.left + window.scrollX;\n",
       "        // 5px above the entity\n",
       "        var y = rect.top + window.scrollY - tooltip.offsetHeight - 5; \n",
       "\n",
       "        // Ensure the tooltip doesn&#x27;t go off-screen\n",
       "        if (x + tooltip.offsetWidth &gt; window.innerWidth) {\n",
       "            // 10px padding from the right edge\n",
       "            x = window.innerWidth - tooltip.offsetWidth - 10; \n",
       "        }\n",
       "        if (y &lt; 0) {\n",
       "            // 5px below the entity if it goes off-screen\n",
       "            y = rect.bottom + window.scrollY + 5; \n",
       "        }\n",
       "\n",
       "        tooltip.style.left = x + &quot;px&quot;;\n",
       "        tooltip.style.top = y + &quot;px&quot;;\n",
       "    }\n",
       "\n",
       "    hideTooltip() {\n",
       "        var tooltip = document.getElementById(&quot;custom-tooltip&quot;);\n",
       "        if (tooltip) {\n",
       "            tooltip.remove();\n",
       "        }\n",
       "    }\n",
       "\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        // Find all entities with this ID in the text display\n",
       "        const textEntities = document.querySelectorAll(`mark[entity-id=&quot;${entityId}&quot;]`);\n",
       "        \n",
       "        textEntities.forEach(entity =&gt; {\n",
       "            if (isEnter) {\n",
       "                entity.classList.add(&#x27;entity-highlight&#x27;);\n",
       "                // Get the background color and use it for the glow\n",
       "                const style = window.getComputedStyle(entity);\n",
       "                const backgroundColor = style.backgroundColor;\n",
       "                const glowColor = backgroundColor === &#x27;rgba(0, 0, 0, 0)&#x27; || backgroundColor === &#x27;transparent&#x27; ? &#x27;#3f87a6&#x27; : backgroundColor;\n",
       "                entity.style.boxShadow = `0 0 8px ${glowColor}, 0 0 12px ${glowColor}`;\n",
       "            } else {\n",
       "                entity.classList.remove(&#x27;entity-highlight&#x27;);\n",
       "                entity.style.boxShadow = &#x27;&#x27;;\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "\n",
       "    alineDisplayRelation() {\n",
       "        // Get the display-textbox (div) and display-relation (svg) elements\n",
       "        const textDiv = document.getElementById(&quot;display-textbox&quot;);\n",
       "        const svgContainer = document.getElementById(&quot;display-relation&quot;);\n",
       "        \n",
       "        if (!textDiv || !svgContainer) {\n",
       "            console.error(&quot;Required elements not found&quot;);\n",
       "            return;\n",
       "        }\n",
       "    \n",
       "        // Get dimensions of the display-textbox\n",
       "        const textDivRect = textDiv.getBoundingClientRect();\n",
       "    \n",
       "        // Set dimensions of the SVG container\n",
       "        svgContainer.style.height = `${textDivRect.height}px`;\n",
       "        svgContainer.style.width = `${textDivRect.width}px`;\n",
       "        \n",
       "        // Ensure SVG viewport is set correctly\n",
       "        svgContainer.setAttribute(&#x27;viewBox&#x27;, `0 0 ${textDivRect.width} ${textDivRect.height}`);\n",
       "    }\n",
       "\n",
       "    updateRelations(relations, r) {\n",
       "        // Get the display-textbox (div) and display-relation (svg) elements\n",
       "        const textDiv = document.getElementById(&quot;display-textbox&quot;);\n",
       "        const svgContainer = document.getElementById(&quot;display-relation&quot;);\n",
       "        \n",
       "        if (!textDiv || !svgContainer) {\n",
       "            console.error(&quot;Required elements not found for updating relations&quot;);\n",
       "            return;\n",
       "        }\n",
       "    \n",
       "        const textDivRect = textDiv.getBoundingClientRect();\n",
       "    \n",
       "        // Clear current relation lines\n",
       "        svgContainer.innerHTML = &#x27;&#x27;;\n",
       "    \n",
       "        // If no relations\n",
       "        if (!relations || relations.length === 0) {\n",
       "            return null;\n",
       "        }\n",
       "    \n",
       "        relations.forEach((rel, index) =&gt; {\n",
       "            const entity1Element = document.getElementById(rel.entity_1_id);\n",
       "            const entity2Element = document.getElementById(rel.entity_2_id);\n",
       "    \n",
       "            // Check if elements exist\n",
       "            if (!entity1Element || !entity2Element) {\n",
       "                console.error(&#x27;Entity elements not found:&#x27;, {\n",
       "                    relation: rel,\n",
       "                    entity1Found: !!entity1Element,\n",
       "                    entity2Found: !!entity2Element\n",
       "                });\n",
       "                return;\n",
       "            }\n",
       "    \n",
       "            const entity1Rect = entity1Element.getBoundingClientRect();\n",
       "            const entity2Rect = entity2Element.getBoundingClientRect();\n",
       "    \n",
       "            // Get the computed style of the entity elements\n",
       "            const entity1Style = window.getComputedStyle(entity1Element);\n",
       "            const entity2Style = window.getComputedStyle(entity2Element);\n",
       "            const entity1LineHeight = parseFloat(entity1Style.lineHeight);\n",
       "            const entity2LineHeight = parseFloat(entity2Style.lineHeight);\n",
       "    \n",
       "            // Calculate the number of lines\n",
       "            const entity1Lines = entity1Rect.height / entity1LineHeight;\n",
       "            const entity2Lines = entity2Rect.height / entity2LineHeight;\n",
       "    \n",
       "            // Handle line-broken entity\n",
       "            const entity1X = entity1Lines &gt; 2 \n",
       "                ? (entity1Rect.right - textDivRect.left)\n",
       "                : (entity1Rect.left + entity1Rect.width / 2 - textDivRect.left);\n",
       "            \n",
       "            const entity1Y = entity1Rect.top - textDivRect.top;\n",
       "            \n",
       "            const entity2X = entity2Lines &gt; 2 \n",
       "                ? (entity2Rect.right - textDivRect.left)\n",
       "                : (entity2Rect.left + entity2Rect.width / 2 - textDivRect.left);\n",
       "            \n",
       "            const entity2Y = entity2Rect.top - textDivRect.top;\n",
       "    \n",
       "            // start with entity on left\n",
       "            var startX = null;\n",
       "            var startY = null;\n",
       "            var endX = null;\n",
       "            var endY = null;\n",
       "            if (entity1X &lt; entity2X) {\n",
       "                startX = entity1X;\n",
       "                startY = entity1Y;\n",
       "                endX = entity2X;\n",
       "                endY = entity2Y;\n",
       "            } else {\n",
       "                startX = entity2X;\n",
       "                startY = entity2Y;\n",
       "                endX = entity1X;\n",
       "                endY = entity1Y;\n",
       "            }\n",
       "    \n",
       "            // Create the SVG path\n",
       "            const path = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;path&quot;);\n",
       "            let pathD;\n",
       "            // If start and end entities are on the same y-axis\n",
       "            if (startY === endY) {\n",
       "                pathD = `M${startX} ${startY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${startY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            // If start entity is below end entities\n",
       "            else if (startY &gt; endY) {\n",
       "                pathD = `M${startX} ${startY} L${startX} ${endY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${endY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            // If start entity is above end entities\n",
       "            else {\n",
       "                pathD = `M${startX} ${startY} a ${r} ${r} 0 0 1 ${r} -${r} L${endX - r} ${startY - r} a ${r} ${r} 0 0 1 ${r} ${r} L${endX} ${endY}`;\n",
       "            }\n",
       "            \n",
       "            path.setAttribute(&quot;d&quot;, pathD);\n",
       "            path.setAttribute(&quot;class&quot;, &quot;relation-path&quot;);\n",
       "            svgContainer.appendChild(path);\n",
       "        });\n",
       "    }\n",
       "\n",
       "}\n",
       "class FilterManager {\n",
       "    constructor(onFilterChange) {\n",
       "        this.onFilterChange = onFilterChange;\n",
       "        this.filterState = null;\n",
       "    }\n",
       "\n",
       "    extractAttributeFilters(entities) {\n",
       "        const attributeFilters = new Map();\n",
       "        \n",
       "        entities.forEach(entity =&gt; {\n",
       "            if (entity.attr) {\n",
       "                Object.entries(entity.attr).forEach(([key, value]) =&gt; {\n",
       "                    if (!attributeFilters.has(key)) {\n",
       "                        attributeFilters.set(key, new Set());\n",
       "                    }\n",
       "                    attributeFilters.get(key).add(value);\n",
       "                });\n",
       "            }\n",
       "        });\n",
       "        \n",
       "        this.filterState = {\n",
       "            keys: Array.from(attributeFilters.entries()).map(([key, values]) =&gt; ({\n",
       "                key,\n",
       "                values: Array.from(values),\n",
       "                selected: true,\n",
       "                valueFilters: Array.from(values).map(value =&gt; ({\n",
       "                    value,\n",
       "                    selected: true\n",
       "                }))\n",
       "            })),\n",
       "            useAndLogic: false\n",
       "        };\n",
       "\n",
       "        return this.filterState;\n",
       "    }\n",
       "\n",
       "    handleFilterChange() {\n",
       "        if (this.onFilterChange) {\n",
       "            this.onFilterChange(this.filterState);\n",
       "        }\n",
       "    }\n",
       "\n",
       "    createFilterUI(panel) {\n",
       "        const filterContainer = document.createElement(&#x27;div&#x27;);\n",
       "        filterContainer.className = &#x27;attribute-filters&#x27;;\n",
       "        filterContainer.style.padding = &#x27;0 2rem 2rem 2rem&#x27;;\n",
       "    \n",
       "        // Add logic toggle switch\n",
       "        const logicToggleContainer = document.createElement(&#x27;div&#x27;);\n",
       "        logicToggleContainer.className = &#x27;logic-toggle&#x27;;\n",
       "        logicToggleContainer.style.marginBottom = &#x27;1.5rem&#x27;;\n",
       "        logicToggleContainer.style.padding = &#x27;1rem&#x27;;\n",
       "        logicToggleContainer.style.backgroundColor = &#x27;rgba(128, 128, 128, 0.1)&#x27;;\n",
       "        logicToggleContainer.style.borderRadius = &#x27;4px&#x27;;\n",
       "    \n",
       "        const logicLabel = document.createElement(&#x27;label&#x27;);\n",
       "        logicLabel.className = &#x27;logic-label&#x27;;\n",
       "        logicLabel.style.display = &#x27;flex&#x27;;\n",
       "        logicLabel.style.alignItems = &#x27;center&#x27;;\n",
       "        logicLabel.style.justifyContent = &#x27;space-between&#x27;;\n",
       "        logicLabel.style.cursor = &#x27;pointer&#x27;;\n",
       "    \n",
       "        const labelText = document.createElement(&#x27;span&#x27;);\n",
       "        labelText.textContent = &#x27;Logic between attribute keys: &#x27;;\n",
       "        labelText.style.marginRight = &#x27;8px&#x27;;\n",
       "    \n",
       "        const toggleContainer = document.createElement(&#x27;div&#x27;);\n",
       "        toggleContainer.style.display = &#x27;flex&#x27;;\n",
       "        toggleContainer.style.alignItems = &#x27;center&#x27;;\n",
       "        toggleContainer.style.gap = &#x27;8px&#x27;;\n",
       "    \n",
       "        const orText = document.createElement(&#x27;span&#x27;);\n",
       "        orText.textContent = &#x27;OR&#x27;;\n",
       "        orText.style.fontSize = &#x27;0.9em&#x27;;\n",
       "    \n",
       "        const toggleSwitch = document.createElement(&#x27;div&#x27;);\n",
       "        toggleSwitch.className = &#x27;toggle-switch&#x27;;\n",
       "    \n",
       "        const toggleInput = document.createElement(&#x27;input&#x27;);\n",
       "        toggleInput.type = &#x27;checkbox&#x27;;\n",
       "        toggleInput.checked = this.filterState.useAndLogic;\n",
       "        toggleInput.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "            this.filterState.useAndLogic = e.target.checked;\n",
       "            this.handleFilterChange();\n",
       "        });\n",
       "    \n",
       "        const toggleSlider = document.createElement(&#x27;span&#x27;);\n",
       "        toggleSlider.className = &#x27;toggle-slider&#x27;;\n",
       "    \n",
       "        const andText = document.createElement(&#x27;span&#x27;);\n",
       "        andText.textContent = &#x27;AND&#x27;;\n",
       "        andText.style.fontSize = &#x27;0.9em&#x27;;\n",
       "    \n",
       "        toggleSwitch.appendChild(toggleInput);\n",
       "        toggleSwitch.appendChild(toggleSlider);\n",
       "    \n",
       "        toggleContainer.appendChild(orText);\n",
       "        toggleContainer.appendChild(toggleSwitch);\n",
       "        toggleContainer.appendChild(andText);\n",
       "    \n",
       "        logicLabel.appendChild(labelText);\n",
       "        logicLabel.appendChild(toggleContainer);\n",
       "        logicToggleContainer.appendChild(logicLabel);\n",
       "        filterContainer.appendChild(logicToggleContainer);\n",
       "    \n",
       "        // Create attribute key sections\n",
       "        this.filterState.keys.forEach(filter =&gt; {\n",
       "            const keySection = document.createElement(&#x27;div&#x27;);\n",
       "            keySection.className = &#x27;filter-section&#x27;;\n",
       "            keySection.style.marginBottom = &#x27;1rem&#x27;;\n",
       "    \n",
       "            const keyCheckbox = document.createElement(&#x27;input&#x27;);\n",
       "            keyCheckbox.type = &#x27;checkbox&#x27;;\n",
       "            keyCheckbox.checked = filter.selected;\n",
       "            keyCheckbox.id = `filter-${filter.key}`;\n",
       "            keyCheckbox.style.marginRight = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "            const keyLabel = document.createElement(&#x27;label&#x27;);\n",
       "            keyLabel.htmlFor = `filter-${filter.key}`;\n",
       "            keyLabel.textContent = filter.key;\n",
       "            keyLabel.style.fontWeight = &#x27;bold&#x27;;\n",
       "    \n",
       "            const valuesContainer = document.createElement(&#x27;div&#x27;);\n",
       "            valuesContainer.style.marginLeft = &#x27;1.5rem&#x27;;\n",
       "            valuesContainer.style.marginTop = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "            keySection.appendChild(keyCheckbox);\n",
       "            keySection.appendChild(keyLabel);\n",
       "    \n",
       "            filter.valueFilters.forEach(valueFilter =&gt; {\n",
       "                const valueDiv = document.createElement(&#x27;div&#x27;);\n",
       "                valueDiv.style.marginBottom = &#x27;0.25rem&#x27;;\n",
       "    \n",
       "                const valueCheckbox = document.createElement(&#x27;input&#x27;);\n",
       "                valueCheckbox.type = &#x27;checkbox&#x27;;\n",
       "                valueCheckbox.checked = valueFilter.selected;\n",
       "                valueCheckbox.id = `filter-${filter.key}-${valueFilter.value}`;\n",
       "                valueCheckbox.style.marginRight = &#x27;0.5rem&#x27;;\n",
       "    \n",
       "                const valueLabel = document.createElement(&#x27;label&#x27;);\n",
       "                valueLabel.htmlFor = `filter-${filter.key}-${valueFilter.value}`;\n",
       "                valueLabel.textContent = valueFilter.value;\n",
       "    \n",
       "                valueDiv.appendChild(valueCheckbox);\n",
       "                valueDiv.appendChild(valueLabel);\n",
       "                valuesContainer.appendChild(valueDiv);\n",
       "    \n",
       "                valueCheckbox.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "                    valueFilter.selected = e.target.checked;\n",
       "                    this.handleFilterChange();\n",
       "                });\n",
       "            });\n",
       "    \n",
       "            keySection.appendChild(valuesContainer);\n",
       "            filterContainer.appendChild(keySection);\n",
       "    \n",
       "            keyCheckbox.addEventListener(&#x27;change&#x27;, (e) =&gt; {\n",
       "                filter.selected = e.target.checked;\n",
       "                filter.valueFilters.forEach(valueFilter =&gt; {\n",
       "                    valueFilter.selected = e.target.checked;\n",
       "                    const valueCheckbox = document.getElementById(`filter-${filter.key}-${valueFilter.value}`);\n",
       "                    if (valueCheckbox) {\n",
       "                        valueCheckbox.checked = e.target.checked;\n",
       "                    }\n",
       "                });\n",
       "                this.handleFilterChange();\n",
       "            });\n",
       "        });\n",
       "    \n",
       "        panel.appendChild(filterContainer);\n",
       "    }\n",
       "}\n",
       "class TableManager {\n",
       "    constructor(light_theme_colors, dark_theme_colors) {\n",
       "        this.light_theme_colors = light_theme_colors;\n",
       "        this.dark_theme_colors = dark_theme_colors;\n",
       "        this.entityTable = null;\n",
       "        this.relationTable = null;\n",
       "    }\n",
       "\n",
       "    createTablePanel(text, entities, relations, currentTheme) {\n",
       "        const panel = document.createElement(&#x27;div&#x27;);\n",
       "        panel.className = &#x27;table-panel&#x27;;\n",
       "\n",
       "        const closeButton = document.createElement(&#x27;button&#x27;);\n",
       "        closeButton.className = &#x27;table-close-button&#x27;;\n",
       "        closeButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;line x1=&quot;18&quot; y1=&quot;6&quot; x2=&quot;6&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;6&quot; y1=&quot;6&quot; x2=&quot;18&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&#x27;;\n",
       "        closeButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            panel.classList.remove(&#x27;open&#x27;);\n",
       "            document.getElementById(&#x27;display-textbox-container&#x27;).classList.remove(&#x27;with-table&#x27;);\n",
       "        });\n",
       "        panel.appendChild(closeButton);\n",
       "        \n",
       "        const content = document.createElement(&#x27;div&#x27;);\n",
       "        \n",
       "        const entitySection = document.createElement(&#x27;div&#x27;);\n",
       "        entitySection.className = &#x27;table-section&#x27;;\n",
       "        entitySection.innerHTML = &#x27;&lt;h2&gt;Entities&lt;/h2&gt;&#x27;;\n",
       "        const entityTable = document.createElement(&#x27;table&#x27;);\n",
       "        entitySection.appendChild(entityTable);\n",
       "        content.appendChild(entitySection);\n",
       "        this.entityTable = entityTable;\n",
       "        this.updateEntityTable(text, entities, currentTheme);\n",
       "\n",
       "        if (data.relations) {\n",
       "            const relationSection = document.createElement(&#x27;div&#x27;);\n",
       "            relationSection.className = &#x27;table-section&#x27;;\n",
       "            relationSection.innerHTML = &#x27;&lt;h2&gt;Relations&lt;/h2&gt;&#x27;;\n",
       "            const relationTable = document.createElement(&#x27;table&#x27;);\n",
       "            relationSection.appendChild(relationTable);\n",
       "            content.appendChild(relationSection);\n",
       "            this.relationTable = relationTable;\n",
       "            this.updateRelationTable(text, entities, relations, currentTheme);\n",
       "        }\n",
       "\n",
       "        panel.appendChild(content);\n",
       "        return panel;\n",
       "    }\n",
       "\n",
       "    updateEntityTable(text, entities, currentTheme) {\n",
       "        if (!this.entityTable) return;\n",
       "        this.entityTable.innerHTML = &#x27;&#x27;;\n",
       "        \n",
       "        const thead = document.createElement(&#x27;thead&#x27;);\n",
       "        const tbody = document.createElement(&#x27;tbody&#x27;);\n",
       "\n",
       "        const attributeKeys = new Set();\n",
       "        entities.forEach(entity =&gt; {\n",
       "            if (entity.attr) {\n",
       "                Object.keys(entity.attr).forEach(key =&gt; attributeKeys.add(key));\n",
       "            }\n",
       "        });\n",
       "        const sortedAttributeKeys = Array.from(attributeKeys).sort();\n",
       "\n",
       "        const headerRow = document.createElement(&#x27;tr&#x27;);\n",
       "        [&#x27;ID&#x27;, &#x27;Text&#x27;, ...sortedAttributeKeys].forEach(header =&gt; {\n",
       "            const th = document.createElement(&#x27;th&#x27;);\n",
       "            th.textContent = header;\n",
       "            headerRow.appendChild(th);\n",
       "        });\n",
       "        thead.appendChild(headerRow);\n",
       "\n",
       "        entities.forEach(entity =&gt; {\n",
       "            const row = document.createElement(&#x27;tr&#x27;);\n",
       "            \n",
       "            const idCell = document.createElement(&#x27;td&#x27;);\n",
       "            idCell.textContent = entity.entity_id;\n",
       "            row.appendChild(idCell);\n",
       "            \n",
       "            const textCell = document.createElement(&#x27;td&#x27;);\n",
       "            const entityMark = document.createElement(&#x27;mark&#x27;);\n",
       "            entityMark.className = &#x27;entity-table-mark&#x27;;\n",
       "            entityMark.setAttribute(&#x27;entity-id&#x27;, entity.entity_id);\n",
       "            entityMark.textContent = text.substring(entity.start, entity.end);\n",
       "            entityMark.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, true));\n",
       "            entityMark.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity.entity_id, false));\n",
       "            \n",
       "            if (entity.color !== undefined) {\n",
       "                entityMark.style.background = &#x27;none&#x27;;\n",
       "                if (typeof entity.color === &#x27;string&#x27;) {\n",
       "                    entityMark.style.backgroundColor = entity.color;\n",
       "                } else if (typeof entity.color === &#x27;number&#x27;) {\n",
       "                    entityMark.style.backgroundColor = currentTheme === &#x27;light&#x27; ? \n",
       "                        this.light_theme_colors[entity.color][&quot;color_code&quot;] : \n",
       "                        this.dark_theme_colors[entity.color][&quot;color_code&quot;];\n",
       "                }\n",
       "            }\n",
       "\n",
       "            textCell.appendChild(entityMark);\n",
       "            row.appendChild(textCell);\n",
       "            \n",
       "            sortedAttributeKeys.forEach(attrKey =&gt; {\n",
       "                const attrCell = document.createElement(&#x27;td&#x27;);\n",
       "                if (entity.attr &amp;&amp; entity.attr[attrKey] !== undefined) {\n",
       "                    attrCell.textContent = entity.attr[attrKey];\n",
       "                } else {\n",
       "                    attrCell.textContent = &#x27;-&#x27;;\n",
       "                    attrCell.style.color = &#x27;rgba(128, 128, 128, 0.5)&#x27;;\n",
       "                }\n",
       "                row.appendChild(attrCell);\n",
       "            });\n",
       "\n",
       "            tbody.appendChild(row);\n",
       "        });\n",
       "\n",
       "        this.entityTable.appendChild(thead);\n",
       "        this.entityTable.appendChild(tbody);\n",
       "    }\n",
       "\n",
       "    updateRelationTable(text, entities, relations, currentTheme) {\n",
       "        if (!this.relationTable) return;\n",
       "        this.relationTable.innerHTML = &#x27;&#x27;;\n",
       "        \n",
       "        const thead = document.createElement(&#x27;thead&#x27;);\n",
       "        const tbody = document.createElement(&#x27;tbody&#x27;);\n",
       "\n",
       "        const headerRow = document.createElement(&#x27;tr&#x27;);\n",
       "        [&#x27;Entity 1 ID&#x27;, &#x27;Entity 1&#x27;, &#x27;Entity 2 ID&#x27;, &#x27;Entity 2&#x27;].forEach(header =&gt; {\n",
       "            const th = document.createElement(&#x27;th&#x27;);\n",
       "            th.textContent = header;\n",
       "            headerRow.appendChild(th);\n",
       "        });\n",
       "        thead.appendChild(headerRow);\n",
       "\n",
       "        relations.forEach(relation =&gt; {\n",
       "            const row = document.createElement(&#x27;tr&#x27;);\n",
       "            \n",
       "            const entity1IdCell = document.createElement(&#x27;td&#x27;);\n",
       "            entity1IdCell.textContent = relation.entity_1_id;\n",
       "            row.appendChild(entity1IdCell);\n",
       "\n",
       "            const entity1Cell = document.createElement(&#x27;td&#x27;);\n",
       "            const entity1 = entities.find(e =&gt; e.entity_id === relation.entity_1_id);\n",
       "            if (entity1) {\n",
       "                const entityMark1 = document.createElement(&#x27;mark&#x27;);\n",
       "                entityMark1.className = &#x27;entity-table-mark&#x27;;\n",
       "                entityMark1.setAttribute(&#x27;entity-id&#x27;, entity1.entity_id);\n",
       "                entityMark1.textContent = text.substring(entity1.start, entity1.end);\n",
       "                entityMark1.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity1.entity_id, true));\n",
       "                entityMark1.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity1.entity_id, false));\n",
       "                \n",
       "                if (entity1.color !== undefined) {\n",
       "                    entityMark1.style.background = &#x27;none&#x27;;\n",
       "                    entityMark1.style.backgroundColor = typeof entity1.color === &#x27;string&#x27; ? \n",
       "                        entity1.color : \n",
       "                        (currentTheme === &#x27;light&#x27; ? \n",
       "                            this.light_theme_colors[entity1.color][&quot;color_code&quot;] : \n",
       "                            this.dark_theme_colors[entity1.color][&quot;color_code&quot;]);\n",
       "                }\n",
       "                entity1Cell.appendChild(entityMark1);\n",
       "            } else {\n",
       "                entity1Cell.textContent = relation.entity_1_id;\n",
       "            }\n",
       "            row.appendChild(entity1Cell);\n",
       "            \n",
       "            const entity2IdCell = document.createElement(&#x27;td&#x27;);\n",
       "            entity2IdCell.textContent = relation.entity_2_id;\n",
       "            row.appendChild(entity2IdCell);\n",
       "\n",
       "            const entity2Cell = document.createElement(&#x27;td&#x27;);\n",
       "            const entity2 = entities.find(e =&gt; e.entity_id === relation.entity_2_id);\n",
       "            if (entity2) {\n",
       "                const entityMark2 = document.createElement(&#x27;mark&#x27;);\n",
       "                entityMark2.className = &#x27;entity-table-mark&#x27;;\n",
       "                entityMark2.setAttribute(&#x27;entity-id&#x27;, entity2.entity_id);\n",
       "                entityMark2.textContent = text.substring(entity2.start, entity2.end);\n",
       "                entityMark2.addEventListener(&#x27;mouseenter&#x27;, () =&gt; this.handleEntityHighlight(entity2.entity_id, true));\n",
       "                entityMark2.addEventListener(&#x27;mouseleave&#x27;, () =&gt; this.handleEntityHighlight(entity2.entity_id, false));\n",
       "                \n",
       "                if (entity2.color !== undefined) {\n",
       "                    entityMark2.style.background = &#x27;none&#x27;;\n",
       "                    entityMark2.style.backgroundColor = typeof entity2.color === &#x27;string&#x27; ? \n",
       "                        entity2.color : \n",
       "                        (currentTheme === &#x27;light&#x27; ? \n",
       "                            this.light_theme_colors[entity2.color][&quot;color_code&quot;] : \n",
       "                            this.dark_theme_colors[entity2.color][&quot;color_code&quot;]);\n",
       "                }\n",
       "                entity2Cell.appendChild(entityMark2);\n",
       "            } else {\n",
       "                entity2Cell.textContent = relation.entity_2_id;\n",
       "            }\n",
       "            row.appendChild(entity2Cell);\n",
       "            \n",
       "            tbody.appendChild(row);\n",
       "        });\n",
       "\n",
       "        this.relationTable.appendChild(thead);\n",
       "        this.relationTable.appendChild(tbody);\n",
       "    }\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        const textEntities = document.querySelectorAll(`mark[entity-id=&quot;${entityId}&quot;]`);\n",
       "        textEntities.forEach(entity =&gt; {\n",
       "            if (isEnter) {\n",
       "                entity.classList.add(&#x27;entity-highlight&#x27;);\n",
       "                const style = window.getComputedStyle(entity);\n",
       "                const backgroundColor = style.backgroundColor;\n",
       "                const glowColor = backgroundColor === &#x27;rgba(0, 0, 0, 0)&#x27; || backgroundColor === &#x27;transparent&#x27; ? &#x27;#3f87a6&#x27; : backgroundColor;\n",
       "                entity.style.boxShadow = `0 0 8px ${glowColor}, 0 0 12px ${glowColor}`;\n",
       "            } else {\n",
       "                entity.classList.remove(&#x27;entity-highlight&#x27;);\n",
       "                entity.style.boxShadow = &#x27;&#x27;;\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "}\n",
       "class App {\n",
       "    constructor(data) {\n",
       "        // Store initial data\n",
       "        this.data = data;\n",
       "        this.currentTheme = data.theme;\n",
       "        this.activeEntities = data.entities;\n",
       "        this.activeRelations = data.relations || null;\n",
       "        this.relationPathLevel = 5;\n",
       "\n",
       "        // Initialize managers\n",
       "        this.displayManager = new DisplayTextBoxManager(\n",
       "            data.light_theme_colors,\n",
       "            data.dark_theme_colors\n",
       "        );\n",
       "        this.filterManager = new FilterManager(this.applyFilters.bind(this));\n",
       "        this.tableManager = new TableManager(\n",
       "            data.light_theme_colors,\n",
       "            data.dark_theme_colors\n",
       "        );\n",
       "\n",
       "        // Bind methods\n",
       "        this.toggleTheme = this.toggleTheme.bind(this);\n",
       "        this.initializeUI = this.initializeUI.bind(this);\n",
       "        this.handleEntityHighlight = this.handleEntityHighlight.bind(this);\n",
       "    }\n",
       "\n",
       "    async initialize() {\n",
       "        // Wait for DOM to be fully loaded\n",
       "        if (document.readyState === &#x27;loading&#x27;) {\n",
       "            await new Promise(resolve =&gt; {\n",
       "                document.addEventListener(&#x27;DOMContentLoaded&#x27;, resolve);\n",
       "            });\n",
       "        }\n",
       "\n",
       "        // Initialize UI elements\n",
       "        this.initializeUI();\n",
       "\n",
       "        // Set initial theme\n",
       "        if (this.data.theme === &#x27;dark&#x27;) {\n",
       "            document.body.classList.add(&#x27;dark-theme&#x27;);\n",
       "        }\n",
       "\n",
       "        // Initialize displays\n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "\n",
       "        if (this.activeRelations) {\n",
       "            this.displayManager.alineDisplayRelation();\n",
       "            this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "\n",
       "            // Add event listeners for relations\n",
       "            window.addEventListener(&#x27;scroll&#x27;, () =&gt; {\n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "            });\n",
       "\n",
       "            window.addEventListener(&#x27;resize&#x27;, () =&gt; {\n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "            });\n",
       "        }\n",
       "    }\n",
       "\n",
       "    initializeUI() {\n",
       "        const header = document.createElement(&#x27;div&#x27;);\n",
       "        header.className = &#x27;header-container&#x27;;\n",
       "        document.body.appendChild(header);\n",
       "\n",
       "        const themeButton = this.createThemeButton();\n",
       "        header.appendChild(themeButton);\n",
       "\n",
       "        const {filterButton, filterPanel, filterOverlay} = this.createFilterElements();\n",
       "        header.appendChild(filterButton);\n",
       "        document.body.appendChild(filterPanel);\n",
       "        document.body.appendChild(filterOverlay);\n",
       "\n",
       "        const filterState = this.filterManager.extractAttributeFilters(this.data.entities);\n",
       "        this.filterManager.createFilterUI(filterPanel.querySelector(&#x27;div&#x27;));\n",
       "\n",
       "        const {tableButton, tablePanel} = this.createTableElements();\n",
       "        header.appendChild(tableButton);\n",
       "        document.body.appendChild(tablePanel);\n",
       "\n",
       "        this.setupEventListeners(filterButton, filterPanel, filterOverlay, tableButton, tablePanel);\n",
       "    }\n",
       "\n",
       "    createThemeButton() {\n",
       "        const themeButton = document.createElement(&#x27;button&#x27;);\n",
       "        themeButton.className = &#x27;theme-button&#x27;;\n",
       "        themeButton.innerHTML = `&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;\n",
       "            &lt;path d=&quot;M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z&quot;&gt;&lt;/path&gt;\n",
       "        &lt;/svg&gt;`;\n",
       "        themeButton.addEventListener(&#x27;click&#x27;, this.toggleTheme);\n",
       "        return themeButton;\n",
       "    }\n",
       "\n",
       "    createFilterElements() {\n",
       "        const filterButton = document.createElement(&#x27;button&#x27;);\n",
       "        filterButton.className = &#x27;filters-button&#x27;;\n",
       "        filterButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;polygon points=&quot;22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3&quot;&gt;&lt;/polygon&gt;&lt;/svg&gt;&#x27;;\n",
       "\n",
       "        const filterPanel = document.createElement(&#x27;div&#x27;);\n",
       "        filterPanel.className = &#x27;filters-panel&#x27;;\n",
       "        filterPanel.innerHTML = &#x27;&lt;div style=&quot;padding: 2rem;&quot;&gt;&lt;h2 style=&quot;margin-bottom: 1rem; font-size: 1.5rem;&quot;&gt;Filters&lt;/h2&gt;&lt;/div&gt;&#x27;;\n",
       "\n",
       "        const filterOverlay = document.createElement(&#x27;div&#x27;);\n",
       "        filterOverlay.className = &#x27;filters-overlay&#x27;;\n",
       "\n",
       "        return { filterButton, filterPanel, filterOverlay };\n",
       "    }\n",
       "\n",
       "    createTableElements() {\n",
       "        const tableButton = document.createElement(&#x27;button&#x27;);\n",
       "        tableButton.className = &#x27;table-button&#x27;;\n",
       "        tableButton.innerHTML = &#x27;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; width=&quot;16&quot; height=&quot;16&quot;&gt;&lt;rect x=&quot;3&quot; y=&quot;3&quot; width=&quot;18&quot; height=&quot;18&quot; rx=&quot;2&quot; ry=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;3&quot; y1=&quot;9&quot; x2=&quot;21&quot; y2=&quot;9&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;3&quot; y1=&quot;15&quot; x2=&quot;21&quot; y2=&quot;15&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&#x27;;\n",
       "\n",
       "        const tablePanel = this.tableManager.createTablePanel(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "\n",
       "        return { tableButton, tablePanel };\n",
       "    }\n",
       "\n",
       "    setupEventListeners(filterButton, filterPanel, filterOverlay, tableButton, tablePanel) {\n",
       "        // Filter panel events\n",
       "        filterButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            filterPanel.classList.toggle(&#x27;open&#x27;);\n",
       "            filterOverlay.classList.toggle(&#x27;open&#x27;);\n",
       "        });\n",
       "\n",
       "        filterOverlay.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            filterPanel.classList.remove(&#x27;open&#x27;);\n",
       "            filterOverlay.classList.remove(&#x27;open&#x27;);\n",
       "        });\n",
       "\n",
       "        // Table panel events\n",
       "        tableButton.addEventListener(&#x27;click&#x27;, () =&gt; {\n",
       "            tablePanel.classList.toggle(&#x27;open&#x27;);\n",
       "            const container = document.getElementById(&#x27;display-textbox-container&#x27;);\n",
       "            container.classList.toggle(&#x27;with-table&#x27;);\n",
       "            \n",
       "            if (this.activeRelations) {\n",
       "                setTimeout(() =&gt; {\n",
       "                    this.displayManager.alineDisplayRelation();\n",
       "                    this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "                }, 300);\n",
       "            }\n",
       "        });\n",
       "    }\n",
       "\n",
       "    toggleTheme() {\n",
       "        this.currentTheme = this.currentTheme === &#x27;light&#x27; ? &#x27;dark&#x27; : &#x27;light&#x27;;\n",
       "        document.body.classList.toggle(&#x27;dark-theme&#x27;);\n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        this.tableManager.updateEntityTable(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        if (this.activeRelations) {\n",
       "            this.tableManager.updateRelationTable(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "        }\n",
       "    }\n",
       "\n",
       "    applyFilters(filterState) {\n",
       "        this.activeEntities = this.data.entities.filter(entity =&gt; {\n",
       "            if (!entity.attr) return false;\n",
       "            \n",
       "            const selectedFilters = filterState.keys.filter(f =&gt; f.selected);\n",
       "            if (selectedFilters.length === 0) return true;\n",
       "\n",
       "            const matchesFilter = (filter) =&gt; {\n",
       "                const entityValue = entity.attr[filter.key];\n",
       "                if (!entityValue) return false;\n",
       "                return filter.valueFilters.some(valueFilter =&gt; \n",
       "                    valueFilter.selected &amp;&amp; valueFilter.value === entityValue\n",
       "                );\n",
       "            };\n",
       "\n",
       "            return filterState.useAndLogic ? \n",
       "                selectedFilters.every(matchesFilter) : \n",
       "                selectedFilters.some(matchesFilter);\n",
       "        });\n",
       "        \n",
       "        this.displayManager.updateEntities(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        this.tableManager.updateEntityTable(this.data.text, this.activeEntities, this.currentTheme);\n",
       "        \n",
       "        if (this.data.relations) {\n",
       "            requestAnimationFrame(() =&gt; {\n",
       "                const activeEntityIds = new Set(this.activeEntities.map(e =&gt; e.entity_id));\n",
       "                \n",
       "                this.activeRelations = this.data.relations.filter(rel =&gt; {\n",
       "                    const entity1Exists = document.getElementById(rel.entity_1_id) !== null;\n",
       "                    const entity2Exists = document.getElementById(rel.entity_2_id) !== null;\n",
       "                    return activeEntityIds.has(rel.entity_1_id) &amp;&amp; \n",
       "                           activeEntityIds.has(rel.entity_2_id) &amp;&amp;\n",
       "                           entity1Exists &amp;&amp; entity2Exists;\n",
       "                });\n",
       "                \n",
       "                this.displayManager.updateRelations(this.activeRelations, this.relationPathLevel);\n",
       "                if (this.activeRelations) {\n",
       "                    this.tableManager.updateRelationTable(this.data.text, this.activeEntities, this.activeRelations, this.currentTheme);\n",
       "                }\n",
       "            });\n",
       "        }\n",
       "    }\n",
       "\n",
       "    handleEntityHighlight(entityId, isEnter) {\n",
       "        this.displayManager.handleEntityHighlight(entityId, isEnter);\n",
       "        this.tableManager.handleEntityHighlight(entityId, isEnter);\n",
       "    }\n",
       "}\n",
       "\n",
       "// Initialize the application when the script loads\n",
       "const app = new App(data);\n",
       "app.initialize();\n",
       "\n",
       "        &lt;/script&gt;\n",
       "    &lt;/body&gt;\n",
       "    &lt;/html&gt;\n",
       "    \" width=\"100%\" height=\"800px\" style=\"border:none;\"></iframe>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import html\n",
    "from IPython.display import display, HTML\n",
    "\n",
    "iframe_html = f\"\"\"\n",
    "    <iframe srcdoc=\"{html.escape(html_content)}\" width=\"100%\" height=\"800px\" style=\"border:none;\"></iframe>\n",
    "\"\"\"\n",
    "display(HTML(iframe_html))"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "NLP",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}