new-log-viewer: Integrate latest clp-ffi-js with support for log-level filtering; Add log-level selector to StatusBar.

new-log-viewer/package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "build": "webpack --config webpack.prod.js",
     "start": "webpack serve --open --config webpack.dev.js",
-
     "lint": "npm run lint:check",
     "lint:check": "npm-run-all --sequential --continue-on-error lint:check:*",
     "lint:check:css": "stylelint src/**/*.css",
@@ -30,7 +29,7 @@
     "@mui/icons-material": "^6.1.0",
     "@mui/joy": "^5.0.0-beta.48",
     "axios": "^1.7.2",
-    "clp-ffi-js": "^0.1.0",
+    "clp-ffi-js": "^0.2.0",
     "dayjs": "^1.11.11",
     "monaco-editor": "^0.50.0",
     "react": "^18.3.1",

new-log-viewer/src/components/StatusBar/LogLevelSelect/LogLevelChip.css

@@ -0,0 +1,8 @@
+.log-level-chip {
+    /* stylelint-disable-next-line custom-property-pattern */
+    --Chip-radius: 0;
+}
+
+.log-level-chip span {
+    width: 1.4ch;
+}

new-log-viewer/src/components/StatusBar/LogLevelSelect/LogLevelChip.tsx

@@ -0,0 +1,54 @@
+import {
+    Chip,
+    Tooltip,
+} from "@mui/joy";
+import {DefaultColorPalette} from "@mui/joy/styles/types/colorSystem";
+
+import {LOG_LEVEL} from "../../../typings/logs";
+
+import "./LogLevelChip.css";
+
+
+/**
+ * Maps log levels to colors from JoyUI's default color palette.
+ */
+const LOG_LEVEL_COLOR_MAP: Record<LOG_LEVEL, DefaultColorPalette> = Object.freeze({
+    [LOG_LEVEL.UNKNOWN]: "neutral",
+    [LOG_LEVEL.TRACE]: "success",
+    [LOG_LEVEL.DEBUG]: "success",
+    [LOG_LEVEL.INFO]: "primary",
+    [LOG_LEVEL.WARN]: "warning",
+    [LOG_LEVEL.ERROR]: "danger",
+    [LOG_LEVEL.FATAL]: "danger",
+});
+
+interface LogLevelChipProps {
+    name: string,
+    value: LOG_LEVEL,
+}
+
+/**
+ * Renders a log level chip.
+ *
+ * @param props
+ * @param props.name
+ * @param props.value
+ * @return
+ */
+const LogLevelChip = ({name, value}: LogLevelChipProps) => (
+    <Tooltip
+        key={value}
+        title={name}
+    >
+        <Chip
+            className={"log-level-chip"}
+            color={LOG_LEVEL_COLOR_MAP[value]}
+            variant={"outlined"}
+        >
+            {name[0]}
+        </Chip>
+    </Tooltip>
+);
+
+
+export default LogLevelChip;

new-log-viewer/src/components/StatusBar/LogLevelSelect/index.css

@@ -0,0 +1,21 @@
+.log-level-select {
+    /* JoyUI has a rounding issue when calculating the listbox position, causing it to misjudge if
+      the listbox will fit on the right side. To mitigate this, we shift the select box 1px to the
+      left. */
+    margin-right: 1px;
+}
+
+.log-level-select-render-value-box {
+    display: flex;
+    gap: 2px;
+}
+
+.log-level-select-render-value-box-label {
+    /* Disable `Chip`'s background style. */
+    background-color: initial !important;
+}
+
+.log-level-select-listbox {
+    /* Disallow width auto-resizing with the `Select` button. */
+    max-width: 0;
+}

new-log-viewer/src/components/StatusBar/LogLevelSelect/index.tsx

