Added docker file. Improved Documentation

pkgs/ui/src/app/home/page.tsx

@@ -7,6 +7,7 @@ import { HomeTableConfig } from "@/config/home";
 import dynamic from "next/dynamic";
 import { useEffect } from "react";
 import { mutate } from "swr";
+import ErrorBoundary from "@/components/error_boundary";
 
 const NoSSRSequenceDiagram = dynamic(
   () => import("../../components/sequence_diagram"),
@@ -56,7 +57,9 @@ export default function Home() {
 
       <div>
         <h4>Sequence Diagram</h4>
-        <NoSSRSequenceDiagram />
+        <ErrorBoundary>
+          <NoSSRSequenceDiagram />
+        </ErrorBoundary>
       </div>
     </div>
   );

pkgs/ui/src/components/sequence_diagram/index.tsx

@@ -14,20 +14,20 @@ import { NoDataOverlay } from "../noDataOverlay";
 import { useGetAllEventmessages } from "@/api/eventmessages/eventmessages";
 import { mutate } from "swr";
 import { LoadingOverlay } from "../join/loadingOverlay";
-import { generateMermaidString } from "./helpers";
+//import { generateMermaidString } from "./helpers";
 
 const SequenceDiagram = () => {
   const {
-    data: eventMessagesData,
+    //    data: eventMessagesData,
     isLoading: loadingEventMessages,
     swrKey: eventMessagesKeyFunc,
   } = useGetAllEventmessages();
 
   const mermaidRef: any = useRef(null);
   const [scale, setScale] = useState(1);
-  const hasData = eventMessagesData?.data && eventMessagesData?.data.length > 0;
+  const hasData = false; // TODO: Readd this, right now it's always false
 
-  const mermaidString = generateMermaidString(eventMessagesData?.data);
+  const mermaidString = ""; //generateMermaidString(eventMessagesData?.data);
 
   useEffect(() => {
     if (!loadingEventMessages && hasData)