gridviz 2.0.40 → 2.0.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/README.md +119 -119
  2. package/dist/gridviz.js +15722 -33305
  3. package/dist/gridviz.min.js +2 -2
  4. package/package.json +76 -77
  5. package/src/App.js +642 -698
  6. package/src/BackgroundLayer.js +182 -182
  7. package/src/BackgroundLayerWMS.js +131 -131
  8. package/src/Dataset.js +76 -76
  9. package/src/DatasetComponent.js +101 -103
  10. package/src/GeoCanvas.js +420 -419
  11. package/src/LabelLayer.js +190 -190
  12. package/src/Layer.js +92 -92
  13. package/src/Legend.js +86 -86
  14. package/src/LineLayer.js +150 -150
  15. package/src/Style.js +114 -114
  16. package/src/Tooltip.js +168 -168
  17. package/src/dataset/COGeo.js +24 -24
  18. package/src/dataset/CSVGrid.js +104 -104
  19. package/src/dataset/GeoTIFF.js +127 -127
  20. package/src/dataset/GridTile.js +41 -41
  21. package/src/dataset/TiledGrid.js +264 -296
  22. package/src/index.js +176 -174
  23. package/src/legend/ColorCategoryLegend.js +124 -124
  24. package/src/legend/ColorDiscreteLegend.js +103 -105
  25. package/src/legend/ColorLegend.js +124 -125
  26. package/src/legend/SegmentOrientationLegend.js +87 -87
  27. package/src/legend/SegmentWidthLegend.js +97 -97
  28. package/src/legend/SizeLegend.js +141 -141
  29. package/src/style/CompositionStyle.js +300 -300
  30. package/src/style/ContourStyle.js +54 -54
  31. package/src/style/DotDensityStyle.js +156 -156
  32. package/src/style/JoyPlotStyle.js +135 -135
  33. package/src/style/LegoStyle.js +112 -112
  34. package/src/style/MosaicStyle.js +107 -107
  35. package/src/style/NinjaStarStyle.js +124 -124
  36. package/src/style/PillarStyle.js +230 -230
  37. package/src/style/SegmentStyle.js +142 -142
  38. package/src/style/ShapeColorSizeStyle.js +126 -126
  39. package/src/style/SideCatStyle.js +172 -172
  40. package/src/style/SideStyle.js +218 -218
  41. package/src/style/SquareColorCatWGLStyle.js +120 -120
  42. package/src/style/SquareColorWGLStyle.js +146 -146
  43. package/src/style/StrokeStyle.js +131 -131
  44. package/src/style/TanakaStyle.js +160 -160
  45. package/src/style/TextStyle.js +132 -132
  46. package/src/utils/Utils.js +35 -35
  47. package/src/utils/WebGLRectangleColoring.js +106 -106
  48. package/src/utils/WebGLSquareColoring.js +118 -118
  49. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  50. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  51. package/src/utils/WebGLSquareColoringKS.js +153 -153
  52. package/src/utils/stretching.js +131 -131
  53. package/src/utils/webGLUtils.js +71 -71
  54. package/src/utils/zoomUtils.js +142 -142
  55. package/src/dataset/ParquetGrid.js +0 -122
