Skip to content

Commit 6f3f20d

Browse files
KeithWoodsKeithWoods
committed
adding input to control data point buffer
devtools view not shown by default, use ctrl+alt+d to display
1 parent e320e20 commit 6f3f20d

10 files changed

Lines changed: 87 additions & 49 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "esp-js-devtools",
3-
"version": "0.0.8",
3+
"version": "0.0.9",
44
"description": "Evented State Processor (ESP) dev tools",
55
"main": "dist/esp-js-devtools.js",
66
"scripts": {

‎src/devtoolsHooks.js‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import $ from 'jquery';
12
import esp from 'esp-js';
23
import AnalyticsMonitor from './model/analyticsMonitor';
34
import DevToolsModel from './model/devToolsModel';
@@ -11,21 +12,33 @@ class Controller {
1112
}
1213
start() {
1314
this._router = new esp.Router();
14-
let modelRouter = this._router.createModelRouter(DevToolsModel.modelId);
15-
this._model = new DevToolsModel(modelRouter);
15+
this._model = new DevToolsModel(this._router);
1616
this._router.addModel(DevToolsModel.modelId, this._model);
17-
this._view = new DevToolsView(modelRouter);
18-
window.__espAnalyticsMonitor = new AnalyticsMonitor(modelRouter);
19-
this._view.start();
17+
window.__espAnalyticsMonitor = new AnalyticsMonitor(DevToolsModel.modelId, this._router);
2018
this._model.observeEvents();
2119
this._router.publishEvent(DevToolsModel.modelId, 'initEvent', {});
20+
$(document).keyup(this._openDevToolsOnKeyboardShortcut.bind(this));
2221
}
2322
dispose() {
2423
window.__espAnalyticsMonitor = null;
24+
$(document).unbind('keyup', this._openDevToolsOnKeyboardShortcut);
2525
this._router.dispose();
2626
this._model.dispose();
2727
this._view.dispose();
2828
}
29+
closeView() {
30+
this._view.dispose();
31+
this._view = null;
32+
}
33+
_openDevToolsOnKeyboardShortcut(event) {
34+
event = event || window.event;
35+
if(event.keyCode== 68 && event.ctrlKey && event.altKey) {
36+
if(this._view !== null) {
37+
this._view = new DevToolsView(DevToolsModel.modelId, this._router);
38+
this._view.start();
39+
}
40+
}
41+
}
2942
}
3043

3144
let isRegistered = false;
@@ -41,10 +54,4 @@ export function registerDevTools() {
4154
isRegistered = true;
4255
controller = new Controller();
4356
controller.start();
44-
}
45-
46-
export function unregisterDevTools() {
47-
controller.dispose();
48-
controller = null;
49-
isRegistered = false;
5057
}

‎src/index.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import { registerDevTools, unregisterDevTools } from './devtoolsHooks';
1+
import { registerDevTools } from './devtoolsHooks';
22
export { registerDevTools };
3-
export { unregisterDevTools };
43
export default {
5-
registerDevTools,
6-
unregisterDevTools
4+
registerDevTools
75
}

‎src/model/analyticsMonitor.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import DebugToolsModel from './devToolsModel';
22

