Changes to fix indicator panel issue

packages/suite-base/src/components/Stack.tsx

@@ -127,6 +127,7 @@ export default forwardRef<HTMLDivElement, PropsWithChildren<StackProps>>(
       paddingInlineStart,
       paddingInlineEnd,
       position,
+      testId,
       style,
       zeroMinWidth = false,
       ...rest
@@ -153,24 +154,31 @@ export default forwardRef<HTMLDivElement, PropsWithChildren<StackProps>>(
       overflowX,
       overflowY,
       padding,
+      paddingBlock,
+      paddingBlockEnd,
+      paddingBlockStart,
       paddingBottom,
+      paddingInline,
+      paddingInlineEnd,
+      paddingInlineStart,
       paddingLeft,
       paddingRight,
       paddingTop,
       paddingX,
       paddingY,
-      paddingBlock,
-      paddingBlockStart,
-      paddingBlockEnd,
-      paddingInline,
-      paddingInlineStart,
-      paddingInlineEnd,
       position,
+      testId,
       zeroMinWidth,
     });
 
     return (
-      <div ref={ref} className={cx(classes.root, className)} style={style} {...rest}>
+      <div
+        ref={ref}
+        className={cx(classes.root, className)}
+        style={style}
+        data-testid={testId}
+        {...rest}
+      >
         {children}
       </div>
     );
@@ -269,6 +277,9 @@ export type StackProps = {
   /** Defines the `position` style property. */
   position?: CSSProperties["position"];
 
+  /** Defines the `data-testid` for testing purposes. */
+  testId?: string;
+
   /** Defines the `flex` style property. */
   flex?: CSSProperties["flex"];
 

packages/suite-base/src/panels/Indicator/Indicator.style.ts

@@ -3,16 +3,44 @@
 
 import { makeStyles } from "tss-react/mui";
 
-export const useStyles = makeStyles()({
-  root: {
-    width: 40,
-    height: 40,
-    borderRadius: "50%",
-    position: "relative",
-    backgroundImage: [
-      `radial-gradient(transparent, transparent 55%, rgba(255,255,255,0.4) 80%, rgba(255,255,255,0.4))`,
-      `radial-gradient(circle at 38% 35%, rgba(255,255,255,0.8), transparent 30%, transparent)`,
-      `radial-gradient(circle at 46% 44%, transparent, transparent 61%, rgba(0,0,0,0.7) 74%, rgba(0,0,0,0.7))`,
-    ].join(","),
-  },
-});
+import { IndicatorStyle } from "@lichtblick/suite-base/panels/Indicator/types";
+
+export const useStyles = makeStyles<Partial<{ style: IndicatorStyle; backgroundColor: string }>>()(
+  ({ spacing }, { style, backgroundColor = "transparent" }) => ({
+    indicatorStack: {
+      flexGrow: 1,
+      justifyContent: "space-around",
+      alignItems: "center",
+      overflow: "hidden",
+      padding: spacing(1),
+      backgroundColor: style === "background" ? backgroundColor : "transparent",
+    },
+    stack: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 4,
+      width: "10vw",
+      height: "10vw",
+      display: "flex",
+      justifyContent: "center",
+    },
+    bulb: {
+      width: "clamp(10px, 2vw, 32px)",
+      height: "clamp(10px, 2vw, 32px)",
+      borderRadius: "50%",
+      position: "relative",
+      backgroundColor,
+      backgroundImage: [
+        `radial-gradient(transparent, transparent 55%, rgba(255,255,255,0.4) 80%, rgba(255,255,255,0.4))`,
+        `radial-gradient(circle at 38% 35%, rgba(255,255,255,0.8), transparent 30%, transparent)`,
+        `radial-gradient(circle at 46% 44%, transparent, transparent 61%, rgba(0,0,0,0.7) 74%, rgba(0,0,0,0.7))`,
+      ].join(","),
+    },
+    typography: {
+      fontWeight: 700,
+      fontSize: "clamp(10px, 1vw, 52px)",
+      whiteSpace: "pre",
+      padding: spacing(0),
+    },
+  }),
+);

packages/suite-base/src/panels/Indicator/Indicator.test.tsx

@@ -1,6 +1,7 @@
 /** @jest-environment jsdom */
 // SPDX-FileCopyrightText: Copyright (C) 2023-2024 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)<lichtblick@bmwgroup.com>
 // SPDX-License-Identifier: MPL-2.0
