Categorical color mapping

CHANGES.md

@@ -16,6 +16,12 @@
   definition. Existing custom color bars can be edited and deleted.
   This feature requires xcube server >= 1.6. (#334)
 
+* Users can now select the data normalisation function to be applied before
+  the actual color mapping takes place. Three functions are available:
+  - `Lin`: linear mapping of data values between `min` and `max` to colors.
+  - `Log`: logarithmic mapping of data values between `vmin` and `vmax` to colors.
+  - `Cat`: direct mapping of categorical data values into colors.
+
 * Users can now zoom into arbitrary regions of a time-series chart
   by pressing the `CTRL` key of the keyboard. (#285)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "xcube-viewer",
-  "version": "1.2.0-dev.0",
+  "version": "1.2.0-dev.1",
   "private": true,
   "type": "module",
   "scripts": {

src/actions/dataActions.tsx

@@ -76,6 +76,7 @@ import {
 import { VolumeRenderMode } from "@/states/controlState";
 import { MessageLogAction, postMessage } from "./messageLogActions";
 import { renameUserPlaceInLayer } from "./mapActions";
+import { ColorBarNorm } from "@/model/variable";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -682,14 +683,16 @@ export interface UpdateVariableColorBar {
   type: typeof UPDATE_VARIABLE_COLOR_BAR;
   datasetId: string;
   variableName: string;
-  colorBarMinMax: [number, number];
   colorBarName: string;
+  colorBarMinMax: [number, number];
+  colorBarNorm: ColorBarNorm;
   opacity: number;
 }
 
 export function updateVariableColorBar(
-  colorBarMinMax: [number, number],
   colorBarName: string,
+  colorBarMinMax: [number, number],
+  colorBarNorm: ColorBarNorm,
   opacity: number,
 ) {
   return (
@@ -699,12 +702,25 @@ export function updateVariableColorBar(
     const selectedDatasetId = getState().controlState.selectedDatasetId;
     const selectedVariableName = getState().controlState.selectedVariableName;
     if (selectedDatasetId && selectedVariableName) {
+      if (colorBarNorm === "log") {
+        // Adjust range in case of log norm: Make sure xcube server can use
+        // matplotlib.colors.LogNorm(vmin, vmax) without errors
+        let [vMin, vMax] = colorBarMinMax;
+        if (vMin <= 0) {
+          vMin = 1e-3;
+        }
+        if (vMax <= vMin) {
+          vMax = 1;
+        }
+        colorBarMinMax = [vMin, vMax];
+      }
       dispatch(
         _updateVariableColorBar(
           selectedDatasetId,
           selectedVariableName,
-          colorBarMinMax,
           colorBarName,
+          colorBarMinMax,
+          colorBarNorm,
           opacity,
         ),
       );
@@ -715,16 +731,18 @@ export function updateVariableColorBar(
 export function _updateVariableColorBar(
   datasetId: string,
   variableName: string,
-  colorBarMinMax: [number, number],
   colorBarName: string,
+  colorBarMinMax: [number, number],
+  colorBarNorm: ColorBarNorm,
   opacity: number,
 ): UpdateVariableColorBar {
   return {
     type: UPDATE_VARIABLE_COLOR_BAR,
     datasetId,
     variableName,
-    colorBarMinMax,
     colorBarName,
+    colorBarMinMax,
+    colorBarNorm,
     opacity,
   };
 }

src/components/ColorBarLegend/ColorBarCanvas.tsx

@@ -35,8 +35,8 @@ import {
 interface ColorBarCanvasProps {
   colorBar: ColorBar;
   opacity: number;
-  width: number | string | undefined;
-  height: number | string | undefined;
+  width?: number | string | undefined;
+  height?: number | string | undefined;
   onClick: (event: MouseEvent<HTMLCanvasElement>) => void;
 }
 

src/components/ColorBarLegend/ColorBarColorEditor.tsx

@@ -31,6 +31,7 @@ import { UserColorBar } from "@/model/userColorBar";
 import ColorBarStyleEditor from "./ColorBarStyleEditor";
 import ColorBarSelect from "./ColorBarSelect";
 import { COLOR_BAR_ITEM_GAP, COLOR_BAR_BOX_MARGIN } from "./constants";
+import { ColorBarNorm } from "@/model/variable";
 
 const useStyles = makeStyles((theme: Theme) => ({
   colorBarBox: {
@@ -42,13 +43,15 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 interface ColorBarColorEditorProps {
-  variableColorBarMinMax: [number, number];
   variableColorBarName: string;
+  variableColorBarMinMax: [number, number];
+  variableColorBarNorm: ColorBarNorm;
   variableColorBar: ColorBar;
   variableOpacity: number;
   updateVariableColorBar: (
-    colorBarMinMax: [number, number],
     colorBarName: string,
+    colorBarMinMax: [number, number],
+    colorBarNorm: ColorBarNorm,
     opacity: number,
   ) => void;
   colorBars: ColorBars;

src/components/ColorBarLegend/ColorBarGroupHeader.tsx

@@ -32,7 +32,8 @@ import { COLOR_BAR_ITEM_GAP } from "./constants";
 const useStyles = makeStyles((theme: Theme) => ({
   colorBarGroupTitle: {
     marginTop: theme.spacing(2 * COLOR_BAR_ITEM_GAP),
-    color: theme.palette.grey[400],
+    fontSize: "small",
+    color: theme.palette.text.secondary,
   },
 }));
 

src/components/ColorBarLegend/ColorBarItem.tsx

@@ -39,7 +39,7 @@ const colorBarItemStyle = (theme: Theme) => ({
 const useItemStyles = makeStyles((theme: Theme) => ({
   colorBarItem: {
     ...colorBarItemStyle(theme),
-    borderColor: theme.palette.mode === "dark" ? "white" : "black",
+    borderColor: theme.palette.mode === "dark" ? "lightgray" : "darkgray",
   },
   colorBarItemSelected: {
     ...colorBarItemStyle(theme),

src/components/ColorBarLegend/ColorBarLabels.tsx

@@ -22,10 +22,10 @@
  * SOFTWARE.
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import makeStyles from "@mui/styles/makeStyles";
 
-import { getLabelsFromRange } from "@/util/label";
+import { getLabelsForRange } from "@/util/label";
 
 const useStyles = makeStyles(() => ({
   label: {
@@ -42,19 +42,25 @@ interface ColorBarLabelsProps {
   minValue: number;
   maxValue: number;
   numTicks: number;
+  logScaled?: boolean;
   onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 export default function ColorBarLabels({
   minValue,
   maxValue,
   numTicks,
+  logScaled,
   onClick,
 }: ColorBarLabelsProps) {
   const classes = useStyles();
+  const labels = useMemo(
+    () => getLabelsForRange(minValue, maxValue, numTicks, logScaled),
+    [minValue, maxValue, numTicks, logScaled],
+  );
   return (
     <div className={classes.label} onClick={onClick}>
-      {getLabelsFromRange(minValue, maxValue, numTicks).map((label, i) => (
+      {labels.map((label, i) => (
         <span key={i}>{label}</span>
       ))}
     </div>

src/components/ColorBarLegend/ColorBarLegend.tsx

@@ -22,21 +22,21 @@
  * SOFTWARE.
  */
 
-import React, { useState } from "react";
-import makeStyles from "@mui/styles/makeStyles";
-import { Theme } from "@mui/material";
+import { MouseEvent, useRef, useState } from "react";
 import Popover from "@mui/material/Popover";
 
+import ColorBarLegendCategorical from "./ColorBarLegendCategorical";
+import ColorBarLegendContinuous from "./ColorBarLegendContinuous";
+import ColorBarColorEditor from "./ColorBarColorEditor";
 import { ColorBar, ColorBars } from "@/model/colorBar";
 import { UserColorBar } from "@/model/userColorBar";
-import ColorBarCanvas from "./ColorBarCanvas";
-import ColorBarColorEditor from "./ColorBarColorEditor";
-import ColorBarRangeEditor from "./ColorBarRangeEditor";
-import ColorBarLabels from "./ColorBarLabels";
+import makeStyles from "@mui/styles/makeStyles";
+import { Theme } from "@mui/material";
+import { ColorBarNorm } from "@/model/variable";
 
 const useStyles = makeStyles((theme: Theme) => ({
   title: {
-    fontSize: "x-small",
+    fontSize: "small",
     fontWeight: "bold",
     width: "100%",
     display: "flex",
@@ -56,13 +56,15 @@ const useStyles = makeStyles((theme: Theme) => ({
 interface ColorBarLegendProps {
   variableName: string | null;
   variableUnits: string;
-  variableColorBarMinMax: [number, number];
   variableColorBarName: string;
+  variableColorBarMinMax: [number, number];
+  variableColorBarNorm: ColorBarNorm;
   variableColorBar: ColorBar;
   variableOpacity: number;
   updateVariableColorBar: (
-    colorBarMinMax: [number, number],
     colorBarName: string,
+    colorBarMinMax: [number, number],
+    colorBarNorm: ColorBarNorm,
     opacity: number,
   ) => void;
   colorBars: ColorBars;
@@ -71,115 +73,70 @@ interface ColorBarLegendProps {
   removeUserColorBar: (userColorBarId: string) => void;
   updateUserColorBar: (userColorBar: UserColorBar) => void;
   updateUserColorBars: (userColorBars: UserColorBar[]) => void;
-  width?: number | string;
-  height?: number | string;
-  numTicks?: number;
+  onOpenColorBarEditor: (event: MouseEvent<HTMLCanvasElement>) => void;
 }
 
-export default function ColorBarLegend({
-  variableName,
-  variableUnits,
-  variableColorBarMinMax,
-  variableColorBarName,
-  variableColorBar,
-  variableOpacity,
-  updateVariableColorBar,
-  colorBars,
-  userColorBars,
-  addUserColorBar,
-  removeUserColorBar,
-  updateUserColorBar,
-  updateUserColorBars,
-  width,
-  height,
-  numTicks,
-}: ColorBarLegendProps) {
+export default function ColorBarLegend(
+  props: Omit<ColorBarLegendProps, "onOpenColorBarEditor">,
+) {
   const classes = useStyles();
 
-  const [colorBarRangeEditorAnchor, setColorBarRangeEditorAnchor] =
-    useState<HTMLDivElement | null>(null);
-  const [colorBarSelectAnchor, setColorBarSelectAnchor] =
-    useState<HTMLCanvasElement | null>(null);
-
-  if (!variableName) {
-    return null;
-  }
+  const {
+    variableName,
+    variableUnits,
+    variableColorBar,
+    variableColorBarNorm,
+  } = props;
 
-  const handleOpenColorBarRangeEditor = (
-    event: React.MouseEvent<HTMLDivElement>,
-  ) => {
-    setColorBarRangeEditorAnchor(event.currentTarget);
-  };
-
-  const handleCloseColorBarRangeEditor = () => {
-    setColorBarRangeEditorAnchor(null);
-  };
+  const colorBarSelectAnchorRef = useRef<HTMLDivElement | null>(null);
+  const [colorBarSelectAnchorEl, setColorBarSelectAnchorEl] =
+    useState<HTMLDivElement | null>(null);
 
-  const handleOpenColorBarSelect = (
-    event: React.MouseEvent<HTMLCanvasElement>,
-  ) => {
-    setColorBarSelectAnchor(event.currentTarget);
+  const handleOpenColorBarSelect = () => {
+    setColorBarSelectAnchorEl(colorBarSelectAnchorRef.current);
   };
 
   const handleCloseColorBarSelect = () => {
-    setColorBarSelectAnchor(null);
+    setColorBarSelectAnchorEl(null);
   };
 
-  const variableTitle = `${variableName} (${variableUnits || "-"})`;
+  if (!variableName) {
+    return null;
+  }
+
+  const variableTitle = variableColorBar.categories
+    ? variableName
+    : `${variableName} (${variableUnits || "-"})`;
 
   return (
-    <div className={"ol-control " + classes.container}>
+    <div
+      className={"ol-control " + classes.container}
+      ref={colorBarSelectAnchorRef}
+    >
       <div className={classes.title}>
         <span>{variableTitle}</span>
       </div>
-      <ColorBarCanvas
-        colorBar={variableColorBar}
-        opacity={variableOpacity}
-        width={width}
-        height={height}
-        onClick={handleOpenColorBarSelect}
-      />
-      <ColorBarLabels
-        minValue={variableColorBarMinMax[0]}
-        maxValue={variableColorBarMinMax[1]}
-        numTicks={numTicks || 5}
-        onClick={handleOpenColorBarRangeEditor}
-      />
-      <Popover
-        anchorEl={colorBarRangeEditorAnchor}
-        open={Boolean(colorBarRangeEditorAnchor)}
-        onClose={handleCloseColorBarRangeEditor}
-        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-        transformOrigin={{ vertical: "top", horizontal: "center" }}
-      >
-        <ColorBarRangeEditor
-          variableTitle={variableTitle}
-          variableColorBarMinMax={variableColorBarMinMax}
-          variableColorBarName={variableColorBarName}
-          variableOpacity={variableOpacity}
-          updateVariableColorBar={updateVariableColorBar}
+      {variableColorBarNorm === "cat" && variableColorBar.categories ? (
+        <ColorBarLegendCategorical
+          variableColorBarCategories={variableColorBar.categories}
+          onOpenColorBarEditor={handleOpenColorBarSelect}
+          {...props}
         />
-      </Popover>
+      ) : (
+        <ColorBarLegendContinuous
+          variableTitle={variableName}
+          onOpenColorBarEditor={handleOpenColorBarSelect}
+          {...props}
+        />
+      )}
       <Popover
-        anchorEl={colorBarSelectAnchor}
-        open={Boolean(colorBarSelectAnchor)}
+        anchorEl={colorBarSelectAnchorEl}
+        open={Boolean(colorBarSelectAnchorEl)}
         onClose={handleCloseColorBarSelect}
         anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
         transformOrigin={{ vertical: "top", horizontal: "left" }}
       >
-        <ColorBarColorEditor
-          variableColorBarMinMax={variableColorBarMinMax}
-          variableColorBarName={variableColorBarName}
-          variableColorBar={variableColorBar}
-          variableOpacity={variableOpacity}
-          updateVariableColorBar={updateVariableColorBar}
-          colorBars={colorBars}
-          userColorBars={userColorBars}
-          addUserColorBar={addUserColorBar}
-          removeUserColorBar={removeUserColorBar}
-          updateUserColorBar={updateUserColorBar}
-          updateUserColorBars={updateUserColorBars}
-        />
+        <ColorBarColorEditor {...props} />
       </Popover>
     </div>
   );