feat: implement Elektro module with initial components, actions, and …

…GraphQL client setup

README.md

@@ -56,10 +56,9 @@ Before the new version of Orkestrator can be merged into the main repository, th
 - [ ] Basic UI Testing
 - [ ] User Stories (e.g. documentation for specific user stories)
 - [ ] Documentation, Documentation, Documentation
-- [ ] Move to React Query (suggested)
-- [ ] Move to React TanStack Router (suggested)
 - [x] Lazy Load Modules (only if corresponding service in Deployment)
-- [ ] Hosted Deployment (e.g. on Vercel)
+- [ ] Hosted Deployment (e.g. on Goethe Cluster)
+- [x] CI/CD Pipeline
 
 
 ## Service Specific Next Features
@@ -73,7 +72,7 @@ Before the new version of Orkestrator can be merged into the main repository, th
 
 - [x] Move to Mikro Next
 - [X] Establish "Views" as central concept
-- [ ] Deprecated OMERO metadata support
+- [X] Deprecated OMERO metadata support
 
 ### Fluss
 
@@ -92,7 +91,7 @@ Before the new version of Orkestrator can be merged into the main repository, th
 
 - [x] Establish Kabinet
 - [X] Create App Store like Feature
-- [ ] Create App Store UI
+- [X] Create App Store UI
 
 ### Omero-Ark
 
@@ -108,5 +107,9 @@ Before the new version of Orkestrator can be merged into the main repository, th
 - [ ] Build Kluster UI
 - [ ] Elaborate on Dask-Cluster integration
 - [ ] Provide support for other cluster 
+
+### Elektro
+
+- [ ] Implement basic trace visualization
 
 

src/app/App.tsx

@@ -22,6 +22,7 @@ import { PrivateNavigationBar } from "./components/navigation/PrivateNavigationB
 import KraphModule from "@/kraph/KraphModule";
 import BlokModule from "@/blok/BlokModule";
 import AlpakaModule from "@/alpaka/AlpakaModule";
