Mercurial > code > home > repos > light9

--- a/web/TiledHome.ts	Fri May 17 16:54:12 2024 -0700
+++ b/web/TiledHome.ts	Fri May 17 16:56:32 2024 -0700
@@ -1,11 +1,25 @@
+import debug from "debug";
+import * as FlexLayout from "flexlayout-react";
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
 import * as React from "react";
 import { createRoot } from "react-dom/client";
-import * as FlexLayout from "flexlayout-react";
+import { getTopGraph } from "./RdfdbSyncedGraph";
+import { SyncedGraph } from "./SyncedGraph";
+import { Patch } from "./patch";
+import { NamedNode } from "n3";
+export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
+export { Light9CollectorUi } from "./collector/Light9CollectorUi";
+export { Light9FadeUi } from "./fade/Light9FadeUi";
 export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
-export { Light9CollectorUi } from "./collector/Light9CollectorUi";
+import { showRoot } from "./show_specific";
+import { HandlerFunc } from "./AutoDependencies";
+const log = debug("home");

 const config: FlexLayout.IJsonModel = {
-  global: {},
+  global: {
+    tabEnableRename: false,
+  },
   borders: [],
   layout: {
     type: "row",
@@ -25,8 +39,6 @@
   },
 };

-const e = React.createElement;
-
 // see https://github.com/lit/lit/tree/main/packages/labs/react

 class Main extends React.Component {
@@ -38,11 +50,30 @@

   factory = (node: any) => {
     var component = node.getComponent();
-    return e(component, null, "");
+    return React.createElement(component, null, "");
   };

   render() {
-    return e(FlexLayout.Layout, { model: this.state.model, factory: this.factory });
+    return React.createElement(FlexLayout.Layout, {
+      model: this.state.model,
+      realtimeResize: true,
+      factory: this.factory,
+    });
+  }
+}
+
+@customElement("light9-home-status")
+export class Light9HomeStatus extends LitElement {
+  graph!: SyncedGraph;
+  render() {
+    return html`<rdfdb-synced-graph></rdfdb-synced-graph>
+      <a href="metrics/">metrics</a> `;
+  }
+  constructor() {
+    super();
+    getTopGraph().then((g) => {
+      this.graph = g;
+    });
   }
 }
--- a/web/index.html	Fri May 17 16:54:12 2024 -0700
+++ b/web/index.html	Fri May 17 16:56:32 2024 -0700
@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <link rel="stylesheet" href="style.css" />
     <link rel="stylesheet" href="flexlayout-react/style/dark.css" />
-    <script type="module" src="TiledHome.ts"></script>
+    <script type="module" src="TiledHome"></script>
   </head>
   <body>
     <style>
@@ -20,9 +20,7 @@
         box-shadow: black 0px -7px 9px 0px;
       }
     </style>
-    <div id="container">hello</div>
-    <div id="footer">
-      <a href="metrics/">metrics</a>
-    </div>
+    <div id="container">loading layout...</div>
+    <div id="footer"><light9-home-status></light9-home-status> </div>
   </body>
 </html>