Tefca architecture diagram (#2348)

* update

* add architecture diagram to tefca

* [pre-commit.ci] auto fixes from pre-commit hooks

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

containers/ecr-viewer/src/app/view-data/page.tsx

@@ -27,8 +27,10 @@ const ECRViewerPage: React.FC = () => {
   const [mappings, setMappings] = useState<PathMappings>({});
   const [errors, setErrors] = useState<Error>();
   const searchParams = useSearchParams();
-  const fhirId = searchParams ? searchParams.get("id") ?? "" : "";
-  const snomedCode = searchParams ? searchParams.get("snomed-code") ?? "" : "";
+  const fhirId = searchParams ? (searchParams.get("id") ?? "") : "";
+  const snomedCode = searchParams
+    ? (searchParams.get("snomed-code") ?? "")
+    : "";
   const isNonIntegratedViewer =
     process.env.NEXT_PUBLIC_NON_INTEGRATED_VIEWER === "true";
 

containers/tefca-viewer/README.md

@@ -50,3 +50,54 @@ The TEFCA Viewer will eventually require other inputs from other DIBBs services.
 ### Developer Documentation
 
 Can be found in [api-documentation.md](api-documentation.md).
+
+### Architecture Diagram
+
+```mermaid
+graph TD
+  subgraph Next.js App
+    direction TB
+
+    A[API Route] -->|GET Request| B[Next.js Server]
+    A[API Route] -->|POST Request| B[Next.js Server]
+
+    B --> C[UseCaseQuery Service]
+    B --> D[Parsing Service]
+    B --> E[Error Handling Service]
+
+    C --> F[Query FHIR Server]
+    D --> G[Parse Patient Demographics]
+    E --> H[Handle Errors]
+
+    subgraph Pages
+      direction TB
+      P1[Page 1: index.js]
+      P2[Page 2: about.js]
+      P3[Page 3: contact.js]
+      P4[Page 4: patients.js]
+      P5[Page 5: usecases.js]
+    end
+
+    B --> P1
+    B --> P2
+    B --> P3
+    B --> P4
+    B --> P5
+  end
+
+  subgraph External Services
+    direction TB
+    I[FHIR Servers]
+  end
+
+  F -->|Query| I
+
+  %% Legends
+  classDef next fill:#f9f,stroke:#333,stroke-width:4px,color:#000;
+  classDef pages fill:#d3f9d8,stroke:#333,stroke-width:4px,color:#000;
+  classDef external fill:#9f9,stroke:#333,stroke-width:4px,color:#000;
+
+  class A,B,C,D,E,F,G,H next;
+  class P1,P2,P3,P4,P5 pages;
+  class I external;
+```