# HG changeset patch
# User drewp@bigasterisk.com
# Date 1715990306 25200
# Node ID 69ca2b2fc1335213ecf0c2bcc90ffc14cd925f29
# Parent  1d3594ffd14bce11a2ac407a3b9f3fec1dfff653
overcomplicated attempt at persisting the pane layout in the rdf graph

this was hard because we have to somehow wait for the graph to load before config'ing the panes

diff -r 1d3594ffd14b -r 69ca2b2fc133 web/TiledHome.ts
--- a/web/TiledHome.ts	Fri May 17 16:56:32 2024 -0700
+++ b/web/TiledHome.ts	Fri May 17 16:58:26 2024 -0700
@@ -7,6 +7,7 @@
 import { getTopGraph } from "./RdfdbSyncedGraph";
 import { SyncedGraph } from "./SyncedGraph";
 import { Patch } from "./patch";
+import { SimpleLayout, fullLayout, persistedLayout, simpleLayout } from "./tiledLayoutPersistence";
 import { NamedNode } from "n3";
 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
 export { Light9CollectorUi } from "./collector/Light9CollectorUi";
@@ -21,22 +22,7 @@
     tabEnableRename: false,
   },
   borders: [],
-  layout: {
-    type: "row",
-    weight: 100,
-    children: [
-      {
-        type: "tabset",
-        weight: 50,
-        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
-      },
-      {
-        type: "tabset",
-        weight: 50,
-        children: [{ type: "tab", name: "collector", component: "light9-collector-ui" }],
-      },
-    ],
-  },
+  layout: fullLayout(persistedLayout) as FlexLayout.IJsonRowNode,
 };
 
 // see https://github.com/lit/lit/tree/main/packages/labs/react
@@ -73,8 +59,40 @@
     super();
     getTopGraph().then((g) => {
       this.graph = g;
+      runHandlerAfterGraphLoads(this.graph, this.homeLayout.bind(this), "homeLayout");
     });
   }
+  homeLayout(patch?: Patch) {
+    const U = this.graph.U();
+    const s = U(":homeLayout");
+    const p = U(":config");
+    let cfg;
+
+    try {
+      cfg = this.graph.stringValue(s, p);
+    } catch (e) {
+      const ctx = new NamedNode(showRoot + "/homeLayout");
+      log(`no config in graph- adding one to `, ctx);
+      cfg = JSON.stringify(persistedLayout);
+      this.graph.patchObject(s, p, this.graph.Literal(cfg), ctx);
+    }
+    const fl = fullLayout(JSON.parse(cfg) as SimpleLayout);
+    log("got config", fl);
+  }
+}
+
+function runHandlerAfterGraphLoads(graph: SyncedGraph, handler: HandlerFunc, label: string) {
+  let patchesSeen = 0;
+  const wrapHandler = (patch?: Patch) => {
+    patchesSeen += 1;
+    if (patchesSeen == 2) {
+      handler(patch);
+    } else {
+      graph.objects(null, null);
+    }
+  };
+
+  graph.runHandler(wrapHandler, label);
 }
 
 const root = createRoot(document.getElementById("container")!);
diff -r 1d3594ffd14b -r 69ca2b2fc133 web/tiledLayoutPersistence.ts
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/tiledLayoutPersistence.ts	Fri May 17 16:58:26 2024 -0700
@@ -0,0 +1,79 @@
+// for persistence
+interface SimpleLayoutTab {
+  type: "tab";
+  light9Element: string;
+}
+export interface SimpleLayout {
+  type: string;
+  weight?: number;
+  children: (SimpleLayout | SimpleLayoutTab)[];
+}
+// for FlexLayout
+interface FullLayoutTab {
+  type: "tab";
+  name: string;
+  component: string;
+}
+interface FullLayout {
+  type: string;
+  weight?: number;
+  children: (FullLayout | FullLayoutTab)[];
+}
+function tabConfigFromSimpleTabName(name: string): FullLayoutTab {
+  return { type: "tab", name: name.replace(/^light9-/, ""), component: name };
+}
+export function simpleLayout(full: FullLayout | FullLayoutTab): SimpleLayout | SimpleLayoutTab {
+  if (full.type == "tab") {
+    return { type: "tab", light9Element: (full as FullLayoutTab).component };
+  } else {
+    return { ...(full as FullLayout), children: (full as FullLayout).children.map(simpleLayout) };
+  }
+}
+export function fullLayout(simple: SimpleLayout | SimpleLayoutTab): FullLayout | FullLayoutTab {
+  if (simple.type == "tab") {
+    return tabConfigFromSimpleTabName((simple as SimpleLayoutTab).light9Element);
+  } else {
+    return { ...(simple as SimpleLayout), children: (simple as SimpleLayout).children.map(fullLayout) };
+  }
+}
+export const persistedLayout: SimpleLayout = {
+  type: "row",
+  children: [
+    // {
+    //   type: "tabset",
+    //   weight: 50,
+    //   children: [
+    //     {
+    //       type: "tab",
+    //       light9Element: "light9-device-settings",
+    //     },
+    //   ],
+    // },
+    // {
+    //   type: "row",
+    //   weight: 50,
+    //   children: [
+    //     {
+    //       type: "tabset",
+    //       weight: 50,
+    //       children: [
+    //         {
+    //           type: "tab",
+    //           light9Element: "light9-fade-ui",
+    //         },
+    //       ],
+    //     },
+    //     {
+    //       type: "tabset",
+    //       weight: 50,
+    //       children: [
+    //         {
+    //           type: "tab",
+    //           light9Element: "light9-collector-ui",
+    //         },
+    //       ],
+    //     },
+    //   ],
+    // },
+  ],
+};