Zoom into y-axis

CHANGES.md

@@ -44,20 +44,10 @@
 
 TODO:
 
+* Add translations for many new UI texts
+* Support categorical user color bars
 * User color bars:
-  - Harmonize styling see useItemStyles.ts, search for COLOR_BAR_ITEM_GAP
-  - Support categorical user color bars
-  - ~Implement user color bars in xcube server and adjust tile API calls
-    in viewer~
-  - ~Use RGBA instead of just RGB~
-  - ~Fix code duplication, search for COLOR_BAR_ITEM_BOX_MARGIN~
-  - ~Fix popover toolbar for editing and removing a color bar~
-  - ~Use image data and "img" for rendering instead of "canvas"~
-  - ~No longer display code parsing error messages in image,
-    display as tooltip instead and use error border in text field~
-  - ~Fix generation of base64 image data~
-  - ~Fix selecting a user color bar~
-  - ~Allow for same values in color bars code~
+  - Select the next color bar after removing a selected color bar
 
 * Allow running `run: npm run coverage` in `.github/workflows/ci.yaml`:
 

src/actions/controlActions.tsx

@@ -388,12 +388,21 @@ export const SELECT_TIME_RANGE = "SELECT_TIME_RANGE";
 export interface SelectTimeRange {
   type: typeof SELECT_TIME_RANGE;
   selectedTimeRange: TimeRange | null;
+  selectedGroupId?: string;
+  selectedValueRange?: [number, number] | null;
 }
 
 export function selectTimeRange(
   selectedTimeRange: TimeRange | null,
+  selectedGroupId?: string,
+  selectedValueRange?: [number, number] | null,
 ): SelectTimeRange {
-  return { type: SELECT_TIME_RANGE, selectedTimeRange };
+  return {
+    type: SELECT_TIME_RANGE,
+    selectedTimeRange,
+    selectedGroupId,
+    selectedValueRange,
+  };
 }
 
 ////////////////////////////////////////////////////////////////////////////////

src/components/ColorBarLegend/ColorBarCanvas.tsx

@@ -27,6 +27,10 @@ import { useEffect, useRef, MouseEvent } from "react";
 import i18n from "@/i18n";
 import { ColorBar, renderColorBar } from "@/model/colorBar";
 import Tooltip from "@mui/material/Tooltip";
