@gridsuite/commons-ui 0.238.0 → 0.240.0

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;