@gridsuite/commons-ui 0.237.0 → 0.239.0

package/dist/components/composite/report/report-treeview/treeview-item.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { RowComponentProps } from 'react-window';
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import * as React from 'react';
+export interface ReportItem {
+    id: string;
+    icon?: ReactNode;
+    label: string;
+    depth: number;
+    collapsed?: boolean;
+    isCollapsable?: boolean;
+    isLeaf?: boolean;
+    isSelected?: boolean;
+}
+export declare function TreeviewItem({ index, nodes, onSelectedItem, onExpandItem, highlightedReportId, searchTerm, currentResultIndex, searchResults, style, }: RowComponentProps<{
+    nodes: ReportItem[];
+    onSelectedItem: (node: ReportItem) => void;
+    onExpandItem: (node: ReportItem) => void;
+    highlightedReportId?: string;
+    searchTerm: string;
+    currentResultIndex: number;
+    searchResults: number[];
+}>): React.JSX.Element;

package/dist/components/composite/report/report-treeview/treeview-item.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { styled, Stack, useTheme, Box, Typography } from "@mui/material";
+import { ArrowRight, ArrowDropDown } from "@mui/icons-material";
+import "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
+import { mergeSx } from "../../../../utils/styles.js";
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const styles = {
+  content: (theme) => ({
+    color: theme.palette.text.secondary,
+    borderRadius: theme.spacing(2),
+    width: "fit-content",
+    paddingRight: theme.spacing(1),
+    fontWeight: theme.typography.fontWeightMedium
+  }),
+  labelText: (theme) => ({
+    fontWeight: "inherit",
+    marginRight: theme.spacing(2)
+  }),
+  labelRoot: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0.5, 0)
+  }),
+  root: (theme) => ({
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    }
+  }),
+  highlighted: (theme) => ({
+    backgroundColor: theme.palette.action.hover
+  })
+};
+const TreeViewItemBox = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  userSelect: "none",
+  cursor: "pointer"
+}));
+const TreeViewItemStack = styled(Stack)((props) => {
+  const { left, theme, node } = props;
+  return {
+    position: "absolute",
+    left: `${left}px`,
+    width: "fit-content",
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: node.isSelected ? `var(--tree-view-bg-color, ${theme.palette.action.selected})` : void 0,
+    color: "var(--tree-view-color)",
+    padding: theme.spacing(0.5, 0, 0.5, 2),
+    borderRadius: theme.spacing(2),
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    }
+  };
+});
+const ITEM_DEPTH_OFFSET = 12;
+function TreeviewItem({
+  index,
+  nodes,
+  onSelectedItem,
+  onExpandItem,
+  highlightedReportId,
+  searchTerm,
+  currentResultIndex,
+  searchResults,
+  style
+}) {
+  const currentNode = nodes[index];
+  const left = currentNode.depth * ITEM_DEPTH_OFFSET;
+  const isCollapsable = currentNode.isCollapsable ?? true;
+  const theme = useTheme();
+  const handleClick = useCallback(() => {
+    onSelectedItem(currentNode);
+  }, [onSelectedItem, currentNode]);
+  const handleExpand = useCallback(() => {
+    onExpandItem(currentNode);
+  }, [onExpandItem, currentNode]);
+  const highlightText = useMemo(
+    () => (text, highlight) => {
+      if (!highlight) {
+        return text;
+      }
+      const safeInput = escapeRegExp(highlight);
+      const parts = text.split(new RegExp(`(${safeInput})`, "gi"));
+      return parts.map((part, partIndex) => {
+        if (part.toLowerCase() === safeInput.toLowerCase()) {
+          const isCurrentOccurrence = searchResults[currentResultIndex] === index;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                backgroundColor: isCurrentOccurrence ? theme.searchedText.currentHighlightColor : theme.searchedText.highlightColor
+              },
+              children: part
+            },
+            `${part}-${partIndex}`
+          );
+        }
+        return part;
+      });
+    },
+    [searchResults, currentResultIndex, index, theme]
+  );
+  return /* @__PURE__ */ jsx(TreeViewItemBox, { sx: mergeSx(styles.content, styles.labelRoot), style, children: /* @__PURE__ */ jsxs(
+    TreeViewItemStack,
+    {
+      direction: "row",
+      left,
+      node: currentNode,
+      sx: mergeSx(styles.root, highlightedReportId === currentNode.id ? styles.highlighted : void 0),
+      children: [
+        isCollapsable && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: currentNode.collapsed ? ArrowRight : ArrowDropDown,
+            sx: { visibility: currentNode.isLeaf ? "hidden" : "visible", fontSize: "18px" },
+            onClick: handleExpand
+          }
+        ),
+        currentNode.icon,
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: styles.labelText, onClick: handleClick, children: highlightText(currentNode.label, searchTerm) })
+      ]
+    }
+  ) });
+}
+export {
+  TreeviewItem
+};