+
 import { userEvent } from "@storybook/testing-library";
 import { render, screen } from "@testing-library/react";
 import React from "react";
@@ -9,8 +10,13 @@ import { PanelExtensionContext } from "@lichtblick/suite";
 import MockPanelContextProvider from "@lichtblick/suite-base/components/MockPanelContextProvider";
 import { PanelExtensionAdapter } from "@lichtblick/suite-base/components/PanelExtensionAdapter";
 import Indicator from "@lichtblick/suite-base/panels/Indicator";
+import { DEFAULT_CONFIG } from "@lichtblick/suite-base/panels/Indicator/constants";
 import { getMatchingRule } from "@lichtblick/suite-base/panels/Indicator/getMatchingRule";
-import { IndicatorConfig, IndicatorProps } from "@lichtblick/suite-base/panels/Indicator/types";
+import {
+  IndicatorConfig,
+  IndicatorProps,
+  IndicatorStyle,
+} from "@lichtblick/suite-base/panels/Indicator/types";
 import PanelSetup from "@lichtblick/suite-base/stories/PanelSetup";
 import BasicBuilder from "@lichtblick/suite-base/testing/builders/BasicBuilder";
 import IndicatorBuilder from "@lichtblick/suite-base/testing/builders/IndicatorBuilder";
@@ -20,6 +26,10 @@ jest.mock("./getMatchingRule", () => ({
   getMatchingRule: jest.fn(),
 }));
 
