streamed-graph: src/layout/streamed_graph

annotate src/layout/streamed_graph_client.ts @ 106:2468f2227d22

make src/layout/ and src/render/ separation

author	drewp@bigasterisk.com
date	Sun, 13 Mar 2022 22:00:30 -0700
parents	src/streamed_graph_client.ts@910e2037d72d
children

rev	line source
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	1 import { eachJsonLdQuad } from "./json_ld_quads";
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	2 import { Store } from "n3";
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	3
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	4 export class StreamedGraphClient {
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	5 // holds a n3 Store, which is synced to a server-side
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	6 // store that sends patches over SSE
8 6fefd287aff9 closer- element now holds a changing graph, but can't draw it yet drewp@bigasterisk.com parents: 6 diff changeset	7
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	8 onStatus: (msg: string) => void = function (m) {};
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	9 onGraphChanged: () => void = function () {};
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	10 store: Store;
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	11 _deletedCount: number = 0;
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	12 events!: EventSource;
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	13 constructor(
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	14 eventsUrl: string,
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	15 onGraphChanged: () => void,
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	16 onStatus: (status: string) => void,
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	17 prefixes: Array<Record<string, string>>,
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	18 staticGraphUrls: Array<string>
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	19 ) {
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	20 console.log("new StreamedGraph", eventsUrl);
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	21 this.onStatus = onStatus;
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	22 this.onGraphChanged = onGraphChanged;
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	23 this.onStatus("startup...");
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	24
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	25 this.store = new Store();
36 8b4dc9e87b56 reindent to 2-spaces with prettier drewp@bigasterisk.com parents: 20 diff changeset	26
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	27 // Object.keys(prefixes).forEach((prefix) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	28 // this.store.setPrefix(prefix, prefixes[prefix]);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	29 // });
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	30
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	31 this.connect(eventsUrl);
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	32 this.reconnectOnWake();
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	33
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	34 // staticGraphUrls.forEach((url) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	35 // fetch(url).then((response) => response.text())
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	36 // .then((body) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	37 // // parse with n3, add to output
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	38 // });
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	39 // });
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	40 }
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	41
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	42 _vacuum() {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	43 // workaround for the growing _ids map
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	44 this.store = new Store(this.store.getQuads(null, null, null, null));
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	45 }
67 163b4339804d try addressing decreasing performance by rebuilding the graph occasionally drewp@bigasterisk.com parents: 36 diff changeset	46
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	47 reconnectOnWake() {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	48 // it's not this, which fires on every mouse-in on a browser window, and doesn't seem to work for screen-turned-back-on
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	49 //window.addEventListener('focus', function() { this.connect(eventsUrl); }.bind(this));
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	50 }
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	51
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	52 connect(eventsUrl: string) {
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	53 // need to exit here if this obj has been replaced
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	54
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	55 this.onStatus("start connect...");
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	56 this.close();
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	57 if (this.events && this.events.readyState != EventSource.CLOSED) {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	58 this.onStatus("zombie");
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	59 throw new Error("zombie eventsource");
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	60 }
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	61
87 910e2037d72d SSE withCredentials: true drewp@bigasterisk.com parents: 82 diff changeset	62 this.events = new EventSource(eventsUrl, { withCredentials: true });
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	63
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	64 this.events.addEventListener("error", (ev) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	65 // todo: this is piling up tons of retries and eventually multiple connections
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	66 this.testEventUrl(eventsUrl);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	67 this.onStatus("connection lost- retrying");
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	68 setTimeout(() => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	69 requestAnimationFrame(() => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	70 this.connect(eventsUrl);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	71 });
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	72 }, 3000);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	73 });
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	74
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	75 this.events.addEventListener("fullGraph", async (ev) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	76 this.onStatus("sync- full graph update");
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	77 await this.replaceFullGraph((ev as MessageEvent).data);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	78 this.onStatus(`synced ${this.store.size}`);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	79 this.onGraphChanged();
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	80 });
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	81
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	82 this.events.addEventListener("patch", async (ev) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	83 this.onStatus("sync- updating");
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	84 await this.patchGraph((ev as MessageEvent).data);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	85 window.setTimeout(() => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	86 this.onStatus(`synced ${this.store.size}`);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	87 }, 60);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	88 this.onGraphChanged();
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	89 });
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	90 this.onStatus("connecting...");
7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	91 }
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	92
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	93 // these need some locks
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	94 async replaceFullGraph(jsonLdText: string) {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	95 this.store = new Store();
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	96 await eachJsonLdQuad(
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	97 JSON.parse(jsonLdText),
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	98 this.store.addQuad.bind(this.store)
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	99 );
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	100 }
5 8aa42fa04b17 enable more code drewp@bigasterisk.com parents: 4 diff changeset	101
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	102 async patchGraph(patchJson: string) {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	103 var patch = JSON.parse(patchJson).patch;
3 a7ba8627a7b6 still trying to make imports work. add other files too drewp@bigasterisk.com parents: diff changeset	104
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	105 await eachJsonLdQuad(patch.deletes, (quad) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	106 this.store.removeQuad(quad);
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	107 this._deletedCount++;
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	108 });
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	109 await eachJsonLdQuad(patch.adds, this.store.addQuad.bind(this.store));
67 163b4339804d try addressing decreasing performance by rebuilding the graph occasionally drewp@bigasterisk.com parents: 36 diff changeset	110
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	111 if (this._deletedCount > 100) {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	112 this._vacuum();
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	113 this._deletedCount = 0;
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	114 }
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	115 }
36 8b4dc9e87b56 reindent to 2-spaces with prettier drewp@bigasterisk.com parents: 20 diff changeset	116
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	117 close() {
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	118 if (this.events) {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	119 this.events.close();
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	120 }
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	121 }
5 8aa42fa04b17 enable more code drewp@bigasterisk.com parents: 4 diff changeset	122
82 43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	123 async testEventUrl(eventsUrl: string): Promise<void> {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	124 return new Promise<void>((resolve, reject) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	125 this.onStatus("testing connection");
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	126 fetch(eventsUrl, {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	127 method: "HEAD",
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	128 credentials: "include",
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	129 })
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	130 .then((value) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	131 if (value.status == 403) {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	132 reject();
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	133 return;
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	134 }
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	135 resolve();
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	136 })
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	137 .catch((err) => {
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	138 reject();
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	139 });
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	140 });
43e016fa302e client now works again, reads graph events drewp@bigasterisk.com parents: 80 diff changeset	141 }
80 7c93e17b1111 more fixes, more original code uncommented drewp@bigasterisk.com parents: 79 diff changeset	142 }

Mercurial > code > home > repos > streamed-graph

annotate src/layout/streamed_graph_client.ts @ 106:2468f2227d22