@@ -1,296 +1,264 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- /** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset").Envelope, format:import("../DatasetComponent").Format }} GridInfo */
5
-
6
- // internal
7
- import { GridTile } from './GridTile.js'
8
- import { App } from '../App.js'
9
- import { DatasetComponent } from '../DatasetComponent.js'
10
- import { monitor, monitorDuration } from '../utils/Utils.js'
11
-
12
- // external
13
- import { json, csv } from 'd3-fetch'
14
- import { tableFromIPC } from 'apache-arrow'
15
-
16
- /**
17
- * A tiled dataset, composed of CSV (or parquet) tiles.
18
- *
19
- * @author Joseph Davies, Julien Gaffuri
20
- */
21
- export class TiledGrid extends DatasetComponent {
22
- /**
23
- * @param {string} url The URL of the dataset.
24
- * @param {App} app The application.
25
- * @param {{preprocess?:(function(import("../Dataset").Cell):boolean), readParquetFun?:Function }} opts
26
- */
27
- constructor(url, app, opts = {}) {
28
- super(url, 0, opts)
29
-
30
- /**
31
- * The app being used.
32
- * @type {App}
33
- */
34
- this.app = app
35
-
36
- /**
37
- * The grid info object, from the info.json file.
38
- * @type {GridInfo | undefined}
39
- * @private
40
- * */
41
- this.info = undefined
42
-
43
- /**
44
- * @type {string}
45
- * @private */
46
- this.infoLoadingStatus = 'notLoaded'
47
-
48
- /**
49
- * The cache of the loaded tiles. It is double indexed: by xT and then yT.
50
- * Example: this.cache[xT][yT] returns the tile at [xT][yT] location.
51
- *
52
- * @type {object}
53
- * */
54
- this.cache = {}
55
-
56
- /**
57
- * @type {Function|undefined}
58
- * @private */
59
- this.readParquetFun = opts.readParquetFun
60
- }
61
-
62
- /**
63
- * Load the info.json from the url.
64
- *
65
- * @param {function():void} callback
66
- * @returns this
67
- */
68
- loadInfo(callback) {
69
- if (!this.info && this.infoLoadingStatus === 'notLoaded') {
70
- ;(async () => {
71
- try {
72
- const data = await json(this.url + 'info.json')
73
- this.info = data
74
- this.resolution = data.resolutionGeo
75
- this.infoLoadingStatus = 'loaded'
76
- if (callback) callback()
77
- } catch (error) {
78
- //mark as failed
79
- this.infoLoadingStatus = 'failed'
80
- }
81
- })()
82
- } else if (callback && (this.infoLoadingStatus === 'loaded' || this.infoLoadingStatus === 'failed'))
83
- callback()
84
- return this
85
- }
86
-
87
- /**
88
- * Compute a tiling envelope from a geographical envelope.
89
- * This is the function to use to know which tiles to download for a geographical view.
90
- *
91
- * @param {import("../Dataset").Envelope} e
92
- * @returns {import("../Dataset").Envelope|undefined}
93
- */
94
- getTilingEnvelope(e) {
95
- if (!this.info) {
96
- this.loadInfo(() => {})
97
- return
98
- }
99
-
100
- const po = this.info.originPoint,
101
- r = this.info.resolutionGeo,
102
- s = this.info.tileSizeCell
103
-
104
- return {
105
- xMin: Math.floor((e.xMin - po.x) / (r * s)),
106
- xMax: Math.floor((e.xMax - po.x) / (r * s)),
107
- yMin: Math.floor((e.yMin - po.y) / (r * s)),
108
- yMax: Math.floor((e.yMax - po.y) / (r * s)),
109
- }
110
- }
111
-
112
- /**
113
- * Request data within a geographic envelope.
114
- *
115
- * @param {import("../Dataset").Envelope} extGeo
116
- * @param {function():void} redrawFun
117
- * @returns {this}
118
- */
119
- getData(extGeo, redrawFun) {
120
- //TODO empty cache when it gets too big ?
121
-
122
- //check if info has been loaded
123
- if (!this.info) return this
124
-
125
- //tiles within the scope
126
- /** @type {import("../Dataset").Envelope|undefined} */
127
- const tb = this.getTilingEnvelope(extGeo)
128
- if (!tb) return this
129
-
130
- //grid bounds
131
- /** @type {import("../Dataset").Envelope} */
132
- const gb = this.info.tilingBounds
133
-
134
- const format = this.info.format
135
-
136
- for (let xT = Math.max(tb.xMin, gb.xMin); xT <= Math.min(tb.xMax, gb.xMax); xT++) {
137
- for (let yT = Math.max(tb.yMin, gb.yMin); yT <= Math.min(tb.yMax, gb.yMax); yT++) {
138
- //prepare cache
139
- if (!this.cache[xT]) this.cache[xT] = {}
140
-
141
- //check if tile exists in the cache
142
- /** @type {GridTile} */
143
- let tile = this.cache[xT][yT]
144
- if (tile) continue
145
-
146
- //mark tile as loading
147
- this.cache[xT][yT] = 'loading'
148
- ;(async () => {
149
- //request tile
150
- /** @type {Array.<import("../Dataset").Cell>} */
151
- let cells
152
-
153
- try {
154
- if (!format || format === 'CSV') {
155
- /** @type {Array.<import("../Dataset").Cell>} */
156
- // @ts-ignore
157
- const data = await csv(this.url + xT + '/' + yT + '.csv')
158
-
159
- if (monitor) monitorDuration('*** TiledGrid parse start')
160
-
161
- //preprocess/filter
162
- if (this.preprocess) {
163
- cells = []
164
- for (const c of data) {
165
- const b = this.preprocess(c)
166
- if (b == false) continue
167
- cells.push(c)
168
- }
169
- } else {
170
- cells = data
171
- }
172
-
173
- if (monitor) monitorDuration('preprocess / filter')
174
- } else if (format === 'PARQUET') {
175
- if (!this.readParquetFun)
176
- throw new Error('readParquet function needed for parquet dataset')
177
-
178
- const resp = await fetch(this.url + xT + '/' + yT + '.parquet')
179
- const parquetUint8Array = new Uint8Array(await resp.arrayBuffer())
180
- const arrowUint8Array = this.readParquetFun(parquetUint8Array)
181
- const t = tableFromIPC(arrowUint8Array)
182
-
183
- cells = []
184
- for (const e of t) {
185
- //get cell
186
- const c = e.toJSON()
187
-
188
- //preprocess/filter
189
- if (this.preprocess) {
190
- const b = this.preprocess(c)
191
- if (b == false) continue
192
- cells.push(c)
193
- } else {
194
- cells.push(c)
195
- }
196
- }
197
- } else throw new Error('Tiled format not supported: ' + format)
198
- } catch (error) {
199
- //mark as failed
200
- this.cache[xT][yT] = 'failed'
201
- return
202
- }
203
-
204
- //store tile in cache
205
- if (!this.info) {
206
- console.error('Tile info inknown')
207
- return
208
- }
209
- const tile_ = new GridTile(cells, xT, yT, this.info)
210
- this.cache[xT][yT] = tile_
211
-
212
- if (monitor) monitorDuration('storage')
213
-
214
- //if no redraw is specified, then leave
215
- if (!redrawFun) return
216
-
217
- //check if redraw is really needed, that is if:
218
-
219
- // 1. the dataset belongs to a layer which is visible at the current zoom level
220
- let redraw = false
221
- //go through the layers
222
- const zf = this.app.getZoomFactor()
223
- for (const lay of this.app.layers) {
224
- if (!lay.visible) continue
225
- if (lay.getDatasetComponent(zf) != this) continue
226
- //found one layer. No need to seek more.
227
- redraw = true
228
- break
229
- }
230
- if (monitor) monitorDuration('check redraw 1')
231
-
232
- if (!redraw) return
233
-
234
- // 2. the tile is within the view, that is its geo envelope intersects the viewer geo envelope.
235
- const env = this.app.updateExtentGeo()
236
- const envT = tile_.extGeo
237
- if (env.xMax <= envT.xMin) return
238
- if (env.xMin >= envT.xMax) return
239
- if (env.yMax <= envT.yMin) return
240
- if (env.yMin >= envT.yMax) return
241
-
242
- if (monitor) monitorDuration('check redraw 2')
243
- if (monitor) monitorDuration('*** TiledGrid parse end')
244
-
245
- //redraw
246
- redrawFun()
247
- })()
248
- }
249
- }
250
- return this
251
- }
252
-
253
- /**
254
- * Fill the view cache with all cells which are within a geographical envelope.
255
- * @abstract
256
- * @param {import("../Dataset").Envelope} extGeo
257
- * @returns {void}
258
- */
259
- updateViewCache(extGeo) {
260
- //
261
- this.cellsViewCache = []
262
-
263
- //check if info has been loaded
264
- if (!this.info) return
265
-
266
- //tiles within the scope
267
- /** @type {import("../Dataset").Envelope|undefined} */
268
- const tb = this.getTilingEnvelope(extGeo)
269
- if (!tb) return
270
-
271
- //grid bounds
272
- /** @type {import("../Dataset").Envelope} */
273
- const gb = this.info.tilingBounds
274
-
275
- for (let xT = Math.max(tb.xMin, gb.xMin); xT <= Math.min(tb.xMax, gb.xMax); xT++) {
276
- if (!this.cache[xT]) continue
277
- for (let yT = Math.max(tb.yMin, gb.yMin); yT <= Math.min(tb.yMax, gb.yMax); yT++) {
278
- //get tile
279
- /** @type {GridTile} */
280
- const tile = this.cache[xT][yT]
281
- if (!tile || typeof tile === 'string') continue
282
-
283
- //get cells
284
- //this.cellsViewCache = this.cellsViewCache.concat(tile.cells)
285
-
286
- for (const cell of tile.cells) {
287
- if (+cell.x + this.resolution < extGeo.xMin) continue
288
- if (+cell.x - this.resolution > extGeo.xMax) continue
289
- if (+cell.y + this.resolution < extGeo.yMin) continue
290
- if (+cell.y - this.resolution > extGeo.yMax) continue
291
- this.cellsViewCache.push(cell)
292
- }
293
- }
294
- }
295
- }
296
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ /** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset").Envelope, format:import("../DatasetComponent").Format }} GridInfo */
5
+
6
+ // internal
7
+ import { GridTile } from './GridTile.js'
8
+ import { App } from '../App.js'
9
+ import { DatasetComponent } from '../DatasetComponent.js'
10
+ import { monitor, monitorDuration } from '../utils/Utils.js'
11
+
12
+ // external
13
+ import { json, csv } from 'd3-fetch'
14
+
15
+ /**
16
+ * A tiled dataset, composed of CSV tiles.
17
+ *
18
+ * @author Joseph Davies, Julien Gaffuri
19
+ */
20
+ export class TiledGrid extends DatasetComponent {
21
+ /**
22
+ * @param {string} url The URL of the dataset.
23
+ * @param {App} app The application.
24
+ * @param {{preprocess?:(function(import("../Dataset").Cell):boolean) }} opts
25
+ */
26
+ constructor(url, app, opts = {}) {
27
+ super(url, 0, opts)
28
+
29
+ /**
30
+ * The app being used.
31
+ * @type {App}
32
+ */
33
+ this.app = app
34
+
35
+ /**
36
+ * The grid info object, from the info.json file.
37
+ * @type {GridInfo | undefined}
38
+ * @private
39
+ * */
40
+ this.info = undefined
41
+
42
+ /**
43
+ * @type {string}
44
+ * @private */
45
+ this.infoLoadingStatus = 'notLoaded'
46
+
47
+ /**
48
+ * The cache of the loaded tiles. It is double indexed: by xT and then yT.
49
+ * Example: this.cache[xT][yT] returns the tile at [xT][yT] location.
50
+ *
51
+ * @type {object}
52
+ * */
53
+ this.cache = {}
54
+
55
+ }
56
+
57
+ /**
58
+ * Load the info.json from the url.
59
+ *
60
+ * @param {function():void} callback
61
+ * @returns this
62
+ */
63
+ loadInfo(callback) {
64
+ if (!this.info && this.infoLoadingStatus === 'notLoaded') {
65
+ ; (async () => {
66
+ try {
67
+ const data = await json(this.url + 'info.json')
68
+ this.info = data
69
+ this.resolution = data.resolutionGeo
70
+ this.infoLoadingStatus = 'loaded'
71
+ if (callback) callback()
72
+ } catch (error) {
73
+ //mark as failed
74
+ this.infoLoadingStatus = 'failed'
75
+ }
76
+ })()
77
+ } else if (callback && (this.infoLoadingStatus === 'loaded' || this.infoLoadingStatus === 'failed'))
78
+ callback()
79
+ return this
80
+ }
81
+
82
+ /**
83
+ * Compute a tiling envelope from a geographical envelope.
84
+ * This is the function to use to know which tiles to download for a geographical view.
85
+ *
86
+ * @param {import("../Dataset").Envelope} e
87
+ * @returns {import("../Dataset").Envelope|undefined}
88
+ */
89
+ getTilingEnvelope(e) {
90
+ if (!this.info) {
91
+ this.loadInfo(() => { })
92
+ return
93
+ }
94
+
95
+ const po = this.info.originPoint,
96
+ r = this.info.resolutionGeo,
97
+ s = this.info.tileSizeCell
98
+
99
+ return {
100
+ xMin: Math.floor((e.xMin - po.x) / (r * s)),
101
+ xMax: Math.floor((e.xMax - po.x) / (r * s)),
102
+ yMin: Math.floor((e.yMin - po.y) / (r * s)),
103
+ yMax: Math.floor((e.yMax - po.y) / (r * s)),
104
+ }
105
+ }
106
+
107
+ /**
108
+ * Request data within a geographic envelope.
109
+ *
110
+ * @param {import("../Dataset").Envelope} extGeo
111
+ * @param {function():void} redrawFun
112
+ * @returns {this}
113
+ */
114
+ getData(extGeo, redrawFun) {
115
+ //TODO empty cache when it gets too big ?
116
+
117
+ //check if info has been loaded
118
+ if (!this.info) return this
119
+
120
+ //tiles within the scope
121
+ /** @type {import("../Dataset").Envelope|undefined} */
122
+ const tb = this.getTilingEnvelope(extGeo)
123
+ if (!tb) return this
124
+
125
+ //grid bounds
126
+ /** @type {import("../Dataset").Envelope} */
127
+ const gb = this.info.tilingBounds
128
+
129
+ for (let xT = Math.max(tb.xMin, gb.xMin); xT <= Math.min(tb.xMax, gb.xMax); xT++) {
130
+ for (let yT = Math.max(tb.yMin, gb.yMin); yT <= Math.min(tb.yMax, gb.yMax); yT++) {
131
+ //prepare cache
132
+ if (!this.cache[xT]) this.cache[xT] = {}
133
+
134
+ //check if tile exists in the cache
135
+ /** @type {GridTile} */
136
+ let tile = this.cache[xT][yT]
137
+ if (tile) continue
138
+
139
+ //mark tile as loading
140
+ this.cache[xT][yT] = 'loading'
141
+ ; (async () => {
142
+ //request tile
143
+ /** @type {Array.<import("../Dataset").Cell>} */
144
+ let cells
145
+
146
+ try {
147
+ /** @type {Array.<import("../Dataset").Cell>} */
148
+ // @ts-ignore
149
+ const data = await csv(this.url + xT + '/' + yT + '.csv')
150
+
151
+ if (monitor) monitorDuration('*** TiledGrid parse start')
152
+
153
+ //preprocess/filter
154
+ if (this.preprocess) {
155
+ cells = []
156
+ for (const c of data) {
157
+ const b = this.preprocess(c)
158
+ if (b == false) continue
159
+ cells.push(c)
160
+ }
161
+ } else {
162
+ cells = data
163
+ }
164
+
165
+ if (monitor) monitorDuration('preprocess / filter')
166
+ } catch (error) {
167
+ //mark as failed
168
+ this.cache[xT][yT] = 'failed'
169
+ return
170
+ }
171
+
172
+ //store tile in cache
173
+ if (!this.info) {
174
+ console.error('Tile info inknown')
175
+ return
176
+ }
177
+ const tile_ = new GridTile(cells, xT, yT, this.info)
178
+ this.cache[xT][yT] = tile_
179
+
180
+ if (monitor) monitorDuration('storage')
181
+
182
+ //if no redraw is specified, then leave
183
+ if (!redrawFun) return
184
+
185
+ //check if redraw is really needed, that is if:
186
+
187
+ // 1. the dataset belongs to a layer which is visible at the current zoom level
188
+ let redraw = false
189
+ //go through the layers
190
+ const zf = this.app.getZoomFactor()
191
+ for (const lay of this.app.layers) {
192
+ if (!lay.visible) continue
193
+ if (lay.getDatasetComponent(zf) != this) continue
194
+ //found one layer. No need to seek more.
195
+ redraw = true
196
+ break
197
+ }
198
+ if (monitor) monitorDuration('check redraw 1')
199
+
200
+ if (!redraw) return
201
+
202
+ // 2. the tile is within the view, that is its geo envelope intersects the viewer geo envelope.
203
+ const env = this.app.updateExtentGeo()
204
+ const envT = tile_.extGeo
205
+ if (env.xMax <= envT.xMin) return
206
+ if (env.xMin >= envT.xMax) return
207
+ if (env.yMax <= envT.yMin) return
208
+ if (env.yMin >= envT.yMax) return
209
+
210
+ if (monitor) monitorDuration('check redraw 2')
211
+ if (monitor) monitorDuration('*** TiledGrid parse end')
212
+
213
+ //redraw
214
+ redrawFun()
215
+ })()
216
+ }
217
+ }
218
+ return this
219
+ }
220
+
221
+ /**
222
+ * Fill the view cache with all cells which are within a geographical envelope.
223
+ * @abstract
224
+ * @param {import("../Dataset").Envelope} extGeo
225
+ * @returns {void}
226
+ */
227
+ updateViewCache(extGeo) {
228
+ //
229
+ this.cellsViewCache = []
230
+
231
+ //check if info has been loaded
232
+ if (!this.info) return
233
+
234
+ //tiles within the scope
235
+ /** @type {import("../Dataset").Envelope|undefined} */
236
+ const tb = this.getTilingEnvelope(extGeo)
237
+ if (!tb) return
238
+
239
+ //grid bounds
240
+ /** @type {import("../Dataset").Envelope} */
241
+ const gb = this.info.tilingBounds
242
+
243
+ for (let xT = Math.max(tb.xMin, gb.xMin); xT <= Math.min(tb.xMax, gb.xMax); xT++) {
244
+ if (!this.cache[xT]) continue
245
+ for (let yT = Math.max(tb.yMin, gb.yMin); yT <= Math.min(tb.yMax, gb.yMax); yT++) {
246
+ //get tile
247
+ /** @type {GridTile} */
248
+ const tile = this.cache[xT][yT]
249
+ if (!tile || typeof tile === 'string') continue
250
+
251
+ //get cells
252
+ //this.cellsViewCache = this.cellsViewCache.concat(tile.cells)
253
+
254
+ for (const cell of tile.cells) {
255
+ if (+cell.x + this.resolution < extGeo.xMin) continue
256
+ if (+cell.x - this.resolution > extGeo.xMax) continue
257
+ if (+cell.y + this.resolution < extGeo.yMin) continue
258
+ if (+cell.y - this.resolution > extGeo.yMax) continue
259
+ this.cellsViewCache.push(cell)
260
+ }
261
+ }
262
+ }
263
+ }
264
+ }