interactive: added label to display selected queries to user (5/7)

tests/interactive/test_app.py

@@ -107,6 +107,7 @@ async def test_passes():
     """Test pass application has the desired result."""
     async with InputApp().run_test() as pilot:
         app = cast(InputApp, pilot.app)
+
         # Testing a pass
         app.input_text_area.insert(
             """
@@ -139,6 +140,7 @@ async def test_passes():
 
         # assert that the Output Text Area has changed accordingly
         await pilot.pause()
+
         assert (
             app.output_text_area.text
             == """builtin.module {

xdsl/interactive/app.py

@@ -4,6 +4,7 @@
 Execute `xdsl-gui` in your terminal to run it.
 
 Run `terminal -m xdsl.interactive.app:InputApp --dev` to run in development mode. Please
+
 be sure to install `textual-dev` to run this command.
 """
 
@@ -12,9 +13,9 @@
 from rich.style import Style
 from textual import events, on
 from textual.app import App, ComposeResult
-from textual.containers import Horizontal, Vertical
+from textual.containers import Horizontal, ScrollableContainer, Vertical
 from textual.reactive import reactive
-from textual.widgets import Button, Footer, SelectionList, TextArea
+from textual.widgets import Button, Footer, Label, SelectionList, TextArea
 from textual.widgets.text_area import TextAreaTheme
 
 from xdsl.dialects.builtin import ModuleOp
@@ -67,13 +68,18 @@ class InputApp(App[None]):
 
     input_text_area: TextArea
     output_text_area: OutputTextArea
-
     passes_selection_list: SelectionList[type[ModulePass]]
 
+    selected_query_label = Label("", id="selected_passes_label")
+    """Display selected passes"""
+
     def __init__(self):
         self.input_text_area = TextArea(id="input")
         self.output_text_area = OutputTextArea(id="output")
         self.passes_selection_list = SelectionList(id="passes_selection_list")
+        self.passes_selection_list: SelectionList[type[ModulePass]] = SelectionList(
+            id="passes_selection_list"
+        )
         super().__init__()
 
     def compose(self) -> ComposeResult:
@@ -84,8 +90,10 @@ def compose(self) -> ComposeResult:
         and sort the list in alphabetical order.
         """
 
-        yield self.passes_selection_list
-
+        with Horizontal(id="selected_passes_and_list_horizontal"):
+            yield self.passes_selection_list
+            with ScrollableContainer(id="selected_passes"):
+                yield self.selected_query_label
         with Horizontal(id="input_output"):
             with Vertical(id="input_container"):
                 yield self.input_text_area
@@ -153,7 +161,7 @@ def on_mount(self) -> None:
         self.query_one(
             "#passes_selection_list"
         ).border_title = "Choose a pass or multiple passes to be applied."
-
+        self.query_one("#selected_passes").border_title = "Selected passes/query"
         # aids in the construction of the seleciton list containing all the passes
         selections = sorted((value.name, value) for value in ALL_PASSES)
 

xdsl/interactive/app.tcss

@@ -9,13 +9,34 @@
     align: center middle;
 }
 
+
+# ScrollableContainer(Label)
+#selected_passes {
+    margin: 1 1 1 1;
+    border: heavy $warning-lighten-1;
+    border-title-color: $primary;
+    border-title-align: center;
+    width: 100%;
+    height: 100%;
+}
+
+
+# Horizontal( SelectionList, ScrollableContainer(Label) )
+#selected_passes_and_list_horizontal{
+    height: 100%;
+    layout: grid;
+    grid-size: 2 1;
+    grid-columns: 50% 50%;
+}
+
 # Horizontal(Button)
 #clear_input{
     height: 3;
     overflow: hidden;
     text-opacity: 60%;
 }
 
+
 # Vertical(TextArea, Horizontal(Button))
 #input_container {
     margin: 1;