feat(schema): add layouting to schema panel

libs/shared/lib/data-access/store/graphQueryResultSlice.ts

@@ -2,8 +2,11 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from './store';
 
 export interface GraphQueryResultFromBackendPayload {
-  payload: GraphQueryResultFromBackend;
-  type: string;
+  queryID: string;
+  result: {
+    payload: GraphQueryResultFromBackend;
+    type: string;
+  };
 }
 
 export interface GraphQueryResultFromBackend {
@@ -63,7 +66,7 @@ export const graphQueryResultSlice = createSlice({
   initialState,
   reducers: {
     assignNewGraphQueryResult: (state, action: PayloadAction<GraphQueryResultFromBackendPayload>) => {
-      const payload = action.payload.payload;
+      const payload = action.payload.result.payload;
 
       // Only keep one node and one edge per id. This is also done in the backend, but we do it here as well to be sure.
       const nodeIDs = new Set(payload.nodes.map((node) => node.id));

libs/shared/lib/data-access/store/schemaSlice.ts

@@ -8,11 +8,11 @@ import { SchemaFromBackend, SchemaGraph, SchemaGraphology } from '../../schema';
 
 export type SchemaSettings = {
   connectionType: 'connection' | 'bezier' | 'straight' | 'step';
+  layoutName: AllLayoutAlgorithms;
 };
 
 type schemaSliceI = {
   graph: SchemaGraph;
-  layoutName: AllLayoutAlgorithms;
   settings: SchemaSettings;
 };
 
@@ -20,9 +20,9 @@ type schemaSliceI = {
 export const initialState: schemaSliceI = {
   graph: new SchemaGraphology().export(),
   // layoutName: 'Cytoscape_fcose',
-  layoutName: Layouts.KLAY,
   settings: {
     connectionType: 'connection',
+    layoutName: Layouts.KLAY,
   },
 };
 export const schemaSlice = createSlice({
@@ -35,11 +35,6 @@ export const schemaSlice = createSlice({
       state.graph = action.payload;
     },
 
-    setSchemaLayout: (state, action: PayloadAction<string>) => {
-      console.log('setSchemaLayout', action);
-      state.layoutName = action.payload as AllLayoutAlgorithms;
-    },
-
     readInSchemaFromBackend: (state, action: PayloadAction<SchemaFromBackend>) => {
       state.graph = SchemaUtils.schemaBackend2Graphology(action.payload).export();
       // console.log('Updated schema from backend');

libs/shared/lib/schema/panel/schema.tsx

@@ -76,12 +76,11 @@ export const Schema = (props: Props) => {
   // In case the schema is updated
   const schemaGraph = useSchemaGraph();
   const schemaGraphology = useMemo(() => toSchemaGraphology(schemaGraph), [schemaGraph]);
-  const schemaLayout = useSchemaLayout();
   const layout = useRef<AlgorithmToLayoutProvider<AllLayoutAlgorithms>>();
 
   function updateLayout() {
     const layoutFactory = new LayoutFactory();
-    layout.current = layoutFactory.createLayout(schemaLayout as AllLayoutAlgorithms); // TODO: more layouts here
+    layout.current = layoutFactory.createLayout(settings.layoutName);
   }
 
   useEffect(() => {
@@ -126,7 +125,7 @@ export const Schema = (props: Props) => {
     //   schemaGraphology.order,
     //   schemaFlow
     // );
-  }, [schemaGraph, schemaLayout, settings]);
+  }, [schemaGraph, settings]);
 
   // console.log(nodes, edges);
 

libs/shared/lib/schema/panel/schemaDialog.tsx

@@ -5,6 +5,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import { useAppDispatch, useSchemaSettings } from '../../data-access';
 import { SchemaSettings, setSchemaSettings } from '../../data-access/store/schemaSlice';
 import { FormActions, FormBody, FormCard, FormControl, FormHBar, FormTitle, FormDiv } from '../../components/forms';
+import { Layouts } from '../../graph-layout';
 
 export const SchemaDialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
   const settings = useSchemaSettings();
@@ -25,7 +26,7 @@ export const SchemaDialog = React.forwardRef<HTMLDivElement, DialogProps>((props
     <>
       {props.open && (
         <FormDiv ref={ref}>
-          <FormCard>
+          <FormCard className="w-fit">
             <FormBody
               onSubmit={(e) => {
                 e.preventDefault();
@@ -89,6 +90,25 @@ export const SchemaDialog = React.forwardRef<HTMLDivElement, DialogProps>((props
                 </select>
               </FormControl>
               <FormHBar />
+              <FormControl>
+                <label className="label">
+                  <span className="label-text">Layout Type</span>
+                </label>
+                <select
+                  className="select select-primary select-sm "
+                  value={state.layoutName}
+                  onChange={(e) => {
+                    setState({ ...state, layoutName: e.target.value as any });
+                  }}
+                >
+                  {Object.entries(Layouts).map(([k, v]) => (
+                    <option className="option" value={v} key={v}>
+                      {k}
+                    </option>
+                  ))}
+                </select>
+              </FormControl>
+              <FormHBar />
 
               <FormActions onClose={props.onClose} />
             </FormBody>