wip form

apps/web/src/sidebar/graph-configuration/GraphConfiguration.tsx

@@ -13,6 +13,7 @@ import {
 import { createFormContext } from "@mantine/form";
 import { callUseCase } from "@/store/store";
 import { updateConfiguration } from "@/core/network/update-configuration";
+import { useStoreSelect } from "@/store/react-bindings";
 
 const availableLayouts = ["cluster", "hierarchical"] as const;
 type AvailableLayouts = (typeof availableLayouts)[number];
@@ -94,13 +95,18 @@ function GraphOptions({ layout }: { layout: AvailableLayouts }) {
 }
 
 export function GraphConfiguration() {
+  const network = useStoreSelect("ui", "network");
   const [selectedLayout, setSelectedLayout] =
     React.useState<AvailableLayouts>("cluster");
 
+  React.useEffect(() => {
+    console.log("mount");
+  }, []);
+
   const form = useForm({
     initialValues: {
       layout: {
-        selected: "cluster",
+        selected: network?.layout.type,
         cluster: {
           spacing_algorithm: "repulsion",
           node_spacing: 40,
@@ -141,8 +147,8 @@ export function GraphConfiguration() {
 
               <SegmentedControl
                 mt="md"
-                defaultValue={selectedLayout}
                 {...form.getInputProps("layout.selected")}
+                defaultValue={network?.layout.type ?? selectedLayout}
                 onChange={(value) => {
                   setSelectedLayout(value as AvailableLayouts);
                   form.getInputProps("layout.selected").onChange(value);

apps/web/src/store/react-bindings.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { map } from "rxjs";
+import { map, tap } from "rxjs";
 
 import { AppEffects, AppStore, AppStoreInstance } from "./store";
 import { AppState } from "./state";