streamed-graph: src/layout/StreamedGraphClient.ts annotate

annotate src/layout/StreamedGraphClient.ts @ 128:5a1a79f54779

big rewrite

author	drewp@bigasterisk.com
date	Fri, 05 May 2023 21:26:36 -0700
parents	042bd3361339
children

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

Mercurial > code > home > repos > streamed-graph

annotate src/layout/StreamedGraphClient.ts @ 128:5a1a79f54779