New FHIR Viewer

Author: LeeGathercole

.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.15.3","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.16.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}"]

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1763653789860
+		"lastUpdateCheck": 1765300660767
 	}
 }

eventcatalog/src/components/MDX/FHIRViewer/FHIRViewer.astro

@@ -0,0 +1,39 @@
+---
+
+// Props passed from MDX
+const {
+  definition,
+  src,
+  filePath,
+  id = "fhir-viewer",
+  title
+} = Astro.props;
+import fs from 'node:fs/promises';
+import { existsSync } from 'fs';
+import FHIRSchemaViewer from '@components/SchemaExplorer/FHIRSchemaViewer'; // <-- path to your React component
+import {resolveProjectPath, getAbsoluteFilePathForAstroFile } from '@utils/files';
+
+let schema;
+
+try {
+  const schemaPath = getAbsoluteFilePathForAstroFile(filePath, src);
+  const exists = existsSync(schemaPath);
+  if (exists) {
+    schema = await fs.readFile(schemaPath, 'utf-8');
+    schema = JSON.parse(schema);
+    if (!schema) {
+      throw new Error(`<FHIRViewer> needs either a "definition" object or a "src" JSON file path`);
+    }
+  }
+} catch (error) {
+    console.log('Failed to process schemas');
+    console.log(error);
+}
+---
+
+<div class="my-4">
+  <FHIRSchemaViewer
+    structureDefinition={schema}
+    title={title}
+  />
+</div>

eventcatalog/src/components/MDX/SchemaViewer/SchemaViewerRoot.astro

