Add abstract modal functionality and update styles

app.py

@@ -2,6 +2,7 @@
 
 import gradio as gr
 import polars as pl
+from gradio_modal import Modal
 
 from app_pr import demo as demo_pr
 from semantic_search import semantic_search
@@ -52,6 +53,7 @@ df_main = df_orig.select(
     "Models",
     "Datasets",
     "claimed",
+    "abstract",
     "paper_id",
 )
 
@@ -151,6 +153,25 @@ def update_search_mode(search_mode: str) -> gr.Accordion:
     return gr.Accordion(visible=search_mode == "Semantic Search")
 
 
+def df_row_selected(
+    evt: gr.SelectData,
+) -> tuple[
+    Modal,
+    gr.Textbox,  # title
+    gr.Textbox,  # abstract
+]:
+    if evt.index[1] != 0:
+        return Modal(), gr.Textbox(), gr.Textbox()
+
+    title = evt.row_value[0]
+    row = df_main.filter(pl.col("Title") == title)
+    return (
+        Modal(visible=True),
+        gr.Textbox(value=row["Title"].item()),  # title
+        gr.Textbox(value=row["abstract"].item()),  # abstract
+    )
+
+
 with gr.Blocks(css_paths="style.css") as demo:
     gr.Markdown(DESCRIPTION)
     with gr.Accordion(label="Tutorial", open=True):
@@ -196,6 +217,9 @@ with gr.Blocks(css_paths="style.css") as demo:
         elem_id="table",
         column_widths=[COLUMN_INFO[col][1] for col in COLUMN_INFO],
     )
+    with Modal(visible=False, elem_id="abstract-modal") as abstract_modal:
+        title = gr.Textbox(label="Title")
+        abstract = gr.Textbox(label="Abstract")
 
     search_mode.change(
         fn=update_search_mode,
@@ -203,6 +227,8 @@ with gr.Blocks(css_paths="style.css") as demo:
         outputs=advanced_search_options,
     )
 
+    df.select(fn=df_row_selected, outputs=[abstract_modal, title, abstract])
+
     inputs = [
         search_mode,
         search_query,

style.css

@@ -2,3 +2,18 @@ h1 {
   text-align: center;
   display: block;
 }
+
+#abstract-modal .modal-block {
+  position: fixed !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+  width: 80vw !important;
+  max-width: 900px !important;
+  margin: 0 !important;
+}
+
+#abstract-modal .modal-block,
+#abstract-modal .modal-block * {
+  font-size: 1.0rem !important;
+}