Added docker file. Improved Documentation

pkgs/ui/README.md

@@ -1,5 +1,25 @@
 # cLan - awesome UI
 
+The files in `src/api` are autogenerated from the openapi.json. The openapi.json comes from the backend, from fastapi which autogenerates the openapi.json file from the python code.
+
+We then use orval to generate typescript files to `src/api`
+
+## Build Development Web UI
+
+To build the dev web ui with hotreloading
+
+```bash
+npm run dev
+```
+
+## Build release Web UI
+
+To build the release version execute
+
+```bash
+npm run build
+```
+
 ## Updating dependencies
 
 After changing dependencies with
@@ -16,14 +36,6 @@ To sort classnames manually:
 
 `cd /clan-core/pkgs/ui/`
 
-## Upload ui to gitea
+## Troubleshooting
 
-Create a gitea token here: https://git.clan.lol/user/settings/applications
-
-Than run this command:
-
-```
-GITEA_TOKEN=<YOUR_TOKEN> nix run .#update-ui-assets
-```
-
-.
+Sometimes new endpoints don't appear in `src/api`. Delete the `ui/openapi.json` file and execute `direnv reload`

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)