+jest.mock("@lichtblick/message-path", () => ({
+  parseMessagePath: jest.fn(),
+}));
+
 type Setup = {
   configOverride?: Partial<IndicatorConfig>;
   contextOverride?: Partial<PanelExtensionContext>;
@@ -35,13 +45,18 @@ describe("Indicator Component", () => {
   });
 
   function setup({ contextOverride, configOverride }: Setup = {}) {
+    const config: IndicatorConfig = {
+      ...IndicatorBuilder.config(),
+      ...configOverride,
+    };
+
     const props: IndicatorProps = {
       context: {
-        initialState: {},
+        initialState: config,
         layout: {
           addPanel: jest.fn(),
         },
-        onRender: undefined,
+        onRender: jest.fn(),
         panelElement: document.createElement("div"),
         saveState: jest.fn(),
         setDefaultPanelTitle: jest.fn(),
@@ -58,19 +73,19 @@ describe("Indicator Component", () => {
       },
     };
 
-    const config: IndicatorConfig = {
-      ...IndicatorBuilder.config(),
-      ...configOverride,
-    };
     const saveConfig = () => {};
     const initPanel = jest.fn();
 
     const ui: React.ReactElement = (
       <ThemeProvider isDark>
         <MockPanelContextProvider>
           <PanelSetup>
-            <PanelExtensionAdapter config={config} saveConfig={saveConfig} initPanel={initPanel}>
-              <Indicator {...props} />
+            <PanelExtensionAdapter
+              config={DEFAULT_CONFIG}
+              saveConfig={saveConfig}
+              initPanel={initPanel}
+            >
+              <Indicator overrideConfig={config} />
             </PanelExtensionAdapter>
           </PanelSetup>
         </MockPanelContextProvider>
@@ -94,13 +109,40 @@ describe("Indicator Component", () => {
       props,
       user: userEvent.setup(),
       augmentColor,
+      saveConfig,
+      initPanel,
     };
   }
 
   it("renders Indicator component", () => {
     const { matchingRule } = setup();
 
-    const element = screen.getByText(matchingRule.label);
-    expect(element).toBeTruthy();
+    expect(screen.getByText(matchingRule.label)).toBeTruthy();
+  });
+
+  it("renders with custom configuration", () => {
+    const customConfig: Partial<IndicatorConfig> = {
+      path: BasicBuilder.string(),
+      style: "background",
+      fallbackColor: "#ff0000",
+    };
+
+    const { config } = setup({ configOverride: customConfig });
+
+    expect(config).toMatchObject(customConfig);
   });
+
+  it.each<IndicatorStyle>(["bulb", "background"])(
+    "renders with the proper style indicator",
+    (style) => {
+      const { matchingRule } = setup({
+        configOverride: {
+          style,
+        },
+      });
+
+      expect(screen.getByTestId(`${style}-indicator`)).toBeTruthy();
+      expect(screen.getByText(matchingRule.label)).toBeTruthy();
+    },
+  );
 });

packages/suite-base/src/panels/Indicator/Indicator.tsx

@@ -6,7 +6,15 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
 import { Typography } from "@mui/material";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useState } from "react";
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useReducer,
+  useState,
+} from "react";
 
 import { parseMessagePath } from "@lichtblick/message-path";
 import { SettingsTreeAction } from "@lichtblick/suite";
@@ -25,18 +33,14 @@ export function Indicator({ context }: IndicatorProps): React.JSX.Element {
   // panel extensions must notify when they've completed rendering
   // onRender will setRenderDone to a done callback which we can invoke after we've rendered
   const [renderDone, setRenderDone] = useState<() => void>(() => () => {});
-  const {
-    classes,
-    theme: {
-      palette: { augmentColor },
-    },
-  } = useStyles();
 
   const [config, setConfig] = useState(() => ({
     ...DEFAULT_CONFIG,
     ...(context.initialState as Partial<IndicatorConfig>),
   }));
 
+  const { style, rules, fallbackColor, fallbackLabel } = config;
+
   const [state, dispatch] = useReducer(
     stateReducer,
     config,
@@ -125,50 +129,57 @@ export function Indicator({ context }: IndicatorProps): React.JSX.Element {
       : undefined;
   }, [latestMatchingQueriedData]);
 
-  const { style, rules, fallbackColor, fallbackLabel } = config;
   const matchingRule = useMemo(
     () => getMatchingRule(rawValue as RawValueIndicator, rules),
     [rawValue, rules],
   );
 
-  const bulbStyle = useMemo(
-    () => ({
-      backgroundColor: matchingRule?.color ?? fallbackColor,
-    }),
-    [matchingRule?.color, fallbackColor],
-  );
+  const bulbColor = matchingRule?.color ?? fallbackColor;
+  const {
+    classes,
+    theme: {
+      palette: { augmentColor },
+    },
+  } = useStyles({ style, backgroundColor: bulbColor });
+
+  const label = matchingRule?.label ?? fallbackLabel;
+  const textColor = useMemo(() => {
+    return style === "background"
+      ? augmentColor({ color: { main: bulbColor } }).contrastText
+      : bulbColor;
+  }, [style, bulbColor, augmentColor]);
 
   return (
     <Stack fullHeight>
-      <Stack
-        flexGrow={1}
-        justifyContent="space-around"
-        alignItems="center"
-        overflow="hidden"
-        padding={1}
-        style={{
-          backgroundColor:
-            style === "background" ? matchingRule?.color ?? fallbackColor : undefined,
-        }}
-      >
-        <Stack direction="row" alignItems="center" gap={2}>
-          {style === "bulb" && <div className={classes.root} style={bulbStyle} />}
-          <Typography
-            color={
-              style === "background"
-                ? augmentColor({
-                    color: { main: matchingRule?.color ?? fallbackColor },
-                  }).contrastText
-                : matchingRule?.color ?? fallbackColor
-            }
-            fontFamily="fontMonospace"
-            variant="h1"
-            whiteSpace="pre"
-          >
-            {matchingRule?.label ?? fallbackLabel}
-          </Typography>
-        </Stack>
+      <Stack className={classes.indicatorStack}>
+        {style === "bulb" && <Bulb label={label} bulbColor={bulbColor} />}
+        {style === "background" && <Background label={label} textColor={textColor} />}
       </Stack>
     </Stack>
   );
 }
+
+const Bulb = memo(({ label, bulbColor }: { label: string; bulbColor: string }) => {
+  const { classes } = useStyles({ backgroundColor: bulbColor });
+
+  return (
+    <Stack className={classes.stack}>
+      <div className={classes.bulb} data-testid="bulb-indicator" />
+      <Typography className={classes.typography}>{label}</Typography>
+    </Stack>
+  );
+});
+Bulb.displayName = "Bulb";
+
+const Background = memo(({ label, textColor }: { label: string; textColor: string }) => {
+  const { classes } = useStyles({});
+
+  return (
+    <Stack className={classes.stack} testId="background-indicator">
+      <Typography className={classes.typography} color={textColor}>
+        {label}
+      </Typography>
+    </Stack>
+  );
+});
+Background.displayName = "Background";