@@ -15,7 +15,6 @@ try {
   const absoluteFilePath = resolveProjectPath(filePath);
   const file = await fs.readFile(absoluteFilePath, 'utf-8');
   const schemaViewers = getMDXComponentsByName(file, 'SchemaViewer');
-
   // Loop around all the possible SchemaViewers in the file.
   const getAllComponents = schemaViewers.map(async (schemaViewerProps: any, index: number) => {
     const schemaPath = getAbsoluteFilePathForAstroFile(filePath, schemaViewerProps.file);

eventcatalog/src/components/MDX/components.tsx

@@ -27,6 +27,7 @@ import DrawIO from '@components/MDX/DrawIO/DrawIO.astro';
 import FigJam from '@components/MDX/FigJam/FigJam.astro';
 import Design from '@components/MDX/Design/Design.astro';
 import MermaidFileLoader from '@components/MDX/MermaidFileLoader/MermaidFileLoader.astro';
+import FHIRViewer from '@components/MDX/FHIRViewer/FHIRViewer.astro';
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
 import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
@@ -66,6 +67,7 @@ const components = (props: any) => {
     DrawIO: (mdxProp: any) => jsx(DrawIO, { ...props, ...mdxProp }),
     FigJam: (mdxProp: any) => jsx(FigJam, { ...props, ...mdxProp }),
     MermaidFileLoader: (mdxProp: any) => jsx(MermaidFileLoader, { ...props, ...mdxProp }),
+    FHIRViewer: (mdxProp: any) => jsx(FHIRViewer, { ...props, ...mdxProp }),
   };
 };
 

eventcatalog/src/components/SchemaExplorer/FHIRSchemaViewer.tsx

@@ -0,0 +1,156 @@
+import React, { useMemo } from "react";
+
+import $RefParser from '@apidevtools/json-schema-ref-parser';
+import pkg from 'fhir-react';
+const {FhirResource, fhirVersions} = pkg;
+interface FHIRSchemaViewerProps {
+  structureDefinition: any;
+  title?: string;
+}
+
+interface FhirElementNode {
+  id: string;
+  path: string;
+  name: string;
+  min: number;
+  max: string;
+  types: string []
+  sliceName?: string;
+  children: FhirElementNode[];
+}
+
+/**
+ * Take snapshot.element[] and transform the flat list
+ * into a nested tree based on the element paths.
+ */
+function buildElementTree(elements: any[]): FhirElementNode[] {
+  const nodeMap = new Map<string, FhirElementNode>();
+  const roots: FhirElementNode[] = [];
+  console.log(elements.length);
+  // First pass: build nodes
+  elements.forEach((el: any) => {
+    const path = el.path;
+    const parts = path.split(".");
+    const name = el.sliceName ?? parts[parts.length - 1];
+    const node: FhirElementNode = {
+      id: el.id,                 // FHIR ID (with slice names)
+      path,                      // hierarchical path
+      name,                      // display name
+      min: el.min ?? 0,
+      max: el.max ?? "1",
+      types: Array.isArray(el.type)
+        ? el.type.map((t: any) => t.code)
+        : [],
+      sliceName: el.sliceName,
+      children: [],
+    };
+
+    nodeMap.set(path, node);
+  });
+
+  // Second pass: connect nodes into a tree
+  elements.forEach((el: any) => {
+    const path = el.path;
+    const parts = path.split(".");
+    const parentPath = parts.slice(0, -1).join(".");
+
+    const node = nodeMap.get(path);
+
+    if (parentPath && nodeMap.has(parentPath)) {
+      nodeMap.get(parentPath)!.children.push(node!);
+    } else {
+      // no parent => top-level root
+      roots.push(node!);
+    }
+  });
+
+  return roots;
+}
+
+/**
+ * Simple recursive UI renderer for FHIR element tree.
+ */
+import { useState } from "react";
+
+function ElementNodeView({ node, depth }: { node: FhirElementNode; depth: number }) {
+  const [expanded, setExpanded] = useState(depth === 0); // root expanded by default
+
+  const hasChildren = node.children && node.children.length > 0;
+
+  return (
+    <div style={{ marginLeft: depth * 18 }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          cursor: hasChildren ? "pointer" : "default",
+          lineHeight: "1.5em",
+        }}
+        onClick={() => hasChildren && setExpanded(!expanded)}
+      >
+        {/* Expand / collapse triangle */}
+        {hasChildren ? (
+          <span style={{ width: 14, display: "inline-block", fontSize: 12 }}>
+            {expanded ? "▼" : "▶"}
+          </span>
+        ) : (
+          <span style={{ width: 14, display: "inline-block" }} />
+        )}
+
+        {/* Element path */}
+        <span style={{ fontWeight: depth === 0 ? "bold" : "normal" }}>
+          {node.path}
+        </span>
+
+        {/* Min/max */}
+        <span style={{ opacity: 0.6, marginLeft: 6 }}>
+          ({node.min}..{node.max})
+        </span>
+
+        {/* Type info */}
+        {(node.types?.length ?? 0) > 0 && (
+          <span style={{ marginLeft: 8, fontSize: "0.9em", opacity: 0.8 }}>
+            : {node.types!.join(" | ")}
+          </span>
+        )}
+      </div>
+
+      {/* Child nodes */}
+      {expanded &&
+        hasChildren &&
+        node.children.map((child) => (
+          <ElementNodeView key={child.path} node={child} depth={depth + 1} />
+        ))}
+    </div>
+  );
+}
+/**
+ * Main viewer component.
+ */
+export default function FHIRSchemaViewer({ structureDefinition, title }: FHIRSchemaViewerProps) {
+  
+  
+  if (!structureDefinition) {
+    return <div>No StructureDefinition provided.</div>;
+  }
+
+  return (
+    <div style={{ padding: "1rem", fontFamily: "Arial" }}>
+      <h3 style={{ marginBottom: "0.5rem" }}>
+        {title ?? structureDefinition.title ?? structureDefinition.name}
+      </h3>
+
+      <div style={{ fontSize: "0.9rem", color: "#555", marginBottom: "1rem" }}>
+        {structureDefinition.description}
+      </div>
+
+      {/* Render root elements */}
+      
+    <FhirResource
+      fhirResource={structureDefinition}
+      fhirVersion={fhirVersions.R4}
+    />
+
+    </div>
+  );
+}

eventcatalog/src/components/SchemaExplorer/JSONSchemaViewer.tsx

@@ -106,9 +106,10 @@ async function processSchema(schema: any, rootSchema?: any): Promise<any> {
 
   let dereferencedSchema = await $RefParser.dereference(schema, {
     dereference: {
-      circular: 'ignore', // Don't allow circular $refs
+      circular: true, // Don't allow circular $refs
     },
   });
+  console.log(dereferencedSchema);
   return dereferencedSchema;
 }
 

eventcatalog/src/types/fhir-react.d.ts

@@ -0,0 +1,33 @@
+declare module 'fhir-react' {
+
+  import { ComponentType } from 'react';
+
+
+
+  export const fhirVersions: {
+
+    DSTU2: string;
+
+    STU3: string;
+
+    R4: string;
+
+  };
+
+
+
+  export interface FhirResourceProps {
+
+    fhirResource: any;
+
+    fhirVersion?: string;
+
+    withCarinBBProfile?: boolean;
+
+  }
+
+
+
+  export const FhirResource: ComponentType<FhirResourceProps>;
+
+}

examples/default/domains/E-Commerce/subdomains/Orders/services/InventoryService/queries/GetInventoryList/index.mdx

@@ -19,4 +19,13 @@ import Footer from '@catalog/components/footer.astro';
 
 The GetInventoryList message is a query used to retrieve a comprehensive list of all available inventory items within a system. It is designed to return detailed information about each item, such as product names, quantities, availability status, and potentially additional metadata like categories or locations. This query is typically utilized by systems or services that require a real-time view of current stock, ensuring that downstream applications or users have accurate and up-to-date information for decision-making or operational purposes. The GetInventoryList is ideal for use cases such as order processing, stock management, or reporting, providing visibility into the full range of inventory data.
 
-<NodeGraph />
+<NodeGraph />
+
+<FHIRViewer
+  title="FHIR UK Core AllergyIntolerance (R4)"
+  src="./schema.json"
+  maxHeight="500"
+  search="true"
+  expand="false"
+/>
+