@@ -0,0 +1,252 @@
+import React, {
+    useCallback,
+    useContext,
+    useEffect,
+    useState,
+} from "react";
+
+import {SelectValue} from "@mui/base/useSelect";
+import {
+    Box,
+    Checkbox,
+    Chip,
+    IconButton,
+    ListItemContent,
+    ListItemDecorator,
+    Option,
+    Select,
+    SelectOption,
+    Stack,
+    Tooltip,
+} from "@mui/joy";
+
+import AddIcon from "@mui/icons-material/Add";
+import CloseIcon from "@mui/icons-material/Close";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import RemoveIcon from "@mui/icons-material/Remove";
+
+import {StateContext} from "../../../contexts/StateContextProvider";
+import {
+    INVALID_LOG_LEVEL_VALUE,
+    LOG_LEVEL,
+    LOG_LEVEL_NAMES,
+    MAX_LOG_LEVEL,
+} from "../../../typings/logs";
+import {range} from "../../../utils/data";
+import LogLevelChip from "./LogLevelChip";
+
+import "./index.css";
+
+
+interface LogSelectOptionProps {
+    isChecked: boolean,
+    logLevelName: string,
+    logLevelValue: LOG_LEVEL,
+    onCheckboxClick: React.MouseEventHandler
+    onOptionClick: React.MouseEventHandler
+}
+
+/**
+ * Renders an <Option/> in the <LogLevelSelect/> for selecting some log level and/or the levels
+ * above it.
+ *
+ * @param props
+ * @param props.isChecked
+ * @param props.logLevelName
+ * @param props.logLevelValue
+ * @param props.onCheckboxClick
+ * @param props.onOptionClick
+ * @return
+ */
+const LogSelectOption = ({
+    isChecked,
+    logLevelName,
+    logLevelValue,
+    onCheckboxClick,
+    onOptionClick,
+}: LogSelectOptionProps) => {
+    return (
+        <Option
+            data-value={logLevelValue}
+            key={logLevelName}
+            value={logLevelValue}
+            onClick={onOptionClick}
+        >
+            <ListItemDecorator>
+                <Tooltip
+                    placement={"left"}
+                    title={
+                        <Stack
+                            alignItems={"center"}
+                            direction={"row"}
+                        >
+                            {isChecked ?
+                                <RemoveIcon/> :
+                                <AddIcon/>}
+                            {logLevelName}
+                        </Stack>
+                    }
+                >
+                    <Checkbox
+                        checked={isChecked}
+                        size={"sm"}
+                        value={logLevelValue}
+                        onClick={onCheckboxClick}/>
+                </Tooltip>
+            </ListItemDecorator>
+            <Tooltip
+                placement={"left"}
+                title={
+                    <Stack
+                        alignItems={"center"}
+                        direction={"row"}
+                    >
+                        {logLevelName}
+                        {" and below"}
+                    </Stack>
+                }
+            >
+                <ListItemContent>
+                    {logLevelName}
+                </ListItemContent>
+            </Tooltip>
+        </Option>
+    );
+};
+
+interface ClearFiltersOptionProps {
+    onClick: () => void
+}
+
+/**
+ * Renders an <Option/> to clear all filters in the <LogLevelSelect/>.
+ *
+ * @param props
+ * @param props.onClick
+ * @return
+ */
+const ClearFiltersOption = ({onClick}: ClearFiltersOptionProps) => (
+    <Option
+        value={INVALID_LOG_LEVEL_VALUE}
+        onClick={onClick}
+    >
+        <ListItemDecorator>
+            <CloseIcon/>
+        </ListItemDecorator>
+        Clear filters
+    </Option>
+);
+
+/**
+ * Renders a dropdown box for selecting log levels.
+ *
+ * @return
+ */
+const LogLevelSelect = () => {
+    const [selectedLogLevels, setSelectedLogLevels] = useState<LOG_LEVEL[]>([]);
+    const {setLogLevelFilter} = useContext(StateContext);
+
+    const handleRenderValue = (selected: SelectValue<SelectOption<LOG_LEVEL>, true>) => (
+        <Box className={"log-level-select-render-value-box"}>
+            <Chip className={"log-level-select-render-value-box-label"}>
+                Log Level
+            </Chip>
+            {selected.map((selectedOption) => (
+                <LogLevelChip
+                    key={selectedOption.value}
+                    name={selectedOption.label as string}
+                    value={selectedOption.value}/>
+            ))}
+        </Box>
+    );
+
+    const handleCheckboxClick = useCallback((ev: React.MouseEvent<HTMLInputElement>) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        const target = ev.target as HTMLInputElement;
+        const value = Number(target.value) as LOG_LEVEL;
+        let newSelectedLogLevels: LOG_LEVEL[];
+        if (selectedLogLevels.includes(value)) {
+            newSelectedLogLevels = selectedLogLevels.filter((logLevel) => logLevel !== value);
+        } else {
+            newSelectedLogLevels = [
+                ...selectedLogLevels,
+                value,
+            ];
+        }
+        setSelectedLogLevels(newSelectedLogLevels.sort((a, b) => a - b));
+    }, [selectedLogLevels]);
+
+    const handleOptionClick = useCallback((ev: React.MouseEvent) => {
+        const currentTarget = ev.currentTarget as HTMLElement;
+        if ("undefined" === typeof currentTarget.dataset.value) {
+            console.error("Unexpected undefined value for \"data-value\" attribute");
+
+            return;
+        }
+
+        const selectedValue = Number(currentTarget.dataset.value);
+        setSelectedLogLevels(range({begin: selectedValue, end: 1 + MAX_LOG_LEVEL}));
+    }, []);
+
+    const handleSelectClearButtonClick = () => {
+        setSelectedLogLevels([]);
+    };
+
+    useEffect(() => {
+        setLogLevelFilter((0 === selectedLogLevels.length ?
+            null :
+            selectedLogLevels));
+    }, [
+        setLogLevelFilter,
+        selectedLogLevels,
+    ]);
+
+    return (
+        <Select
+            className={"log-level-select"}
+            multiple={true}
+            renderValue={handleRenderValue}
+            size={"sm"}
+            value={selectedLogLevels}
+            variant={"soft"}
+            indicator={0 === selectedLogLevels.length ?
+                <KeyboardArrowUpIcon/> :
+                <Tooltip title={"Clear filters"}>
+                    <IconButton
+                        variant={"plain"}
+                        onClick={handleSelectClearButtonClick}
+                    >
+                        <CloseIcon/>
+                    </IconButton>
+                </Tooltip>}
+            placeholder={
+                <Chip className={"log-level-select-render-value-box-label"}>
+                    Log Level
+                </Chip>
+            }
+            slotProps={{
+                listbox: {
+                    className: "log-level-select-listbox",
+                    placement: "top-end",
+                },
+            }}
+        >
+            <ClearFiltersOption onClick={handleSelectClearButtonClick}/>
+            {LOG_LEVEL_NAMES.map((logLevelName, logLevelValue) => {
+                const checked = selectedLogLevels.includes(logLevelValue);
+                return (
+                    <LogSelectOption
+                        isChecked={checked}
+                        key={logLevelName}
+                        logLevelName={logLevelName}
+                        logLevelValue={logLevelValue}
+                        onCheckboxClick={handleCheckboxClick}
+                        onOptionClick={handleOptionClick}/>
+                );
+            })}
+        </Select>
+    );
+};
+export default LogLevelSelect;

new-log-viewer/src/components/StatusBar/index.css

@@ -3,6 +3,7 @@
     bottom: 0;
 
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
 
     width: 100%;