33
export default class AnalyticsMonitor {
4-
constructor(router) {
4+
constructor(devToolsModelId, router) {
55
this._router = router;
6+
this._devToolsModelId = devToolsModelId;
67
}
78
addModel(modelId) {
89
if(modelId === DebugToolsModel.modelId) return;
9-
this._router.publishEvent('modelAdded', {modelId: modelId});
10+
this._router.publishEvent(this._devToolsModelId, 'modelAdded', {modelId: modelId});
1011
}
1112
publishEvent(modelId, eventType, event) {
1213
if(modelId === DebugToolsModel.modelId) return;
13-
this._router.publishEvent('eventPublished', {modelId: modelId, eventType: eventType, event:event});
14+
this._router.publishEvent(this._devToolsModelId,'eventPublished', {modelId: modelId, eventType: eventType, event:event});
1415
}
1516
broadcastEvent(eventType) {
1617
}
@@ -50,7 +51,7 @@ export default class AnalyticsMonitor {
5051
}
5152
halted(modelIds, err) {
5253
if(modelIds.indexOf(DebugToolsModel.modelId) >=0 ) return;
53-
this._router.publishEvent('routerHalted', {modelIds: modelIds, err: err});
54+
this._router.publishEvent(this._devToolsModelId, 'routerHalted', {modelIds: modelIds, err: err});
5455
}
5556
registerMonitor(devToolsDiagnosticMonitor) {
5657

‎src/model/dataPoint.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default class DataPoint {
66
this._pointId = dataPointId++;
77
this._data = data;
88
this._publishedTime = publishedTime;
9-
this._modelId = modelId;
9+
this._devToolsModelId = modelId;
1010
this._pointType = pointType;
1111
}
1212
get pointId() {
@@ -19,7 +19,7 @@ export default class DataPoint {
1919
return this._publishedTime;
2020
}
2121
get modelId() {
22-
return this._modelId;
22+
return this._devToolsModelId;
2323
}
2424
get pointType() {
2525
return this._pointType;

‎src/model/devToolsModel.js‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import moment from 'moment';
44
import UpdateType from './updateType';
55
import RegisteredModel from './registeredModel';
66
import DataPoint from './dataPoint';
7-
import { unregisterDevTools } from '../devtoolsHooks';
87
import DataPointType from './dataPointType';
98

109
export default class DevToolsModel extends esp.model.DisposableBase {
@@ -24,7 +23,7 @@ export default class DevToolsModel extends esp.model.DisposableBase {
2423
this._shouldAutoScroll = true;
2524
this._shouldCaptureEvents = true;
2625
this._shouldLogToConsole = false;
27-
this._eventBufferSize = 200;
26+
this._dataPointBufferSize = 200;
2827
}
2928
static get modelId() {
3029
return 'esp-debugTools';
@@ -35,6 +34,9 @@ export default class DevToolsModel extends esp.model.DisposableBase {
3534
get registeredModels() {
3635
return _.values(this._registeredModels);
3736
}
37+
get dataPoints() {
38+
return this._dataPoints;
39+
}
3840
get newDataPoints() {
3941
return this._newDataPoints;
4042
}
@@ -53,8 +55,11 @@ export default class DevToolsModel extends esp.model.DisposableBase {
5355
get processedDataPointCount() {
5456
return this._processedDataPointCount;
5557
}
58+
get dataPointBufferSize() {
59+
return this._dataPointBufferSize;
60+
}
5661
observeEvents() {
57-
this.addDisposable(this._router.observeEventsOn(this));
62+
this.addDisposable(this._router.observeEventsOn(DevToolsModel.modelId, this));
5863
}
5964
preProcess() {
6065
this._updateType = [];
@@ -126,8 +131,8 @@ export default class DevToolsModel extends esp.model.DisposableBase {
126131
this._dataPoints.push(dataPoint);
127132
this._newDataPoints.push(dataPoint);
128133
this._processedDataPointCount++;
129-
if(this._processedDataPointCount > this._eventBufferSize) {
130-
let numberToRemove = this._dataPoints.length - this._eventBufferSize;
134+
if(this._processedDataPointCount > this._dataPointBufferSize) {
135+
let numberToRemove = this._dataPoints.length - this._dataPointBufferSize;
131136
let removedItems = this._dataPoints.splice(0, numberToRemove);
132137
for (let i = 0; i < removedItems.length; i++) {
133138
let dataPointToRemove = removedItems[i];
@@ -161,9 +166,12 @@ export default class DevToolsModel extends esp.model.DisposableBase {
161166
_onResetChart() {
162167
this._reset();
163168
}
164-
@esp.observeEvent('close')
165-
_onClose() {
166-
unregisterDevTools();
169+
@esp.observeEvent('ringBufferSizeInputChanged')
170+
_onRingBufferSizeInputChanged(value) {
171+
let newDataPointBufferSize = Number(value);
172+
if(!isNaN(newDataPointBufferSize)) {
173+
this._dataPointBufferSize = newDataPointBufferSize;
174+
}
167175
}
168176
dispose() {
169177
super.dispose();
@@ -172,11 +180,13 @@ export default class DevToolsModel extends esp.model.DisposableBase {
172180
_startTimer() {
173181
// start a timer so we can keep moving the chart forward
174182
this._timerSubscription = setInterval(() => {
175-
this._router.runAction(() => {
176-
this._updateType.push(UpdateType.timeChanged);
177-
this._now = moment();
178-
});
179-
}, 1000);
183+
this._router.runAction(
184+
DevToolsModel.modelId, () => {
185+
this._updateType.push(UpdateType.timeChanged);
186+
this._now = moment();
187+
}
188+
);
189+
}, 5000);
180190
}
181191
_reset() {
182192
this._updateType.push(UpdateType.reset);

‎src/model/registeredModel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import DataPoint from './dataPoint';
33

44
export default class RegisteredModel {
55
constructor(modelId) {
6-
this._modelId = modelId;
6+
this._devToolsModelId = modelId;
77
this._isHalted = false;
88
this._haltingError = null;
99
}
1010
get modelId() {
11-
return this._modelId;
11+
return this._devToolsModelId;
1212
}
1313
get isHalted() {
1414
return this._isHalted;

‎src/views/devToolsView.js‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import DataPointType from '../model/dataPointType';
1212

1313
export default class DevToolsView extends esp.model.DisposableBase {
1414

15-
constructor(router) {
15+
constructor(modelId, router) {
1616
super();
1717
this._router = router;
1818
this._timelineGroups = new vis.DataSet();
@@ -23,16 +23,19 @@ export default class DevToolsView extends esp.model.DisposableBase {
2323
this._logEventsConsoleCheckbox = null;
2424
this._resetChartButton = null;
2525
this._closeButton = null;
26+
this._ringBufferSizeInput = null;
2627
this._eventDetailsDescriptionP = null;
2728
this._footer = null;
29+
this._modelId = modelId;
2830
}
2931

3032
start() {
3133
this._createDevToolsElements();
34+
let isStateOfTheWorld = true;
3235
this.addDisposable(
33-
this._router.getModelObservable()
36+
this._router.getModelObservable(this._modelId)
3437
.observe(model => {
35-
if (model.updateType.indexOf(UpdateType.modelsChanged) >= 0) {
38+
if (isStateOfTheWorld || model.updateType.indexOf(UpdateType.modelsChanged) >= 0) {
3639
for (let i = 0; i < model.registeredModels.length; i++) {
3740
let registeredModel = model.registeredModels[i];
3841
let groupStyle = registeredModel.isHalted
@@ -45,9 +48,12 @@ export default class DevToolsView extends esp.model.DisposableBase {
4548
});
4649
}
4750
}
48-
if (model.updateType.indexOf(UpdateType.eventsChanged) >= 0) {
49-
for (var i = 0; i < model.newDataPoints.length; i++) {
50-
var dataPoint = model.newDataPoints[i];
51+
if (isStateOfTheWorld || model.updateType.indexOf(UpdateType.eventsChanged) >= 0) {
52+
let points = isStateOfTheWorld
53+
? model.dataPoints
54+
: model.newDataPoints;
55+
for (var i = 0; i < points.length; i++) {
56+
var dataPoint = points[i];
5157
let pointStyle = dataPoint.pointType == DataPointType.routerHalted
5258
? 'background:red'
5359
: '';
@@ -78,8 +84,12 @@ export default class DevToolsView extends esp.model.DisposableBase {
7884
if (this._eventDetailsDescriptionP && model.selectedDataPoint) {
7985
this._eventDetailsDescriptionP.html(JSON.stringify(model.selectedDataPoint));
8086
}
87+
if(this._ringBufferSizeInput && !this._ringBufferSizeInput.is(":focus")) {
88+
this._ringBufferSizeInput.val(model.dataPointBufferSize);
89+
}
8190
this._footer.html(`Total events: ${model.processedDataPointCount}`);
8291
}
92+
isStateOfTheWorld = false;
8393
})
8494
);
8595
}
@@ -91,37 +101,43 @@ export default class DevToolsView extends esp.model.DisposableBase {
91101
// note use of function so 'this' is the checkbox
92102
this._autoscrollCheckbox = container.find('#autoscrollCheckbox');
93103
this._autoscrollCheckbox.change(function () {
94-
_this._router.publishEvent('autoscrollToggled', {shouldAutoScroll: this.checked});
104+
_this._router.publishEvent(_this._modelId, 'autoscrollToggled', {shouldAutoScroll: this.checked});
95105
});
96106
this.addDisposable(() => {this._autoscrollCheckbox.off();});
97107

98108
this._captureEventsCheckbox = container.find('#captureEvents');
99109
this._captureEventsCheckbox.change(function () {
100-
_this._router.publishEvent('captureEventsToggled', {shouldCaptureEvents: this.checked});
110+
_this._router.publishEvent(_this._modelId,'captureEventsToggled', {shouldCaptureEvents: this.checked});
101111
});
102112
this.addDisposable(() => {this._captureEventsCheckbox.off();});
103113

104114
this._logEventsConsoleCheckbox = container.find('#logEventsConsole');
105115
this._logEventsConsoleCheckbox.change(function () {
106-
_this._router.publishEvent('logEventsConsoleToggled', {shouldLogToConsole: this.checked});
116+
_this._router.publishEvent(_this._modelId,'logEventsConsoleToggled', {shouldLogToConsole: this.checked});
107117
});
108118
this.addDisposable(() => {this._logEventsConsoleCheckbox.off();});
109119

110120
this._resetChartButton = container.find('#resetChart');
111121
this._resetChartButton.click(function () {
112-
_this._router.publishEvent('resetChart', {});
122+
_this._router.publishEvent(_this._modelId,'resetChart', {});
113123
});
114124
this.addDisposable(() => {this._resetChartButton.off();});
115125

116126
this._closeButton = container.find('#closeButton');
117127
this._closeButton.click(function () {
118-
_this._router.publishEvent('close', {});
128+
_this.dispose();
119129
});
120130
this.addDisposable(() => {this._closeButton.off();});
121131

122132
this._eventDetailsDescriptionP = container.find('#eventDetailsDescription');
123133
this._footer = container.find('#footer');
124134

135+
this._ringBufferSizeInput = container.find('#ringBufferSize');
136+
this._ringBufferSizeInput.change(function () {
137+
_this._router.publishEvent(_this._modelId,'ringBufferSizeInputChanged', this.value);
138+
});
139+
this.addDisposable(() => {this._ringBufferSizeInput.off();});
140+
125141
let chartContainer = container.find('#chartContainer');
126142
let options = {
127143
groupOrder: 'content',
@@ -158,6 +174,7 @@ export default class DevToolsView extends esp.model.DisposableBase {
158174
timeline.on('select', properties => {
159175
let pointId = properties.items[0];
160176
this._router.publishEvent(
177+
this._modelId,
161178
'pointSelected', {
162179
pointId: pointId
163180
}
@@ -178,6 +195,6 @@ export default class DevToolsView extends esp.model.DisposableBase {
178195
}
179196

180197
_disableAutoScroll() {
181-
this._router.publishEvent('disableAutoScroll', {});
198+
this._router.publishEvent(this._modelId, 'disableAutoScroll', {});
182199
}
183200
}

‎src/views/devToolsView.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ div#esp-js-devtool-container {
3232
}
3333

3434
.controls {
35+
margin-left: 5px;
36+
#ringBufferSize {
37+
width: 60px;
38+
}
3539
}
3640

3741
.eventDetails p {

‎src/views/devToolsView.template.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<input id="captureEvents" type="checkbox" name="captureEvents" checked><label for="captureEvents">capture events</label>
99
<input id="autoscrollCheckbox" type="checkbox" name="autoscroll" checked><label for="autoscrollCheckbox">autoscroll</label>
1010
<input id="logEventsConsole" type="checkbox" name="logEventsConsole"><label for="logEventsConsole">log events console</label>
11+
<input id="ringBufferSize" type="number" name="ringBufferSize"><label for="ringBufferSize">max data points</label>
1112
<input id="resetChart" type="button" name="resetChart" value="reset chart">
1213
</div>
1314
<div class="eventDetails">

0 commit comments

Comments
 (0)