feat: added dropdown in the create-wes-run

BREAKING CHANGE: this compoenent may not work if the connectedCallback() is not uncommented rest of the part I have checked there is a getFromData function created in order get the form data to set version according to the selected type. re elixir-cloud-aai#247
Chaitanya674 · Mar 10, 2024 · 37ce888 · 37ce888
1 parent acc2ef5
commit 37ce888
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 65 deletions.
diff --git a/packages/ecc-client-lit-ga4gh-wes/src/API/Workflow/wesGet.ts b/packages/ecc-client-lit-ga4gh-wes/src/API/Workflow/wesGet.ts
@@ -68,6 +68,31 @@ const fetchWorkflow = async (baseURL: string, id: string) => {
   }
 };
 
+/**
+ * Create a workflow run
+ * @param {string} baseURL - Base URL for fetching workflows
+ */
+const fetchWorkflowType = async (baseURL: string) => {
+  const url = `${baseURL}/service-info`;
+  try {
+    const response = await fetch(url);
+    if (!response) {
+      return {
+        isError: true,
+        breakpoint: "fetchWorkflowtype",
+        error: "No response from server",
+      };
+    }
+    return await response.json();
+  } catch (error) {
+    return {
+      isError: true,
+      breakpoint: "fetchworkflowtype",
+      error,
+    };
+  }
+};
+
 /**
  *This mathod cancel a specific workflow
  * @param id ID of the workflow to be deleted
@@ -121,4 +146,10 @@ const postWorkflow = async (baseURL: string, data: any) => {
   }
 };
 
-export { fetchWorkflows, fetchWorkflow, cancelWorkflow, postWorkflow };
+export {
+  fetchWorkflows,
+  fetchWorkflow,
+  fetchWorkflowType,
+  cancelWorkflow,
+  postWorkflow,
+};
diff --git a/packages/ecc-client-lit-ga4gh-wes/src/components/wes-create-run/wes-create-run.ts b/packages/ecc-client-lit-ga4gh-wes/src/components/wes-create-run/wes-create-run.ts
@@ -1,6 +1,6 @@
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { postWorkflow } from "../../API/Workflow/wesGet.js";
+import { postWorkflow, fetchWorkflowType } from "../../API/Workflow/wesGet.js";
 import "@elixir-cloud/design";
 
 // TODO: import the interface from the design package
@@ -133,72 +133,71 @@ export class WESCreateRun extends LitElement {
     },
   ];
 
-  // async connectedCallback() {
+  // connectedCallback() {
   //   super.connectedCallback();
-  //   await this.updateDropdownOptions();
+  //   this._updateWorkflowType();
   // }
 
-  // async updateDropdownOptions() {
-  //   try {
-  //     const serviceInfoResponse = await fetch(`${this.baseURL}/service-info`);
-  //     if (!serviceInfoResponse.ok) {
-  //       throw new Error(
-  //         `Error fetching service info: ${serviceInfoResponse.statusText}`
-  //       );
-  //     }
-
-  //     const serviceInfo = await serviceInfoResponse.json();
-
-  //     const workflowTypeDropdown = this.fields.find(
-  //       (field) => field.key === "workflow_type"
-  //     );
-  //     if (
-  //       workflowTypeDropdown &&
-  //       workflowTypeDropdown.fieldOptions &&
-  //       serviceInfo &&
-  //       serviceInfo.workflow_type_versions
-  //     ) {
-  //       const workflowTypeOptions = Object.keys(
-  //         serviceInfo.workflow_type_versions
-  //       ).map((key) => ({
-  //         label: key,
-  //         value: key,
-  //       }));
-  //       workflowTypeDropdown.fieldOptions.options = workflowTypeOptions;
-  //     }
-
-  //     const selectedWorkflowType = this.fields
-  //       .find((field) => field.key === "workflow_type")
-  //       ?.toString();
-  //     console.log(selectedWorkflowType);
-  //     const workflowTypeVersionDropdown = this.fields.find(
-  //       (field) => field.key === "workflow_type_version"
-  //     );
-
-  //     if (
-  //       selectedWorkflowType &&
-  //       workflowTypeVersionDropdown &&
-  //       workflowTypeVersionDropdown.fieldOptions &&
-  //       serviceInfo &&
-  //       serviceInfo.workflow_type_versions &&
-  //       serviceInfo.workflow_type_versions[selectedWorkflowType]
-  //     ) {
-  //       const versionsObject =
-  //         serviceInfo.workflow_type_versions[selectedWorkflowType];
-  //       const dynamicKeys = Object.keys(versionsObject);
-
-  //       const firstVersionSet = versionsObject[dynamicKeys[0]];
-
-  //       workflowTypeVersionDropdown.fieldOptions.options =
-  //         firstVersionSet.workflow_type_version.map((version: string) => ({
-  //           label: version,
-  //           value: version,
-  //         }));
-  //     }
-  //   } catch (error) {
-  //     console.error(error);
-  //   }
-  // }
+  private async _updateWorkflowType() {
+    const data = await fetchWorkflowType(this.baseURL);
+    const workflowTypes = data.workflow_type_versions;
+
+    const eccUtilsDesignForm = this.shadowRoot?.querySelector(
+      "ecc-utils-design-form"
+    ) as any;
+
+    if (eccUtilsDesignForm) {
+      const workflowTypeKey = "workflow_type";
+      const workflowTypeVersionKey = "workflow_type_version";
+
+      // Find the dropdown field for workflow_type in this.fields
+      const workflowTypeDropdown = this.fields.find(
+        (field) => field.key === workflowTypeKey
+      );
+
+      // Find the dropdown field for workflow_type_version in this.fields
+      const workflowTypeVersionDropdown = this.fields.find(
+        (field) => field.key === workflowTypeVersionKey
+      );
+
+      // Check if the dropdown fields exist and have fieldOptions
+      if (
+        workflowTypeDropdown &&
+        workflowTypeDropdown.fieldOptions &&
+        workflowTypeVersionDropdown &&
+        workflowTypeVersionDropdown.fieldOptions
+      ) {
+        // Update the options of the workflow_type dropdown
+        workflowTypeDropdown.fieldOptions.options = Object.keys(
+          workflowTypes
+        ).map((type: string) => ({
+          label: type,
+          value: type,
+        }));
+
+        // Manually trigger a re-render or update of the form
+        eccUtilsDesignForm.requestUpdate();
+        console.log(eccUtilsDesignForm.getFormData());
+        // Add an event listener to workflow_type dropdown change
+        const formData = eccUtilsDesignForm.getFormData();
+        const selectedWorkflowType = formData[workflowTypeKey];
+
+        // Check if fieldOptions is defined
+        if (workflowTypeVersionDropdown.fieldOptions) {
+          // Update the options of the workflow_type_version dropdown based on the selected workflow_type
+          workflowTypeVersionDropdown.fieldOptions.options =
+            workflowTypes[selectedWorkflowType] || [];
+
+          eccUtilsDesignForm.requestUpdate();
+        }
+      }
+    } else {
+      console.error({
+        message: "ecc-utils-design-form not found",
+        breakPoint: "WESCreateRun.updateDropdown",
+      });
+    }
+  }
 
   async submitForm(form: any) {
     Object.keys(form).forEach((key) => {

diff --git a/packages/ecc-utils-design/src/components/form/form.ts b/packages/ecc-utils-design/src/components/form/form.ts
@@ -531,6 +531,10 @@ export default class EccUtilsDesignForm extends LitElement {
     `;
   }
 
+  public getFormData(): object {
+    return this.form;
+  }
+
   public loading() {
     this.formState = "loading";
   }