--- a/web/TiledHome.ts	Fri May 17 17:41:22 2024 -0700
+++ b/web/TiledHome.ts	Sat May 18 21:02:32 2024 -0700
@@ -1,40 +1,15 @@
 import debug from "debug";
 import * as FlexLayout from "flexlayout-react";
-import { LitElement, html } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import { getTopGraph } from "./RdfdbSyncedGraph";
 import { SyncedGraph } from "./SyncedGraph";
+import { panelDisplayName, panelElementNames, panelUrl } from "./panels";
 export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
-export { Light9CollectorUi } from "./collector/Light9CollectorUi";
-export { Light9FadeUi } from "./fade/Light9FadeUi";
-export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
 const log = debug("home");
 
-const config: FlexLayout.IJsonModel = {
-  global: {
-    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" }],
-      },
-    ],
-  },
-};
-
 // see https://github.com/lit/lit/tree/main/packages/labs/react
 
 // Store flexlayout panels in per-browser localstorage.
@@ -46,7 +21,7 @@
       {
         type: "tabset",
         weight: 50,
-        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
+        children: [{ type: "tab", name: "fade", component: "light9-fade-ui" }],
       },
       {
         type: "tabset",
@@ -68,6 +43,9 @@
   }
 }
 
+// This lets lit call a method on a react element.
+let addTab: (component: string) => void;
+
 class Main extends React.Component {
   state: { model: FlexLayout.Model; persistence: PersistentLayout };
   constructor(props: any) {
@@ -90,6 +68,15 @@
   };
 
   render() {
+    addTab = (component) => {
+      const name = panelDisplayName(component);
+      if (name === undefined) throw new Error("no such panel: " + component);
+      const newTab = { type: "tab", name: name, component: component };
+      const firstTabSet = this.state.model.getRoot().getChildren()[0];
+      const action = FlexLayout.Actions.addNode(newTab, firstTabSet.getId(), FlexLayout.DockLocation.LEFT, 0);
+      this.state.model.doAction(action);
+    };
+
     return React.createElement(FlexLayout.Layout, {
       model: this.state.model,
       realtimeResize: true,
@@ -107,15 +94,31 @@
 export class Light9HomeStatus extends LitElement {
   graph!: SyncedGraph;
   render() {
-    return html`<rdfdb-synced-graph></rdfdb-synced-graph>
-      <a href="metrics/">metrics</a> `;
+    return html`
+      <rdfdb-synced-graph></rdfdb-synced-graph>
+      <a href="metrics/">metrics</a>
+      Open tab or new window: ${panelElementNames().map((elem) => this.linkToPanelPage(elem))}
+    `;
   }
+
+  linkToPanelPage(elem: string): TemplateResult {
+    return html`<a @click=${this.onClickPanelLink} data-panel-elem="${elem}" href=${panelUrl(elem)}> ${panelDisplayName(elem)} </a> `;
+  }
+
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
     });
   }
+
+  onClickPanelLink(ev: MouseEvent) {
+    ev.preventDefault();
+
+    const a = ev.target as HTMLAnchorElement;
+    const elem = a.dataset.panelElem!;
+    addTab(elem);
+  }
 }
 
 const root = createRoot(document.getElementById("container")!);

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web/panels.ts	Sat May 18 21:02:32 2024 -0700
@@ -0,0 +1,29 @@
+export { Light9AscoltamiUi } from "./ascoltami/Light9AscoltamiUi";
+export { Light9CollectorUi } from "./collector/Light9CollectorUi";
+export { Light9EffectListing } from "./effects/Light9EffectListing";
+export { Light9FadeUi } from "./fade/Light9FadeUi";
+export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
+
+const panels: Map<string, Array<string>> = new Map([
+  ["light9-ascoltami-ui", ["ascoltami", "ascoltami"]],
+  ["light9-collector-ui", ["collector", "collector"]],
+  ["light9-device-settings", ["device-settings", "live"]],
+  ["light9-effect-listing", ["effect-listing" , "effectListing"]],
+  ["light9-fade-ui", ["fade", "fade"]],
+]);
+
+export function panelElementNames(): string[] {
+  return Array.from(panels.keys());
+}
+
+export function panelUrl(elem: string): string {
+    const row = panels.get(elem);
+    if (!row) throw new Error("No panel: " + elem);
+    return "/" + row[1] + "/";
+  }
+
+export function panelDisplayName(elem: string): string {
+    const row = panels.get(elem);
+    if (!row) throw new Error("No panel: " + elem);
+    return row[0];
+}  
\ No newline at end of file