model_pipeline code refactor.

* Made export pipeline btn invisible for now.

src/components/model_pipeline/model_pipeline.py

@@ -71,6 +71,7 @@ class PipelineInterface:
             get_aux_states,
             inputs=[self.pipeline_state],
             outputs=[self.workflow_state, self.variables_state, self.output_panel_state],
+            trigger_mode="multiple",
         )
 
         # IO Variables
@@ -164,6 +165,45 @@ class PipelineInterface:
         )
         return add_step_btn
 
+    def validate_workflow(self, state_dict: td.PipelineStateDict):
+        """Validate the workflow."""
+        try:
+            state = self.sm.make_pipeline_state(state_dict)
+            WorkflowValidator().validate(state.workflow)
+        except ValueError as e:
+            logger.exception(e)
+            state_dict_str = yaml.dump(state_dict, default_flow_style=False, indent=2)
+            logger.error(f"Could not validate workflow: \n{state_dict_str}")
+            raise gr.Error(e)
+
+    def _render_pipeline_header(self):
+        # Add Step button at top
+        input_variables_str = ", ".join([f"`{variable}`" for variable in self.input_variables])
+        output_variables_str = ", ".join([f"`{variable}`" for variable in self.required_output_variables])
+        if self.simple:
+            instruction = "Create a simple single LLM call pipeline that takes in the following input variables and outputs the following output variables:"
+        else:
+            instruction = "Create a pipeline with the following input and output variables."
+        gr.Markdown(f"### {instruction}")
+        gr.Markdown(f"* Input Variables: {input_variables_str}")
+        gr.Markdown(f"* Output Variables: {output_variables_str}")
+
+    def _render_model_steps(self, pipeline_state: PipelineState):
+        ui_state = pipeline_state.ui_state
+        workflow = pipeline_state.workflow
+        components = []
+
+        step_objects = []  # Reset step objects list
+        for i, step_id in enumerate(ui_state.step_ids):
+            step_data = workflow.steps[step_id]
+            step_ui_state = ui_state.steps[step_id]
+            available_variables = pipeline_state.get_available_variables(step_id)
+            sub_components = self._render_step(step_data, step_ui_state, available_variables, i, ui_state.n_steps)
+            step_objects.append(sub_components)
+
+        components.append(step_objects)
+        return components
+
     def _render_output_panel(self, pipeline_state: PipelineState):
         dropdowns = {}
         available_variables = pipeline_state.workflow.get_available_variables()
@@ -201,28 +241,35 @@ class PipelineInterface:
         )
         return dropdowns
 
-    def validate_workflow(self, state_dict: td.PipelineStateDict):
-        """Validate the workflow."""
-        try:
-            state = self.sm.make_pipeline_state(state_dict)
-            WorkflowValidator().validate(state.workflow)
-        except ValueError as e:
-            logger.exception(e)
-            state_dict_str = yaml.dump(state_dict, default_flow_style=False, indent=2)
-            logger.error(f"Could not validate workflow: \n{state_dict_str}")
-            raise gr.Error(e)
+    def _render_pipeline_preview(self):
+        export_btn = gr.Button("Export Pipeline", elem_classes="export-button", visible=False)
+        # components.append(export_btn)
 
-    def _render_pipeline_header(self):
-        # Add Step button at top
-        input_variables_str = ", ".join([f"`{variable}`" for variable in self.input_variables])
-        output_variables_str = ", ".join([f"`{variable}`" for variable in self.required_output_variables])
-        if self.simple:
-            instruction = "Create a simple single LLM call pipeline that takes in the following input variables and outputs the following output variables:"
-        else:
-            instruction = "Create a pipeline with the following input and output variables."
-        gr.Markdown(f"### {instruction}")
-        gr.Markdown(f"* Input Variables: {input_variables_str}")
-        gr.Markdown(f"* Output Variables: {output_variables_str}")
+        # Add a code box to display the workflow JSON
+        # with gr.Column(elem_classes="workflow-json-container"):
+        with gr.Accordion(
+            "Pipeline Preview (click to expand and edit)", open=False, elem_classes="pipeline-preview"
+        ) as self.config_accordion:
+            self.config_output = gr.Code(
+                show_label=False,
+                language="yaml",
+                elem_classes="workflow-json",
+                interactive=True,
+                autocomplete=True,
+            )
+        # components.append(config_accordion)
+
+        self.config_output.blur(
+            fn=self.sm.update_workflow_from_code,
+            inputs=[self.config_output, self.pipeline_change],
+            outputs=[self.pipeline_state, self.pipeline_change],
+        )
+
+        # Connect the export button to show the workflow JSON
+        self.add_triggers_for_pipeline_export([export_btn.click], self.pipeline_state, scroll=True)
+        export_btn.click(self.validate_workflow, inputs=[self.pipeline_state], outputs=[]).success(
+            fn=lambda: gr.update(visible=True, open=True), outputs=[self.config_accordion]
+        )
 
     def render(self):
         """Render the pipeline UI."""
