UI extension for new Corpus feature

ragna/deploy/_ui/api_wrapper.py

@@ -56,6 +56,40 @@ async def auth(self, username, password):
     def update_auth_header(self):
         self.client.headers["Authorization"] = f"Bearer {self.auth_token}"
 
+    async def get_corpus_names(self):
+        # TODO: replace with actual endpoint
+        # return (await self.client.get("/corpuses")).raise_for_status().json()
+        return {
+            "Chroma": ["corpus1", "corpus2"],
+            "LanceDB": ["corpus1"],
+        }
+
+    async def get_corpus_metadata(self, corpus_name=None):
+        # TODO: replace with actual endpoint, and add corpus_name as query parameter
+        # return (
+        #    (await self.client.get(f"/corpuses/metadata"))
+        #    .raise_for_status()
+        #    .json()
+        # )
+        metadata1 = {
+            "document_name": ["doc1", "doc2", "doc3"],
+            "size": [100, 200, 300],
+            "is_pdf": ["True", "False", "True"],
+        }
+        metadata2 = {
+            "document_name": ["doc1", "doc2"],
+            "size": [100, 200],
+            "is_pdf": ["True", "False"],
+        }
+        source_storage1 = {
+            "corpus1": metadata1,
+            "corpus2": metadata2,
+        }
+        source_storage2 = {
+            "corpus1": metadata1,
+        }
+        return {"Chroma": source_storage1, "LanceDB": source_storage2}
+
     async def get_chats(self):
         json_data = (await self.client.get("/chats")).raise_for_status().json()
         for chat in json_data:

ragna/deploy/_ui/central_view.py

@@ -8,6 +8,7 @@
 from panel.reactive import ReactiveHTML
 
 from ragna._compat import anext
+from ragna.core._metadata_filter import MetadataFilter
 
 from . import styles as ui
 
@@ -186,20 +187,49 @@ def on_click_chat_info_wrapper(self, event):
         if self.on_click_chat_info is None:
             return
 
-        pills = "".join(
-            [
-                f"""<div class='chat_document_pill'>{d['name']}</div>"""
-                for d in self.current_chat["metadata"]["documents"]
-            ]
-        )
+        # see _api/schemas.py for `input` type definitions
+        if isinstance(self.current_chat["metadata"]["input"], list):
+            # `Document`s provided as list
+            title = "Uploaded Files"
+
+            pills = "".join(
+                [
+                    f"""<div class='chat_document_pill'>{d['name']}</div>"""
+                    for d in self.current_chat["metadata"]["input"]
+                ]
+            )
+
+            details = f"<div class='details'>{pills}</div><br />\n\n"
+            grid_height = len(self.current_chat["metadata"]["input"]) // 3
 
-        grid_height = len(self.current_chat["metadata"]["documents"]) // 3
+        elif isinstance(self.current_chat["metadata"]["input"], dict):
+            # `MetadataFilter`s provided as dict
+            title = "Metadata Filters"
+
+            metadata_filters_readable = str(
+                MetadataFilter.from_primitive(self.current_chat["metadata"]["input"])
+            )
+
+            details = f"<div class='details details_block' style='display:block;'>{metadata_filters_readable}</div><br />\n\n"
+            grid_height = 1
+
+        elif self.current_chat["metadata"]["input"] is None:
+            title = ""
+
+            details = "<div class='details'>No metadata filters applied.<br /> Using the whole corpus.</div><br />\n\n"
+            grid_height = 1
+
+        else:
+            title = ""
+
+            details = "<div class='details'>Unable to infer the `input` type.<br /> Defaulting to using the whole corpus.</div><br />\n\n"
+            grid_height = 1
 
         markdown = "\n".join(
             [
                 "To change configurations, start a new chat.\n",
-                "**Uploaded Files**",
-                f"<div class='pills_list'>{pills}</div><br />\n\n",
+                f"**{title}**",
+                details,
                 "----",
                 "**Source Storage**",
                 f"""<span>{self.current_chat['metadata']['source_storage']}</span>\n""",
@@ -225,11 +255,15 @@ def on_click_chat_info_wrapper(self, event):
                     # The CSS rule below relies on a variable value, so we can't move it into modifers
                     stylesheets=[
                         ui.css(
-                            ":host(.chat_info_markdown) .pills_list",
+                            ":host(.chat_info_markdown) .details",
                             {
                                 "grid-template": f"repeat({grid_height}, 1fr) / repeat(3, 1fr)",
                             },
-                        )
+                        ),
+                        ui.css(
+                            ":host(.chat_info_markdown) .details_block",
+                            {"display": "block"},
+                        ),
                     ],
                 ),
             ],