package/dist/components/composite/report/report-treeview/virtualized-treeview.d.ts

@@ -0,0 +1,11 @@
+import { ReportItem } from './treeview-item';
+import { ReportTree } from '../report.type';
+export interface TreeViewProps {
+    expandedTreeReports: string[];
+    setExpandedTreeReports: (reportIds: string[]) => void;
+    selectedReportId: string;
+    reportTree: ReportTree;
+    onSelectedItem: (node: ReportItem) => void;
+    highlightedReportId?: string;
+}
+export declare function VirtualizedTreeview({ expandedTreeReports, setExpandedTreeReports, selectedReportId, onSelectedItem, highlightedReportId, reportTree, }: TreeViewProps): import("react").JSX.Element;

package/dist/components/composite/report/report-treeview/virtualized-treeview.js

@@ -0,0 +1,177 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useMemo, useEffect } from "react";
+import { useListRef, List } from "react-window";
+import { Label } from "@mui/icons-material";
+import { Box } from "@mui/material";
+import { TreeviewItem } from "./treeview-item.js";
+import { useTreeViewScroll } from "./hooks/use-treeview-scroll.js";
+import { QuickSearch } from "../QuickSearch.js";
+import { reportStyles } from "../report.styles.js";
+const styles = {
+  treeItem: {
+    whiteSpace: "nowrap",
+    minHeight: "100%"
+  },
+  labelIcon: (theme) => ({
+    marginRight: theme.spacing(1)
+  }),
+  listContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  treeviewContainer: {
+    flex: 1,
+    position: "relative"
+  }
+};
+function VirtualizedTreeview({
+  expandedTreeReports,
+  setExpandedTreeReports,
+  selectedReportId,
+  onSelectedItem,
+  highlightedReportId,
+  reportTree
+}) {
+  const listRef = useListRef(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchResults, setSearchResults] = useState([]);
+  const [currentResultIndex, setCurrentResultIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const onExpandItem = useCallback(
+    (node) => {
+      if (node.collapsed) {
+        return setExpandedTreeReports([...expandedTreeReports, node.id]);
+      }
+      return setExpandedTreeReports(expandedTreeReports.filter((id) => id !== node.id));
+    },
+    [expandedTreeReports, setExpandedTreeReports]
+  );
+  const toTreeNodes = useCallback(
+    (item, depth, newExpandedTreeReports) => {
+      const result = [];
+      const collapsed = !newExpandedTreeReports.includes(item.id);
+      if (item.id) {
+        result.push({
+          collapsed,
+          depth,
+          label: item.message,
+          id: item.id,
+          isLeaf: !item.subReports.find((subReports) => subReports.id !== null),
+          icon: /* @__PURE__ */ jsx(Label, { htmlColor: item.severity.colorName, sx: styles.labelIcon }),
+          isSelected: item.id === selectedReportId
+        });
+        if (!collapsed) {
+          item.subReports.forEach((subReport) => {
+            result.push(...toTreeNodes(subReport, depth + 1, newExpandedTreeReports));
+          });
+        }
+      }
+      return result;
+    },
+    [selectedReportId]
+  );
+  const nodes = useMemo(
+    () => toTreeNodes(reportTree, 0, expandedTreeReports),
+    [reportTree, toTreeNodes, expandedTreeReports]
+  );
+  useTreeViewScroll(highlightedReportId, nodes, listRef);
+  const expandIfMatch = useCallback(
+    (item, newSearchTerm, newExpandedTreeReports) => {
+      let hasMatchingChild = false;
+      item.subReports.forEach((subReport) => {
+        if (expandIfMatch(subReport, newSearchTerm, newExpandedTreeReports)) {
+          hasMatchingChild = true;
+        }
+      });
+      if (item.message.toLowerCase().includes(newSearchTerm.toLowerCase()) || hasMatchingChild) {
+        newExpandedTreeReports.add(item.id);
+        return true;
+      }
+      return false;
+    },
+    []
+  );
+  const handleSearch = useCallback(
+    (newSearchTerm) => {
+      setSearchTerm(newSearchTerm);
+      const matches = [];
+      const newExpandedTreeReports = new Set(expandedTreeReports);
+      expandIfMatch(reportTree, newSearchTerm, newExpandedTreeReports);
+      const updatedExpandedTreeReports = Array.from(newExpandedTreeReports);
+      setExpandedTreeReports(updatedExpandedTreeReports);
+      const expandedNodes = toTreeNodes(reportTree, 0, updatedExpandedTreeReports);
+      expandedNodes.forEach((node, index) => {
+        if (node.label.toLowerCase().includes(newSearchTerm.toLowerCase())) {
+          matches.push(index);
+        }
+      });
+      setSearchResults(matches);
+      setCurrentResultIndex(matches.length > 0 ? 0 : -1);
+    },
+    [expandedTreeReports, expandIfMatch, reportTree, toTreeNodes, setExpandedTreeReports]
+  );
+  useEffect(() => {
+    if (currentResultIndex >= 0 && searchResults.length > 0) {
+      listRef.current?.scrollToRow({ index: searchResults[currentResultIndex], align: "end" });
+    }
+  }, [currentResultIndex, listRef, searchResults]);
+  const handleNavigate = useCallback(
+    (direction) => {
+      if (searchResults.length === 0) {
+        return;
+      }
+      let newIndex;
+      if (direction === "next") {
+        newIndex = (currentResultIndex + 1) % searchResults.length;
+      } else {
+        newIndex = (currentResultIndex - 1 + searchResults.length) % searchResults.length;
+      }
+      setCurrentResultIndex(newIndex);
+    },
+    [currentResultIndex, searchResults]
+  );
+  const resetSearch = useCallback(() => {
+    setSearchTerm("");
+    setSearchResults([]);
+    setCurrentResultIndex(-1);
+  }, []);
+  return /* @__PURE__ */ jsxs(Box, { sx: reportStyles.mainContainer, children: [
+    /* @__PURE__ */ jsx(
+      QuickSearch,
+      {
+        currentResultIndex,
+        onSearch: handleSearch,
+        onNavigate: handleNavigate,
+        resultCount: searchResults.length,
+        resetSearch,
+        placeholder: "searchPlaceholderLogsTreeStructure",
+        inputRef
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: styles.treeviewContainer, children: /* @__PURE__ */ jsx(Box, { sx: styles.listContainer, children: /* @__PURE__ */ jsx(
+      List,
+      {
+        listRef,
+        style: styles.treeItem,
+        rowCount: nodes.length,
+        rowHeight: 32,
+        rowProps: {
+          nodes,
+          onSelectedItem,
+          onExpandItem,
+          highlightedReportId,
+          searchTerm,
+          currentResultIndex,
+          searchResults
+        },
+        rowComponent: TreeviewItem
+      }
+    ) }) })
+  ] });
+}
+export {
+  VirtualizedTreeview
+};

package/dist/components/composite/report/report-viewer/context/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export * from './report-viewer-context';

package/dist/components/composite/report/report-viewer/context/index.js

@@ -0,0 +1,7 @@
+import { ReportFetcherContext, ReportFilterContext, useReportFetcherContext, useReportFilterContext } from "./report-viewer-context.js";
+export {
+  ReportFetcherContext,
+  ReportFilterContext,
+  useReportFetcherContext,
+  useReportFilterContext
+};

package/dist/components/composite/report/report-viewer/context/report-viewer-context.d.ts

@@ -0,0 +1,16 @@
+import { LogsPaginationConfig, MatchPosition, PagedLogs, ReportType } from '../../report.type';
+import { FilterConfig } from '../../../customAGGrid/custom-aggrid-types';
+export interface ReportFetcherContextValue {
+    fetchLogs: (reportId: string, severityList: string[], messageFilter: string, reportType: ReportType, page: number, size: number) => Promise<PagedLogs> | undefined;
+    fetchLogMatches: (reportId: string, severityList: string[], messageFilter: string, reportType: ReportType, searchTerm: string, pageSize: number) => Promise<MatchPosition[]> | undefined;
+}
+export declare const ReportFetcherContext: import('react').Context<ReportFetcherContextValue | null>;
+export declare const useReportFetcherContext: () => ReportFetcherContextValue;
+export interface ReportFilterContextValue {
+    filters: FilterConfig[] | undefined;
+    updateFilters: (filters: FilterConfig[]) => void;
+    pagination: LogsPaginationConfig;
+    changePagination: (config: LogsPaginationConfig) => void;
+}
+export declare const ReportFilterContext: import('react').Context<ReportFilterContextValue | null>;
+export declare const useReportFilterContext: () => ReportFilterContextValue;

package/dist/components/composite/report/report-viewer/context/report-viewer-context.js

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+const ReportFetcherContext = createContext(null);
+const useReportFetcherContext = () => {
+  const ctx = useContext(ReportFetcherContext);
+  if (!ctx) {
+    throw new Error("useReportFetcherContext must be used inside a ReportFetcherContext.Provider");
+  }
+  return ctx;
+};
+const ReportFilterContext = createContext(null);
+const useReportFilterContext = () => {
+  const ctx = useContext(ReportFilterContext);
+  if (!ctx) {
+    throw new Error("useReportFilterContext must be used inside a ReportFilterContext.Provider");
+  }
+  return ctx;
+};
+export {
+  ReportFetcherContext,
+  ReportFilterContext,
+  useReportFetcherContext,
+  useReportFilterContext
+};

package/dist/components/composite/report/report-viewer/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export * from './report-viewer';
+export * from './context';
+export * from './log-table';

package/dist/components/composite/report/report-viewer/index.js

@@ -0,0 +1,11 @@
+import { ReportViewer } from "./report-viewer.js";
+import { ReportFetcherContext, ReportFilterContext, useReportFetcherContext, useReportFilterContext } from "./context/report-viewer-context.js";
+import { default as default2 } from "./log-table/log-table.js";
+export {
+  default2 as LogTable,
+  ReportFetcherContext,
+  ReportFilterContext,
+  ReportViewer,
+  useReportFetcherContext,
+  useReportFilterContext
+};

package/dist/components/composite/report/report-viewer/log-table/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export { default as LogTable } from './log-table';

package/dist/components/composite/report/report-viewer/log-table/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./log-table.js";
+export {
+  default2 as LogTable
+};

package/dist/components/composite/report/report-viewer/log-table/log-table.d.ts

@@ -0,0 +1,12 @@
+import { ComputingAndNetworkModificationType, Log, SelectedReportLog, SeverityLevel } from '../../report.type';
+export type LogTableProps = {
+    selectedReport: SelectedReportLog;
+    reportType: ComputingAndNetworkModificationType;
+    severities: SeverityLevel[] | undefined;
+    onRowClick: (data: Log | undefined) => void;
+    onFiltersChanged: () => void;
+    resetFilters?: boolean;
+};
+declare function LogTable({ selectedReport, reportType, severities, onRowClick, onFiltersChanged, resetFilters, }: Readonly<LogTableProps>): import("react").JSX.Element;
+declare const _default: import('react').MemoExoticComponent<typeof LogTable>;
+export default _default;