config in a modal object

app.py

@@ -117,6 +117,9 @@ reranker = get_reranker("nano")
 
 agent = make_graph_agent(llm=llm, vectorstore_ipcc=vectorstore, vectorstore_graphs=vectorstore_graphs, reranker=reranker)
 
+def update_config_modal_visibility(config_open):
+    new_config_visibility_status = not config_open
+    return gr.update(visible=new_config_visibility_status), new_config_visibility_status
 
 async def chat(query, history, audience, sources, reports, relevant_content_sources, search_only):
     """taking a query and a message history, use a pipeline (reformulation, retriever, answering) to yield a tuple of:
@@ -293,6 +296,7 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
     chat_completed_state = gr.State(0)
     current_graphs = gr.State([])
     saved_graphs = gr.State({})
+    config_open = gr.State(False)
 
     
     with gr.Tab("ClimateQ&A"):
@@ -317,7 +321,11 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
 
                 with gr.Row(elem_id = "input-message"):
                     textbox=gr.Textbox(placeholder="Ask me anything here!",show_label=False,scale=7,lines = 1,interactive = True,elem_id="input-textbox")
-                 
+                    
+                    config_button = gr.Button("",elem_id="config-button")
+                    # config_checkbox_button = gr.Checkbox(label = '⚙️', value="show",visible=True, interactive=True, elem_id="checkbox-config")
+                    
+                
 
             with gr.Column(scale=2, variant="panel",elem_id = "right-panel"):
 
@@ -349,54 +357,54 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                             
                             samples.append(group_examples)
                             
-                    with gr.Tab("Configuration", id = 10, ) as tab_config:
-                            gr.Markdown("Reminders: You can talk in any language, ClimateQ&A is multi-lingual!")
-
+                    # with gr.Tab("Configuration", id = 10, ) as tab_config:
+                    #         # gr.Markdown("Reminders: You can talk in any language, ClimateQ&A is multi-lingual!")
 
+                    #     pass
                             
-                            with gr.Row():
+                            # with gr.Row():
                                 
-                                dropdown_sources = gr.CheckboxGroup(
-                                    ["IPCC", "IPBES","IPOS"],
-                                    label="Select source",
-                                    value=["IPCC"],
-                                    interactive=True,
-                                )
-                                dropdown_external_sources = gr.CheckboxGroup(
-                                    ["IPCC figures","OpenAlex", "OurWorldInData"],
-                                    label="Select database to search for relevant content",
-                                    value=["IPCC figures"],
-                                    interactive=True,
-                                )
-
-                            dropdown_reports = gr.Dropdown(
-                                POSSIBLE_REPORTS,
-                                label="Or select specific reports",
-                                multiselect=True,
-                                value=None,
-                                interactive=True,
-                            )
-
-                            search_only = gr.Checkbox(label="Search only without chating", value=False, interactive=True, elem_id="checkbox-chat")
-
-
-                            dropdown_audience = gr.Dropdown(
-                                ["Children","General public","Experts"],
-                                label="Select audience",
-                                value="Experts",
-                                interactive=True,
-                            )
+                            #     dropdown_sources = gr.CheckboxGroup(
+                            #         ["IPCC", "IPBES","IPOS"],
+                            #         label="Select source",
+                            #         value=["IPCC"],
+                            #         interactive=True,
+                            #     )
+                            #     dropdown_external_sources = gr.CheckboxGroup(
+                            #         ["IPCC figures","OpenAlex", "OurWorldInData"],
+                            #         label="Select database to search for relevant content",
+                            #         value=["IPCC figures"],
+                            #         interactive=True,
+                            #     )
+
+                            # dropdown_reports = gr.Dropdown(
+                            #     POSSIBLE_REPORTS,
+                            #     label="Or select specific reports",
+                            #     multiselect=True,
+                            #     value=None,
+                            #     interactive=True,
+                            # )
+
+                            # search_only = gr.Checkbox(label="Search only without chating", value=False, interactive=True, elem_id="checkbox-chat")
+
+
+                            # dropdown_audience = gr.Dropdown(
+                            #     ["Children","General public","Experts"],
+                            #     label="Select audience",
+                            #     value="Experts",
+                            #     interactive=True,
+                            # )
                             
                                 
-                            after = gr.Slider(minimum=1950,maximum=2023,step=1,value=1960,label="Publication date",show_label=True,interactive=True,elem_id="date-papers", visible=False)
-
+                            # after = gr.Slider(minimum=1950,maximum=2023,step=1,value=1960,label="Publication date",show_label=True,interactive=True,elem_id="date-papers", visible=False)
+                            
 
-                            output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False, visible= False)
-                            output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False, visible= False)                            
+                            # output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False, visible= False)
+                            # output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False, visible= False)                            
 
 
-                            dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after])
-                            # dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after], visible=True)
+                            # dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after])
+                            # # dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after], visible=True)
 
 
                     with gr.Tab("Sources",elem_id = "tab-sources",id = 1) as tab_sources:
@@ -411,11 +419,11 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                             with gr.Tab("Figures",elem_id = "tab-figures",id = 3) as tab_figures:
                                 sources_raw = gr.State()
                                 
-                                with Modal(visible=False, elem_id="modal_figure_galery") as modal:
+                                with Modal(visible=False, elem_id="modal_figure_galery") as figure_modal:
                                     gallery_component = gr.Gallery(object_fit='scale-down',elem_id="gallery-component", height="80vh")
                                     
                                 show_full_size_figures = gr.Button("Show figures in full size",elem_id="show-figures",interactive=True)    
-                                show_full_size_figures.click(lambda : Modal(visible=True),None,modal)
+                                show_full_size_figures.click(lambda : Modal(visible=True),None,figure_modal)
 
                                 figures_cards = gr.HTML(show_label=False, elem_id="sources-figures")
 
@@ -435,9 +443,9 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
 
                                 btn_citations_network = gr.Button("Explore papers citations network")
                                 # Fenêtre simulée pour le Citations Network
-                                with Modal(visible=False) as modal:
+                                with Modal(visible=False) as papers_modal:
                                     citations_network = gr.HTML("<h3>Citations Network Graph</h3>", visible=True, elem_id="papers-citations-network")
-                                btn_citations_network.click(lambda: Modal(visible=True), None, modal)
+                                btn_citations_network.click(lambda: Modal(visible=True), None, papers_modal)
                     
                                         
                             
@@ -445,7 +453,62 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                                 
                                 graphs_container = gr.HTML("<h2>There are no graphs to be displayed at the moment. Try asking another question.</h2>",elem_id="graphs-container")
                                 current_graphs.change(lambda x : x, inputs=[current_graphs], outputs=[graphs_container])
+                                
+            with Modal(visible=False,elem_id="modal-config") as config_modal:
+                gr.Markdown("Reminders: You can talk in any language, ClimateQ&A is multi-lingual!")
+
+                        
+                with gr.Row():
+                    
+                    dropdown_sources = gr.CheckboxGroup(
+                        ["IPCC", "IPBES","IPOS"],
+                        label="Select source",
+                        value=["IPCC"],
+                        interactive=True,
+                    )
+                    dropdown_external_sources = gr.CheckboxGroup(
+                        ["IPCC figures","OpenAlex", "OurWorldInData"],
+                        label="Select database to search for relevant content",
+                        value=["IPCC figures"],
+                        interactive=True,
+                    )
+
+                dropdown_reports = gr.Dropdown(
+                    POSSIBLE_REPORTS,
+                    label="Or select specific reports",
+                    multiselect=True,
+                    value=None,
+                    interactive=True,
+                )
+
+                search_only = gr.Checkbox(label="Search only without chating", value=False, interactive=True, elem_id="checkbox-chat")
+
 
+                dropdown_audience = gr.Dropdown(
+                    ["Children","General public","Experts"],
+                    label="Select audience",
+                    value="Experts",
+                    interactive=True,
+                )
+                
+                    
+                after = gr.Slider(minimum=1950,maximum=2023,step=1,value=1960,label="Publication date",show_label=True,interactive=True,elem_id="date-papers", visible=False)
+                
+
+                output_query = gr.Textbox(label="Query used for retrieval",show_label = True,elem_id = "reformulated-query",lines = 2,interactive = False, visible= False)
+                output_language = gr.Textbox(label="Language",show_label = True,elem_id = "language",lines = 1,interactive = False, visible= False)                            
+
+
+                dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after])
+                
+                close_config_modal = gr.Button("Close",elem_id="close-config-modal")
+                close_config_modal.click(fn=update_config_modal_visibility, inputs=[config_open], outputs=[config_modal, config_open])
+                # dropdown_external_sources.change(lambda x: gr.update(visible = True ) if "OpenAlex" in x else gr.update(visible=False) , inputs=[dropdown_external_sources], outputs=[after], visible=True)
+            
+
+            
+            config_button.click(fn=update_config_modal_visibility, inputs=[config_open], outputs=[config_modal, config_open])
+           
                     # with gr.Tab("OECD",elem_id = "tab-oecd",id = 6):
                     #     oecd_indicator = "RIVER_FLOOD_RP100_POP_SH"
                     #     oecd_topic = "climate"
@@ -460,7 +523,6 @@ with gr.Blocks(title="Climate Q&A", css_paths=os.getcwd()+ "/style.css", theme=t
                     #     oecd_textbox = gr.HTML(iframe_html, show_label=False, elem_id="oecd-textbox")
 
    
-   
 
 
 #---------------------------------------------------------------------------------------

style.css

@@ -283,6 +283,95 @@ label.selected{
     padding:0px !important;
 }
 
+#modal-config .block.modal-block.padded {
+    padding-top: 25px;
+    height: 100vh;
+
+}
+#modal-config .modal-container{
+    margin: 0px;
+    padding: 0px;
+}
+/* Modal styles */
+#modal-config {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 500px;
+    background-color: white;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    padding: 15px;
+    transform: none;
+}
+#modal-config .close{
+    display: none;
+}
+
+/* Push main content to the right when modal is open */
+/* .modal ~ * {
+    margin-left: 300px;
+    transition: margin-left 0.3s ease;
+} */
+
+#modal-config .modal .wrap ul{
+    position:static;
+    top: 100%;
+    left: 0;
+    /* min-height: 100px; */
+    height: 100%;
+    /* margin-top: 0; */
+    z-index: 9999;
+    pointer-events: auto;
+    height: 200px;
+}
+#config-button{
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+}
+
+#config-button::before {
+    content: '⚙️';
+    font-size: 20px;
+}
+
+#config-button:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+#checkbox-config{
+    display: block;
+    position: absolute;
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+    font-size: 20px;
+    text-align: center;
+}
+#checkbox-config:checked{
+    display: block;
+}
+
+
+
 @media screen and (min-width: 1024px) {
     /* Additional style for scrollable tab content */
     /* div#tab-recommended_content {