add interactivity for rows and submission confirmation

app.py

@@ -1,12 +1,36 @@
 import gradio as gr
 
+js = """
+function appJS() {
+  document.getElementById("plugin_add_input").addEventListener("click", function() {
+    document.getElementById("input-row-2").classList.toggle("active",true);
+  });
+
+  document.getElementById("plugin_add_output").addEventListener("click", function() {
+    document.getElementById("output-row-2").classList.toggle("active",true);
+  });
+
+  document.getElementById("submit-button").addEventListener("click", function() {
+    document.getElementById("confirmation-row").classList.toggle("active",true);
+  });
+}
+"""
+
 css = """
 .plugin-accordion button span:first-child {
     font-size: 1.25rem !important;
 }
+
+.dependent-row {
+  display: none !important;
+}
+
+.dependent-row.active {
+  display: block !important;
+}
 """
 
-with gr.Blocks(css=css) as registry_submit:
+with gr.Blocks(css=css,js=js) as registry_submit:
   gr.Markdown("# 🔌 Impact Framework Plugin Registry Submission")
 
   with gr.Accordion("ℹ️ About this Page",open=False,elem_classes=["plugin-accordion"]):
@@ -32,10 +56,19 @@ with gr.Blocks(css=css) as registry_submit:
       plugin_input_1 = gr.Textbox(placeholder="Input name", label="Input Name", info="What is the name of the input?",scale=2)
       plugin_input_1_type = gr.Dropdown(["Text", "Number", "Boolean"], label="Input Type",value="Text",interactive=True,info="What data type does your input expect",scale=2)
       plugin_input_1_units = gr.Textbox(placeholder="Watts, Lbs CO2e, etc", label="Units", info="What units of measurement does the input expect?",scale=2)
+      plugin_1_example = gr.Textbox(placeholder="Your sample value", label="Example", info="Provide an example value for this input",scale=2)
       plugin_input_1_required = gr.Checkbox(label="Required", value=False,scale=1)
 
+    with gr.Row(elem_classes=["input-row","dependent-row"],elem_id="input-row-2", variant="panel"):
+      plugin_input_2 = gr.Textbox(placeholder="Input name", label="Input Name", info="What is the name of the input?",scale=2)
+      plugin_input_2_type = gr.Dropdown(["Text", "Number", "Boolean"], label="Input Type",value="Text",interactive=True,info="What data type does your input expect",scale=2)
+      plugin_input_2_units = gr.Textbox(placeholder="Watts, Lbs CO2e, etc", label="Units", info="What units of measurement does the input expect?",scale=2)
+      plugin_2_example = gr.Textbox(placeholder="Your sample value", label="Example", info="Provide an example value for this input",scale=2)
+      plugin_input_2_required = gr.Checkbox(label="Required", value=False,scale=1)
+
+
     with gr.Row(elem_classes=["input-row"]):
-      plugin_add_input = gr.Button("Add Input")
+      plugin_add_input = gr.Button("Add Input",elem_id="plugin_add_input")
 
   with gr.Accordion("Plugin Outputs",open=True,elem_classes=["plugin-accordion"]):
     gr.Markdown("This is the data your plugin will return")
@@ -45,8 +78,13 @@ with gr.Blocks(css=css) as registry_submit:
       plugin_output_1_type = gr.Dropdown(["Text", "Number", "Boolean"], label="Output Type",value="Text",interactive=True,info="What data type does your output expect")
       plugin_output_1_units = gr.Textbox(placeholder="Watts, Lbs CO2e, etc", label="Units", info="What units of measurement does the output expect?")
 
+    with gr.Row(elem_classes=["output-row","dependent-row"],elem_id="output-row-2",variant="panel"):
+      plugin_output_2 = gr.Textbox(placeholder="Output name", label="Output Name", info="What is the name of the output?")
+      plugin_output_2_type = gr.Dropdown(["Text", "Number", "Boolean"], label="Output Type",value="Text",interactive=True,info="What data type does your output expect")
+      plugin_output_2_units = gr.Textbox(placeholder="Watts, Lbs CO2e, etc", label="Units", info="What units of measurement does the output expect?")
+
     with gr.Row(elem_classes=["output-row"]):
-      plugin_add_output = gr.Button("Add Output")
+      plugin_add_output = gr.Button("Add Output",elem_id="plugin_add_output")
 
   with gr.Accordion("Plugin Data",open=True,elem_classes=["plugin-accordion"]):
     gr.Markdown("This is where you put information about your plugin's data sources and assumptions")
@@ -72,7 +110,7 @@ with gr.Blocks(css=css) as registry_submit:
       with gr.Column():
         gr.Markdown("Alternatively, search for plugins that are compatible with your required inputs")
         # a button to help users find compatible plugins
-        plugin_find_input_plugin = gr.Button("Find Compatible Plugins")
+        plugin_find_input_plugin = gr.Button("Find Compatible Plugins",interactive=False)
     gr.Button("Add Input Plugin")
 
     gr.Markdown("## Dependent Plugins")
@@ -83,10 +121,16 @@ with gr.Blocks(css=css) as registry_submit:
         plugin_output_plugin_1 = gr.Textbox(placeholder="https://greensoftware.foundation/if/[ID]", label="Plugin URL", info="Enter the impact framework registry URL where the plugin can be found")
       with gr.Column():
         gr.Markdown("Alternatively, search for plugins that are compatible with your output")
-        plugin_find_output_plugin = gr.Button("Find Compatible Plugins")
+        plugin_find_output_plugin = gr.Button("Find Compatible Plugins",interactive=False)
     gr.Button("Add Output Plugin")
 
-  gr.Button("Submit Plugin",variant="primary")
+  gr.Button("Submit Plugin",variant="primary",elem_id="submit-button")
+
+  with gr.Row(elem_classes=["dependent-row"],variant="panel",elem_id="confirmation-row"):
+    with gr.Column():
+      gr.Markdown("## Submission Confirmed ✔️")
+      gr.Markdown("Thank you for submitting your plugin to the Impact Framework Registry. We will review your submission and get back to you soon.")
+