Update app.py

app.py

@@ -130,7 +130,7 @@ STYLE = """
     margin-top: -5px;
     transform: rotate(315deg);
 }
-.tree li a {
+.box {
 	border: 1px solid var(--body-text-color);
 	padding: 5px;
 	border-radius: 5px;
@@ -142,17 +142,17 @@ STYLE = """
     justify-content: space-between;
     overflow: hidden;
 }
-.tree li a span {
+.box span {
 	padding: 5px;
 	font-size: 12px;
 	letter-spacing: 1px;
 	font-weight: 500;
 }
 /*Hover-Section*/
-.tree li a:hover, .tree li a:hover+ul li a {
+.box:hover, .box:hover+ul li .box {
 	background: var(--primary-500);
 }
-.tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before, .tree li a:hover+ul a::before {
+.box:hover+ul li::after, .box:hover+ul li::before, .box:hover+ul::before, .box:hover+ul ul::before, .box:hover+ul .box::before {
 	border-color: var(--primary-500);
 }
 .chosen-token {
@@ -216,14 +216,14 @@ def generate_nodes(node, step):
             selected_class = "selected-sequence"
         else:
             selected_class = "nonselected-sequence"
-        return f"<li> <a href='#' class='end-of-text child {selected_class}'> <span> <b>{clean(token)}</b> <br>Total score: {node.total_score:.2f}</span> </a> </li>"
+        return f"<li> <div class='box end-of-text child {selected_class}'> <span> <b>{clean(token)}</b> <br>Total score: {node.total_score:.2f}</span> </div> </li>"
 
     html_content = (
-        f"<li> <a href='#' class='nonfinal child'> <span> <b>{clean(token)}</b> </span>"
+        f"<li> <div class='box nonfinal child'> <span> <b>{clean(token)}</b> </span>"
     )
     if node.table is not None:
         html_content += node.table
-    html_content += "</a>"
+    html_content += "</div>"
 
     if len(node.children.keys()) > 0:
         html_content += "<ul> "
@@ -238,13 +238,12 @@ def generate_nodes(node, step):
 def generate_html(start_sentence, original_tree):
     html_output = f"""<div class="custom-container">
 				<div class="tree">
-                <ul> <li> <a href='#' id='root'> <span> <b>{start_sentence}</b> </span> {original_tree.table} </a>"""
+                <div class="box" href='#' id='root'> <span> <b>{start_sentence}</b> </span> {original_tree.table} </div>"""
     html_output += "<ul> "
     for subnode in original_tree.children.values():
         html_output += generate_nodes(subnode, step=1)
     html_output += "</ul>"
     html_output += """
-        </li> </ul>
         </div>
     </body>
     """