Skip to content

Commit a044a97

Browse files
wildonewildone
committed
update handling of event data and ensure new event listeners are reused for same events.
1 parent 01d38c0 commit a044a97

File tree

1 file changed

+95
-44
lines changed

1 file changed

+95
-44
lines changed

‎src/js/widget.js

+95-44
Original file line numberDiff line numberDiff line change
@@ -11,64 +11,110 @@ window.Widgets.Widget = {};
1111

1212

1313
ns.scratch = '/viz-data/unattached-force-graph';
14+
15+
//keep track of all listeners and callbacks.
16+
ns.listeners = new Map();
1417

15-
ns.raiseEventDataRequest = function(eventName, topics = [], action, id, callbackFn) {
18+
ns.raiseEventDataRequest = function(eventName, topics = [], eventAction, id, callbackFn) {
1619
console.group(`raiseEventDataRequest on ${window.location}`);
17-
const componentId = `${eventName}-${action}-${id}`;
20+
const componentId = `${id}-${eventName}-${eventAction}`;
1821
const payload = {
19-
action: action,
22+
action: eventAction,
2023
id: id,
2124
type: 'load'
2225
}
2326
const config = "";
2427

25-
console.log("compileEventData", payload, eventName, action, id, config);
26-
const data = eventsNs.compileEventData(payload, eventName, "DATA_REQUEST", componentId, config);
27-
28-
console.log("raiseEvent", eventName, data);
29-
30-
eventsNs.raiseEvent(eventName, data);
28+
console.log("compileEventData", payload, eventName, eventAction, id, config);
29+
const eventCompileData = eventsNs.compileEventData(payload, eventName, "DATA_REQUEST", componentId, config);
3130

31+
//add callback first
32+
//make sure callback is unique for each listener, event name and action combination.
3233
if (callbackFn) {
33-
eventsNs.windowListener((eventData) => {
34-
console.group(`windowListener on ${window.location}`);
35-
console.log(eventData);
36-
const dataEventName = eventData.type || eventData.topicName;
37-
const { type, topicName, payload, action, componentId, config } = eventData;
38-
const data = eventData.data
39-
console.log(["eventName", eventName]);
40-
console.log(["dataEventName", dataEventName]);
41-
console.log(["match", dataEventName === eventName]);
42-
console.log(["type", type]);
43-
console.log(["topicName", topicName]);
44-
console.log(["payload", payload]);
45-
console.log(["action", action]);
46-
console.log(["componentId", componentId]);
47-
console.log(["config", config]);
48-
if (dataEventName === eventName || topics.includes(dataEventName)) {
49-
console.log(["eventName match, exec allback."]);
50-
callbackFn(data);
51-
} else {
52-
console.log(["eventName not match. ignore."]);
34+
console.log("CallbackFn passed.");
35+
if (ns.listeners.has(componentId)) {
36+
console.log("listener already exists, removing.");
37+
const listener = ns.listeners.get(componentId);
38+
if (listener.callbackFn === callbackFn) {
39+
console.log("callbackFn match.");
5340
}
54-
console.groupEnd();
55-
});
41+
} else {
42+
console.log("listener does not exist, adding.");
43+
ns.listeners.set(componentId,{
44+
componentId: componentId,
45+
eventAction: eventAction,
46+
topics: topics,
47+
eventName: eventName,
48+
id: id,
49+
callbackFn: callbackFn
50+
})
51+
52+
eventsNs.windowListener((eventData) => {
53+
console.group(`windowListener on ${window.location}`);
54+
console.log(eventData);
55+
const dataEventName = eventData.type || eventData.topicName;
56+
const { type, topicName, payload, action, componentId, config } = eventData;
57+
const configAction = (config && config["action"]) ? config.action : "";
58+
const data = eventData.data;
59+
const eventPayload = eventData.payload;
60+
const eventPayloadAction = (eventPayload && eventPayload["action"]) ? eventPayload.action : "";
61+
const eventMatch = dataEventName === eventName || topics.includes(dataEventName) || action === eventAction || configAction === eventAction;
62+
console.log(["eventName", eventName]);
63+
console.log(["eventAction", eventAction]);
64+
console.log(["configAction", configAction]);
65+
console.log(["eventPayloadAction", eventPayloadAction]);
66+
console.log(["dataEventName", dataEventName]);
67+
console.log(["data", data]);
68+
console.log(["match", eventMatch]);
69+
console.log(["type", type]);
70+
console.log(["topicName", topicName]);
71+
console.log(["payload", payload]);
72+
console.log(["action", action]);
73+
console.log(["componentId", componentId]);
74+
console.log(["config", config]);
75+
if (eventMatch) {
76+
console.log(["eventName match, exec allback."]);
77+
ns.listeners.get(componentId).callbackFn(eventData);
78+
//callbackFn(data);
79+
} else {
80+
console.log(["eventName not match. ignore."]);
81+
}
82+
console.groupEnd();
83+
});
84+
console.log("windowListener added", componentId, ns.listeners);
85+
}
5686
}
87+
88+
//then raise event
89+
console.log("raiseEvent", eventName, eventCompileData);
90+
eventsNs.raiseEvent(eventName, eventCompileData);
91+
console.log("raiseEvent done", eventName);
92+
5793
console.groupEnd();
5894
}
5995

6096
ns.requestData = function() {
6197
console.group(`requestData on ${window.location}`);
6298

6399
// request tree data
64-
console.log("request tree data");
100+
// console.log("request tree data");
65101

66102

67-
console.log("request filter data");
103+
console.log("request data");
68104
//request panel data
69-
ns.raiseEventDataRequest("embed-viz-event-payload-data-unattached-force-graph", ["embed-viz-event-payload-data-unattached-force-graph"], "load_data", "scratch", (data) => {
70-
console.log("raiseEventDataRequest callback loadData scratch", data);
71-
ns.loadData(data);
105+
ns.raiseEventDataRequest("embed-viz-event-payload-data-unattached-force-graph", ["embed-viz-event-payload-data-unattached-force-graph"], "load_data", "scratch", (eventData) => {
106+
console.log("raiseEventDataRequest callback loadData scratch", eventData);
107+
if (eventData) {
108+
if (eventData.error) {
109+
console.error(eventData.error);
110+
return;
111+
}
112+
if (eventData.data) {
113+
ns.loadData(eventData.data);
114+
} else {
115+
console.error("No data found");
116+
}
117+
}
72118
});
73119
console.log("requestData done");
74120

@@ -109,10 +155,15 @@ window.Widgets.Widget = {};
109155
console.log(["action", action]);
110156
console.log(["componentId", componentId]);
111157
console.log(["config", config]);
112-
// if (type === 'embed-viz-event-payload-data1') {
113-
// console.log(["action match, loading data."]);
114-
// ns.loadData(data);
115-
// }
158+
159+
// listen for specific event
160+
if (action === "DATA_REFRESH") {
161+
console.log(["action match, data has changed refreshing data."]);
162+
ns.requestData();
163+
} else {
164+
console.log(["action not match, ignore."]);
165+
}
166+
116167
console.groupEnd();
117168
});
118169

@@ -175,10 +226,6 @@ window.Widgets.Widget = {};
175226

176227
panelScratchNs.init($scratch_panel, window.Widgets.Panel.Utils.options);
177228

178-
179-
// add event listener
180-
//ns.addEventListener($component, window.Widgets.Panel.Utils.options);
181-
182229
console.log("requestData");
183230
// send event to parent to get data
184231
ns.requestData();
@@ -187,6 +234,10 @@ window.Widgets.Widget = {};
187234
$component.on('mouseover', function() {
188235
panelUtilsNs.hideTooltip();
189236
});
237+
238+
// add event listener to liste to other events.
239+
ns.addEventListener($component, window.Widgets.Panel.Utils.options);
240+
190241
console.log("widget.init done");
191242
console.groupEnd();
192243
};

0 commit comments

Comments
 (0)