@@ -233,79 +280,44 @@ class PipelineInterface:
 
         # Function to render all steps
         @gr.render(
-            triggers=[self.app.load, self.pipeline_change.change],
+            triggers=[self.pipeline_change.change],
             inputs=[self.pipeline_state],
             concurrency_limit=1,
             concurrency_id="render_steps",
+            trigger_mode="multiple",
         )
-        def render_steps(pipeline_state: td.PipelineStateDict, evt: gr.EventData):
+        def render_steps(pipeline_state_dict: td.PipelineStateDict, evt: gr.EventData):
             """Render all steps in the pipeline"""
             logger.info(
-                f"Rerender triggered! \nInput Pipeline's UI State:{pipeline_state.get('ui_state')}\n Event: {evt.target} {evt._data}"
+                f"Rerender pipeline steps triggered! \nInput Pipeline's UI State:{pipeline_state_dict.get('ui_state')}\n Event: {evt.target} {evt._data}"
             )
-            pipeline_state = self.sm.make_pipeline_state(pipeline_state)
-            ui_state = pipeline_state.ui_state
-            workflow = pipeline_state.workflow
-            components = []
-
-            step_objects = []  # Reset step objects list
-            for i, step_id in enumerate(ui_state.step_ids):
-                step_data = workflow.steps[step_id]
-                step_ui_state = ui_state.steps[step_id]
-                available_variables = pipeline_state.get_available_variables(step_id)
-                sub_components = self._render_step(step_data, step_ui_state, available_variables, i, ui_state.n_steps)
-                step_objects.append(sub_components)
-
-            components.append(step_objects)
+            pipeline_state = self.sm.make_pipeline_state(pipeline_state_dict)
+            self._render_model_steps(pipeline_state)
 
         if not self.simple:
             self._render_add_step_button(-1)
 
         @gr.render(
-            triggers=[self.output_panel_state.change, self.app.load],
+            triggers=[self.output_panel_state.change],
             inputs=[self.pipeline_state],
             concurrency_limit=1,
             concurrency_id="render_output_fields",
+            trigger_mode="multiple",
         )
         def render_output_fields(pipeline_state_dict: td.PipelineStateDict):
             pipeline_state = self.sm.make_pipeline_state(pipeline_state_dict)
             logger.debug(f"Rerendering output panel: {get_output_panel_state(pipeline_state.workflow)}")
             self._render_output_panel(pipeline_state)
 
-        export_btn = gr.Button("Export Pipeline", elem_classes="export-button")
-        # components.append(export_btn)
-
-        # Add a code box to display the workflow JSON
-        # with gr.Column(elem_classes="workflow-json-container"):
-        with gr.Accordion(
-            "Pipeline Preview (click to expand and edit)", open=False, elem_classes="pipeline-preview"
-        ) as self.config_accordion:
-            self.config_output = gr.Code(
-                label="Workflow Configuration",
-                show_label=False,
-                language="yaml",
-                elem_classes="workflow-json",
-                interactive=True,
-                autocomplete=True,
-            )
-        # components.append(config_accordion)
-
-        self.config_output.blur(
-            fn=self.sm.update_workflow_from_code,
-            inputs=[self.config_output, self.pipeline_change],
-            outputs=[self.pipeline_state, self.pipeline_change],
-        )
-
-        # Connect the export button to show the workflow JSON
-        self.add_triggers_for_pipeline_export([export_btn.click], self.pipeline_state, scroll=True)
-        export_btn.click(self.validate_workflow, inputs=[self.pipeline_state], outputs=[]).success(
-            fn=lambda: gr.update(visible=True, open=True), outputs=[self.config_accordion]
-        )
+        self._render_pipeline_preview()
 
     def add_triggers_for_pipeline_export(self, triggers: list, input_pipeline_state: gr.State, scroll: bool = False):
         js = None
         if scroll:
             js = "() => {document.querySelector('.pipeline-preview').scrollIntoView({behavior: 'smooth'})}"
+
+        # TODO: modify this validate workflow to user input level and not executable label.
+        # (workflows that can be converted to UI interface, no logical validation)
         gr.on(
             triggers,
             self.validate_workflow,