@@ -246,7 +280,7 @@ def on_click_source_info_wrapper(self, event, sources):
                 location = f": page(s) {location}"
             source_infos.append(
                 (
-                    f"<b>{rank}. {source['document']['name']}</b> {location}",
+                    f"<b>{rank}. {source['document_name']}</b> {location}",
                     pn.pane.Markdown(source["content"], css_classes=["source-content"]),
                 )
             )

ragna/deploy/_ui/components/file_uploader.py

@@ -5,13 +5,17 @@
 from panel.reactive import ReactiveHTML
 from panel.widgets import Widget
 
+from .. import styles as ui
+
 
 class FileUploader(ReactiveHTML, Widget):  # type: ignore[misc]
     allowed_documents = param.List(default=[])
     allowed_documents_str = param.String(default="")
 
     file_list = param.List(default=[])
 
+    height_upload_container = param.String(default=ui.FILE_CONTAINER_HEIGHT)
+
     custom_js = param.String(default="")
     uploaded_documents_json = param.String(default="")
 
@@ -37,7 +41,7 @@ async def did_finish_upload(self):
         if self.after_upload_callback is not None:
             await self.after_upload_callback(json.loads(self.uploaded_documents_json))
 
-    def perform_upload(self, event=None, after_upload_callback=None):
+    def perform_upload(self, event=None, after_upload_callback=None, corpus_name=""):
         self.after_upload_callback = after_upload_callback
 
         self.loading = True
@@ -56,7 +60,7 @@ def perform_upload(self, event=None, after_upload_callback=None):
         self.custom_js = (
             final_callback_js
             + random_id
-            + f"""upload( self.get_upload_files(),  '{self.token}', '{self.informations_endpoint}', final_callback) """
+            + f"""upload( self.get_upload_files(), '{corpus_name}',  '{self.token}', '{self.informations_endpoint}', final_callback) """
         )
 
     _child_config = {
@@ -74,7 +78,7 @@ def perform_upload(self, event=None, after_upload_callback=None):
                 }
 
                 .fileUploadContainer {
-                    height: 130px;
+                    height: ${height_upload_container};
                 }
 
                 .fileUploadDropArea {
@@ -101,10 +105,6 @@ def perform_upload(self, event=None, after_upload_callback=None):
                 .fileUploadDropArea.draggedOver {
                     border-width: 3px;
                 }
-
-                .fileUploadDropArea.uploaded {
-                    height: calc(100% - 40px);
-                }
 
                 .fileUpload {
                     height: 100% !important;
@@ -115,15 +115,20 @@ def perform_upload(self, event=None, after_upload_callback=None):
                 .fileListContainer {
                     display:flex;
                     flex-direction: row;
-                    height: 44px;
-                    overflow:scroll;
-                    padding-top:14px;
+                    flex-wrap: wrap;
+                    height: 40px;
+                    overflow-y:scroll;
+                    overflow-x:hidden;
+                    margin-top: 10px;
+                    margin-bottom: 10px;
+                    padding-top:5px;
                     padding-left:6px;
+                    padding-bottom:5px;
                 }
 
                 .chat_document_pill {
                     background-color: rgb(241,241,241);
-                    margin-top:0px; 
+                    margin-top:5px; 
                     margin-left: 5px;   
                     margin-right: 5px;
                     padding: 5px 15px;