Mercurial > code > home > repos > light9
annotate web/TiledHome.ts @ 2405:69ca2b2fc133
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
| author | drewp@bigasterisk.com |
|---|---|
| date | Fri, 17 May 2024 16:58:26 -0700 |
| parents | 1d3594ffd14b |
| children | 6697a68800d2 |
| rev | line source |
|---|---|
| 2402 | 1 import debug from "debug"; |
| 2 import * as FlexLayout from "flexlayout-react"; | |
| 3 import { LitElement, html } from "lit"; | |
| 4 import { customElement } from "lit/decorators.js"; | |
| 2374 | 5 import * as React from "react"; |
| 6 import { createRoot } from "react-dom/client"; | |
| 2402 | 7 import { getTopGraph } from "./RdfdbSyncedGraph"; |
| 8 import { SyncedGraph } from "./SyncedGraph"; | |
| 9 import { Patch } from "./patch"; | |
|
2405
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
10 import { SimpleLayout, fullLayout, persistedLayout, simpleLayout } from "./tiledLayoutPersistence"; |
| 2402 | 11 import { NamedNode } from "n3"; |
| 12 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph"; | |
| 13 export { Light9CollectorUi } from "./collector/Light9CollectorUi"; | |
| 14 export { Light9FadeUi } from "./fade/Light9FadeUi"; | |
| 2374 | 15 export { Light9DeviceSettings } from "./live/Light9DeviceSettings"; |
| 2402 | 16 import { showRoot } from "./show_specific"; |
| 17 import { HandlerFunc } from "./AutoDependencies"; | |
| 18 const log = debug("home"); | |
| 2374 | 19 |
| 2382 | 20 const config: FlexLayout.IJsonModel = { |
| 2402 | 21 global: { |
| 22 tabEnableRename: false, | |
| 23 }, | |
| 2374 | 24 borders: [], |
|
2405
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
25 layout: fullLayout(persistedLayout) as FlexLayout.IJsonRowNode, |
| 2374 | 26 }; |
| 27 | |
| 28 // see https://github.com/lit/lit/tree/main/packages/labs/react | |
| 29 | |
| 30 class Main extends React.Component { | |
| 2382 | 31 state: { model: FlexLayout.Model }; |
| 32 constructor(props: any) { | |
| 2374 | 33 super(props); |
| 34 this.state = { model: FlexLayout.Model.fromJson(config) }; | |
| 35 } | |
| 36 | |
| 2382 | 37 factory = (node: any) => { |
| 2374 | 38 var component = node.getComponent(); |
| 2402 | 39 return React.createElement(component, null, ""); |
| 2374 | 40 }; |
| 41 | |
| 42 render() { | |
| 2402 | 43 return React.createElement(FlexLayout.Layout, { |
| 44 model: this.state.model, | |
| 45 realtimeResize: true, | |
| 46 factory: this.factory, | |
| 47 }); | |
| 48 } | |
| 49 } | |
| 50 | |
| 51 @customElement("light9-home-status") | |
| 52 export class Light9HomeStatus extends LitElement { | |
| 53 graph!: SyncedGraph; | |
| 54 render() { | |
| 55 return html`<rdfdb-synced-graph></rdfdb-synced-graph> | |
| 56 <a href="metrics/">metrics</a> `; | |
| 57 } | |
| 58 constructor() { | |
| 59 super(); | |
| 60 getTopGraph().then((g) => { | |
| 61 this.graph = g; | |
|
2405
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
62 runHandlerAfterGraphLoads(this.graph, this.homeLayout.bind(this), "homeLayout"); |
| 2402 | 63 }); |
| 2374 | 64 } |
|
2405
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
65 homeLayout(patch?: Patch) { |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
66 const U = this.graph.U(); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
67 const s = U(":homeLayout"); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
68 const p = U(":config"); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
69 let cfg; |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
70 |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
71 try { |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
72 cfg = this.graph.stringValue(s, p); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
73 } catch (e) { |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
74 const ctx = new NamedNode(showRoot + "/homeLayout"); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
75 log(`no config in graph- adding one to `, ctx); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
76 cfg = JSON.stringify(persistedLayout); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
77 this.graph.patchObject(s, p, this.graph.Literal(cfg), ctx); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
78 } |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
79 const fl = fullLayout(JSON.parse(cfg) as SimpleLayout); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
80 log("got config", fl); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
81 } |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
82 } |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
83 |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
84 function runHandlerAfterGraphLoads(graph: SyncedGraph, handler: HandlerFunc, label: string) { |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
85 let patchesSeen = 0; |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
86 const wrapHandler = (patch?: Patch) => { |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
87 patchesSeen += 1; |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
88 if (patchesSeen == 2) { |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
89 handler(patch); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
90 } else { |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
91 graph.objects(null, null); |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
92 } |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
93 }; |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
94 |
|
69ca2b2fc133
overcomplicated attempt at persisting the pane layout in the rdf graph
drewp@bigasterisk.com
parents:
2402
diff
changeset
|
95 graph.runHandler(wrapHandler, label); |
| 2374 | 96 } |
| 97 | |
| 98 const root = createRoot(document.getElementById("container")!); | |
| 99 root.render(React.createElement(Main)); |