+import {
+  COLOR_BAR_ITEM_HEIGHT,
+  COLOR_BAR_ITEM_WIDTH,
+} from "@/components/ColorBarLegend/constants";
 
 interface ColorBarCanvasProps {
   colorBar: ColorBar;
@@ -61,8 +65,8 @@ export default function ColorBarCanvas({
     <Tooltip title={tooltipTitle}>
       <canvas
         ref={canvasRef}
-        width={width || 240}
-        height={height || 24}
+        width={width || COLOR_BAR_ITEM_WIDTH}
+        height={height || COLOR_BAR_ITEM_HEIGHT + 4}
         onClick={onClick}
         style={!imageData ? { border: "0.5px solid red" } : undefined}
       />

src/components/ColorBarLegend/ColorBarColorEditor.tsx

@@ -30,9 +30,7 @@ import { ColorBar, ColorBars } from "@/model/colorBar";
 import { UserColorBar } from "@/model/userColorBar";
 import ColorBarStyleEditor from "./ColorBarStyleEditor";
 import ColorBarSelect from "./ColorBarSelect";
-import { COLOR_BAR_ITEM_GAP } from "./useItemStyles";
-
-const COLOR_BAR_BOX_MARGIN = 1;
+import { COLOR_BAR_ITEM_GAP, COLOR_BAR_BOX_MARGIN } from "./constants";
 
 const useStyles = makeStyles((theme: Theme) => ({
   colorBarBox: {

src/components/ColorBarLegend/ColorBarGroupComponent.tsx

@@ -52,7 +52,6 @@ export default function ColorBarGroupComponent({
           imageData={images[name]}
           selected={name === selectedColorBarName}
           onSelect={() => onSelectColorBar(name)}
-          width={240}
         />
       ))}
     </>

src/components/ColorBarLegend/ColorBarGroupHeader.tsx

@@ -27,7 +27,7 @@ import makeStyles from "@mui/styles/makeStyles";
 import Box from "@mui/material/Box";
 import Tooltip from "@mui/material/Tooltip";
 
-import { COLOR_BAR_ITEM_GAP } from "./useItemStyles";
+import { COLOR_BAR_ITEM_GAP } from "./constants";
 
 const useStyles = makeStyles((theme: Theme) => ({
   colorBarGroupTitle: {

src/components/ColorBarLegend/ColorBarItem.tsx

@@ -22,16 +22,36 @@
  * SOFTWARE.
  */
 
+import { Theme } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
 import Box from "@mui/material/Box";
 import Tooltip from "@mui/material/Tooltip";
 
-import useItemStyles from "./useItemStyles";
+import { COLOR_BAR_ITEM_GAP, COLOR_BAR_ITEM_WIDTH } from "./constants";
+
+const colorBarItemStyle = (theme: Theme) => ({
+  marginTop: theme.spacing(COLOR_BAR_ITEM_GAP),
+  height: 20,
+  borderWidth: 1,
+  borderStyle: "solid",
+});
+
+const useItemStyles = makeStyles((theme: Theme) => ({
+  colorBarItem: {
+    ...colorBarItemStyle(theme),
+    borderColor: theme.palette.mode === "dark" ? "white" : "black",
+  },
+  colorBarItemSelected: {
+    ...colorBarItemStyle(theme),
+    borderColor: "blue",
+  },
+}));
 
 interface ColorBarItemProps {
   imageData?: string;
   selected?: boolean;
   onSelect?: () => void;
-  width: number | string;
+  width?: number | string;
   title?: string;
 }
 
@@ -64,10 +84,8 @@ export default function ColorBarItem({
 
   return (
     <Box
-      width={width}
-      className={
-        selected ? classes.colorBarGroupItemSelected : classes.colorBarGroupItem
-      }
+      width={width || COLOR_BAR_ITEM_WIDTH}
+      className={selected ? classes.colorBarItemSelected : classes.colorBarItem}
     >
       {image}
     </Box>

src/components/ColorBarLegend/ColorBarLegend.tsx

@@ -149,14 +149,8 @@ export default function ColorBarLegend({
         anchorEl={colorBarRangeEditorAnchor}
         open={Boolean(colorBarRangeEditorAnchor)}
         onClose={handleCloseColorBarRangeEditor}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "center",
-        }}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "center" }}
       >
         <ColorBarRangeEditor
           variableTitle={variableTitle}
@@ -170,14 +164,8 @@ export default function ColorBarLegend({
         anchorEl={colorBarSelectAnchor}
         open={Boolean(colorBarSelectAnchor)}
         onClose={handleCloseColorBarSelect}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
       >
         <ColorBarColorEditor
           variableColorBarMinMax={variableColorBarMinMax}

src/components/ColorBarLegend/UserColorBarEditor.tsx

@@ -36,13 +36,17 @@ import ColorBarItem from "./ColorBarItem";
 interface UserColorBarEditorProps {
   userColorBar: UserColorBar;
   updateUserColorBar: (userColorBar: UserColorBar) => void;
+  selected: boolean;
+  onSelect: () => void;
   onDone: () => void;
   onCancel: () => void;
 }
 
 export default function UserColorBarEditor({
   userColorBar,
   updateUserColorBar,
+  selected,
+  onSelect,
   onDone,
   onCancel,
 }: UserColorBarEditorProps) {
@@ -55,7 +59,8 @@ export default function UserColorBarEditor({
       <ColorBarItem
         imageData={userColorBar.imageData}
         title={userColorBar.errorMessage}
-        width={240}
+        selected={selected}
+        onSelect={onSelect}
       />
       <TextField
         label="Color mapping"

src/components/ColorBarLegend/UserColorBarGroup.tsx

@@ -35,6 +35,13 @@ import UserColorBarEditor from "./UserColorBarEditor";
 import UserColorBarItem from "./UserColorBarItem";
 import useUndo from "./useUndo";
 
+const CONTAINER_STYLE = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  gap: 1,
+};
+
 interface EditMode {
   action?: "add" | "edit";
   colorBarId?: string;
@@ -70,7 +77,7 @@ export default function ColorBarSelect({
 
   const handleStartUserColorBarAdd = () => {
     setUndo(() => updateUserColorBars(userColorBars));
-    const colorBarId = newId("user-cb-");
+    const colorBarId = newId("ucb");
     addUserColorBar(colorBarId);
     setEditMode({ action: "add", colorBarId });
   };
@@ -97,14 +104,7 @@ export default function ColorBarSelect({
 
   return (
     <>
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          gap: 1,
-        }}
-      >
+      <Box sx={CONTAINER_STYLE}>
         <ColorBarGroupHeader
           title={colorBarGroup.title}
           description={colorBarGroup.description}
@@ -124,6 +124,8 @@ export default function ColorBarSelect({
             key={userColorBar.id}
             userColorBar={userColorBar}
             updateUserColorBar={updateUserColorBar}
+            selected={userColorBar.id === selectedColorBarName}
+            onSelect={() => onSelectColorBar(userColorBar.id)}
             onDone={handleDoneUserColorBarEdit}
             onCancel={handleCancelUserColorBarEdit}
           />

src/components/ColorBarLegend/UserColorBarItem.tsx

@@ -31,7 +31,20 @@ import EditIcon from "@mui/icons-material/Edit";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 
 import ColorBarItem from "./ColorBarItem";
-import { COLOR_BAR_ITEM_GAP } from "./useItemStyles";
+import {
+  COLOR_BAR_ITEM_GAP,
+  COLOR_BAR_ITEM_WIDTH,
+  COLOR_BAR_ITEM_HEIGHT,
+} from "./constants";
+
+const CONTAINER_SX = {
+  display: "flex",
+  alignItems: "center",
+  width: COLOR_BAR_ITEM_WIDTH,
+  height: COLOR_BAR_ITEM_HEIGHT,
+  gap: COLOR_BAR_ITEM_GAP,
+  marginTop: COLOR_BAR_ITEM_GAP,
+};
 
 interface UserColorBarItemProps {
   imageData?: string;
@@ -76,21 +89,12 @@ export default function UserColorBarItem({
 
   return (
     <>
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          width: 240,
-          height: 20,
-          gap: COLOR_BAR_ITEM_GAP,
-          marginTop: COLOR_BAR_ITEM_GAP,
-        }}
-      >
+      <Box sx={CONTAINER_SX}>
         <ColorBarItem
           imageData={imageData}
           selected={selected}
           onSelect={onSelect}
-          width={220}
+          width={COLOR_BAR_ITEM_WIDTH - 20}
           title={title}
         />
         <IconButton

src/components/ColorBarLegend/useItemStyles.ts → src/components/ColorBarLegend/constants.ts

@@ -22,27 +22,7 @@
  * SOFTWARE.
  */
 
-import { Theme } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-
+export const COLOR_BAR_BOX_MARGIN = 1;
 export const COLOR_BAR_ITEM_GAP = 0.2;
-
-const colorBarGroupItemStyle = (theme: Theme) => ({
-  marginTop: theme.spacing(COLOR_BAR_ITEM_GAP),
-  height: 20,
-  borderWidth: 1,
-  borderStyle: "solid",
-});
-
-const useItemStyles = makeStyles((theme: Theme) => ({
-  colorBarGroupItem: {
-    ...colorBarGroupItemStyle(theme),
-    borderColor: theme.palette.mode === "dark" ? "white" : "black",
-  },
-  colorBarGroupItemSelected: {
-    ...colorBarGroupItemStyle(theme),
-    borderColor: "blue",
-  },
-}));
-
-export default useItemStyles;
+export const COLOR_BAR_ITEM_WIDTH = 240;
+export const COLOR_BAR_ITEM_HEIGHT = 20;