introducing a histogram and a tooltip with more information

Author: Karinon

src/store/store.ts

@@ -32,6 +32,7 @@ export const useGlobeControlStore = defineStore("globeControl", {
       loading: false,
       varinfo: undefined as TVarInfo | undefined, // info about a dataset coming directly from the data
       selection: { low: 0, high: 0 } as TBounds, // all the knobs and buttons in GlobeControl which do not require a reload
+      histogram: undefined as number[] | undefined, // histogram bins for colorbar visualization
       colormap: "turbo" as TColorMap,
       invertColormap: true,
       posterizeLevels: 0 as number,
@@ -72,9 +73,32 @@ export const useGlobeControlStore = defineStore("globeControl", {
 
       this.varinfo = varinfo;
     },
+    updateLowUserBound(low: number | string | undefined) {
+      if (typeof low === "string") {
+        if (low.trim() === "") {
+          low = undefined;
+        } else {
+          low = parseFloat(low);
+        }
+      }
+      this.userBoundsLow = low;
+    },
+    updateHighUserBound(high: number | string | undefined) {
+      if (typeof high === "string") {
+        if (high.trim() === "") {
+          high = undefined;
+        } else {
+          high = parseFloat(high);
+        }
+      }
+      this.userBoundsHigh = high;
+    },
     updateBounds(bounds: TBounds) {
       this.selection = bounds;
     },
+    updateHistogram(histogram: number[] | undefined) {
+      this.histogram = histogram;
+    },
     setControlPanelVisible(visible: boolean) {
       this.controlPanelVisible = visible;
     },

src/store/useUrlSync.ts

@@ -59,11 +59,8 @@ export function useUrlSync() {
   function handleUserBounds() {
     if (
       (userBoundsLow.value !== undefined &&
-        (userBoundsLow.value as unknown as string) !== "" &&
-        userBoundsHigh.value !== undefined &&
-        (userBoundsHigh.value as unknown as string) !== "") ||
-      ((userBoundsLow.value as unknown as string) === "" &&
-        (userBoundsHigh.value as unknown as string) === "")
+        userBoundsHigh.value !== undefined) ||
+      (userBoundsLow.value === undefined && userBoundsHigh.value === undefined)
     ) {
       changeURLHash({
         [URL_PARAMETERS.USER_BOUNDS_LOW]: userBoundsLow.value as number,

src/ui/grids/Curvilinear.vue

@@ -68,6 +68,7 @@ const {
   projectionHelper,
   canvas,
   box,
+  updateHistogram,
 } = useSharedGridLogic();
 
 watch(
@@ -486,6 +487,8 @@ async function fetchAndRenderData(
 
   const dimInfo = await getDimensionValues(dimensionRanges, indices);
 
+  updateHistogram(rawData, min, max, missingValue, fillValue);
+
   store.updateVarInfo(
     {
       attrs: datavar.attrs,

src/ui/grids/GaussianReduced.vue

@@ -67,6 +67,7 @@ const {
   projectionHelper,
   canvas,
   box,
+  updateHistogram,
 } = useSharedGridLogic();
 
 watch(
@@ -418,6 +419,7 @@ async function fetchAndRenderData(
   }
 
   const dimInfo = await getDimensionValues(dimensionRanges, indices);
+  updateHistogram(rawData, min, max, missingValue, fillValue);
 
   store.updateVarInfo(
     {

src/ui/grids/Healpix.vue

@@ -23,6 +23,11 @@ import {
   useGlobeControlStore,
   type TUpdateMode,
 } from "@/store/store.ts";
+import {
+  HISTOGRAM_SUMMARY_BINS,
+  buildHistogramSummary,
+  type THistogramSummary,
+} from "@/utils/histogram.ts";
 import { useLog } from "@/utils/logging.ts";
 
 const props = defineProps<{
@@ -58,6 +63,7 @@ const {
   fetchDimensionDetails,
   updateLandSeaMask,
   updateColormap,
+  updateHistogram,
   projectionHelper,
   canvas,
   box,
@@ -327,8 +333,17 @@ async function getHealpixData(
   }
 
   let { min, max, missingValue, fillValue } = getDataBounds(datavar, dataSlice);
+  // Filter out missing and fill values before building histogram
   return {
     texture: data2texture(dataSlice, {}),
+    histogramSummary: buildHistogramSummary(
+      dataSlice,
+      min,
+      max,
+      fillValue,
+      missingValue,
+      HISTOGRAM_SUMMARY_BINS
+    ),
     min,
     max,
     missingValue,
@@ -561,19 +576,20 @@ async function getDimensionValues(
   return dimValues;
 }
 
-async function fetchAndRenderData(
+async function processHealpixChunks(
   datavar: zarr.Array<zarr.DataType, zarr.FetchStore>,
-  updateMode: TUpdateMode
-) {
-  const { dimensionRanges, indices } = await prepareDimensionData(
-    datavar,
-    updateMode
-  );
-
+  cellCoord: number[] | undefined,
+  nside: number,
+  indices: (number | zarr.Slice | null)[]
+): Promise<{
+  dataMin: number;
+  dataMax: number;
+  histogramSummaries: THistogramSummary[];
+}> {
   let dataMin = Number.POSITIVE_INFINITY;
   let dataMax = Number.NEGATIVE_INFINITY;
-  const cellCoord = await getCells();
-  const nside = await getNside();
+  const histogramSummaries: THistogramSummary[] = [];
+
   await Promise.all(
     [...Array(HEALPIX_NUMCHUNKS).keys()].map(async (ipix) => {
       const texData = await getHealpixData(
@@ -590,7 +606,7 @@ async function fetchAndRenderData(
         return;
       }
 
-      // Update global data range
+      histogramSummaries.push(texData.histogramSummary);
       dataMin = dataMin > texData.min ? texData.min : dataMin;
       dataMax = dataMax < texData.max ? texData.max : dataMax;
 
@@ -604,6 +620,29 @@ async function fetchAndRenderData(
     })
   );
 
+  return { dataMin, dataMax, histogramSummaries };
+}
+
+async function fetchAndRenderData(
+  datavar: zarr.Array<zarr.DataType, zarr.FetchStore>,
+  updateMode: TUpdateMode
+) {
+  const { dimensionRanges, indices } = await prepareDimensionData(
+    datavar,
+    updateMode
+  );
+
+  const cellCoord = await getCells();
+  const nside = await getNside();
+  const { dataMin, dataMax, histogramSummaries } = await processHealpixChunks(
+    datavar,
+    cellCoord,
+    nside,
+    indices
+  );
+
+  updateHistogram(histogramSummaries, dataMin, dataMax);
+
   const dimInfo = await getDimensionValues(dimensionRanges, indices);
 
   store.updateVarInfo(

src/ui/grids/Irregular.vue

@@ -70,6 +70,7 @@ const {
   redraw,
   canvas,
   box,
+  updateHistogram,
 } = useSharedGridLogic();
 
 watch(
@@ -326,13 +327,11 @@ async function getDimensionValues(
   return dimValues;
 }
 
-async function fetchAndRenderData(
+function getGeographicDimensionIndices(
   datavar: zarr.Array<zarr.DataType, zarr.FetchStore>,
-  updateMode: TUpdateMode
+  latitudesAttrs: zarr.Attributes,
+  longitudesAttrs: zarr.Attributes
 ) {
-  // Load latitudes and longitudes arrays (1D)
-  const { latitudes, longitudes, latitudesAttrs, longitudesAttrs } =
-    await getLatLonData(datavar, props.datasources);
   const dimensions = datavar.attrs._ARRAY_DIMENSIONS as string[];
   const geoDims: number[] = [];
   for (let i = 0; i < dimensions.length; i++) {
@@ -344,6 +343,21 @@ async function fetchAndRenderData(
       geoDims.push(i);
     }
   }
+  return geoDims;
+}
+
+async function fetchAndRenderData(
+  datavar: zarr.Array<zarr.DataType, zarr.FetchStore>,
+  updateMode: TUpdateMode
+) {
+  // Load latitudes and longitudes arrays (1D)
+  const { latitudes, longitudes, latitudesAttrs, longitudesAttrs } =
+    await getLatLonData(datavar, props.datasources);
+  const geoDims: number[] = getGeographicDimensionIndices(
+    datavar,
+    latitudesAttrs,
+    longitudesAttrs
+  );
   const { dimensionRanges, indices } = buildDimensionRangesAndIndices(
     datavar,
     paramDimIndices.value,
@@ -371,6 +385,8 @@ async function fetchAndRenderData(
   getGrid(latitudes, longitudes, rawData);
 
   const dimInfo = await getDimensionValues(dimensionRanges, indices);
+  updateHistogram(rawData, min, max, missingValue, fillValue);
+
   store.updateVarInfo(
     {
       attrs: datavar.attrs,

src/ui/grids/Regular.vue

@@ -57,6 +57,7 @@ const {
   fetchDimensionDetails,
   updateLandSeaMask,
   updateColormap,
+  updateHistogram,
   projectionHelper,
   canvas,
   box,
@@ -481,6 +482,7 @@ async function fetchAndRenderData(
   // Set missing/fill values as uniforms for the shader
   material.uniforms.missingValue.value = missingValue;
   material.uniforms.fillValue.value = fillValue;
+  updateHistogram(rawData, min, max, missingValue, fillValue);
 
   mainMesh!.material = material;
   mainMesh!.material.needsUpdate = true;

src/ui/grids/Triangular.vue

@@ -62,6 +62,7 @@ const {
   projectionHelper,
   canvas,
   box,
+  updateHistogram,
 } = useSharedGridLogic();
 
 watch(
@@ -345,6 +346,29 @@ async function getDimensionValues(
   return dimValues;
 }
 
+function distributeDataToMeshes(dataBuffer: {
+  dataValues: Float32Array;
+  dataMin: number;
+  dataMax: number;
+  missingValue: number;
+  fillValue: number;
+}) {
+  let offset = 0;
+  for (const mesh of meshes) {
+    const nVerts = mesh.geometry.getAttribute("position").count;
+    // Each triangle has 3 vertices, each vertex has a value
+    const meshData = dataBuffer.dataValues.subarray(offset, offset + nVerts);
+    mesh.geometry.setAttribute(
+      "data_value",
+      new THREE.BufferAttribute(meshData, 1)
+    );
+    const material = mesh.material as THREE.ShaderMaterial;
+    material.uniforms.missingValue.value = dataBuffer.missingValue;
+    material.uniforms.fillValue.value = dataBuffer.fillValue;
+    offset += nVerts;
+  }
+}
+
 async function fetchAndRenderData(
   datavar: zarr.Array<zarr.DataType, zarr.FetchStore>,
   updateMode: TUpdateMode
@@ -366,22 +390,17 @@ async function fetchAndRenderData(
   );
   const dataBuffer = data2valueBuffer(rawData, datavar);
   // Distribute data values to each mesh
-  let offset = 0;
-  for (const mesh of meshes) {
-    const nVerts = mesh.geometry.getAttribute("position").count;
-    // Each triangle has 3 vertices, each vertex has a value
-    const meshData = dataBuffer.dataValues.subarray(offset, offset + nVerts);
-    mesh.geometry.setAttribute(
-      "data_value",
-      new THREE.BufferAttribute(meshData, 1)
-    );
-    const material = mesh.material as THREE.ShaderMaterial;
-    material.uniforms.missingValue.value = dataBuffer.missingValue;
-    material.uniforms.fillValue.value = dataBuffer.fillValue;
-    offset += nVerts;
-  }
+  distributeDataToMeshes(dataBuffer);
 
   const dimInfo = await getDimensionValues(dimensionRanges, indices);
+  updateHistogram(
+    dataBuffer.dataValues,
+    dataBuffer.dataMin,
+    dataBuffer.dataMax,
+    dataBuffer.missingValue,
+    dataBuffer.fillValue
+  );
+
   store.updateVarInfo(
     {
       attrs: datavar.attrs,