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);