Allow configuration of position and order of extension panels

.storybook/main.ts

@@ -14,4 +14,6 @@ const config: StorybookConfig = {
     options: {},
   },
 };
+
+// noinspection JSUnusedGlobalSymbols
 export default config;

.storybook/preview.tsx

@@ -50,4 +50,5 @@ const preview: Preview = {
   ],
 };
 
+// noinspection JSUnusedGlobalSymbols
 export default preview;

CHANGES.md

@@ -2,15 +2,26 @@
 
 ### Improvements
 
+* Redesigned the right side panel: (#477)
+  - Replaced the tabs by a sidebar comprising panel icons;
+    extension panels can now be positioned and can have own icons. (#477)
+  - Restyled many side panels
+
 * Variable layer legends are now styled according to the 
   current theme mode. (#491)
 
 * Added a `Divider` to provide a visual separation of control bar items for
   better clarity to the users. (#487)
 
+* Various style adjustments with respect to the current theme modes 
+
+  _Dark_ and _Light_.
+
+* Renamed "Info" panel into "Details"; using new icon too.
+
 * Improved _Developer Reference_ documentation.
 
-### Fixes and other Changes
+### Fixes
 
 * Fixed a problem where mouse splitters used to resize 
   two components (e.g., two layers in map view, or map view and side panels) 

docs/features.md

@@ -923,7 +923,7 @@ A list of all the features that the viewer contains will be created here, in whi
 			<td>
 				Positioned in the sidebar, the metadata for the
 				<strong>selected dataset, variable, or place</strong> is located under
-				the "Info"-Tab. The <strong>display can be enabled</strong> using the
+				the "Details"-Tab. The <strong>display can be enabled</strong> using the
 				buttons at the top left. When a display is enabled, the button's
 				background appears highlighted in gray. 
 				<br /><br />
@@ -936,7 +936,7 @@ A list of all the features that the viewer contains will be created here, in whi
 		<tr>
 			<td><b>Functionality</b></td>
 			<td>
-				Open the sidebar and navigate to the "Info" tab to view the metadata.
+				Open the sidebar and navigate to the "Details" tab to view the metadata.
 				Enable the display for the object of interest: <strong>dataset, selected
 				variable, or selected place</strong>. If no place is currently selected, the most
 				recently selected place will be used. Then, choose the relevant metadata

src/actions/controlActions.tsx

@@ -34,7 +34,6 @@ import {
   ControlState,
   LayerVisibilities,
   MapInteraction,
-  SidebarPanelId,
   TimeAnimationInterval,
   ViewMode,
   VolumeRenderMode,
@@ -501,45 +500,41 @@ export function setLayerMenuOpen(layerMenuOpen: boolean): SetLayerMenuOpen {
 
 ////////////////////////////////////////////////////////////////////////////////
 
-export const SET_SIDEBAR_POSITION = "SET_SIDEBAR_POSITION";
+export const SET_SIDE_PANEL_OPEN = "SET_SIDE_PANEL_OPEN";
 
-export interface SetSidebarPosition {
-  type: typeof SET_SIDEBAR_POSITION;
-  sidebarPosition: number;
+export interface SetSidePanelOpen {
+  type: typeof SET_SIDE_PANEL_OPEN;
+  sidePanelOpen: boolean;
 }
 
-export function setSidebarPosition(
-  sidebarPosition: number,
-): SetSidebarPosition {
-  return { type: SET_SIDEBAR_POSITION, sidebarPosition };
+export function setSidePanelOpen(sidePanelOpen: boolean): SetSidePanelOpen {
+  return { type: SET_SIDE_PANEL_OPEN, sidePanelOpen };
 }
 
 ////////////////////////////////////////////////////////////////////////////////
 
-export const SET_SIDEBAR_OPEN = "SET_SIDEBAR_OPEN";
+export const SET_SIDE_PANEL_ID = "SET_SIDE_PANEL_ID";
 
-export interface SetSidebarOpen {
-  type: typeof SET_SIDEBAR_OPEN;
-  sidebarOpen: boolean;
+export interface SetSidePanelId {
+  type: typeof SET_SIDE_PANEL_ID;
+  sidePanelId: string | null;
 }
 
-export function setSidebarOpen(sidebarOpen: boolean): SetSidebarOpen {
-  return { type: SET_SIDEBAR_OPEN, sidebarOpen };
+export function setSidePanelId(sidePanelId: string | null): SetSidePanelId {
+  return { type: SET_SIDE_PANEL_ID, sidePanelId };
 }
 
 ////////////////////////////////////////////////////////////////////////////////
 
-export const SET_SIDEBAR_PANEL_ID = "SET_SIDEBAR_PANEL_ID";
+export const SET_SIDE_PANEL_SIZE = "SET_SIDE_PANEL_SIZE";
 
-export interface SetSidebarPanelId {
-  type: typeof SET_SIDEBAR_PANEL_ID;
-  sidebarPanelId: SidebarPanelId | string;
+export interface SetSidePanelSize {
+  type: typeof SET_SIDE_PANEL_SIZE;
+  sidePanelSize: number;
 }
 
-export function setSidebarPanelId(
-  sidebarPanelId: SidebarPanelId | string,
-): SetSidebarPanelId {
-  return { type: SET_SIDEBAR_PANEL_ID, sidebarPanelId };
+export function setSidePanelSize(sidePanelSize: number): SetSidePanelSize {
+  return { type: SET_SIDE_PANEL_SIZE, sidePanelSize };
 }
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -822,9 +817,9 @@ export type ControlAction =
   | OpenDialog
   | CloseDialog
   | SetLayerMenuOpen
-  | SetSidebarPosition
-  | SetSidebarOpen
-  | SetSidebarPanelId
+  | SetSidePanelSize
+  | SetSidePanelOpen
+  | SetSidePanelId
   | SetVolumeRenderMode
   | UpdateVolumeState
   | SetVisibleInfoCardElements

src/actions/dataActions.tsx

@@ -70,10 +70,10 @@ import {
   SelectDataset,
   selectDataset,
   selectPlace,
-  SetSidebarOpen,
-  setSidebarOpen,
-  SetSidebarPanelId,
-  setSidebarPanelId,
+  SetSidePanelOpen,
+  setSidePanelOpen,
+  SetSidePanelId,
+  setSidePanelId,
 } from "./controlActions";
 import { newPersistentAppState, PersistedState } from "@/states/persistedState";
 import { applyPersistentState } from "@/actions/otherActions";
@@ -543,7 +543,7 @@ export function removeUserPlaceGroup(
 export function addStatistics() {
   return (
     dispatch: Dispatch<
-      SetSidebarOpen | SetSidebarPanelId | AddStatistics | MessageLogAction
+      SetSidePanelOpen | SetSidePanelId | AddStatistics | MessageLogAction
     >,
     getState: () => AppState,
   ) => {
@@ -553,18 +553,18 @@ export function addStatistics() {
     const selectedVariable = selectedVariableSelector(getState());
     const selectedPlaceInfo = selectedPlaceInfoSelector(getState());
     const selectedTimeLabel = selectedDatasetTimeLabelSelector(getState());
-    const sidebarOpen = getState().controlState.sidebarOpen;
-    const sidebarPanelId = getState().controlState.sidebarPanelId;
+    const sidePanelOpen = getState().controlState.sidePanelOpen;
+    const sidePanelId = getState().controlState.sidePanelId;
 
     if (!(selectedDataset && selectedVariable && selectedPlaceInfo)) {
       return;
     }
 
-    if (sidebarPanelId !== "stats") {
-      dispatch(setSidebarPanelId("stats"));
+    if (sidePanelId !== "stats") {
+      dispatch(setSidePanelId("stats"));
     }
-    if (!sidebarOpen) {
-      dispatch(setSidebarOpen(true));
+    if (!sidePanelOpen) {
+      dispatch(setSidePanelOpen(true));
     }
     dispatch(_addStatistics(null));
     api
@@ -614,7 +614,7 @@ export function removeStatistics(index: number): RemoveStatistics {
 export function addTimeSeries() {
   return (
     dispatch: Dispatch<
-      SetSidebarOpen | SetSidebarPanelId | UpdateTimeSeries | MessageLogAction
+      SetSidePanelOpen | SetSidePanelId | UpdateTimeSeries | MessageLogAction
     >,
     getState: () => AppState,
   ) => {
@@ -630,8 +630,8 @@ export function addTimeSeries() {
     const useMedian = getState().controlState.timeSeriesUseMedian;
     const includeStdev = getState().controlState.timeSeriesIncludeStdev;
     let timeChunkSize = selectedTimeChunkSizeSelector(getState());
-    const sidebarOpen = getState().controlState.sidebarOpen;
-    const sidebarPanelId = getState().controlState.sidebarPanelId;
+    const sidebarOpen = getState().controlState.sidePanelOpen;
+    const sidebarPanelId = getState().controlState.sidePanelId;
 
     const placeGroups = placeGroupsSelector(getState());
 
@@ -642,10 +642,10 @@ export function addTimeSeries() {
       selectedDatasetTimeDim
     ) {
       if (sidebarPanelId !== "timeSeries") {
-        dispatch(setSidebarPanelId("timeSeries"));
+        dispatch(setSidePanelId("timeSeries"));
       }
       if (!sidebarOpen) {
-        dispatch(setSidebarOpen(true));
+        dispatch(setSidePanelOpen(true));
       }
 
       const timeLabels = selectedDatasetTimeDim.labels;

src/actions/otherActions.tsx

@@ -39,7 +39,7 @@ function _applyPersistentState(
 
 function restoreMapView(mapState: PersistedMapState) {
   if (MAP_OBJECTS["map"]) {
-    console.log("Restoring map:", mapState);
+    console.debug("Restoring map:", mapState);
     const map = MAP_OBJECTS["map"] as OlMap;
     map.setView(new OlView(mapState.view));
   }

src/components/AuthWrapper.tsx

@@ -23,12 +23,12 @@ const AuthWrapper: React.FC<React.PropsWithChildren<AuthWrapperProps>> = ({
   }
 
   const handleSigninCallback = (_user: User | void): void => {
-    console.info("handleSigninCallback:", _user);
+    console.debug("handleSigninCallback:", _user);
     window.history.replaceState({}, document.title, window.location.pathname);
   };
 
   const handleRemoveUser = (): void => {
-    console.info("handleRemoveUser");
+    console.debug("handleRemoveUser");
     // go home after logout
     window.location.pathname = "/";
   };

src/components/ColorBarLegend/ColorBarCanvas.tsx

@@ -4,11 +4,12 @@
  * https://opensource.org/licenses/MIT.
  */
 
-import { useEffect, useRef, MouseEvent, CSSProperties } from "react";
+import { useEffect, useRef, MouseEvent } from "react";
 import { styled, Theme } from "@mui/system";
 import Tooltip from "@mui/material/Tooltip";
 
 import i18n from "@/i18n";
+import { makeCssStyles } from "@/util/styles";
 import { ColorBar, renderColorBar } from "@/model/colorBar";
 import { COLOR_BAR_ITEM_HEIGHT, COLOR_BAR_ITEM_WIDTH } from "./constants";
 import { getBorderStyle } from "./style";
@@ -18,10 +19,10 @@ const StyledCanvas = styled("canvas")(({ theme }: { theme: Theme }) => ({
   cursor: "pointer",
 }));
 
-const styles: Record<string, CSSProperties> = {
+const styles = makeCssStyles({
   nominal: {},
   error: { border: "1px solid red" },
-};
+});
 
 interface ColorBarCanvasProps {
   colorBar: ColorBar;

src/components/ControlBar.tsx

@@ -11,8 +11,9 @@ const ControlBarForm = styled("form")(({ theme }: { theme: Theme }) => ({
   display: "flex",
   flexWrap: "wrap",
   paddingTop: theme.spacing(1),
-  paddingLeft: theme.spacing(1),
-  paddingRight: theme.spacing(1),
+  paddingLeft: theme.spacing(0.5),
+  paddingRight: theme.spacing(0),
+  paddingBottom: theme.spacing(0.25),
   flexGrow: 0,
 }));