autumnplot-gl 4.0.0 → 4.1.0

package/lib/StationPlot.js

@@ -76,8 +76,35 @@ function positionToAlignmentAndOffset(pos, off_size) {
     }
     return { horizontal_align: ha, vertical_align: va, offset_x: xoff, offset_y: yoff };
 }
+function symbolCategory(symbol) {
+    const sym = symbol.toLowerCase();
+    if (sym.includes('fzra') || (sym.includes('fz') && sym.includes('ra')))
+        return 'freezing_rain';
+    if (sym.includes('pl'))
+        return 'sleet';
+    if (sym.includes('sn') || sym.includes('sg') || sym.includes('gs'))
+        return 'snow';
+    if (sym.includes('ra') || sym.includes('dz'))
+        return 'rain';
+    if (sym.includes('du') || sym.includes('ds') || sym.includes('ss') || sym.includes('blsa') || sym.includes('bldu') || sym.includes('blpy'))
+        return 'blowing_dust';
+    if (sym.includes('ts') || sym.includes('thdr'))
+        return 'thunder';
+    if (sym.includes('fg'))
+        return 'fog';
+    return 'none';
+}
 /**
  * Station model plots for observed data
+ *
+ * ## Grid Compatibility
+ * - :white_check_mark: `PlateCarreeGrid`
+ * - :white_check_mark: `PlateCarreeRotatedGrid`
+ * - :white_check_mark: `LambertGrid`
+ * - :white_check_mark: `UnstructuredGrid`
+ * - :x:                `RadarSweepGrid`
+ * - :x:                `Geostationary`
+ *
  * @example
  * // Specify how to set up the station plot
  * const station_plot_locs = {
@@ -120,32 +147,51 @@ class StationPlot extends PlotComponent {
         if (font_url_template === undefined)
             throw "The map style doesn't have any glyph information. Please pass the font_url_template option to StationPlot";
         const font_url = font_url_template.replace('{fontstack}', this.opts.font_face);
+        const coords = this.field.grid.getEarthCoords();
+        const zoom = this.field.grid.getMinVisibleZoom(this.opts.thin_fac);
         let ibarb = 0;
-        const sub_component_promises = Object.entries(this.opts.config).map(async ([k_, config]) => {
+        let sub_component_promises = [];
+        Object.entries(this.opts.config).forEach(async ([k_, config]) => {
             const k = k_;
             if (config.type == 'number' || config.type == 'string') {
                 const pos = config.pos;
                 const color = config.color === undefined ? Color.fromHex('#000000') : Color.normalizeColor(config.color);
                 const halo_color = config.halo_color === undefined ? Color.fromHex('#ffffff') : Color.normalizeColor(config.halo_color);
                 const halo = config.halo === undefined ? true : config.halo;
-                const coords = this.field.grid.getEarthCoords();
-                const zoom = this.field.grid.getMinVisibleZoom(this.opts.thin_fac);
+                let cmap = null;
                 let text_specs;
                 if (config.type == 'number') {
+                    cmap = config.cmap === undefined ? null : config.cmap;
                     const comp = this.field.getScalar(k);
                     const formatter = config.formatter === undefined ? (val) => val === null ? 'null' : val.toString() : config.formatter;
-                    text_specs = comp.map((v, i) => ({ text: formatter(v), lat: coords.lats[i], lon: coords.lons[i], min_zoom: zoom[i] }));
+                    text_specs = comp.map((v, i) => {
+                        const spec = {
+                            text: formatter(v),
+                            lat: coords.lats[i],
+                            lon: coords.lons[i],
+                            min_zoom: zoom[i],
+                        };
+                        if (v !== null)
+                            spec.data_value = v;
+                        return spec;
+                    });
                 }
                 else {
                     const comp = this.field.getStrings(k);
-                    text_specs = comp.map((v, i) => ({ text: v === null ? '' : v, lat: coords.lats[i], lon: coords.lons[i], min_zoom: zoom[i] }));
+                    text_specs = comp.map((v, i) => ({
+                        text: v === null ? '' : v,
+                        lat: coords.lats[i],
+                        lon: coords.lons[i],
+                        min_zoom: zoom[i],
+                    }));
                 }
                 const tc_opts = {
                     ...positionToAlignmentAndOffset(pos),
                     font_size: this.opts.font_size, halo: halo,
                     text_color: color, halo_color: halo_color,
+                    cmap: cmap
                 };
-                return await TextCollection.make(gl, text_specs, font_url, tc_opts);
+                sub_component_promises.push([TextCollection.make(gl, text_specs, font_url, tc_opts)]);
             }
             else if (config.type == 'barb') {
                 const comp = this.field.getVector(k);
@@ -154,29 +200,49 @@ class StationPlot extends PlotComponent {
             }
             else if (config.type == 'symbol') {
                 const pos = config.pos;
-                const color = config.color === undefined ? Color.fromHex('#000000') : Color.normalizeColor(config.color);
+                const color = config.color === undefined ? '#000000' : config.color;
                 const halo_color = config.halo_color === undefined ? Color.fromHex('#ffffff') : Color.normalizeColor(config.halo_color);
                 const halo = config.halo === undefined ? true : config.halo;
                 const comp = this.field.getStrings(k);
-                const coords = this.field.grid.getEarthCoords();
-                const zoom = this.field.grid.getMinVisibleZoom(this.opts.thin_fac);
                 const wxsym_font_url = font_url_template.replace('{fontstack}', 'wx_symbols');
-                const text_specs = comp.map((v, i) => ({ text: v === null ? '' : String.fromCharCode(SYMBOLS[v]),
-                    lat: coords.lats[i], lon: coords.lons[i], min_zoom: zoom[i] }));
-                const tc_opts = {
-                    ...positionToAlignmentAndOffset(pos),
-                    font_size: this.opts.font_size, halo: halo,
-                    text_color: color, halo_color: halo_color,
-                };
-                if (tc_opts.offset_x !== undefined)
-                    tc_opts.offset_x -= 3;
-                return await TextCollection.make(gl, text_specs, wxsym_font_url, tc_opts);
+                const text_spec_data = [];
+                comp.forEach((v, i) => {
+                    const v_cat = v === null ? 'none' : symbolCategory(v);
+                    const text_color = typeof color === 'string' ? color : color(v, v_cat);
+                    const text_spec_data_filtered = text_spec_data.filter(tsd => tsd.color == text_color);
+                    let text_spec_color;
+                    if (text_spec_data_filtered.length == 0) {
+                        text_spec_color = { specs: [], color: text_color };
+                        text_spec_data.push(text_spec_color);
+                    }
+                    else {
+                        text_spec_color = text_spec_data_filtered[0];
+                    }
+                    text_spec_color.specs.push({
+                        text: v === null ? '' : String.fromCharCode(SYMBOLS[v]),
+                        lat: coords.lats[i],
+                        lon: coords.lons[i],
+                        min_zoom: zoom[i],
+                    });
+                });
+                const promises = [];
+                text_spec_data.forEach(tsd => {
+                    const tc_opts = {
+                        ...positionToAlignmentAndOffset(pos),
+                        font_size: this.opts.font_size, halo: halo,
+                        text_color: Color.normalizeColor(tsd.color), halo_color: halo_color,
+                    };
+                    if (tc_opts.offset_x !== undefined)
+                        tc_opts.offset_x -= 3;
+                    promises.push(TextCollection.make(gl, tsd.specs, wxsym_font_url, tc_opts));
+                });
+                sub_component_promises.push(promises);
             }
             else {
                 throw `Unknown station plot configuration type ${config.type}`;
             }
         });
-        this.text_components = (await Promise.all(sub_component_promises)).filter((c) => c !== undefined);
+        this.text_components = await Promise.all(sub_component_promises.map(p => Promise.all(p)));
         map.triggerRepaint();
     }
     /** @internal */
