Pixel info box

CHANGES.md

@@ -1,10 +1,34 @@
 ## Changes in version 1.3.0 (in development)
 
-### Enhancements
+### New Features 
+
+* Users can now copy snapshots of a time-series charts and statistics
+  into the clipboard by clicking a new camera icon on a chart's action bar.
+  (#290)
+
+* It is now possible to change the color and opacity of user places
+  and hence associated time-series and statistic charts. (#216, #97)
+
+* When in map split mode each of the two variables has its own
+  variable color legend with same functionality. (#401)
+
+* Users can now enable a small pixel information box being displayed
+  next to the pointer when hovering over the map. It shows the current 
+  map coordinates and the values of the currently selected variable at 
+  that position. The feature is switched on and off from the layer 
+  selector menu. (#404)
+
+* The datasets in the dataset selector are now sorted by name and may
+  also be grouped if configured so in xcube server. (#385)
 
-* Users can now define their own variables computed from arbitrary
-  band-math expressions. The variables are defined for a given
-  dataset and are persisted in the browser's local storage. (#371)
+* Users can now define their own variables computed from Python-like
+  expressions. The expressions can combine other variables of the
+  current dataset using almost all Python operators and all
+  [numpy universal functions](https://numpy.org/doc/stable/reference/ufuncs.html#available-ufuncs).  
+  User data variables are persisted in the browser's local storage.
+  (#371)
+
+### Enhancements
 
 * Revised map color mapping for simplicity and clarity. (#306, #390)
   This comprises the following changes:
@@ -18,21 +42,11 @@
   - The value range can now be assigned from the value range
     of the color mapping values.
 
-* When in map split mode each of the two variables has its own
-  color legend with same functionality. (#401)
-
-* The datasets in the dataset selector are now sorted by name and may
-  also be grouped if configured so in xcube server. (#385)
+* All selectable items of the variable legend (color bar, value range)
+  now show a "pointer" cursor to indicate interactivity.
 
 * Made the right sidebar panel's tab bar position sticky. (#373)
 
-* It is now possible to change the color and opacity of user places
-  and hence associated time-series and statistic charts. (#216, #97)
-
-* Users can now copy snapshots of a time-series charts and statistics 
-  into the clipboard by clicking a new camera icon on a chart's action bar. 
-  (#290)
-
 * The title of time-series charts has been turned into a label of the 
   chart's y-axis in order to include an indication of the units when 
   snapshots are made.

src/actions/controlActions.tsx

@@ -319,6 +319,24 @@ export function setLayerVisibility(
 
 ////////////////////////////////////////////////////////////////////////////////
 
+export const SET_MAP_POINT_INFO_BOX_ENABLED = "SET_MAP_POINT_INFO_BOX_ENABLED";
+
+export interface SetMapPointInfoBoxEnabled {
+  type: typeof SET_MAP_POINT_INFO_BOX_ENABLED;
+  mapPointInfoBoxEnabled: boolean;
+}
+
+export function setMapPointInfoBoxEnabled(
+  mapPointInfoBoxEnabled: boolean,
+): SetMapPointInfoBoxEnabled {
+  return {
+    type: SET_MAP_POINT_INFO_BOX_ENABLED,
+    mapPointInfoBoxEnabled,
+  };
+}
+
+////////////////////////////////////////////////////////////////////////////////
+
 export const SET_VARIABLE_COMPARE_MODE = "SET_VARIABLE_COMPARE_MODE";
 
 export interface SetVariableCompareMode {
@@ -830,6 +848,7 @@ export type ControlAction =
   | SetVisibleInfoCardElements
   | UpdateInfoCardElementCodeMode
   | SelectVariable2
+  | SetMapPointInfoBoxEnabled
   | SetVariableCompareMode
   | SetVariableSplitPos
   | FlyTo;

src/actions/dataActions.tsx

@@ -70,6 +70,13 @@ import {
   userPlaceGroupsSelector,
 } from "@/selectors/dataSelectors";
 import { AppState } from "@/states/appState";
+import { VolumeRenderMode } from "@/states/controlState";
+import { ColorBarNorm } from "@/model/variable";
+import { StatisticsRecord } from "@/model/statistics";
+import { UserVariable, ExpressionCapabilities } from "@/model/userVariable";
+import { loadUserVariables, storeUserVariables } from "@/states/userSettings";
+import { MessageLogAction, postMessage } from "./messageLogActions";
+import { renameUserPlaceInLayer, restyleUserPlaceInLayer } from "./mapActions";
 import {
   AddActivity,
   addActivity,
@@ -84,14 +91,6 @@ import {
   SetSidebarPanelId,
   setSidebarPanelId,
 } from "./controlActions";
-import { VolumeRenderMode } from "@/states/controlState";
-import { MessageLogAction, postMessage } from "./messageLogActions";
-import { renameUserPlaceInLayer, restyleUserPlaceInLayer } from "./mapActions";
-import { ColorBarNorm } from "@/model/variable";
-import { getStatistics } from "@/api/getStatistics";
-import { StatisticsRecord } from "@/model/statistics";
-import { UserVariable, ExpressionCapabilities } from "@/model/userVariable";
-import { loadUserVariables, storeUserVariables } from "@/states/userSettings";
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -550,14 +549,15 @@ export function addStatistics() {
       dispatch(setSidebarOpen(true));
     }
     dispatch(_addStatistics(null));
-    getStatistics(
-      apiServer.url,
-      selectedDataset,
-      selectedVariable,
-      selectedPlaceInfo,
-      selectedTimeLabel,
-      getState().userAuthState.accessToken,
-    )
+    api
+      .getStatistics(
+        apiServer.url,
+        selectedDataset,
+        selectedVariable,
+        selectedPlaceInfo,
+        selectedTimeLabel,
+        getState().userAuthState.accessToken,
+      )
       .then((stats) => dispatch(_addStatistics(stats)))
       .catch((error: Error) => {
         dispatch(postMessage("error", error));

src/api/getPointValue.ts

@@ -0,0 +1,66 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2019-2024 by the xcube development team and contributors.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Dataset } from "@/model/dataset";
+import { Variable } from "@/model/variable";
+import {
+  callJsonApi,
+  makeRequestInit,
+  makeRequestUrl,
+  QueryComponent,
+} from "@/api/callApi";
+import { encodeDatasetId, encodeVariableName } from "@/model/encode";
+
+interface Value {
+  value?: number;
+}
+
+interface Result {
+  result?: Value;
+}
+
+export function getPointValue(
+  apiServerUrl: string,
+  dataset: Dataset,
+  variable: Variable,
+  lon: number,
+  lat: number,
+  time: string | null,
+  accessToken: string | null,
+): Promise<Value> {
+  const query: QueryComponent[] = [
+    ["lon", lon.toString()],
+    ["lat", lat.toString()],
+  ];
+  if (time) {
+    query.push(["time", time]);
+  }
+  const url = makeRequestUrl(
+    `${apiServerUrl}/statistics/${encodeDatasetId(dataset)}/${encodeVariableName(variable)}`,
+    query,
+  );
+  return callJsonApi(url, makeRequestInit(accessToken), (result: Result) =>
+    result.result ? result.result : {},
+  );
+}

src/api/index.ts

@@ -28,5 +28,7 @@ export { getDatasetPlaceGroup } from "./getDatasetPlaceGroup";
 export { getExpressionCapabilities } from "./getExpressionCapabilities";
 export { getServerInfo } from "./getServerInfo";
 export { getTimeSeriesForGeometry } from "./getTimeSeries";
+export { getStatistics } from "./getStatistics";
+export { getPointValue } from "./getPointValue";
 export { updateResources } from "./updateResources";
 export { HTTPError } from "./errors";

src/components/ColorBarLegend/ColorBarCanvas.tsx

@@ -33,7 +33,8 @@ import {
 } from "@/components/ColorBarLegend/constants";
 
 const styles: Record<string, CSSProperties> = {
-  error: { border: "0.5px solid red" },
+  nominal: { cursor: "pointer" },
+  error: { cursor: "pointer", border: "0.5px solid red" },
 };
 
 interface ColorBarCanvasProps {
@@ -72,7 +73,7 @@ export default function ColorBarCanvas({
         width={width || COLOR_BAR_ITEM_WIDTH}
         height={height || COLOR_BAR_ITEM_HEIGHT + 4}
         onClick={onClick}
-        style={!imageData ? styles.error : undefined}
+        style={!imageData ? styles.error : styles.nominal}
       />
     </Tooltip>
   );

src/components/ColorBarLegend/ColorBarItem.tsx

@@ -34,6 +34,7 @@ const colorBarItemStyle = (theme: Theme) => ({
   height: 20,
   borderWidth: 1,
   borderStyle: "solid",
+  cursor: "pointer",
 });
 
 const styles = makeStyles({

src/components/ColorBarLegend/ColorBarLabels.tsx

@@ -29,13 +29,14 @@ import { getLabelsForRange } from "@/util/label";
 import { makeStyles } from "@/util/styles";
 
 const styles = makeStyles({
-  label: {
+  container: {
     fontSize: "x-small",
     fontWeight: "bold",
     width: "100%",
     display: "flex",
     flexWrap: "nowrap",
     justifyContent: "space-between",
+    cursor: "pointer",
   },
 });
 
@@ -59,7 +60,7 @@ export default function ColorBarLabels({
     [minValue, maxValue, numTicks, logScaled],
   );
   return (
-    <Box sx={styles.label} onClick={onClick}>
+    <Box sx={styles.container} onClick={onClick}>
       {labels.map((label, i) => (
         <span key={i}>{label}</span>
       ))}

src/components/ColorBarLegend/ColorBarLegend.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { MouseEvent, useRef, useState } from "react";
+import { CSSProperties, MouseEvent, useRef, useState } from "react";
 import Box from "@mui/material/Box";
 import Popover from "@mui/material/Popover";
 
@@ -36,11 +36,19 @@ import ColorBarColorEditor from "./ColorBarColorEditor";
 
 const styles = makeStyles({
   container: (theme) => ({
+    position: "absolute",
+    zIndex: 1000,
+    top: 10,
+    borderRadius: "5px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#00000020",
+    backgroundColor: "#FFFFFFAA",
+    color: "black",
     paddingLeft: theme.spacing(1.5),
     paddingRight: theme.spacing(1.5),
     paddingBottom: theme.spacing(0.5),
     paddingTop: theme.spacing(0.5),
-    color: "black",
   }),
   title: (theme) => ({
     fontSize: "small",
@@ -76,13 +84,19 @@ interface ColorBarLegendProps {
   updateUserColorBars: (userColorBars: UserColorBar[]) => void;
   onOpenColorBarEditor: (event: MouseEvent<HTMLCanvasElement>) => void;
   storeSettings: () => void;
+  style?: CSSProperties;
 }
 
 export default function ColorBarLegend(
   props: Omit<ColorBarLegendProps, "onOpenColorBarEditor">,
 ) {
-  const { variableName, variableTitle, variableUnits, variableColorBar } =
-    props;
+  const {
+    variableName,
+    variableTitle,
+    variableUnits,
+    variableColorBar,
+    style,
+  } = props;
 
   const colorBarSelectAnchorRef = useRef<HTMLDivElement | null>(null);
   const [colorBarSelectAnchorEl, setColorBarSelectAnchorEl] =
@@ -106,7 +120,7 @@ export default function ColorBarLegend(
       : `${variableTitle || variableName} (${variableUnits || "-"})`;
 
   return (
-    <Box sx={styles.container} ref={colorBarSelectAnchorRef}>
+    <Box sx={styles.container} style={style} ref={colorBarSelectAnchorRef}>
       <Box sx={styles.title} component="span">
         {variableTitleWithUnits}
       </Box>

src/components/MapLayerMenu/MapLayerMenu.tsx

@@ -37,11 +37,11 @@ import Paper from "@mui/material/Paper";
 import CloseIcon from "@mui/icons-material/Close";
 
 import i18n from "@/i18n";
+import { makeStyles } from "@/util/styles";
 import { WithLocale } from "@/util/lang";
 import { LayerVisibilities } from "@/states/controlState";
-import MapLayerMenuItem from "./MapLayerMenuItem";
 import SelectableMenuItem from "@/components/SelectableMenuItem";
-import { makeStyles } from "@/util/styles";
+import MapLayerMenuItem from "./MapLayerMenuItem";
 
 const initialPos: ControlPosition = { x: 10, y: 180 };
 
@@ -78,6 +78,8 @@ interface LayerMenuProps extends WithLocale {
   ) => void;
   variableCompareMode: boolean;
   setVariableCompareMode: (selected: boolean) => void;
+  mapPointInfoBoxEnabled: boolean;
+  setMapPointInfoBoxEnabled: (showPointInfoBox: boolean) => void;
 }
 
 export default function MapLayerMenu(props: LayerMenuProps) {
@@ -89,6 +91,8 @@ export default function MapLayerMenu(props: LayerMenuProps) {
     openDialog,
     variableCompareMode,
     setVariableCompareMode,
+    mapPointInfoBoxEnabled,
+    setMapPointInfoBoxEnabled,
     ...layerSelectProps
   } = props;
 
@@ -140,10 +144,15 @@ export default function MapLayerMenu(props: LayerMenuProps) {
           <MapLayerMenuItem layerId="overlay" {...layerSelectProps} />
           <Divider />
           <SelectableMenuItem
-            title={i18n.get("Compare Mode (Swipe)")}
+            title={i18n.get("Compare Mode (Drag)")}
             selected={variableCompareMode}
             onClick={() => setVariableCompareMode(!variableCompareMode)}
           />
+          <SelectableMenuItem
+            title={i18n.get("Point Info Mode (Hover)")}
+            selected={mapPointInfoBoxEnabled}
+            onClick={() => setMapPointInfoBoxEnabled(!mapPointInfoBoxEnabled)}
+          />
           <Divider />
           <MenuItem onClick={handleUserBaseMaps}>
             {i18n.get("User Base Maps") + "..."}