changes for improve testing page view

ethernet-view/index.html

@@ -11,6 +11,10 @@
             rel="stylesheet"
             href="src/styles/globalOverride.scss"
         />
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+        />
         <meta
             name="viewport"
             content="width=device-width, initial-scale=1.0"

ethernet-view/src/App.tsx

@@ -7,7 +7,6 @@ import { AppLayout } from "layouts/AppLayout/AppLayout";
 import { useState } from "react";
 import { LoggerPage } from "pages/LoggerPage/LoggerPage";
 
-
 function App() {
 
     const isProduction = import.meta.env.PROD;

ethernet-view/src/layouts/AppLayout/AppLayout.tsx

@@ -1,9 +1,6 @@
-
 import styles from "./AppLayout.module.scss"
 import Testing from "assets/svg/testing.svg"
 import Logger from "assets/svg/logger.svg"
-import Chart from "assets/svg/chart.svg"
-
 import { Navbar } from "components/Navbar/Navbar"
 import { ReactNode } from "react"
 
@@ -25,10 +22,6 @@ export const AppLayout = ({children, pageShown, setPageShown} : Props) => {
                     icon: Logger,
                     page: "logger"
                 },
-                {
-                    icon: Chart,
-                    page: "chart"
-                }
                 ]}
                 pageShown={pageShown}
                 setPageShown={setPageShown}

ethernet-view/src/pages/TestingPage/TestingPage.tsx

@@ -1,41 +1,79 @@
-import { SplitLayout } from "layouts/SplitLayout/SplitLayout";
-import { Orientation } from "hooks/useSplit/Orientation";
+import { useState } from "react";
+// import { SplitLayout } from "layouts/SplitLayout/SplitLayout";
+// import { Orientation } from "hooks/useSplit/Orientation";
 import { ReceiveColumn } from "pages/TestingPage/ReceiveColumn/ReceiveColumn";
 import { OrderColumn } from "pages/TestingPage/OrderColumn/OrderColumn";
 import { MessagesColumn } from "pages/TestingPage/MessagesColumn/MessagesColumn";
 import { ChartsColumn } from "./ChartsColumn/ChartsColumn";
 import styles from "pages/TestingPage/TestingPage.module.scss";
-import incomingMessage from "assets/svg/incoming-message.svg"
-import paperAirplane from "assets/svg/paper-airplane.svg"
-import outgoingMessage from "assets/svg/outgoing-message.svg"
-import chart from "assets/svg/chart.svg"
+import incomingMessage from "assets/svg/incoming-message.svg";
+import paperAirplane from "assets/svg/paper-airplane.svg";
+import outgoingMessage from "assets/svg/outgoing-message.svg";
+import chart from "assets/svg/chart.svg";
 
 export const TestingPage = () => {
-    return (
-        <div id={styles.wrapper}>
-            <div id={styles.body}>
-                <SplitLayout
-                    components={[
-                        {
-                            component: <ChartsColumn />,
-                            collapsedIcon: chart
-                        },
-                        {
-                            component: <ReceiveColumn />,
-                            collapsedIcon: incomingMessage
-                        },
-                        {
-                            component: <OrderColumn />,
-                            collapsedIcon: paperAirplane
-                        },
-                        {
-                            component: <MessagesColumn />,
-                            collapsedIcon: outgoingMessage
-                        },
-                    ]}
-                    orientation={Orientation.HORIZONTAL}
-                ></SplitLayout>
+  const [collapsed, setCollapsed] = useState({
+    charts: false,
+    receive: false,
+    order: false,
+    messages: false,
+  });
+
+  const toggleCollapse = (key: keyof typeof collapsed) => {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const components = [
+    {
+      key: "charts" as const,
+      icon: chart,
+      component: <ChartsColumn />,
+      collapsed: collapsed.charts,
+    },
+    {
+      key: "receive" as const,
+      icon: incomingMessage,
+      component: <ReceiveColumn />,
+      collapsed: collapsed.receive,
+    },
+    {
+      key: "order" as const,
+      icon: paperAirplane,
+      component: <OrderColumn />,
+      collapsed: collapsed.order,
+    },
+    {
+      key: "messages" as const,
+      icon: outgoingMessage,
+      component: <MessagesColumn />,
+      collapsed: collapsed.messages,
+    },
+  ];
+
+  const visibleComponents = components.filter(c => !c.collapsed);
+
+  return (
+    <div id={styles.wrapper}>
+      <div id={styles.body}>
+        <div className="d-flex flex-row gap-2 p-2">
+          {components.map(({ key }) => (
+            <button
+              key={key}
+              className={`btn btn-sm btn-${collapsed[key] ? "outline-primary" : "primary"}`}
+              onClick={() => toggleCollapse(key)}
+            >
+              {collapsed[key] ? `Mostrar ${key}` : `Ocultar ${key}`}
+            </button>
+          ))}
+        </div>
+        <div style={{ display: "flex", height: "100%", gap: "1rem" }}>
+          {visibleComponents.map(({ key, component }) => (
+            <div key={key} style={{ flex: `1 1 ${100 / visibleComponents.length}%`, overflow: "auto" }}>
+              {component}
             </div>
+          ))}
         </div>
-    );
+      </div>
+    </div>
+  );
 };