feat(frontend): update Job dashboard and Job creation pages for swaps

- Update create job page to allow user to select swaps
- Show partially rendered graph when the user selects/changes entrypoint, and as they select swaps
- Show swaps on job dashboard page

Author: henrychoy

src/dioptra/restapi/v1/entrypoints/schema.py

@@ -452,10 +452,11 @@ def validate_sections(self, sections: list[str]) -> None:
 
 
 class DynamicGlobalParametersResponseSchema(Schema):
-    globalParameters = fields.List(
-        fields.String(),
+    globalParameters = fields.Nested(
+        EntrypointParameterSchema,
         attribute="entrypoint_params",
         data_key="entrypointParams",
+        many=True,
         metadata={
             "description": (
                 "A list of global parameters used in the entrypoint task graph."

src/dioptra/restapi/v1/entrypoints/service.py

@@ -1425,7 +1425,14 @@ def get_params(
                 active_plugins.append(epp.plugin)
 
         return {
-            "entrypoint_params": list(needed_vars),
+            "entrypoint_params": [
+                parameter
+                for parameter in sorted(
+                    entry_point.parameters,
+                    key=lambda parameter: parameter.parameter_number,
+                )
+                if parameter.name in needed_vars
+            ],
             "topological_sort": topsorted,
             "active_plugins": active_plugins,
         }

src/dioptra/restapi/v1/jobs/schema.py

@@ -238,6 +238,12 @@ class JobSwapSchema(Schema):
         metadata={"description": "Alias of the chosen task."},
         dump_only=True,
     )
+    taskName = fields.String(
+        attribute="task_name",
+        data_key="taskName",
+        metadata={"description": "Name of the chosen task."},
+        dump_only=True,
+    )
     pluginFileResourceSnapshotId = fields.Integer(
         attribute="plugin_file_resource_snapshot_id",
         data_key="pluginFileResourceSnapshotId",

src/dioptra/restapi/v1/jobs/service.py

@@ -334,6 +334,9 @@ def create(
             job=new_job,
             artifacts=[],
             has_draft=False,
+            swap_task_names=_build_swap_task_name_lookup(
+                new_job, self._swaps_retrieval_service, log
+            ),
         )
 
     def _build_job_swaps(
@@ -553,12 +556,19 @@ def get(
             )
 
         jobs = list(db.session.scalars(jobs_stmt).all())
-        return _build_job_dict(jobs), total_num_jobs
+        return (
+            _build_job_dict(jobs, self._swaps_retrieval_service, log),
+            total_num_jobs,
+        )
 
 
 class JobIdService(object):
     """The service methods for registering and managing jobs by their unique id."""
 
+    @inject
+    def __init__(self, swaps_retrieval_service: SwapsRetrievalService) -> None:
+        self._swaps_retrieval_service = swaps_retrieval_service
+
     def get(
         self,
         job_id: int,
@@ -606,6 +616,9 @@ def get(
             job=job,
             artifacts=artifacts,
             has_draft=False,
+            swap_task_names=_build_swap_task_name_lookup(
+                job, self._swaps_retrieval_service, log
+            ),
         )
 
     def delete(self, job_id: int, **kwargs) -> dict[str, Any]:
@@ -955,7 +968,10 @@ class ExperimentJobService(object):
 
     @inject
     def __init__(
-        self, experiment_id_service: ExperimentIdService, job_service: JobService
+        self,
+        experiment_id_service: ExperimentIdService,
+        job_service: JobService,
+        swaps_retrieval_service: SwapsRetrievalService,
     ) -> None:
         """Initialize the ExperimentIdJob service.
 
@@ -967,6 +983,7 @@ def __init__(
         """
         self._experiment_id_service = experiment_id_service
         self._job_service = job_service
+        self._swaps_retrieval_service = swaps_retrieval_service
 
     def create(
         self,
@@ -1111,7 +1128,10 @@ def get(
             )
 
         jobs = list(db.session.scalars(jobs_stmt).all())
-        return _build_job_dict(jobs), total_num_jobs
+        return (
+            _build_job_dict(jobs, self._swaps_retrieval_service, log),
+            total_num_jobs,
+        )
 
 
 class ExperimentJobIdService(object):
@@ -1672,12 +1692,44 @@ def get_logs(
         return records, total_count
 
 
-def _build_job_dict(jobs: list[models.Job]) -> list[utils.JobDict]:
+def _build_swap_task_name_lookup(
+    job: models.Job,
+    swaps_retrieval_service: SwapsRetrievalService,
+    logger: BoundLogger,
+) -> dict[tuple[int, str, str], str]:
+    if not job.job_swaps:
+        return {}
+
+    entrypoint = job.entry_point_job.entry_point
+    available_swaps = swaps_retrieval_service.get_swaps(
+        entrypoint_id=entrypoint.resource_id,
+        entrypoint_snapshot_id=entrypoint.resource_snapshot_id,
+        logger=logger,
+    )
+
+    return {
+        (
+            swap["plugin_file_resource_snapshot_id"],
+            swap["swap_name"],
+            swap["task_alias"],
+        ): swap["task_name"]
+        for swap in available_swaps
+    }
+
+
+def _build_job_dict(
+    jobs: list[models.Job],
+    swaps_retrieval_service: SwapsRetrievalService,
+    logger: BoundLogger,
+) -> list[utils.JobDict]:
     job_dicts: dict[int, utils.JobDict] = {
         job.resource_id: utils.JobDict(
             job=job,
             artifacts=[],
             has_draft=False,
+            swap_task_names=_build_swap_task_name_lookup(
+                job, swaps_retrieval_service, logger
+            ),
         )
         for job in jobs
     }

src/dioptra/restapi/v1/utils.py

@@ -148,6 +148,7 @@ class JobDict(TypedDict):
     job: models.Job
     artifacts: list[models.Artifact]
     has_draft: bool | None
+    swap_task_names: dict[tuple[int, str, str], str]
 
 
 class ModelWithVersionDict(TypedDict):
@@ -790,6 +791,7 @@ def build_job(job_dict: JobDict) -> dict[str, Any]:
     job = job_dict["job"]
     artifacts = job_dict.get("artifacts", None)
     has_draft = job_dict.get("has_draft", None)
+    swap_task_names = job_dict.get("swap_task_names", {})
 
     data = {
         "id": job.resource_id,
@@ -808,6 +810,13 @@ def build_job(job_dict: JobDict) -> dict[str, Any]:
             {
                 "swap_name": swap.swap_name,
                 "task_alias": swap.task_alias,
+                "task_name": swap_task_names.get(
+                    (
+                        swap.plugin_file_resource_snapshot_id,
+                        swap.swap_name,
+                        swap.task_alias,
+                    )
+                ),
                 "plugin_file_resource_snapshot_id": swap.plugin_file_resource_snapshot_id,
             }
             for swap in sorted(job.job_swaps, key=lambda swap: swap.swap_name)

src/frontend/src/components/CodeEditor.vue

@@ -125,6 +125,12 @@ const handleReady = (payload) => {
   view.value = payload.view;
 };
 
+function refreshLayout() {
+  view.value?.requestMeasure();
+}
+
+defineExpose({ refreshLayout });
+
 function highlightPlaceholder(update) {
   if (!view.value || update.docChanged || props.language === "python") return;
   const from = view.value.state.selection.ranges[0].from;

src/frontend/src/dialogs/InfoPopupDialog.vue

@@ -2,6 +2,7 @@
   <q-dialog
     v-model="showDialog"
     aria-labelledby="modalTitle"
+    @show="emit('show')"
   >
     <q-card
       style="width: 900px; max-width: 90vw; max-height: 80vh"
@@ -33,4 +34,5 @@
 
 <script setup>
 const showDialog = defineModel();
+const emit = defineEmits(["show"]);
 </script>

src/frontend/src/services/dataApi.ts

@@ -327,6 +327,33 @@ export async function deleteJob(id: number, jobId: number) {
   return await axios.delete(`/api/experiments/${id}/jobs/${jobId}`);
 }
 
+export async function getSwaps(entrypointId: number, snapshotId: number) {
+  return await axios.get(`/api/entrypoints/${entrypointId}/snapshots/${snapshotId}/swaps`);
+}
+
+export async function getGraph(entrypointId: number, snapshotId: number, swaps: Record<string, string>) {
+  const swapsQueryParam = Object.entries(swaps)
+    .map(([swapName, taskAlias]) => `${swapName}:${taskAlias}`)
+    .join(",");
+
+  return await axios.get(`/api/entrypoints/${entrypointId}/snapshots/${snapshotId}/config`, {
+    params: {
+      swaps: swapsQueryParam,
+      sections: "graph",
+      partial: true,
+    },
+  });
+}
+
+export async function getUsedParams(entrypointId: number, snapshotId: number, swaps: Record<string, string>) {
+  const swapsQueryParam = Object.entries(swaps)
+    .map(([swapName, taskAlias]) => `${swapName}:${taskAlias}`)
+    .join(",");
+  return await axios.get(`/api/entrypoints/${entrypointId}/snapshots/${snapshotId}/dynamicGlobalParameters`, {
+    params: { swaps: swapsQueryParam },
+  });
+}
+
 export async function addDraft<T extends keyof CreateParams>(type: T, params: CreateParams[T], id: number) {
   if (id) {
     return await axios.post(`/api/${type}/${id}/draft`, params);