Changes to fix indicator panel issue

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";
@@ -10,7 +11,11 @@
 import { PanelExtensionAdapter } from "@lichtblick/suite-base/components/PanelExtensionAdapter";
 import Indicator from "@lichtblick/suite-base/panels/Indicator";
 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";
@@ -25,6 +30,10 @@
   contextOverride?: Partial<PanelExtensionContext>;
 };
 
+jest.mock("@lichtblick/suite-base/testing/builders/IndicatorBuilder", () => ({
+  config: jest.fn(() => ({})),
+}));
+
 describe("Indicator Component", () => {
   beforeEach(() => {
     jest.spyOn(console, "error").mockImplementation(() => {});
@@ -35,13 +44,14 @@
   });
 
   function setup({ contextOverride, configOverride }: Setup = {}) {
+    const path = BasicBuilder.string();
     const props: IndicatorProps = {
       context: {
         initialState: {},
         layout: {
           addPanel: jest.fn(),
         },
-        onRender: undefined,
+        onRender: jest.fn(),
         panelElement: document.createElement("div"),
         saveState: jest.fn(),
         setDefaultPanelTitle: jest.fn(),
@@ -94,6 +104,7 @@
       props,
       user: userEvent.setup(),
       augmentColor,
+      path,
     };
   }
 
@@ -103,4 +114,79 @@
     const element = screen.getByText(matchingRule.label);
     expect(element).toBeTruthy();
   });
+
+  it("renders with default configuration", () => {
+    const { config } = setup();
+    expect(config).toEqual(IndicatorBuilder.config());
+  });
+
+  it("renders with custom configuration", () => {
+    const customConfig: Partial<IndicatorConfig> = {
+      path: BasicBuilder.string(),
+      style: "background" as IndicatorStyle,
+      fallbackColor: "#ff0000",
+    };
+    const { config } = setup({ configOverride: customConfig });
+    expect(config).toMatchObject(customConfig);
+  });
+
+  it("calls context.saveState on config change", () => {
+    const saveStateMock = jest.fn();
+    const { props, path } = setup({
+      contextOverride: { saveState: saveStateMock },
+    });
+    props.context.saveState({ path: path });
+    expect(saveStateMock).toHaveBeenCalledWith({ path: path });
+  });
+
+  it("calls context.setDefaultPanelTitle on config change", () => {
+    const setDefaultPanelTitleMock = jest.fn();
+    const { props, path } = setup({
+      contextOverride: { setDefaultPanelTitle: setDefaultPanelTitleMock },
+    });
+    props.context.setDefaultPanelTitle(path);
+    expect(setDefaultPanelTitleMock).toHaveBeenCalledWith(path);
+  });
+
+  it("calls context.setDefaultPanelTitle with undefined path", () => {
+    const setDefaultPanelTitleMock = jest.fn();
+    const { props, path } = setup({
+      contextOverride: { setDefaultPanelTitle: setDefaultPanelTitleMock },
+      configOverride: { path: undefined },
+    });
+    props.context.setDefaultPanelTitle(path);
+    expect(setDefaultPanelTitleMock).toHaveBeenCalledWith(path);
+  });
+
+  it("calls context.setDefaultPanelTitle with empty path", () => {
+    const setDefaultPanelTitleMock = jest.fn();
+    const { props, path } = setup({
+      contextOverride: { setDefaultPanelTitle: setDefaultPanelTitleMock },
+      configOverride: { path: "" },
+    });
+    props.context.setDefaultPanelTitle(path);
+    expect(setDefaultPanelTitleMock).toHaveBeenCalledWith(path);
+  });
+
+  it("subscribes and unsubscribes to topics", () => {
+    const subscribeMock = jest.fn();
+    const unsubscribeAllMock = jest.fn();
+    const TEST_TOPIC = BasicBuilder.string();
+    const { props } = setup({
+      contextOverride: { subscribe: subscribeMock, unsubscribeAll: unsubscribeAllMock },
+    });
+    props.context.subscribe([{ topic: TEST_TOPIC, preload: false }]);
+    expect(subscribeMock).toHaveBeenCalledWith([{ topic: TEST_TOPIC, preload: false }]);
+    props.context.unsubscribeAll();
+    expect(unsubscribeAllMock).toHaveBeenCalled();
+  });
+
+  it("updates global variables when renderState.variables is defined", () => {
+    const { props } = setup();
+    const variables = BasicBuilder.stringMap();
+    const renderState = { variables };
+
+    props.context.onRender!(renderState, jest.fn());
+    expect(props.context.onRender).toBeDefined();
+  });
 });

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} />
+      <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}>
+      <Typography className={classes.typography} color={textColor}>
+        {label}
+      </Typography>
+    </Stack>
+  );
+});
+Background.displayName = "Background";