feat(ml): reenable machine learning feature

solves #DEV-41 #DEV-10 #DEV-55

apps/web/src/app/app.tsx

@@ -12,7 +12,7 @@ import {
 } from '@graphpolaris/shared/lib/data-access';
 import { WebSocketHandler } from '@graphpolaris/shared/lib/data-access/socket';
 import Broker from '@graphpolaris/shared/lib/data-access/socket/broker';
-import { assignNewGraphQueryResult, useAppDispatch } from '@graphpolaris/shared/lib/data-access/store';
+import { assignNewGraphQueryResult, useAppDispatch, useML, useMLEnabledHash } from '@graphpolaris/shared/lib/data-access/store';
 import {
   GraphQueryResultFromBackend,
   GraphQueryResultFromBackendPayload,
@@ -26,6 +26,8 @@ import { VisualizationPanel } from './panels/Visualization';
 import styles from './app.module.scss';
 import { logout } from '@graphpolaris/shared/lib/data-access/store/authSlice';
 import { SchemaFromBackend } from '@graphpolaris/shared/lib/schema';
+import { LinkPredictionInstance, setMLResult, allMLTypes } from '@graphpolaris/shared/lib/data-access/store/mlSlice';
+import { Resizable } from '@graphpolaris/shared/lib/components/Resizable';
 
 export interface App {}
 
@@ -41,6 +43,8 @@ export function App(props: App) {
   const queryHash = useQuerybuilderHash();
   const ws = useRef(new WebSocketHandler(import.meta.env.VITE_BACKEND_WSS_URL));
   const [authCheck, setAuthCheck] = useState(false);
+  const ml = useML();
+  const mlHash = useMLEnabledHash();
 
   // for testing purposes
   // useEffect(() => {
@@ -50,12 +54,17 @@ export function App(props: App) {
   useEffect(() => {
     // Default
     Broker.instance().subscribe((data: SchemaFromBackend) => dispatch(readInSchemaFromBackend(data)), 'schema_result');
-
     Broker.instance().subscribe((data: GraphQueryResultFromBackendPayload) => dispatch(assignNewGraphQueryResult(data)), 'query_result');
+    allMLTypes.forEach((mlType) => {
+      Broker.instance().subscribe((data: LinkPredictionInstance[]) => dispatch(setMLResult({ type: mlType, result: data })), mlType);
+    });
 
     return () => {
       Broker.instance().unSubscribeAll('schema_result');
       Broker.instance().unSubscribeAll('query_result');
+      allMLTypes.forEach((mlType) => {
+        Broker.instance().unSubscribeAll(mlType);
+      });
     };
   }, []);
 
@@ -85,14 +94,14 @@ export function App(props: App) {
       if (query.nodes.length === 0) {
         dispatch(resetGraphQueryResults());
       } else {
-        api_query.execute(Query2BackendQuery(session.currentDatabase, query));
+        api_query.execute(Query2BackendQuery(session.currentDatabase, query, ml));
       }
     }
   };
 
   useEffect(() => {
     runQuery();
-  }, [queryHash]);
+  }, [queryHash, mlHash]);
 
   return (
     <div className="h-screen w-screen">
@@ -101,25 +110,27 @@ export function App(props: App) {
           <aside className="h-[4rem]">
             <Navbar />
           </aside>
-          <main className="flex w-screen h-[calc(100%-4.2rem)] gap-0.5">
-            <div className="h-full min-w-[35vw] max-w-[35vw] panel">
-              <Schema auth={authCheck} />
-            </div>
-            <div className="h-full min-w-[calc(65vw-0.125rem)] max-w-[calc(65vw-0.125rem)] flex-grow-0">
-              <div className="w-full panel h-[50%]">
-                <VisualizationPanel />
+          <main className="flex w-screen h-[calc(100%-4.2rem)]">
+            <Resizable divisorSize={3} horizontal={true} defaultProportion={0.33}>
+              <div className="h-full w-full panel">
+                <Schema auth={authCheck} />
               </div>
-              <div className="h-0.5"></div>
-              <div className="w-full panel h-[calc(50%-0.125rem)]">
-                {/* <h1>Query Panel</h1> */}
-                <QueryBuilder
-                  onRunQuery={() => {
-                    console.log('Run Query');
-                    runQuery();
-                  }}
-                />
+              <div className="h-full w-full">
+                <Resizable divisorSize={3} horizontal={false}>
+                  <div className="w-full h-full panel">
+                    <VisualizationPanel />
+                  </div>
+                  <div className="w-full h-full panel">
+                    <QueryBuilder
+                      onRunQuery={() => {
+                        console.log('Run Query');
+                        runQuery();
+                      }}
+                    />
+                  </div>
+                </Resizable>
               </div>
-            </div>
+            </Resizable>
           </main>
         </div>
       </div>