Mercurial > code > home > repos > light9
annotate web/RdfdbSyncedGraph.ts @ 2445:af83aeef8b0a
fancier spectrograms
| author | drewp@bigasterisk.com |
|---|---|
| date | Sat, 01 Jun 2024 12:58:25 -0700 |
| parents | f2b3cfcc23d3 |
| children |
| rev | line source |
|---|---|
|
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
1 import debug from "debug"; |
| 2268 | 2 import { LitElement, css, html } from "lit"; |
|
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
3 import { customElement, property } from "lit/decorators.js"; |
|
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
4 import { SyncedGraph } from "./SyncedGraph"; |
|
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
5 |
|
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
6 const log = debug("syncedgraph-el"); |
|
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
7 |
| 2268 | 8 // Contains a SyncedGraph. Displays as little status box. |
| 9 // Put one element on your page and use getTopGraph everywhere. | |
| 2438 | 10 |
| 11 // todo; if you combine some pages and end up with 2+ elems, they still pick a | |
| 12 // leader (and repick if you remove that element). this could make it reasonable | |
| 13 // to have a lot more elems think they're the only ones talking to a graph. | |
| 14 // | |
| 15 // | |
| 2075 | 16 @customElement("rdfdb-synced-graph") |
| 17 export class RdfdbSyncedGraph extends LitElement { | |
| 18 @property() graph: SyncedGraph; | |
| 19 @property() status: string; | |
| 20 @property() testGraph = false; | |
| 21 static styles = [ | |
| 22 css` | |
| 23 :host { | |
| 24 display: inline-block; | |
| 25 border: 1px solid gray; | |
| 26 min-width: 22em; | |
| 27 background: #05335a; | |
| 28 color: #4fc1d4; | |
| 29 } | |
| 30 `, | |
| 31 ]; | |
| 32 render() { | |
| 33 return html`graph: ${this.status}`; | |
| 34 } | |
|
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
35 |
| 2075 | 36 constructor() { |
| 37 super(); | |
| 38 this.status = "startup"; | |
| 2087 | 39 const prefixes = new Map<string, string>([ |
| 40 ["", "http://light9.bigasterisk.com/"], | |
| 41 ["dev", "http://light9.bigasterisk.com/device/"], | |
|
2270
b51c74da9d35
more cleanup- mixed up with other commits
drewp@bigasterisk.com
parents:
2268
diff
changeset
|
42 ["effect", "http://light9.bigasterisk.com/effect/"], |
| 2087 | 43 ["rdf", "http://www.w3.org/1999/02/22-rdf-syntax-ns#"], |
| 44 ["rdfs", "http://www.w3.org/2000/01/rdf-schema#"], | |
| 45 ["xsd", "http://www.w3.org/2001/XMLSchema#"], | |
| 46 ]); | |
| 2075 | 47 this.graph = new SyncedGraph( |
|
2372
06bf6dae8e64
reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents:
2270
diff
changeset
|
48 this.testGraph ? "unused" : "/service/rdfdb/syncedGraph", |
| 2087 | 49 prefixes, |
| 2075 | 50 (s: string) => { |
| 51 this.status = s; | |
| 2268 | 52 } |
| 2075 | 53 ); |
| 54 setTopGraph(this.graph); | |
| 55 } | |
| 56 } | |
| 57 | |
| 2268 | 58 // todo: consider if this has anything to contribute: |
| 59 // https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md | |
| 60 let setTopGraph: (sg: SyncedGraph) => void; | |
| 61 (window as any).topSyncedGraph = new Promise<SyncedGraph>((res, rej) => { | |
| 62 setTopGraph = res; | |
| 63 }); | |
| 64 | |
| 2075 | 65 export async function getTopGraph(): Promise<SyncedGraph> { |
|
2074
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
66 const s = (window as any).topSyncedGraph; |
|
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
67 return await s; |
|
1a96f8647126
big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents:
1905
diff
changeset
|
68 } |