Extend the frontend to support SnakeMake export introduced in RestAPE PR 95

src/components/explore/GenerationConfig.tsx

@@ -69,6 +69,15 @@ const GenerationConfig: React.FC<any> = observer((props) => {
                   onChange={(event) => (workflowConfig.solutionCount = parseInt(event.target.value))}
                 />
               </div>
+              <div className="flex items-center m-2 tooltip tooltip-bottom"
+                   data-tip="Specifies whether potentially non-executable workflow descriptions shall be generated.">
+                <label className="w-80 text-lg">Create Potentially Non-Executable Scripts</label>
+                <input type="checkbox"
+                       className="checkbox checkbox-primary"
+                       checked={workflowConfig.createPartialScripts}
+                       onChange={(event) => { workflowConfig.createPartialScripts = event.target.checked }}
+                />
+              </div>
             </div>
           </div>
 

src/components/explore/GenerationResults.tsx

@@ -68,6 +68,36 @@ const GenerationResults: React.FC<any> = observer((props) => {
       });
   };
 
+  const downloadSnakeFile = (run_id: string, snakemake_name: string) => {
+      const request = {
+        run_id: run_id,
+        file_name: snakemake_name,
+      };
+      fetch("/ape/snakemake", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(request),
+      })
+        .then((response) => response.text())
+        .then((data) => {
+          const blob = new Blob([data], { type: "text/plain" });
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = snakemake_name;
+          link.click();
+          URL.revokeObjectURL(url);
+        })
+        .catch((error) => {
+          console.error(
+            "There has been a problem with accessing a snakemake file from the REST APE service:",
+            error
+          );
+        });
+    };
+
   const downloadInputFile = (run_id: string) => {
     fetch(`/ape/cwl_input?run_id=${run_id}`)
       .then((response) => response.text())
@@ -230,9 +260,30 @@ const GenerationResults: React.FC<any> = observer((props) => {
                                   workflow.cwl_name
                                 )
                               }
+                              style={{
+                                      textDecoration: workflow.cwl_name === '' ? 'line-through' : 'none',
+                                      cursor: workflow.cwl_name === '' ? 'not-allowed' : 'pointer',
+                                    }}
+                              disabled={workflow.cwl_name === ''}
                             >
                               CWL
                             </button>
+                            <button
+                              className="text-blue-500 hover:underline"
+                              onClick={() =>
+                                downloadSnakeFile(
+                                  workflow.run_id,
+                                  workflow.snakemake_name
+                                )
+                              }
+                              disabled={workflow.snakemake_name === ''}
+                              style={{
+                                      textDecoration: workflow.snakemake_name === '' ? 'line-through' : 'none',
+                                      cursor: workflow.snakemake_name === '' ? 'not-allowed' : 'pointer',
+                                    }}
+                            >
+                              SMK
+                            </button>
                           </div>
                         </li>
                       )

src/stores/DomainStore.ts

@@ -41,6 +41,7 @@ export interface DomainConfig {
     max: number;
   };
   solutions: number;
+  create_partial_scripts: boolean;
 
   number_of_execution_scripts: number;
   number_of_generated_graphs: number;

src/stores/ExploreDataStore.ts

@@ -16,6 +16,7 @@ const emptyUserConfig = (): UserParams => {
     maxSteps: 5,
     timeout: 120,
     solutionCount: 10,
+    createPartialScripts: true,
   };
 };
 
@@ -122,6 +123,7 @@ export class ExploreDataStore {
         min: config.minSteps,
         max: config.maxSteps,
       },
+      create_partial_scripts: config.createPartialScripts,
       solutions: config.solutionCount,
       number_of_execution_scripts: config.solutionCount,
       number_of_generated_graphs: config.solutionCount,

src/stores/WorkflowTypes.ts

@@ -27,6 +27,7 @@ export type UserParams = {
   maxSteps: number
   timeout: number
   solutionCount: number
+  createPartialScripts: boolean
 }
 
 export type WorkflowSolution = {
@@ -36,6 +37,7 @@ export type WorkflowSolution = {
   descriptive_name: string,
   description: string,
   cwl_name: string,
+  snakemake_name: string,
   figure_name: string,
   benchmark_file: string,
   isSelected: boolean,