color scale fix and picker value consistency

Author: terraputix

src/lib/utils/color-scales.ts

@@ -1,5 +1,6 @@
 import { interpolateHsl, color } from 'd3';
-import type { ColorScale, Variable } from '../../types';
+import type { ColorScale, Interpolator, Variable } from '../../types';
+import { interpolate2DHermite, noInterpolation, quinticHermite2D } from './math';
 
 function interpolateColorScaleHSL(colors: Array<string>, steps: number) {
 	const segments = colors.length - 1;
@@ -51,7 +52,7 @@ const convectiveCloudScale: ColorScale = {
 	colors: [
 		...interpolateColorScaleHSL(['#c0392b', '#d35400', '#f1c40f', '#16a085', '#2980b9'], 6000)
 	],
-	interpolationMethod: 'quintic2d'
+	interpolationMethod: 'none'
 };
 
 export const colorScales: ColorScales = {
@@ -170,3 +171,16 @@ export function getColorScale(variable: Variable) {
 		colorScales['temperature']
 	);
 }
+
+export function getInterpolator(colorScale: ColorScale): Interpolator {
+	if (colorScale.interpolationMethod === 'hermite2d') {
+		return interpolate2DHermite;
+	} else if (colorScale.interpolationMethod === 'quintic2d') {
+		return quinticHermite2D;
+	} else if (colorScale.interpolationMethod === 'none') {
+		return noInterpolation;
+	} else {
+		// default is hermite2d
+		return interpolate2DHermite;
+	}
+}

src/lib/utils/math.ts

@@ -38,6 +38,16 @@ export const interpolateLinear = (
 	);
 };
 
+export const noInterpolation = (
+	values: TypedArray,
+	nx: number,
+	index: number,
+	xFraction: number,
+	yFraction: number
+): number => {
+	return values[index];
+};
+
 export const hermite = (t: number, p0: number, p1: number, m0: number, m1: number) => {
 	const t2 = t * t;
 	const t3 = t2 * t;

src/om-protocol.ts

@@ -16,10 +16,10 @@ import { variables } from '$lib/utils/variables';
 
 import TileWorker from './worker?worker';
 
-import type { TileJSON, TileIndex, Domain, Variable, Bounds, Range } from './types';
+import type { TileJSON, TileIndex, Domain, Variable, Bounds, Range, ColorScale } from './types';
 import { DynamicProjection, ProjectionGrid, type Projection } from '$lib/utils/projection';
 import { OMapsFileReader } from './omaps-reader';
-import { getColorScale } from '$lib/utils/color-scales';
+import { getInterpolator } from '$lib/utils/color-scales';
 
 let dark = false;
 let partial = false;
@@ -53,7 +53,8 @@ const TILE_SIZE = Number(import.meta.env.VITE_TILE_SIZE) * 2;
 
 export const getValueFromLatLong = (
 	lat: number,
-	lon: number
+	lon: number,
+	colorScale: ColorScale
 ): { index: number; value: number; direction?: number } => {
 	if (data) {
 		const values = data.values;
@@ -72,14 +73,9 @@ export const getValueFromLatLong = (
 		};
 
 		if (values && index) {
+			const interpolator = getInterpolator(colorScale);
 			//const px = interpolateLinear(data, index, xFraction, yFraction);
-			const px = interpolate2DHermite(
-				values as TypedArray,
-				domain.grid.nx,
-				index,
-				xFraction,
-				yFraction
-			);
+			const px = interpolator(values as Float32Array, domain.grid.nx, index, xFraction, yFraction);
 
 			return { index: index, value: px };
 		} else {
@@ -92,7 +88,6 @@ export const getValueFromLatLong = (
 
 const getTile = async ({ z, x, y }: TileIndex, omUrl: string): Promise<ImageBitmap> => {
 	const key = `${omUrl}/${TILE_SIZE}/${z}/${x}/${y}`;
-	const colorScale = getColorScale(variable);
 
 	const worker = new TileWorker();
 
@@ -105,7 +100,6 @@ const getTile = async ({ z, x, y }: TileIndex, omUrl: string): Promise<ImageBitm
 		data,
 		domain,
 		variable,
-		colorScale,
 		ranges,
 		dark: dark,
 		mapBounds: mapBounds

src/routes/+page.svelte

@@ -410,7 +410,7 @@
 					} else {
 						popup.addTo(map);
 					}
-					let { index, value } = getValueFromLatLong(coordinates.lat, coordinates.lng);
+					let { index, value } = getValueFromLatLong(coordinates.lat, coordinates.lng, colorScale);
 					if (index) {
 						if ((hideZero.includes(variable.value) && value <= 0.25) || !value) {
 							popup.remove();

src/types.ts

@@ -54,7 +54,7 @@ export type ColorScale = {
 	interpolationMethod: InterpolationMethod;
 };
 
-export type InterpolationMethod = 'hermite2d' | 'quintic2d';
+export type InterpolationMethod = 'hermite2d' | 'quintic2d' | 'none';
 
 export type Interpolator = (
 	values: Float32Array<ArrayBufferLike>,

src/worker.ts

@@ -9,11 +9,13 @@ import {
 	interpolateLinear,
 	interpolate2DHermite,
 	quinticHermite2D,
-	degreesToRadians
+	degreesToRadians,
+	noInterpolation
 } from './lib/utils/math';
 
 import type { IconListPixels } from './lib/utils/icons';
 import type { ColorScale, Domain, IndexAndFractions, Interpolator } from './types';
+import { getColorScale, getInterpolator } from '$lib/utils/color-scales';
 
 const TILE_SIZE = Number(import.meta.env.VITE_TILE_SIZE) * 2;
 const OPACITY = Number(import.meta.env.VITE_TILE_OPACITY);
@@ -143,7 +145,7 @@ self.onmessage = async (message) => {
 
 		const domain = message.data.domain;
 		const variable = message.data.variable;
-		const colorScale: ColorScale = message.data.colorScale;
+		const colorScale = getColorScale(message.data.variable);
 
 		const pixels = TILE_SIZE * TILE_SIZE;
 		const rgba = new Uint8ClampedArray(pixels * 4);
@@ -159,15 +161,7 @@ self.onmessage = async (message) => {
 			projectionGrid = new ProjectionGrid(projection, domain.grid, ranges);
 		}
 
-		let interpolator: Interpolator;
-		if (colorScale.interpolationMethod === 'hermite2d') {
-			interpolator = interpolate2DHermite;
-		} else if (colorScale.interpolationMethod === 'quintic2d') {
-			interpolator = quinticHermite2D;
-		} else {
-			// default is hermite2d
-			interpolator = interpolate2DHermite;
-		}
+		const interpolator = getInterpolator(colorScale);
 
 		for (let i = 0; i < TILE_SIZE; i++) {
 			const lat = tile2lat(y + i / TILE_SIZE, z);