-
Notifications
You must be signed in to change notification settings - Fork 2.1k
/
widget.js
127 lines (110 loc) · 3.18 KB
/
widget.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
/* global document */
import {DOMWidgetModel, DOMWidgetView} from '@jupyter-widgets/base';
import {MODULE_NAME, MODULE_VERSION} from './version';
import {loadCss, hideMapboxCSSWarning, initDeck, updateDeck} from './utils';
const MAPBOX_CSS_URL = 'https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css';
// Note: Variables shared explictly between Python and JavaScript use snake_case
export class DeckGLModel extends DOMWidgetModel {
defaults() {
return {
...super.defaults(),
_model_name: DeckGLModel.model_name,
_model_module: DeckGLModel.model_module,
_model_module_version: DeckGLModel.model_module_version,
_view_name: DeckGLModel.view_name,
_view_module: DeckGLModel.view_module,
_view_module_version: DeckGLModel.view_module_version,
json_input: null,
mapbox_key: null,
selected_data: null,
tooltip: null,
width: '100%',
height: 500,
js_error: null
};
}
static get serializers() {
return {...DOMWidgetModel.serializers};
// Add any extra serializers here
}
static get model_name() {
return 'DeckGLModel';
}
static get model_module() {
return MODULE_NAME;
}
static get model_module_version() {
return MODULE_VERSION;
}
static get view_name() {
return 'DeckGLView';
}
static get view_module() {
return MODULE_NAME;
}
static get view_module_version() {
return MODULE_VERSION;
}
}
export class DeckGLView extends DOMWidgetView {
initialize() {
this.listenTo(this.model, 'destroy', this.remove);
const container = document.createElement('div');
this.el.appendChild(container);
const height = `${this.model.get('height')}px`;
const width = Number.isFinite(this.model.get('width'))
? `${this.model.get('width')}px`
: this.model.get('width');
container.style.width = width;
container.style.height = height;
container.style.position = 'relative';
const mapboxApiKey = this.model.get('mapbox_key');
const jsonInput = JSON.parse(this.model.get('json_input'));
const tooltip = this.model.get('tooltip');
loadCss(MAPBOX_CSS_URL);
initDeck({
mapboxApiKey,
container,
jsonInput,
tooltip,
onComplete: ({jsonConverter, deckgl}) => {
this.jsonDeck = {jsonConverter, deckgl};
},
handleClick: this.handleClick.bind(this),
handleError: this.handleError
});
}
remove() {
if (this.jsonDeck) {
this.jsonDeck.deckgl.finalize();
this.jsonDeck = null;
}
}
render() {
super.render();
this.model.on('change:json_input', this.valueChanged.bind(this), this);
}
valueChanged() {
updateDeck(JSON.parse(this.model.get('json_input')), this.jsonDeck);
// Jupyter notebook displays an error that this suppresses
hideMapboxCSSWarning();
}
handleClick(e) {
if (!e) {
return;
}
if (e.object && e.object.points) {
this.model.set('selected_data', e.object.points);
} else {
this.model.set('selected_data', e.object);
}
this.model.save_changes();
}
handleError(err) {
if (!err) {
return;
}
this.model.set('js_error', err);
this.model.save_changes();
}
}