diff --git a/libs/shared/lib/data-access/store/graphQueryResultSlice.ts b/libs/shared/lib/data-access/store/graphQueryResultSlice.ts old mode 100644 new mode 100755 index 85df8346437d6db9865ac7266b2da4ee10319465..634d35068f6853984a64ee61c080317d1d7b0c51 --- a/libs/shared/lib/data-access/store/graphQueryResultSlice.ts +++ b/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)); diff --git a/libs/shared/lib/data-access/store/schemaSlice.ts b/libs/shared/lib/data-access/store/schemaSlice.ts index 1ff1733fe36afa2c442e448f56ab4ff7d223a0db..3de89c98976313028a7686eb88d29ba75e046df3 100644 --- a/libs/shared/lib/data-access/store/schemaSlice.ts +++ b/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'); diff --git a/libs/shared/lib/schema/panel/schema.tsx b/libs/shared/lib/schema/panel/schema.tsx index 4165f4d25b81278679cb835376d2175b0fc8d11b..e82aaa42957a93da55c8caa03fbd43a030f86dd2 100644 --- a/libs/shared/lib/schema/panel/schema.tsx +++ b/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); diff --git a/libs/shared/lib/schema/panel/schemaDialog.tsx b/libs/shared/lib/schema/panel/schemaDialog.tsx index 46c10a721dbfb4b8370bd71605131177fee740f4..8dddeb6645de2b0a6e4e4d4a602b57eecb15a573 100644 --- a/libs/shared/lib/schema/panel/schemaDialog.tsx +++ b/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>