+import ElektroModule from "@/elektro/ElektroModule";
 // Entrypoint of the application.
 // We provide two main routers, one for the public routes, and one for the private routes.
 export const protect = (component: React.ReactNode) => {
@@ -51,6 +52,7 @@ function App() {
               {/* This is the callback route for the herre provider, and needs to be publicalyl available. (Represents Oauth2 Callback)*/}
               <Route index element={<Hero />} />
               <Route path="mikro/*" element={protect(<MikroNextModule />)} />
+              <Route path="elektro/*" element={protect(<ElektroModule />)} />
               <Route
                 path="rekuest/*"
                 element={protect(<RekuestNextModule />)}

src/app/AppProvider.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Toaster } from "@/components/ui/sonner";
 import { ShadnWigets } from "@/components/widgets/ShadnWigets";
 import { baseName, Router, WELL_KNOWN_ENDPOINTS } from "@/constants";
+import { ElektroWard } from "@/elektro/ElektroWard";
 import { KabinetWard } from "@/kabinet/KabinetWard";
 import { KraphWard } from "@/kraph/KraphWard";
 import { WellKnownDiscovery } from "@/lib/fakts";
@@ -124,6 +125,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
                         <Guard.Alpaka fallback={<></>}>
                           <AlpakaWard key="alpaka" />
                         </Guard.Alpaka>
+                        <Guard.Elektro fallback={<></>}>
+                          <ElektroWard key="elektro" />
+                        </Guard.Elektro>
                         <Guard.Mikro fallback={<></>}>
                           <MikroNextWard key="mikro" />
                         </Guard.Mikro>

src/app/components/navigation/PrivateNavigationBar.tsx

@@ -35,6 +35,7 @@ import { TbBugOff } from "react-icons/tb";
 import { ModeToggle } from "../ModeToggle";
 import { Icons } from "@/components/icons";
 import { BiSolidWidget } from "react-icons/bi";
+import { BsLightning } from "react-icons/bs";
 
 export type INavigationBarProps = {
   children?: React.ReactNode;
@@ -64,6 +65,8 @@ export const matchIcon = (key: string) => {
       return (
         <ChatBubbleIcon className="w-8 h-8 mx-auto  text-foreground p-[0.5]" />
       );
+    case "elektro":
+      return <BsLightning className="w-8 h-8 mx-auto  text-foreground" />;
     default:
       return <HomeIcon className="w-8 h-8 mx-auto  text-foreground" />;
   }

src/arkitekt/Arkitekt.tsx

@@ -22,6 +22,7 @@ import { App, ServiceMap } from "./types";
 import { createLivekitClient } from "@/lib/livekit/client";
 import { createKraphClient } from "@/lib/kraph/client";
 import { createAlpakaClient } from "@/lib/alpaka/client";
+import { createElektroClient } from "@/lib/elektro/client";
 
 export const electronRedirect = async (
   url: string,
@@ -151,6 +152,21 @@ export const serviceMap: ServiceBuilderMap = {
       };
     },
   },
+  elektro: {
+    key: "elektro",
+    service: "live.arkitekt.elektro",
+    optional: true,
+    builder: (manifest, fakts: any, token) => {
+      return {
+        client: createElektroClient({
+          wsEndpointUrl: fakts.alpaka.ws_endpoint_url,
+          endpointUrl: fakts.alpaka.endpoint_url,
+          possibleTypes: alpakaResult.possibleTypes,
+          retrieveToken: () => token,
+        }),
+      };
+    },
+  },
   livekit: {
     key: "livekit",
     service: "io.livekit.livekit",
@@ -195,6 +211,7 @@ export const Guard = {
   Livekit: buildGuard("livekit"),
   Kraph: buildGuard("kraph"),
   Alpaka: buildGuard("alpaka"),
+  Elektro: buildGuard("elektro"),
 };
 
 export const useMikro = (): ApolloClient<NormalizedCache> => {
@@ -277,6 +294,16 @@ export const useAlpaka = (): ApolloClient<NormalizedCache> => {
   return clients.alpaka?.client;
 };
 
+export const useElektro = (): ApolloClient<NormalizedCache> => {
+  const { clients } = useArkitekt();
+
+  if (!clients.elektro?.client) {
+    throw new Error("Elektro client not available");
+  }
+
+  return clients.elektro?.client;
+};
+
 export const useLivekit = (): LivekitClient => {
   const { clients } = useArkitekt();
 

src/elektro/ElektroModule.tsx

@@ -0,0 +1,23 @@
+import { Guard } from "@/arkitekt/Arkitekt";
+import { ModuleLayout } from "@/components/layout/ModuleLayout";
+import React from "react";
+import { Route, Routes } from "react-router";
+import HomePage from "./pages/HomePage";
+import RoomPage from "./pages/RoomPage";
+import StandardPane from "./panes/StandardPane";
+interface Props {}
+
+export const ElektroModule: React.FC<Props> = (props) => {
+  return (
+    <Guard.Elektro fallback={<>Loading</>}>
+      <ModuleLayout pane={<StandardPane />}>
+        <Routes>
+          <Route path="rooms/:id" element={<RoomPage />} />
+          <Route path="*" element={<HomePage />} />
+        </Routes>
+      </ModuleLayout>
+    </Guard.Elektro>
+  );
+};
+
+export default ElektroModule;

src/elektro/ElektroWard.tsx

@@ -0,0 +1,35 @@
+import { useAlpaka } from "@/arkitekt/Arkitekt";
+import { useWidgetRegistry } from "@/rekuest/widgets/WidgetsContext";
+import { gql } from "@apollo/client";
+import { useEffect } from "react";
+
+export const ElektroWard: React.FC<{
+  fallback?: React.ReactNode;
+  key: string;
+}> = ({ key, fallback }) => {
+  const client = useAlpaka();
+  const { registry } = useWidgetRegistry();
+
+  useEffect(() => {
+    if (client) {
+      const runFunc = (options: { query: string; variables: any }) => {
+        let document = gql(options.query);
+        return client
+          .query({
+            query: document,
+            variables: options.variables,
+          })
+          .then((result: any) => {
+            console.log(result.data);
+            return result.data.options;
+          });
+      };
+
+      registry?.registerWard(key, {
+        search: runFunc,
+      });
+    }
+  }, [client, registry]);
+
+  return <>{fallback}</>;
+};

src/elektro/SystemMessage.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@/components/ui/button";
+import {
+  useAcknowledgeMessageMutation,
+  useMyActiveMessagesQuery,
+} from "./api/graphql";
+
+export const SystemMessageDisplay = (props: {}) => {
+  const { data, error } = useMyActiveMessagesQuery();
+  const [ack] = useAcknowledgeMessageMutation({
+    refetchQueries: ["MyActiveMessages"],
+  });
+
+  console.log("yyst", data, error);
+  return (
+    <>
+      {(data?.myActiveMessages?.length || 0) > 0 && (
+        <div className="absolute top-0 right-0 h-screen w-screen ">
+          {data?.myActiveMessages.map((message) => (
+            <div
+              key={message.id}
+              className="p-2 rounded shadow-md bg-black opacity-99 p-2 text-white absolute w-full h-full z-100"
+            >
+              <div className="top-[50%] left-[50%] translate-x-[-50%] translate-y-[50%] text-white w-100 ">
+                <div className="font-bold">{message.title}</div>
+                <div>{message.message}</div>
+                <Button
+                  onClick={() =>
+                    ack({ variables: { id: message.id, ack: true } })
+                  }
+                >
+                  Acknowledge
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  );
+};

src/elektro/api/fragments.ts

@@ -0,0 +1,21 @@
+
+      export interface PossibleTypesResultData {
+        possibleTypes: {
+          [key: string]: string[]
+        }
+      }
+      const result: PossibleTypesResultData = {
+  "possibleTypes": {
+    "Descendant": [
+      "LeafDescendant",
+      "MentionDescendant",
+      "ParagraphDescendant"
+    ],
+    "SocialAccount": [
+      "GenericAccount",
+      "OrcidAccount"
+    ]
+  }
+};
+      export default result;
+