split improvements and bugfixes

Author: todti

packages/web-components/src/components/Tree/Tree.tsx

@@ -1,4 +1,5 @@
 import type { Statistic } from "@allurereport/core-api";
+import type { Signal } from "@preact/signals";
 import cx from "clsx";
 import type { AllureAwesomeRecursiveTree, AllureAwesomeStatus, TreeFiltersState } from "global";
 import type { FunctionComponent } from "preact";
@@ -18,8 +19,8 @@ interface TreeProps {
   toggleTree: (id: string) => void;
   navigateTo: (id: string) => void;
   routeId?: string;
-  statsStore: StoreSignalState<Statistic>;
-  treeFiltersStore: TreeFiltersState;
+  statsStore: Signal<StoreSignalState<Statistic>>;
+  treeFiltersStore: Signal<TreeFiltersState>;
 }
 
 export const Tree: FunctionComponent<TreeProps> = ({
@@ -92,7 +93,7 @@ export const Tree: FunctionComponent<TreeProps> = ({
     <div className={styles.tree}>
       {name && (
         <TreeHeader
-          treeFiltersStore={treeFiltersStore}
+          treeFiltersStore={treeFiltersStore.value}
           statsStore={statsStore}
           categoryTitle={name}
           isOpened={isOpened}

packages/web-components/src/components/Tree/TreeHeader.tsx

@@ -1,8 +1,10 @@
 import { type Statistic, statusesList } from "@allurereport/core-api";
+import type { Signal } from "@preact/signals";
 import { clsx } from "clsx";
 import type { TreeFiltersState } from "global";
 import { type FunctionComponent } from "preact";
 import { ArrowButton } from "@/components/ArrowButton";
+import type { StoreSignalState } from "@/components/Loadable";
 import { Loadable } from "@/components/Loadable";
 import { Text } from "@/components/Typography";
 import styles from "./styles.scss";
@@ -12,7 +14,7 @@ interface TreeHeaderProps {
   categoryTitle: string;
   isOpened: boolean;
   toggleTree: () => void;
-  statsStore: any;
+  statsStore: Signal<StoreSignalState<Statistic>>;
   treeFiltersStore: TreeFiltersState;
 }
 
@@ -50,10 +52,9 @@ export const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
         const treeHeaderBar = statistic
           ? statusesList
               .map((status) => ({ status, value: statistic[status] }))
-              .filter(
-                ({ status, value }) =>
-                  value !== undefined && (statusFilter === "total" || (statusFilter === status && value > 0)),
-              )
+              .filter(({ status, value }) => {
+                return value !== undefined && (statusFilter === "total" || (statusFilter === status && value > 0));
+              })
               .map(({ status, value }) => {
                 const className = clsx(styles["tree-header-bar-item"], styles[status]);
                 const style = { flexGrow: value };