Mercurial > code > home > repos > streamed-graph
comparison src/streamed_graph_client.ts @ 8:6fefd287aff9
closer- element now holds a changing graph, but can't draw it yet
author | drewp@bigasterisk.com |
---|---|
date | Thu, 05 Dec 2019 01:32:13 -0800 |
parents | a5bc13dcce41 |
children | 26d3e4860adc |
comparison
equal
deleted
inserted
replaced
7:daf08d794660 | 8:6fefd287aff9 |
---|---|
1 // from /my/site/homepage/www/rdf/streamed-graph.js | 1 // from /my/site/homepage/www/rdf/streamed-graph.js |
2 | 2 |
3 import * as async from "async"; | 3 import * as async from "async"; |
4 import * as jsonld from "jsonld"; | 4 // import * as jsonld from "jsonld"; |
5 | 5 |
6 //import eachJsonLdQuad from "./json_ld_quads"; | 6 import { eachJsonLdQuad } from "./json_ld_quads"; |
7 import { Store, DataFactory } from "n3" | 7 import { Store, DataFactory } from "n3" |
8 | 8 |
9 /// <reference types="eventsource" /> | 9 // /// <reference types="eventsource" /> |
10 const EventSource = window.EventSource; | 10 // const EventSource = window.EventSource; |
11 | 11 |
12 export class StreamedGraphClient { | 12 export class StreamedGraphClient { |
13 // holds a n3 Store, which is synced to a server-side | |
14 // store that sends patches over SSE | |
15 | |
13 onStatus: (msg: string) => void; | 16 onStatus: (msg: string) => void; |
14 onGraphChanged: () => void; | 17 onGraphChanged: () => void; |
15 store: Store; | 18 store: Store; |
16 events: EventSource; | 19 events: EventSource; |
17 constructor( | 20 constructor( |
19 onGraphChanged: () => void, | 22 onGraphChanged: () => void, |
20 onStatus: (status: string) => void, | 23 onStatus: (status: string) => void, |
21 prefixes: Array<Record<string, string>>, | 24 prefixes: Array<Record<string, string>>, |
22 staticGraphUrls: Array<string>) { | 25 staticGraphUrls: Array<string>) { |
23 console.log('new StreamedGraph', eventsUrl); | 26 console.log('new StreamedGraph', eventsUrl); |
24 // holds a n3 Store, which is synced to a server-side | |
25 // store that sends patches over SSE | |
26 this.onStatus = onStatus; | 27 this.onStatus = onStatus; |
27 this.onGraphChanged = onGraphChanged; | 28 this.onGraphChanged = onGraphChanged; |
28 this.onStatus('startup...'); | 29 this.onStatus('startup...'); |
29 | 30 |
30 this.store = new Store({}); | 31 this.store = new Store({}); |
58 if (this.events && this.events.readyState != EventSource.CLOSED) { | 59 if (this.events && this.events.readyState != EventSource.CLOSED) { |
59 this.onStatus('zombie'); | 60 this.onStatus('zombie'); |
60 throw new Error("zombie eventsource"); | 61 throw new Error("zombie eventsource"); |
61 } | 62 } |
62 | 63 |
63 | |
64 this.events = new EventSource(eventsUrl); | 64 this.events = new EventSource(eventsUrl); |
65 | 65 |
66 this.events.addEventListener('error', (ev) => { | 66 this.events.addEventListener('error', (ev) => { |
67 // todo: this is piling up tons of retries and eventually multiple connections | 67 // todo: this is piling up tons of retries and eventually multiple connections |
68 // this.testEventUrl(eventsUrl); | 68 // this.testEventUrl(eventsUrl); |
75 }); | 75 }); |
76 | 76 |
77 this.events.addEventListener('fullGraph', (ev) => { | 77 this.events.addEventListener('fullGraph', (ev) => { |
78 this.onStatus('sync- full graph update'); | 78 this.onStatus('sync- full graph update'); |
79 let onReplaced = () => { | 79 let onReplaced = () => { |
80 this.onStatus('synced'); | 80 this.onStatus(`synced ${this.store.size}`); |
81 this.onGraphChanged(); | 81 this.onGraphChanged(); |
82 }; | 82 }; |
83 this.replaceFullGraph(ev.data, onReplaced); | 83 this.replaceFullGraph(ev.data, onReplaced); |
84 }); | 84 }); |
85 | 85 |
86 this.events.addEventListener('patch', (ev) => { | 86 this.events.addEventListener('patch', (ev) => { |
87 this.onStatus('sync- updating'); | 87 this.onStatus('sync- updating'); |
88 let onPatched = () => { | 88 let onPatched = () => { |
89 this.onStatus('synced'); | 89 this.onStatus(`synced ${this.store.size}`); |
90 this.onGraphChanged(); | 90 this.onGraphChanged(); |
91 }; | 91 }; |
92 this.patchGraph(ev.data, onPatched); | 92 this.patchGraph(ev.data, onPatched); |
93 }); | 93 }); |
94 this.onStatus('connecting...'); | 94 this.onStatus('connecting...'); |
95 } | 95 } |
96 | 96 |
97 replaceFullGraph(jsonLdText: string, done: () => void) { | 97 replaceFullGraph(jsonLdText: string, done: () => void) { |
98 // this.quadStore.clear(); | 98 this.store = new Store({}); |
99 // eachJsonLdQuad(this.store.rdf, JSON.parse(jsonLdText), | 99 eachJsonLdQuad(JSON.parse(jsonLdText), |
100 // this.quadStore.add.bind(this.quadStore), function () { | 100 this.store.addQuad.bind(this.store), |
101 // done(); | 101 done); |
102 // }); | |
103 // or this.store.insert([quad], quad.graph, function() {}); | |
104 } | 102 } |
105 | 103 |
106 patchGraph(patchJson: string, done: () => void) { | 104 patchGraph(patchJson: string, done: () => void) { |
107 var patch = JSON.parse(patchJson).patch; | 105 var patch = JSON.parse(patchJson).patch; |
108 | 106 |
109 async.series([ | 107 async.series([ |
110 // (done) => { | |
111 // eachJsonLdQuad(this.store.rdf, patch.deletes, | |
112 // this.quadStore.remove.bind(this.quadStore), done); | |
113 // }, | |
114 (done) => { | 108 (done) => { |
115 // eachJsonLdQuad(this.store.rdf, patch.adds, | 109 eachJsonLdQuad(patch.deletes, |
116 // this.quadStore.add.bind(this.quadStore), done); | 110 this.store.removeQuad.bind(this.store), done); |
111 }, | |
112 (done) => { | |
113 eachJsonLdQuad(patch.adds, | |
114 this.store.addQuad.bind(this.store), done); | |
117 }, | 115 }, |
118 /* seriesDone */ (done) => { | 116 /* seriesDone */ (done) => { |
119 done(); | 117 done(); |
120 } | 118 } |
121 ], done); | 119 ], done); |