@@ -209,12 +275,12 @@ class StationPlot extends PlotComponent {
         const map_height = gl_elems.map.getCanvas().height;
         const map_zoom = gl_elems.map.getZoom();
         let itext = 0, ibarb = 0;
-        Object.values(this.opts.config).forEach(comp => {
+        Object.values(this.opts.config).forEach((comp, idx) => {
             if (comp.type == 'barb') {
                 barb_components[ibarb++].render(gl, arg);
             }
             else {
-                text_components[itext++].render(gl, arg, [map_width, map_height], map_zoom);
+                text_components[itext++].forEach(tc => tc.render(gl, arg, [map_width, map_height], map_zoom));
             }
         });
     }

package/lib/TextCollection.d.ts

@@ -1,5 +1,6 @@
 import { RenderMethodArg, WebGLAnyRenderingContext } from "./AutumnTypes";
 import { Color } from "./Color";
+import { ColorMap, ColorMapGPUInterface } from "./Colormap";
 import { ShaderProgramManager } from "./ShaderManager";
 import { WGLBuffer, WGLTexture } from "autumn-wgl";
 interface TextSpec {
@@ -7,6 +8,7 @@ interface TextSpec {
     lon: number;
     text: string;
     min_zoom?: number;
+    data_value?: number;
 }
 type HorizontalAlign = 'left' | 'center' | 'right';
 type VerticalAlign = 'baseline' | 'middle' | 'top';
@@ -15,6 +17,7 @@ interface TextCollectionOptions {
     vertical_align?: VerticalAlign;
     font_size?: number;
     text_color?: Color;
+    cmap?: ColorMap | null;
     halo_color?: Color;
     halo?: boolean;
     offset_x?: number;
@@ -25,7 +28,9 @@ declare class TextCollection {
     readonly anchors: WGLBuffer;
     readonly offsets: WGLBuffer;
     readonly texcoords: WGLBuffer;
+    readonly data: WGLBuffer | null;
     readonly texture: WGLTexture;
+    readonly cmap_gpu: ColorMapGPUInterface | null;
     readonly opts: Required<TextCollectionOptions>;
     private constructor();
     static make(gl: WebGLAnyRenderingContext, text_locs: TextSpec[], fontstack_url_template: string, opts?: TextCollectionOptions): Promise<TextCollection>;

package/lib/TextCollection.js

@@ -1,5 +1,6 @@
 import { getRendererData, isWebGL2Ctx } from "./AutumnTypes";
 import { Color } from "./Color";
+import { ColorMap, ColorMapGPUInterface } from "./Colormap";
 import { LngLat } from "./Map";
 import { ShaderProgramManager } from "./ShaderManager";
 import { Cache, normalizeOptions } from "./utils";
@@ -18,8 +19,16 @@ in vec3 a_pos;
 in vec2 a_offset;
 in vec2 a_tex_coord;
 
+#ifdef DATA
+in highp float a_value;
+#endif
+
 out highp vec2 v_tex_coord;
 
+#ifdef DATA
+out highp float v_value;
+#endif
+
 mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
     return mat4(x_scale, 0.0,     0.0,     0.0,
                 0.0,     y_scale, 0.0,     0.0,
@@ -41,14 +50,25 @@ void main() {
 
     gl_Position = projectTile(a_pos.xy + globe_offset) + u_font_size / 12. * 1.5 * map_stretch_matrix * vec4(offset, 0., 0.);
     v_tex_coord = a_tex_coord;
+
+#ifdef DATA
+    v_value = a_value;
+#endif
 }`
 const text_fragment_shader_src = `#version 300 es
 
 in highp vec2 v_tex_coord;
+
+#ifdef DATA
+in highp float v_value;
+#endif
+
 uniform sampler2D u_sdf_sampler;
 uniform int u_is_halo;
 
+#ifndef DATA
 uniform lowp vec4 u_text_color;
+#endif
 uniform lowp vec4 u_halo_color;
 
 #define SDF_FILL 0.75
@@ -62,7 +82,13 @@ void main() {
     lowp float step_width = 0.08;
     lowp float alpha = smoothstep(SDF_FILL - step_width, SDF_FILL + step_width, sdf_val);
 
-    lowp vec4 color = u_is_halo == 1 ? u_halo_color : u_text_color;
+#ifdef DATA
+    lowp vec4 text_color = apply_colormap(v_value);
+#else
+    lowp vec4 text_color = u_text_color;
+#endif
+
+    lowp vec4 color = u_is_halo == 1 ? u_halo_color : text_color;
 
     if (u_is_halo == 1) {
         alpha = min(smoothstep(SDF_HALO - step_width, SDF_HALO + step_width, sdf_val), 1.0 - alpha);
@@ -171,6 +197,7 @@ const text_collection_opt_defaults = {
     vertical_align: 'baseline',
     font_size: 12,
     text_color: new Color([0, 0, 0, 1]),
+    cmap: null,
     halo_color: new Color([0, 0, 0, 1]),
     halo: false,
     offset_x: 0,
@@ -179,6 +206,7 @@ const text_collection_opt_defaults = {
 class TextCollection {
     constructor(gl, text_locs, font_atlas, opts) {
         this.opts = normalizeOptions(opts, text_collection_opt_defaults);
+        const text_color_hex = this.opts.text_color === undefined ? new Color([0, 0, 0, 1]) : this.opts.text_color;
         const is_webgl2 = isWebGL2Ctx(gl);
         const format = is_webgl2 ? gl.R8 : gl.LUMINANCE;
         const type = gl.UNSIGNED_BYTE;
@@ -196,11 +224,15 @@ class TextCollection {
         const anchor_data = new Float32Array(n_verts * 3);
         const offset_data = new Float32Array(n_verts * 2);
         const tc_data = new Float32Array(n_verts * 2);
-        let i_anch = 0, i_off = 0, i_tc = 0;
+        const value_data = new Float32Array(n_verts);
+        let i_anch = 0, i_off = 0, i_tc = 0, i_dat = 0;
+        let has_data = false;
         text_locs.forEach(loc => {
             const { lat, lon, text } = loc;
             const min_zoom = loc.min_zoom === undefined ? 0 : loc.min_zoom;
+            const data_value = loc.data_value === undefined ? NaN : loc.data_value;
             const { x: anchor_x, y: anchor_y } = new LngLat(lon, lat).toMercatorCoord();
+            has_data = has_data || loc.data_value !== undefined;
             let x_offset = this.opts.offset_x;
             let y_offset = this.opts.offset_y;
             const init_i_off = i_off;
@@ -254,6 +286,12 @@ class TextCollection {
                 tc_data[i_tc++] = glyph_info.atlas_j / font_atlas.atlas_height;
                 tc_data[i_tc++] = (glyph_info.atlas_i + glyph_info.width) / font_atlas.atlas_width;
                 tc_data[i_tc++] = glyph_info.atlas_j / font_atlas.atlas_height;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
+                value_data[i_dat++] = data_value;
                 x_offset += glyph_info.advance - glyph_info.left;
             }
             if (this.opts.horizontal_align == 'center') {
@@ -277,18 +315,40 @@ class TextCollection {
                 }
             }
         });
-        this.shader_manager = new ShaderProgramManager(text_vertex_shader_src, text_fragment_shader_src, []);
+        const shader_defines = [];
+        let fragment_src = text_fragment_shader_src;
+        if (has_data) {
+            shader_defines.push('DATA');
+            this.data = new WGLBuffer(gl, value_data, 1, gl.TRIANGLE_STRIP);
+            const cmap = this.opts.cmap === null ? new ColorMap([0, 1], [text_color_hex], { overflow_color: text_color_hex, underflow_color: text_color_hex }) : this.opts.cmap;
+            this.cmap_gpu = new ColorMapGPUInterface(cmap);
+            this.cmap_gpu.setupShaderVariables(gl, gl.NEAREST);
+            fragment_src = ColorMapGPUInterface.applyShader(fragment_src);
+        }
+        else {
+            this.data = null;
+            this.cmap_gpu = null;
+        }
+        this.shader_manager = new ShaderProgramManager(text_vertex_shader_src, fragment_src, shader_defines);
         this.anchors = new WGLBuffer(gl, anchor_data, 3, gl.TRIANGLE_STRIP);
         this.offsets = new WGLBuffer(gl, offset_data, 2, gl.TRIANGLE_STRIP);
         this.texcoords = new WGLBuffer(gl, tc_data, 2, gl.TRIANGLE_STRIP);
+        this.data = has_data ? new WGLBuffer(gl, value_data, 1, gl.TRIANGLE_STRIP) : null;
     }
     static async make(gl, text_locs, fontstack_url_template, opts) {
         const FONT_GROUP_SIZE = 256;
         const characters = text_locs.map(tl => [...tl.text]).flat().map(c => c.charCodeAt(0)).filter((c, i, ary) => ary.indexOf(c) == i);
-        const char_code_min = Math.min(...characters);
-        const char_code_max = Math.max(...characters);
-        const stack_start = Math.floor(char_code_min / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
-        const stack_end = Math.floor(char_code_max / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
+        let stack_start, stack_end;
+        if (characters.length > 0) {
+            const char_code_min = Math.min(...characters);
+            const char_code_max = Math.max(...characters);
+            stack_start = Math.floor(char_code_min / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
+            stack_end = Math.floor(char_code_max / FONT_GROUP_SIZE) * FONT_GROUP_SIZE;
+        }
+        else {
+            stack_start = 0;
+            stack_end = 0;
+        }
         const fontstack_urls = [];
         for (let istack = stack_start; istack <= stack_end; istack += FONT_GROUP_SIZE) {
             fontstack_urls.push(fontstack_url_template.replace('{range}', `${istack}-${istack + FONT_GROUP_SIZE - 1}`));
@@ -301,13 +361,23 @@ class TextCollection {
     render(gl, arg, [map_width, map_height], map_zoom) {
         const render_data = getRendererData(arg);
         const program = this.shader_manager.getShaderProgram(gl, render_data.shaderData);
+        const attributes = { 'a_pos': this.anchors, 'a_offset': this.offsets, 'a_tex_coord': this.texcoords };
         const uniforms = {
             'u_map_width': map_width, 'u_map_height': map_height, 'u_map_zoom': map_zoom, 'u_font_size': this.opts.font_size,
-            'u_text_color': this.opts.text_color.toRGBATuple(), 'u_halo_color': this.opts.halo_color.toRGBATuple(), 'u_offset': 0,
+            'u_halo_color': this.opts.halo_color.toRGBATuple(), 'u_offset': 0,
             ...this.shader_manager.getShaderUniforms(render_data)
         };
+        if (this.data !== null) {
+            attributes['a_value'] = this.data;
+        }
+        else {
+            uniforms['u_text_color'] = this.opts.text_color.toRGBATuple();
+        }
         uniforms['u_is_halo'] = this.opts.halo ? 1 : 0;
-        program.use({ 'a_pos': this.anchors, 'a_offset': this.offsets, 'a_tex_coord': this.texcoords }, uniforms, { 'u_sdf_sampler': this.texture });
+        program.use(attributes, uniforms, { 'u_sdf_sampler': this.texture });
+        if (this.cmap_gpu !== null) {
+            this.cmap_gpu.bindShaderVariables(program);
+        }
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
         program.draw();

package/lib/WasmInterface.d.ts

@@ -0,0 +1,7 @@
+import { MarchingSquaresModule } from './cpp/marchingsquares';
+import './cpp/marchingsquares.wasm';
+interface InitMSModuleOpts {
+    document_script?: string;
+}
+declare function initMSModule(opts: InitMSModuleOpts): Promise<MarchingSquaresModule>;
+export { initMSModule };

package/lib/WasmInterface.js

@@ -0,0 +1,11 @@
+// Should rename this eventually
+import Module from './cpp/marchingsquares';
+import './cpp/marchingsquares.wasm';
+let msm_promise = null;
+function initMSModule(opts) {
+    if (msm_promise === null) {
+        msm_promise = Module({ 'locateFile': (fname, dir) => (opts.document_script === undefined ? dir : opts.document_script) + fname });
+    }
+    return msm_promise;
+}
+export { initMSModule };

package/lib/WorkerPool.d.ts

@@ -0,0 +1,8 @@
+import * as Comlink from 'comlink';
+type Promisify<T> = (T extends (...args: infer TArguments) => infer TReturn ? (...args: TArguments) => Promise<TReturn> : unknown);
+type WorkerPool<T> = {
+    [K in keyof T]: Promisify<T[K]>;
+};
+declare function createWorkerPool<T>(workers: Worker[], init?: (wkr: Comlink.Remote<T>) => void): WorkerPool<T>;
+export { createWorkerPool };
+export type { WorkerPool };

package/lib/WorkerPool.js

@@ -0,0 +1,77 @@
+import * as Comlink from 'comlink';
+class WorkerPool_ {
+    constructor(workers, init) {
+        this.workers = workers.map(wkr => ({ worker: Comlink.wrap(wkr), is_busy: false }));
+        if (init) {
+            this.workers.forEach(wkr => init(wkr.worker));
+        }
+        this.queue = new Map();
+    }
+    call(path, args, callback) {
+        const worker_idx = this.workers.map(((w, iw) => [w, iw])).filter(([w, iw]) => !w.is_busy)[0];
+        if (worker_idx === undefined) {
+            this.enqueue(path, args, callback);
+        }
+        else {
+            const [worker, iw] = worker_idx;
+            const dequeueAndStart = () => {
+                if (this.queueSize(path) > 0) {
+                    const queue_data = this.dequeue(path);
+                    if (queue_data === undefined)
+                        return;
+                    this.startRun(worker, path, queue_data.args).then(queue_data.callback).then(dequeueAndStart);
+                }
+            };
+            this.startRun(worker, path, args).then(callback).then(dequeueAndStart);
+        }
+    }
+    enqueue(path, args, callback) {
+        const path_str = path.join(".");
+        const old_queue = this.queue.get(path_str);
+        const new_queue = old_queue ? old_queue : [];
+        new_queue.push({ args: args, callback: callback });
+        this.queue.set(path_str, new_queue);
+    }
+    dequeue(path) {
+        const path_str = path.join(".");
+        const queue = this.queue.get(path_str);
+        if (!queue) {
+            return undefined;
+        }
+        const elem = queue.shift();
+        this.queue.set(path_str, queue);
+        return elem;
+    }
+    queueSize(path) {
+        const path_str = path.join(".");
+        const queue = this.queue.get(path_str);
+        if (!queue) {
+            return 0;
+        }
+        return queue.length;
+    }
+    async startRun(worker, path, args) {
+        let rem = worker.worker;
+        path.forEach(p => rem = rem[p]);
+        worker.is_busy = true;
+        const ret = await rem(...args);
+        worker.is_busy = false;
+        return ret;
+    }
+}
+function createProxy(pool, path, target) {
+    const proxy = new Proxy(target, {
+        get(tgt, prop) {
+            return createProxy(pool, [...path, prop], () => { });
+        },
+        apply(tgt, this_arg, func_args) {
+            return new Promise((resolve, reject) => pool.call(path, func_args, resolve));
+        }
+    });
+    return proxy;
+}
+function createWorkerPool(workers, init) {
+    const pool = new WorkerPool_(workers, init);
+    return createProxy(pool, [], () => { });
+}
+export { createWorkerPool };