Feature 102. Implement dynamic loading of case study parameters in the creation form

package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@maany_shr/kernel-planckster-sdk-ts": "^2.0.0-alpha",
-    "@maany_shr/rage-ui-kit": "^2.1.0",
+    "@maany_shr/rage-ui-kit": "2.2.0",
     "@preact/signals-react": "^2.1.0",
     "@tanstack/react-query": "^5.25.0",
     "@tanstack/react-query-devtools": "^5.51.21",

src/app/_components/create-case-study.tsx

@@ -3,18 +3,39 @@
 import { CaseStudyForm, useToast } from "@maany_shr/rage-ui-kit";
 import { CaseStudyParameters } from "@maany_shr/rage-ui-kit";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
+import type { TListSourceDataViewModel } from "~/lib/core/view-models/list-source-data-view-models";
+import { useQuery } from "@tanstack/react-query";
+import type { Signal } from "~/lib/core/entity/signals";
+import { querySources } from "~/app/queries";
 
-export const CreateCaseStudy = () => {
+const METADATA_SOURCE_EXP = /^([^/]+)\/([^/]+)\/(\d+)\/metadata\.json$/;
+
+export const CreateCaseStudy = (props: { initialViewModel: TListSourceDataViewModel }) => {
   const availableCaseStudies = {
     "climate-monitoring": "Climate Monitoring",
     "sentinel-5p": "Sentinel 5P",
   };
 
+  const [parameters, setParameters] = useState<CaseStudyParameters>({
+    caseStudy: undefined,
+    tracerId: undefined,
+    jobId: undefined,
+  });
+
   const { toast } = useToast();
   const router = useRouter();
 
-  const onSubmit = (parameters: CaseStudyParameters) => {
-    if (!Object.keys(availableCaseStudies).includes(parameters.caseStudy)) {
+  const [listSourceDataViewModel, setListSourceDataViewModel] = useState<TListSourceDataViewModel>(props.initialViewModel);
+
+  useQuery<Signal<TListSourceDataViewModel>>({
+    queryKey: ["list-source-data"],
+    queryFn: querySources(setListSourceDataViewModel),
+    refetchOnWindowFocus: false,
+  });
+
+  const onSubmit = () => {
+    if (!parameters.caseStudy || !Object.keys(availableCaseStudies).includes(parameters.caseStudy)) {
       toast({
         variant: "error",
         title: "No case study is specified",
@@ -23,7 +44,7 @@ export const CreateCaseStudy = () => {
       return;
     }
 
-    if (Number.isNaN(parameters.jobId) || parameters.tracerId === "" || parameters.jobId < 0) {
+    if (!parameters.jobId || !parameters.tracerId || Number.isNaN(parameters.jobId) || parameters.tracerId === "" || parameters.jobId < 0) {
       toast({
         variant: "error",
         title: "Wrong parameters specified",
@@ -35,9 +56,61 @@ export const CreateCaseStudy = () => {
     router.push(`/case-study?jobId=${parameters.jobId}&tracerId=${parameters.tracerId}&caseStudy=${parameters.caseStudy}`);
   };
 
+  const getTracerIds = () => {
+    if (listSourceDataViewModel.status !== "success") return undefined;
+    if (!parameters.caseStudy) return undefined;
+    const tracerIds = new Set<string>();
+
+    for (const source of listSourceDataViewModel.sourceData) {
+      const match = source.relativePath.match(METADATA_SOURCE_EXP);
+
+      if (match) {
+        const caseStudy = match[1];
+        if (caseStudy !== parameters.caseStudy) continue;
+        const tracerId = match[2];
+        if (!tracerId) continue;
+        tracerIds.add(tracerId);
+      }
+    }
+
+    return Array.from(tracerIds);
+  };
+
+  const getJobIds = () => {
+    if (listSourceDataViewModel.status !== "success") return undefined;
+    if (!parameters.caseStudy || !parameters.tracerId) return undefined;
+    const jobIds = new Set<number>();
+
+    for (const source of listSourceDataViewModel.sourceData) {
+      const match = source.relativePath.match(METADATA_SOURCE_EXP);
+
+      if (match) {
+        const caseStudy = match[1];
+        if (caseStudy !== parameters.caseStudy) continue;
+        const tracerId = match[2];
+        if (tracerId !== parameters.tracerId) continue;
+        const jobId = match[3];
+        if (!jobId) continue;
+        jobIds.add(parseInt(jobId));
+      }
+    }
+
+    return Array.from(jobIds);
+  };
+
+  if (listSourceDataViewModel.status === "request") {
+    return <span>Loading...</span>;
+  }
+
   return (
     <div className="flex grow items-center justify-center">
-      <CaseStudyForm caseStudies={availableCaseStudies} onSubmit={onSubmit} />
+      <CaseStudyForm
+          parameters={parameters}
+          setParameters={setParameters}
+          caseStudies={availableCaseStudies}
+          onSubmit={onSubmit} jobIds={getJobIds()}
+          tracerIds={getTracerIds()}
+      />
     </div>
   );
 };

src/app/case-study/create/page.tsx

@@ -1,8 +1,13 @@
 import { redirect } from "next/navigation";
 import AuthGatewayOutputPort from "~/lib/core/ports/secondary/auth-gateway-output-port";
 import serverContainer from "~/lib/infrastructure/server/config/ioc/server-container";
-import { GATEWAYS } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
+import { CONTROLLERS, GATEWAYS } from "~/lib/infrastructure/server/config/ioc/server-ioc-symbols";
 import { CreateCaseStudy } from "~/app/_components/create-case-study";
+import type ListSourceDataController from "~/lib/infrastructure/server/controller/list-source-data-controller";
+import signalsContainer from "~/lib/infrastructure/common/signals-container";
+import type { TListSourceDataViewModel } from "~/lib/core/view-models/list-source-data-view-models";
+import type { Signal } from "~/lib/core/entity/signals";
+import { SIGNAL_FACTORY } from "~/lib/infrastructure/common/signals-ioc-container";
 
 export default async function SDACaseStudyServerPage() {
   const authGateway = serverContainer.get<AuthGatewayOutputPort>(GATEWAYS.AUTH_GATEWAY);
@@ -11,5 +16,29 @@ export default async function SDACaseStudyServerPage() {
     redirect("/auth/login");
   }
 
-  return <CreateCaseStudy />;
+  const clientID = sessionDTO.data.user.kp.client_id;
+
+  const listSourceDataForClientController = serverContainer.get<ListSourceDataController>(CONTROLLERS.LIST_SOURCE_DATA_CONTROLLER);
+  const listSourceDataForClientResponseSignalFactory = signalsContainer.get<(initialValue: TListSourceDataViewModel, update?: (value: TListSourceDataViewModel) => void) => Signal<TListSourceDataViewModel>>(SIGNAL_FACTORY.KERNEL_LIST_SOURCE_DATA);
+  const listSourceDataForClientResponse: Signal<TListSourceDataViewModel> = listSourceDataForClientResponseSignalFactory({
+    status: "request",
+  });
+
+  const listSourceDataForClientControllerParameters = {
+    response: listSourceDataForClientResponse,
+    clientID: `${clientID}`,
+  };
+
+  await listSourceDataForClientController.execute(listSourceDataForClientControllerParameters);
+
+  if (listSourceDataForClientResponse.value.status !== "success") {
+    switch (listSourceDataForClientResponse.value.status) {
+      case "error":
+        throw new Error(listSourceDataForClientResponse.value.message);
+      case "request":
+        return <div>Loading...</div>;
+    }
+  }
+
+  return <CreateCaseStudy initialViewModel={listSourceDataForClientResponse.value} />;
 }